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

package/lib/cjs/select/optionFoundation.d.ts

@@ -0,0 +1,21 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface BasicOptionProps {
+    [x: string]: any;
+    value?: string | number;
+    label?: string | number | unknown;
+    children?: unknown;
+    disabled?: boolean;
+    showTick?: boolean;
+    className?: string;
+    style?: Record<string, any>;
+}
+export interface OptionDefaultAdapter extends Partial<DefaultAdapter> {
+    notifyClick(option: BasicOptionProps): void;
+}
+export default class OptionFoundation extends BaseFoundation<OptionDefaultAdapter> {
+    constructor(adapter: OptionDefaultAdapter);
+    init(): void;
+    destroy(): void;
+    onOptionClick(option: BasicOptionProps): void;
+    _isDisabled(): any;
+}

package/lib/cjs/select/optionFoundation.js

@@ -0,0 +1,37 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class OptionFoundation extends _foundation.default {
+  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() {}
+
+  onOptionClick(option) {
+    const isDisabled = this._isDisabled();
+
+    if (!isDisabled) {
+      this._adapter.notifyClick(option);
+    }
+  }
+
+  _isDisabled() {
+    return this.getProp('disabled');
+  }
+
+}
+
+exports.default = OptionFoundation;

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

@@ -0,0 +1,15 @@
+declare const cssClasses: {
+    PREFIX: string;
+    DIALOG: string;
+};
+declare const strings: {
+    PLACEMENT: string[];
+    SIZE: string[];
+    WIDTH: {
+        small: number;
+        medium: number;
+        large: number;
+    };
+    HEIGHT: number;
+};
+export { cssClasses, strings };

package/lib/cjs/sideSheet/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-sidesheet`,
+  DIALOG: `${_constants.BASE_CLASS_PREFIX}-modal`
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  PLACEMENT: ['top', 'right', 'bottom', 'left'],
+  SIZE: ['small', 'medium', 'large'],
+  WIDTH: {
+    small: 448,
+    medium: 684,
+    large: 920
+  },
+  HEIGHT: 448
+};
+exports.strings = strings;

package/lib/cjs/sideSheet/sideSheetFoundation.d.ts

@@ -0,0 +1,55 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface SideSheetProps {
+    afterVisibleChange?: (isVisible: boolean) => void;
+    bodyStyle?: Record<string, any>;
+    className?: string;
+    closable?: boolean;
+    closeOnEsc?: boolean;
+    disableScroll?: boolean;
+    footer?: any;
+    getPopupContainer?: () => HTMLElement;
+    headerStyle?: Record<string, any>;
+    height?: number | string;
+    keepDOM?: boolean;
+    mask?: boolean;
+    maskClosable?: boolean;
+    maskStyle?: Record<string, any>;
+    motion?: boolean;
+    onCancel?: (e: any) => void;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    size?: 'small' | 'medium' | 'large';
+    style?: Record<string, any>;
+    title?: any;
+    visible?: boolean;
+    width?: number | string;
+    zIndex?: number;
+    children?: any;
+    'aria-label'?: string;
+}
+export interface SideSheetState {
+    displayNone: boolean;
+}
+export interface SideSheetAdapter extends DefaultAdapter<SideSheetProps, SideSheetState> {
+    disabledBodyScroll: () => void;
+    enabledBodyScroll: () => void;
+    notifyCancel: (e: any) => void;
+    notifyVisibleChange: (visible: boolean) => void;
+    setOnKeyDownListener: () => void;
+    removeKeyDownListener: () => void;
+    toggleDisplayNone: (displayNone: boolean) => void;
+}
+export default class SideSheetFoundation extends BaseFoundation<SideSheetAdapter> {
+    constructor(adapter: SideSheetAdapter);
+    get defaultAdapter(): {
+        handleCancel: (...args: any[]) => void;
+        beforeShow: (...args: any[]) => void;
+        afterHide: (...args: any[]) => void;
+    };
+    destroy(): void;
+    handleCancel(e: any): void;
+    beforeShow(): void;
+    afterHide(): void;
+    handleKeyDown(e: any): void;
+    onVisibleChange(visible: boolean): void;
+    toggleDisplayNone: (displayNone: boolean) => void;
+}

package/lib/cjs/sideSheet/sideSheetFoundation.js

@@ -0,0 +1,73 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _noop2 = _interopRequireDefault(require("lodash/noop"));
+
+var _foundation = _interopRequireDefault(require("../base/foundation"));
+
+var _keyCode = _interopRequireDefault(require("../utils/keyCode"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+class SideSheetFoundation extends _foundation.default {
+  constructor(adapter) {
+    super(Object.assign(Object.assign({}, SideSheetFoundation.defaultAdapter), adapter));
+
+    this.toggleDisplayNone = displayNone => {
+      this._adapter.toggleDisplayNone(displayNone);
+    };
+  }
+
+  get defaultAdapter() {
+    return {
+      handleCancel: _noop2.default,
+      beforeShow: _noop2.default,
+      afterHide: _noop2.default
+    };
+  }
+
+  destroy() {
+    this.afterHide();
+  }
+
+  handleCancel(e) {
+    this._adapter.notifyCancel(e);
+  }
+
+  beforeShow() {
+    const allowDisable = this.getProp('disableScroll');
+    allowDisable && this._adapter.disabledBodyScroll();
+
+    this._adapter.setOnKeyDownListener();
+  }
+
+  afterHide() {
+    const allowDisable = this.getProp('disableScroll');
+    allowDisable && this._adapter.enabledBodyScroll();
+
+    this._adapter.removeKeyDownListener();
+  }
+
+  handleKeyDown(e) {
+    const {
+      closeOnEsc
+    } = this.getProps();
+
+    if (closeOnEsc && e.keyCode === _keyCode.default.ESC) {
+      e.stopPropagation();
+      this.handleCancel(e);
+      return;
+    }
+  }
+
+  onVisibleChange(visible) {
+    this._adapter.notifyVisibleChange(visible);
+  }
+
+}
+
+exports.default = SideSheetFoundation;

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

@@ -0,0 +1,5 @@
+declare const cssClasses: {
+    PREFIX: string;
+};
+declare const strings: {};
+export { cssClasses, strings };

package/lib/cjs/skeleton/constants.js

@@ -0,0 +1,15 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-skeleton`
+};
+exports.cssClasses = cssClasses;
+const strings = {};
+exports.strings = strings;

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

@@ -0,0 +1,15 @@
+declare const cssClasses: {
+    PREFIX: string;
+    DISABLED: string;
+    VERTICAL: string;
+    TRACK: string;
+    DOTS: string;
+    MARKS: string;
+    HANDLE: string;
+};
+declare const strings: {
+    SIZE: string[];
+    POSITION: string[];
+    OPTIONS: string[];
+};
+export { cssClasses, strings };

package/lib/cjs/slider/constants.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.strings = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: `${_constants.BASE_CLASS_PREFIX}-slider`,
+  DISABLED: `${_constants.BASE_CLASS_PREFIX}-slider-disabled`,
+  VERTICAL: `${_constants.BASE_CLASS_PREFIX}-slider-vertical`,
+  TRACK: `${_constants.BASE_CLASS_PREFIX}-slider-track`,
+  DOTS: `${_constants.BASE_CLASS_PREFIX}-slider-dots`,
+  MARKS: `${_constants.BASE_CLASS_PREFIX}-slider-marks`,
+  HANDLE: `${_constants.BASE_CLASS_PREFIX}-slider-handle`
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  SIZE: ['small', 'large', 'default'],
+  POSITION: ['top', 'bottom'],
+  OPTIONS: ['children', 'option']
+};
+exports.strings = strings;

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

@@ -0,0 +1,212 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+export interface Marks {
+    [key: number]: string;
+}
+export declare type tipFormatterBasicType = string | number | boolean | null;
+export interface SliderProps {
+    defaultValue?: number | number[];
+    disabled?: boolean;
+    included?: boolean;
+    marks?: Marks;
+    max?: number;
+    min?: number;
+    range?: boolean;
+    step?: number;
+    tipFormatter?: (value: tipFormatterBasicType | tipFormatterBasicType[]) => any;
+    value?: number | number[];
+    vertical?: boolean;
+    onAfterChange?: (value: SliderProps['value']) => void;
+    onChange?: (value: SliderProps['value']) => void;
+    tooltipVisible?: boolean;
+    style?: Record<string, any>;
+    className?: string;
+    showBoundary?: boolean;
+    railStyle?: Record<string, any>;
+    verticalReverse?: boolean;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+    'aria-valuetext'?: string;
+    getAriaValueText?: (value: number, index?: number) => string;
+}
+export interface SliderState {
+    currentValue: number | number[];
+    min: number;
+    max: number;
+    focusPos: 'min' | 'max' | '';
+    onChange: (value: SliderProps['value']) => void;
+    disabled: SliderProps['disabled'];
+    chooseMovePos: 'min' | 'max' | '';
+    isDrag: boolean;
+    clickValue: 0;
+    showBoundary: boolean;
+    isInRenderTree: boolean;
+    firstDotFocusVisible: boolean;
+    secondDotFocusVisible: boolean;
+}
+export interface SliderLengths {
+    sliderX: number;
+    sliderY: number;
+    sliderWidth: number;
+    sliderHeight: number;
+}
+export interface ScrollParentVal {
+    scrollTop: number;
+    scrollLeft: number;
+}
+export interface OverallVars {
+    dragging: boolean[];
+}
+export interface SliderAdapter extends DefaultAdapter<SliderProps, SliderState> {
+    getSliderLengths: () => SliderLengths;
+    getParentRect: () => DOMRect | void;
+    getScrollParentVal: () => ScrollParentVal;
+    isEventFromHandle: (e: any) => boolean;
+    getOverallVars: () => OverallVars;
+    updateDisabled: (disabled: SliderState['disabled']) => void;
+    transNewPropsToState: <K extends keyof SliderState>(stateObj: Pick<SliderState, K>, callback?: () => void) => void;
+    notifyChange: (callbackValue: number | number[]) => void;
+    setDragging: (value: boolean[]) => void;
+    updateCurrentValue: (value: SliderState['currentValue']) => void;
+    setOverallVars: (key: string, value: any) => void;
+    getMinHandleEl: () => HTMLSpanElement;
+    getMaxHandleEl: () => HTMLSpanElement;
+    onHandleDown: (e: any) => any;
+    onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback?: () => void, clickTrack?: boolean, outPutValue?: number | number[]) => boolean | void;
+    setEventDefault: (e: any) => void;
+    setStateVal: (state: keyof SliderState, value: any) => void;
+    onHandleEnter: (position: SliderState['focusPos']) => void;
+    onHandleLeave: () => void;
+    onHandleUpBefore: (e: any) => void;
+    onHandleUpAfter: () => void;
+    unSubscribeEventListener: () => void;
+    checkAndUpdateIsInRenderTreeState: () => boolean;
+}
+export default class SliderFoundation extends BaseFoundation<SliderAdapter> {
+    private _dragOffset;
+    constructor(adapter: SliderAdapter);
+    init(): void;
+    _checkCurrentValue(): void;
+    /**
+     * Untie event
+     * @memberof SliderFoundation
+     */
+    destroy(): void;
+    /**
+     * Calculate the percentage corresponding to the current value for style calculation
+     * @{}
+     *
+     * @memberof SliderFoundation
+     */
+    getMinAndMaxPercent: (value: number | number[]) => {
+        min: number;
+        max: number;
+    };
+    /**
+     * Check if value is out of range
+     * @memberof SliderFoundation
+     */
+    _checkValidity: (value: number, min?: number, max?: number) => number;
+    /**
+     * When render handle, the display and content of the tooltip are calculated according to the conditions
+     * @visible:  props passed in by the component
+     * @formatter: tooltip content formatting function
+     * @memberof SliderFoundation
+     */
+    computeHandleVisibleVal: (visible: SliderProps['tooltipVisible'], formatter: SliderProps['tipFormatter'], range: SliderProps['range']) => {
+        tipVisible: {
+            min: boolean;
+            max: boolean;
+        };
+        tipChildren: any;
+    };
+    /**
+     * Calculate whether the value passed in is valid
+     *
+     * @memberof SliderFoundation
+     */
+    valueFormatIsCorrect: (value: SliderProps['value']) => boolean;
+    /**
+     * Fix the mouse position to position the parent container relative to the position
+     *
+     * @memberof SliderFoundation
+     */
+    handleMousePos: (pageX: number, pageY: number) => {
+        x: number;
+        y: number;
+    };
+    /**
+     * Provides the nearest scrollable parent node of the current node, which is used to calculate the scrollTop and scrollLeft attributes
+     *
+     * @memberof SliderFoundation
+     */
+    getScrollParent: (element: HTMLElement) => Element;
+    /**
+     * Fixed the event location, beyond the maximum, minimum, left and right, etc. directly modified to the effective location
+     *
+     * @memberof SliderFoundation
+     */
+    checkMeetMinMax: (position: number) => number;
+    /**
+     * Converting location information to value requires processing if step is not 1 (invalid move returns false)
+     *
+     * @memberof SliderFoundation
+     */
+    transPosToValue: (mousePos: number, isMin: boolean) => any;
+    /**
+     * Convert value values into location information
+     *
+     * @memberof SliderFoundation
+     */
+    transValueToPos: (value: SliderProps['value']) => number | number[];
+    /**
+     * Determine whether the mark should be highlighted: valid interval and include = false
+     *
+     * @memberof SliderFoundation
+     */
+    isMarkActive: (mark: number) => false | "unActive" | "active";
+    /**
+     * onchange output conversion, default rounding without decimal, step less than 1 has decimal
+     *
+     * @memberof SliderFoundation
+     */
+    outPutValue: (inputValue: SliderProps['value']) => number | number[];
+    handleDisabledChange: (disabled: SliderState['disabled']) => void;
+    checkAndUpdateIsInRenderTreeState: () => boolean;
+    calculateOutputValue: (position: number, isMin: boolean) => undefined | number | number[];
+    /**
+     *
+     *
+     * @memberof SliderFoundation
+     */
+    handleValueChange: (prevValue: SliderProps['value'], nextValue: SliderProps['value']) => void;
+    onHandleDown: (e: any, handler: any) => boolean;
+    onHandleMove: (e: any) => boolean;
+    onHandleTouchStart: (e: any, handler: 'min' | 'max') => void;
+    onHandleTouchMove: (e: any) => void;
+    onHandleEnter: (pos: SliderState['focusPos']) => void;
+    onHandleLeave: () => void;
+    onHandleUp: (e: any) => boolean;
+    _handleValueDecreaseWithKeyBoard: (step: number, handler: 'min' | 'max') => number | any[];
+    _handleValueIncreaseWithKeyBoard: (step: number, handler: 'min' | 'max') => any;
+    _handleHomeKey: (handler: 'min' | 'max') => any;
+    _handleEndKey: (handler: 'min' | 'max') => any;
+    handleKeyDown: (event: any, handler: 'min' | 'max') => void;
+    onFocus: (e: any, handler: 'min' | 'max') => void;
+    onBlur: (e: any, handler: 'min' | 'max') => void;
+    handleWrapClick: (e: any) => void;
+    /**
+     * Move the slider to the current click position
+     *
+     * @memberof SliderFoundation
+     */
+    setHandlePos: (position: number, isMin: boolean, clickTrack: boolean, outPutValue: number | number[]) => void;
+    /**
+     * Determine which slider should be moved currently
+     *
+     * @memberof SliderFoundation
+     */
+    checkWhichHandle: (pagePos: number) => boolean;
+    handleWrapperEnter: () => void;
+    handleWrapperLeave: () => void;
+    private _getHandleCenterPosition;
+}