@douyinfe/semi-ui 2.49.1 → 2.50.0-alpha.1

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+interface IndentProps {
+    prefixcls: string;
+    level: number;
+    isEnd: boolean[];
+    showLine: boolean;
+}
+declare const _default: React.MemoExoticComponent<({ prefixcls, level, isEnd, showLine }: IndentProps) => JSX.Element>;
+export default _default;

package/lib/es/tree/indent.js

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import classNames from 'classnames';
+const Indent = _ref => {
+  let {
+    prefixcls,
+    level,
+    isEnd,
+    showLine
+  } = _ref;
+  const baseClassName = `${prefixcls}-indent-unit`;
+  const list = [];
+  for (let i = 0; i < level; i += 1) {
+    list.push( /*#__PURE__*/React.createElement("span", {
+      key: i,
+      className: classNames(baseClassName, {
+        [`${baseClassName}-end`]: isEnd[i]
+      })
+    }));
+  }
+  return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
+    className: classNames(`${prefixcls}-indent`, {
+      [`${prefixcls}-indent-show-line`]: showLine
+    })
+  }, list);
+};
+export default /*#__PURE__*/React.memo(Indent);

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

@@ -39,6 +39,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         searchStyle: PropTypes.Requireable<object>;
         selectedKey: PropTypes.Requireable<string>;
         showFilteredOnly: PropTypes.Requireable<boolean>;
+        showLine: PropTypes.Requireable<boolean>;
         style: PropTypes.Requireable<object>;
         treeData: PropTypes.Requireable<PropTypes.InferProps<{
             key: PropTypes.Requireable<string>;
@@ -90,6 +91,7 @@ declare class Tree extends BaseComponent<TreeProps, TreeState> {
         motion: boolean;
         leafOnly: boolean;
         showFilteredOnly: boolean;
+        showLine: boolean;
         expandAction: boolean;
         disableStrictly: boolean;
         draggable: boolean;

package/lib/es/tree/index.js

@@ -153,12 +153,14 @@ class Tree extends BaseComponent {
         return null;
       }
       const {
-        keyMaps
+        keyMaps,
+        showLine
       } = this.props;
-      const props = _pick(treeNode, ['key', 'label', 'disabled', 'isLeaf', 'icon']);
+      const props = _pick(treeNode, ['key', 'label', 'disabled', 'isLeaf', 'icon', 'isEnd']);
       const children = data[_get(keyMaps, 'children', 'children')];
       !_isUndefined(children) && (props.children = children);
       return /*#__PURE__*/React.createElement(TreeNode, Object.assign({}, treeNodeProps, data, props, {
+        showLine: showLine,
         data: data,
         style: _isEmpty(style) ? {} : style
       }));
@@ -592,6 +594,7 @@ class Tree extends BaseComponent {
         directory,
         multiple,
         showFilteredOnly,
+        showLine,
         motion,
         expandAction,
         loadData,
@@ -602,7 +605,7 @@ class Tree extends BaseComponent {
         virtualize,
         checkRelation
       } = _a,
-      rest = __rest(_a, ["blockNode", "className", "style", "filterTreeNode", "disabled", "icon", "directory", "multiple", "showFilteredOnly", "motion", "expandAction", "loadData", "renderLabel", "draggable", "renderFullLabel", "labelEllipsis", "virtualize", "checkRelation"]);
+      rest = __rest(_a, ["blockNode", "className", "style", "filterTreeNode", "disabled", "icon", "directory", "multiple", "showFilteredOnly", "showLine", "motion", "expandAction", "loadData", "renderLabel", "draggable", "renderFullLabel", "labelEllipsis", "virtualize", "checkRelation"]);
     const wrapperCls = cls(`${prefixcls}-wrapper`, className);
     const listCls = cls(`${prefixcls}-option-list`, {
       [`${prefixcls}-option-list-block`]: blockNode
@@ -691,6 +694,7 @@ Tree.propTypes = {
   searchStyle: PropTypes.object,
   selectedKey: PropTypes.string,
   showFilteredOnly: PropTypes.bool,
+  showLine: PropTypes.bool,
   style: PropTypes.object,
   treeData: PropTypes.arrayOf(PropTypes.shape({
     key: PropTypes.string,
@@ -742,6 +746,7 @@ Tree.defaultProps = {
   motion: true,
   leafOnly: false,
   showFilteredOnly: false,
+  showLine: false,
   expandAction: false,
   disableStrictly: false,
   draggable: false,

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

@@ -90,6 +90,7 @@ export interface TreeState extends BasicTreeInnerData {
 export interface TreeNodeProps extends BasicTreeNodeProps {
     children?: TreeNodeData[];
     icon?: ReactNode;
+    isEnd?: boolean[];
 }
 export interface TreeNodeState {
     [x: string]: any;
@@ -104,6 +105,7 @@ export interface FlattenNode extends BasicFlattenNode {
     data?: BasicTreeNodeData;
     label?: ReactNode;
     parent?: null | FlattenNode;
+    isEnd?: boolean[];
 }
 export interface NodeListProps {
     [x: string]: any;

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

@@ -22,6 +22,8 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
         treeNodeFilterProp: PropTypes.Requireable<string>;
         selectedKey: PropTypes.Requireable<string>;
         motionKey: PropTypes.Requireable<NonNullable<string | string[]>>;
+        isEnd: PropTypes.Requireable<boolean[]>;
+        showLine: PropTypes.Requireable<boolean>;
     };
     static defaultProps: {
         selectedKey: string;
@@ -56,6 +58,7 @@ export default class TreeNode extends PureComponent<TreeNodeProps, TreeNodeState
     isDisabled: () => boolean;
     renderArrow(): JSX.Element;
     renderCheckbox(): JSX.Element;
+    renderSwitcher: () => JSX.Element;
     renderIcon(): any;
     renderEmptyNode(): JSX.Element;
     renderRealLabel: () => any;

package/lib/es/tree/treeNode.js

@@ -21,6 +21,7 @@ import { Checkbox } from '../checkbox';
 import TreeContext from './treeContext';
 import Spin from '../spin';
 import { getHighLightTextHTML } from '../_utils/index';
+import Indent from './indent';
 const prefixcls = cssClasses.PREFIX_OPTION;
 export default class TreeNode extends PureComponent {
   constructor(props) {
@@ -195,6 +196,18 @@ export default class TreeNode extends PureComponent {
       }
       return Boolean(treeDisabled || disabled);
     };
+    // Switcher
+    this.renderSwitcher = () => {
+      if (this.isLeaf()) {
+        // if switcherIconDom is null, no render switcher span
+        return /*#__PURE__*/React.createElement("span", {
+          className: cls(`${prefixcls}-switcher`)
+        }, /*#__PURE__*/React.createElement("span", {
+          className: `${prefixcls}-switcher-leaf-line`
+        }));
+      }
+      return null;
+    };
     this.renderRealLabel = () => {
       const {
         renderLabel
@@ -234,7 +247,8 @@ export default class TreeNode extends PureComponent {
     const showIcon = !this.isLeaf();
     const {
       loading,
-      expanded
+      expanded,
+      showLine
     } = this.props;
     if (loading) {
       return /*#__PURE__*/React.createElement(Spin, {
@@ -250,6 +264,9 @@ export default class TreeNode extends PureComponent {
         onClick: this.onExpand
       });
     }
+    if (showLine) {
+      return this.renderSwitcher();
+    }
     return /*#__PURE__*/React.createElement("span", {
       className: `${prefixcls}-empty-icon`
     });
@@ -333,9 +350,11 @@ export default class TreeNode extends PureComponent {
         filtered,
         treeNodeFilterProp,
         display,
-        style
+        style,
+        isEnd,
+        showLine
       } = _a,
-      rest = __rest(_a, ["eventKey", "expanded", "selected", "checked", "halfChecked", "loading", "active", "level", "empty", "filtered", "treeNodeFilterProp", "display", "style"]);
+      rest = __rest(_a, ["eventKey", "expanded", "selected", "checked", "halfChecked", "loading", "active", "level", "empty", "filtered", "treeNodeFilterProp", "display", "style", "isEnd", "showLine"]);
     if (empty) {
       return this.renderEmptyNode();
     }
@@ -347,6 +366,7 @@ export default class TreeNode extends PureComponent {
       dropPosition,
       labelEllipsis
     } = this.context;
+    const isEndNode = isEnd[isEnd.length - 1];
     const disabled = this.isDisabled();
     const dragOver = dragOverNodeKey === eventKey && dropPosition === 0;
     const dragOverGapTop = dragOverNodeKey === eventKey && dropPosition === -1;
@@ -364,7 +384,8 @@ export default class TreeNode extends PureComponent {
       [`${prefixcls}-fullLabel-draggable`]: !disabled && draggable && renderFullLabel,
       // When draggable + renderFullLabel is turned on, the style of dragover
       [`${prefixcls}-fullLabel-drag-over-gap-top`]: !disabled && dragOverGapTop && renderFullLabel,
-      [`${prefixcls}-fullLabel-drag-over-gap-bottom`]: !disabled && dragOverGapBottom && renderFullLabel
+      [`${prefixcls}-fullLabel-drag-over-gap-bottom`]: !disabled && dragOverGapBottom && renderFullLabel,
+      [`${prefixcls}-tree-node-last-leaf`]: isEndNode
     });
     const labelProps = {
       onClick: this.onClick,
@@ -440,7 +461,12 @@ export default class TreeNode extends PureComponent {
       onDoubleClick: this.onDoubleClick,
       ref: this.setRef,
       style: style
-    }, dragProps), this.renderArrow(), /*#__PURE__*/React.createElement("span", {
+    }, dragProps), /*#__PURE__*/React.createElement(Indent, {
+      showLine: showLine,
+      prefixcls: prefixcls,
+      level: level,
+      isEnd: isEnd
+    }), this.renderArrow(), /*#__PURE__*/React.createElement("span", {
       className: labelCls
     }, multiple ? this.renderCheckbox() : null, this.renderIcon(), /*#__PURE__*/React.createElement("span", {
       className: `${prefixcls}-label-text`
@@ -465,7 +491,9 @@ TreeNode.propTypes = {
   keyword: PropTypes.string,
   treeNodeFilterProp: PropTypes.string,
   selectedKey: PropTypes.string,
-  motionKey: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)])
+  motionKey: PropTypes.oneOfType([PropTypes.string, PropTypes.arrayOf(PropTypes.string)]),
+  isEnd: PropTypes.arrayOf(PropTypes.bool),
+  showLine: PropTypes.bool
 };
 TreeNode.defaultProps = {
   selectedKey: '',

package/lib/es/treeSelect/index.d.ts

@@ -29,7 +29,7 @@ export type RenderSelectedItemInMultiple = (treeNode: TreeNodeData, otherProps:
     content: React.ReactNode;
 };
 export type RenderSelectedItem = RenderSelectedItemInSingle | RenderSelectedItemInMultiple;
-export type OverrideCommonProps = 'renderFullLabel' | 'renderLabel' | 'defaultValue' | 'emptyContent' | 'filterTreeNode' | 'style' | 'treeData' | 'value' | 'onExpand' | 'keyMaps';
+export type OverrideCommonProps = 'renderFullLabel' | 'renderLabel' | 'defaultValue' | 'emptyContent' | 'filterTreeNode' | 'style' | 'treeData' | 'value' | 'onExpand' | 'keyMaps' | 'showLine';
 /**
 * Type definition description:
 * TreeSelectProps inherits some properties from BasicTreeSelectProps (from foundation) and TreeProps (from semi-ui-react).
@@ -134,6 +134,7 @@ declare class TreeSelect extends BaseComponent<TreeSelectProps, TreeSelectState>
         showSearchClear: PropTypes.Requireable<boolean>;
         autoAdjustOverflow: PropTypes.Requireable<boolean>;
         showFilteredOnly: PropTypes.Requireable<boolean>;
+        showLine: PropTypes.Requireable<boolean>;
         motionExpand: PropTypes.Requireable<boolean>;
         emptyContent: PropTypes.Requireable<PropTypes.ReactNodeLike>;
         keyMaps: PropTypes.Requireable<object>;

package/lib/es/treeSelect/index.js

@@ -693,10 +693,13 @@ class TreeSelect extends BaseComponent {
         key
       } = treeNode;
       const treeNodeProps = this.foundation.getTreeNodeProps(key);
+      const {
+        showLine
+      } = this.props;
       if (!treeNodeProps) {
         return null;
       }
-      const props = _pick(treeNode, ['key', 'label', 'disabled', 'isLeaf', 'icon']);
+      const props = _pick(treeNode, ['key', 'label', 'disabled', 'isLeaf', 'icon', 'isEnd']);
       const {
         keyMaps
       } = this.props;
@@ -704,7 +707,8 @@ class TreeSelect extends BaseComponent {
       !_isUndefined(children) && (props.children = children);
       return /*#__PURE__*/React.createElement(TreeNode, Object.assign({}, treeNodeProps, data, props, {
         data: data,
-        style: style
+        style: style,
+        showLine: showLine
       }));
     };
     this.itemKey = (index, data) => {
@@ -1238,6 +1242,7 @@ TreeSelect.propTypes = {
   showSearchClear: PropTypes.bool,
   autoAdjustOverflow: PropTypes.bool,
   showFilteredOnly: PropTypes.bool,
+  showLine: PropTypes.bool,
   motionExpand: PropTypes.bool,
   emptyContent: PropTypes.node,
   keyMaps: PropTypes.object,

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@douyinfe/semi-ui",
-    "version": "2.49.1",
+    "version": "2.50.0-alpha.1",
     "description": "A modern, comprehensive, flexible design system and UI library. Connect DesignOps & DevOps. Quickly build beautiful React apps. Maintained by Douyin-fe team.",
     "main": "lib/cjs/index.js",
     "module": "lib/es/index.js",
@@ -20,12 +20,12 @@
         "@dnd-kit/core": "^6.0.8",
         "@dnd-kit/sortable": "^7.0.2",
         "@dnd-kit/utilities": "^3.2.1",
-        "@douyinfe/semi-animation": "2.49.1",
-        "@douyinfe/semi-animation-react": "2.49.1",
-        "@douyinfe/semi-foundation": "2.49.1",
-        "@douyinfe/semi-icons": "2.49.1",
-        "@douyinfe/semi-illustrations": "2.49.1",
-        "@douyinfe/semi-theme-default": "2.49.1",
+        "@douyinfe/semi-animation": "2.50.0-alpha.1",
+        "@douyinfe/semi-animation-react": "2.50.0-alpha.1",
+        "@douyinfe/semi-foundation": "2.50.0-alpha.1",
+        "@douyinfe/semi-icons": "2.50.0-alpha.1",
+        "@douyinfe/semi-illustrations": "2.50.0-alpha.1",
+        "@douyinfe/semi-theme-default": "2.50.0-alpha.1",
         "async-validator": "^3.5.0",
         "classnames": "^2.2.6",
         "copy-text-to-clipboard": "^2.1.1",
@@ -75,7 +75,7 @@
     ],
     "author": "",
     "license": "MIT",
-    "gitHead": "5a1affe04071d02da9ef9dd990bb19c5d39d0462",
+    "gitHead": "72a7047b76f30f4a2aa8d82a7a75c0841c2c0d08",
     "devDependencies": {
         "@babel/plugin-proposal-decorators": "^7.15.8",
         "@babel/plugin-transform-runtime": "^7.15.8",