JarCastingrc-util
Common Utils For React Component.
Install
API
createChainedFunction
(...functions): Function
Create a function which will call all the functions with it's arguments from left to right.
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.
import deprecated from 'rc-util/lib/deprecated';
getContainerRenderMixin
(config: Object): Object
To generate a mixin which will render specific component into specific container automatically.
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;
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.
import getScrollBarSize from 'rc-util/lib/getScrollBarSize';
guid
(): string
To generate a global unique id across current application.
import guid from 'rc-util/lib/guid';
pickAttrs
(props: Object): Object
Pick valid HTML attributes and events from props.
import pickAttrs from 'rc-util/lib/pickAttrs';
warn
(msg: string): void
A shallow wrapper of console.warn.
import warn from 'rc-util/lib/warn';
warning
(valid: boolean, msg: string): void
A shallow wrapper of warning, but only warning once for the same message.
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.
import mapSelf from 'rc-util/lib/Children/mapSelf';
Children/toArray
(children: ReactNode[]): ReactNode[]
Convert children into an array.
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.
import addEventlistener from 'rc-util/lib/Dom/addEventlistener';
Dom/canUseDom
(): boolean
Check if DOM is available.
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): booleanaddClass(node: HTMLElement, className: string): voidremoveClass(node: HTMLElement, className: string): void
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.
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): anyset(node: HTMLElement, name?: string, value: any) | set(node, object)getOuterWidth(el: HTMLElement): numbergetOuterHeight(el: HTMLElement): numbergetDocSize(): { width: number, height: number }getClientSize(): { width: number, height: number }getScroll(): { scrollLeft: number, scrollTop: number }getOffset(node: HTMLElement): { left: number, top: number }
import css from 'rc-util/lib/Dom/css';
Dom/focus
A collection of functions to operate focus status of DOM node.
saveLastFocusNode(): voidclearLastFocusNode(): voidbackLastFocusNode(): voidgetFocusNodeList(node: HTMLElement): HTMLElement[]get a list of focusable nodes from the subtree of node.limitTabRange(node: HTMLElement, e: Event): void
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.
import support from 'rc-util/lib/Dom/support';
KeyCode
Enum
Enum of KeyCode, please check the definition of it.
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;
import ScrollLocker from 'rc-util/lib/Dom/scrollLocker';
const scrollLocker = new ScrollLocker();
// lock
scrollLocker.lock()
// unLock
scrollLocker.unLock()
