@douyinfe/semi-ui 2.1.0-beta.0 → 2.1.0-next.0

package/lib/cjs/_base/reactUtils.js

@@ -0,0 +1,55 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.isClassComponent = isClassComponent;
+exports.isCompositeTypeElement = isCompositeTypeElement;
+exports.isElement = isElement;
+exports.isEmptyChildren = isEmptyChildren;
+exports.isFunctionalComponent = isFunctionalComponent;
+
+_Object$defineProperty(exports, "isHTMLElement", {
+  enumerable: true,
+  get: function () {
+    return _dom.isHTMLElement;
+  }
+});
+
+exports.isReactComponent = isReactComponent;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _dom = require("@douyinfe/semi-foundation/lib/cjs/utils/dom");
+
+// https://stackoverflow.com/questions/33199959/how-to-detect-a-react-component-vs-a-react-element
+function isClassComponent(component) {
+  return typeof component === 'function' && Boolean(component.prototype.isReactComponent);
+}
+
+function isFunctionalComponent(Component) {
+  return typeof Component === 'function' && // can be various things
+  !(Component.prototype && Component.prototype.isReactComponent // native arrows don't have prototypes
+  );
+}
+
+function isReactComponent(component) {
+  return isClassComponent(component) || isFunctionalComponent(component);
+}
+
+function isElement(element) {
+  return /*#__PURE__*/_react.default.isValidElement(element);
+}
+
+function isCompositeTypeElement(element) {
+  return isElement(element) && typeof element.type === 'function';
+}
+
+function isEmptyChildren(children) {
+  return _react.default.Children.count(children) === 0;
+}

package/lib/cjs/_portal/index.d.ts

@@ -0,0 +1,36 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import '@douyinfe/semi-foundation/lib/cjs/_portal/portal.css';
+export interface PortalProps {
+    children: React.ReactNode;
+    style?: React.CSSProperties;
+    prefixCls?: string;
+    className?: string;
+    getPopupContainer?: () => HTMLElement;
+    didUpdate?: (props: PortalProps) => void;
+}
+export interface PortalState {
+    container: undefined | HTMLElement;
+}
+declare class Portal extends PureComponent<PortalProps, PortalState> {
+    static contextType: React.Context<import("../configProvider/context").ContextValue>;
+    static defaultProps: {
+        prefixCls: string;
+    };
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        prefixCls: PropTypes.Requireable<string>;
+        getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
+        className: PropTypes.Requireable<string>;
+        didUpdate: PropTypes.Requireable<(...args: any[]) => any>;
+    };
+    el: HTMLElement;
+    constructor(props: PortalProps);
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: PortalProps): void;
+    componentWillUnmount(): void;
+    addStyle: (style?: {}) => void;
+    addClass: (prefixCls: string, ...classNames: string[]) => void;
+    render(): React.ReactPortal;
+}
+export default Portal;

package/lib/cjs/_portal/index.js

@@ -0,0 +1,151 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _react = require("react");
+
+var _reactDom = require("react-dom");
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/base/constants");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _context = _interopRequireDefault(require("../configProvider/context"));
+
+require("@douyinfe/semi-foundation/lib/cjs/_portal/portal.css");
+
+const defaultGetContainer = () => document.body;
+
+class Portal extends _react.PureComponent {
+  constructor(props) {
+    var _this;
+
+    super(props);
+    _this = this;
+
+    this.addStyle = function () {
+      let style = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
+
+      if (_this.el) {
+        for (const key of (0, _keys.default)(style)) {
+          _this.el.style[key] = style[key];
+        }
+      }
+    };
+
+    this.addClass = function (prefixCls) {
+      const {
+        direction
+      } = _this.context;
+
+      for (var _len = arguments.length, classNames = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+        classNames[_key - 1] = arguments[_key];
+      }
+
+      const cls = (0, _classnames.default)(prefixCls, ...classNames, {
+        ["".concat(prefixCls, "-rtl")]: direction === 'rtl'
+      });
+
+      if (_this.el) {
+        _this.el.className = cls;
+      }
+    };
+
+    try {
+      this.el = document.createElement('div');
+    } catch (e) {}
+
+    this.state = {
+      container: undefined
+    };
+  }
+
+  componentDidMount() {
+    if (!this.el) {
+      this.el = document.createElement('div');
+    }
+
+    const {
+      state,
+      props,
+      context
+    } = this;
+    const getContainer = props.getPopupContainer || context.getPopupContainer || defaultGetContainer;
+    const container = getContainer();
+
+    if (container !== state.container) {
+      // const computedStyle = window.getComputedStyle(container);
+      // if (computedStyle.position !== 'relative') {
+      //    container.style.position = 'relative';
+      // }
+      container.appendChild(this.el);
+      this.addStyle(props.style);
+      this.addClass(props.prefixCls, props.className);
+      this.setState({
+        container
+      });
+    }
+  }
+
+  componentDidUpdate(prevProps) {
+    // visible callback
+    const {
+      didUpdate
+    } = this.props;
+
+    if (didUpdate) {
+      didUpdate(prevProps);
+    }
+  }
+
+  componentWillUnmount() {
+    const {
+      container
+    } = this.state;
+
+    if (container) {
+      container.removeChild(this.el);
+    }
+  }
+
+  render() {
+    const {
+      state,
+      props
+    } = this;
+
+    if (state.container) {
+      return /*#__PURE__*/(0, _reactDom.createPortal)(props.children, this.el);
+    }
+
+    return null;
+  }
+
+}
+
+Portal.contextType = _context.default;
+Portal.defaultProps = {
+  // getPopupContainer: () => document.body,
+  prefixCls: "".concat(_constants.BASE_CLASS_PREFIX, "-portal")
+};
+Portal.propTypes = {
+  children: _propTypes.default.node,
+  prefixCls: _propTypes.default.string,
+  getPopupContainer: _propTypes.default.func,
+  className: _propTypes.default.string,
+  didUpdate: _propTypes.default.func
+};
+var _default = Portal;
+exports.default = _default;

package/lib/cjs/_utils/index.d.ts

@@ -0,0 +1,68 @@
+import React from 'react';
+/**
+ * stop propagation
+ *
+ * @param {React.MouseEvent<HTMLElement>} e React mouse event object
+ * @param {boolean} noImmediate Skip stopping immediate propagation
+ */
+export declare function stopPropagation(e: React.MouseEvent, noImmediate?: boolean): void;
+/**
+ *
+ * @param {any} value
+ * @param {Function} customizer
+ * @returns {any}
+ * use in Table, Form, Navigation
+ */
+export declare function cloneDeep(value: any, customizer?: (value: any) => void): any;
+/**
+ * [getHighLightTextHTML description]
+ *
+ * @param   {string} sourceString [source content text]
+ * @param   {Array<string>} searchWords [keywords to be highlighted]
+ * @param   {object} option
+ * @param   {true}      option.highlightTag [The tag wrapped by the highlighted content, mark is used by default]
+ * @param   {true}      option.highlightClassName
+ * @param   {true}      option.highlightStyle
+ * @param   {boolean}   option.caseSensitive
+ *
+ * @return  {Array<object>}
+ */
+export declare const getHighLightTextHTML: ({ sourceString, searchWords, option }: GetHighLightTextHTMLProps) => (string | React.ReactElement<{
+    style: Record<string, any>;
+    className: string;
+}, string | React.JSXElementConstructor<any>>)[];
+export interface RegisterMediaQueryOption {
+    match?: (e: MediaQueryList | MediaQueryListEvent) => void;
+    unmatch?: (e: MediaQueryList | MediaQueryListEvent) => void;
+    callInInit?: boolean;
+}
+/**
+ * register matchFn and unMatchFn callback while media query
+ * @param {string} media media string
+ * @param {object} param param object
+ * @returns function
+ */
+export declare const registerMediaQuery: (media: string, { match, unmatch, callInInit }: RegisterMediaQueryOption) => () => void;
+export interface GetHighLightTextHTMLProps {
+    sourceString?: string;
+    searchWords?: any[];
+    option: HighLightTextHTMLOption;
+}
+export interface HighLightTextHTMLOption {
+    highlightTag?: string;
+    highlightClassName?: string;
+    highlightStyle?: Record<string, any>;
+    caseSensitive: boolean;
+    autoEscape: boolean;
+}
+export interface HighLightTextHTMLChunk {
+    start?: number;
+    end?: number;
+    highlight?: any;
+}
+/**
+ * Determine whether the incoming element is a built-in icon
+ * @param icon 元素
+ * @returns boolean
+ */
+export declare const isSemiIcon: (icon: any) => boolean;

package/lib/cjs/_utils/index.js

@@ -0,0 +1,189 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.cloneDeep = cloneDeep;
+exports.registerMediaQuery = exports.isSemiIcon = exports.getHighLightTextHTML = void 0;
+exports.stopPropagation = stopPropagation;
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _lodashEs = require("lodash-es");
+
+var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
+
+var _getHighlight = require("@douyinfe/semi-foundation/lib/cjs/utils/getHighlight");
+
+/* eslint-disable max-len */
+
+/* argus-disable unPkgSensitiveInfo */
+
+/**
+ * stop propagation
+ *
+ * @param {React.MouseEvent<HTMLElement>} e React mouse event object
+ * @param {boolean} noImmediate Skip stopping immediate propagation
+ */
+function stopPropagation(e, noImmediate) {
+  if (e && typeof e.stopPropagation === 'function') {
+    e.stopPropagation();
+  }
+
+  if (!noImmediate && e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+    e.nativeEvent.stopImmediatePropagation();
+  }
+}
+/**
+ *
+ * @param {any} value
+ * @param {Function} customizer
+ * @returns {any}
+ * use in Table, Form, Navigation
+ */
+
+
+function cloneDeep(value, customizer) {
+  return (0, _lodashEs.cloneDeepWith)(value, v => {
+    if (typeof customizer === 'function') {
+      return customizer(v);
+    }
+
+    if (typeof v === 'function' || /*#__PURE__*/_react.default.isValidElement(v)) {
+      return v;
+    }
+
+    if (Object.prototype.toString.call(v) === '[object Error]') {
+      return v;
+    }
+
+    if ((0, _isArray.default)(v) && v.length === 0) {
+      const keys = (0, _keys.default)(v);
+
+      if (keys.length) {
+        const newArray = [];
+        (0, _forEach.default)(keys).call(keys, key => {
+          (0, _lodashEs.set)(newArray, key, v[key]);
+        }); // internal-issues:887
+
+        (0, _warning.default)((0, _lodashEs.get)(process, 'env.NODE_ENV') !== 'production', "[Semi] You may use an out-of-bounds array. In some cases, your program may not behave as expected.\n                    The maximum length of an array is 4294967295.\n                    Please check whether the array subscript in your data exceeds the maximum value of the JS array subscript");
+        return newArray;
+      } else {
+        return undefined;
+      }
+    }
+
+    return undefined;
+  });
+}
+/**
+ * [getHighLightTextHTML description]
+ *
+ * @param   {string} sourceString [source content text]
+ * @param   {Array<string>} searchWords [keywords to be highlighted]
+ * @param   {object} option
+ * @param   {true}      option.highlightTag [The tag wrapped by the highlighted content, mark is used by default]
+ * @param   {true}      option.highlightClassName
+ * @param   {true}      option.highlightStyle
+ * @param   {boolean}   option.caseSensitive
+ *
+ * @return  {Array<object>}
+ */
+
+
+const getHighLightTextHTML = _ref => {
+  let {
+    sourceString = '',
+    searchWords = [],
+    option = {
+      autoEscape: true,
+      caseSensitive: false
+    }
+  } = _ref;
+  const chunks = (0, _getHighlight.findAll)((0, _assign.default)({
+    sourceString,
+    searchWords
+  }, option));
+  const markEle = option.highlightTag || 'mark';
+  const highlightClassName = option.highlightClassName || '';
+  const highlightStyle = option.highlightStyle || {};
+  return (0, _map.default)(chunks).call(chunks, chunk => {
+    const {
+      end,
+      start,
+      highlight
+    } = chunk;
+    const text = sourceString.substr(start, end - start);
+
+    if (highlight) {
+      return /*#__PURE__*/_react.default.createElement(markEle, {
+        style: highlightStyle,
+        className: highlightClassName
+      }, text);
+    } else {
+      return text;
+    }
+  });
+};
+/**
+ * register matchFn and unMatchFn callback while media query
+ * @param {string} media media string
+ * @param {object} param param object
+ * @returns function
+ */
+
+
+exports.getHighLightTextHTML = getHighLightTextHTML;
+
+const registerMediaQuery = (media, _ref2) => {
+  let {
+    match,
+    unmatch,
+    callInInit = true
+  } = _ref2;
+
+  if (typeof window !== 'undefined') {
+    const mediaQueryList = window.matchMedia(media);
+
+    function handlerMediaChange(e) {
+      if (e.matches) {
+        match && match(e);
+      } else {
+        unmatch && unmatch(e);
+      }
+    }
+
+    callInInit && handlerMediaChange(mediaQueryList);
+    mediaQueryList.addEventListener('change', handlerMediaChange);
+    return () => mediaQueryList.removeEventListener('change', handlerMediaChange);
+  }
+
+  return null;
+};
+/**
+ * Determine whether the incoming element is a built-in icon
+ * @param icon 元素
+ * @returns boolean
+ */
+
+
+exports.registerMediaQuery = registerMediaQuery;
+
+const isSemiIcon = icon => /*#__PURE__*/_react.default.isValidElement(icon) && (0, _lodashEs.get)(icon.type, 'elementType') === 'Icon';
+
+exports.isSemiIcon = isSemiIcon;

package/lib/cjs/anchor/anchor-context.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+import Anchor, { AnchorProps, AnchorState } from '.';
+export declare type AnchorContextType = Pick<AnchorProps, 'showTooltip' | 'position' | 'autoCollapse' | 'size'> & Pick<AnchorState, 'activeLink'> & Pick<Anchor, 'addLink' | 'removeLink' | 'childMap'> & {
+    onClick: Anchor['handleClick'];
+};
+declare const AnchorContext: React.Context<AnchorContextType>;
+export default AnchorContext;

package/lib/cjs/anchor/anchor-context.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+var _interopRequireDefault = require("@babel/runtime-corejs3/helpers/interopRequireDefault");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+const AnchorContext = /*#__PURE__*/_react.default.createContext(null);
+
+var _default = AnchorContext;
+exports.default = _default;

package/lib/cjs/anchor/index.d.ts

@@ -0,0 +1,93 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { strings } from '@douyinfe/semi-foundation/lib/cjs/anchor/constants';
+import AnchorFoundation, { AnchorAdapter } from '@douyinfe/semi-foundation/lib/cjs/anchor/foundation';
+import BaseComponent from '../_base/baseComponent';
+import Link from './link';
+import '@douyinfe/semi-foundation/lib/cjs/anchor/anchor.css';
+import { ArrayElement } from '../_base/base';
+export { LinkProps } from './link';
+export interface AnchorProps {
+    autoCollapse?: boolean;
+    className?: string;
+    defaultAnchor?: string;
+    getContainer?: () => HTMLElement | Window;
+    maxHeight?: string | number;
+    maxWidth?: string | number;
+    offsetTop?: number;
+    position?: ArrayElement<typeof strings.POSITION_SET>;
+    railTheme?: ArrayElement<typeof strings.SLIDE_COLOR>;
+    scrollMotion?: boolean;
+    showTooltip?: boolean;
+    size?: ArrayElement<typeof strings.SIZE>;
+    style?: React.CSSProperties;
+    targetOffset?: number;
+    onChange?: (currentLink: string, previousLink: string) => void;
+    onClick?: (e: React.MouseEvent<HTMLElement>, currentLink: string) => void;
+}
+export interface AnchorState {
+    activeLink: string;
+    links: string[];
+    clickLink: boolean;
+    scrollHeight: string;
+    slideBarTop: string;
+}
+declare class Anchor extends BaseComponent<AnchorProps, AnchorState> {
+    static Link: typeof Link;
+    static PropTypes: {
+        size: PropTypes.Requireable<"default" | "small">;
+        railTheme: PropTypes.Requireable<"primary" | "tertiary" | "muted">;
+        className: PropTypes.Requireable<string>;
+        style: PropTypes.Requireable<object>;
+        scrollMotion: PropTypes.Requireable<boolean>;
+        autoCollapse: PropTypes.Requireable<boolean>;
+        offsetTop: PropTypes.Requireable<number>;
+        targetOffset: PropTypes.Requireable<number>;
+        showTooltip: PropTypes.Requireable<boolean>;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        maxWidth: PropTypes.Requireable<string | number>;
+        maxHeight: PropTypes.Requireable<string | number>;
+        getContainer: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        onClick: PropTypes.Requireable<(...args: any[]) => any>;
+        defaultAnchor: PropTypes.Requireable<string>;
+    };
+    static defaultProps: {
+        size: string;
+        railTheme: string;
+        className: string;
+        scrollMotion: boolean;
+        autoCollapse: boolean;
+        offsetTop: number;
+        targetOffset: number;
+        showTooltip: boolean;
+        maxWidth: "200px";
+        maxHeight: "750px";
+        getContainer: (...args: any[]) => void;
+        onChange: (...args: any[]) => void;
+        onClick: (...args: any[]) => void;
+        defaultAnchor: string;
+    };
+    foundation: AnchorFoundation;
+    anchorID: string;
+    scrollContainer: HTMLElement | Window;
+    childMap: Record<string, Set<string>>;
+    handler: () => void;
+    clickHandler: () => void;
+    constructor(props: AnchorProps);
+    get adapter(): AnchorAdapter<AnchorProps, AnchorState>;
+    addLink: (link: string) => void;
+    removeLink: (link: string) => void;
+    handleScroll: () => void;
+    handleClick: (e: React.MouseEvent<HTMLElement>, link: string) => void;
+    handleClickLink: () => void;
+    setChildMap: () => void;
+    setScrollHeight: () => void;
+    updateScrollHeight: (prevState: AnchorState, state: AnchorState) => void;
+    updateChildMap: (prevState: AnchorState, state: AnchorState) => void;
+    componentDidMount(): void;
+    componentDidUpdate(prevProps: AnchorProps, prevState: AnchorState): void;
+    componentWillUnmount(): void;
+    render(): JSX.Element;
+}
+export default Anchor;