@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

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

@@ -4,15 +4,10 @@ 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
@@ -20,25 +15,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  */
 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/tagInput/variables.scss

@@ -27,6 +27,7 @@ $color-tagInput_danger-bg-hover: var(--semi-color-danger-light-hover); // 危险
 $color-tagInput_danger-border-hover: var(--semi-color-danger-light-hover); // 危险标签输入框描边颜色 - 悬浮
 $color-tagInput_danger-bg-focus: var(--semi-color-danger-light-default); // 危险标签输入框背景颜色 - 选中
 $color-tagInput_danger-border-focus: var(--semi-color-danger); // 危险标签输入框描边颜色 - 选中
+$color-tagInput_sortable_item_over-bg: var(--semi-color-primary); // 拖拽经过的元素前竖线背景色
 
 $color-tagInput_handler-icon-default: var(--semi-color-text-2); // 可拖拽的标签拖拽按钮颜色
 
@@ -48,6 +49,7 @@ $width-tagInput-clear-medium: $width-icon-medium * 2; // 标签输入框清空
 $width-tagInput-border-default: $border-thickness-control; // 标签输入框描边描边宽度 - 默认
 $width-tagInput-border-hover: $width-tagInput-border-default; // 标签输入框描边描边宽度 - 悬浮
 $width-tagInput-border-focus: $border-thickness-control-focus; // 标签输入框描边宽度 - 选中态
+$width-tagInput_sortable_item_over: 2px; // 拖拽经过的元素前竖线宽度
 
 $radius-tagInput: var(--semi-border-radius-small); // 标签输入框圆角
 

package/lib/cjs/timePicker/ComboxFoundation.js

@@ -4,63 +4,46 @@ 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 DAY = 24 * HOUR;
+// TODO: move to utils
 const formatOption = (option, disabledOptions) => {
-  let value = "".concat(option);
-
+  let value = `${option}`;
   if (option < 10) {
-    value = "0".concat(option);
+    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,
@@ -88,15 +71,11 @@ class ComboboxFoundation extends _foundation.default {
       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');
@@ -106,14 +85,12 @@ class ComboboxFoundation extends _foundation.default {
       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);
@@ -121,15 +98,13 @@ class ComboboxFoundation extends _foundation.default {
         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 = typeof _format === 'string' ? _format : _constants.strings.DEFAULT_FORMAT;
+    // if (use12Hours) {
     //     format = format.replace(/H/g, 'h');
     //     if (!/(\s+)a/i.test(format)) {
     //         format += ' a';
@@ -137,38 +112,28 @@ class ComboboxFoundation extends _foundation.default {
     //         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.js

@@ -4,19 +4,16 @@ 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: "".concat(_constants.BASE_CLASS_PREFIX, "-timepicker"),
-  RANGE_PICKER: "".concat(_constants.BASE_CLASS_PREFIX, "-timepicker-range-panel"),
-  RANGE_PANEL_LISTS: "".concat(_constants.BASE_CLASS_PREFIX, "-timepicker-lists")
+  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 = {

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

@@ -1,5 +1,5 @@
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
-export declare type Position = 'top' | 'topLeft' | 'topRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'leftTopOver' | 'rightTopOver';
+export type Position = 'top' | 'topLeft' | 'topRight' | 'left' | 'leftTop' | 'leftBottom' | 'right' | 'rightTop' | 'rightBottom' | 'bottom' | 'bottomLeft' | 'bottomRight' | 'leftTopOver' | 'rightTopOver';
 export interface TimePickerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     togglePanel: (show: boolean) => void;
     registerClickOutSide: () => void;
@@ -21,7 +21,7 @@ declare class TimePickerFoundation<P = Record<string, any>, S = Record<string, a
         minutes: number;
         seconds: number;
     }): boolean;
-    isValidTimeZone(timeZone?: string | number): boolean;
+    isValidTimeZone(timeZone: string | number): boolean;
     getDefaultFormatIfNeed(): string;
     /**
      * User input value => save timestamp

package/lib/cjs/timePicker/foundation.js

@@ -4,50 +4,35 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
+var _isUndefined2 = _interopRequireDefault(require("lodash/isUndefined"));
 var _split2 = _interopRequireDefault(require("lodash/split"));
-
 var _constants = require("./constants");
-
 var _foundation = _interopRequireDefault(require("../base/foundation"));
-
 var _utils = require("./utils");
-
 var _dateFns = require("date-fns");
-
 var _dateFnsExtra = require("../utils/date-fns-extra");
-
 var _isNullOrUndefined = _interopRequireDefault(require("../utils/isNullOrUndefined"));
-
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-/* eslint-disable max-len */
 // TODO: split, timePicker different components cannot share a foundation
 class TimePickerFoundation extends _foundation.default {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   init() {
     this.initDataFromDefaultValue();
     const open = this._isControlledComponent('open') ? this.getProp('open') : this.getProp('defaultOpen');
-
     if (open && !this._isControlledComponent('open')) {
       this._adapter.registerClickOutSide();
     }
   }
-
   getPosition() {
     const position = this.getProp('position');
-
-    const type = this.getProp('type') || _constants.strings.DEFAULT_TYPE; // rtl change default position
-
-
+    const type = this.getProp('type') || _constants.strings.DEFAULT_TYPE;
+    // rtl change default position
     const direction = this.getContext('direction');
     const rtlDirection = direction === 'rtl' ? 'bottomRight' : '';
     return position || rtlDirection || _constants.strings.DEFAULT_POSITION[type];
   }
-
   isDisabledHMS(_ref) {
     let {
       hours,
@@ -64,13 +49,9 @@ class TimePickerFoundation extends _foundation.default {
     const sDis = !(0, _isNullOrUndefined.default)(hours) && !(0, _isNullOrUndefined.default)(minutes) && !(0, _isNullOrUndefined.default)(seconds) && (0, _utils.secondIsDisabled)(disabledSeconds, hours, minutes, seconds);
     return hDis || mDis || sDis;
   }
-
   isValidTimeZone(timeZone) {
-    const _timeZone = timeZone === undefined ? this.getProp('timeZone') : timeZone;
-
-    return ['string', 'number'].includes(typeof _timeZone) && _timeZone !== '';
+    return ['string', 'number'].includes(typeof timeZone) && timeZone !== '';
   }
-
   getDefaultFormatIfNeed() {
     if (this._isInProps('format')) {
       return this.getProp('format');
@@ -83,8 +64,6 @@ class TimePickerFoundation extends _foundation.default {
   /**
    * User input value => save timestamp
    */
-
-
   initDataFromDefaultValue() {
     const defaultValue = this.getProp('defaultValue');
     let value = this.getProp('value');
@@ -95,41 +74,33 @@ class TimePickerFoundation extends _foundation.default {
       dateFnsLocale
     } = this.getProps();
     value = value || defaultValue;
-
     if (!Array.isArray(value)) {
       value = value ? [value] : [];
     }
-
     const parsedValues = [];
     let invalid = false;
     value.forEach(v => {
       const pv = (0, _utils.parseToDate)(v, formatToken, dateFnsLocale);
-
       if (!isNaN(pv.getTime())) {
-        parsedValues.push(this.isValidTimeZone() ? (0, _dateFnsExtra.utcToZonedTime)(pv, timeZone) : pv);
+        parsedValues.push(this.isValidTimeZone(timeZone) ? (0, _dateFnsExtra.utcToZonedTime)(pv, timeZone) : pv);
       }
     });
     const isAM = [true, false];
     parsedValues.map((item, idx) => {
       isAM[idx] = (0, _dateFns.getHours)(item) < 12;
     });
-
     if (parsedValues.length === value.length) {
       value = parsedValues;
     } else {
       value = [];
-
       if (value.length) {
         invalid = true;
       }
     }
-
     let inputValue = '';
-
     if (!invalid) {
       inputValue = value.map(v => (0, _utils.formatToString)(v, formatToken, dateFnsLocale)).join(rangeSeparator);
     }
-
     this.setState({
       isAM,
       value,
@@ -137,21 +108,16 @@ class TimePickerFoundation extends _foundation.default {
       invalid
     });
   }
-
   getValidFormat(validFormat) {
     let _format = validFormat;
-
     if ((0, _isNullOrUndefined.default)(_format)) {
       _format = this.getDefaultFormatIfNeed();
     }
-
     if (typeof _format !== 'string') {
       _format = _constants.strings.DEFAULT_FORMAT;
     }
-
     return _format;
   }
-
   handlePanelChange(result) {
     let index = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : 0;
     // console.log(result, index);
@@ -161,20 +127,17 @@ class TimePickerFoundation extends _foundation.default {
     let isAM = this.getState('isAM');
     const value = (0, _utils.transformToArray)(oldValue);
     isAM = (0, _utils.transformToArray)(isAM);
-
     if (result) {
       const panelIsAM = Boolean(result.isAM);
       const date = (0, _utils.parseToDate)(result.timeStampValue, formatToken, dateFnsLocale);
       value[index] = date;
       isAM[index] = panelIsAM;
       const inputValue = this.formatValue(value);
-
       if (this.getState('isAM')[index] !== result.isAM) {
         this.setState({
           isAM
         });
       }
-
       if (!this._isControlledComponent('value')) {
         const invalid = this.validateDates(value);
         this.setState({
@@ -184,13 +147,11 @@ class TimePickerFoundation extends _foundation.default {
           invalid
         });
       }
-
       if (this._hasChanged(value, oldValue)) {
         this._notifyChange(value, inputValue);
       }
     }
   }
-
   refreshProps() {
     let props = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
     const {
@@ -199,73 +160,60 @@ class TimePickerFoundation extends _foundation.default {
       __prevTimeZone
     } = props;
     let dates = this.parseValue(value);
-    const invalid = this.validateDates(dates);
-
+    let invalid = dates.some(d => isNaN(Number(d)));
     if (!invalid) {
       if (this.isValidTimeZone(timeZone)) {
         dates = dates.map(date => (0, _dateFnsExtra.utcToZonedTime)(this.isValidTimeZone(__prevTimeZone) ? (0, _dateFnsExtra.zonedTimeToUtc)(date, __prevTimeZone) : date, timeZone));
       }
-
-      const inputValue = this.formatValue(dates);
-      this.setState({
-        value: dates,
-        invalid,
-        inputValue
-      });
+      invalid = dates.some(d => this.isDisabledHMS({
+        hours: d.getHours(),
+        minutes: d.getMinutes(),
+        seconds: d.getSeconds()
+      }));
     }
+    const inputValue = this.formatValue(dates);
+    this.setState({
+      value: dates,
+      invalid,
+      inputValue
+    });
   }
-
   handleFocus(e) {
     if (!this.getState('open')) {
       this.handlePanelOpen();
     }
-
     this._adapter.notifyFocus(e);
   }
-
   setPanel(open) {
     this._adapter.togglePanel(open);
   }
-
   destroy() {
     this._adapter.unregisterClickOutSide();
   }
-
   handlePanelOpen() {
     if (!this._isControlledComponent('open')) {
       this._adapter.registerClickOutSide();
-
       this.setPanel(true);
     }
-
     this._adapter.notifyOpenChange(true);
   }
-
   handlePanelClose(clickedOutside, e) {
     if (!this._isControlledComponent('open')) {
       this._adapter.unregisterClickOutSide();
-
       this.setPanel(false);
     }
-
     this._adapter.notifyOpenChange(false);
-
     this._adapter.notifyBlur(e);
   }
   /* istanbul ignore next */
-
-
   handleVisibleChange(visible) {
     if (!this._isControlledComponent('open')) {
       this._adapter.togglePanel(visible);
     }
-
     this._adapter.notifyOpenChange(visible);
   }
-
   handleInputChange(input) {
     this._adapter.setInputValue(input);
-
     const rangeSeparator = this.getProp('rangeSeparator');
     const inputValues = (0, _split2.default)(input, rangeSeparator);
     const formatToken = this.getValidFormat();
@@ -278,11 +226,9 @@ class TimePickerFoundation extends _foundation.default {
      *  special case
      *  -when emptying, the input is "', at this time you need to skip isTimeFormatLike judgment
      */
-
     if (input !== '' && inputValues.some(time => !(0, _utils.isTimeFormatLike)(time, formatToken))) {
       return;
     }
-
     const dates = this.parseInput(input);
     const invalid = this.validateDates(dates);
     const states = {
@@ -290,43 +236,34 @@ class TimePickerFoundation extends _foundation.default {
     };
     const oldValue = this.getState('value');
     let value = (0, _utils.transformToArray)(oldValue);
-
     if (!invalid) {
       states.value = dates;
       value = [...dates];
     }
-
     if (!this._isControlledComponent('value')) {
       this.setState(states);
     }
-
     if (this._hasChanged(value, oldValue)) {
       this._notifyChange(value, input);
     }
   }
   /* istanbul ignore next */
-
-
   doValidate(args) {
     if (typeof args === 'string') {
       return this.validateStr(args);
     } else if (Array.isArray(args)) {
       return this.validateDates(args);
     }
-
     return undefined;
   }
-
   validateStr() {
     let inputValue = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
     const dates = this.parseInput(inputValue);
     return this.validateDates(dates);
   }
-
   validateDates() {
     let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let invalid = dates.some(d => isNaN(Number(d)));
-
     if (!invalid) {
       invalid = dates.some(d => this.isDisabledHMS({
         hours: d.getHours(),
@@ -334,15 +271,12 @@ class TimePickerFoundation extends _foundation.default {
         seconds: d.getSeconds()
       }));
     }
-
     return invalid;
   }
-
   handleInputBlur(e) {
     const invalid = this.getState('invalid');
     const inputValue = this.getState('inputValue');
     const value = this.getState('value');
-
     if (inputValue) {
       if (invalid) {
         this.setState({
@@ -362,68 +296,62 @@ class TimePickerFoundation extends _foundation.default {
       });
     }
   }
-
   formatValue(dates) {
     const validFormat = this.getValidFormat();
     const rangeSeparator = this.getProp('rangeSeparator');
     const dateFnsLocale = this.getProp('dateFnsLocale');
     let _dates = dates;
-
     if (_dates && !Array.isArray(_dates)) {
       _dates = _dates[_dates];
     }
-
     if (_dates && Array.isArray(_dates)) {
-      return _dates.map(date => (0, _utils.formatToString)(date, validFormat, dateFnsLocale)).join(rangeSeparator);
+      const result = _dates.map(date => {
+        let str;
+        if ((0, _isUndefined2.default)(date)) {
+          str = '';
+        } else {
+          str = (0, _utils.formatToString)(date, validFormat, dateFnsLocale);
+        }
+        return str;
+      });
+      return result.join(rangeSeparator);
     }
-
     return undefined;
   }
-
   parseInput(str) {
     const validFormat = this.getValidFormat();
     const rangeSeparator = this.getProp('rangeSeparator');
     const dateFnsLocale = this.getProp('dateFnsLocale');
-
     if (str && typeof str === 'string') {
       return (0, _split2.default)(str, rangeSeparator).map(v => (0, _utils.parseToDate)(v, validFormat, dateFnsLocale));
     }
-
     return [];
   }
-
   parseValue() {
     let value = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     const formatToken = this.getValidFormat();
     const dateFnsLocale = this.getProp('dateFnsLocale');
     let _value = value;
-
     if (!Array.isArray(_value)) {
       _value = _value ? [_value] : [];
     }
-
     if (Array.isArray(_value)) {
       return _value.map(v => (0, _utils.parseToDate)(v, formatToken, dateFnsLocale));
     }
-
     return [];
   }
-
   _notifyChange(value, inputValue) {
     let str = inputValue;
     let _value = value;
     const timeZone = this.getProp('timeZone');
-
     if (this._adapter.isRangePicker()) {
       const rangeSeparator = this.getProp('rangeSeparator');
       str = (0, _split2.default)(inputValue, rangeSeparator);
     } else {
       _value = Array.isArray(_value) ? _value[0] : _value;
     }
-
-    if (this.isValidTimeZone() && _value) {
+    if (this.isValidTimeZone(timeZone) && _value) {
       const formatToken = this.getValidFormat();
-
       if (Array.isArray(_value)) {
         _value = _value.map(v => (0, _dateFnsExtra.zonedTimeToUtc)(v, timeZone));
         str = _value.map(v => (0, _dateFns.format)(v, formatToken));
@@ -432,16 +360,13 @@ class TimePickerFoundation extends _foundation.default {
         str = (0, _dateFns.format)(_value, formatToken);
       }
     }
-
     const onChangeWithDateFirst = this.getProp('onChangeWithDateFirst');
-
     if (onChangeWithDateFirst) {
       this._adapter.notifyChange(_value, str);
     } else {
       this._adapter.notifyChange(str, _value);
     }
   }
-
   _hasChanged() {
     let dates = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : [];
     let oldDates = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : [];
@@ -449,16 +374,12 @@ class TimePickerFoundation extends _foundation.default {
     const dateFnsLocale = this.getProp('dateFnsLocale');
     return dates.length !== oldDates.length || dates.some((date, index) => {
       const oldDate = oldDates[index];
-
       if ((0, _dateFns.isValid)(date) && (0, _dateFns.isValid)(oldDate) && (0, _utils.formatToString)(date, formatToken, dateFnsLocale) === (0, _utils.formatToString)(oldDate, formatToken, dateFnsLocale)) {
         return false;
       }
-
       return true;
     });
   }
-
 }
-
 var _default = TimePickerFoundation;
 exports.default = _default;