@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/timePicker/timePicker.scss

@@ -0,0 +1,86 @@
+@import "./variables.scss";
+$module: #{$prefix}-timepicker;
+$module-list: #{$prefix}-scrolllist;
+
+.#{$module} {
+    display: inline-block;
+
+    &-panel {
+        .#{$module-list}-body {
+            height: $height-timePicker_panel_body;
+        }
+
+        .#{$module-list}-item,
+        .#{$module-list}-item-wheel {
+            flex: none;
+        }
+        .#{$module-list}-item-wheel,
+        .#{$module-list}-item-wheel:not(:last-child) {
+            border: none;
+        }
+
+        &-list {
+
+            &-ampm {
+                width: $width-timePicker_panel_list_ampm;
+            }
+
+            &-hour {
+                width: $width-timePicker_panel_list_hour;
+            }
+
+            &-minute {
+                width: $width-timePicker_panel_list_minute;
+            }
+
+            &-second {
+                width: $width-timePicker_panel_list_second;
+            }
+        }
+    }
+
+    &-range {
+
+        &-panel {
+            .#{$module}-lists {
+                display: flex;
+                box-shadow: $shadow-timePicker_range_panel;
+                border: $width-timePicker_range_panel-border solid $color-timePicker_range_panel-border;
+                border-radius: $radius-timePicker_range_panel;
+
+                & > .#{$prefix}-scrolllist:not(:last-child) {
+                    .#{$prefix}-scrolllist {
+
+                        &-body {
+                            border-right: $width-timePicker_range_panel_scrolllist_body-border solid $color-timePicker_range_picker_panel_split-border;
+                        }
+                    }
+                }
+
+                & > .#{$prefix}-scrolllist {
+                    box-shadow: none;
+
+                    .#{$prefix}-scrolllist {
+
+                        &-body,
+                        &-header {
+                            padding: $spacing-timePicker_range_panel_scrolllist_header_body-padding;
+                        }
+                    }
+                }
+            }
+        }
+    }
+
+    .#{$module}-input {
+        @include font-size-regular;
+        border-radius: $radius-timePicker_input;
+        align-items: center;
+    }
+
+    .#{$prefix}-input-readonly {
+        cursor: pointer;
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/timePicker/utils/index.d.ts

@@ -0,0 +1,41 @@
+/**
+ *
+ * @param {string|Date|number} input
+ * @param {string} formatToken
+ * @param {object} dateFnsLocale
+ * @returns {Date}
+ */
+export declare const parseToDate: (input: string | Date | number, formatToken?: string, dateFnsLocale?: Locale) => Date;
+/**
+ *
+ * @param {string|Date|number} input
+ * @returns {number}
+ */
+export declare const parseToTimestamp: (input: string | Date | number, formatToken?: string, dateFnsLocale?: Locale) => number;
+/**
+ *
+ * @param {Date|number} dateOrTimestamp
+ * @param {string} formatToken
+ * @returns {string}
+ */
+export declare const formatToString: (dateOrTimestamp: Date | number, formatToken?: string, dateFnsLocale?: Locale) => string;
+export declare const hourIsDisabled: (disabledHours: () => boolean, hour: number) => boolean;
+export declare const minuteIsDisabled: (disabledMinutes: (hour: number) => number[], hour: number, minute: number) => boolean;
+export declare const secondIsDisabled: (disabledSeconds: (hour: number, minute: number) => number[], hour: number, minute: number, second: number) => boolean;
+export declare const transformToArray: (value: any) => any[];
+/**
+ * Determine whether the time length is the same as the format
+ * e.g.
+ *  format      | time      | return
+ *  HH:mm       | 12:00     | true
+ *  HH:mm:ss    | 12:00:00  | true
+ *  yyyy HH:mm  | 2021 12:00| true
+ *  HH          | 1         | false
+ *  HH:mm       | 12:0      | false
+ *  HH          | 1         | false
+ *  HH:mm:ss    | 12:00:0   | false
+ * @param {String} time  e.g. 12:0
+ * @param {String} formatToken e.g. HH:mm
+ * @returns {Boolean}
+ */
+export declare const isTimeFormatLike: (time: string, formatToken: string) => boolean;

package/lib/cjs/timePicker/utils/index.js

@@ -0,0 +1,191 @@
+"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.transformToArray = exports.secondIsDisabled = exports.parseToTimestamp = exports.parseToDate = exports.minuteIsDisabled = exports.isTimeFormatLike = exports.hourIsDisabled = exports.formatToString = void 0;
+
+var _isArray = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/array/is-array"));
+
+var _some = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/instance/some"));
+
+var _toNumber2 = _interopRequireDefault(require("lodash/toNumber"));
+
+var _dateFns = require("date-fns");
+
+var _constants = require("../constants");
+
+var _isNullOrUndefined = _interopRequireDefault(require("../../utils/isNullOrUndefined"));
+
+var _locale = require("date-fns/locale");
+
+/* eslint-disable max-len */
+
+/**
+ *
+ * @param {string|Date|number} input
+ * @param {string} formatToken
+ * @param {object} dateFnsLocale
+ * @returns {Date}
+ */
+const parseToDate = function (input) {
+  let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.strings.DEFAULT_FORMAT;
+  let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _locale.zhCN;
+
+  if (input instanceof Date) {
+    return input;
+  } else if (typeof input === 'number' || !isNaN(Number(input))) {
+    return new Date((0, _toNumber2.default)(input));
+  } else if (typeof input === 'string') {
+    let curDate = new Date(); // console.log(input, formatToken);
+
+    curDate = (0, _dateFns.parse)(input, formatToken, curDate, {
+      locale: dateFnsLocale
+    }); // console.log(curDate, formatToken);
+
+    return curDate;
+  }
+
+  return new Date();
+};
+/**
+ *
+ * @param {string|Date|number} input
+ * @returns {number}
+ */
+
+
+exports.parseToDate = parseToDate;
+
+const parseToTimestamp = function (input) {
+  let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.strings.DEFAULT_FORMAT;
+  let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _locale.zhCN;
+  return Number(parseToDate(input, formatToken, dateFnsLocale));
+};
+/**
+ *
+ * @param {Date|number} dateOrTimestamp
+ * @param {string} formatToken
+ * @returns {string}
+ */
+
+
+exports.parseToTimestamp = parseToTimestamp;
+
+const formatToString = function (dateOrTimestamp) {
+  let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : _constants.strings.DEFAULT_FORMAT;
+  let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : _locale.zhCN;
+  return (0, _dateFns.format)(dateOrTimestamp, formatToken, {
+    locale: dateFnsLocale
+  });
+};
+
+exports.formatToString = formatToString;
+
+const hourIsDisabled = (disabledHours, hour) => {
+  if (typeof disabledHours === 'function') {
+    const disabledOptions = disabledHours();
+
+    if ((0, _isArray.default)(disabledOptions) && !(0, _isNullOrUndefined.default)(hour) && (0, _some.default)(disabledOptions).call(disabledOptions, v => (0, _toNumber2.default)(v) === (0, _toNumber2.default)(hour))) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+exports.hourIsDisabled = hourIsDisabled;
+
+const minuteIsDisabled = (disabledMinutes, hour, minute) => {
+  if (typeof disabledMinutes === 'function') {
+    const disabledOptions = disabledMinutes(hour);
+
+    if ((0, _isArray.default)(disabledOptions) && !(0, _isNullOrUndefined.default)(hour) && !(0, _isNullOrUndefined.default)(minute) && (0, _some.default)(disabledOptions).call(disabledOptions, v => (0, _toNumber2.default)(v) === (0, _toNumber2.default)(minute))) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+exports.minuteIsDisabled = minuteIsDisabled;
+
+const secondIsDisabled = (disabledSeconds, hour, minute, second) => {
+  if (typeof disabledSeconds === 'function') {
+    const disabledOptions = disabledSeconds(hour, minute);
+
+    if ((0, _isArray.default)(disabledOptions) && !(0, _isNullOrUndefined.default)(hour) && !(0, _isNullOrUndefined.default)(minute) && !(0, _isNullOrUndefined.default)(second) && (0, _some.default)(disabledOptions).call(disabledOptions, v => (0, _toNumber2.default)(v) === (0, _toNumber2.default)(second))) {
+      return true;
+    }
+  }
+
+  return false;
+};
+
+exports.secondIsDisabled = secondIsDisabled;
+
+const transformToArray = value => {
+  if (!(0, _isArray.default)(value)) {
+    return [];
+  } else {
+    return [...value];
+  }
+};
+/**
+ * Determine whether the time length is the same as the format
+ * e.g.
+ *  format      | time      | return
+ *  HH:mm       | 12:00     | true
+ *  HH:mm:ss    | 12:00:00  | true
+ *  yyyy HH:mm  | 2021 12:00| true
+ *  HH          | 1         | false
+ *  HH:mm       | 12:0      | false
+ *  HH          | 1         | false
+ *  HH:mm:ss    | 12:00:0   | false
+ * @param {String} time  e.g. 12:0
+ * @param {String} formatToken e.g. HH:mm
+ * @returns {Boolean}
+ */
+
+
+exports.transformToArray = transformToArray;
+
+const isTimeFormatLike = (time, formatToken) => {
+  let isLike = true;
+  const dateFnsSupportFormatCh = 'BDEGHKLMOPQRSTXYabcehimopqstuwxyz'; // dateFns support format character
+
+  const formatSupportChReg = new RegExp("[".concat(dateFnsSupportFormatCh, "]"), 'g');
+  const formatNotSupportChReg = new RegExp("[^".concat(dateFnsSupportFormatCh, "]"), 'g');
+  const hmsReg = /[H|m|s]{1,2}/;
+  const formatSplitted = formatToken.split(formatNotSupportChReg); // => ['HH', 'mm'];
+
+  const timeSeparator = formatToken.replace(formatSupportChReg, ''); // => :
+
+  const timeReg = new RegExp("[".concat(timeSeparator, "]"), 'g'); // => /[:]/g
+
+  const timeSplitted = time.split(timeReg); // => ['12', '0]
+
+  if (formatSplitted.length !== timeSplitted.length) {
+    isLike = false;
+  } else {
+    for (let i = 0, len = timeSplitted.length; i < len; i++) {
+      const formatStr = formatSplitted[i];
+      const timeStr = timeSplitted[i]; // Returns false if the current character corresponds to minutes and seconds and the length is less than format
+      // when i=1 => '0'.length < 'mm'.length
+
+      if (hmsReg.test(formatStr) && timeStr.length < formatStr.length) {
+        isLike = false;
+        break;
+      }
+    }
+  }
+
+  return isLike;
+};
+
+exports.isTimeFormatLike = isTimeFormatLike;

package/lib/cjs/timePicker/utils/localeDate.d.ts

@@ -0,0 +1,2 @@
+export declare function localeFormat(date: any, format: any, locale?: {}, options?: {}): string;
+export declare function localeParse(dateString: any, format: any, locale?: {}, defaultDate?: any, options?: {}): Date;

package/lib/cjs/timePicker/utils/localeDate.js

@@ -0,0 +1,47 @@
+"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.localeFormat = localeFormat;
+exports.localeParse = localeParse;
+
+var _keys = _interopRequireDefault(require("@babel/runtime-corejs3/core-js-stable/object/keys"));
+
+var _dateFns = require("date-fns");
+
+const replace = function replace(str, replacements) {
+  let _str = str;
+
+  for (const key of (0, _keys.default)(replacements)) {
+    if (typeof replacements[key] === 'string') {
+      _str = _str.replace(key, replacements[key]);
+    }
+  }
+
+  return _str;
+};
+
+function localeFormat(date, format) {
+  let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let options = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
+  let str = (0, _dateFns.format)(date, format, options);
+  str = replace(str, locale);
+  return str;
+}
+
+function localeParse(dateString, format) {
+  let locale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : {};
+  let defaultDate = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : null;
+  let options = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : {};
+
+  // const invertedLocale = invert(locale);
+  const _dateString = replace(dateString, locale);
+
+  return (0, _dateFns.parse)(_dateString, format, defaultDate, options);
+}

package/lib/cjs/timePicker/variables.scss

@@ -0,0 +1,22 @@
+// Color
+$color-timePicker_range_picker_panel_split-border: var(--semi-color-border); // 时间选择器菜单分割线颜色
+$color-timePicker_range_panel-border: rgba(0, 0, 0, .1); // 时间选择器描边颜色
+
+// Width/Height
+$width-timePicker_range_panel-border: 1px; // 时间选择器菜单分割线宽度
+$height-timePicker_panel_body: 252px; // 时间选择器菜单高度
+$width-timePicker_panel_list_ampm: 72px; // 时间选择器菜单中列宽度 - 上午下午
+$width-timePicker_panel_list_hour: 64px; // 时间选择器菜单中列宽度 - 小时
+$width-timePicker_panel_list_minute: 64px; // 时间选择器菜单中列宽度 - 分钟
+$width-timePicker_panel_list_second: 64px; // 时间选择器菜单中列宽度 - 秒
+$width-timePicker_range_panel_scrolllist_body-border: 2px; // 时间范围选择器双排菜单中间分割线宽度
+
+// Spacing
+$spacing-timePicker_range_panel_scrolllist_header_body-padding: 0; // 时间范围选择器菜单header与内容内边距
+
+// Radius
+$radius-timePicker_range_panel: var(--semi-border-radius-medium); // 时间范围选择器菜单圆角
+$radius-timePicker_input: var(--semi-border-radius-small); // 时间范围选择器圆角
+
+// Other
+$shadow-timePicker_range_panel: 0 4px 14px rgba(0, 0, 0, .1); // 时间范围选择器菜单阴影

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

@@ -0,0 +1,10 @@
+declare const cssClasses: {
+    PREFIX: string;
+    ITEM: string;
+};
+declare const strings: {
+    MODE: string[];
+    ITEM_POS: string[];
+    ITEM_TYPE: string[];
+};
+export { cssClasses, strings };

package/lib/cjs/timeline/constants.js

@@ -0,0 +1,23 @@
+"use strict";
+
+var _Object$defineProperty = require("@babel/runtime-corejs3/core-js-stable/object/define-property");
+
+_Object$defineProperty(exports, "__esModule", {
+  value: true
+});
+
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-timeline"),
+  ITEM: "".concat(_constants.BASE_CLASS_PREFIX, "-timeline-item")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  MODE: ['left', 'alternate', 'right', 'center'],
+  ITEM_POS: ['left', 'right'],
+  ITEM_TYPE: ['ongoing', 'success', 'warning', 'error', 'default']
+};
+exports.strings = strings;

package/lib/cjs/timeline/rtl.scss

@@ -0,0 +1,92 @@
+$module: #{$prefix}-timeline;
+
+.#{$prefix}-rtl,
+.#{$prefix}-portal-rtl {
+    .#{$module} {
+        direction: rtl;
+
+        &-item {
+
+            &-tail {
+                left: auto;
+                right: $spacing-timeline_tail-left;
+                border-left: 0;
+                border-right: $width-timeline_tail-border solid $color-timeline_tail-border;
+            }
+
+            &-head-custom {
+                left: auto;
+                right: $spacing-timeline_head_custom-left;
+                transform: $motion-timeline_head_custom-transform-rtl;
+            }
+
+            &-content {
+                margin: $spacing-none $spacing-timeline_content-marginLeft $spacing-none $spacing-none;
+            }
+
+            &:last-child {
+                .#{$module}-item-tail {
+                    border-right: none;
+                }
+            }
+        }
+
+        &-alternate,
+        &-right,
+        &-center {
+            .#{$module}-item {
+
+                &-tail,
+                &-head,
+                &-head-custom {
+                    left: auto;
+                    right: $spacing-timeline_item_head_custom-left;
+                }
+
+                &-head {
+                    margin-left: 0;
+                    margin-right: $spacing-timeline_item_head-marginLeft;
+                }
+
+                &-left {
+                    .#{$module}-item-content {
+                        left: auto;
+                        right: $spacing-timeline_item_left_item_content-left;
+                        text-align: right;
+                    }
+                }
+
+                &-right {
+                    .#{$module}-item-content {
+                        text-align: left;
+                    }
+                }
+            }
+        }
+
+        &-center {
+            .#{$module}-item {
+
+                &-content-time {
+                    margin-left: 0;
+                    margin-right: $spacing-timeline_item_content_time-marginLeft;
+                    text-align: left;
+                }
+            }
+        }
+
+        &-right {
+            .#{$module}-item-right {
+                .#{$module}-item {
+
+                    &-tail,
+                    &-head,
+                    &-head-custom {
+                        left: 0;
+                        right: $spacing-timeline_item_right_item-left;
+                    }
+                }
+            }
+        }
+    }
+}