@douyinfe/semi-foundation 2.24.2 → 2.25.0-alpha.0

package/lib/es/tooltip/tooltip.css

@@ -49,6 +49,8 @@
   font-size: 14px;
   left: 0;
   top: 0;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -58,6 +60,9 @@
 .semi-tooltip-wrapper-show {
   opacity: 1;
 }
+.semi-tooltip-content {
+  min-width: 0;
+}
 .semi-tooltip-trigger {
   display: inline-block;
   width: auto;
@@ -71,9 +76,11 @@
 }
 .semi-tooltip-animation-show {
   animation: semi-tooltip-zoomIn 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 .semi-tooltip-animation-hide {
   animation: semi-tooltip-zoomOut 100ms cubic-bezier(0.215, 0.61, 0.355, 1);
+  animation-fill-mode: forwards;
 }
 
 .semi-tooltip-wrapper .semi-tooltip-icon-arrow {

package/lib/es/tooltip/tooltip.scss

@@ -65,6 +65,9 @@ $module-icon: #{$module}-icon-arrow;
         font-size: $font-tooltip-fontSize;
         left: 0;
         top: 0;
+        // word-wrap is an alias of overflow-wrap, word-wrap can take effect on more browsers, in order to prevent future changes, use both  
+        word-wrap: break-word;
+        overflow-wrap: break-word;
 
         @include font-size-regular;
         opacity: 0;
@@ -75,6 +78,10 @@ $module-icon: #{$module}-icon-arrow;
         }
     }
 
+    &-content {
+        min-width: 0;
+    }
+
     &-trigger {
         display: inline-block;
         width: auto;
@@ -91,10 +98,12 @@ $module-icon: #{$module}-icon-arrow;
 
     &-animation-show{
         animation: #{$module}-zoomIn $animation_duration-tooltip_in $animation_function-tooltip_in;
+        animation-fill-mode: forwards;
     }
 
     &-animation-hide{
         animation: #{$module}-zoomOut $animation_duration-tooltip_out $animation_function-tooltip_out;
+        animation-fill-mode: forwards;
     }
 
 }

package/lib/es/transfer/constants.js

@@ -1,6 +1,6 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-transfer")
+  PREFIX: `${BASE_CLASS_PREFIX}-transfer`
 };
 const strings = {
   TYPE_GROUP_LIST: 'groupList',

package/lib/es/transfer/foundation.d.ts

@@ -9,7 +9,7 @@ export interface BasicDataItem {
     style?: any;
     className?: string;
 }
-export declare type DataItemMap = Map<number | string, BasicDataItem>;
+export type DataItemMap = Map<number | string, BasicDataItem>;
 export interface OnSortEndProps {
     oldIndex: number;
     newIndex: number;

package/lib/es/transfer/foundation.js

@@ -2,28 +2,23 @@ import _omit from "lodash/omit";
 import BaseFoundation from '../base/foundation';
 import { strings } from './constants';
 import { _generateGroupedData, _generateTreeData } from './transferUtils';
-import arrayMove from '../utils/arrayMove'; // eslint-disable-next-line max-len
-
+import arrayMove from '../utils/arrayMove';
 export default class TransferFoundation extends BaseFoundation {
   constructor(adapter) {
     super(Object.assign({}, adapter));
   }
-
   _generateGroupedData(dataSource) {
     return _generateGroupedData(dataSource);
   }
-
   _generateTreeData(dataSource) {
     return _generateTreeData(dataSource);
   }
-
   _generatePath(item) {
     const {
       path = []
     } = item;
     return path.map(p => p.label).join(' > ');
   }
-
   handleInputChange(inputVal, notify) {
     const {
       data
@@ -32,32 +27,22 @@ export default class TransferFoundation extends BaseFoundation {
       filter,
       type
     } = this.getProps();
-
     if (type === strings.TYPE_TREE_TO_LIST) {
       const searchResult = new Set(data.map(item => item.key));
-
       this._adapter.searchTree(inputVal);
-
       notify && this._adapter.notifySearch(inputVal);
-
       this._adapter.updateInput(inputVal);
-
       this._adapter.updateSearchResult(searchResult);
-
       return;
     }
-
     const filterFunc = typeof filter === 'function' ? item => filter(inputVal, item) : item => typeof item.label === 'string' && item.label.includes(inputVal);
     const searchData = data.filter(filterFunc);
     const searchResult = new Set(searchData.map(item => item.key));
     notify && this._adapter.notifySearch(inputVal);
-
     this._adapter.updateInput(inputVal);
-
     this._adapter.updateSearchResult(searchResult);
-  } // Select or cancel all unhidden items
-
-
+  }
+  // Select or cancel all unhidden items
   handleAll(wantAllChecked) {
     const {
       disabled,
@@ -69,17 +54,14 @@ export default class TransferFoundation extends BaseFoundation {
       searchResult,
       inputValue
     } = this.getStates();
-
     if (disabled) {
       return;
     }
-
     const inSearchMode = inputValue !== '';
     let operateData = [];
     operateData = inSearchMode ? data.filter(item => searchResult.has(item.key)) : data;
     operateData = type === strings.TYPE_TREE_TO_LIST ? data : operateData;
     let newSelectedItems = new Map();
-
     switch (true) {
       case !wantAllChecked:
         newSelectedItems = new Map(selectedItems);
@@ -90,7 +72,6 @@ export default class TransferFoundation extends BaseFoundation {
           }
         });
         break;
-
       case wantAllChecked:
         newSelectedItems = new Map(selectedItems);
         operateData.forEach(item => {
@@ -99,25 +80,19 @@ export default class TransferFoundation extends BaseFoundation {
             if (selectedItems.has(item.key)) {
               newSelectedItems.set(item.key, item);
             }
-
             return;
           }
-
           newSelectedItems.set(item.key, item);
         });
         break;
-
       default:
         break;
     }
-
     if (!this._isControlledComponent()) {
       this._adapter.updateSelected(newSelectedItems);
     }
-
     this._notifyChange(newSelectedItems);
   }
-
   handleClear() {
     const {
       disabled
@@ -126,11 +101,9 @@ export default class TransferFoundation extends BaseFoundation {
       selectedItems,
       data
     } = this.getStates();
-
     if (disabled) {
       return;
     }
-
     const newSelectedItems = new Map(selectedItems);
     data.forEach(item => {
       // If the item is disabled, keep it
@@ -138,129 +111,99 @@ export default class TransferFoundation extends BaseFoundation {
         newSelectedItems.delete(item.key);
       }
     });
-
     if (!this._isControlledComponent()) {
       this._adapter.updateSelected(newSelectedItems);
     }
-
     this._notifyChange(newSelectedItems);
   }
-
   handleSelectOrRemove(item) {
     const {
       disabled
     } = this.getProps();
-
     const selectedItems = this._adapter.getSelected();
-
     if (disabled || item.disabled) {
       return;
     }
-
     if (selectedItems.has(item.key)) {
       selectedItems.delete(item.key);
-
       this._adapter.notifyDeselect(item);
     } else {
       selectedItems.set(item.key, item);
-
       this._adapter.notifySelect(item);
     }
-
     if (!this._isControlledComponent()) {
       this._adapter.updateSelected(selectedItems);
     }
-
     this._notifyChange(selectedItems);
   }
-
   handleSelect(values) {
     const {
       disabled
     } = this.getProps();
-
     const selectedItems = this._adapter.getSelected();
-
     const {
       data
     } = this.getStates();
     const dataItems = data.map(d => [d.value, d]);
     const allItemsMap = new Map(dataItems);
     const nextSelectedItemsMap = new Map();
-
     if (disabled) {
       return;
     }
-
     values.forEach(value => {
-      const node = allItemsMap.get(value); // The value passed in is an array of the value used, but the internal selectedItems stores a map of keys
-
+      const node = allItemsMap.get(value);
+      // The value passed in is an array of the value used, but the internal selectedItems stores a map of keys
       if (selectedItems.has(node.key)) {
         nextSelectedItemsMap.set(node.key, node);
         return;
       }
-
       if (node.disabled) {
         return;
       }
-
       nextSelectedItemsMap.set(node.key, node);
       return;
     });
-
     if (!this._isControlledComponent()) {
       this._adapter.updateSelected(nextSelectedItemsMap);
     }
-
     this._notifyChange(nextSelectedItemsMap);
   }
-
   getValuesAndItemsFromMap(selectedItems) {
     const {
       type
     } = this.getProps();
     const items = [];
     const values = [];
-
     for (const item of selectedItems) {
       const obj = type === strings.TYPE_GROUP_LIST ? _omit(item[1], '_parent') : item[1];
       items.push(obj);
       values.push(obj.value);
     }
-
     return {
       items,
       values
     };
   }
-
   _notifyChange(selectedItems) {
     const {
       items,
       values
     } = this.getValuesAndItemsFromMap(selectedItems);
-
     this._adapter.notifyChange(values, items);
   }
-
   handleSortEnd(callbackProps) {
     const {
       oldIndex,
       newIndex
     } = callbackProps;
-
     const selectedItems = this._adapter.getSelected();
-
     let selectedArr = [...selectedItems.values()];
     selectedArr = arrayMove(selectedArr, oldIndex, newIndex);
     let newSelectedItems = new Map();
     selectedArr.forEach(option => {
       newSelectedItems = newSelectedItems.set(option.key, option);
     });
-
     this._adapter.updateSelected(newSelectedItems);
-
     this._notifyChange(newSelectedItems);
   }
-
 }

package/lib/es/transfer/transfer.css

@@ -143,10 +143,14 @@
 .semi-transfer-right-item-drag-handler {
   margin-right: 4px;
   flex-shrink: 0;
+  cursor: move;
 }
 .semi-transfer-right-item-drag-item-move {
   z-index: 2000;
 }
+.semi-transfer-right-item-sortable-item-active {
+  opacity: 0;
+}
 .semi-transfer-right-empty {
   position: absolute;
   height: 100%;

package/lib/es/transfer/transfer.scss

@@ -169,12 +169,19 @@ $module: #{$prefix}-transfer;
                 &-handler {
                     margin-right: $spacing-transfer_right_item_drag_handler-marginRight;
                     flex-shrink: 0;
+                    cursor: move;
                 }
 
                 &-item-move {
                     z-index: $z-transfer_right_item_drag_item_move;
                 }            
             }
+
+            &-sortable-item {
+                &-active {
+                    opacity: 0;
+                }
+            }
         }
 
         &-empty {

package/lib/es/transfer/transferUtils.js

@@ -1,47 +1,37 @@
 import _omit from "lodash/omit";
-
 var __rest = this && this.__rest || function (s, e) {
   var t = {};
-
   for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0) t[p] = s[p];
-
   if (s != null && typeof Object.getOwnPropertySymbols === "function") for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
     if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i])) t[p[i]] = s[p[i]];
   }
   return t;
 };
-
 import { strings } from './constants';
 export function _generateGroupedData(dataSource) {
   const newData = [];
-
   for (const group of dataSource) {
     group.children.forEach(item => {
       const {
-        children
-      } = group,
-            rest = __rest(group, ["children"]);
-
+          children
+        } = group,
+        rest = __rest(group, ["children"]);
       newData.push(Object.assign(Object.assign({}, item), {
         _parent: rest
       }));
     });
   }
-
   return newData;
-} // DFS
-
+}
+// DFS
 export function _generateTreeData(dataSource) {
   const newData = [];
   const stack = [...dataSource].reverse();
-
   while (stack.length) {
     const current = stack.pop();
     current.path = current.path || [_omit(current, ['children'])];
-
     if (current.children && Array.isArray(current.children)) {
       const nodes = current.children;
-
       for (let i = nodes.length - 1; i >= 0; i--) {
         const child = Object.assign({}, nodes[i]);
         child.path = [].concat(current.path).concat(_omit(child, ['children']));
@@ -50,30 +40,24 @@ export function _generateTreeData(dataSource) {
     } else {
       current.isLeaf = true;
     }
-
     newData.push(_omit(current, ['children']));
   }
-
   return newData;
 }
 export function _generateDataByType(dataSource, type) {
   const newData = dataSource.slice() || [];
-
   if (type === strings.TYPE_GROUP_LIST) {
     return _generateGroupedData(newData);
   }
-
   if (type === strings.TYPE_TREE_TO_LIST) {
     return _generateTreeData(newData);
   }
-
   return newData;
 }
 export function _generateSelectedItems(value, data) {
   const selectedItems = new Map();
   value.forEach(val => {
     const index = data.findIndex(option => option.value === val);
-
     if (index !== -1) {
       const option = data[index];
       selectedItems.set(option.key, option);

package/lib/es/tree/constants.js

@@ -1,7 +1,7 @@
 import { BASE_CLASS_PREFIX } from '../base/constants';
 const cssClasses = {
-  PREFIX: "".concat(BASE_CLASS_PREFIX, "-tree"),
-  PREFIX_OPTION: "".concat(BASE_CLASS_PREFIX, "-tree-option")
+  PREFIX: `${BASE_CLASS_PREFIX}-tree`,
+  PREFIX_OPTION: `${BASE_CLASS_PREFIX}-tree-option`
 };
 const strings = {
   EXPAND_ACTION: [false, 'click', 'doubleClick']

package/lib/es/tree/foundation.d.ts

@@ -3,6 +3,8 @@
  * https://github.com/react-component/tree
  */
 import BaseFoundation, { DefaultAdapter } from '../base/foundation';
+import type { KeyMapProps } from './treeUtil';
+export type { KeyMapProps };
 export interface BasicTreeNodeProps {
     [x: string]: any;
     expanded?: boolean;
@@ -21,10 +23,11 @@ export interface BasicTreeNodeProps {
     selectedKey?: string;
     motionKey?: string[] | string;
     eventKey?: string;
+    showLine?: boolean;
 }
 export interface BasicTreeNodeData {
     [x: string]: any;
-    key: string;
+    key?: string;
     value?: number | string;
     label?: any;
     icon?: any;
@@ -71,8 +74,8 @@ export interface BasicDragProps {
 export interface BasicDragEnterProps extends BasicDragProps {
     expandedKeys?: string[];
 }
-export declare type ExpandAction = false | 'click' | 'doubleClick';
-export declare type BasicValue = string | number | BasicTreeNodeData | Array<BasicTreeNodeData | string | number>;
+export type ExpandAction = false | 'click' | 'doubleClick';
+export type BasicValue = string | number | BasicTreeNodeData | Array<BasicTreeNodeData | string | number>;
 export interface BasicOnDragProps {
     event: any;
     node: BasicDragTreeNode;
@@ -111,6 +114,8 @@ export interface BasicRenderFullLabelProps {
         expanded: boolean;
         loading: boolean;
     };
+    filtered: boolean | undefined;
+    searchWord: string | undefined;
 }
 export interface BasicSearchRenderProps {
     className: string;
@@ -128,7 +133,7 @@ export interface Virtualize {
     height?: number | string;
     width?: number | string;
 }
-export declare type CheckRelation = 'related' | 'unRelated';
+export type CheckRelation = 'related' | 'unRelated';
 export interface BasicTreeProps {
     autoExpandParent?: boolean;
     autoExpandWhenDragEnter?: boolean;
@@ -146,7 +151,7 @@ export interface BasicTreeProps {
     emptyContent?: any;
     expandAction?: ExpandAction;
     expandedKeys?: string[];
-    filterTreeNode?: boolean | ((inputValue: string, treeNodeString: string) => boolean);
+    filterTreeNode?: boolean | ((inputValue: string, treeNodeString: string, data?: BasicTreeNodeData) => boolean);
     hideDraggingNode?: boolean;
     labelEllipsis?: boolean;
     leafOnly?: boolean;
@@ -166,8 +171,8 @@ export interface BasicTreeProps {
     onExpand?: (expandedKeys: string[], expandedOtherProps: BasicExpandedOtherProps) => void;
     onLoad?: (loadedKeys?: Set<string>, treeNode?: BasicTreeNodeData) => void;
     onContextMenu?: (e: any, node: BasicTreeNodeData) => void;
-    onSearch?: (sunInput: string) => void;
-    onSelect?: (selectedKeys: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
+    onSearch?: (sunInput: string, filteredExpandedKeys: string[]) => void;
+    onSelect?: (selectedKey: string, selected: boolean, selectedNode: BasicTreeNodeData) => void;
     preventScroll?: boolean;
     renderDraggingNode?: (nodeInstance: HTMLElement, node: BasicTreeNodeData) => HTMLElement;
     renderFullLabel?: (renderFullLabelProps: BasicRenderFullLabelProps) => any;
@@ -178,6 +183,7 @@ export interface BasicTreeProps {
     searchStyle?: any;
     showClear?: boolean;
     showFilteredOnly?: boolean;
+    showLine?: boolean;
     style?: any;
     treeData?: BasicTreeNodeData[];
     treeDataSimpleJson?: TreeDataSimpleJson;
@@ -227,7 +233,7 @@ export interface TreeAdapter extends DefaultAdapter<BasicTreeProps, BasicTreeInn
     notifyExpand: (expandedKeys: Set<string>, { expanded, node }: BasicExpandedOtherProps) => void;
     notifySelect: (selectKey: string, bool: boolean, node: BasicTreeNodeData) => void;
     notifyChange: (value: BasicValue) => void;
-    notifySearch: (input: string) => void;
+    notifySearch: (input: string, filteredExpandedKeys: string[]) => void;
     notifyRightClick: (e: any, node: BasicTreeNodeData) => void;
     notifyDoubleClick: (e: any, node: BasicTreeNodeData) => void;
     cacheFlattenNodes: (bool: boolean) => void;
@@ -243,7 +249,6 @@ export default class TreeFoundation extends BaseFoundation<TreeAdapter, BasicTre
     _isLoadControlled(): boolean;
     _isFilterable(): boolean;
     _showFilteredOnly(): any;
-    getCopyFromState(items: string[] | string): Partial<BasicTreeInnerData>;
     getTreeNodeProps(key: string): BasicTreeNodeProps;
     notifyJsonChange(key: string[] | string, e: any): void;
     notifyMultipleChange(key: string[], e: any): void;