Merge pull request #549 from illa-family/feat/tree-rollback

Feat/tree rollback
illacloud · Jul 7, 2022 · 55615f4 · 55615f4
2 parents beb33cb + 9826de3
commit 55615f4
Show file tree

Hide file tree

Showing 9 changed files with 34 additions and 433 deletions.
diff --git a/packages/tree-common/src/interface.ts b/packages/tree-common/src/interface.ts
@@ -3,8 +3,6 @@ import { TreeNode } from "./tree-node"
 
 export type TreeSize = "small" | "medium" | "large"
 
-export type TreeMode = "default" | "builder"
-
 export interface TreeDataType extends Omit<NodeProps, "children"> {
   children?: TreeDataType[]
 }
@@ -22,7 +20,6 @@ export interface NodeProps
   expanding?: boolean
   isLeaf?: boolean
   _key?: string
-  _mode?: TreeMode
   _isSelected?: boolean
   _father?: NodeProps
   _level?: number
@@ -33,7 +30,6 @@ export interface NodeProps
   _halfChecked?: boolean
   _children?: string[]
   _shouldMount?: boolean
-  _isSelectedChild?: boolean
   showLine?: boolean
   blockNode?: boolean
   draggable?: boolean
@@ -67,7 +63,6 @@ export interface TreeListProps extends HTMLAttributes<HTMLDivElement> {
   handleCheck?: (key: string, e?: Event) => void
   handleLoadMore?: (key: string) => void
   size?: TreeSize
-  _mode?: TreeMode
   blockNode?: boolean
   draggable?: boolean
   saveNodeCache?: (key: string, node: NodeInstance) => void

diff --git a/packages/tree-common/src/style.tsx b/packages/tree-common/src/style.tsx
@@ -1,6 +1,5 @@
 import { css, SerializedStyles } from "@emotion/react"
-import chroma from "chroma-js"
-import { TreeMode, TreeSize } from "./interface"
+import { TreeSize } from "./interface"
 import { globalColor, illaPrefix } from "@illa-design/theme"
 
 export const listCss = css`
@@ -20,13 +19,7 @@ export function applyNodeHeight(size: TreeSize) {
 export function applyNodeTextColor(
   disabled?: boolean,
   selected?: boolean,
-  mode?: TreeMode,
 ): SerializedStyles {
-  if (mode === "builder") {
-    return css`
-      color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
-    `
-  }
   if (disabled) {
     return css`
       color: ${globalColor(`--${illaPrefix}-grayBlue-05`)};
@@ -41,39 +34,14 @@ export function applyNodeTextColor(
   `
 }
 
-export function applyNodeContainerCss(
-  size: TreeSize,
-  mode?: TreeMode,
-  level?: number,
-  selected?: boolean,
-  isSelectedChild?: boolean,
-): SerializedStyles {
-  let modeStyle: SerializedStyles
-  switch (mode) {
-    case "builder":
-      modeStyle = css`
-        padding-left: 16px;
-        padding-right: 16px;
-        background-color: ${selected
-          ? `${globalColor(`--${illaPrefix}-techPurple-07`)}`
-          : isSelectedChild
-          ? `${chroma(globalColor(`--${illaPrefix}-techPurple-07`))
-              .alpha(0.5)
-              .hex()}`
-          : ``};
-      `
-      break
-    default:
-      modeStyle = css``
-  }
+export function applyNodeContainerCss(size: TreeSize): SerializedStyles {
   const height = applyNodeHeight(size)
   return css`
     display: flex;
     justify-content: start;
     align-items: center;
     min-height: ${height}px;
     width: 100%;
-    ${modeStyle}
   `
 }
 
@@ -85,29 +53,14 @@ export const dragContainerCss = css`
   justify-content: start;
 `
 
-export function applyNodeFoldSwitchStyle(mode?: TreeMode): SerializedStyles {
-  let modeStyle: SerializedStyles
-  switch (mode) {
-    case "builder":
-      modeStyle = css`
-        width: 8px;
-        height: 8px;
-      `
-      break
-    default:
-      modeStyle = css`
-        width: 16px;
-        height: 16px;
-      `
-  }
-  return css`
-    display: flex;
-    margin-right: 4px;
-    justify-content: center;
-    align-items: center;
-    ${modeStyle}
-  `
-}
+export const nodeFoldSwitchStyle: SerializedStyles = css`
+  display: flex;
+  margin-right: 4px;
+  justify-content: center;
+  align-items: center;
+  width: 16px;
+  height: 16px;
+`
 
 export function applyNodeFoldSwitchIconCss(
   folding?: boolean,
@@ -125,25 +78,7 @@ export function applyNodeFoldSwitchIconCss(
   `
 }
 
-export function applyLeafIconCss(
-  visible?: boolean,
-  mode?: TreeMode,
-): SerializedStyles {
-  let modeStyle: SerializedStyles
-  switch (mode) {
-    case "builder":
-      modeStyle = css`
-        display: ${visible ? "inline-flex" : "none"};
-        font-size: 8px;
-      `
-      break
-    default:
-      modeStyle = css`
-        display: inline-flex;
-        padding: 2px;
-        font-size: 12px;
-      `
-  }
+export function applyLeafIconCss(visible?: boolean): SerializedStyles {
   return css`
     display: inline-flex;
     align-items: center;
@@ -152,64 +87,27 @@ export function applyLeafIconCss(
     visibility: ${visible === true ? "visible" : "hidden"};
     margin-right: 4px;
     color: ${globalColor(`--${illaPrefix}-grayBlue-02`)};
-    ${modeStyle}
   `
 }
 
-export function applySwitchIconStyle(mode?: TreeMode): SerializedStyles {
-  let modeStyle: SerializedStyles
-  switch (mode) {
-    case "builder":
-      modeStyle = css`
-        height: 8px;
-        position: relative;
-        width: 8px;
-        ::before {
-          content: "";
-          position: absolute;
-          width: 16px;
-          height: 16px;
-          border-radius: 16px;
-          top: 50%;
-          left: 50%;
-          transform: translate(-50%, -50%);
-          background-color: transparent;
-          box-sizing: border-box;
-          display: block;
-        }
-        &:hover {
-          ::before {
-            background-color: ${globalColor(`--${illaPrefix}-grayBlue-08`)};
-          }
-        }
-      `
-      break
-    default:
-      modeStyle = css`
-        height: 16px;
-        border-radius: 16px;
-        width: 16px;
-        &:hover {
-          background-color: ${globalColor(`--${illaPrefix}-grayBlue-08`)};
-        }
-      `
+export const switchIconStyle: SerializedStyles = css`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  height: 16px;
+  border-radius: 16px;
+  width: 16px;
+  &:hover {
+    background-color: ${globalColor(`--${illaPrefix}-grayBlue-08`)};
   }
-  return css`
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    ${modeStyle}
-  `
-}
+`
 
 export function applyNodeTextContainerCss(
   size: TreeSize,
   disabled?: boolean,
   selected?: boolean,
   blockNode?: boolean,
-  mode?: TreeMode,
 ): SerializedStyles {
-  let modeStyle: SerializedStyles
   const fontSize = size === "small" ? 12 : 14
   let hoverCss = !disabled
     ? css`
@@ -224,27 +122,17 @@ export function applyNodeTextContainerCss(
           cursor: not-allowed;
         }
       `
-  switch (mode) {
-    case "builder":
-      modeStyle = css``
-      hoverCss = css``
-      break
-    default:
-      modeStyle = css`
-        padding: 0 4px;
-      `
-  }
   return css`
     font-size: ${fontSize}px;
     flex-grow: ${blockNode ? 1 : 0};
     height: 100%;
     display: inline-flex;
     justify-content: space-between;
     align-items: center;
-    ${applyNodeTextColor(disabled, selected, mode)};
+    ${applyNodeTextColor(disabled, selected)};
     position: relative;
     ${hoverCss};
-    ${modeStyle}
+    padding: 0 4px;
   `
 }
 
@@ -259,27 +147,14 @@ export const checkboxCss = css`
 
 export function applyIndentBlockCss(
   requireDivider?: boolean,
-  mode?: TreeMode,
 ): SerializedStyles {
-  let modeStyle: SerializedStyles
-  switch (mode) {
-    case "builder":
-      modeStyle = css`
-        width: 3px;
-      `
-      break
-    default:
-      modeStyle = css`
-        width: 16.5px;
-      `
-  }
   return css`
     height: 100%;
     margin-left: 8px;
     border-left: solid 1px
       ${requireDivider ? globalColor(`--${illaPrefix}-grayBlue-08`) : "white"};
     box-sizing: border-box;
-    ${modeStyle}
+    width: 16.5px;
   `
 }
 export const loadingIconCss = css`

diff --git a/packages/tree-common/src/tree-node.tsx b/packages/tree-common/src/tree-node.tsx
@@ -11,8 +11,8 @@ import {
   iconColorCss,
   indentContainerCss,
   loadingIconCss,
-  applyNodeFoldSwitchStyle,
-  applySwitchIconStyle,
+  nodeFoldSwitchStyle,
+  switchIconStyle,
 } from "./style"
 import {
   CaretDownIcon,
@@ -30,9 +30,6 @@ export const TreeNode = forwardRef<HTMLDivElement, NodeProps>((props, ref) => {
     size = "medium",
     disabled,
     _isSelected,
-    _mode = "default",
-    _level,
-    _isSelectedChild,
     isLeaf,
     expanding,
     handleExpand,
@@ -107,38 +104,19 @@ export const TreeNode = forwardRef<HTMLDivElement, NodeProps>((props, ref) => {
   }, [expanding, handleLoadMore, _children])
 
   return (
-    <div
-      css={applyNodeContainerCss(
-        size,
-        _mode,
-        _level,
-        _isSelected,
-        _isSelectedChild,
-      )}
-      onClick={(e) => {
-        if (_mode === "builder") {
-          if (_children?.length && _children?.length > 0) {
-            handleExpand?.(_key)
-          }
-          if (selectable !== false && _level === 0) {
-            handleSelect?.(_key, e?.nativeEvent)
-          }
-        }
-      }}
-      ref={ref}
-    >
+    <div css={applyNodeContainerCss(size)} ref={ref}>
       <div css={indentContainerCss}>
         {_indentArr?.map((requireDivider, index) => (
           <div
             key={_key + index}
-            css={applyIndentBlockCss(requireDivider && showLine, _mode)}
+            css={applyIndentBlockCss(requireDivider && showLine)}
           />
         ))}
       </div>
 
       {!_isLeaf ? (
         <span
-          css={applyNodeFoldSwitchStyle(_mode)}
+          css={nodeFoldSwitchStyle}
           onClick={() => {
             if (_children?.length && _children?.length > 0) {
               handleExpand && handleExpand(_key)
@@ -152,7 +130,7 @@ export const TreeNode = forwardRef<HTMLDivElement, NodeProps>((props, ref) => {
               {loadingIcon ?? <LoadingIcon spin />}
             </span>
           ) : (
-            <span css={applySwitchIconStyle(_mode)}>
+            <span css={switchIconStyle}>
               {switcherIcon ?? (
                 <span css={applyNodeFoldSwitchIconCss(_isExpanding)}>
                   <CaretDownIcon />
@@ -162,7 +140,7 @@ export const TreeNode = forwardRef<HTMLDivElement, NodeProps>((props, ref) => {
           )}
         </span>
       ) : (
-        <span css={applyLeafIconCss(showLine, _mode)}>
+        <span css={applyLeafIconCss(showLine)}>
           <LeafIcon />
         </span>
       )}
@@ -221,7 +199,6 @@ export const TreeNode = forwardRef<HTMLDivElement, NodeProps>((props, ref) => {
             disabled,
             _isSelected,
             blockNode,
-            _mode,
           )}
           onClick={(e) => {
             if (disabled || selectable === false) return

diff --git a/packages/tree-common/src/utils.ts b/packages/tree-common/src/utils.ts
@@ -1,4 +1,4 @@
-import { NodeProps, TreeDataType, TreeMode } from "./interface"
+import { NodeProps, TreeDataType } from "./interface"
 
 export const loopNode = (nodeArr?: TreeDataType[], selectedKeys?: string[]) => {
   if (!nodeArr) return []
@@ -11,7 +11,6 @@ export const loopNode = (nodeArr?: TreeDataType[], selectedKeys?: string[]) => {
         _checked: node._checked,
         _halfChecked: node._halfChecked,
         _isSelected: selectedKeys?.includes(node.key),
-        _isSelectedChild: father._isSelected || father._isSelectedChild,
         _father: father,
         _children: node.children?.map((item) => item.key),
         _fatherPath: father?._fatherPath