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

package/lib/es/datePicker/yearAndMonthFoundation.d.ts

@@ -0,0 +1,65 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { PresetPosition } from './foundation';
+export interface YearAndMonthFoundationProps {
+    currentYear?: number;
+    currentMonth?: number;
+    onSelect?: (obj: {
+        currentMonth: number;
+        currentYear: number;
+    }) => void;
+    onBackToMain?: () => void;
+    locale?: any;
+    localeCode?: string;
+    monthCycled?: boolean;
+    yearCycled?: boolean;
+    noBackBtn?: boolean;
+    disabledDate?: (date: Date) => boolean;
+    density?: string;
+    presetPosition?: PresetPosition;
+    renderQuickControls?: any;
+    renderDateInput?: any;
+    yearAndMonthOpts?: any;
+}
+export interface YearAndMonthFoundationState {
+    years: Array<{
+        value: number;
+        year: number;
+    }>;
+    months: Array<{
+        value: number;
+        month: number;
+    }>;
+    currentYear: number;
+    currentMonth: number;
+}
+export interface YearAndMonthAdapter extends DefaultAdapter<YearAndMonthFoundationProps, YearAndMonthFoundationState> {
+    setCurrentYear: (currentYear: number, cb?: () => void) => void;
+    setCurrentMonth: (currentMonth: number) => void;
+    notifySelectYear: (year: number) => void;
+    notifySelectMonth: (month: number) => void;
+    notifyBackToMain: () => void;
+}
+export interface MonthScrollItem {
+    [k: string]: any;
+    month: number;
+    value: string;
+    disabled: boolean;
+}
+export interface YearScrollItem {
+    [k: string]: any;
+    year: number;
+    value: number;
+    disabled: boolean;
+}
+export default class YearAndMonthFoundation extends BaseFoundation<YearAndMonthAdapter> {
+    constructor(adapter: YearAndMonthAdapter);
+    init(): void;
+    destroy(): void;
+    selectYear(item: YearScrollItem): void;
+    selectMonth(item: MonthScrollItem): void;
+    /**
+     * After selecting a year, if the currentMonth is disabled, automatically select a non-disabled month
+     */
+    autoSelectMonth(item: YearScrollItem): void;
+    backToMain(): void;
+}

package/lib/es/datePicker/yearAndMonthFoundation.js

@@ -0,0 +1,89 @@
+import { setMonth, setYear } from 'date-fns';
+import BaseFoundation from '../base/foundation';
+export default class YearAndMonthFoundation extends BaseFoundation {
+  constructor(adapter) {
+    super(Object.assign({}, adapter));
+  } // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  init() {} // eslint-disable-next-line @typescript-eslint/no-empty-function
+
+
+  destroy() {}
+
+  selectYear(item) {
+    const year = item.value;
+
+    this._adapter.setCurrentYear(year, () => this.autoSelectMonth(item));
+
+    this._adapter.notifySelectYear(year);
+  }
+
+  selectMonth(item) {
+    const {
+      month
+    } = item;
+
+    this._adapter.setCurrentMonth(month);
+
+    this._adapter.notifySelectMonth(month);
+  }
+  /**
+   * After selecting a year, if the currentMonth is disabled, automatically select a non-disabled month
+   */
+
+
+  autoSelectMonth(item) {
+    const {
+      disabledDate,
+      locale
+    } = this._adapter.getProps();
+
+    const {
+      months,
+      currentMonth
+    } = this._adapter.getStates();
+
+    const currentDate = setYear(Date.now(), item.year);
+    const isCurrentMonthDisabled = disabledDate(setMonth(currentDate, currentMonth - 1));
+
+    if (isCurrentMonthDisabled) {
+      const currentIndex = months.findIndex(_ref => {
+        let {
+          month
+        } = _ref;
+        return month === currentMonth;
+      });
+      let validMonth; // First look in the back, if you can't find it in the back, then look in the front
+
+      validMonth = months.slice(currentIndex).find(_ref2 => {
+        let {
+          month
+        } = _ref2;
+        return !disabledDate(setMonth(currentDate, month - 1));
+      });
+
+      if (!validMonth) {
+        validMonth = months.slice(0, currentIndex).find(_ref3 => {
+          let {
+            month
+          } = _ref3;
+          return !disabledDate(setMonth(currentDate, month - 1));
+        });
+      }
+
+      if (validMonth) {
+        this.selectMonth({
+          month: validMonth.month,
+          value: locale.fullMonths[validMonth.month],
+          disabled: false
+        });
+      }
+    }
+  }
+
+  backToMain() {
+    this._adapter.notifyBackToMain();
+  }
+
+}

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

@@ -0,0 +1,9 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    ALIGN_SET: string[];
+    SIZE_SET: string[];
+};
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/es/descriptions/constants.js

@@ -0,0 +1,10 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-descriptions`
+};
+const strings = {
+  ALIGN_SET: ['left', 'justify', 'plain', 'center'],
+  SIZE_SET: ['small', 'medium', 'large']
+};
+const numbers = {};
+export { cssClasses, strings, numbers };

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

@@ -0,0 +1,7 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi";
+};
+declare const strings: {
+    readonly LAYOUT: readonly ["vertical", "horizontal"];
+};
+export { cssClasses, strings };

package/lib/es/divider/constants.js

@@ -0,0 +1,8 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}`
+};
+const strings = {
+  LAYOUT: ['vertical', 'horizontal']
+};
+export { cssClasses, strings };

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

@@ -0,0 +1,16 @@
+declare const cssClasses: {
+    PREFIX: string;
+    SELECTED: string;
+    DISABLED: string;
+};
+declare const strings: {
+    POSITION_SET: readonly ["top", "topLeft", "topRight", "left", "leftTop", "leftBottom", "right", "rightTop", "rightBottom", "bottom", "bottomLeft", "bottomRight", "leftTopOver", "rightTopOver", "leftBottomOver", "rightBottomOver"];
+    TRIGGER_SET: string[];
+    DEFAULT_LEAVE_DELAY: number;
+    ITEM_TYPE: string[];
+};
+declare const numbers: {
+    SPACING: number;
+    NESTED_SPACING: number;
+};
+export { cssClasses, strings, numbers };

package/lib/es/dropdown/constants.js

@@ -0,0 +1,18 @@
+import { strings as tooltipStrings } from '../tooltip/constants';
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-dropdown`,
+  SELECTED: `${BASE_CLASS_PREFIX}-dropdown-item-selected`,
+  DISABLED: `${BASE_CLASS_PREFIX}-dropdown-item-disabled`
+};
+const strings = {
+  POSITION_SET: tooltipStrings.POSITION_SET,
+  TRIGGER_SET: ['hover', 'focus', 'click', 'custom'],
+  DEFAULT_LEAVE_DELAY: 100,
+  ITEM_TYPE: ['primary', 'secondary', 'tertiary', 'warning', 'danger']
+};
+const numbers = {
+  SPACING: 4,
+  NESTED_SPACING: 2
+};
+export { cssClasses, strings, numbers };

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

@@ -0,0 +1,13 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface DropdownAdapter extends Partial<DefaultAdapter> {
+    setPopVisible(visible: boolean): void;
+    notifyVisibleChange(visible: boolean): void;
+    getPopupId(): string;
+}
+export default class DropdownFoundation extends BaseFoundation<DropdownAdapter> {
+    handleVisibleChange(visible: boolean): void;
+    getMenuItemNodes(id: string): HTMLElement[];
+    setFocusToFirstMenuItem(id: string): void;
+    setFocusToLastMenuItem(id: string): void;
+    handleKeyDown(event: any): void;
+}

package/lib/es/dropdown/foundation.js

@@ -0,0 +1,64 @@
+import BaseFoundation from '../base/foundation';
+import { handlePrevent, setFocusToFirstItem, setFocusToLastItem } from '../utils/a11y';
+export default class DropdownFoundation extends BaseFoundation {
+  handleVisibleChange(visible) {
+    this._adapter.setPopVisible(visible);
+
+    this._adapter.notifyVisibleChange(visible);
+
+    const {
+      trigger
+    } = this.getProps();
+
+    if (visible && trigger === "click") {
+      const popupId = this._adapter.getPopupId();
+
+      this.setFocusToFirstMenuItem(popupId);
+    }
+  }
+
+  getMenuItemNodes(id) {
+    const menuWrapper = document.getElementById(id); // if has dropdown item, the item must wrapped by li
+
+    return menuWrapper ? Array.from(menuWrapper.getElementsByTagName('li')).filter(item => item.ariaDisabled === "false") : null;
+  }
+
+  setFocusToFirstMenuItem(id) {
+    const menuItemNodes = this.getMenuItemNodes(id);
+    menuItemNodes && setFocusToFirstItem(menuItemNodes);
+  }
+
+  setFocusToLastMenuItem(id) {
+    const menuItemNodes = this.getMenuItemNodes(id);
+    menuItemNodes && setFocusToLastItem(menuItemNodes);
+  }
+
+  handleKeyDown(event) {
+    var _a, _b;
+
+    const id = (_b = (_a = event.target) === null || _a === void 0 ? void 0 : _a.attributes['data-popupid']) === null || _b === void 0 ? void 0 : _b.value;
+
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.target.click(); // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
+        // handlePrevent(event);
+
+        break;
+
+      case 'ArrowDown':
+        this.setFocusToFirstMenuItem(id);
+        handlePrevent(event);
+        break;
+
+      case 'ArrowUp':
+        this.setFocusToLastMenuItem(id);
+        handlePrevent(event);
+        break;
+
+      default:
+        break;
+    }
+  }
+
+}

package/lib/es/dropdown/menuFoundation.d.ts

@@ -0,0 +1,8 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export default class DropdownMenuFoundation extends BaseFoundation<Partial<DefaultAdapter>> {
+    menuItemNodes: HTMLElement[];
+    firstChars: string[];
+    handleEscape(menu: Element): void;
+    setFocusByFirstCharacter(curItem: any, char: string): void;
+    onMenuKeydown(event: any): void;
+}

package/lib/es/dropdown/menuFoundation.js

@@ -0,0 +1,78 @@
+import BaseFoundation from '../base/foundation';
+import { handlePrevent, isPrintableCharacter, findIndexByCharacter, getAncestorNodeByRole, getMenuButton, setFocusToItem, setFocusToNextMenuitem, setFocusToPreviousMenuItem } from '../utils/a11y';
+export default class DropdownMenuFoundation extends BaseFoundation {
+  constructor() {
+    super(...arguments);
+    this.menuItemNodes = null;
+    this.firstChars = [];
+  }
+
+  handleEscape(menu) {
+    const trigger = this._adapter.getContext('trigger');
+
+    if (trigger === 'custom') {
+      const menuButton = menu && getMenuButton(document.querySelectorAll(`[data-popupid]`), menu.id);
+      menuButton.focus();
+    }
+  }
+
+  setFocusByFirstCharacter(curItem, char) {
+    const index = findIndexByCharacter(this.menuItemNodes, curItem, this.firstChars, char);
+
+    if (index >= 0) {
+      setFocusToItem(this.menuItemNodes, this.menuItemNodes[index]);
+    }
+  }
+
+  onMenuKeydown(event) {
+    const menu = getAncestorNodeByRole(event.target, 'tooltip');
+
+    if (!this.menuItemNodes) {
+      this.menuItemNodes = [...event.target.parentNode.getElementsByTagName('li')].filter(item => item.ariaDisabled !== "true");
+    }
+
+    if (this.firstChars.length === 0) {
+      this.menuItemNodes.forEach(item => {
+        var _a; // the menuItemNodes can be an component and not exit textContent
+
+
+        this.firstChars.push((_a = item.textContent.trim()[0]) === null || _a === void 0 ? void 0 : _a.toLowerCase());
+      });
+    } // get the currently focused menu item
+
+
+    const curItem = this.menuItemNodes.find(item => item.tabIndex === 0);
+
+    switch (event.key) {
+      case ' ':
+      case 'Enter':
+        event.target.click(); // user may use input to be the trigger and bind some key event on it, so do not stoppropagation
+        // handlePrevent(event);
+
+        break;
+
+      case 'Escape':
+        this.handleEscape(menu);
+        break;
+
+      case 'ArrowUp':
+        setFocusToPreviousMenuItem(this.menuItemNodes, curItem);
+        handlePrevent(event);
+        break;
+
+      case 'ArrowDown':
+        setFocusToNextMenuitem(this.menuItemNodes, curItem);
+        handlePrevent(event);
+        break;
+
+      default:
+        if (isPrintableCharacter(event.key)) {
+          this.setFocusByFirstCharacter(curItem, event.key); // it can be an input on Dropdown, handlePrevent may affect the input of the component
+          // handlePrevent(event); 
+        }
+
+        break;
+    }
+  }
+
+}

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

@@ -0,0 +1,7 @@
+declare const cssClasses: {
+    readonly PREFIX: "semi-empty";
+};
+declare const strings: {
+    readonly LAYOUT: readonly ["vertical", "horizontal"];
+};
+export { cssClasses, strings };

package/lib/es/empty/constants.js

@@ -0,0 +1,8 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-empty`
+};
+const strings = {
+  LAYOUT: ['vertical', 'horizontal']
+};
+export { cssClasses, strings };

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

@@ -0,0 +1,11 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {
+    LAYOUT: string[];
+    LABEL_POS: string[];
+    LABEL_ALIGN: string[];
+    EXTRA_POS: string[];
+};
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/es/form/constants.js

@@ -0,0 +1,12 @@
+import { BASE_CLASS_PREFIX } from '../base/constants';
+const cssClasses = {
+  PREFIX: `${BASE_CLASS_PREFIX}-form`
+};
+const strings = {
+  LAYOUT: ['horizontal', 'vertical'],
+  LABEL_POS: ['left', 'top', 'inset'],
+  LABEL_ALIGN: ['left', 'right'],
+  EXTRA_POS: ['middle', 'bottom']
+};
+const numbers = {};
+export { cssClasses, strings, numbers };

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

@@ -0,0 +1,100 @@
+import BaseFoundation from '../base/foundation';
+import { Options as scrollIntoViewOptions } from 'scroll-into-view-if-needed';
+import { BaseFormAdapter, FormState, CallOpts, FieldState, FieldStaff, ComponentProps, setValuesConfig, ArrayFieldStaff } from './interface';
+export type { BaseFormAdapter };
+export default class FormFoundation extends BaseFoundation<BaseFormAdapter> {
+    data: FormState;
+    fields: Map<string, FieldStaff>;
+    registered: Record<string, boolean>;
+    registeredArrayField: Map<string, ArrayFieldStaff>;
+    constructor(adapter: BaseFormAdapter);
+    init(): void;
+    getField(field: string): FieldStaff | undefined;
+    register(field: string, fieldState: FieldState, fieldStuff: FieldStaff): void;
+    unRegister(field: string): void;
+    registerArrayField(arrayFieldPath: string, val: any): void;
+    unRegisterArrayField(arrayField: string): void;
+    getArrayField(arrayField: string): ArrayFieldStaff;
+    updateArrayField(arrayField: string, updateValue: any): void;
+    validate(fieldPaths?: Array<string>): Promise<unknown>;
+    _formValidate(): Promise<unknown>;
+    _fieldsValidate(fieldPaths: Array<string>): Promise<unknown>;
+    submit(): void;
+    /**
+     * Case A：
+     *      All fields: a[0]、a[1]、b.type、b.name[2]、b.name[0]
+     *      input => output:
+     *           a  => a[0]、a[1]
+     *           b  => b.type、b.name[0]、b.name[2]
+     *
+     * Case B：
+     *      All fields: activity.a[0]、activity.a[1]、activity.c、activity.d、other
+     *      input => output:
+     *           activity.a => activity.a[0]、activity.a[1]
+     *
+     */
+    _getNestedField(path: string): Map<string, FieldStaff>;
+    _getOperateFieldMap(fieldPaths?: Array<string>): Map<string, FieldStaff>;
+    reset(fieldPaths?: Array<string>): void;
+    _resetArrayField(): void;
+    injectErrorToField(errors: any): void;
+    getValue(field: string | undefined, opts?: CallOpts): any;
+    setValues(values: any, { isOverride }: {
+        isOverride?: boolean;
+    }): void;
+    updateStateValue(field: string, value: any, opts: CallOpts, callback?: () => void): void;
+    getTouched(field?: string): boolean | Record<string, any> | undefined;
+    updateStateTouched(field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void): void;
+    getError(field?: string): any;
+    updateStateError(field: string, error: any, opts: CallOpts, callback?: () => void): void;
+    getFieldSetterApi(): {
+        setValue: (field: string, value: any, opts: CallOpts) => void;
+        setError: (field: string, error: any, opts: CallOpts) => void;
+        setTouched: (field: string, isTouched: boolean, opts: CallOpts) => void;
+    };
+    getModifyFormStateApi(): {
+        register: (field: string, fieldState: FieldState, fieldStuff: FieldStaff) => void;
+        unRegister: (field: string) => void;
+        updateStateValue: (field: string, value: any, opts: CallOpts, callback?: () => void) => void;
+        updateStateError: (field: string, error: any, opts: CallOpts, callback?: () => void) => void;
+        updateStateTouched: (field: string, isTouched: boolean, opts?: CallOpts, callback?: () => void) => void;
+        getValue: (field: string, opts?: CallOpts) => any;
+        getError: (field?: string) => any;
+        getTouched: (field?: string) => boolean | Record<string, any>;
+        getInitValues: () => any;
+        getInitValue: (field?: string) => any;
+        getFormProps: (keys?: string[]) => ComponentProps;
+        getField: (field: string) => FieldStaff;
+        registerArrayField: (arrayFieldPath: string, val: any) => void;
+        unRegisterArrayField: (arrayField: string) => void;
+        getArrayField: (arrayField: string) => ArrayFieldStaff;
+        updateArrayField: (arrayField: string, updateValue: any) => void;
+    };
+    getFormApi(): {
+        reset: (fields?: Array<string>) => void;
+        validate: (fields?: Array<string>) => Promise<unknown>;
+        getValue: (field?: string) => any;
+        getValues: () => any;
+        getFormState: () => FormState<any>;
+        getInitValue: (field: string) => any;
+        getInitValues: () => any;
+        getTouched: (field?: string) => boolean | Record<string, any>;
+        getError: (field?: string) => any;
+        setValues: (values: any, opts?: setValuesConfig) => void;
+        submitForm: () => void;
+        getFieldExist: (field: string) => boolean;
+        scrollToField: (field: string, scrollOpts?: ScrollIntoViewOptions) => void;
+        setValue: (field: string, value: any, opts: CallOpts) => void;
+        setError: (field: string, error: any, opts: CallOpts) => void;
+        setTouched: (field: string, isTouched: boolean, opts: CallOpts) => void;
+    };
+    getFormState(needClone?: boolean): FormState;
+    _isValid(targetFields: Map<string, FieldStaff>): boolean;
+    getInitValues(): any;
+    getInitValue(field?: string): any;
+    getFormProps(keys?: Array<string>): ComponentProps;
+    getFieldExist(field: string): boolean;
+    _autoScroll(timeout?: boolean | number): void;
+    _getErrorFieldAndScroll(scrollOpts?: scrollIntoViewOptions | boolean): void;
+    scrollToField(field: string, scrollOpts?: scrollIntoViewOptions<any>): void;
+}