fix(rcTreeAdapter): fixed icon behavior and tree node styles (#39)

consta-design-system · Oct 7, 2023 · e74a9ed · e74a9ed
1 parent ca593b9
commit e74a9ed
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 40 deletions.
diff --git a/package.json b/package.json
@@ -48,7 +48,8 @@
     "Chrome >= 75"
   ],
   "peerDependencies": {
-    "@consta/uikit": ">= 3.9.3"
+    "@consta/uikit": ">= 4.31.1",
+    "@consta/icons": ">= 0.9.3"
   },
   "dependencies": {
     "rc-tree": "^5.7.12"

diff --git a/src/adapters/rcTreeAdapter/rcTreeAdapter.tsx b/src/adapters/rcTreeAdapter/rcTreeAdapter.tsx
@@ -1,4 +1,5 @@
-import { IconArrowRight } from '@consta/uikit/IconArrowRight';
+import { IconArrowDown } from '@consta/icons/IconArrowDown';
+import { IconArrowRight } from '@consta/icons/IconArrowRight';
 import React from 'react';
 
 import { cnRcTree } from '##/mixs/RcTree/RcTree';
@@ -10,7 +11,12 @@ export const rcTreeAdapter: RcTreeAdapter = (props) => {
   const { size = 's', prefixCls, switcherIcon, showIcon = false } = params;
 
   return {
-    switcherIcon: switcherIcon || <IconArrowRight size={size} />,
+    switcherIcon: (props) => {
+      const Icon = props.expanded ? IconArrowDown : IconArrowRight;
+      return typeof switcherIcon === 'function'
+        ? switcherIcon?.(props)
+        : switcherIcon || <Icon size={size} />;
+    },
     prefixCls: cnRcTree({ size }, [prefixCls]),
     showIcon,
   };

diff --git a/src/mixs/RcTree/RcTree.css b/src/mixs/RcTree/RcTree.css
@@ -104,50 +104,15 @@
   }
 
   &-treenode {
-    --rc-tree-checkbox-offset: 0;
-    --rc-tree-indent-offset: 0;
-    --rc-tree-switcher-offset: 0;
     display: inline-flex;
     max-width: 100%;
     height: var(--rc-tree-element-size);
 
-    & .rctr--RcTree-switcher:not(.rctr--RcTree-switcher-noop) {
-      --rc-tree-switcher-offset: var(--rc-tree-element-size);
-    }
-
-    & .rctr--RcTree-cheeckbox {
-      --rc-tree-checkbox-offset:
-        calc(
-          var(--rc-tree-checkbox-size) + var(--space-xs)
-        );
-    }
-
-    & .rctr--RcTree-indent {
-      &:first-child:last-child {
-        --rc-tree-indent-offset: var(--rc-tree-element-size);
-      }
-    }
-
-    /* & .rctr--RcTree-node-content-wrapper {
-      max-width: calc(
-        100% - var(--rc-tree-switcher-offset) - var(--rc-tree-checkbox-offset)
-      );
-    } */
-
-    &-disabled {
-      & .rctr--RcTree-title {
-        color: var(--color-control-typo-disable);
-      }
-
-      & .rctr--RcTree-iconEle:empty {
-        background-color: var(--color-control-typo-disable);
-      }
-    }
-
     &-selected,
     &:hover {
       & > *:not(.rctr--RcTree-indent) {
         background: var(--color-bg-ghost);
+        cursor: pointer;
         transition: background-color 0.3s;
 
         &:nth-child(2) {
@@ -161,6 +126,20 @@
         }
       }
     }
+
+    &-disabled {
+      & .rctr--RcTree-title {
+        color: var(--color-control-typo-disable);
+      }
+
+      & .rctr--RcTree-iconEle:empty {
+        background-color: var(--color-control-typo-disable);
+      }
+
+      &.rctr--RcTree-treenode > *:not(.rctr--RcTree-indent) {
+        cursor: not-allowed;
+      }
+    }
   }
 
   &-switcher {

diff --git a/src/stand/bem.ts b/src/stand/bem.ts
@@ -1,3 +1,12 @@
 import { withNaming } from '@bem-react/classname';
 
-export const cn = withNaming({ n: 'cw-story--', e: '-', m: '_' });
+const reactBemNaming = { e: '-', m: '_', v: '_' };
+
+export const cn = withNaming(reactBemNaming);
+
+export const withPrefix = (prefix: string) =>
+  withNaming({ n: `${prefix}--`, ...reactBemNaming });
+
+export const cnCanary = withPrefix('canary');
+
+export const cnDeprecated = withPrefix('deprecated');