@douyinfe/semi-foundation 2.22.0-beta.0 → 2.22.0-beta.2

package/anchor/foundation.ts

@@ -21,7 +21,7 @@ export interface AnchorAdapter<P = Record<string, any>, S = Record<string, any>>
     getContentNode: (selector: string) => HTMLElement;
     notifyChange: (currentLink: string, previousLink: string) => void;
     notifyClick: (e: any, link: string) => void;
-    canSmoothScroll: () => boolean;
+    canSmoothScroll: () => boolean
 }
 
 export default class AnchorFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AnchorAdapter<P, S>, P, S> {

package/anchor/linkFoundation.ts

@@ -3,7 +3,7 @@ import { AnchorAdapter } from './foundation';
 
 export interface LinkAdapter extends DefaultAdapter {
     addLink: AnchorAdapter['addLink'];
-    removeLink: AnchorAdapter['removeLink'];
+    removeLink: AnchorAdapter['removeLink']
 }
 
 export default class LinkFoundation extends BaseFoundation<LinkAdapter> {

package/autoComplete/foundation.ts

@@ -8,18 +8,18 @@ interface KeyboardAdapter<P = Record<string, any>, S = Record<string, any>> exte
     registerKeyDown: (callback: (event: any) => void) => void;
     unregisterKeyDown: (callback: (event: any) => void) => void;
     updateFocusIndex: (focusIndex: number) => void;
-    notifyKeyDown: (e: any) => void;
+    notifyKeyDown: (e: any) => void
 }
 
 export interface DataItem {
     [x: string]: any;
     value?: string | number;
-    label?: any; // reactNode
+    label?: any // reactNode
 }
 
 export interface StateOptionItem extends DataItem {
     show?: boolean;
-    key?: string | number;
+    key?: string | number
 }
 
 export type AutoCompleteData = Array<DataItem | string>;
@@ -39,7 +39,7 @@ export interface AutoCompleteAdapter<P = Record<string, any>, S = Record<string,
     notifyFocus: (event?: any) => void;
     notifyBlur: (event?: any) => void;
     rePositionDropdown: () => void;
-    persistEvent: (event: any) => void;
+    persistEvent: (event: any) => void
 }
 
 class AutoCompleteFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AutoCompleteAdapter<P, S>, P, S> {

package/autoComplete/optionFoundation.ts

@@ -9,10 +9,10 @@ export interface BasicOptionProps {
     disabled?: boolean;
     showTick?: boolean;
     className?: string;
-    style?: Record<string, any>;
+    style?: Record<string, any>
 }
 export interface OptionDefaultAdapter extends Partial<DefaultAdapter> {
-    notifyClick(option: BasicOptionProps): void;
+    notifyClick(option: BasicOptionProps): void
 }
 
 

package/avatar/foundation.ts

@@ -5,7 +5,7 @@ export interface AvatarAdapter<P = Record<string, any>, S = Record<string, any>>
     notifyImgState(isImgExist: boolean): void;
     notifyLeave(event: any): void;
     notifyEnter(event: any): void;
-    setFocusVisible: (focusVisible: boolean) => void;
+    setFocusVisible: (focusVisible: boolean) => void
 }
 
 export default class AvatarFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<AvatarAdapter<P, S>, P, S> {

package/backtop/foundation.ts

@@ -10,7 +10,7 @@ export interface BackTopAdapter extends DefaultAdapter {
     notifyClick: (e: BackTopClickEvent) => void;
     targetIsWindow: (target: any) => boolean;
     isWindowUndefined: () => boolean;
-    targetScrollToTop: (targetNode: any, scrollTop: number) => void;
+    targetScrollToTop: (targetNode: any, scrollTop: number) => void
 }
 
 export default class BackTopFoundation extends BaseFoundation<BackTopAdapter> {

package/banner/foundation.ts

@@ -2,7 +2,7 @@ import BaseFoundation, { DefaultAdapter } from '../base/foundation';
 
 export interface BannerAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     setVisible: () => void;
-    notifyClose: (e: any) => void;
+    notifyClose: (e: any) => void
 }
 
 export default class BannerFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<BannerAdapter<P, S>, P, S> {

package/base/foundation.ts

@@ -21,7 +21,7 @@ export interface DefaultAdapter<P = Record<string, any>, S = Record<string, any>
     getCaches(): any;
     setCache(key: any, value: any): void;
     stopPropagation(e: any): void;
-    persistEvent: (event: any) => void;
+    persistEvent: (event: any) => void
 }
 
 class BaseFoundation<T extends Partial<DefaultAdapter<P, S>>, P = Record<string, any>, S = Record<string, any>> {

package/breadcrumb/foundation.ts

@@ -4,7 +4,7 @@ import isEnterPress from '../utils/isEnterPress';
 import { BreadcrumbItemInfo, Route } from './itemFoundation';
 export interface BreadcrumbAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyClick: (itemInfo: BreadcrumbItemInfo, event: any) => void;
-    expandCollapsed: (clickEvent?: any) => void;
+    expandCollapsed: (clickEvent?: any) => void
 }
 
 export default class BreadcrumbFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<BreadcrumbAdapter<P, S>, P, S> {

package/breadcrumb/itemFoundation.ts

@@ -4,7 +4,7 @@ export interface BreadcrumbItemInfo {
     name?: any; // maybe reactNode, string, number
     href?: string;
     icon?: any;
-    path?: string;
+    path?: string
 }
 
 export interface Route {
@@ -12,12 +12,12 @@ export interface Route {
     path?: string;
     href?: string;
     name?: string;
-    icon?: any;
+    icon?: any
 }
 
 export interface BreadcrumbItemAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
     notifyClick: (item: BreadcrumbItemInfo, e: any) => void;
-    notifyParent: (item: BreadcrumbItemInfo, e: any) => void;
+    notifyParent: (item: BreadcrumbItemInfo, e: any) => void
 }
 
 export default class BreadcrumbItemFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<BreadcrumbItemAdapter<P, S>, P, S> {

package/calendar/eventUtil.ts

@@ -93,7 +93,7 @@ export interface DateObj {
     isToday: boolean;
     isWeekend: boolean;
     isSameMonth: boolean;
-    month: string;
+    month: string
 }
 
 export type weeekStartsOnEnum = 0 | 1 | 2 | 3 | 4 | 5 | 6;

package/calendar/foundation.ts

@@ -43,38 +43,38 @@ export interface EventObject {
     start?: Date;
     end?: Date;
     // children?: React.ReactNode;
-    children?: any;
+    children?: any
 }
 
 export interface ParsedEventsWithArray {
     day: Array<any>;
-    allDay: Array<any>;
+    allDay: Array<any>
 }
 
 export interface ParsedEvents {
     day?: Map<string, Array<EventObject>>;
-    allDay?: Map<string, Array<EventObject>>;
+    allDay?: Map<string, Array<EventObject>>
 }
 
 export interface ParsedRangeEvent extends EventObject {
     leftPos?: number;
     width?: number;
-    topInd?: number;
+    topInd?: number
 }
 
 export interface MonthlyEvent {
     day: ParsedRangeEvent[][];
-    display: ParsedRangeEvent[];
+    display: ParsedRangeEvent[]
 }
 
 export interface RangeData {
     month: string;
-    week: any[];
+    week: any[]
 }
 
 export interface WeeklyData {
     month: string;
-    week: DateObj[];
+    week: DateObj[]
 }
 
 export type MonthData = Record<number, DateObj[]>;
@@ -103,7 +103,7 @@ export interface CalendarAdapter<P = Record<string, any>, S = Record<string, any
     getMonthlyData?: () => MonthData;
     notifyClose?: (e: any, key: string) => void;
     openCard?: (key: string, spacing: boolean) => void;
-    setItemLimit?: (itemLimit: number) => void;
+    setItemLimit?: (itemLimit: number) => void
 }
 
 export default class CalendarFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CalendarAdapter<P, S>, P, S> {

package/card/variables.scss

@@ -16,7 +16,7 @@ $font-card_title-fontSize: $font-size-header-6; // 卡片文字大小 - 标题
 
 $radius-card: var(--semi-border-radius-medium); // 卡片圆角
 
-$motion-card-transition_duration: 0.3s; // 卡片悬浮动画时长
+$motion-card-transition_duration: 300ms; // 卡片悬浮动画时长
 
 $width-card-border: $border-thickness-control; // 卡片描边宽度
 

package/cascader/foundation.ts

@@ -24,11 +24,11 @@ export interface BasicData {
     data: BasicCascaderData;
     disabled: boolean;
     key: string;
-    searchText: any[];
+    searchText: any[]
 }
 
 export interface BasicEntities {
-    [idx: string]: BasicEntity;
+    [idx: string]: BasicEntity
 }
 
 export interface BasicEntity {
@@ -50,7 +50,7 @@ export interface BasicEntity {
     /* key path */
     path: Array<string>;
     /* value path */
-    valuePath: Array<string>;
+    valuePath: Array<string>
 }
 
 export interface BasicCascaderData {
@@ -60,7 +60,7 @@ export interface BasicCascaderData {
     disabled?: boolean;
     isLeaf?: boolean;
     loading?: boolean;
-    children?: BasicCascaderData[];
+    children?: BasicCascaderData[]
 }
 
 export type CascaderType = 'large' | 'small' | 'default';
@@ -92,12 +92,12 @@ export interface BasicTriggerRenderProps {
      * with Cascader. */
     onChange: (inputValue: string) => void;
     /* Function to clear the value */
-    onClear: (e: any) => void;
+    onClear: (e: any) => void
 }
 
 export interface BasicScrollPanelProps {
     panelIndex: number;
-    activeNode: BasicCascaderData;
+    activeNode: BasicCascaderData
 }
 
 export interface BasicCascaderProps {
@@ -114,7 +114,7 @@ export interface BasicCascaderProps {
     dropdownStyle?: any;
     emptyContent?: any;
     filterLeafOnly?: boolean;
-    motion?: Motion;
+    motion?: boolean;
     filterTreeNode?: ((inputValue: string, treeNodeString: string) => boolean) | boolean;
     placeholder?: string;
     searchPlaceholder?: string;
@@ -159,7 +159,7 @@ export interface BasicCascaderProps {
     onExceed?: (checkedItem: BasicEntity[]) => void;
     displayRender?: (selected: Array<string> | BasicEntity, idx?: number) => any;
     onBlur?: (e: any) => void;
-    onFocus?: (e: any) => void;
+    onFocus?: (e: any) => void
 }
 
 export interface BasicCascaderInnerData {
@@ -184,7 +184,7 @@ export interface BasicCascaderInnerData {
     isFocus?: boolean;
     isInput?: boolean;
     disabledKeys?: Set<string>;
-    showInput?: boolean;
+    showInput?: boolean
 }
 
 export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, BasicCascaderInnerData> {
@@ -211,7 +211,7 @@ export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, Basi
     notifyListScroll: (e: any, panel: BasicScrollPanelProps) => void;
     notifyOnExceed: (data: BasicEntity[]) => void;
     toggleInputShow: (show: boolean, cb: () => void) => void;
-    updateFocusState: (focus: boolean) => void,
+    updateFocusState: (focus: boolean) => void
 }
 
 // eslint-disable-next-line max-len
@@ -522,7 +522,7 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         this._adapter.notifyDropdownVisibleChange(false);
         this._adapter.unregisterClickOutsideHandler();
         if (this._isFilterable()) {
-            const { selectedKeys } = this.getStates();
+            const { selectedKeys, isSearching } = this.getStates();
             let inputValue = '';
             if (key && !multiple) {
                 inputValue = this.renderDisplayText(key);
@@ -549,27 +549,10 @@ export default class CascaderFoundation extends BaseFoundation<CascaderAdapter,
         this._adapter.updateFocusState(true);
     }
 
-    getMergedMotion = () => {
-        const { motion } = this.getProps();
-        const { isSearching } = this.getStates();
-        if (isSearching) {
-            const mergedMotion =
-                typeof motion === 'undefined' || motion ?
-                    {
-                        ...motion,
-                        didLeave: (...args: any) => {
-                            const didLeave = get(motion, 'didLeave');
-                            if (typeof didLeave === 'function') {
-                                didLeave(...args);
-                            }
-                            this._adapter.updateStates({ isSearching: false });
-                        },
-                    } :
-                    false;
-            return mergedMotion;
-        }
-        return motion;
-    };
+
+    updateSearching = (isSearching:boolean)=>{
+        this._adapter.updateStates({ isSearching: false });
+    }
 
     handleItemClick(e: any, item: BasicEntity | BasicData) {
         const isDisabled = this._isDisabled();

package/checkbox/checkboxFoundation.ts

@@ -4,13 +4,13 @@ import warning from '../utils/warning';
 
 export interface BasicTargetObject {
     [x: string]: any;
-    checked?: boolean;
+    checked?: boolean
 }
 export interface BasicCheckboxEvent {
     target: BasicTargetObject;
     stopPropagation: () => void;
     preventDefault: () => void;
-    [x: string]: any;
+    [x: string]: any
     // nativeEvent: {
     //     stopImmediatePropagation: () => void;
     // }
@@ -27,7 +27,7 @@ export interface CheckboxAdapter<P = Record<string, any>, S = Record<string, any
     setExtraId: () => void;
     setFocusVisible: (focusVisible: boolean) => void;
     focusCheckboxEntity: () => void;
-    generateEvent: (checked: boolean, e: any) => any; // 1.modify checked value 2.add nativeEvent on react adapter
+    generateEvent: (checked: boolean, e: any) => any // 1.modify checked value 2.add nativeEvent on react adapter
 }
 
 class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> extends BaseFoundation<CheckboxAdapter<P, S>, P, S> {
@@ -148,7 +148,7 @@ export interface BaseCheckboxProps {
     extra?: any;
     addonId?: string;
     extraId?: string;
-    preventScroll?: boolean;
+    preventScroll?: boolean
 }
 
 export default CheckboxFoundation;

package/checkbox/checkboxGroupFoundation.ts

@@ -4,7 +4,7 @@ import { BasicCheckboxEvent } from './checkboxFoundation';
 
 export interface CheckboxGroupAdapter extends DefaultAdapter{
     updateGroupValue: (value: any[]) => void;
-    notifyChange: (value: any[]) => void;
+    notifyChange: (value: any[]) => void
 }
 class CheckboxGroupFoundation extends BaseFoundation<CheckboxGroupAdapter> {
     static get checkboxGroupDefaultAdapter() {

package/collapse/foundation.ts

@@ -13,20 +13,20 @@ export interface CollapseProps{
     style?: any;
     className?: string;
     keepDOM?: boolean;
-    motion?: Motion;
-    expandIconPosition?: 'left' | 'right';
+    motion?: boolean;
+    expandIconPosition?: 'left' | 'right'
 
 }
 
 export interface CollapseState{
-    activeSet: Set<string>;
+    activeSet: Set<string>
 }
 
 export interface CollapseAdapter extends DefaultAdapter<CollapseProps, CollapseState>{
     handleChange: (activeKey: CollapseProps['activeKey'], e: any) => void;
     // getStates: () => CollapseState;
     // getProps: () => CollapseProps;
-    addActiveKey: (newSet: CollapseState['activeSet']) => void;
+    addActiveKey: (newSet: CollapseState['activeSet']) => void
 }
 
 export default class CollapseFoundation extends BaseFoundation<CollapseAdapter> {

package/collapsible/animation.scss

@@ -0,0 +1,10 @@
+$transition_duration-collapsible-height: 250ms;//折叠-高度-动画持续时间
+$transition_function-collapsible-height: cubic-bezier(0.25,0.1,0.25,1);//折叠-高度-过渡曲线
+$transition_delay-collapsible-height: var(--semi-transition_delay-fastest);//折叠-高度-延迟时间
+
+$transition_duration-collapsible-opacity: 250ms;//折叠-透明度-动画持续时间
+$transition_function-collapsible-opacity: var(--semi-transition_function-easeIn);//折叠-透明度-过渡曲线
+$transition_delay-collapsible-opacity: var(--semi-transition_delay-fastest);//折叠-透明度-延迟时间
+
+
+

package/collapsible/collapsible.scss

@@ -0,0 +1,11 @@
+@import "./animation.scss";
+@import "./variables.scss";
+
+
+$module: #{$prefix}-collapsible;
+
+
+.#{$module}-transition{
+    transition: height $transition_duration-collapsible-height $transition_function-collapsible-height $transition_delay-collapsible-height,
+    opacity $transition_duration-collapsible-opacity $transition_function-collapsible-opacity $transition_delay-collapsible-opacity,
+}

package/collapsible/foundation.ts

@@ -0,0 +1,59 @@
+import BaseFoundation, { DefaultAdapter } from "../base/foundation";
+
+export interface CollapsibleFoundationProps {
+    isOpen?: boolean;
+    duration?: number;
+    keepDOM?: boolean;
+    className?: string;
+    collapseHeight?: number;
+    reCalcKey?: number | string;
+    id?: string;
+    fade?: boolean
+}
+
+export interface CollapsibleFoundationState {
+    domInRenderTree: boolean;
+    domHeight: number;
+    visible: boolean;
+    isTransitioning: boolean
+
+}
+
+
+export interface CollapsibleAdapter<P = Record<string, any>, S = Record<string, any>> extends DefaultAdapter<P, S> {
+    setDOMInRenderTree: (isInRenderTree: boolean) => void;
+    setDOMHeight: (domHeight: number) => void;
+    setVisible: (visible: boolean) => void;
+    setIsTransitioning: (isTransitioning: boolean) => void
+}
+
+class CollapsibleFoundation extends BaseFoundation<CollapsibleAdapter<CollapsibleFoundationProps, CollapsibleFoundationState>, CollapsibleFoundationProps, CollapsibleFoundationState> {
+
+    constructor(adapter: CollapsibleAdapter<CollapsibleFoundationProps, CollapsibleFoundationState>) {
+        super({
+            ...adapter
+        });
+    }
+
+
+    updateDOMInRenderTree = (isInRenderTree) => {
+        this._adapter.setDOMInRenderTree(isInRenderTree);
+    }
+
+    updateDOMHeight = (domHeight: number) => {
+        this._adapter.setDOMHeight(domHeight);
+    }
+
+    updateVisible = (visible: boolean) => {
+        this._adapter.setVisible(visible);
+    }
+
+    updateIsTransitioning = (isTransitioning: boolean) => {
+        this._adapter.setIsTransitioning(isTransitioning);
+    }
+
+
+}
+
+
+export default CollapsibleFoundation;

package/datePicker/_utils/getDefaultPickerDate.ts

@@ -50,5 +50,5 @@ type BaseValueType = string | number | Date;
 interface GetDefaultPickerValueDateOptions {
     defaultPickerValue?: BaseValueType | BaseValueType[];
     format: string;
-    dateFnsLocale: dateFnsLocale;
+    dateFnsLocale: dateFnsLocale
 }

package/datePicker/_utils/getInsetInputFormatToken.ts

@@ -16,7 +16,7 @@ import { getDefaultFormatTokenByType } from './getDefaultFormatToken';
  * 'yyyy-MM-dd HH:mm' => 'yyyy-MM-dd HH:mm'
  * 'Pp' => 'yyyy-MM-dd'
  */
-export default function getInsetInputFormatToken(options: { format: string, type: typeof strings.TYPE_SET[number]; }) {
+export default function getInsetInputFormatToken(options: { format: string; type: typeof strings.TYPE_SET[number] }) {
     const { format, type } = options;
     const dateReg = /([yMd]{0,4}[^a-z\s]*[yMd]{0,4}[^a-z\s]*[yMd]{0,4})/i;
     const dateTimeReg = /([yMd]{0,4}[^a-z\s]*[yMd]{0,4}[^a-z\s]*[yMd]{0,4}) (H{0,2}[^a-z\s]*m{0,2}[^a-z\s]*s{0,2})/i;

package/datePicker/_utils/getInsetInputValueFromInsetInputStr.ts

@@ -16,7 +16,7 @@ import { strings } from '../constants';
  * ' ~ 2022-02-15 00:00:00' => { monthLeft: { dateInput: '', timeInput: '' }, monthRight: { dateInput: '2022-02-15', timeInput: '00:00:00' } }
  * ```
  */
-export default function getInsetInputValueFromInsetInputStr(options: { inputValue: string; rangeSeparator: string, type: typeof strings.TYPE_SET[number] }) {
+export default function getInsetInputValueFromInsetInputStr(options: { inputValue: string; rangeSeparator: string; type: typeof strings.TYPE_SET[number] }) {
     const timeSeparator = ' ';
     const { inputValue = '', rangeSeparator, type } = options;
     let leftDateInput, leftTimeInput, rightDateInput, rightTimeInput;

package/datePicker/_utils/parser.ts

@@ -46,7 +46,7 @@ export function isValueParseValid(options: {
     value: string;
     formatToken: string;
     baseDate?: Date;
-    locale?: Locale;
+    locale?: Locale
 }) {
     const { value, locale, formatToken } = options;
     const baseDate = options.baseDate || new Date();

package/datePicker/datePicker.scss

@@ -2,12 +2,26 @@
 @import "./variables.scss";
 
 $module: #{$prefix}-datepicker;
+$module-list: #{$prefix}-scrolllist;
 
 .#{$module} {
     box-sizing: border-box;
     display: inline-block;
     vertical-align: top;
 
+    .#{$module-list}-body {
+        .#{$module-list}-item {
+            -ms-overflow-style: none; /* Internet Explorer 10+ */
+            scrollbar-width: none; /* Firefox */
+
+            &::-webkit-scrollbar {
+                display: none;
+                width: 0;
+                height: 0;
+            }
+        }
+    }
+
     // 双月网格
 
     &-month-grid {