Merge pull request #397 from qoretechnologies/feature/tree-design-tou…

…ches Design touches on Tree component
qoretechnologies · Jul 10, 2024 · b3dcafb · b3dcafb
2 parents 542e46f + b143dec
commit b3dcafb
Show file tree

Hide file tree

Showing 4 changed files with 113 additions and 40 deletions.
diff --git a/__tests__/utils.ts b/__tests__/utils.ts
@@ -32,6 +32,33 @@ export async function _testsClickButton({
   }
 }
 
+export async function _testsClickNonButton({
+  label,
+  selector,
+  nth = 0,
+  wait = 7000,
+}: {
+  label?: string;
+  selector?: string;
+  nth?: number;
+  wait?: number;
+  parent?: string;
+}) {
+  if (!label) {
+    await waitFor(() => expect(document.querySelectorAll(selector)[nth]).toBeInTheDocument(), {
+      timeout: wait,
+    });
+    await fireEvent.click(document.querySelectorAll(selector)[nth]);
+  } else {
+    await waitFor(
+      () => expect(screen.queryAllByText(label, { selector })[nth]).toBeInTheDocument(),
+      { timeout: wait }
+    );
+
+    await fireEvent.click(screen.queryAllByText(label, { selector })[nth]);
+  }
+}
+
 export async function _testsWaitForText(text: string, selector?: string) {
   await waitFor(() => expect(screen.queryAllByText(text, { selector })[0]).toBeInTheDocument(), {
     timeout: 10000,

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.47.1",
+  "version": "0.47.2",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",

diff --git a/src/components/Tree/index.tsx b/src/components/Tree/index.tsx
@@ -11,16 +11,16 @@ import {
 import { useMemo, useState } from 'react';
 import styled from 'styled-components';
 import {
-  ReqoreHorizontalSpacer,
+  ReqoreIcon,
   ReqoreP,
   ReqorePanel,
   ReqorePopover,
   ReqoreSpan,
   useReqoreProperty,
 } from '../..';
-import { GAP_FROM_SIZE, TSizes } from '../../constants/sizes';
+import { GAP_FROM_SIZE, ICON_FROM_SIZE, TSizes } from '../../constants/sizes';
 import { IReqoreTheme } from '../../constants/theme';
-import { getTypeFromValue, parseInputValue } from '../../helpers/utils';
+import { getOneLessSize, getTypeFromValue, parseInputValue } from '../../helpers/utils';
 import { IWithReqoreSize } from '../../types/global';
 import ReqoreButton, { IReqoreButtonProps } from '../Button';
 import ReqoreControlGroup from '../ControlGroup';
@@ -49,6 +49,7 @@ export interface ITreeStyle {
   theme: IReqoreTheme;
   level?: number;
   size?: TSizes;
+  expandable?: boolean;
 }
 
 export const StyledTreeLabel = styled(ReqoreP)`
@@ -61,7 +62,8 @@ export const StyledTreeWrapper = styled.div<ITreeStyle>`
   display: flex;
   flex-flow: column;
   gap: ${({ size }) => GAP_FROM_SIZE[size]}px;
-  margin-left: ${({ level, size }) => (level ? level * GAP_FROM_SIZE[size] : 0)}px;
+  margin-left: ${({ size }) => ICON_FROM_SIZE[size]}px;
+  cursor: ${({ expandable }) => (expandable ? 'pointer' : 'default')};
 `;
 
 export const ReqoreTree = ({
@@ -126,15 +128,7 @@ export const ReqoreTree = ({
         items[stateKey] ||
         (allExpanded && items[stateKey] !== false);
 
-      const badges: IReqoreButtonProps['badge'] = [
-        {
-          label: `${isArray(_data[key]) ? '[...]' : '{...}'} ${lodashSize(_data[key])} items`,
-          minimal: true,
-          labelEffect: {
-            weight: 'thin',
-          },
-        },
-      ];
+      const badges: IReqoreButtonProps['badge'] = [];
 
       if (_showTypes) {
         badges.push({
@@ -156,7 +150,9 @@ export const ReqoreTree = ({
             icon='EditLine'
             flat
             size='tiny'
-            onClick={() => {
+            onClick={(e) => {
+              e.stopPropagation();
+
               setManagementDialog({
                 open: true,
                 parentPath: k,
@@ -193,7 +189,8 @@ export const ReqoreTree = ({
             intent='muted'
             flat
             size='tiny'
-            onClick={() => {
+            onClick={(e) => {
+              e.stopPropagation();
               let modifiedData = cloneDeep(_data);
               // Remove the item from the data
               delete modifiedData[key];
@@ -218,23 +215,33 @@ export const ReqoreTree = ({
           className='reqore-tree-item'
         >
           {isObject ? (
-            <ReqoreControlGroup size={zoomToSize[zoom]} verticalAlign='center'>
-              {level !== 1 && <ReqoreHorizontalSpacer width={5} />}
-              <ReqoreButton
-                flat
-                compact
+            <ReqoreControlGroup
+              size={zoomToSize[zoom]}
+              verticalAlign='center'
+              onClick={() => handleItemClick(stateKey, isExpandable)}
+              style={{ cursor: 'pointer' }}
+              gapSize='small'
+            >
+              <ReqoreIcon
+                size={zoomToSize[zoom]}
+                icon='ArrowDownSFill'
+                rotation={isExpandable ? 0 : -90}
+                intent='muted'
+                style={{
+                  position: 'absolute',
+                  marginLeft: `-${ICON_FROM_SIZE[zoomToSize[zoom]]}px`,
+                }}
+              />
+
+              <ReqoreP
                 className='reqore-tree-toggle'
-                icon={'ArrowDownSFill'}
-                disabled={lodashSize(_data[key]) === 0}
-                leftIconProps={{ rotation: isExpandable ? 0 : -90 }}
-                customTheme={{
-                  main: isExpandable ? 'info:lighten:10' : undefined,
+                effect={{
+                  weight: 'normal',
+                  color: 'info:lighten:5',
                 }}
-                onClick={() => handleItemClick(stateKey, isExpandable)}
-                badge={badges}
               >
-                {displayKey}
-              </ReqoreButton>
+                {displayKey}:
+              </ReqoreP>
 
               {editable && isObject ? (
                 <ReqoreControlGroup>
@@ -258,10 +265,29 @@ export const ReqoreTree = ({
               ) : null}
               {renderEditButton()}
               {renderDeleteButton()}
+              <ReqoreSpan
+                intent='muted'
+                size={getOneLessSize(zoomToSize[zoom])}
+                inline
+                onClick={() => handleItemClick(stateKey, isExpandable)}
+              >
+                {isArray(_data[key]) ? '[' : '{'}
+                {!isExpandable && (isArray(_data[key]) ? '...]' : '...}')}{' '}
+                {!isExpandable && `${lodashSize(_data[key])} items`}
+              </ReqoreSpan>
+              {_showTypes && (
+                <ReqoreSpan
+                  size={getOneLessSize(zoomToSize[zoom])}
+                  intent='muted'
+                  inline
+                  style={{ whiteSpace: 'nowrap' }}
+                >
+                  {dataType}
+                </ReqoreSpan>
+              )}
             </ReqoreControlGroup>
           ) : (
             <ReqoreControlGroup verticalAlign='flex-start'>
-              {level !== 1 && <ReqoreHorizontalSpacer width={5} />}
               <ReqorePopover
                 component={ReqoreP}
                 componentProps={{
@@ -318,11 +344,27 @@ export const ReqoreTree = ({
               )}
               {renderEditButton()}
               {renderDeleteButton()}
+              {_showTypes && (
+                <ReqoreSpan
+                  size={getOneLessSize(zoomToSize[zoom])}
+                  intent='muted'
+                  inline
+                  style={{ whiteSpace: 'nowrap' }}
+                >
+                  {dataType}
+                </ReqoreSpan>
+              )}
             </ReqoreControlGroup>
           )}
-          {isExpandable && isObject
-            ? renderTree(_data[key], stateKey, level + 1, [...path, key])
-            : null}
+          {isExpandable && isObject ? (
+            <>
+              {renderTree(_data[key], stateKey, level + 1, [...path, key])}
+
+              <ReqoreSpan intent='muted' size={getOneLessSize(zoomToSize[zoom])} inline>
+                {isArray(_data[key]) ? '] ' : '} '}
+              </ReqoreSpan>
+            </>
+          ) : null}
         </StyledTreeWrapper>
       );
     });
@@ -481,11 +523,11 @@ export const ReqoreTree = ({
         {...rest}
         actions={actions}
       >
-        <ReqoreSpan intent='muted' size='small' inline>
+        <ReqoreSpan intent='muted' size={getOneLessSize(zoomToSize[zoom])} inline>
           {isArray(data) ? '[ ' : '{ '}
         </ReqoreSpan>
         {renderTree(data)}
-        <ReqoreSpan intent='muted' size='small' inline>
+        <ReqoreSpan intent='muted' size={getOneLessSize(zoomToSize[zoom])} inline>
           {isArray(data) ? ' ]' : ' }'}
         </ReqoreSpan>
         {editable && (

diff --git a/src/stories/Tree/Tree.stories.tsx b/src/stories/Tree/Tree.stories.tsx
@@ -3,7 +3,11 @@ import { StoryObj } from '@storybook/react';
 import { fireEvent } from '@storybook/testing-library';
 import { noop } from 'lodash';
 import { useState } from 'react';
-import { _testsClickButton, _testsWaitForText } from '../../../__tests__/utils';
+import {
+  _testsClickButton,
+  _testsClickNonButton,
+  _testsWaitForText,
+} from '../../../__tests__/utils';
 import { IReqoreTreeProps, ReqoreTree } from '../../components/Tree';
 import MockObject from '../../mock/object.json';
 import { StoryMeta } from '../utils';
@@ -281,9 +285,9 @@ export const ObjectItemCanBeEdited: Story = {
     await expect(document.querySelector('.reqore-tree-save')).toBeEnabled();
     await _testsClickButton({ selector: '.reqore-tree-save' });
     await expect(document.querySelectorAll('.reqore-tree-item').length).toBe(22);
-    await _testsWaitForText('updated item key');
-    await _testsClickButton({ label: 'updated item key' });
-    await _testsClickButton({ label: '1' });
+    await _testsWaitForText('updated item key:');
+    await _testsClickNonButton({ label: 'updated item key:', selector: 'p' });
+    await _testsClickNonButton({ label: '1:', selector: 'p' });
   },
 };