You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

README.md 7.0 KiB

3 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290
  1. # rc-util
  2. Common Utils For React Component.
  3. [![NPM version][npm-image]][npm-url]
  4. [![David dm][david-dm-image]][david-dm-url]
  5. [![node version][node-image]][node-url]
  6. [![npm download][download-image]][download-url]
  7. [npm-image]: http://img.shields.io/npm/v/rc-util.svg?style=flat-square
  8. [npm-url]: http://npmjs.org/package/rc-util
  9. [travis-image]: https://img.shields.io/travis/react-component/util.svg?style=flat-square
  10. [travis-url]: https://travis-ci.org/react-component/util
  11. [coveralls-image]: https://img.shields.io/coveralls/react-component/util.svg?style=flat-square
  12. [coveralls-url]: https://coveralls.io/r/react-component/util?branch=master
  13. [david-dm-image]: https://img.shields.io/david/react-component/util.svg
  14. [david-dm-url]: https://david-dm.org/react-component/util
  15. [node-image]: https://img.shields.io/badge/node.js-%3E=_0.10-green.svg?style=flat-square
  16. [node-url]: http://nodejs.org/download/
  17. [download-image]: https://img.shields.io/npm/dm/rc-util.svg?style=flat-square
  18. [download-url]: https://npmjs.org/package/rc-util
  19. ## Install
  20. [![rc-util](https://nodei.co/npm/rc-util.png)](https://npmjs.org/package/rc-util)
  21. ## API
  22. ### createChainedFunction
  23. > (...functions): Function
  24. Create a function which will call all the functions with it's arguments from left to right.
  25. ```jsx
  26. import createChainedFunction from 'rc-util/lib/createChainedFunction';
  27. ```
  28. ### deprecated
  29. > (prop: string, instead: string, component: string): void
  30. Log an error message to warn developers that `prop` is deprecated.
  31. ```jsx
  32. import deprecated from 'rc-util/lib/deprecated';
  33. ```
  34. ### getContainerRenderMixin
  35. > (config: Object): Object
  36. To generate a mixin which will render specific component into specific container automatically.
  37. ```jsx
  38. import getContainerRenderMixin from 'rc-util/lib/getContainerRenderMixin';
  39. ```
  40. Fields in `config` and their meanings.
  41. | Field | Type | Description | Default |
  42. |-------|------|-------------|---------|
  43. | autoMount | boolean | Whether to render component into container automatically | true |
  44. | autoDestroy | boolean | Whether to remove container automatically while the component is unmounted | true |
  45. | isVisible | (instance): boolean | A function to get current visibility of the component | - |
  46. | isForceRender | (instance): boolean | A function to determine whether to render popup even it's not visible | - |
  47. | getComponent | (instance, extra): ReactNode | A function to get the component which will be rendered into container | - |
  48. | getContainer | (instance): HTMLElement | A function to get the container | |
  49. ### Portal
  50. Render children to the specific container;
  51. ```jsx
  52. import Portal from 'rc-util/lib/Portal';
  53. ```
  54. Props:
  55. | Prop | Type | Description | Default |
  56. |-------|------|-------------|---------|
  57. | children | ReactChildren | Content render to the container | - |
  58. | getContainer | (): HTMLElement | A function to get the container | - |
  59. ### getScrollBarSize
  60. > (fresh?: boolean): number
  61. Get the width of scrollbar.
  62. ```jsx
  63. import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
  64. ```
  65. ### guid
  66. > (): string
  67. To generate a global unique id across current application.
  68. ```jsx
  69. import guid from 'rc-util/lib/guid';
  70. ```
  71. ### pickAttrs
  72. > (props: Object): Object
  73. Pick valid HTML attributes and events from props.
  74. ```jsx
  75. import pickAttrs from 'rc-util/lib/pickAttrs';
  76. ```
  77. ### warn
  78. > (msg: string): void
  79. A shallow wrapper of `console.warn`.
  80. ```jsx
  81. import warn from 'rc-util/lib/warn';
  82. ```
  83. ### warning
  84. > (valid: boolean, msg: string): void
  85. A shallow wrapper of [warning](https://github.com/BerkeleyTrue/warning), but only warning once for the same message.
  86. ```jsx
  87. import warning, { noteOnce } from 'rc-util/lib/warning';
  88. warning(false, '[antd Component] test hello world');
  89. // Low level note
  90. noteOnce(false, '[antd Component] test hello world');
  91. ```
  92. ### Children
  93. A collection of functions to operate React elements' children.
  94. #### Children/mapSelf
  95. > (children): children
  96. Return a shallow copy of children.
  97. ```jsx
  98. import mapSelf from 'rc-util/lib/Children/mapSelf';
  99. ```
  100. #### Children/toArray
  101. > (children: ReactNode[]): ReactNode[]
  102. Convert children into an array.
  103. ```jsx
  104. import toArray from 'rc-util/lib/Children/toArray';
  105. ```
  106. ### Dom
  107. A collection of functions to operate DOM elements.
  108. #### Dom/addEventlistener
  109. > (target: ReactNode, eventType: string, listener: Function): { remove: Function }
  110. A shallow wrapper of [add-dom-event-listener](https://github.com/yiminghe/add-dom-event-listener).
  111. ```jsx
  112. import addEventlistener from 'rc-util/lib/Dom/addEventlistener';
  113. ```
  114. #### Dom/canUseDom
  115. > (): boolean
  116. Check if DOM is available.
  117. ```jsx
  118. import canUseDom from 'rc-util/lib/Dom/canUseDom';
  119. ```
  120. #### Dom/class
  121. A collection of functions to operate DOM nodes' class name.
  122. * `hasClass(node: HTMLElement, className: string): boolean`
  123. * `addClass(node: HTMLElement, className: string): void`
  124. * `removeClass(node: HTMLElement, className: string): void`
  125. ```jsx
  126. import cssClass from 'rc-util/lib/Dom/class;
  127. ```
  128. #### Dom/contains
  129. > (root: HTMLElement, node: HTMLElement): boolean
  130. Check if node is equal to root or in the subtree of root.
  131. ```jsx
  132. import contains from 'rc-util/lib/Dom/contains';
  133. ```
  134. #### Dom/css
  135. A collection of functions to get or set css styles.
  136. * `get(node: HTMLElement, name?: string): any`
  137. * `set(node: HTMLElement, name?: string, value: any) | set(node, object)`
  138. * `getOuterWidth(el: HTMLElement): number`
  139. * `getOuterHeight(el: HTMLElement): number`
  140. * `getDocSize(): { width: number, height: number }`
  141. * `getClientSize(): { width: number, height: number }`
  142. * `getScroll(): { scrollLeft: number, scrollTop: number }`
  143. * `getOffset(node: HTMLElement): { left: number, top: number }`
  144. ```jsx
  145. import css from 'rc-util/lib/Dom/css';
  146. ```
  147. #### Dom/focus
  148. A collection of functions to operate focus status of DOM node.
  149. * `saveLastFocusNode(): void`
  150. * `clearLastFocusNode(): void`
  151. * `backLastFocusNode(): void`
  152. * `getFocusNodeList(node: HTMLElement): HTMLElement[]` get a list of focusable nodes from the subtree of node.
  153. * `limitTabRange(node: HTMLElement, e: Event): void`
  154. ```jsx
  155. import focus from 'rc-util/lib/Dom/focus';
  156. ```
  157. #### Dom/support
  158. > { animation: boolean | Object, transition: boolean | Object }
  159. A flag to tell whether current environment supports `animationend` or `transitionend`.
  160. ```jsx
  161. import support from 'rc-util/lib/Dom/support';
  162. ```
  163. ### KeyCode
  164. > Enum
  165. Enum of KeyCode, please check the [definition](https://github.com/react-component/util/blob/master/src/KeyCode.js) of it.
  166. ```jsx
  167. import KeyCode from 'rc-util/lib/KeyCode';
  168. ```
  169. #### KeyCode.isTextModifyingKeyEvent
  170. > (e: Event): boolean
  171. Whether text and modified key is entered at the same time.
  172. #### KeyCode.isCharacterKey
  173. > (keyCode: KeyCode): boolean
  174. Whether character is entered.
  175. ### switchScrollingEffect
  176. > (close: boolean) => void
  177. improve shake when page scroll bar hidden.
  178. `switchScrollingEffect` change body style, and add a class `ant-scrolling-effect` when called, so if you page look abnormal, please check this;
  179. ```js
  180. import switchScrollingEffect from "./src/switchScrollingEffect";
  181. switchScrollingEffect();
  182. ```
  183. ## License
  184. [MIT](/LICENSE)