|
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290 |
- # rc-util
-
- Common Utils For React Component.
-
- [![NPM version][npm-image]][npm-url]
- [![David dm][david-dm-image]][david-dm-url]
- [![node version][node-image]][node-url]
- [![npm download][download-image]][download-url]
-
- [npm-image]: http://img.shields.io/npm/v/rc-util.svg?style=flat-square
- [npm-url]: http://npmjs.org/package/rc-util
- [travis-image]: https://img.shields.io/travis/react-component/util.svg?style=flat-square
- [travis-url]: https://travis-ci.org/react-component/util
- [coveralls-image]: https://img.shields.io/coveralls/react-component/util.svg?style=flat-square
- [coveralls-url]: https://coveralls.io/r/react-component/util?branch=master
- [david-dm-image]: https://img.shields.io/david/react-component/util.svg
- [david-dm-url]: https://david-dm.org/react-component/util
- [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
- [node-url]: http://nodejs.org/download/
- [download-image]: https://img.shields.io/npm/dm/rc-util.svg?style=flat-square
- [download-url]: https://npmjs.org/package/rc-util
-
- ## Install
-
- [](https://npmjs.org/package/rc-util)
-
- ## API
-
- ### createChainedFunction
-
- > (...functions): Function
-
- Create a function which will call all the functions with it's arguments from left to right.
-
- ```jsx
- import createChainedFunction from 'rc-util/lib/createChainedFunction';
- ```
-
- ### deprecated
-
- > (prop: string, instead: string, component: string): void
-
- Log an error message to warn developers that `prop` is deprecated.
-
- ```jsx
- import deprecated from 'rc-util/lib/deprecated';
- ```
-
- ### getContainerRenderMixin
-
- > (config: Object): Object
-
- To generate a mixin which will render specific component into specific container automatically.
-
- ```jsx
- import getContainerRenderMixin from 'rc-util/lib/getContainerRenderMixin';
- ```
-
- Fields in `config` and their meanings.
-
- | Field | Type | Description | Default |
- |-------|------|-------------|---------|
- | autoMount | boolean | Whether to render component into container automatically | true |
- | autoDestroy | boolean | Whether to remove container automatically while the component is unmounted | true |
- | isVisible | (instance): boolean | A function to get current visibility of the component | - |
- | isForceRender | (instance): boolean | A function to determine whether to render popup even it's not visible | - |
- | getComponent | (instance, extra): ReactNode | A function to get the component which will be rendered into container | - |
- | getContainer | (instance): HTMLElement | A function to get the container | |
-
- ### Portal
-
- Render children to the specific container;
-
- ```jsx
- import Portal from 'rc-util/lib/Portal';
- ```
-
- Props:
-
- | Prop | Type | Description | Default |
- |-------|------|-------------|---------|
- | children | ReactChildren | Content render to the container | - |
- | getContainer | (): HTMLElement | A function to get the container | - |
-
-
- ### getScrollBarSize
-
- > (fresh?: boolean): number
-
- Get the width of scrollbar.
-
- ```jsx
- import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
- ```
-
- ### guid
-
- > (): string
-
- To generate a global unique id across current application.
-
- ```jsx
- import guid from 'rc-util/lib/guid';
- ```
-
- ### pickAttrs
-
- > (props: Object): Object
-
- Pick valid HTML attributes and events from props.
-
- ```jsx
- import pickAttrs from 'rc-util/lib/pickAttrs';
- ```
-
- ### warn
-
- > (msg: string): void
-
- A shallow wrapper of `console.warn`.
-
- ```jsx
- import warn from 'rc-util/lib/warn';
- ```
-
- ### warning
-
- > (valid: boolean, msg: string): void
-
- A shallow wrapper of [warning](https://github.com/BerkeleyTrue/warning), but only warning once for the same message.
-
- ```jsx
- import warning, { noteOnce } from 'rc-util/lib/warning';
-
- warning(false, '[antd Component] test hello world');
-
- // Low level note
- noteOnce(false, '[antd Component] test hello world');
- ```
-
- ### Children
-
- A collection of functions to operate React elements' children.
-
- #### Children/mapSelf
-
- > (children): children
-
- Return a shallow copy of children.
-
- ```jsx
- import mapSelf from 'rc-util/lib/Children/mapSelf';
- ```
-
- #### Children/toArray
-
- > (children: ReactNode[]): ReactNode[]
-
- Convert children into an array.
-
- ```jsx
- import toArray from 'rc-util/lib/Children/toArray';
- ```
-
- ### Dom
-
- A collection of functions to operate DOM elements.
-
- #### Dom/addEventlistener
-
- > (target: ReactNode, eventType: string, listener: Function): { remove: Function }
-
- A shallow wrapper of [add-dom-event-listener](https://github.com/yiminghe/add-dom-event-listener).
-
- ```jsx
- import addEventlistener from 'rc-util/lib/Dom/addEventlistener';
- ```
-
- #### Dom/canUseDom
-
- > (): boolean
-
- Check if DOM is available.
-
- ```jsx
- import canUseDom from 'rc-util/lib/Dom/canUseDom';
- ```
-
- #### Dom/class
-
- A collection of functions to operate DOM nodes' class name.
-
- * `hasClass(node: HTMLElement, className: string): boolean`
- * `addClass(node: HTMLElement, className: string): void`
- * `removeClass(node: HTMLElement, className: string): void`
-
- ```jsx
- import cssClass from 'rc-util/lib/Dom/class;
- ```
-
- #### Dom/contains
-
- > (root: HTMLElement, node: HTMLElement): boolean
-
- Check if node is equal to root or in the subtree of root.
-
- ```jsx
- import contains from 'rc-util/lib/Dom/contains';
- ```
-
- #### Dom/css
-
- A collection of functions to get or set css styles.
-
- * `get(node: HTMLElement, name?: string): any`
- * `set(node: HTMLElement, name?: string, value: any) | set(node, object)`
- * `getOuterWidth(el: HTMLElement): number`
- * `getOuterHeight(el: HTMLElement): number`
- * `getDocSize(): { width: number, height: number }`
- * `getClientSize(): { width: number, height: number }`
- * `getScroll(): { scrollLeft: number, scrollTop: number }`
- * `getOffset(node: HTMLElement): { left: number, top: number }`
-
- ```jsx
- import css from 'rc-util/lib/Dom/css';
- ```
-
- #### Dom/focus
-
- A collection of functions to operate focus status of DOM node.
-
- * `saveLastFocusNode(): void`
- * `clearLastFocusNode(): void`
- * `backLastFocusNode(): void`
- * `getFocusNodeList(node: HTMLElement): HTMLElement[]` get a list of focusable nodes from the subtree of node.
- * `limitTabRange(node: HTMLElement, e: Event): void`
-
- ```jsx
- import focus from 'rc-util/lib/Dom/focus';
- ```
-
- #### Dom/support
-
- > { animation: boolean | Object, transition: boolean | Object }
-
- A flag to tell whether current environment supports `animationend` or `transitionend`.
-
- ```jsx
- import support from 'rc-util/lib/Dom/support';
- ```
-
- ### KeyCode
-
- > Enum
-
- Enum of KeyCode, please check the [definition](https://github.com/react-component/util/blob/master/src/KeyCode.js) of it.
-
- ```jsx
- import KeyCode from 'rc-util/lib/KeyCode';
- ```
-
- #### KeyCode.isTextModifyingKeyEvent
-
- > (e: Event): boolean
-
- Whether text and modified key is entered at the same time.
-
- #### KeyCode.isCharacterKey
-
- > (keyCode: KeyCode): boolean
-
- Whether character is entered.
-
- ### switchScrollingEffect
-
- > (close: boolean) => void
-
- improve shake when page scroll bar hidden.
-
- `switchScrollingEffect` change body style, and add a class `ant-scrolling-effect` when called, so if you page look abnormal, please check this;
-
- ```js
- import switchScrollingEffect from "./src/switchScrollingEffect";
-
- switchScrollingEffect();
- ```
-
- ## License
-
- [MIT](/LICENSE)
|