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

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import BaseComponent from '../_base/baseComponent';
+import { Position, TooltipProps, Trigger } from '../tooltip/index';
+import DropdownMenu from './dropdownMenu';
+import DropdownItem, { DropdownItemProps } from './dropdownItem';
+import { DropdownDividerProps } from './dropdownDivider';
+import DropdownTitle, { DropdownTitleProps } from './dropdownTitle';
+import '@douyinfe/semi-foundation/lib/cjs/dropdown/dropdown.css';
+import { Motion } from '../_base/base';
+export { DropdownDividerProps } from './dropdownDivider';
+export { DropdownItemProps, Type } from './dropdownItem';
+export { DropdownMenuProps } from './dropdownMenu';
+export { DropdownTitleProps } from './dropdownTitle';
+export interface DropDownMenuItemBasic {
+    node: 'title' | 'item' | 'divider';
+    name?: string;
+}
+export declare type DropDownMenuItem = DropDownMenuItemBasic & DropdownItemProps & DropdownDividerProps & DropdownTitleProps;
+export interface DropdownProps extends TooltipProps {
+    render?: React.ReactNode;
+    children?: React.ReactNode;
+    visible?: boolean;
+    position?: Position;
+    getPopupContainer?: () => HTMLElement;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    menu?: DropDownMenuItem[];
+    trigger?: Trigger;
+    zIndex?: number;
+    motion?: Motion;
+    className?: string;
+    contentClassName?: string | any[];
+    style?: React.CSSProperties;
+    onVisibleChange?: (visible: boolean) => void;
+    rePosKey?: string | number;
+    showTick?: boolean;
+}
+interface DropdownState {
+    popVisible: boolean;
+}
+declare class Dropdown extends BaseComponent<DropdownProps, DropdownState> {
+    static Menu: typeof DropdownMenu;
+    static Item: typeof DropdownItem;
+    static Divider: React.FC<import("../_base/baseComponent").BaseProps>;
+    static Title: typeof DropdownTitle;
+    static contextType: React.Context<{
+        level: number;
+    }>;
+    static propTypes: {
+        render: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        visible: PropTypes.Requireable<boolean>;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
+        mouseEnterDelay: PropTypes.Requireable<number>;
+        mouseLeaveDelay: PropTypes.Requireable<number>;
+        trigger: PropTypes.Requireable<string>;
+        zIndex: PropTypes.Requireable<number>;
+        motion: PropTypes.Requireable<boolean | object>;
+        className: PropTypes.Requireable<string>;
+        contentClassName: PropTypes.Requireable<string | any[]>;
+        style: PropTypes.Requireable<object>;
+        onVisibleChange: PropTypes.Requireable<(...args: any[]) => any>;
+        rePosKey: PropTypes.Requireable<string | number>;
+        showTick: PropTypes.Requireable<boolean>;
+        prefixCls: PropTypes.Requireable<string>;
+        spacing: PropTypes.Requireable<number>;
+        menu: PropTypes.Requireable<any[]>;
+    };
+    static defaultProps: {
+        onVisibleChange: (...args: any[]) => void;
+        prefixCls: string;
+        zIndex: 1060;
+        motion: boolean;
+        trigger: string;
+        position: string;
+        mouseLeaveDelay: number;
+        showTick: boolean;
+    };
+    constructor(props: DropdownProps);
+    get adapter(): {
+        setPopVisible: (popVisible: boolean) => void;
+        notifyVisibleChange: (visible: boolean) => void;
+        getContext(key: string): any;
+        getContexts(): any;
+        getProp(key: string): any;
+        getProps(): DropdownProps;
+        getState(key: string): any;
+        getStates(): DropdownState;
+        setState(s: Pick<DropdownState, "popVisible">, callback?: any): void;
+        getCache(c: string): any;
+        getCaches(): any;
+        setCache(key: any, value: any): void;
+        stopPropagation(e: any): void;
+    };
+    handleVisibleChange: (visible: boolean) => any;
+    renderContent(): JSX.Element;
+    renderMenu(): JSX.Element;
+    renderPopCard(): JSX.Element;
+    render(): JSX.Element;
+}
+export default Dropdown;

package/lib/cjs/dropdown/index.js

@@ -0,0 +1,284 @@
+"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 _indexOf = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/index-of"));
+
+var _getOwnPropertySymbols = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/get-own-property-symbols"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/dropdown/constants");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _index = _interopRequireDefault(require("../tooltip/index"));
+
+var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/tooltip/constants");
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/dropdown/foundation"));
+
+var _dropdownMenu = _interopRequireDefault(require("./dropdownMenu"));
+
+var _dropdownItem = _interopRequireDefault(require("./dropdownItem"));
+
+var _dropdownDivider = _interopRequireDefault(require("./dropdownDivider"));
+
+var _dropdownTitle = _interopRequireDefault(require("./dropdownTitle"));
+
+var _context = _interopRequireDefault(require("./context"));
+
+require("@douyinfe/semi-foundation/lib/cjs/dropdown/dropdown.css");
+
+var _lodashEs = require("lodash-es");
+
+var __rest = void 0 && (void 0).__rest || function (s, e) {
+  var t = {};
+
+  for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && (0, _indexOf.default)(e).call(e, p) < 0) t[p] = s[p];
+
+  if (s != null && typeof _getOwnPropertySymbols.default === "function") for (var i = 0, p = (0, _getOwnPropertySymbols.default)(s); i < p.length; i++) {
+    if ((0, _indexOf.default)(e).call(e, p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
+  }
+  return t;
+};
+
+const positionSet = _constants.strings.POSITION_SET;
+const triggerSet = _constants.strings.TRIGGER_SET;
+
+class Dropdown extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.handleVisibleChange = visible => this.foundation.handleVisibleChange(visible);
+
+    this.state = {
+      popVisible: props.visible
+    };
+    this.foundation = new _foundation.default(this.adapter);
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      setPopVisible: popVisible => this.setState({
+        popVisible
+      }),
+      notifyVisibleChange: visible => this.props.onVisibleChange(visible)
+    });
+  }
+
+  renderContent() {
+    const {
+      render,
+      menu,
+      contentClassName,
+      style,
+      showTick,
+      prefixCls
+    } = this.props;
+    const className = (0, _classnames.default)(prefixCls, contentClassName);
+    const {
+      level = 0
+    } = this.context;
+    const contextValue = {
+      showTick,
+      level: level + 1
+    };
+    let content = null;
+
+    if ( /*#__PURE__*/_react.default.isValidElement(render)) {
+      content = render;
+    } else if ((0, _isArray.default)(menu)) {
+      content = this.renderMenu();
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
+      value: contextValue
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: className,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-content")
+    }, content)));
+  }
+
+  renderMenu() {
+    const {
+      menu
+    } = this.props;
+    const content = (0, _map.default)(menu).call(menu, (m, index) => {
+      switch (m.node) {
+        case 'title':
+          {
+            const {
+              name,
+              node
+            } = m,
+                  rest = __rest(m, ["name", "node"]);
+
+            return /*#__PURE__*/_react.default.createElement(Dropdown.Title, (0, _assign.default)({}, rest, {
+              key: node + name + index
+            }), name);
+          }
+
+        case 'item':
+          {
+            const {
+              node,
+              name
+            } = m,
+                  rest = __rest(m, ["node", "name"]);
+
+            return /*#__PURE__*/_react.default.createElement(Dropdown.Item, (0, _assign.default)({}, rest, {
+              key: node + name + index
+            }), name);
+          }
+
+        case 'divider':
+          {
+            return /*#__PURE__*/_react.default.createElement(Dropdown.Divider, {
+              key: m.node + index
+            });
+          }
+
+        default:
+          return null;
+      }
+    });
+    return /*#__PURE__*/_react.default.createElement(Dropdown.Menu, null, content);
+  }
+
+  renderPopCard() {
+    const {
+      render,
+      contentClassName,
+      style,
+      showTick,
+      prefixCls
+    } = this.props;
+    const className = (0, _classnames.default)(prefixCls, contentClassName);
+    const {
+      level = 0
+    } = this.context;
+    const contextValue = {
+      showTick,
+      level: level + 1
+    };
+    return /*#__PURE__*/_react.default.createElement(_context.default.Provider, {
+      value: contextValue
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: className,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-content")
+    }, render)));
+  }
+
+  render() {
+    const _a = this.props,
+          {
+      children,
+      position,
+      trigger,
+      onVisibleChange,
+      zIndex,
+      className,
+      motion,
+      style,
+      prefixCls
+    } = _a,
+          attr = __rest(_a, ["children", "position", "trigger", "onVisibleChange", "zIndex", "className", "motion", "style", "prefixCls"]);
+
+    let {
+      spacing
+    } = this.props;
+    const {
+      level
+    } = this.context;
+    const {
+      popVisible
+    } = this.state;
+    const pop = this.renderContent();
+
+    if (level > 0) {
+      spacing = typeof spacing === 'number' ? spacing : _constants.numbers.NESTED_SPACING;
+    } else if (spacing === null || typeof spacing === 'undefined') {
+      spacing = _constants.numbers.SPACING;
+    }
+
+    return /*#__PURE__*/_react.default.createElement(_index.default, (0, _assign.default)({
+      zIndex: zIndex,
+      motion: motion,
+      content: pop,
+      className: className,
+      prefixCls: prefixCls,
+      spacing: spacing,
+      position: position,
+      trigger: trigger,
+      onVisibleChange: this.handleVisibleChange,
+      showArrow: false
+    }, attr), /*#__PURE__*/_react.default.isValidElement(children) ? /*#__PURE__*/_react.default.cloneElement(children, {
+      className: (0, _classnames.default)((0, _lodashEs.get)(children, 'props.className'), {
+        ["".concat(prefixCls, "-showing")]: popVisible
+      })
+    }) : children);
+  }
+
+}
+
+Dropdown.Menu = _dropdownMenu.default;
+Dropdown.Item = _dropdownItem.default;
+Dropdown.Divider = _dropdownDivider.default;
+Dropdown.Title = _dropdownTitle.default;
+Dropdown.contextType = _context.default;
+Dropdown.propTypes = {
+  render: _propTypes.default.node,
+  children: _propTypes.default.node,
+  visible: _propTypes.default.bool,
+  position: _propTypes.default.oneOf(positionSet),
+  getPopupContainer: _propTypes.default.func,
+  mouseEnterDelay: _propTypes.default.number,
+  mouseLeaveDelay: _propTypes.default.number,
+  trigger: _propTypes.default.oneOf(triggerSet),
+  zIndex: _propTypes.default.number,
+  motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
+  className: _propTypes.default.string,
+  contentClassName: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  style: _propTypes.default.object,
+  onVisibleChange: _propTypes.default.func,
+  rePosKey: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  showTick: _propTypes.default.bool,
+  prefixCls: _propTypes.default.string,
+  spacing: _propTypes.default.number,
+  menu: _propTypes.default.array
+};
+Dropdown.defaultProps = {
+  onVisibleChange: _lodashEs.noop,
+  prefixCls: _constants.cssClasses.PREFIX,
+  zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
+  motion: true,
+  trigger: 'hover',
+  position: 'bottom',
+  mouseLeaveDelay: _constants.strings.DEFAULT_LEAVE_DELAY,
+  showTick: false
+};
+var _default = Dropdown;
+exports.default = _default;

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { strings } from '@douyinfe/semi-foundation/lib/cjs/empty/constants';
+import '@douyinfe/semi-foundation/lib/cjs/empty/empty.css';
+import BaseComponent from '../_base/baseComponent';
+import { ArrayElement } from '../_base/base';
+interface SVGNode {
+    id?: string;
+    viewBox?: string;
+    url?: string;
+}
+export interface EmptyProps {
+    layout?: ArrayElement<typeof strings.LAYOUT>;
+    imageStyle?: React.CSSProperties;
+    title?: React.ReactNode;
+    description?: React.ReactNode;
+    image?: React.ReactNode | SVGNode;
+    darkModeImage?: React.ReactNode | SVGNode;
+    style?: React.CSSProperties;
+    className?: string;
+    children?: React.ReactNode;
+}
+interface EmptyState {
+    mode: any;
+}
+export default class Empty extends BaseComponent<EmptyProps, EmptyState> {
+    static defaultProps: {
+        layout: string;
+    };
+    body: any;
+    observer: MutationObserver;
+    constructor(props: EmptyProps);
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    observe(mutationsList: any): void;
+    updateMode(): void;
+    render(): JSX.Element;
+}
+export {};

package/lib/cjs/empty/index.js

@@ -0,0 +1,141 @@
+"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 _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/empty/constants");
+
+require("@douyinfe/semi-foundation/lib/cjs/empty/empty.css");
+
+var _typography = _interopRequireDefault(require("../typography"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class Empty extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+    this.state = {
+      mode: null
+    };
+  }
+
+  componentDidMount() {
+    if (this.props.darkModeImage) {
+      this.body = window.document.body;
+      this.updateMode();
+      const config = {
+        attributes: true,
+        childList: false,
+        subtree: false
+      };
+      this.observer = new MutationObserver(this.observe);
+      this.observer.observe(this.body, config);
+    }
+  }
+
+  componentWillUnmount() {
+    this.observer && this.observer.disconnect();
+  }
+
+  observe(mutationsList) {
+    for (const mutation of mutationsList) {
+      if (mutation.type === 'attributes' && mutation.attributeName === 'theme-mode') {
+        this.updateMode();
+      }
+    }
+  }
+
+  updateMode() {
+    const val = this.body.getAttribute('theme-mode');
+
+    if (val !== this.state.mode) {
+      this.setState({
+        mode: val
+      });
+    }
+  }
+
+  render() {
+    var _context;
+
+    const {
+      className,
+      image,
+      description,
+      style,
+      title,
+      imageStyle,
+      children,
+      layout,
+      darkModeImage
+    } = this.props;
+    const alt = typeof description === 'string' ? description : 'empty';
+    const imgSrc = this.state.mode && darkModeImage ? darkModeImage : image;
+    let imageNode = null;
+
+    if (typeof imgSrc === 'string') {
+      imageNode = /*#__PURE__*/_react.default.createElement("img", {
+        alt: alt,
+        src: imgSrc
+      });
+    } else if (imgSrc && 'id' in imgSrc) {
+      imageNode = /*#__PURE__*/_react.default.createElement("svg", {
+        "aria-hidden": "true"
+      }, /*#__PURE__*/_react.default.createElement("use", {
+        xlinkHref: "#".concat(imgSrc.id)
+      }));
+    } else {
+      imageNode = imgSrc;
+    }
+
+    const wrapperCls = (0, _classnames.default)(className, prefixCls, {
+      [(0, _concat.default)(_context = "".concat(prefixCls, "-")).call(_context, layout)]: layout
+    });
+    const titleProps = imageNode ? {
+      heading: 4
+    } : {
+      heading: 6,
+      style: {
+        fontWeight: 400
+      }
+    };
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: wrapperCls,
+      style: style
+    }, /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-image"),
+      style: imageStyle
+    }, imageNode), /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-content")
+    }, title ? /*#__PURE__*/_react.default.createElement(_typography.default.Title, (0, _assign.default)({}, titleProps, {
+      className: "".concat(prefixCls, "-title")
+    }), title) : null, description ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-description")
+    }, description) : null, children ? /*#__PURE__*/_react.default.createElement("div", {
+      className: "".concat(prefixCls, "-footer")
+    }, children) : null));
+  }
+
+}
+
+exports.default = Empty;
+Empty.defaultProps = {
+  layout: 'vertical'
+};

package/lib/cjs/form/arrayField.d.ts

@@ -0,0 +1,33 @@
+import React, { Component } from 'react';
+import { FormUpdaterContextType } from '@douyinfe/semi-foundation/lib/cjs/form/interface';
+export interface ArrayFieldProps {
+    initValue?: any[];
+    field?: string;
+    children?: (props: ArrayFieldChildrenProps) => React.ReactNode;
+}
+export interface ArrayFieldChildrenProps {
+    arrayFields: {
+        key: string;
+        field: string;
+        remove: () => void;
+    }[];
+    add: () => void;
+    addWithInitValue: (lineObject: Record<string, any>) => void;
+}
+export interface ArrayFieldState {
+    keys: string[];
+}
+declare class ArrayFieldComponent extends Component<ArrayFieldProps, ArrayFieldState> {
+    static contextType: React.Context<FormUpdaterContextType>;
+    cacheFieldValues: any[];
+    shouldUseInitValue: boolean;
+    cacheUpdateKey: string;
+    constructor(props: ArrayFieldProps, context: FormUpdaterContextType);
+    componentWillUnmount(): void;
+    componentDidUpdate(): void;
+    add(): void;
+    addWithInitValue(lineObject: Record<string, any>): void;
+    remove(i: number): void;
+    render(): JSX.Element;
+}
+export default ArrayFieldComponent;