@douyinfe/semi-foundation 2.1.1 → 2.1.2

package/lib/cjs/skeleton/skeleton.scss

@@ -0,0 +1,115 @@
+@import "./variables.scss";
+$module: #{$prefix}-skeleton;
+
+.#{$module} {
+
+    &-avatar,
+    &-image,
+    &-title,
+    &-button {
+        background: $color-skeleton_default-bg-default;
+        border-radius: $radius-skeleton_item;
+    }
+
+    &-avatar {
+        border-radius: 50%;
+
+        &-extra-extra-small {
+            width: $width-skeleton_avatar_extra_extra_small;
+            height: $width-skeleton_avatar_extra_extra_small;
+        }
+
+        &-extra-small {
+            width: $width-skeleton_avatar_extra_small;
+            height: $width-skeleton_avatar_extra_small;
+        }
+
+        &-medium {
+            width: $width-skeleton_avatar_medium;
+            height: $width-skeleton_avatar_medium;
+        }
+
+        &-small {
+            width: $width-skeleton_avatar_small;
+            height: $width-skeleton_avatar_small;
+        }
+
+        &-large {
+            width: $width-skeleton_avatar_large;
+            height: $width-skeleton_avatar_large;
+        }
+
+        &-extra-large {
+            width: $width-skeleton_avatar_extra_large;
+            height: $width-skeleton_avatar_extra_large;
+        }
+    }
+
+    &-paragraph {
+        margin: $spacing-none;
+        padding: $spacing-none;
+        list-style-type: none;
+
+        li {
+            background: $color-skeleton_default-bg-default;
+            border-radius: $radius-skeleton_li;
+            width: 100%;
+            height: $height-skeleton_li;
+            margin-bottom: $spacing-skeleton_li-marginBottom;
+
+            &:last-child {
+                width: 60%;
+                margin-bottom: $spacing-none;
+            }
+
+            &:first-child {
+                width: 100%;
+            }
+        }
+    }
+
+    &-title {
+        width: 100%;
+        height: $height-skeleton_title;
+    }
+
+    &-button {
+        width: $width-skeleton_button;
+        height: $height-skeleton_button;
+    }
+
+    &-image {
+        width: 100%;
+        height: 100%;
+    }
+
+    &-active {
+        .#{$module}-avatar,
+        .#{$module}-image,
+        .#{$module}-title,
+        .#{$module}-button,
+        .#{$module}-paragraph li {
+            background: linear-gradient(
+                90deg,
+                $color-skeleton_default-bg-default 25%,
+                $color-skeleton_loading-gradient-bg-active 44%,
+                $color-skeleton_default-bg-default 88%
+            );
+            background-size: 400% 100%;
+            animation: skeleton-loading 1.4s ease infinite;
+        }
+    }
+
+    @keyframes skeleton-loading {
+
+        0% {
+            background-position: 100% 50%;
+        }
+
+        100% {
+            background-position: 0 50%;
+        }
+    }
+}
+
+@import "./rtl.scss";

package/lib/cjs/skeleton/variables.scss

@@ -0,0 +1,20 @@
+$color-skeleton_default-bg-default: var(--semi-color-fill-0); // 骨架屏背景色 - 默认
+$color-skeleton_loading-gradient-bg-active: var(--semi-color-fill-1); // 骨架屏背景色 - 动画开启后
+
+$width-skeleton_avatar_extra_extra_small: 20px; // 头像骨架屏尺寸 - 极小
+$width-skeleton_avatar_extra_small: 24px; // 头像骨架屏尺寸 - 超小
+$width-skeleton_avatar_small: 32px; // 头像骨架屏尺寸 - 小
+$width-skeleton_avatar_medium: 48px; // 头像骨架屏尺寸 - 中
+$width-skeleton_avatar_large: 72px; // 头像骨架屏尺寸 - 大
+$width-skeleton_avatar_extra_large: 128px; // 头像骨架屏尺寸 - 超大
+$width-skeleton_button: 115px; // 按钮骨架屏宽度
+
+$height-skeleton_li: 16px; // 段落骨架屏高度
+$height-skeleton_title: $height-control-small; // 标题骨架屏高度
+$height-skeleton_button: $height-control-default; // 按钮骨架屏高度
+
+$spacing-skeleton_li-marginBottom: 10px; // 按钮骨架屏高度
+
+$radius-skeleton_item: 4px; // 骨架屏圆角
+$radius-skeleton_li: 4px; // 骨架屏圆角
+

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,28 @@
+"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, "-slider"),
+  DISABLED: "".concat(_constants.BASE_CLASS_PREFIX, "-slider-disabled"),
+  VERTICAL: "".concat(_constants.BASE_CLASS_PREFIX, "-slider-vertical"),
+  TRACK: "".concat(_constants.BASE_CLASS_PREFIX, "-slider-track"),
+  DOTS: "".concat(_constants.BASE_CLASS_PREFIX, "-slider-dots"),
+  MARKS: "".concat(_constants.BASE_CLASS_PREFIX, "-slider-marks"),
+  HANDLE: "".concat(_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,203 @@
+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;
+}
+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;
+}
+export interface SliderLengths {
+    sliderX: number;
+    sliderY: number;
+    sliderWidth: number;
+    sliderHeight: number;
+}
+export interface ScrollParentVal {
+    scrollTop: number;
+    scrollLeft: number;
+}
+export interface OverallVars {
+    dragging: boolean[];
+    chooseMovePos: 'min' | 'max';
+}
+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: () => {
+        current: HTMLElement;
+    };
+    getMaxHandleEl: () => {
+        current: HTMLElement;
+    };
+    onHandleDown: (e: any) => any;
+    onHandleMove: (mousePos: number, isMin: boolean, stateChangeCallback?: () => void, clickTrack?: boolean) => 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) => boolean | 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;
+    /**
+     *
+     *
+     * @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;
+    handleWrapClick: (e: any) => void;
+    /**
+     * Move the slider to the current click position
+     *
+     * @memberof SliderFoundation
+     */
+    setHandlePos: (position: number, isMin: boolean, clickTrack?: boolean) => void;
+    /**
+     * Determine which slider should be moved currently
+     *
+     * @memberof SliderFoundation
+     */
+    checkWhichHandle: (pagePos: number) => boolean;
+    handleWrapperEnter: () => void;
+    handleWrapperLeave: () => void;
+    private _getHandleCenterPosition;
+}