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