@teamteanpm2024/voluptatum-eum-doloribus

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 '@teamteanpm2024/voluptatum-eum-doloribus/lib/createChainedFunction';

deprecated

(prop: string, instead: string, component: string): void

Log an error message to warn developers that prop is deprecated.

import deprecated from '@teamteanpm2024/voluptatum-eum-doloribus/lib/deprecated';

getContainerRenderMixin

(config: Object): Object

To generate a mixin which will render specific component into specific container automatically.

import getContainerRenderMixin from '@teamteanpm2024/voluptatum-eum-doloribus/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 '@teamteanpm2024/voluptatum-eum-doloribus/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 '@teamteanpm2024/voluptatum-eum-doloribus/lib/getScrollBarSize';

guid

(): string

To generate a global unique id across current application.

import guid from '@teamteanpm2024/voluptatum-eum-doloribus/lib/guid';

pickAttrs

(props: Object): Object

Pick valid HTML attributes and events from props.

import pickAttrs from '@teamteanpm2024/voluptatum-eum-doloribus/lib/pickAttrs';

warn

(msg: string): void

A shallow wrapper of console.warn.

import warn from '@teamteanpm2024/voluptatum-eum-doloribus/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 '@teamteanpm2024/voluptatum-eum-doloribus/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 '@teamteanpm2024/voluptatum-eum-doloribus/lib/Children/mapSelf';

Children/toArray

(children: ReactNode[]): ReactNode[]

Convert children into an array.

import toArray from '@teamteanpm2024/voluptatum-eum-doloribus/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 '@teamteanpm2024/voluptatum-eum-doloribus/lib/Dom/addEventlistener';

Dom/canUseDom

(): boolean

Check if DOM is available.

import canUseDom from '@teamteanpm2024/voluptatum-eum-doloribus/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

import cssClass from '@teamteanpm2024/voluptatum-eum-doloribus/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 '@teamteanpm2024/voluptatum-eum-doloribus/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 }

import css from '@teamteanpm2024/voluptatum-eum-doloribus/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

import focus from '@teamteanpm2024/voluptatum-eum-doloribus/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 '@teamteanpm2024/voluptatum-eum-doloribus/lib/Dom/support';

KeyCode

Enum

Enum of KeyCode, please check the definition of it.

import KeyCode from '@teamteanpm2024/voluptatum-eum-doloribus/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 '@teamteanpm2024/voluptatum-eum-doloribus/lib/Dom/scrollLocker';

const scrollLocker = new ScrollLocker();

// lock
scrollLocker.lock()

// unLock
scrollLocker.unLock()

License

MIT