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

package/lib/cjs/tagInput/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 _assign = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/assign"));
+
+var _concat = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/concat"));
+
+var _forEach = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/for-each"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
+
+var _isNull2 = _interopRequireDefault(require("lodash/isNull"));
+
+var _isArray2 = _interopRequireDefault(require("lodash/isArray"));
+
+var _isString2 = _interopRequireDefault(require("lodash/isString"));
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _constants = require("@douyinfe/semi-foundation/lib/cjs/tagInput/constants");
+
+require("@douyinfe/semi-foundation/lib/cjs/tagInput/tagInput.css");
+
+var _foundation = _interopRequireDefault(require("@douyinfe/semi-foundation/lib/cjs/tagInput/foundation"));
+
+var _baseComponent = _interopRequireDefault(require("../_base/baseComponent"));
+
+var _tag = _interopRequireDefault(require("../tag"));
+
+var _input = _interopRequireDefault(require("../input"));
+
+var _popover = _interopRequireDefault(require("../popover"));
+
+var _paragraph = _interopRequireDefault(require("../typography/paragraph"));
+
+var _semiIcons = require("@douyinfe/semi-icons");
+
+const prefixCls = _constants.cssClasses.PREFIX;
+
+class TagInput extends _baseComponent.default {
+  constructor(props) {
+    super(props);
+
+    this.handleInputChange = e => {
+      this.foundation.handleInputChange(e);
+    };
+
+    this.handleKeyDown = e => {
+      this.foundation.handleKeyDown(e);
+    };
+
+    this.handleInputFocus = e => {
+      this.foundation.handleInputFocus(e);
+    };
+
+    this.handleInputBlur = e => {
+      this.foundation.handleInputBlur(e);
+    };
+
+    this.handleClearBtn = e => {
+      this.foundation.handleClearBtn(e);
+    };
+
+    this.handleTagClose = idx => {
+      this.foundation.handleTagClose(idx);
+    };
+
+    this.handleInputMouseLeave = e => {
+      this.foundation.handleInputMouseLeave();
+    };
+
+    this.handleInputMouseEnter = e => {
+      this.foundation.handleInputMouseEnter();
+    };
+
+    this.foundation = new _foundation.default(this.adapter);
+    this.state = {
+      tagsArray: props.defaultValue || [],
+      inputValue: '',
+      focusing: false,
+      hovering: false
+    };
+    this.inputRef = /*#__PURE__*/_react.default.createRef();
+  }
+
+  static getDerivedStateFromProps(nextProps, prevState) {
+    const {
+      value,
+      inputValue
+    } = nextProps;
+    return {
+      tagsArray: (0, _isArray2.default)(value) ? value : prevState.tagsArray,
+      inputValue: (0, _isString2.default)(inputValue) ? inputValue : prevState.inputValue
+    };
+  }
+
+  get adapter() {
+    return (0, _assign.default)((0, _assign.default)({}, super.adapter), {
+      setInputValue: inputValue => {
+        this.setState({
+          inputValue
+        });
+      },
+      setTagsArray: tagsArray => {
+        this.setState({
+          tagsArray
+        });
+      },
+      setFocusing: focusing => {
+        this.setState({
+          focusing
+        });
+      },
+      setHovering: hovering => {
+        this.setState({
+          hovering
+        });
+      },
+      notifyBlur: e => {
+        this.props.onBlur(e);
+      },
+      notifyFocus: e => {
+        this.props.onFocus(e);
+      },
+      notifyInputChange: (v, e) => {
+        this.props.onInputChange(v, e);
+      },
+      notifyTagChange: v => {
+        this.props.onChange(v);
+      },
+      notifyTagAdd: v => {
+        this.props.onAdd(v);
+      },
+      notifyTagRemove: (v, idx) => {
+        this.props.onRemove(v, idx);
+      },
+      notifyKeyDown: e => {
+        this.props.onKeyDown(e);
+      }
+    });
+  }
+
+  componentDidMount() {
+    const {
+      disabled,
+      autoFocus
+    } = this.props;
+
+    if (!disabled && autoFocus) {
+      this.inputRef.current.focus();
+    }
+  }
+
+  renderClearBtn() {
+    const {
+      hovering,
+      tagsArray,
+      inputValue
+    } = this.state;
+    const {
+      showClear,
+      disabled
+    } = this.props;
+    const clearCls = (0, _classnames.default)("".concat(prefixCls, "-clearBtn"), {
+      ["".concat(prefixCls, "-clearBtn-invisible")]: !hovering || inputValue === '' && tagsArray.length === 0 || disabled
+    });
+
+    if (showClear) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: clearCls,
+        onClick: e => this.handleClearBtn(e)
+      }, /*#__PURE__*/_react.default.createElement(_semiIcons.IconClear, null));
+    }
+
+    return null;
+  }
+
+  renderPrefix() {
+    const {
+      prefix
+    } = this.props;
+
+    if ((0, _isNull2.default)(prefix) || (0, _isUndefined2.default)(prefix)) {
+      return null;
+    }
+
+    const prefixWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-prefix"), {
+      ["".concat(prefixCls, "-prefix-text")]: prefix && (0, _isString2.default)(prefix),
+      // eslint-disable-next-line max-len
+      ["".concat(prefixCls, "-prefix-icon")]: /*#__PURE__*/_react.default.isValidElement(prefix) && !(prefix && (0, _isString2.default)(prefix))
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: prefixWrapperCls
+    }, prefix);
+  }
+
+  renderSuffix() {
+    const {
+      suffix
+    } = this.props;
+
+    if ((0, _isNull2.default)(suffix) || (0, _isUndefined2.default)(suffix)) {
+      return null;
+    }
+
+    const suffixWrapperCls = (0, _classnames.default)("".concat(prefixCls, "-suffix"), {
+      ["".concat(prefixCls, "-suffix-text")]: suffix && (0, _isString2.default)(suffix),
+      // eslint-disable-next-line max-len
+      ["".concat(prefixCls, "-suffix-icon")]: /*#__PURE__*/_react.default.isValidElement(suffix) && !(suffix && (0, _isString2.default)(suffix))
+    });
+    return /*#__PURE__*/_react.default.createElement("div", {
+      className: suffixWrapperCls
+    }, suffix);
+  }
+
+  renderTags() {
+    var _context;
+
+    const {
+      size,
+      disabled,
+      renderTagItem,
+      maxTagCount,
+      showContentTooltip,
+      showRestTagsPopover,
+      restTagsPopoverProps = {}
+    } = this.props;
+    const {
+      tagsArray
+    } = this.state;
+    const tagCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-tag"), {
+      [(0, _concat.default)(_context = "".concat(prefixCls, "-wrapper-tag-size-")).call(_context, size)]: size
+    });
+    const typoCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-typo"), {
+      ["".concat(prefixCls, "-wrapper-typo-disabled")]: disabled
+    });
+    const spanNotWithPopoverCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"), {
+      ["".concat(prefixCls, "-wrapper-n-disabled")]: disabled
+    });
+    const restTags = [];
+    const tags = [];
+    (0, _forEach.default)(tagsArray).call(tagsArray, (value, index) => {
+      let item = null;
+
+      if ((0, _isFunction2.default)(renderTagItem)) {
+        item = renderTagItem(value, index);
+      } else {
+        var _context2;
+
+        item = /*#__PURE__*/_react.default.createElement(_tag.default, {
+          className: tagCls,
+          color: "white",
+          size: size === 'small' ? 'small' : 'large',
+          type: "light",
+          onClose: () => {
+            !disabled && this.handleTagClose(index);
+          },
+          closable: !disabled,
+          key: (0, _concat.default)(_context2 = "".concat(index)).call(_context2, value),
+          visible: true
+        }, /*#__PURE__*/_react.default.createElement(_paragraph.default, {
+          className: typoCls,
+          ellipsis: {
+            showTooltip: showContentTooltip,
+            rows: 1
+          }
+        }, value));
+      }
+
+      if (maxTagCount && index >= maxTagCount) {
+        restTags.push(item);
+      } else {
+        tags.push(item);
+      }
+    });
+    return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, tags, restTags.length > 0 && (showRestTagsPopover && !disabled ? /*#__PURE__*/_react.default.createElement(_popover.default, (0, _assign.default)({
+      content: restTags,
+      showArrow: true,
+      trigger: "hover",
+      position: "top",
+      autoAdjustOverflow: true
+    }, restTagsPopoverProps), /*#__PURE__*/_react.default.createElement("span", {
+      className: (0, _classnames.default)("".concat(prefixCls, "-wrapper-n"))
+    }, "+", tagsArray.length - maxTagCount)) : /*#__PURE__*/_react.default.createElement("span", {
+      className: spanNotWithPopoverCls
+    }, "+".concat(tagsArray.length - maxTagCount))));
+  }
+
+  blur() {
+    this.inputRef.current.blur();
+  }
+
+  focus() {
+    this.inputRef.current.focus();
+  }
+
+  render() {
+    const {
+      size,
+      style,
+      className,
+      disabled,
+      placeholder,
+      validateStatus
+    } = this.props;
+    const {
+      focusing,
+      hovering,
+      tagsArray,
+      inputValue
+    } = this.state;
+    const tagInputCls = (0, _classnames.default)(prefixCls, className, {
+      ["".concat(prefixCls, "-focus")]: focusing,
+      ["".concat(prefixCls, "-disabled")]: disabled,
+      ["".concat(prefixCls, "-hover")]: hovering && !disabled,
+      ["".concat(prefixCls, "-error")]: validateStatus === 'error',
+      ["".concat(prefixCls, "-warning")]: validateStatus === 'warning'
+    });
+    const inputCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper-input"));
+    const wrapperCls = (0, _classnames.default)("".concat(prefixCls, "-wrapper"));
+    return /*#__PURE__*/_react.default.createElement("div", {
+      style: style,
+      className: tagInputCls,
+      onMouseEnter: e => {
+        this.handleInputMouseEnter(e);
+      },
+      onMouseLeave: e => {
+        this.handleInputMouseLeave(e);
+      }
+    }, this.renderPrefix(), /*#__PURE__*/_react.default.createElement("div", {
+      className: wrapperCls
+    }, this.renderTags(), /*#__PURE__*/_react.default.createElement(_input.default, {
+      ref: this.inputRef,
+      className: inputCls,
+      disabled: disabled,
+      value: inputValue,
+      size: size,
+      placeholder: tagsArray.length === 0 ? placeholder : '',
+      onKeyDown: e => {
+        this.handleKeyDown(e);
+      },
+      onChange: (v, e) => {
+        this.handleInputChange(e);
+      },
+      onBlur: e => {
+        this.handleInputBlur(e);
+      },
+      onFocus: e => {
+        this.handleInputFocus(e);
+      }
+    })), this.renderClearBtn(), this.renderSuffix());
+  }
+
+}
+
+TagInput.propTypes = {
+  children: _propTypes.default.node,
+  style: _propTypes.default.object,
+  className: _propTypes.default.string,
+  disabled: _propTypes.default.bool,
+  allowDuplicates: _propTypes.default.bool,
+  max: _propTypes.default.number,
+  maxTagCount: _propTypes.default.number,
+  maxLength: _propTypes.default.number,
+  showRestTagsPopover: _propTypes.default.bool,
+  restTagsPopoverProps: _propTypes.default.object,
+  showContentTooltip: _propTypes.default.bool,
+  defaultValue: _propTypes.default.array,
+  value: _propTypes.default.array,
+  inputValue: _propTypes.default.string,
+  placeholder: _propTypes.default.string,
+  separator: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.array]),
+  showClear: _propTypes.default.bool,
+  addOnBlur: _propTypes.default.bool,
+  autoFocus: _propTypes.default.bool,
+  renderTagItem: _propTypes.default.func,
+  onBlur: _propTypes.default.func,
+  onFocus: _propTypes.default.func,
+  onChange: _propTypes.default.func,
+  onInputChange: _propTypes.default.func,
+  onExceed: _propTypes.default.func,
+  onInputExceed: _propTypes.default.func,
+  onAdd: _propTypes.default.func,
+  onRemove: _propTypes.default.func,
+  onKeyDown: _propTypes.default.func,
+  size: _propTypes.default.oneOf(_constants.strings.SIZE_SET),
+  validateStatus: _propTypes.default.oneOf(_constants.strings.STATUS),
+  prefix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]),
+  suffix: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+};
+TagInput.defaultProps = {
+  showClear: false,
+  addOnBlur: false,
+  allowDuplicates: true,
+  showRestTagsPopover: true,
+  autoFocus: false,
+  showContentTooltip: true,
+  separator: ',',
+  size: 'default',
+  validateStatus: 'default',
+  onBlur: _noop2.default,
+  onFocus: _noop2.default,
+  onChange: _noop2.default,
+  onInputChange: _noop2.default,
+  onExceed: _noop2.default,
+  onInputExceed: _noop2.default,
+  onAdd: _noop2.default,
+  onRemove: _noop2.default,
+  onKeyDown: _noop2.default
+};
+var _default = TagInput;
+exports.default = _default;

package/lib/cjs/timePicker/Combobox.d.ts

@@ -0,0 +1,79 @@
+import PropTypes from 'prop-types';
+import BaseComponent, { BaseProps } from '../_base/baseComponent';
+import ScrollItem from '../scrollList/scrollItem';
+import ComboboxFoundation, { formatOption } from '@douyinfe/semi-foundation/lib/cjs/timePicker/ComboxFoundation';
+import { TimePickerProps } from './TimePicker';
+import { Locale } from '../locale/interface';
+export declare type ComboboxProps = Pick<TimePickerProps, 'format' | 'prefixCls' | 'disabledHours' | 'disabledMinutes' | 'disabledSeconds' | 'hideDisabledOptions' | 'use12Hours' | 'scrollItemProps' | 'panelFooter' | 'panelHeader'> & BaseProps & {
+    defaultOpenValue?: TimePickerProps['value'];
+    showHour?: boolean;
+    showMinute?: boolean;
+    showSecond?: boolean;
+    onChange?: (value: {
+        isAM: boolean;
+        value: string;
+        timeStampValue: number;
+    }) => void;
+    onCurrentSelectPanelChange?: (range: string) => void;
+    isAM?: boolean;
+    timeStampValue?: any;
+};
+export interface ComboboxState {
+    showHour: boolean;
+    showMinute: boolean;
+    showSecond: boolean;
+    hourOptions: number[];
+    minuteOptions: number[];
+    secondOptions: number[];
+}
+export declare type FormatOptionReturn = ReturnType<typeof formatOption>;
+export interface AMPMOptionItem {
+    value: string;
+    text: string;
+}
+declare class Combobox extends BaseComponent<ComboboxProps, ComboboxState> {
+    static propTypes: {
+        format: PropTypes.Requireable<string>;
+        defaultOpenValue: PropTypes.Requireable<object>;
+        prefixCls: PropTypes.Requireable<string>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        showHour: PropTypes.Requireable<boolean>;
+        showMinute: PropTypes.Requireable<boolean>;
+        showSecond: PropTypes.Requireable<boolean>;
+        disabledHours: PropTypes.Requireable<(...args: any[]) => any>;
+        disabledMinutes: PropTypes.Requireable<(...args: any[]) => any>;
+        disabledSeconds: PropTypes.Requireable<(...args: any[]) => any>;
+        hideDisabledOptions: PropTypes.Requireable<boolean>;
+        onCurrentSelectPanelChange: PropTypes.Requireable<(...args: any[]) => any>;
+        use12Hours: PropTypes.Requireable<boolean>;
+        isAM: PropTypes.Requireable<boolean>;
+        timeStampValue: PropTypes.Requireable<any>;
+        scrollItemProps: PropTypes.Requireable<object>;
+    };
+    static defaultProps: {
+        disabledHours: (...args: any[]) => void;
+        disabledMinutes: (...args: any[]) => void;
+        disabledSeconds: (...args: any[]) => void;
+        format: string;
+    };
+    foundation: ComboboxFoundation;
+    constructor(props: ComboboxProps);
+    componentDidUpdate(prevProps: ComboboxProps, prevState: ComboboxState): void;
+    componentWillUnmount(): void;
+    componentDidMount(): void;
+    cacheRefCurrent: (key: string, current: ScrollItem<FormatOptionReturn> | ScrollItem<AMPMOptionItem>) => void;
+    reselect: () => void;
+    onItemChange: ({ type, value, disabled }: {
+        type?: string;
+        value: string;
+        disabled?: boolean;
+    }) => void;
+    onEnterSelectPanel: (range: string) => void;
+    renderHourSelect(hour: number, locale: Locale['TimePicker']): JSX.Element;
+    renderMinuteSelect(minute: number, locale: Locale['TimePicker']): JSX.Element;
+    renderSecondSelect(second: number, locale: Locale['TimePicker']): JSX.Element;
+    renderAMPMSelect(locale: Locale['TimePicker'], localeCode: string): JSX.Element;
+    getDisplayDateFromTimeStamp: (timeStampValue: Date | string) => any;
+    render(): JSX.Element;
+}
+export default Combobox;