@douyinfe/semi-foundation 2.46.1 → 2.47.0-beta.0

package/tree/treeUtil.ts

@@ -3,7 +3,7 @@
  * https://github.com/react-component/tree/blob/master/src/util.tsx
  */
 
-import { difference, uniq, max, isObject, isNull, isUndefined, isEmpty, pick, get } from 'lodash';
+import { difference, uniq, max, isObject, isNull, isUndefined, isEmpty, pick, get, omit } from 'lodash';
 
 export interface KeyEntities {
     [x: string]: any
@@ -20,6 +20,16 @@ export interface NodeData {
     children?: any
 }
 
+export interface KeyMapProps {
+    key?: string;
+    label?: string;
+    value?: string;
+    disabled?: string;
+    children?: string;
+    isLeaf?: string;
+    icon?: string
+}
+
 const DRAG_OFFSET = 0.45;
 
 function getPosition(level: any, index: any) {
@@ -37,17 +47,28 @@ function isValid(val: any) {
  * @param filteredShownKeys
  * need expanded keys, provides `true` means all expanded
  */
-export function flattenTreeData(treeNodeList: any[], expandedKeys: Set<string>, filteredShownKeys: boolean | Set<any> = false) {
+export function flattenTreeData(treeNodeList: any[], expandedKeys: Set<string>, keyMaps: KeyMapProps, filteredShownKeys: boolean | Set<any> = false) {
     const flattenList: any[] = [];
     const filterSearch = Boolean(filteredShownKeys);
+    const realKeyName = get(keyMaps, 'key', 'key');
+    const realChildrenName = get(keyMaps, 'children', 'children');
     function flatten(list: any[], parent: any = null) {
         return list.map((treeNode, index) => {
             const pos = getPosition(parent ? parent.pos : '0', index);
-            const mergedKey = treeNode.key;
+            const mergedKey = treeNode[realKeyName];
+
+            const otherData = {};
+            if (keyMaps) {
+                Object.entries(omit(keyMaps, 'children')).forEach(([key, value]) => {
+                    const result = treeNode[value as string];
+                    !isUndefined(result) && (otherData[key] = result);
+                });
+            }
 
             // Add FlattenDataNode into list
             const flattenNode: any = {
                 ...pick(treeNode, ['key', 'label', 'value', 'icon', 'disabled', 'isLeaf']),
+                ...otherData,
                 parent,
                 pos,
                 children: null,
@@ -61,7 +82,7 @@ export function flattenTreeData(treeNodeList: any[], expandedKeys: Set<string>,
 
             // Loop treeNode children
             if (expandedKeys.has(mergedKey) && (!filterSearch || (!isBooleanFilteredShownKeys && filteredShownKeys.has(mergedKey)))) {
-                flattenNode.children = flatten(treeNode.children || [], flattenNode);
+                flattenNode.children = flatten(treeNode[realChildrenName] || [], flattenNode);
             } else {
                 flattenNode.children = [];
             }
@@ -100,17 +121,20 @@ export function convertJsonToData(treeJson: TreeDataSimpleJson) {
 /**
  * Traverse all the data by `treeData`.
  */
-export function traverseDataNodes(treeNodes: any[], callback: (data: any) => void) {
+export function traverseDataNodes(treeNodes: any[], callback: (data: any) => void, keyMaps: KeyMapProps) {
+    const realKeyName = get(keyMaps, 'key', 'key');
+    const realChildrenName = get(keyMaps, 'children', 'children');
     const processNode = (node: any, ind?: number, parent?: any) => {
-        const children = node ? node.children : treeNodes;
+        const children = node ? node[realChildrenName] : treeNodes;
         const pos = node ? getPosition(parent.pos, ind) : '0';
         // Process node if is not root
         if (node) {
+            const nodeKey = get(node, realKeyName, null);
             const data = {
                 data: { ...node },
                 ind,
                 pos,
-                key: node.key !== null ? node.key : pos,
+                key: nodeKey !== null ? nodeKey : pos,
                 parentPos: parent.node ? parent.pos : null,
                 level: Number(parent.level) + 1,
             };
@@ -132,7 +156,7 @@ export function traverseDataNodes(treeNodes: any[], callback: (data: any) => voi
 }
 
 /* Convert data to entities map */
-export function convertDataToEntities(dataNodes: any[]) {
+export function convertDataToEntities(dataNodes: any[], keyMaps?: KeyMapProps) {
     const posEntities = {};
     const keyEntities = {};
     const valueEntities = {};
@@ -141,11 +165,12 @@ export function convertDataToEntities(dataNodes: any[]) {
         keyEntities,
         valueEntities,
     };
+    const realValueName = get(keyMaps, 'value', 'value');
 
     traverseDataNodes(dataNodes, (data: any) => {
         const { pos, key, parentPos } = data;
         const entity = { ...data };
-        const value = get(entity, 'data.value', null);
+        const value = get(entity, `data.${realValueName}`, null);
 
         if (value !== null) {
             valueEntities[value] = key;
@@ -160,7 +185,7 @@ export function convertDataToEntities(dataNodes: any[]) {
             entity.parent.children = entity.parent.children || [];
             entity.parent.children.push(entity);
         }
-    });
+    }, keyMaps);
 
     return wrapper;
 }
@@ -566,6 +591,7 @@ export function filterTreeData(info: any) {
         filterTreeNode,
         filterProps,
         prevExpandedKeys,
+        keyMaps
     } = info;
 
     let filteredOptsKeys = [];
@@ -579,7 +605,7 @@ export function filterTreeData(info: any) {
     }
     const shownChildKeys = findDescendantKeys(filteredOptsKeys, keyEntities, true);
     const filteredShownKeys = new Set([...shownChildKeys, ...expandedOptsKeys]);
-    const flattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), showFilteredOnly && filteredShownKeys);
+    const flattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), keyMaps, showFilteredOnly && filteredShownKeys);
 
     return {
         flattenNodes,
@@ -590,17 +616,19 @@ export function filterTreeData(info: any) {
 }
 
 // return data.value if data.value exist else fall back to key
-export function getValueOrKey(data: any) {
+export function getValueOrKey(data: any, keyMaps?: KeyMapProps) {
+    const valueName = get(keyMaps, 'value', 'value');
+    const keyName = get(keyMaps, 'key', 'key');
     if (Array.isArray(data)) {
-        return data.map(item => get(item, 'value', item.key));
+        return data.map(item => get(item, valueName, item[keyName]));
     }
-    return get(data, 'value', data.key);
+    return get(data, valueName, data[keyName]);
 }
 
 /* Convert value to string */
-export function normalizeValue(value: any, withObject: boolean) {
+export function normalizeValue(value: any, withObject: boolean, keyMaps?: KeyMapProps) {
     if (withObject && isValid(value)) {
-        return getValueOrKey(value);
+        return getValueOrKey(value, keyMaps);
     } else {
         return value;
     }
@@ -611,8 +639,9 @@ export function updateKeys(keySet: Set<string> | string[], keyEntities: KeyEntit
     return keyArr.filter(key => key in keyEntities);
 }
 
-export function calcDisabledKeys(keyEntities: KeyEntities) {
-    const disabledKeys = Object.keys(keyEntities).filter(key => keyEntities[key].data.disabled);
+export function calcDisabledKeys(keyEntities: KeyEntities, keyMaps?: KeyMapProps) {
+    const disabledName = get(keyMaps, 'disabled', 'disabled');
+    const disabledKeys = Object.keys(keyEntities).filter(key => keyEntities[key].data[disabledName]);
     const { checkedKeys } = calcCheckedKeys(disabledKeys, keyEntities);
     return checkedKeys;
 }

package/treeSelect/foundation.ts

@@ -271,7 +271,9 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     }
 
     findDataForValue(findValue: string) {
-        const { value, defaultValue } = this.getProps();
+        const { value, defaultValue, keyMaps } = this.getProps();
+        const realValueName = get(keyMaps, 'value', 'value');
+        const realKeyName = get(keyMaps, 'key', 'key');
         let valueArr = [];
         if (value) {
             valueArr = Array.isArray(value) ? value : [value];
@@ -279,15 +281,17 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
             valueArr = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
         }
         return valueArr.find(item => {
-            return item.value === findValue || item.key === findValue;
+            return item[realValueName] === findValue || item[realKeyName] === findValue;
         });
     }
 
     constructDataForValue(value: string) {
-        const { treeNodeLabelProp } = this.getProps();
+        const { treeNodeLabelProp, keyMaps } = this.getProps();
+        const keyName = get(keyMaps, 'key', 'key');
+        const labelName = get(keyMaps, 'label', treeNodeLabelProp);
         return {
-            key: value,
-            [treeNodeLabelProp]: value
+            [keyName]: value,
+            [labelName]: value
         };    
     }
 
@@ -401,29 +405,30 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     _notifyMultipleChange(key: string[], e: any) {
         const { keyEntities } = this.getStates();
-        const { leafOnly, checkRelation } = this.getProps();
+        const { leafOnly, checkRelation, keyMaps } = this.getProps();
         let keyList = [];
         if (checkRelation === 'related') {
             keyList = normalizeKeyList(key, keyEntities, leafOnly, true);
         } else if (checkRelation === 'unRelated') {
             keyList = key as string[];
         }
-        const nodes = keyList.map(key => (keyEntities[key] && keyEntities[key].data.key === key) ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
+        const nodes = keyList.map(key => (keyEntities[key] && keyEntities[key].key === key) ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key));
         if (this.getProp('onChangeWithObject')) {
             this._adapter.notifyChangeWithObject(nodes, e);
         } else {
-            const value = getValueOrKey(nodes);
+            const value = getValueOrKey(nodes, keyMaps);
             this._adapter.notifyChange(value, nodes, e);
         }
     }
 
     _notifyChange(key: any, e: any) {
         const { keyEntities } = this.getStates();
+        const { keyMaps } = this.getProps();
         if (this._isMultiple() && Array.isArray(key)) {
             this._notifyMultipleChange(key, e);
         } else {
             const nodes = isUndefined(key) ? key : keyEntities[key].data;
-            const value = isUndefined(key) ? key : getValueOrKey(nodes);
+            const value = isUndefined(key) ? key : getValueOrKey(nodes, keyMaps);
             if (this.getProp('onChangeWithObject')) {
                 this._adapter.notifyChangeWithObject(nodes, e);
             } else {
@@ -552,10 +557,11 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
     }
 
     removeTag(eventKey: BasicTreeNodeData['key']) {
-        const { disableStrictly, checkRelation } = this.getProps();
+        const { disableStrictly, checkRelation, keyMaps } = this.getProps();
         const { keyEntities, disabledKeys, realCheckedKeys } = this.getStates();
-        const item = (keyEntities[eventKey] && keyEntities[eventKey].data.key === eventKey) ? keyEntities[eventKey].data : this.getDataForKeyNotInKeyEntities(eventKey);
-        if (item.disabled || (disableStrictly && disabledKeys.has(eventKey))) {
+        const item = (keyEntities[eventKey] && keyEntities[eventKey].key === eventKey) ? keyEntities[eventKey].data : this.getDataForKeyNotInKeyEntities(eventKey);
+        const disabledName = get(keyMaps, 'disabled', 'disabled');
+        if (item[disabledName] || (disableStrictly && disabledKeys.has(eventKey))) {
             return;
         }
         if (checkRelation === 'unRelated') {
@@ -583,11 +589,12 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     clearInput() {
         const { flattenNodes, expandedKeys, selectedKeys, keyEntities, treeData } = this.getStates();
+        const { keyMaps } = this.getProps();
         const newExpandedKeys: Set<string> = new Set(expandedKeys);
         const isExpandControlled = this._isExpandControlled();
         const expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
         expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
-        const newFlattenNodes = flattenTreeData(treeData, newExpandedKeys);
+        const newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
 
         this._adapter.updateState({
             expandedKeys: isExpandControlled ? expandedKeys : newExpandedKeys,
@@ -604,7 +611,8 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         // Input is used as controlled component
         this._adapter.updateInputValue(sugInput);
         const { flattenNodes, expandedKeys, selectedKeys, keyEntities, treeData } = this.getStates();
-        const { showFilteredOnly, filterTreeNode, treeNodeFilterProp } = this.getProps();
+        const { showFilteredOnly, filterTreeNode, treeNodeFilterProp, keyMaps } = this.getProps();
+        const realFilterProp = treeNodeFilterProp !== 'label' ? treeNodeFilterProp : get(keyMaps, 'label', 'label');
         const newExpandedKeys: Set<string> = new Set(expandedKeys);
         let filteredOptsKeys: string[] = [];
         let expandedOptsKeys = [];
@@ -613,18 +621,18 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         if (!sugInput) {
             expandedOptsKeys = findAncestorKeys(selectedKeys, keyEntities);
             expandedOptsKeys.forEach(item => newExpandedKeys.add(item));
-            newFlattenNodes = flattenTreeData(treeData, newExpandedKeys);
+            newFlattenNodes = flattenTreeData(treeData, newExpandedKeys, keyMaps);
         } else {
             filteredOptsKeys = Object.values(keyEntities)
                 .filter((item: BasicKeyEntity) => {
                     const { data } = item;
-                    return filter(sugInput, data, filterTreeNode, treeNodeFilterProp);
+                    return filter(sugInput, data, filterTreeNode, realFilterProp);
                 })
                 .map((item: BasicKeyEntity) => item.key);
             expandedOptsKeys = findAncestorKeys(filteredOptsKeys, keyEntities, false);
             const shownChildKeys = findDescendantKeys(filteredOptsKeys, keyEntities, true);
             filteredShownKeys = new Set([...shownChildKeys, ...expandedOptsKeys]);
-            newFlattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), showFilteredOnly && filteredShownKeys);
+            newFlattenNodes = flattenTreeData(treeData, new Set(expandedOptsKeys), keyMaps, showFilteredOnly && filteredShownKeys);
         }
         const newFilteredExpandedKeys = new Set(expandedOptsKeys);
         this._adapter.notifySearch(sugInput, Array.from(newFilteredExpandedKeys));
@@ -733,7 +741,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         const nonDisabled = descendantKeys.filter(key => !disabledKeys.has(key));
         const newCheckedKeys = targetStatus ?
             [...nonDisabled, ...checkedKeys] :
-            difference(normalizeKeyList([...checkedKeys], keyEntities, true), nonDisabled);
+            difference(normalizeKeyList([...checkedKeys], keyEntities, true, true), nonDisabled);
         return calcCheckedKeys(newCheckedKeys, keyEntities);
     }
 
@@ -752,7 +760,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
         return !allChecked;
     }
     handleNodeExpandInSearch(e: any, treeNode: BasicTreeNodeProps) {
-        const { treeData, filteredShownKeys, keyEntities } = this.getStates();
+        const { treeData, filteredShownKeys, keyEntities, keyMaps } = this.getStates();
         const showFilteredOnly = this._showFilteredOnly();
         // clone otherwise will be modified unexpectedly
         const { filteredExpandedKeys } = this.getCopyFromState('filteredExpandedKeys');
@@ -772,7 +780,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
         if (!this._isExpandControlled()) {
             // debugger;
-            const flattenNodes = flattenTreeData(treeData, filteredExpandedKeys, showFilteredOnly && filteredShownKeys);
+            const flattenNodes = flattenTreeData(treeData, filteredExpandedKeys, keyMaps, showFilteredOnly && filteredShownKeys);
             const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, filteredExpandedKeys, keyEntities) : [];
             const newState = {
                 filteredExpandedKeys,
@@ -792,7 +800,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
     handleNodeExpand(e: any, treeNode: BasicTreeNodeProps) {
         // debugger;
-        const { loadData } = this.getProps();
+        const { loadData, keyMaps } = this.getProps();
         const { inputValue, keyEntities } = this.getStates();
         const isSearching = Boolean(inputValue);
         if (!loadData && (!treeNode.children || !treeNode.children.length)) {
@@ -820,7 +828,7 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
 
         if (!isExpandControlled) {
             // debugger;
-            const flattenNodes = flattenTreeData(treeData, expandedKeys);
+            const flattenNodes = flattenTreeData(treeData, expandedKeys, keyMaps);
             const motionKeys = this._isAnimated() ? getMotionKeys(eventKey, expandedKeys, keyEntities) : [];
             const newState = {
                 expandedKeys,
@@ -841,17 +849,18 @@ export default class TreeSelectFoundation<P = Record<string, any>, S = Record<st
      * The selected items that need to be displayed in the search box when obtaining a single selection
      */
     getRenderTextInSingle() {
-        const { renderSelectedItem: propRenderSelectedItem, treeNodeLabelProp } = this.getProps();
+        const { renderSelectedItem: propRenderSelectedItem, treeNodeLabelProp, keyMaps } = this.getProps();
         const { selectedKeys, keyEntities } = this.getStates();
+        const realLabelName = get(keyMaps, 'label', treeNodeLabelProp);
         const renderSelectedItem = isFunction(propRenderSelectedItem) ?
             propRenderSelectedItem :
-            (item: BasicTreeNodeData) => get(item, treeNodeLabelProp, null);
+            (item: BasicTreeNodeData) => get(item, realLabelName, null);
         let item;
         if (selectedKeys.length) {
             const key = selectedKeys[0];
-            item = (keyEntities[key] && keyEntities[key].data.key === key) ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key);
+            item = (keyEntities[key] && keyEntities[key].key === key) ? keyEntities[key].data : this.getDataForKeyNotInKeyEntities(key);
         }
-        const renderText = item && treeNodeLabelProp in item ? renderSelectedItem(item) : null;
+        const renderText = item ? renderSelectedItem(item) : null;
         return renderText;
     }
 

package/typography/typography.scss

@@ -53,6 +53,10 @@ $module: #{$prefix}-typography;
 
     &-small {
         @include font-size-small;
+        font-weight: $font-typography_smallText-regular-fontWeight;
+        &.#{$module}-paragraph{
+            font-weight: $font-typography_smallParagraph-regular-fontWeight;
+        }
     }
 
     code {
@@ -351,6 +355,7 @@ h6.#{$module},
 p.#{$module}-extended,
 .#{$module}-paragraph.#{$module}-extended {
     line-height: $font-typography_paragraph_extended-lineHeight;
+    font-weight: $font-typography_normalParagraph-regular-fontWeight;
 }
 
 @import "./rtl.scss";

package/typography/variables.scss

@@ -26,6 +26,10 @@ $font-typography_title-fontWeight: $font-weight-bold; // 标题文本字重
 $font-typography_link-fontWeight: $font-weight-bold; // 链接文本字重
 $font-typography_strong-fontWeight: $font-weight-bold; // 强调文本字重
 $font-typography_paragraph_extended-lineHeight: 24px; // 宽松行距段落文本行高
+$font-typography_normalText-regular-fontWeight: $font-weight-regular; // normal text 字重 - 正常
+$font-typography_smallText-regular-fontWeight: $font-weight-regular; // small text 字重 - 正常
+$font-typography_normalParagraph-regular-fontWeight: $font-weight-regular; // normal paragraph 字重 - 正常
+$font-typography_smallParagraph-regular-fontWeight: $font-weight-regular; // small paragraph 字重 - 正常
 
 $font-typography_title1-fontWeight: $font-typography_title-fontWeight; // 一级标题文本字重
 $font-typography_title2-fontWeight: $font-typography_title-fontWeight; // 二级标题文本字重

package/utils/array.ts

@@ -21,24 +21,24 @@ export function pullAll(arrayA: any[], arrayB: any[]) {
     }
     return arrayA;
 }
-type CompareFn<T> = (a: T, b: T) => number;
+type CompareFn<T> = (a: T, b: T, sortOrder: 'ascend' | 'descend') => number;
 /**
  * Adapt the descending order
  * @param {Function} fn
  * @param {String} order
  * @returns
  */
-export function withOrderSort<T = any>(fn: CompareFn<T>, order = 'ascend'): CompareFn<T> {
+export function withOrderSort<T = any>(fn: CompareFn<T>, order: 'ascend' | 'descend' = 'ascend'): (a: T, b: T) => number {
     switch (order) {
         case 'descend':
             return (
                 (a: any, b: any) => {
-                    const result = Number(fn(a, b));
+                    const result = Number(fn(a, b, order));
                     return result !== 0 ? -result : result;
                 }
             );
         case 'ascend':
         default:
-            return fn;
+            return (a: any, b: any) => fn(a, b, order);
     }
 }