Extract from 876490f5701f04a19ec27f607fda4a74abdbf9cc

akeneo · Jul 16, 2024 · 9d85877 · 9d85877
1 parent 6de6fba
commit 9d85877
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 12 deletions.
diff --git a/lib/components/Tree/Tree.d.ts b/lib/components/Tree/Tree.d.ts
@@ -12,11 +12,12 @@ type TreeProps<T = string> = {
     onClose?: (value: T) => void;
     onChange?: (value: T, checked: boolean, event: SyntheticEvent) => void;
     onClick?: (value: T) => void;
+    defaultOpen?: boolean;
     _isRoot?: boolean;
     children?: ReactNode;
 };
 declare const Tree: {
-    <T>({ label, value, children, isLeaf, selected, isLoading, selectable, readOnly, onChange, onOpen, onClose, onClick, _isRoot, ...rest }: React.PropsWithChildren<TreeProps<T>>): React.JSX.Element;
+    <T>({ label, value, children, isLeaf, selected, isLoading, selectable, readOnly, onChange, onOpen, onClose, onClick, defaultOpen, _isRoot, ...rest }: React.PropsWithChildren<TreeProps<T>>): React.JSX.Element;
     displayName: string;
 };
 export { Tree };
diff --git a/lib/components/Tree/Tree.js b/lib/components/Tree/Tree.js
diff --git a/lib/components/Tree/Tree.js.map b/lib/components/Tree/Tree.js.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "akeneo-design-system",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "description": "Akeneo design system",
   "main": "lib/index.js",
   "scripts": {

diff --git a/...sual-tsx-visual-tests-renders-components-tree-default-open-correctly-1-snap.png b/...sual-tsx-visual-tests-renders-components-tree-default-open-correctly-1-snap.png
diff --git a/src/components/Tree/Tree.stories.mdx b/src/components/Tree/Tree.stories.mdx
@@ -38,6 +38,9 @@ import {Tree} from './Tree.tsx';
     onClick:{
       description: 'Triggered when the user clicks on a node. If not specified, a click opens or closes the node.'
     },
+    defaultOpen:{
+      description: 'Allow to open automatically children when present.'
+    },
     _isRoot:{
         table:{
           disable: true
@@ -171,15 +174,42 @@ The Tree component uses its value to trigger onOpen, onClose and other events. B
       return (
         <>
            <Tree {...args} label='Indeterminate' selectable={true}>
-                <Tree {...args} label='Child1' selectable={true} selected={true} />
-                <Tree {...args} label='Child2' selectable={true} />
+                <Tree {...args} label='Child1' isLeaf={true} selectable={true} selected={true} />
+                <Tree {...args} label='Child2' isLeaf={true} selectable={true} />
            </Tree>
            <Tree {...args} label='All Checked' selectable={true}>
-                <Tree {...args} label='Child1' selectable={true} selected={true} />
-                <Tree {...args} label='Child2' selectable={true} selected={true}/>
+                <Tree {...args} label='Child1' isLeaf={true} selectable={true} selected={true} />
+                <Tree {...args} label='Child2' isLeaf={true} selectable={true} selected={true}/>
            </Tree>
         </>
       );
     }}
   </Story>
 </Canvas>
+
+## Variation with open children when present
+
+<Canvas>
+  <Story name="defaultOpen">
+    {args => {
+      return (
+        <>
+           <Tree {...args} label='Parent1' defaultOpen={true}>
+               <Tree {...args} label='Child1'>
+                   <Tree {...args} label='Child1 Sub1' isLeaf={true} />
+                   <Tree {...args} label='Child1 Sub2' isLeaf={true} />
+               </Tree>
+               <Tree {...args} label='Child2' isLeaf={true} />
+          </Tree>
+          <Tree {...args} label='Parent 2' defaultOpen={true}>
+               <Tree {...args} label='Child1' isLeaf={true} />
+               <Tree {...args} label='Child2'>
+                   <Tree {...args} label='Child2 Sub1' isLeaf={true} />
+                   <Tree {...args} label='Child2 Sub2' isLeaf={true} />
+               </Tree>
+          </Tree>
+        </>
+      );
+    }}
+  </Story>
+</Canvas>
diff --git a/src/components/Tree/Tree.tsx b/src/components/Tree/Tree.tsx
@@ -141,6 +141,7 @@ type TreeProps<T = string> = {
   onClose?: (value: T) => void;
   onChange?: (value: T, checked: boolean, event: SyntheticEvent) => void;
   onClick?: (value: T) => void;
+  defaultOpen?: boolean;
   _isRoot?: boolean;
   children?: ReactNode;
 };
@@ -158,6 +159,7 @@ const Tree = <T,>({
   onOpen,
   onClose,
   onClick,
+  defaultOpen = false,
   _isRoot = true,
   ...rest
 }: PropsWithChildren<TreeProps<T>>) => {
@@ -180,7 +182,7 @@ const Tree = <T,>({
     }
   }
 
-  const [isOpen, setOpen] = React.useState<boolean>(_isRoot ? subTrees.length > 0 : false);
+  const [isOpen, setOpen] = React.useState<boolean>(_isRoot || defaultOpen ? subTrees.length > 0 : false);
 
   const handleOpen = React.useCallback(() => {
     setOpen(true);
@@ -241,6 +243,7 @@ const Tree = <T,>({
           {subTrees.map(subTree =>
             React.cloneElement(subTree, {
               key: JSON.stringify(subTree.props.value),
+              defaultOpen: defaultOpen,
               _isRoot: false,
             })
           )}