@douyinfe/semi-foundation 2.28.0-beta.0 → 2.28.0

package/lib/cjs/tagInput/foundation.js

@@ -0,0 +1,391 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
+
+var _isFunction2 = _interopRequireDefault(require("lodash/isFunction"));
+
+var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
+
+var _isString2 = _interopRequireDefault(require("lodash/isString"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
+
+var _getSplitedArray = _interopRequireDefault(require("./utils/getSplitedArray"));
+
+var _isEnterPress = _interopRequireDefault(require("../utils/isEnterPress"));
+
+var _arrayMove = _interopRequireDefault(require("../utils/arrayMove"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class TagInputFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+    /**
+     * handler of input change
+     */
+
+    this.handleInputChange = e => {
+      const {
+        value
+      } = e.target;
+      const {
+        entering
+      } = this.getStates();
+
+      if (entering) {
+        // 如果处于输入法输入中，则先不检查输入是否有效，直接更新到inputValue，
+        // 因为对于输入法输入中而言，此时更新到 inputValue 的不是最后的结果，比如对于中文，此时 inputValue 中的内容是拼音
+        // 当输入法输入结束后，将在 handleInputCompositionEnd 中判断输入是否有效，处理结果
+        // If it is composition session, it does not check whether the input is valid, and directly updates to inputValue,
+        // Because for composition input, what is updated to inputValue at this time is not the final result.
+        // For example, for Chinese, the content in inputValue is pinyin at this time
+        // When the composition input is finished, it will be judged whether the input is valid in handleInputCompositionEnd and the result will be processed
+        this._onInputChange(value, e);
+      } else {
+        this._checkInputChangeValid(value) && this._onInputChange(value, e);
+      }
+    };
+
+    this.handleInputCompositionStart = e => {
+      this._adapter.setEntering(true);
+    };
+
+    this.handleInputCompositionEnd = e => {
+      this._adapter.setEntering(false);
+
+      const {
+        value
+      } = e.target;
+      const {
+        maxLength,
+        onInputExceed,
+        separator
+      } = this.getProps();
+      let allowChange = true;
+      const {
+        inputValue
+      } = this.getStates();
+
+      if ((0, _isNumber2.default)(maxLength)) {
+        const inputArr = (0, _getSplitedArray.default)(inputValue, separator);
+        let index = 0;
+
+        for (; index < inputArr.length; index++) {
+          if (inputArr[index].length > maxLength) {
+            allowChange = false;
+            (0, _isFunction2.default)(onInputExceed) && onInputExceed(value);
+            break;
+          }
+        }
+
+        if (!allowChange) {
+          const newInputArr = inputArr.slice(0, index);
+
+          if (index < inputArr.length) {
+            newInputArr.push(inputArr[index].slice(0, maxLength));
+          }
+
+          this._adapter.setInputValue(newInputArr.join(separator));
+        }
+      }
+    };
+    /**
+     * check whether the input change is legal
+     */
+
+
+    this._checkInputChangeValid = value => {
+      // e.target.value legitimacy judgment needs to be based on this.state.input Value
+      const {
+        maxLength,
+        onInputExceed,
+        separator
+      } = this._adapter.getProps();
+
+      const {
+        inputValue
+      } = this._adapter.getStates();
+
+      let allowChange = true;
+
+      if ((0, _isNumber2.default)(maxLength)) {
+        const valueArr = (0, _getSplitedArray.default)(value, separator);
+        const inputArr = (0, _getSplitedArray.default)(inputValue, separator);
+        const maxLen = Math.max(valueArr.length, inputArr.length);
+
+        for (let i = 0; i < maxLen; i++) {
+          // When the input length is increasing
+          // eslint-disable-next-line max-len
+          if (!(0, _isUndefined2.default)(valueArr[i]) && ((0, _isUndefined2.default)(inputArr[i]) || valueArr[i].length > inputArr[i].length)) {
+            // When the input length exceeds maxLength
+            // eslint-disable-next-line max-depth
+            if (valueArr[i].length > maxLength) {
+              allowChange = false;
+              (0, _isFunction2.default)(onInputExceed) && onInputExceed(value);
+              break;
+            }
+          }
+        }
+      }
+
+      return allowChange;
+    };
+    /**
+     * Input event handler when onKeyDown is triggered
+     */
+
+
+    this.handleKeyDown = e => {
+      const {
+        inputValue,
+        tagsArray
+      } = this._adapter.getStates();
+
+      const code = e.keyCode;
+
+      if (code === _keyCode.default.ENTER) {
+        e.preventDefault(); // prevent trigger submit when using in form
+
+        if (inputValue !== '') {
+          this._handleAddTags(e);
+        }
+      }
+
+      const {
+        length
+      } = tagsArray;
+
+      if (code === _keyCode.default.BACKSPACE && inputValue === '' && length > 0) {
+        const newTagList = tagsArray.slice(0, length - 1);
+        const removedTag = tagsArray[length - 1];
+
+        this._onRemove(newTagList, removedTag, length - 1);
+      }
+
+      this._adapter.notifyKeyDown(e);
+    };
+  }
+
+  _handleAddTags(e) {
+    const {
+      separator,
+      max,
+      onExceed,
+      allowDuplicates
+    } = this._adapter.getProps();
+
+    const {
+      inputValue,
+      tagsArray
+    } = this._adapter.getStates();
+
+    let addTags = (0, _getSplitedArray.default)(inputValue, separator);
+    addTags = addTags.filter((item, idx) => {
+      // If allowDuplicates is false, then filter duplicates
+      if (!allowDuplicates) {
+        if (tagsArray.includes(item) || addTags.indexOf(item) !== idx) {
+          return false;
+        }
+      } // Filter empty strings and pure space strings in new items
+
+
+      return (0, _isString2.default)(item) && item.trim() !== '';
+    });
+    let newTagList = tagsArray.concat(addTags);
+
+    if ((0, _isNumber2.default)(max) && newTagList.length > max) {
+      (0, _isFunction2.default)(onExceed) && onExceed(newTagList);
+      newTagList = newTagList.slice(0, max);
+      addTags = addTags.slice(0, max - tagsArray.length);
+    }
+
+    if (addTags.length > 0) {
+      this._onAdd(newTagList, addTags);
+    }
+
+    this._onInputChange('', e);
+  }
+
+  handleInputBlur(e) {
+    const {
+      addOnBlur
+    } = this._adapter.getProps();
+
+    if (addOnBlur === true) {
+      this._handleAddTags(e);
+    }
+
+    this._adapter.setFocusing(false);
+
+    this._adapter.notifyBlur(e);
+  }
+
+  handleInputFocus(e) {
+    this._adapter.setFocusing(true);
+
+    this._adapter.notifyFocus(e);
+  }
+  /**
+   * A11y: simulate clear button click
+   */
+
+  /* istanbul ignore next */
+
+
+  handleClearEnterPress(e) {
+    if ((0, _isEnterPress.default)(e)) {
+      this.handleClearBtn(e);
+    }
+  }
+
+  handleClearBtn(e) {
+    const {
+      inputValue,
+      tagsArray
+    } = this._adapter.getStates();
+
+    if (tagsArray.length > 0) {
+      this._adapter.setTagsArray([]);
+
+      this._adapter.notifyTagChange([]);
+    }
+
+    if (inputValue.length > 0) {
+      this._onInputChange('', e);
+    } // Prevent event propagate to TagInput outermost div
+
+
+    e.stopPropagation();
+  }
+
+  handleTagClose(index) {
+    const {
+      tagsArray
+    } = this._adapter.getStates();
+
+    const newTagList = [...tagsArray];
+    newTagList.splice(index, 1);
+    const removedTag = tagsArray[index];
+
+    this._onRemove(newTagList, removedTag, index);
+  }
+
+  handleInputMouseEnter() {
+    this._adapter.setHovering(true);
+  }
+
+  handleInputMouseLeave() {
+    this._adapter.setHovering(false);
+  }
+
+  handleClick(e) {
+    const {
+      disabled
+    } = this.getProps();
+
+    if (disabled) {
+      return;
+    }
+
+    const clickOutsideHandler = this._adapter.getClickOutsideHandler();
+
+    if (!clickOutsideHandler) {
+      this._adapter.setActive(true);
+
+      this._adapter.registerClickOutsideHandler(e => this.clickOutsideCallBack());
+    }
+  }
+
+  clickOutsideCallBack() {
+    this._adapter.unregisterClickOutsideHandler();
+
+    this._adapter.setActive(false);
+  }
+
+  handleClickPrefixOrSuffix(e) {
+    const {
+      disabled
+    } = this._adapter.getProps();
+
+    const {
+      isFocus
+    } = this._adapter.getStates();
+
+    if (!disabled && !isFocus) {
+      this._adapter.toggleFocusing(true);
+    }
+  }
+
+  handlePreventMouseDown(e) {
+    if (e && (0, _isFunction2.default)(e.preventDefault)) {
+      e.preventDefault();
+    }
+  }
+  /**
+   * handler of delete tag
+   */
+
+
+  _onRemove(newTagList, removedTags, index) {
+    if (!this._isControlledComponent()) {
+      this._adapter.setTagsArray(newTagList);
+    }
+
+    this._adapter.notifyTagChange(newTagList);
+
+    this._adapter.notifyTagRemove(removedTags, index);
+  }
+  /**
+   * handler of add tag
+   */
+
+
+  _onAdd(newTagList, addTags) {
+    if (!this._isControlledComponent()) {
+      this._adapter.setTagsArray(newTagList);
+    }
+
+    this._adapter.notifyTagChange(newTagList);
+
+    this._adapter.notifyTagAdd(addTags);
+  }
+  /**
+   * handler of input change
+   */
+
+
+  _onInputChange(value, e) {
+    this._adapter.setInputValue(value);
+
+    this._adapter.notifyInputChange(value, e);
+  }
+
+  handleSortEnd(callbackProps) {
+    const {
+      oldIndex,
+      newIndex
+    } = callbackProps;
+    const {
+      tagsArray
+    } = this.getStates();
+    const newTagsArray = (0, _arrayMove.default)(tagsArray, oldIndex, newIndex);
+
+    if (!this._isControlledComponent()) {
+      this._adapter.setTagsArray(newTagsArray);
+    }
+
+    this._adapter.notifyTagChange(newTagsArray);
+  }
+
+}
+
+var _default = TagInputFoundation;
+exports.default = _default;

package/lib/cjs/tagInput/utils/getSplitedArray.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Get the splited array.
+ * We expect separators to be string | string[] | null, but users
+ * are also allowed to pass in other types.
+ */
+declare const getSplitedArray: (originString: string, separators: string | string[] | null) => string[];
+export default getSplitedArray;

package/lib/cjs/tagInput/utils/getSplitedArray.js

@@ -0,0 +1,44 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _isNumber2 = _interopRequireDefault(require("lodash/isNumber"));
+
+var _isArray2 = _interopRequireDefault(require("lodash/isArray"));
+
+var _isString2 = _interopRequireDefault(require("lodash/isString"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/**
+ * Get the splited array.
+ * We expect separators to be string | string[] | null, but users
+ * are also allowed to pass in other types.
+ */
+const getSplitedArray = (originString, separators) => {
+  let splitedValue = [];
+
+  if ((0, _isString2.default)(separators) || (0, _isNumber2.default)(separators)) {
+    splitedValue = originString.split(separators);
+  } else if ((0, _isArray2.default)(separators)) {
+    const tempChar = separators[0]; // temporary splitter
+
+    splitedValue = originString;
+
+    for (let i = 1; i < separators.length; i++) {
+      splitedValue = splitedValue.split(separators[i]).join(tempChar);
+    }
+
+    splitedValue = splitedValue.split(tempChar);
+  } else {
+    splitedValue.push(originString);
+  }
+
+  return splitedValue;
+};
+
+var _default = getSplitedArray;
+exports.default = _default;

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

@@ -0,0 +1,31 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export declare const formatOption: (option: number, disabledOptions: number[]) => {
+    value: string;
+    disabled: boolean;
+};
+declare class ComboboxFoundation extends BaseFoundation<DefaultAdapter> {
+    constructor(adapter: DefaultAdapter);
+    isAM(): any;
+    initData(): {
+        showHour: boolean;
+        showMinute: boolean;
+        showSecond: boolean;
+        hourOptions: any[];
+        minuteOptions: any[];
+        secondOptions: any[];
+    };
+    getPosition(): any;
+    getDefaultFormatIfNeed(): any;
+    disabledHours(): number[];
+    getValidFormat(format?: string): string;
+    /**
+     * from 13-bit timestamp  -> get display date
+     * by combobox use
+     */
+    getDisplayDateFromTimeStamp(timeStamp: Date | string): any;
+    /**
+     * create a date at 00:00:00
+     */
+    createDateDefault(): Date;
+}
+export default ComboboxFoundation;

package/lib/cjs/timePicker/ComboxFoundation.js

@@ -0,0 +1,174 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.formatOption = exports.default = void 0;
+
+var _constants = require("./constants");
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _index = require("../datePicker/_utils/index");
+
+var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefined"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+const HOUR = 1000 * 60 * 60;
+const DAY = 24 * HOUR; // TODO: move to utils
+
+const formatOption = (option, disabledOptions) => {
+  let value = `${option}`;
+
+  if (option < 10) {
+    value = `0${option}`;
+  }
+
+  let disabled = false;
+
+  if (disabledOptions && disabledOptions.indexOf(option) >= 0) {
+    disabled = true;
+  }
+
+  return {
+    value,
+    disabled
+  };
+};
+
+exports.formatOption = formatOption;
+
+function generateOptions(length, disabledOptions, hideDisabledOptions) {
+  let step = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 1;
+  const arr = [];
+
+  for (let value = 0; value < length; value += step) {
+    if (!disabledOptions || disabledOptions.indexOf(value) < 0 || !hideDisabledOptions) {
+      arr.push(value);
+    }
+  }
+
+  return arr;
+}
+
+class ComboboxFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  }
+
+  isAM() {
+    return this.getProp('isAM');
+  }
+
+  initData() {
+    const {
+      timeStampValue,
+      hourStep,
+      disabledMinutes,
+      disabledSeconds,
+      hideDisabledOptions,
+      minuteStep,
+      secondStep
+    } = this.getProps();
+    const format = this.getValidFormat();
+    const dateTime = this.getDisplayDateFromTimeStamp(timeStampValue);
+    const disabledHourOptions = this.disabledHours();
+    const disabledMinuteOptions = disabledMinutes(dateTime ? dateTime.getHours() : null);
+    const disabledSecondOptions = disabledSeconds(dateTime ? dateTime.getHours() : null, dateTime ? dateTime.getMinutes() : null);
+    const hourOptions = generateOptions(24, disabledHourOptions, hideDisabledOptions, hourStep);
+    const minuteOptions = generateOptions(60, disabledMinuteOptions, hideDisabledOptions, minuteStep);
+    const secondOptions = generateOptions(60, disabledSecondOptions, hideDisabledOptions, secondStep);
+    return {
+      showHour: Boolean(format.match(/HH|hh|H|h/g)),
+      showMinute: Boolean(format.match(/mm/g)),
+      showSecond: Boolean(format.match(/ss/g)),
+      hourOptions,
+      minuteOptions,
+      secondOptions
+    };
+  }
+
+  getPosition() {
+    const position = this.getProp('position');
+
+    const type = this.getProp('type') || _constants.strings.DEFAULT_TYPE;
+
+    return position || _constants.strings.DEFAULT_POSITION[type];
+  }
+
+  getDefaultFormatIfNeed() {
+    if (this._isInProps('format')) {
+      return this.getProp('format');
+    } else if (this.getProp('use12Hours')) {
+      return _constants.strings.DEFAULT_FORMAT_A;
+    } else {
+      return _constants.strings.DEFAULT_FORMAT;
+    }
+  }
+
+  disabledHours() {
+    const {
+      use12Hours,
+      disabledHours
+    } = this.getProps();
+    let disabledOptions = disabledHours && disabledHours();
+
+    if (use12Hours && Array.isArray(disabledOptions)) {
+      if (this.isAM()) {
+        disabledOptions = disabledOptions.filter(h => h < 12).map(h => h === 0 ? 12 : h);
+      } else {
+        disabledOptions = disabledOptions.map(h => h === 12 ? 12 : h - 12);
+      }
+    }
+
+    return disabledOptions;
+  }
+
+  getValidFormat(format) {
+    let _format = (0, _isNullOrUndefined.default)(format) ? this.getProp('format') : format;
+
+    _format = this.getDefaultFormatIfNeed();
+    _format = typeof _format === 'string' ? _format : _constants.strings.DEFAULT_FORMAT; // if (use12Hours) {
+    //     format = format.replace(/H/g, 'h');
+    //     if (!/(\s+)a/i.test(format)) {
+    //         format += ' a';
+    //     } else {
+    //         format = format.replace(/(\s+)A/i, '$1a');
+    //     }
+    // }
+
+    return _format;
+  }
+  /**
+   * from 13-bit timestamp  -> get display date
+   * by combobox use
+   */
+
+
+  getDisplayDateFromTimeStamp(timeStamp) {
+    let date;
+
+    if (timeStamp) {
+      date = new Date(timeStamp);
+    }
+
+    if (!timeStamp || !(0, _index.isValidDate)(date)) {
+      return this.createDateDefault();
+    }
+
+    return date;
+  }
+  /**
+   * create a date at 00:00:00
+   */
+
+
+  createDateDefault() {
+    return new Date(parseInt(String(Date.now() / DAY), 10) * DAY - 8 * HOUR);
+  }
+
+}
+
+var _default = ComboboxFoundation;
+exports.default = _default;

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

@@ -0,0 +1,23 @@
+declare const cssClasses: {
+    PREFIX: string;
+    RANGE_PICKER: string;
+    RANGE_PANEL_LISTS: string;
+};
+declare const strings: {
+    TYPES: ("time" | "timeRange")[];
+    TYPE_TIME_PICKER: "time";
+    TYPE_TIME_RANGE_PICKER: "timeRange";
+    DEFAULT_TYPE: "time";
+    DEFAULT_RANGE_SEPARATOR: " ~ ";
+    DEFAULT_MULTIPLE_SEPARATOR: ",";
+    SIZE: readonly ["small", "large", "default"];
+    DEFAULT_FORMAT: string;
+    DEFAULT_FORMAT_A: string;
+    STATUS: readonly ["default", "error", "warning", "success"];
+    DEFAULT_POSITION: {
+        time: string;
+        timeRange: string;
+    };
+};
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/cjs/timePicker/constants.js

@@ -0,0 +1,40 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.strings = exports.numbers = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+var _constants2 = require("../input/constants");
+
+const TYPE_TIME_PICKER = 'time';
+const TYPE_TIME_RANGE_PICKER = 'timeRange';
+const DEFAULT_RANGE_SEPARATOR = ' ~ ';
+const DEFAULT_MULTIPLE_SEPARATOR = ',';
+const cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-timepicker`,
+  RANGE_PICKER: `${_constants.BASE_CLASS_PREFIX}-timepicker-range-panel`,
+  RANGE_PANEL_LISTS: `${_constants.BASE_CLASS_PREFIX}-timepicker-lists`
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  TYPES: [TYPE_TIME_PICKER, TYPE_TIME_RANGE_PICKER],
+  TYPE_TIME_PICKER,
+  TYPE_TIME_RANGE_PICKER,
+  DEFAULT_TYPE: TYPE_TIME_PICKER,
+  DEFAULT_RANGE_SEPARATOR,
+  DEFAULT_MULTIPLE_SEPARATOR,
+  SIZE: _constants2.strings.SIZE,
+  DEFAULT_FORMAT: 'HH:mm:ss',
+  DEFAULT_FORMAT_A: 'a h:mm:ss',
+  STATUS: _constants.VALIDATE_STATUS,
+  DEFAULT_POSITION: {
+    [TYPE_TIME_PICKER]: 'bottomLeft',
+    [TYPE_TIME_RANGE_PICKER]: 'bottomLeft'
+  }
+};
+exports.strings = strings;
+const numbers = {};
+exports.numbers = numbers;