@rc-component/util 1.0.0

package/LICENSE

@@ -0,0 +1,22 @@
+The MIT License (MIT)
+
+Copyright (c) 2014-present yiminghe
+Copyright (c) 2015-present Alipay.com, https://www.alipay.com/
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS 
+OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF 
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. 
+IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY 
+CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, 
+TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE 
+SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

package/README.md

@@ -0,0 +1,303 @@
+# 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
+
+[![rc-util](https://nodei.co/npm/rc-util.png)](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)

package/es/Children/toArray.d.ts

@@ -0,0 +1,5 @@
+import React from 'react';
+export interface Option {
+    keepEmpty?: boolean;
+}
+export default function toArray(children: React.ReactNode, option?: Option): React.ReactElement[];

package/es/Children/toArray.js

@@ -0,0 +1,19 @@
+import isFragment from "../React/isFragment";
+import React from 'react';
+export default function toArray(children) {
+  var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var ret = [];
+  React.Children.forEach(children, function (child) {
+    if ((child === undefined || child === null) && !option.keepEmpty) {
+      return;
+    }
+    if (Array.isArray(child)) {
+      ret = ret.concat(toArray(child));
+    } else if (isFragment(child) && child.props) {
+      ret = ret.concat(toArray(child.props.children, option));
+    } else {
+      ret.push(child);
+    }
+  });
+  return ret;
+}

package/es/Dom/canUseDom.d.ts

@@ -0,0 +1 @@
+export default function canUseDom(): boolean;

package/es/Dom/canUseDom.js

@@ -0,0 +1,3 @@
+export default function canUseDom() {
+  return !!(typeof window !== 'undefined' && window.document && window.document.createElement);
+}

package/es/Dom/contains.d.ts

@@ -0,0 +1 @@
+export default function contains(root: Node | null | undefined, n?: Node): boolean;

package/es/Dom/contains.js

@@ -0,0 +1,20 @@
+export default function contains(root, n) {
+  if (!root) {
+    return false;
+  }
+
+  // Use native if support
+  if (root.contains) {
+    return root.contains(n);
+  }
+
+  // `document.contains` not support with IE11
+  var node = n;
+  while (node) {
+    if (node === root) {
+      return true;
+    }
+    node = node.parentNode;
+  }
+  return false;
+}

package/es/Dom/dynamicCSS.d.ts

@@ -0,0 +1,25 @@
+export type ContainerType = Element | ShadowRoot;
+export type Prepend = boolean | 'queue';
+export type AppendType = 'prependQueue' | 'append' | 'prepend';
+interface Options {
+    attachTo?: ContainerType;
+    csp?: {
+        nonce?: string;
+    };
+    prepend?: Prepend;
+    /**
+     * Config the `priority` of `prependQueue`. Default is `0`.
+     * It's useful if you need to insert style before other style.
+     */
+    priority?: number;
+    mark?: string;
+    styles?: HTMLElement[];
+}
+export declare function injectCSS(css: string, option?: Options): HTMLStyleElement;
+export declare function removeCSS(key: string, option?: Options): void;
+/**
+ * manually clear container cache to avoid global cache in unit testes
+ */
+export declare function clearContainerCache(): void;
+export declare function updateCSS(css: string, key: string, originOption?: Options): HTMLElement;
+export {};

package/es/Dom/dynamicCSS.js

@@ -0,0 +1,153 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : String(i); }
+function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+import canUseDom from "./canUseDom";
+import contains from "./contains";
+var APPEND_ORDER = 'data-rc-order';
+var APPEND_PRIORITY = 'data-rc-priority';
+var MARK_KEY = "rc-util-key";
+var containerCache = new Map();
+function getMark() {
+  var _ref = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {},
+    mark = _ref.mark;
+  if (mark) {
+    return mark.startsWith('data-') ? mark : "data-".concat(mark);
+  }
+  return MARK_KEY;
+}
+function getContainer(option) {
+  if (option.attachTo) {
+    return option.attachTo;
+  }
+  var head = document.querySelector('head');
+  return head || document.body;
+}
+function getOrder(prepend) {
+  if (prepend === 'queue') {
+    return 'prependQueue';
+  }
+  return prepend ? 'prepend' : 'append';
+}
+
+/**
+ * Find style which inject by rc-util
+ */
+function findStyles(container) {
+  return Array.from((containerCache.get(container) || container).children).filter(function (node) {
+    return node.tagName === 'STYLE';
+  });
+}
+export function injectCSS(css) {
+  var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  if (!canUseDom()) {
+    return null;
+  }
+  var csp = option.csp,
+    prepend = option.prepend,
+    _option$priority = option.priority,
+    priority = _option$priority === void 0 ? 0 : _option$priority;
+  var mergedOrder = getOrder(prepend);
+  var isPrependQueue = mergedOrder === 'prependQueue';
+  var styleNode = document.createElement('style');
+  styleNode.setAttribute(APPEND_ORDER, mergedOrder);
+  if (isPrependQueue && priority) {
+    styleNode.setAttribute(APPEND_PRIORITY, "".concat(priority));
+  }
+  if (csp !== null && csp !== void 0 && csp.nonce) {
+    styleNode.nonce = csp === null || csp === void 0 ? void 0 : csp.nonce;
+  }
+  styleNode.innerHTML = css;
+  var container = getContainer(option);
+  var firstChild = container.firstChild;
+  if (prepend) {
+    // If is queue `prepend`, it will prepend first style and then append rest style
+    if (isPrependQueue) {
+      var existStyle = (option.styles || findStyles(container)).filter(function (node) {
+        // Ignore style which not injected by rc-util with prepend
+        if (!['prepend', 'prependQueue'].includes(node.getAttribute(APPEND_ORDER))) {
+          return false;
+        }
+
+        // Ignore style which priority less then new style
+        var nodePriority = Number(node.getAttribute(APPEND_PRIORITY) || 0);
+        return priority >= nodePriority;
+      });
+      if (existStyle.length) {
+        container.insertBefore(styleNode, existStyle[existStyle.length - 1].nextSibling);
+        return styleNode;
+      }
+    }
+
+    // Use `insertBefore` as `prepend`
+    container.insertBefore(styleNode, firstChild);
+  } else {
+    container.appendChild(styleNode);
+  }
+  return styleNode;
+}
+function findExistNode(key) {
+  var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var container = getContainer(option);
+  return (option.styles || findStyles(container)).find(function (node) {
+    return node.getAttribute(getMark(option)) === key;
+  });
+}
+export function removeCSS(key) {
+  var option = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : {};
+  var existNode = findExistNode(key, option);
+  if (existNode) {
+    var container = getContainer(option);
+    container.removeChild(existNode);
+  }
+}
+
+/**
+ * qiankun will inject `appendChild` to insert into other
+ */
+function syncRealContainer(container, option) {
+  var cachedRealContainer = containerCache.get(container);
+
+  // Find real container when not cached or cached container removed
+  if (!cachedRealContainer || !contains(document, cachedRealContainer)) {
+    var placeholderStyle = injectCSS('', option);
+    var parentNode = placeholderStyle.parentNode;
+    containerCache.set(container, parentNode);
+    container.removeChild(placeholderStyle);
+  }
+}
+
+/**
+ * manually clear container cache to avoid global cache in unit testes
+ */
+export function clearContainerCache() {
+  containerCache.clear();
+}
+export function updateCSS(css, key) {
+  var originOption = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  var container = getContainer(originOption);
+  var styles = findStyles(container);
+  var option = _objectSpread(_objectSpread({}, originOption), {}, {
+    styles: styles
+  });
+
+  // Sync real parent
+  syncRealContainer(container, option);
+  var existNode = findExistNode(key, option);
+  if (existNode) {
+    var _option$csp, _option$csp2;
+    if ((_option$csp = option.csp) !== null && _option$csp !== void 0 && _option$csp.nonce && existNode.nonce !== ((_option$csp2 = option.csp) === null || _option$csp2 === void 0 ? void 0 : _option$csp2.nonce)) {
+      var _option$csp3;
+      existNode.nonce = (_option$csp3 = option.csp) === null || _option$csp3 === void 0 ? void 0 : _option$csp3.nonce;
+    }
+    if (existNode.innerHTML !== css) {
+      existNode.innerHTML = css;
+    }
+    return existNode;
+  }
+  var newNode = injectCSS(css, option);
+  newNode.setAttribute(getMark(option), key);
+  return newNode;
+}

package/es/Dom/findDOMNode.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export declare function isDOM(node: any): node is HTMLElement | SVGElement;
+/**
+ * Retrieves a DOM node via a ref, and does not invoke `findDOMNode`.
+ */
+export declare function getDOM(node: any): HTMLElement | SVGElement | null;
+/**
+ * Return if a node is a DOM node. Else will return by `findDOMNode`
+ */
+export default function findDOMNode<T = Element | Text>(node: React.ReactInstance | HTMLElement | SVGElement | {
+    nativeElement: T;
+}): T;

package/es/Dom/findDOMNode.js

@@ -0,0 +1,36 @@
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+import React from 'react';
+import ReactDOM from 'react-dom';
+export function isDOM(node) {
+  // https://developer.mozilla.org/en-US/docs/Web/API/Element
+  // Since XULElement is also subclass of Element, we only need HTMLElement and SVGElement
+  return node instanceof HTMLElement || node instanceof SVGElement;
+}
+
+/**
+ * Retrieves a DOM node via a ref, and does not invoke `findDOMNode`.
+ */
+export function getDOM(node) {
+  if (node && _typeof(node) === 'object' && isDOM(node.nativeElement)) {
+    return node.nativeElement;
+  }
+  if (isDOM(node)) {
+    return node;
+  }
+  return null;
+}
+
+/**
+ * Return if a node is a DOM node. Else will return by `findDOMNode`
+ */
+export default function findDOMNode(node) {
+  var domNode = getDOM(node);
+  if (domNode) {
+    return domNode;
+  }
+  if (node instanceof React.Component) {
+    var _ReactDOM$findDOMNode;
+    return (_ReactDOM$findDOMNode = ReactDOM.findDOMNode) === null || _ReactDOM$findDOMNode === void 0 ? void 0 : _ReactDOM$findDOMNode.call(ReactDOM, node);
+  }
+  return null;
+}

package/es/Dom/focus.d.ts

@@ -0,0 +1,8 @@
+export declare function getFocusNodeList(node: HTMLElement, includePositive?: boolean): HTMLElement[];
+/** @deprecated Do not use since this may failed when used in async */
+export declare function saveLastFocusNode(): void;
+/** @deprecated Do not use since this may failed when used in async */
+export declare function clearLastFocusNode(): void;
+/** @deprecated Do not use since this may failed when used in async */
+export declare function backLastFocusNode(): void;
+export declare function limitTabRange(node: HTMLElement, e: KeyboardEvent): void;