@douyinfe/semi-foundation 2.1.0 → 2.1.4

package/lib/cjs/cascader/cascader.scss

@@ -0,0 +1,436 @@
+@import './variables.scss';
+
+$module: #{$prefix}-cascader;
+
+.#{$module} {
+    box-sizing: border-box;
+    border-radius: $radius-cascader;
+    border: $width-cascader-border solid $color-cascader_default-border-default;
+    min-width: $width-cascader;
+    min-height: $height-cascader_default;
+    height: auto;
+    line-height: $height-cascader_default;
+    font-weight: $font-cascader-fontWeight;
+    background-color: $color-cascader_default-bg-default;
+    display: inline-flex;
+    align-items: center;
+    vertical-align: middle;
+    position: relative;
+    cursor: pointer;
+
+    &:hover {
+        background-color: $color-cascader_default-bg-hover;
+    }
+
+    &-small {
+        min-height: $height-cascader_small;
+        line-height: $height-cascader_small;
+    }
+
+    &-large {
+        min-height: $height-cascader_large;
+        line-height: $height-cascader_large;
+    }
+
+    &-focus {
+        border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
+        outline: 0;
+        &:hover,
+        &:active {
+            background-color: $color-cascader_default-bg-default;
+            border: $width-cascader_focus-border solid $color-cascader_default-border-focus;
+        }
+    }
+
+    &-warning {
+        background-color: $color-cascader_warning-bg-default;
+        border-color: $color-cascader_warning-border-default;
+
+        &:hover {
+            background-color: $color-cascader_warning-bg-hover;
+            border-color: $color-cascader_warning-border-hover;
+        }
+
+        &.#{$module}-focus {
+            background-color: $color-cascader_warning-bg-focus;
+            border-color: $color-cascader_warning-border-focus;
+        }
+
+        &:active {
+            background-color: $color-cascader_warning-bg-active;
+            border-color: $color-cascader_warning-border-active;
+        }
+    }
+
+    &-error {
+        background-color: $color-cascader_danger-bg-default;
+        border-color: $color-cascader_danger-border-default;
+
+        &:hover {
+            background-color: $color-cascader_danger-bg-hover;
+            border-color: $color-cascader_danger-border-hover;
+        }
+
+        &.#{$module}-focus {
+            background-color: $color-cascader_danger-bg-focus;
+            border-color: $color-cascader_danger-border-focus;
+        }
+
+        &:active {
+            background-color: $color-cascader_danger-bg-active;
+            border-color: $color-cascader_danger-border-active;
+        }
+    }
+
+    &-selection {
+        @include font-size-regular;
+        height: 100%;
+        // min-height: $height-cascader_default;
+        display: inline-flex;
+        align-items: center;
+        flex-wrap: wrap;
+        flex-grow: 1;
+        overflow: hidden;
+
+        padding-left: $spacing-cascader_selection-paddingLeft;
+        padding-right: $spacing-cascader_selection-paddingRight;
+        cursor: pointer;
+        color: $color-cascader_selection-text-default;
+
+        &-multiple {
+            padding-left: $spacing-cascader_selection_multiple-paddingLeft;
+            padding-right: $spacing-cascader_selection_multiple-paddingRight;
+        }
+
+        &-placeholder {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            color: $color-cascader_placeholder-text-default;
+        }
+
+        &-tag {
+            margin: $spacing-cascader_selection_tag-marginY $spacing-cascader_selection_tag-marginX;
+
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &-disabled {
+                color: $color-cascader_input_disabled-text-default;
+                cursor: not-allowed;
+                
+                .#{$prefix}-tag-close {
+                    color: $color-cascader_input_disabled-text-default;
+                    cursor: not-allowed;
+                    pointer-events: none;
+                }
+            }
+        }
+
+        &-n {
+            cursor: pointer;
+            font-size: $font-cascader_selection_n-fontSize;
+            margin-right: $spacing-cascader_selection_n-marginRight;
+            color: $color-cascader_selection_n-text-default;
+            padding-left: $spacing-cascader_selection_n-paddingX;
+            padding-right: $spacing-cascader_selection_n-paddingX;
+
+            &-disabled {
+                cursor: not-allowed;
+                color: $color-cascader_selection_n-text-disabled;
+            }
+        }
+
+        span {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .#{$module}-tagInput-wrapper {
+            border: hidden;
+            background: transparent;
+            margin-left: $spacing-cascader_selection_tagInput-marginLeft;
+        }
+
+        .#{$prefix}-tagInput {
+            .#{$prefix}-input-wrapper {
+                height: $height-cascader_selection_tagInput_input_default;
+
+                margin-left: $spacing-cascader_selection_input-marginLeft;
+                .#{$prefix}-input {
+                    padding-left: 0;
+                }
+            }
+
+            .#{$prefix}-input-wrapper-small {
+                height: $height-cascader_selection_tagInput_input_small;
+            }
+            .#{$prefix}-input-wrapper-large {
+                height: $height-cascader_selection_tagInput_input_large;
+            }
+        }
+    }
+
+    &-arrow,
+    &-clearbtn {
+        // position: absolute;
+        // top: 0;
+        // right: 0;
+        display: inline-flex;
+        align-items: center;
+        height: 100%;
+        justify-content: center;
+        width: $width-cascader-icon;
+        color: $color-cascader-icon-default;
+        margin-right: $spacing-cascader_clearBtn-marginRight;
+    }
+
+    &-clearbtn {
+        &:hover {
+            color: $color-cascader-icon-hover;
+        }
+
+        &:active {
+            color: $color-cascader-icon-active;
+        }
+    }
+
+    &-prefix,
+    &-suffix {
+        display: inline;
+        @include all-center;
+
+        &-text {
+            margin: 0 $spacing-cascader_text-marginX;
+        }
+
+        &-icon {
+            color: $color-cascader-icon-default;
+            margin: 0 $spacing-cascader_icon-marginX;
+        }
+    }
+
+    &-inset-label {
+        display: inline;
+        margin-right: $spacing-cascader_label-marginRight;
+        font-weight: 600;
+        @include font-size-regular;
+        color: $color-cascader_label-text-default;
+        flex-shrink: 0;
+        white-space: nowrap;
+    }
+
+    &.#{$module}-with-prefix {
+        display: inline-flex;
+        align-items: center;
+
+        .#{$module}-selection {
+            padding-left: 0;
+        }
+    }
+
+    &.#{$module}-with-suffix {
+        .#{$module}-selection {
+            padding-right: 0;
+        }
+    }
+
+    &-disabled {
+        cursor: not-allowed;
+        user-select: none;
+
+        .#{$module}-selection {
+            cursor: not-allowed;
+        }
+
+        background-color: $color-cascader_input_disabled-bg-default;
+
+        &:hover {
+            background-color: $color-cascader_input_disabled-bg-hover;
+        }
+
+        .#{$module}-selection,
+        .#{$module}-selection-placeholder,
+        .#{$module}-prefix,
+        .#{$module}-suffix {
+            color: $color-cascader_input_disabled-text-default;
+            cursor: not-allowed;
+        }
+
+        .#{$module}-arrow {
+            color: $color-cascader_input_disabled-icon-default;
+        }
+    }
+}
+
+.#{$module}-popover {
+    .#{$module}-search-wrapper {
+        padding: $spacing-cascader_search-paddingY $spacing-cascader_search-paddingX;
+        border-bottom: $width-cascader_search-border solid $color-cascader_search-border-default;
+    }
+
+    .#{$module}-option-empty {
+        @include font-size-regular;
+        min-width: $width-cascader_option;
+        color: $color-cascader_option_empty-text-default;
+        margin: 0;
+        padding: $spacing-cascader_option_empty-paddingY $spacing-cascader_option_empty-paddingX;
+        user-select: none;
+        text-align: center;
+        cursor: not-allowed;
+    }
+}
+
+// 单选且可输入
+.#{$module}-single.#{$module}-filterable {
+    display: inline-flex;
+
+    .#{$module}-selection {
+        .#{$module}-search-wrapper {
+            width: 100%;
+
+            .#{$prefix}-input-wrapper {
+                height: 100%;
+                width: 100%;
+                border: $color-cascader_input-border-default;
+                background-color: $color-cascader_input-bg-default;
+            }
+
+            .#{$prefix}-input-wrapper-focus {
+                border: $color-cascader_input-border-default;
+            }
+
+            .#{$prefix}-input {
+                padding-left: 0;
+                padding-right: 0;
+            }
+        }
+    }
+}
+
+.#{$module}-option-lists {
+    display: flex;
+    overflow: hidden;
+    padding: 0;
+    margin: 0;
+    height: $height-cascader_option_list;
+
+    &-empty {
+        height: auto;
+    }
+
+    ul,
+    li {
+        list-style-type: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    ul > li {
+        padding-top: $spacing-cascader_option-paddingTop;
+        padding-bottom: $spacing-cascader_option-paddingBottom;
+        padding-left: $spacing-cascader_option-paddingLeft;
+        padding-right: $spacing-cascader_option-paddingRight;
+    }
+
+    .#{$module}-option-list {
+        box-sizing: border-box;
+        display: inline-block;
+        min-width: $width-cascader_option;
+        height: 100%;
+        margin: 0;
+        padding: $spacing-cacader_option_list-paddingY $spacing-cacader_option_list-paddingX;
+        overflow: auto;
+        list-style: none;
+        border-left: $width-cascader_option_list-border solid $color-cascader_option_list-border-default;
+
+        &:first-child {
+            border-left: none;
+        }
+    }
+
+    .#{$module}-option {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        cursor: pointer;
+
+        @include font-size-regular;
+        min-width: min-content;
+        word-break: break-all;
+        color: $color-cascader_option_main-text-default;
+        position: relative;
+
+        &:hover {
+            background-color: $color-cascader_option-bg-hover;
+        }
+
+        &:active {
+            background-color: $color-cascader_option-bg-active;
+        }
+
+        &-icon {
+            display: inline-flex;
+            flex-shrink: 0;
+            width: $width-cascader-icon;
+            color: $color-cascader_option-icon-default;
+
+            &-active,
+            &-empty {
+                margin-right: $spacing-cascader_empty_icon-marginRight;
+            }
+        }
+
+        &-label {
+            display: flex;
+            align-items: center;
+            white-space: pre;
+
+            &-checkbox {
+                margin-right: $spacing-cascader_label_checkbox-marginRight;
+            }
+        }
+
+        &-hidden {
+            display: none;
+        }
+
+        &-active {
+            background-color: $color-cascader_option-bg-selected;
+
+            &:hover {
+                background-color: $color-cascader_option-bg-selected;
+            }
+        }
+
+        &-select,
+        &-label-highlight {
+            font-weight: $font-cascader_select-fontWeight;
+            color: $color-cascader_select_highlight;
+        }
+
+        &-disabled {
+            cursor: not-allowed;
+
+            &:hover {
+                background-color: $color-cascader_option_disabled-bg-hover;
+            }
+
+            &:active {
+                background-color: $color-cascader_option_disabled-bg-active;
+            }
+
+            .#{$module}-option-label {
+                color: $color-cascader_option_disabled-text-default;
+            }
+        }
+
+        &-flatten {
+            padding-right: $spacing-cascader_flatten_list-paddingRight;
+        }
+    }
+}
+
+@import './rtl.scss';

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

@@ -0,0 +1,14 @@
+declare const cssClasses: {
+    PREFIX: string;
+    PREFIX_OPTION: string;
+};
+declare const strings: {
+    readonly SIZE_SET: readonly ["small", "large", "default"];
+    readonly VALIDATE_STATUS: readonly ["default", "error", "warning"];
+    readonly IS_KEY: "isKey";
+    readonly IS_VALUE: "isValue";
+    readonly SHOW_NEXT_BY_CLICK: "click";
+    readonly SHOW_NEXT_BY_HOVER: "hover";
+};
+declare const numbers: {};
+export { cssClasses, strings, numbers };

package/lib/cjs/cascader/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.numbers = exports.cssClasses = void 0;
+
+var _constants = require("../base/constants");
+
+const cssClasses = {
+  PREFIX: "".concat(_constants.BASE_CLASS_PREFIX, "-cascader"),
+  PREFIX_OPTION: "".concat(_constants.BASE_CLASS_PREFIX, "-cascader-option")
+};
+exports.cssClasses = cssClasses;
+const strings = {
+  SIZE_SET: ['small', 'large', 'default'],
+  VALIDATE_STATUS: ['default', 'error', 'warning'],
+  IS_KEY: 'isKey',
+  IS_VALUE: 'isValue',
+  SHOW_NEXT_BY_CLICK: 'click',
+  SHOW_NEXT_BY_HOVER: 'hover'
+};
+exports.strings = strings;
+const numbers = {};
+exports.numbers = numbers;

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

@@ -0,0 +1,221 @@
+import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import { Motion } from '../utils/type';
+export interface BasicData {
+    data: BasicCascaderData;
+    disabled: boolean;
+    key: string;
+    searchText: any[];
+}
+export interface BasicEntities {
+    [idx: string]: BasicEntity;
+}
+export interface BasicEntity {
+    _notExist?: boolean;
+    children?: Array<BasicEntity>;
+    data: BasicCascaderData;
+    ind: number;
+    key: string;
+    level: number;
+    parent?: BasicEntity;
+    parentKey?: string;
+    path: Array<string>;
+    valuePath: Array<string>;
+}
+export interface BasicCascaderData {
+    [x: string]: any;
+    value: string | number;
+    label: any;
+    disabled?: boolean;
+    isLeaf?: boolean;
+    loading?: boolean;
+    children?: BasicCascaderData[];
+}
+export declare type CascaderType = 'large' | 'small' | 'default';
+export declare type BasicSimpleValueType = string | number | BasicCascaderData;
+export declare type BasicValue = BasicSimpleValueType | Array<BasicSimpleValueType> | Array<Array<BasicSimpleValueType>>;
+export declare type ShowNextType = 'click' | 'hover';
+export interface BasicTriggerRenderProps {
+    componentProps: BasicCascaderProps;
+    disabled: boolean;
+    /** The hierarchical position of the selected node in treeData,
+     * as in the following example, when Zhejiang-Hangzhou-Xiaoshan
+     * District is selected, the value here is 0-0-1 */
+    value?: string | Set<string>;
+    inputValue: string;
+    placeholder?: string;
+    /** The function used to update the value of the input box. You
+     * should call this function when the value of the Input component
+     * customized by triggerRender is updated to synchronize the state
+     * with Cascader. */
+    onChange: (inputValue: string) => void;
+    onClear: (e: any) => void;
+}
+export interface BasicScrollPanelProps {
+    panelIndex: number;
+    activeNode: BasicCascaderData;
+}
+export interface BasicCascaderProps {
+    mouseEnterDelay?: number;
+    mouseLeaveDelay?: number;
+    arrowIcon?: any;
+    changeOnSelect?: boolean;
+    multiple?: boolean;
+    autoMergeValue?: boolean;
+    defaultValue?: BasicValue;
+    disabled?: boolean;
+    dropdownClassName?: string;
+    dropdownStyle?: any;
+    emptyContent?: any;
+    filterLeafOnly?: boolean;
+    motion?: Motion;
+    filterTreeNode?: ((inputValue: string, treeNodeString: string) => boolean) | boolean;
+    placeholder?: string;
+    searchPlaceholder?: string;
+    size?: CascaderType;
+    className?: string;
+    treeData?: Array<BasicCascaderData>;
+    treeNodeFilterProp?: string;
+    displayProp?: string;
+    maxTagCount?: number;
+    max?: number;
+    showRestTagsPopover?: boolean;
+    restTagsPopoverProps?: any;
+    children?: any;
+    zIndex?: number;
+    value?: BasicValue;
+    prefix?: any;
+    suffix?: any;
+    insetLabel?: any;
+    style?: any;
+    stopPropagation?: boolean | string;
+    showClear?: boolean;
+    autoAdjustOverflow?: boolean;
+    defaultOpen?: boolean;
+    onChangeWithObject?: boolean;
+    bottomSlot?: any;
+    topSlot?: any;
+    showNext?: ShowNextType;
+    disableStrictly?: boolean;
+    onClear?: () => void;
+    triggerRender?: (props: BasicTriggerRenderProps) => any;
+    onListScroll?: (e: any, panel: BasicScrollPanelProps) => void;
+    loadData?: (selectOptions: BasicCascaderData[]) => Promise<void>;
+    onLoad?: (newLoadedKeys: Set<string>, data: BasicCascaderData) => void;
+    onDropdownVisibleChange?: (visible: boolean) => void;
+    getPopupContainer?: () => HTMLElement;
+    onChange?: (value: BasicValue) => void;
+    onSearch?: (value: string) => void;
+    onSelect?: (value: string | number | Array<string | number>) => void;
+    onExceed?: (checkedItem: BasicEntity[]) => void;
+    displayRender?: (selected: Array<string> | BasicEntity, idx?: number) => any;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+}
+export interface BasicCascaderInnerData {
+    isOpen: boolean;
+    rePosKey: number;
+    keyEntities: BasicEntities;
+    selectedKeys: Set<string>;
+    activeKeys: Set<string>;
+    filteredKeys: Set<string>;
+    inputValue: string;
+    isSearching: boolean;
+    inputPlaceHolder: string;
+    prevProps: BasicCascaderProps;
+    isHovering: boolean;
+    checkedKeys: Set<string>;
+    halfCheckedKeys: Set<string>;
+    mergedCheckedKeys: Set<string>;
+    loadedKeys: Set<string>;
+    loadingKeys: Set<string>;
+    loading: boolean;
+    treeData?: Array<BasicCascaderData>;
+    isFocus?: boolean;
+    isInput?: boolean;
+    disabledKeys?: Set<string>;
+}
+export interface CascaderAdapter extends DefaultAdapter<BasicCascaderProps, BasicCascaderInnerData> {
+    notifyClear?: () => void;
+    updateInputValue: (value: string) => void;
+    updateInputPlaceHolder: (value: string) => void;
+    focusInput: () => void;
+    registerClickOutsideHandler: (cb: (e: any) => void) => void;
+    unregisterClickOutsideHandler: () => void;
+    rePositionDropdown: () => void;
+    updateStates: (states: Partial<BasicCascaderInnerData>) => void;
+    openMenu: () => void;
+    closeMenu: (cb?: () => void) => void;
+    updateSelection: (selectedKeys: Set<string>) => void;
+    notifyChange: (value: BasicValue) => void;
+    notifySelect: (selected: string | number | Array<string | number>) => void;
+    notifyOnSearch: (input: string) => void;
+    notifyFocus: (e: any) => void;
+    notifyBlur: (e: any) => void;
+    notifyDropdownVisibleChange: (visible: boolean) => void;
+    toggleHovering: (bool: boolean) => void;
+    notifyLoadData: (selectedOpt: BasicCascaderData[], callback: (data?: BasicEntities) => void) => void;
+    notifyOnLoad: (newLoadedKeys: Set<string>, data: BasicCascaderData) => void;
+    notifyListScroll: (e: any, panel: BasicScrollPanelProps) => void;
+    notifyOnExceed: (data: BasicEntity[]) => void;
+}
+export default class CascaderFoundation extends BaseFoundation<CascaderAdapter, BasicCascaderProps, BasicCascaderInnerData> {
+    constructor(adapter: CascaderAdapter);
+    init(): void;
+    destroy(): void;
+    _isDisabled(): any;
+    _isFilterable(): boolean;
+    _notifyChange(item: BasicEntity | BasicData | Set<string>): void;
+    _isLeaf(item: BasicCascaderData): boolean;
+    _clearInput(): void;
+    _notifyBlur(e: any): void;
+    _notifyFocus(e: any): void;
+    _isOptionDisabled(key: string, keyEntities: BasicEntities): boolean;
+    getCopyFromState(items: string | string[]): Partial<BasicCascaderInnerData>;
+    getItemPropPath(selectedKey: string, prop: string | any[], keyEntities?: BasicEntities): any[];
+    _getCacheValue(keyEntities: BasicEntities): any;
+    collectOptions(init?: boolean): void;
+    handleValueChange(value: BasicValue): void;
+    /**
+     * When single selection, the clear objects of
+     * selectedKeys, activeKeys, filteredKeys, input, etc.
+     */
+    _getClearSelectedKey(filterable: boolean): Partial<BasicCascaderInnerData>;
+    updateSelectedKey(value: BasicValue, keyEntities: BasicEntities): void;
+    open(): void;
+    reCalcActiveKeys(): void;
+    close(e: any, key?: string): void;
+    getMergedMotion: () => any;
+    handleItemClick(e: any, item: BasicEntity | BasicData): void;
+    handleItemHover(e: any, item: BasicEntity): void;
+    handleShowNextByHover(item: BasicEntity): void;
+    onItemCheckboxClick(item: BasicEntity | BasicData): void;
+    handleClick(e: any): void;
+    toggleHoverState(bool: boolean): void;
+    _defaultRenderText(path: any[], displayRender?: BasicCascaderProps['displayRender']): any;
+    renderDisplayText(targetKey: string, keyEntities?: BasicEntities): any;
+    handleNodeLoad(item: BasicEntity | BasicData): void;
+    notifyIfLoadData(item: BasicEntity | BasicData): void;
+    handleSingleSelect(e: any, item: BasicEntity | BasicData): void;
+    _handleMultipleSelect(item: BasicEntity | BasicData): void;
+    calcNonDisabedCheckedKeys(eventKey: string, targetStatus: boolean): {
+        checkedKeys: Set<string>;
+        halfCheckedKeys: Set<any>;
+    };
+    calcChekcedStatus(targetStatus: boolean, eventKey: string): boolean;
+    _notifySelect(keys: Set<string>): void;
+    /**
+     * calculate all key of nodes that are checked or half checked
+     * @param {string} key key of node
+     * @param {boolean} curCheckedStatus checked status of node
+     */
+    calcCheckedKeys(key: string, curCheckedStatus: boolean): {
+        checkedKeys: Set<string>;
+        halfCheckedKeys: Set<string>;
+    };
+    handleInputChange(sugInput: string): void;
+    handleClear(): void;
+    getRenderData(): BasicEntity[] | BasicData[];
+    getFilteredData(): BasicData[];
+    handleListScroll(e: any, ind: number): void;
+    handleTagRemove(e: any, tagValuePath: string[]): void;
+}