304 lines
8.2 KiB
Markdown
304 lines
8.2 KiB
Markdown
# rc-util
|
|
|
|
Common Utils For React Component.
|
|
|
|
[![NPM version][npm-image]][npm-url]
|
|
[![npm download][download-image]][download-url]
|
|
[![build status][github-actions-image]][github-actions-url]
|
|
[![Codecov][codecov-image]][codecov-url]
|
|
[![bundle size][bundlephobia-image]][bundlephobia-url]
|
|
[![dumi][dumi-image]][dumi-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/master?style=flat-square
|
|
[travis-url]: https://travis-ci.com/react-component/util
|
|
[github-actions-image]: https://github.com/react-component/util/workflows/CI/badge.svg
|
|
[github-actions-url]: https://github.com/react-component/util/actions
|
|
[codecov-image]: https://img.shields.io/codecov/c/github/react-component/util/master.svg?style=flat-square
|
|
[codecov-url]: https://app.codecov.io/gh/react-component/util
|
|
[david-url]: https://david-dm.org/react-component/util
|
|
[david-image]: https://david-dm.org/react-component/util/status.svg?style=flat-square
|
|
[david-dev-url]: https://david-dm.org/react-component/util?type=dev
|
|
[david-dev-image]: https://david-dm.org/react-component/util/dev-status.svg?style=flat-square
|
|
[download-image]: https://img.shields.io/npm/dm/rc-util.svg?style=flat-square
|
|
[download-url]: https://npmjs.org/package/rc-util
|
|
[bundlephobia-url]: https://bundlephobia.com/package/rc-util
|
|
[bundlephobia-image]: https://badgen.net/bundlephobia/minzip/rc-util
|
|
[dumi-url]: https://github.com/umijs/dumi
|
|
[dumi-image]: https://img.shields.io/badge/docs%20by-dumi-blue?style=flat-square
|
|
|
|
## 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|pure
|
|
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|pure
|
|
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|pure
|
|
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|pure
|
|
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|pure
|
|
import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
|
|
```
|
|
|
|
### guid
|
|
|
|
> (): string
|
|
|
|
To generate a global unique id across current application.
|
|
|
|
```jsx|pure
|
|
import guid from 'rc-util/lib/guid';
|
|
```
|
|
|
|
### pickAttrs
|
|
|
|
> (props: Object): Object
|
|
|
|
Pick valid HTML attributes and events from props.
|
|
|
|
```jsx|pure
|
|
import pickAttrs from 'rc-util/lib/pickAttrs';
|
|
```
|
|
|
|
### warn
|
|
|
|
> (msg: string): void
|
|
|
|
A shallow wrapper of `console.warn`.
|
|
|
|
```jsx|pure
|
|
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|pure
|
|
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|pure
|
|
import mapSelf from 'rc-util/lib/Children/mapSelf';
|
|
```
|
|
|
|
#### Children/toArray
|
|
|
|
> (children: ReactNode[]): ReactNode[]
|
|
|
|
Convert children into an array.
|
|
|
|
```jsx|pure
|
|
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|pure
|
|
import addEventlistener from 'rc-util/lib/Dom/addEventlistener';
|
|
```
|
|
|
|
#### Dom/canUseDom
|
|
|
|
> (): boolean
|
|
|
|
Check if DOM is available.
|
|
|
|
```jsx|pure
|
|
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|pure
|
|
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|pure
|
|
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|pure
|
|
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|pure
|
|
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|pure
|
|
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.ts) of it.
|
|
|
|
```jsx|pure
|
|
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.
|
|
|
|
### ScrollLocker
|
|
|
|
> ScrollLocker<{lock: (options: {container: HTMLElement}) => void, unLock: () => void}>
|
|
|
|
improve shake when page scroll bar hidden.
|
|
|
|
`ScrollLocker` change body style, and add a class `ant-scrolling-effect` when called, so if you page look abnormal, please check this;
|
|
|
|
```js
|
|
import ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
|
|
|
|
const scrollLocker = new ScrollLocker();
|
|
|
|
// lock
|
|
scrollLocker.lock()
|
|
|
|
// unLock
|
|
scrollLocker.unLock()
|
|
```
|
|
|
|
## License
|
|
|
|
[MIT](/LICENSE)
|