feat(TreeView): a prop to determine tree view nesting level

Author: ariser

src/components/TreeView/TreeView.scss

@@ -6,6 +6,8 @@
 $step-offset: 24px;
 
 .ydb-tree-view {
+    --ydb-tree-view-level: 0;
+
     $root: &;
     font-size: 13px;
     line-height: 18px;
@@ -19,6 +21,7 @@ $step-offset: 24px;
         display: flex;
         align-items: center;
         height: 24px;
+        padding-left: calc(#{$step-offset} * var(--ydb-tree-view-level));
         padding-right: 3px;
         border-bottom: 1px solid var(--yc-color-line-solid);
         cursor: pointer;

src/components/TreeView/TreeView.tsx

@@ -16,8 +16,11 @@ export interface TreeViewProps {
     onArrowClick?: () => void;
     hasArrow?: boolean;
     actions?: DropdownMenuItemMixed<any>[];
+    level?: number;
 }
 
+const TREE_LEVEL_CSS_VAR = '--ydb-tree-view-level';
+
 const b = block('ydb-tree-view');
 
 export function TreeView({
@@ -31,6 +34,7 @@ export function TreeView({
     onArrowClick,
     hasArrow = false,
     actions,
+    level,
 }: TreeViewProps) {
     const rootRef = React.useRef<HTMLDivElement>(null);
 
@@ -84,7 +88,11 @@ export function TreeView({
     }, [onClick]);
 
     return (
-        <div ref={rootRef} className={b({'no-arrow': !hasArrow})}>
+        <div
+            ref={rootRef}
+            className={b({'no-arrow': !hasArrow})}
+            style={{[TREE_LEVEL_CSS_VAR]: level} as React.CSSProperties}
+        >
             <ReactTreeView
                 collapsed={collapsed}
                 itemClassName={b('item', {active})}