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

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

@@ -0,0 +1,148 @@
+import _toNumber from "lodash/toNumber";
+
+/* eslint-disable max-len */
+import { format, parse } from 'date-fns';
+import { strings } from '../constants';
+import isNullOrUndefined from '../../utils/isNullOrUndefined';
+import { zhCN as defaultLocale } from 'date-fns/locale';
+/**
+ *
+ * @param {string|Date|number} input
+ * @param {string} formatToken
+ * @param {object} dateFnsLocale
+ * @returns {Date}
+ */
+
+export const parseToDate = function (input) {
+  let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : strings.DEFAULT_FORMAT;
+  let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultLocale;
+
+  if (input instanceof Date) {
+    return input;
+  } else if (typeof input === 'number' || !isNaN(Number(input))) {
+    return new Date(_toNumber(input));
+  } else if (typeof input === 'string') {
+    let curDate = new Date(); // console.log(input, formatToken);
+
+    curDate = parse(input, formatToken, curDate, {
+      locale: dateFnsLocale
+    }); // console.log(curDate, formatToken);
+
+    return curDate;
+  }
+
+  return new Date();
+};
+/**
+ *
+ * @param {string|Date|number} input
+ * @returns {number}
+ */
+
+export const parseToTimestamp = function (input) {
+  let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : strings.DEFAULT_FORMAT;
+  let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultLocale;
+  return Number(parseToDate(input, formatToken, dateFnsLocale));
+};
+/**
+ *
+ * @param {Date|number} dateOrTimestamp
+ * @param {string} formatToken
+ * @returns {string}
+ */
+
+export const formatToString = function (dateOrTimestamp) {
+  let formatToken = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : strings.DEFAULT_FORMAT;
+  let dateFnsLocale = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : defaultLocale;
+  return format(dateOrTimestamp, formatToken, {
+    locale: dateFnsLocale
+  });
+};
+export const hourIsDisabled = (disabledHours, hour) => {
+  if (typeof disabledHours === 'function') {
+    const disabledOptions = disabledHours();
+
+    if (Array.isArray(disabledOptions) && !isNullOrUndefined(hour) && disabledOptions.some(v => _toNumber(v) === _toNumber(hour))) {
+      return true;
+    }
+  }
+
+  return false;
+};
+export const minuteIsDisabled = (disabledMinutes, hour, minute) => {
+  if (typeof disabledMinutes === 'function') {
+    const disabledOptions = disabledMinutes(hour);
+
+    if (Array.isArray(disabledOptions) && !isNullOrUndefined(hour) && !isNullOrUndefined(minute) && disabledOptions.some(v => _toNumber(v) === _toNumber(minute))) {
+      return true;
+    }
+  }
+
+  return false;
+};
+export const secondIsDisabled = (disabledSeconds, hour, minute, second) => {
+  if (typeof disabledSeconds === 'function') {
+    const disabledOptions = disabledSeconds(hour, minute);
+
+    if (Array.isArray(disabledOptions) && !isNullOrUndefined(hour) && !isNullOrUndefined(minute) && !isNullOrUndefined(second) && disabledOptions.some(v => _toNumber(v) === _toNumber(second))) {
+      return true;
+    }
+  }
+
+  return false;
+};
+export const transformToArray = value => {
+  if (!Array.isArray(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}
+ */
+
+export const isTimeFormatLike = (time, formatToken) => {
+  let isLike = true;
+  const dateFnsSupportFormatCh = 'BDEGHKLMOPQRSTXYabcehimopqstuwxyz'; // dateFns support format character
+
+  const formatSupportChReg = new RegExp(`[${dateFnsSupportFormatCh}]`, 'g');
+  const formatNotSupportChReg = new RegExp(`[^${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(`[${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;
+};

package/lib/es/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/es/timePicker/utils/localeDate.js

@@ -0,0 +1,36 @@
+import { format as dateFnsFormat, parse as dateFnsParse } from 'date-fns';
+/* istanbul ignore next */
+
+const replace = function replace(str, replacements) {
+  let _str = str;
+
+  for (const key of Object.keys(replacements)) {
+    if (typeof replacements[key] === 'string') {
+      _str = _str.replace(key, replacements[key]);
+    }
+  }
+
+  return _str;
+};
+/* istanbul ignore next */
+
+
+export 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 = dateFnsFormat(date, format, options);
+  str = replace(str, locale);
+  return str;
+}
+/* istanbul ignore next */
+
+export 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 dateFnsParse(_dateString, format, defaultDate, options);
+}

package/lib/es/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/es/timeline/constants.js

@@ -0,0 +1,11 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-timeline`,
+  ITEM: `${BASE_CLASS_PREFIX}-timeline-item`
+};
+const strings = {
+  MODE: ['left', 'alternate', 'right', 'center'],
+  ITEM_POS: ['left', 'right'],
+  ITEM_TYPE: ['ongoing', 'success', 'warning', 'error', 'default']
+};
+export { cssClasses, strings };

package/lib/es/toast/constants.d.ts

@@ -0,0 +1,14 @@
+declare const cssClasses: {
+    PREFIX: string;
+    WRAPPER: string;
+    LIST: string;
+};
+declare const strings: {
+    types: string[];
+    themes: string[];
+    directions: string[];
+};
+declare const numbers: {
+    duration: number;
+};
+export { cssClasses, strings, numbers };

package/lib/es/toast/constants.js

@@ -0,0 +1,17 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const PREFIX = `${BASE_CLASS_PREFIX}-toast`;
+const cssClasses = {
+  PREFIX,
+  WRAPPER: `${PREFIX}-wrapper`,
+  LIST: `${PREFIX}-list`
+};
+const strings = {
+  types: ['warning', 'success', 'info', 'error', 'default'],
+  themes: ['normal', 'light'],
+  directions: ['ltr', 'rtl']
+};
+const numbers = {
+  duration: 3 // default close time, unit: s
+
+};
+export { cssClasses, strings, numbers };

package/lib/es/toast/toastFoundation.d.ts

@@ -0,0 +1,47 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export declare type ToastType = 'success' | 'warning' | 'error' | 'info' | 'default';
+export declare type ToastTheme = 'light' | 'normal';
+export declare type Directions = 'ltr' | 'rtl';
+export interface ConfigProps {
+    top?: number | string;
+    bottom?: number | string;
+    left?: number | string;
+    right?: number | string;
+    duration?: number;
+    zIndex?: number;
+    getPopupContainer?: () => HTMLElement | null;
+}
+export interface ToastProps extends ConfigProps {
+    onClose?: () => void;
+    content: any;
+    type?: ToastType;
+    textMaxWidth?: string | number;
+    style?: Record<string, any>;
+    className?: string;
+    showClose?: boolean;
+    icon?: any;
+    theme?: ToastTheme;
+    direction?: Directions;
+    close?: (id: string) => void;
+}
+export interface ToastInstance extends ToastProps {
+    id?: string;
+    motion?: boolean;
+}
+export interface ToastState {
+}
+export interface ToastAdapter extends DefaultAdapter<ToastProps, ToastState> {
+    notifyWrapperToRemove: (id: string) => void;
+    notifyClose: () => void;
+}
+export default class ToastFoundation extends BaseFoundation<ToastAdapter> {
+    _timer: ReturnType<typeof setTimeout>;
+    _id: string | null;
+    constructor(adapter: ToastAdapter);
+    init(): void;
+    destroy(): void;
+    startCloseTimer_(): void;
+    close(e?: any): void;
+    clearCloseTimer_(): void;
+    restartCloseTimer(): void;
+}

package/lib/es/toast/toastFoundation.js

@@ -0,0 +1,52 @@
+import _isNumber from "lodash/isNumber";
+import BaseFoundation from '../base/foundation';
+export default class ToastFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, ToastFoundation.defaultAdapter), adapter));
+    this._timer = null;
+    this._id = null; // cache id
+  }
+
+  init() {
+    this.startCloseTimer_();
+    this._id = this._adapter.getProp('id');
+  }
+
+  destroy() {
+    this.clearCloseTimer_();
+  }
+
+  startCloseTimer_() {
+    // unit: s
+    const duration = this._adapter.getProp('duration');
+
+    if (duration && _isNumber(duration)) {
+      this._timer = setTimeout(() => {
+        this.close(); // call parent to remove itself
+      }, duration * 1000);
+    }
+  }
+
+  close(e) {
+    if (e) {
+      e.stopPropagation();
+    }
+
+    this._adapter.notifyWrapperToRemove(this._id);
+
+    this._adapter.notifyClose();
+  }
+
+  clearCloseTimer_() {
+    if (this._timer) {
+      clearTimeout(this._timer);
+      this._timer = null;
+    }
+  }
+
+  restartCloseTimer() {
+    this.clearCloseTimer_();
+    this.startCloseTimer_();
+  }
+
+}

package/lib/es/toast/toastListFoundation.d.ts

@@ -0,0 +1,20 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { ToastInstance, ToastProps } from '../toast/toastFoundation';
+export interface ToastListProps {
+}
+export interface ToastListState {
+    list: ToastInstance[];
+    removedItems: ToastInstance[];
+    updatedItems: ToastInstance[];
+}
+export interface ToastListAdapter extends DefaultAdapter<ToastListProps, ToastListState> {
+    updateToast: (list: ToastListState['list'], removedItems: ToastListState['removedItems'], updatedItems: ToastListState['updatedItems']) => void;
+}
+export default class ToastListFoundation extends BaseFoundation<ToastListAdapter> {
+    constructor(adapter: ToastListAdapter);
+    hasToast(id: string): boolean;
+    addToast(toastOpts: ToastProps): void;
+    updateToast(id: string, toastOpts: ToastProps): void;
+    removeToast(id: string): void;
+    destroyAll(): void;
+}

package/lib/es/toast/toastListFoundation.js

@@ -0,0 +1,63 @@
+import BaseFoundation from '../base/foundation';
+export default class ToastListFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, ToastListFoundation.defaultAdapter), adapter));
+  }
+
+  hasToast(id) {
+    const toastList = this._adapter.getState('list');
+
+    return toastList.map(_ref => {
+      let {
+        id
+      } = _ref;
+      return id;
+    }).includes(id);
+  }
+
+  addToast(toastOpts) {
+    const toastList = this._adapter.getState('list'); // const id = getUuid('toast');
+    // let toastOpts = { ...opts, id };
+    // console.log(toastOpts);
+
+
+    toastList.push(toastOpts);
+
+    this._adapter.updateToast(toastList, [], []); // return id;
+
+  }
+
+  updateToast(id, toastOpts) {
+    let toastList = this._adapter.getState('list');
+
+    toastList = toastList.map(toast => toast.id === id ? Object.assign(Object.assign({}, toast), toastOpts) : toast);
+    const updatedItems = toastList.filter(toast => toast.id === id);
+
+    this._adapter.updateToast(toastList, [], updatedItems);
+  }
+
+  removeToast(id) {
+    let toastList = this._adapter.getState('list');
+
+    const removedItems = [];
+    toastList = toastList.filter(toastOpts => {
+      if (toastOpts.id === id) {
+        removedItems.push(toastOpts);
+        return false;
+      }
+
+      return true;
+    });
+
+    this._adapter.updateToast(toastList, removedItems, []);
+  }
+
+  destroyAll() {
+    const toastList = this._adapter.getState('list');
+
+    if (toastList.length > 0) {
+      this._adapter.updateToast([], toastList, []);
+    }
+  }
+
+}

package/lib/es/tooltip/constants.d.ts

@@ -0,0 +1,23 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-tooltip";
+};
+declare const strings: {
+    readonly POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver", "leftBottomOver", "rightBottomOver"];
+    readonly TRIGGER_SET: readonly ["hover", "focus", "click", "custom"];
+    readonly STATUS_DISABLED: "disabled";
+    readonly STATUS_LOADING: "loading";
+};
+declare const numbers: {
+    readonly ARROW_BOUNDING: {
+        readonly offsetX: 0;
+        readonly offsetY: 2;
+        readonly width: 24;
+        readonly height: 7;
+    };
+    readonly DEFAULT_Z_INDEX: 1060;
+    readonly MOUSE_ENTER_DELAY: 50;
+    readonly MOUSE_LEAVE_DELAY: 50;
+    readonly SPACING: 8;
+    readonly MARGIN: 0;
+};
+export { cssClasses, strings, numbers };

package/lib/es/tooltip/constants.js

@@ -0,0 +1,24 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-tooltip`
+};
+const strings = {
+  POSITION_SET: ['top', 'topLeft', 'topRight', 'left', 'leftTop', 'leftBottom', 'right', 'rightTop', 'rightBottom', 'bottom', 'bottomLeft', 'bottomRight', 'leftTopOver', 'rightTopOver', 'leftBottomOver', 'rightBottomOver'],
+  TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
+  STATUS_DISABLED: 'disabled',
+  STATUS_LOADING: 'loading'
+};
+const numbers = {
+  ARROW_BOUNDING: {
+    offsetX: 0,
+    offsetY: 2,
+    width: 24,
+    height: 7
+  },
+  DEFAULT_Z_INDEX: 1060,
+  MOUSE_ENTER_DELAY: 50,
+  MOUSE_LEAVE_DELAY: 50,
+  SPACING: 8,
+  MARGIN: 0
+};
+export { cssClasses, strings, numbers };

package/lib/es/tooltip/foundation.d.ts

@@ -0,0 +1,142 @@
+import { DOMRectLikeType } from '../utils/dom';
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { ArrayElement } from '../utils/type';
+import { strings } from './constants';
+export interface TooltipAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    registerPortalEvent(portalEventSet: any): void;
+    registerResizeHandler(onResize: () => void): void;
+    unregisterResizeHandler(onResize?: () => void): void;
+    on(arg0: string, arg1: () => void): void;
+    notifyVisibleChange(isVisible: any): void;
+    getPopupContainerRect(): PopupContainerDOMRect;
+    containerIsBody(): boolean;
+    off(arg0: string): void;
+    canMotion(): boolean;
+    registerScrollHandler(arg: () => Record<string, any>): void;
+    unregisterScrollHandler(): void;
+    insertPortal(...args: any[]): void;
+    removePortal(...args: any[]): void;
+    getEventName(): {
+        mouseEnter: string;
+        mouseLeave: string;
+        mouseOut: string;
+        mouseOver: string;
+        click: string;
+        focus: string;
+        blur: string;
+        keydown: string;
+    };
+    registerTriggerEvent(...args: any[]): void;
+    getTriggerBounding(...args: any[]): DOMRect;
+    getWrapperBounding(...args: any[]): DOMRect;
+    setPosition(...args: any[]): void;
+    togglePortalVisible(...args: any[]): void;
+    registerClickOutsideHandler(...args: any[]): void;
+    unregisterClickOutsideHandler(...args: any[]): void;
+    containerIsRelative(): boolean;
+    containerIsRelativeOrAbsolute(): boolean;
+    getDocumentElementBounding(): DOMRect;
+    updateContainerPosition(): void;
+    updatePlacementAttr(placement: Position): void;
+    getContainerPosition(): string;
+    getFocusableElements(node: any): any[];
+    getActiveElement(): any;
+    getContainer(): any;
+    setInitialFocus(): void;
+    notifyEscKeydown(event: any): void;
+    getTriggerNode(): any;
+    setId(): void;
+}
+export declare type Position = ArrayElement<typeof strings.POSITION_SET>;
+export interface PopupContainerDOMRect extends DOMRectLikeType {
+    scrollLeft?: number;
+    scrollTop?: number;
+}
+export default class Tooltip<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<TooltipAdapter<P, S>, P, S> {
+    _timer: ReturnType<typeof setTimeout>;
+    _mounted: boolean;
+    constructor(adapter: TooltipAdapter<P, S>);
+    init(): void;
+    destroy(): void;
+    _bindEvent(): void;
+    unBindEvent(): void;
+    _bindTriggerEvent(triggerEventSet: Record<string, any>): void;
+    _bindPortalEvent(portalEventSet: Record<string, any>): void;
+    _bindResizeEvent(): void;
+    unBindResizeEvent(): void;
+    removePortal: () => void;
+    _adjustPos(position?: string, isVertical?: boolean, adjustType?: string, concatPos?: any): string;
+    _reversePos(position?: string, isVertical?: boolean): string;
+    _expandPos(position: string, concatPos: string): string;
+    _reducePos(position?: string): string;
+    clearDelayTimer(): void;
+    _generateEvent(types: ArrayElement<typeof strings.TRIGGER_SET>): {
+        triggerEventSet: {
+            [x: string]: (event: any) => void;
+        };
+        portalEventSet: {};
+    };
+    onResize: () => void;
+    _shouldShow(): void;
+    delayShow: () => void;
+    show: () => void;
+    _togglePortalVisible(isVisible: boolean): void;
+    _roundPixel(pixel: number): number;
+    calcTransformOrigin(position: Position, triggerRect: DOMRect, translateX: number, translateY: number): string;
+    calcPosStyle(props: {
+        triggerRect: DOMRect;
+        wrapperRect: DOMRect;
+        containerRect: PopupContainerDOMRect;
+        position?: Position;
+        spacing?: number;
+        isOverFlow?: [boolean, boolean];
+    }): Record<string, string | number>;
+    /**
+     * 耦合的东西比较多，稍微罗列一下：
+     *
+     * - 根据 trigger 和 wrapper 的 boundingClient 计算当前的 left、top、transform-origin
+     * - 根据当前的 position 和 wrapper 的 boundingClient 决定是否需要自动调整位置
+     * - 根据当前的 position、trigger 的 boundingClient 以及 motion.handleStyle 调整当前的 style
+     *
+     * There are many coupling things, a little list:
+     *
+     * - calculate the current left, top, and transfer-origin according to the boundingClient of trigger and wrapper
+     * - decide whether to automatically adjust the position according to the current position and the boundingClient of wrapper
+     * - adjust the current style according to the current position, the boundingClient of trigger and motion.handle Style
+     */
+    calcPosition: (triggerRect?: DOMRect, wrapperRect?: DOMRect, containerRect?: PopupContainerDOMRect, shouldUpdatePos?: boolean) => Record<string, string | number>;
+    isLR(position?: string): boolean;
+    isTB(position?: string): boolean;
+    isReverse(rowSpace: number, reverseSpace: number, size: number): boolean;
+    isOverFlow(rowSpace: number, reverseSpace: number, size: number): boolean;
+    isHalfOverFlow(posSpace: number, negSpace: number, size: number): boolean;
+    isHalfAllEnough(posSpace: number, negSpace: number, size: number): boolean;
+    getReverse(viewOverFlow: boolean, containerOverFlow: boolean, shouldReverseView: boolean, shouldReverseContainer: boolean): boolean;
+    adjustPosIfNeed(position: Position | string, style: Record<string, any>, triggerRect: DOMRect, wrapperRect: DOMRect, containerRect: PopupContainerDOMRect): {
+        position: string;
+        isHeightOverFlow: boolean;
+        isWidthOverFlow: boolean;
+    };
+    delayHide: () => void;
+    hide: () => void;
+    _bindScrollEvent(): void;
+    unBindScrollEvent(): void;
+    _initContainerPosition(): void;
+    handleContainerKeydown: (event: any) => void;
+    _handleTriggerKeydown(event: any): void;
+    /**
+     * focus trigger
+     *
+     * when trigger is 'focus' or 'hover', onFocus is bind to show popup
+     * if we focus trigger, popup will show again
+     *
+     * 如果 trigger 是 focus 或者 hover，则它绑定了 onFocus，这里我们如果重新 focus 的话，popup 会再次打开
+     * 因此 returnFocusOnClose 只支持 click trigger
+     */
+    _focusTrigger(): void;
+    _handleEscKeyDown(event: any): void;
+    _handleContainerTabKeyDown(focusableElements: any[], event: any): void;
+    _handleContainerShiftTabKeyDown(focusableElements: any[], event: any): void;
+    _handleTriggerArrowDownKeydown(focusableElements: any[], event: any): void;
+    _handleTriggerArrowUpKeydown(focusableElements: any[], event: any): void;
+}