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

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

@@ -0,0 +1,167 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { AutoCompleteAdapter, StateOptionItem, DataItem } from '@douyinfe/semi-foundation/lib/cjs/autoComplete/foundation';
+import BaseComponent, { ValidateStatus } from '../_base/baseComponent';
+import { Position } from '../tooltip';
+import Option from '../select/option';
+import '@douyinfe/semi-foundation/lib/cjs/autoComplete/autoComplete.css';
+import { Motion } from '../_base/base';
+/**
+ * AutoComplete is an enhanced Input (candidates suggest that users can choose or not),
+ * and the Select positioning that supports Search is still a selector.
+ * 1. When you click to expand, Select will clear all input values, but AutoComplete will not
+ * 2. AutoComplete's renderSelectedItem only supports simple string returns, while Select's renderSelectedItem can return ReactNode
+ * 3. Select props.value supports incoming object, but autoComplete only supports string (because the value needs to be displayed in Input)
+ */
+export interface BaseDataItem extends DataItem {
+    label?: React.ReactNode;
+}
+export declare type AutoCompleteItems = BaseDataItem | string | number;
+export interface AutoCompleteProps<T extends AutoCompleteItems> {
+    autoAdjustOverflow?: boolean;
+    autoFocus?: boolean;
+    className?: string;
+    children?: React.ReactNode;
+    data?: T[];
+    disabled?: boolean;
+    defaultOpen?: boolean;
+    defaultValue?: T;
+    defaultActiveFirstOption?: boolean;
+    dropdownMatchSelectWidth?: boolean;
+    dropdownClassName?: string;
+    dropdownStyle?: React.CSSProperties;
+    emptyContent?: React.ReactNode | null;
+    getPopupContainer?: () => HTMLElement;
+    insetLabel?: React.ReactNode;
+    loading?: boolean;
+    motion?: Motion;
+    maxHeight?: string | number;
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    onFocus?: (e: React.FocusEvent) => void;
+    onBlur?: (e: React.FocusEvent) => void;
+    onChange?: (value: string | number) => void;
+    onSearch?: (inputValue: string) => void;
+    onSelect?: (value: T) => void;
+    onClear?: () => void;
+    onChangeWithObject?: boolean;
+    onSelectWithObject?: boolean;
+    onDropdownVisibleChange?: (visible: boolean) => void;
+    prefix?: React.ReactNode;
+    placeholder?: string;
+    position?: Position;
+    renderItem?: (option: T) => React.ReactNode;
+    renderSelectedItem?: (option: T) => string;
+    size?: 'small' | 'default' | 'large';
+    style?: React.CSSProperties;
+    suffix?: React.ReactNode;
+    showClear?: boolean;
+    triggerRender?: (props?: any) => React.ReactNode;
+    stopPropagation?: boolean | string;
+    value?: string | number;
+    validateStatus?: ValidateStatus;
+    zIndex?: number;
+}
+interface KeyboardEventType {
+    onKeyDown?: React.KeyboardEventHandler;
+}
+interface AutoCompleteState {
+    dropdownMinWidth: null | number;
+    inputValue: string | undefined | number;
+    options: StateOptionItem[];
+    visible: boolean;
+    focusIndex: number;
+    selection: Map<any, any>;
+    rePosKey: number;
+    keyboardEventSet?: KeyboardEventType;
+}
+declare class AutoComplete<T extends AutoCompleteItems> extends BaseComponent<AutoCompleteProps<T>, AutoCompleteState> {
+    static propTypes: {
+        autoFocus: PropTypes.Requireable<boolean>;
+        autoAdjustOverflow: PropTypes.Requireable<boolean>;
+        className: PropTypes.Requireable<string>;
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        data: PropTypes.Requireable<any[]>;
+        defaultOpen: PropTypes.Requireable<boolean>;
+        defaultValue: PropTypes.Requireable<string | number>;
+        defaultActiveFirstOption: PropTypes.Requireable<boolean>;
+        disabled: PropTypes.Requireable<boolean>;
+        dropdownMatchSelectWidth: PropTypes.Requireable<boolean>;
+        dropdownClassName: PropTypes.Requireable<string>;
+        dropdownStyle: PropTypes.Requireable<object>;
+        emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onSearch: PropTypes.Requireable<(...args: any[]) => any>;
+        onSelect: PropTypes.Requireable<(...args: any[]) => any>;
+        onClear: PropTypes.Requireable<(...args: any[]) => any>;
+        onBlur: PropTypes.Requireable<(...args: any[]) => any>;
+        onFocus: PropTypes.Requireable<(...args: any[]) => any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        position: PropTypes.Requireable<"top" | "topLeft" | "topRight" | "left" | "leftTop" | "leftBottom" | "right" | "rightTop" | "rightBottom" | "bottom" | "bottomLeft" | "bottomRight" | "leftTopOver" | "rightTopOver">;
+        placeholder: PropTypes.Requireable<string>;
+        prefix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        onChangeWithObject: PropTypes.Requireable<boolean>;
+        onSelectWithObject: PropTypes.Requireable<boolean>;
+        renderItem: PropTypes.Requireable<(...args: any[]) => any>;
+        renderSelectedItem: PropTypes.Requireable<(...args: any[]) => any>;
+        suffix: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        showClear: PropTypes.Requireable<boolean>;
+        size: PropTypes.Requireable<"default" | "small" | "large">;
+        style: PropTypes.Requireable<object>;
+        stopPropagation: PropTypes.Requireable<string | boolean>;
+        maxHeight: PropTypes.Requireable<string | number>;
+        mouseEnterDelay: PropTypes.Requireable<number>;
+        mouseLeaveDelay: PropTypes.Requireable<number>;
+        motion: PropTypes.Requireable<boolean | object>;
+        getPopupContainer: PropTypes.Requireable<(...args: any[]) => any>;
+        triggerRender: PropTypes.Requireable<(...args: any[]) => any>;
+        value: PropTypes.Requireable<string | number>;
+        validateStatus: PropTypes.Requireable<"default" | "error" | "warning" | "success">;
+        zIndex: PropTypes.Requireable<number>;
+    };
+    static Option: typeof Option;
+    static defaultProps: {
+        stopPropagation: boolean;
+        motion: boolean;
+        zIndex: number;
+        position: "bottomLeft";
+        data: [];
+        showClear: boolean;
+        disabled: boolean;
+        size: "default";
+        onFocus: (...args: any[]) => void;
+        onSearch: (...args: any[]) => void;
+        onClear: (...args: any[]) => void;
+        onBlur: (...args: any[]) => void;
+        onSelect: (...args: any[]) => void;
+        onChange: (...args: any[]) => void;
+        onSelectWithObject: boolean;
+        onDropdownVisibleChange: (...args: any[]) => void;
+        defaultActiveFirstOption: boolean;
+        dropdownMatchSelectWidth: boolean;
+        loading: boolean;
+        maxHeight: number;
+        validateStatus: "default";
+        autoFocus: boolean;
+        emptyContent: null;
+    };
+    triggerRef: React.RefObject<HTMLDivElement> | null;
+    optionsRef: React.RefObject<HTMLDivElement> | null;
+    private clickOutsideHandler;
+    constructor(props: AutoCompleteProps<T>);
+    get adapter(): AutoCompleteAdapter<AutoCompleteProps<T>, AutoCompleteState>;
+    componentDidMount(): void;
+    componentWillUnmount(): void;
+    componentDidUpdate(prevProps: AutoCompleteProps<T>, prevState: AutoCompleteState): void;
+    onSelect: (option: StateOptionItem, optionIndex: number, e: React.MouseEvent | React.KeyboardEvent) => void;
+    onSearch: (value: string) => void;
+    onBlur: (e: React.FocusEvent) => void;
+    onFocus: (e: React.FocusEvent) => void;
+    onInputClear: () => void;
+    handleInputClick: (e: React.MouseEvent) => void;
+    renderInput(): React.ReactNode;
+    renderLoading(): JSX.Element;
+    renderOption(option: StateOptionItem, optionIndex: number): React.ReactNode;
+    renderOptionList(): React.ReactNode;
+    render(): React.ReactNode;
+}
+export default AutoComplete;

package/lib/cjs/autoComplete/index.js

@@ -0,0 +1,429 @@
+"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 _map = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/map"));
+
+var _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _from = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/from"));
+
+var _values = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/values"));
+
+var _map2 = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/map"));
+
+var _filter = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/filter"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _isEqual2 = _interopRequireDefault(require("lodash/isEqual"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/autoComplete/constants");
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/autoComplete/foundation"));
+
+var _constants2 = require("@douyinfe/semi-foundation/lib/cjs/popover/constants");
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _spin = _interopRequireDefault(require("../spin"));
+
+var _popover = _interopRequireDefault(require("../popover"));
+
+var _input = _interopRequireDefault(require("../input"));
+
+var _trigger = _interopRequireDefault(require("../trigger"));
+
+var _option = _interopRequireDefault(require("../select/option"));
+
+var _warning = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/utils/warning"));
+
+require("@douyinfe/semi-foundation/lib/cjs/autoComplete/autoComplete.css");
+
+/* eslint-disable @typescript-eslint/ban-types, max-len */
+const prefixCls = _constants.cssClasses.PREFIX;
+const sizeSet = _constants.strings.SIZE;
+const positionSet = _constants.strings.POSITION;
+const statusSet = _constants.strings.STATUS;
+
+class AutoComplete extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.onSelect = (option, optionIndex, e) => {
+      this.foundation.handleSelect(option, optionIndex);
+    };
+
+    this.onSearch = value => {
+      this.foundation.handleSearch(value);
+    };
+
+    this.onBlur = e => this.foundation.handleBlur(e);
+
+    this.onFocus = e => this.foundation.handleFocus(e);
+
+    this.onInputClear = () => this.foundation.handleClear();
+
+    this.handleInputClick = e => this.foundation.handleInputClick(e);
+
+    this.foundation = new _foundation.default(this.adapter);
+    const initRePosKey = 1;
+    this.state = {
+      dropdownMinWidth: null,
+      inputValue: '',
+      // option list
+      options: [],
+      // popover visible
+      visible: false,
+      // current focus option index
+      focusIndex: props.defaultActiveFirstOption ? 0 : -1,
+      // current selected options
+      selection: new _map.default(),
+      rePosKey: initRePosKey
+    };
+    this.triggerRef = /*#__PURE__*/_react.default.createRef();
+    this.optionsRef = /*#__PURE__*/_react.default.createRef();
+    this.clickOutsideHandler = null;
+    (0, _warning.default)('triggerRender' in this.props && typeof this.props.triggerRender === 'function', "[Semi AutoComplete] \n            - If you are using the following props: 'suffix', 'prefix', 'showClear', 'validateStatus', and 'size', \n            please notice that they will be removed in the next major version.\n            Please use 'componentProps' to retrieve these props instead.\n            - If you are using 'onBlur', 'onFocus', please try to avoid using them and look for changes in the future.");
+  }
+
+  get adapter() {
+    const keyboardAdapter = {
+      registerKeyDown: cb => {
+        const keyboardEventSet = {
+          onKeyDown: cb
+        };
+        this.setState({
+          keyboardEventSet
+        });
+      },
+      unregisterKeyDown: cb => {
+        this.setState({
+          keyboardEventSet: {}
+        });
+      },
+      updateFocusIndex: focusIndex => {
+        this.setState({
+          focusIndex
+        });
+      }
+    };
+    return (0, _assign.default)((0, _assign.default)((0, _assign.default)({}, super.adapter), keyboardAdapter), {
+      getTriggerWidth: () => {
+        const el = this.triggerRef.current;
+        return el && el.getBoundingClientRect().width;
+      },
+      setOptionWrapperWidth: width => {
+        this.setState({
+          dropdownMinWidth: width
+        });
+      },
+      updateInputValue: inputValue => {
+        this.setState({
+          inputValue
+        });
+      },
+      toggleListVisible: isShow => {
+        this.setState({
+          visible: isShow
+        });
+      },
+      updateOptionList: optionList => {
+        this.setState({
+          options: optionList
+        });
+      },
+      updateSelection: selection => {
+        this.setState({
+          selection
+        });
+      },
+      notifySearch: inputValue => {
+        this.props.onSearch(inputValue);
+      },
+      notifyChange: value => {
+        this.props.onChange(value);
+      },
+      notifySelect: option => {
+        this.props.onSelect(option);
+      },
+      notifyDropdownVisibleChange: isVisible => {
+        this.props.onDropdownVisibleChange(isVisible);
+      },
+      notifyClear: () => {
+        this.props.onClear();
+      },
+      notifyFocus: event => {
+        this.props.onFocus(event);
+      },
+      notifyBlur: event => {
+        this.props.onBlur(event);
+      },
+      rePositionDropdown: () => {
+        let {
+          rePosKey
+        } = this.state;
+        rePosKey = rePosKey + 1;
+        this.setState({
+          rePosKey
+        });
+      }
+    });
+  }
+
+  componentDidMount() {
+    this.foundation.init();
+  }
+
+  componentWillUnmount() {
+    this.foundation.destroy();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (!(0, _isEqual2.default)(this.props.data, prevProps.data)) {
+      this.foundation.handleDataChange(this.props.data);
+    }
+
+    if (this.props.value !== prevProps.value) {
+      this.foundation.handleValueChange(this.props.value);
+    }
+  }
+
+  renderInput() {
+    const {
+      size,
+      prefix,
+      insetLabel,
+      suffix,
+      placeholder,
+      style,
+      className,
+      showClear,
+      disabled,
+      triggerRender,
+      validateStatus,
+      autoFocus,
+      value
+    } = this.props;
+    const {
+      inputValue,
+      keyboardEventSet,
+      selection
+    } = this.state;
+    const useCustomTrigger = typeof triggerRender === 'function';
+    const outerProps = (0, _assign.default)({
+      style,
+      className: useCustomTrigger ? (0, _classnames.default)(className) : (0, _classnames.default)({
+        [prefixCls]: true,
+        ["".concat(prefixCls, "-disabled")]: disabled
+      }, className),
+      onClick: this.handleInputClick,
+      ref: this.triggerRef
+    }, keyboardEventSet);
+    const innerProps = {
+      disabled,
+      placeholder,
+      autofocus: autoFocus,
+      onChange: this.onSearch,
+      onClear: this.onInputClear,
+      // TODO: remove in next major version
+      suffix,
+      prefix: prefix || insetLabel,
+      showClear,
+      validateStatus,
+      size,
+      onBlur: this.onBlur,
+      onFocus: this.onFocus
+    };
+    return /*#__PURE__*/_react.default.createElement("div", (0, _assign.default)({}, outerProps), typeof triggerRender === 'function' ? /*#__PURE__*/_react.default.createElement(_trigger.default, (0, _assign.default)({}, innerProps, {
+      inputValue: typeof value !== 'undefined' ? value : inputValue,
+      value: (0, _from.default)((0, _values.default)(selection).call(selection)),
+      triggerRender: triggerRender,
+      componentName: "AutoComplete",
+      componentProps: (0, _assign.default)({}, this.props)
+    })) : /*#__PURE__*/_react.default.createElement(_input.default, (0, _assign.default)({}, innerProps, {
+      value: typeof value !== 'undefined' ? value : inputValue
+    })));
+  }
+
+  renderLoading() {
+    const loadingWrapperCls = "".concat(prefixCls, "-loading-wrapper");
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: loadingWrapperCls
+    }, /*#__PURE__*/_react.default.createElement(_spin.default, null));
+  }
+
+  renderOption(option, optionIndex) {
+    const {
+      focusIndex
+    } = this.state;
+    const isFocused = optionIndex === focusIndex;
+    return /*#__PURE__*/_react.default.createElement(_option.default, (0, _assign.default)({
+      showTick: false,
+      onSelect: (v, e) => this.onSelect(v, optionIndex, e),
+      // selected={selection.has(option.label)}
+      focused: isFocused,
+      onMouseEnter: () => this.foundation.handleOptionMouseEnter(optionIndex),
+      key: option.key || option.label + option.value + optionIndex
+    }, option), option.label);
+  }
+
+  renderOptionList() {
+    const {
+      maxHeight,
+      dropdownStyle,
+      dropdownClassName,
+      loading,
+      emptyContent
+    } = this.props;
+    const {
+      options,
+      dropdownMinWidth
+    } = this.state;
+    const listCls = (0, _classnames.default)({
+      ["".concat(prefixCls, "-option-list")]: true
+    }, dropdownClassName);
+    let optionsNode;
+
+    if (options.length === 0) {
+      optionsNode = emptyContent;
+    } else {
+      var _context;
+
+      optionsNode = (0, _map2.default)(_context = (0, _filter.default)(options).call(options, option => option.show)).call(_context, (option, i) => this.renderOption(option, i));
+    }
+
+    const style = (0, _assign.default)({
+      maxHeight: maxHeight,
+      minWidth: dropdownMinWidth
+    }, dropdownStyle);
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: listCls,
+      role: "listbox",
+      style: style
+    }, !loading ? optionsNode : this.renderLoading());
+  }
+
+  render() {
+    const {
+      position,
+      motion,
+      zIndex,
+      mouseEnterDelay,
+      mouseLeaveDelay,
+      autoAdjustOverflow,
+      stopPropagation,
+      getPopupContainer
+    } = this.props;
+    const {
+      visible,
+      rePosKey
+    } = this.state;
+    const input = this.renderInput();
+    const optionList = this.renderOptionList();
+    return /*#__PURE__*/_react.default.createElement(_popover.default, {
+      mouseEnterDelay: mouseEnterDelay,
+      mouseLeaveDelay: mouseLeaveDelay,
+      autoAdjustOverflow: autoAdjustOverflow,
+      trigger: "custom",
+      motion: motion,
+      visible: visible,
+      content: optionList,
+      position: position,
+      ref: this.optionsRef,
+      // TransformFromCenter TODO: need to confirm
+      zIndex: zIndex,
+      stopPropagation: stopPropagation,
+      getPopupContainer: getPopupContainer,
+      rePosKey: rePosKey
+    }, input);
+  }
+
+}
+
+AutoComplete.propTypes = {
+  autoFocus: _propTypes.default.bool,
+  autoAdjustOverflow: _propTypes.default.bool,
+  className: _propTypes.default.string,
+  children: _propTypes.default.node,
+  data: _propTypes.default.array,
+  defaultOpen: _propTypes.default.bool,
+  defaultValue: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  defaultActiveFirstOption: _propTypes.default.bool,
+  disabled: _propTypes.default.bool,
+  dropdownMatchSelectWidth: _propTypes.default.bool,
+  dropdownClassName: _propTypes.default.string,
+  dropdownStyle: _propTypes.default.object,
+  emptyContent: _propTypes.default.node,
+  onSearch: _propTypes.default.func,
+  onSelect: _propTypes.default.func,
+  onClear: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  position: _propTypes.default.oneOf(positionSet),
+  placeholder: _propTypes.default.string,
+  prefix: _propTypes.default.node,
+  onChangeWithObject: _propTypes.default.bool,
+  onSelectWithObject: _propTypes.default.bool,
+  renderItem: _propTypes.default.func,
+  renderSelectedItem: _propTypes.default.func,
+  suffix: _propTypes.default.node,
+  showClear: _propTypes.default.bool,
+  size: _propTypes.default.oneOf(sizeSet),
+  style: _propTypes.default.object,
+  stopPropagation: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.string]),
+  maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  mouseEnterDelay: _propTypes.default.number,
+  mouseLeaveDelay: _propTypes.default.number,
+  motion: _propTypes.default.oneOfType([_propTypes.default.bool, _propTypes.default.func, _propTypes.default.object]),
+  getPopupContainer: _propTypes.default.func,
+  triggerRender: _propTypes.default.func,
+  value: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
+  validateStatus: _propTypes.default.oneOf(statusSet),
+  zIndex: _propTypes.default.number
+};
+AutoComplete.Option = _option.default;
+AutoComplete.defaultProps = {
+  stopPropagation: true,
+  motion: true,
+  zIndex: _constants2.numbers.DEFAULT_Z_INDEX,
+  position: 'bottomLeft',
+  data: [],
+  showClear: false,
+  disabled: false,
+  size: 'default',
+  onFocus: _noop2.default,
+  onSearch: _noop2.default,
+  onClear: _noop2.default,
+  onBlur: _noop2.default,
+  onSelect: _noop2.default,
+  onChange: _noop2.default,
+  onSelectWithObject: false,
+  onDropdownVisibleChange: _noop2.default,
+  defaultActiveFirstOption: true,
+  dropdownMatchSelectWidth: true,
+  loading: false,
+  maxHeight: 300,
+  validateStatus: 'default',
+  autoFocus: false,
+  emptyContent: null // onPressEnter: () => undefined,
+  // defaultOpen: false,
+
+};
+var _default = AutoComplete;
+exports.default = _default;

package/lib/cjs/avatar/avatarGroup.d.ts

@@ -0,0 +1,22 @@
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
+import { AvatarGroupProps } from './interface';
+export default class AvatarGroup extends PureComponent<AvatarGroupProps> {
+    static defaultProps: {
+        size: string;
+        shape: string;
+        overlapFrom: string;
+    };
+    static propTypes: {
+        children: PropTypes.Requireable<PropTypes.ReactNodeLike>;
+        shape: PropTypes.Requireable<string>;
+        size: PropTypes.Requireable<string>;
+        maxCount: PropTypes.Requireable<number>;
+        renderMore: PropTypes.Requireable<(...args: any[]) => any>;
+        overlapFrom: PropTypes.Requireable<string>;
+    };
+    getAllAvatars(): React.ReactNodeArray;
+    getMergeAvatars(avatars: React.ReactNode[]): React.ReactNode[];
+    renderMoreAvatar(restNumber: number, restAvatars: React.ReactNode[]): JSX.Element;
+    render(): JSX.Element;
+}