From 79076712738d72d3a2e762955e49e481d19c7165 Mon Sep 17 00:00:00 2001 From: Nathan Panchout Date: Tue, 28 Jan 2025 13:47:20 +0100 Subject: [PATCH] wip --- src/frontend/apps/impress/package.json | 1 + .../src/components/common/tree/TreeView.tsx | 121 +++++-------- .../common/tree/treeview.module.scss | 20 +++ .../docs-grid/components/DocsGridItem.tsx | 12 +- .../components/LeftPanelDocContent.tsx | 170 +++++++++++++----- .../apps/impress/src/pages/docs/[id]/test.tsx | 37 ++++ src/frontend/yarn.lock | 24 ++- 7 files changed, 263 insertions(+), 122 deletions(-) create mode 100644 src/frontend/apps/impress/src/pages/docs/[id]/test.tsx diff --git a/src/frontend/apps/impress/package.json b/src/frontend/apps/impress/package.json index 51a5389bf..924138cca 100644 --- a/src/frontend/apps/impress/package.json +++ b/src/frontend/apps/impress/package.json @@ -71,6 +71,7 @@ "stylelint-config-standard": "36.0.1", "stylelint-prettier": "5.0.2", "typescript": "*", + "use-resize-observer": "^9.1.0", "webpack": "5.97.1", "workbox-webpack-plugin": "7.1.0" } diff --git a/src/frontend/apps/impress/src/components/common/tree/TreeView.tsx b/src/frontend/apps/impress/src/components/common/tree/TreeView.tsx index 9fdbd0cbe..9a7d751a7 100644 --- a/src/frontend/apps/impress/src/components/common/tree/TreeView.tsx +++ b/src/frontend/apps/impress/src/components/common/tree/TreeView.tsx @@ -1,7 +1,13 @@ /* eslint-disable jsx-a11y/no-static-element-interactions */ import { clsx } from 'clsx'; import { useEffect, useRef, useState } from 'react'; -import { MoveHandler, NodeApi, NodeRendererProps, Tree } from 'react-arborist'; +import { + CursorProps, + MoveHandler, + NodeApi, + NodeRendererProps, + Tree, +} from 'react-arborist'; import { Box } from '../../Box'; import { Icon } from '../../Icon'; @@ -21,14 +27,19 @@ const addAllChildren = ( data: TreeViewDataType[], ): TreeViewDataType[] => { return data.map((item) => { - return { ...item, children: item.children ?? [] }; + console.log('item', item); + return { + ...item, + children: item.children ? addAllChildren(item.children) : [], + }; }); }; export type TreeViewProps = { data: TreeViewDataType[]; + width?: number; allCanBeFolder?: boolean; - rootNode: BaseType; + renderNode?: (node: TreeViewDataType) => React.ReactNode; loadChildren?: (node: TreeViewDataType) => Promise[]>; afterMove?: ( @@ -38,12 +49,11 @@ export type TreeViewProps = { ) => void; }; -type ArgumentTypes = Parameters>>; - export const TreeView = ({ data: initialData, + width, allCanBeFolder, - rootNode, + renderNode, loadChildren, afterMove, @@ -52,47 +62,6 @@ export const TreeView = ({ allCanBeFolder ? addAllChildren(initialData) : initialData, ); - const onMove3 = (args: { - dragIds: string[]; - dragNodes: NodeApi>[]; - parentId: string | null; - parentNode: NodeApi> | null; - index: number; - }): { - targetNodeId: string; - mode: 'first-child' | 'last-child' | 'left' | 'right'; - } | null => { - const newData = JSON.parse(JSON.stringify(data)) as TreeViewDataType[]; - - const newIndex = args.index; - const targetNodeId = args.parentId ?? rootNode.id; - const children = args.parentId - ? (args.parentNode?.children ?? []) - : newData; - - if (newIndex === 0) { - return { targetNodeId: targetNodeId, mode: 'first-child' }; - } - if (newIndex === children.length) { - return { targetNodeId: targetNodeId, mode: 'last-child' }; - } - - const siblingIndex = newIndex - 1; - const sibling = children[siblingIndex]; - - if (sibling) { - return { targetNodeId: sibling.id, mode: 'right' }; - } - - const nextSiblingIndex = newIndex + 1; - const nextSibling = children[nextSiblingIndex]; - if (nextSibling) { - return { targetNodeId: nextSibling.id, mode: 'left' }; - } - - return null; - }; - const onMove = (args: { dragIds: string[]; dragNodes: NodeApi>[]; @@ -182,7 +151,6 @@ export const TreeView = ({ findParentAndInsert(newData); } - console.log('onMove --- ', onMove3(args)); setData(newData); }; @@ -192,30 +160,24 @@ export const TreeView = ({ }, [initialData, setData, allCanBeFolder]); return ( - - >} - > - {(props) => ( - - )} - - e - + >} + > + {(props) => ( + + )} + ); }; @@ -224,6 +186,18 @@ export type NodeProps = NodeRendererProps> & { loadChildren?: (node: TreeViewDataType) => Promise[]>; }; +function Cursor({ top, left }: CursorProps) { + return ( +
+ ); +} + export const Node = ({ renderNode, node, @@ -275,6 +249,7 @@ export const Node = ({ if (timeoutRef.current && !node.willReceiveDrop) { clearTimeout(timeoutRef.current); } + // eslint-disable-next-line react-hooks/exhaustive-deps }, [node]); return ( @@ -283,9 +258,11 @@ export const Node = ({ className={clsx(styles.node, { [styles.willReceiveDrop]: node.willReceiveDrop, [styles.selected]: node.isSelected, + toto: true, })} style={{ ...style, + width: `calc(100% + ${node.level * 20}px)`, }} ref={dragHandle} > diff --git a/src/frontend/apps/impress/src/components/common/tree/treeview.module.scss b/src/frontend/apps/impress/src/components/common/tree/treeview.module.scss index d16f236f7..16b9767b2 100644 --- a/src/frontend/apps/impress/src/components/common/tree/treeview.module.scss +++ b/src/frontend/apps/impress/src/components/common/tree/treeview.module.scss @@ -1,12 +1,23 @@ .container { + [role='treeitem'] { + display: flex; + align-items: center; + } } .node { + // padding-left: 0px !important; + // margin-left: 180px; + min-width: 300px; + height: calc(100% - 2px); + overflow: hidden; display: flex; align-items: center; + flex-wrap: nowrap; border-radius: 4px; border: 1.5px solid rgba(0, 0, 0, 0); cursor: pointer; + padding: var(--c--theme--spacings--4xs) 0; gap: var(--c--theme--spacings--3xs); @@ -16,6 +27,8 @@ &.selected { background-color: var(--c--theme--colors--greyscale-100); + + font-weight: 700; } &.willReceiveDrop { @@ -23,3 +36,10 @@ border: 1.5px solid var(--c--theme--colors--primary-500); } } + +.cursor { + position: absolute; + width: 100%; + height: 0; + border-top: 2px solid var(--c--theme--colors--primary-500); +} diff --git a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx index 4f37068db..e23c51f0d 100644 --- a/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx +++ b/src/frontend/apps/impress/src/features/docs/docs-grid/components/DocsGridItem.tsx @@ -68,10 +68,14 @@ export const DocsGridItem = ({ doc }: DocsGridItemProps) => { {showAccesses && ( [] = [ +const initialDataFlat: TreeViewDataType[] = [ { id: 'Noeud #1', name: 'Noeud #1', children: [] }, { id: 'Noeud #2', name: 'Noeud #2', children: [] }, { @@ -49,9 +50,97 @@ const initialData: TreeViewDataType[] = [ ], }, { id: 'Noeud #5', name: 'Noeud #5', children: [] }, + { id: 'Noeud #6', name: 'Noeud #6', children: [] }, + { id: 'Noeud #7', name: 'Noeud #7', children: [] }, + { + id: 'Noeud #8 fjdsk nfjksdn fjksd nfjdks nkjfsdn fjkds', + name: 'Noeud #8 hfi sfd hjk sd shjf bdsjhs fbdjhfsdbj kj bq', + children: [], + }, ]; +const initialData: TreeViewDataType[] = [ + { + id: 'Noeud #1', + name: 'Noeud #1', + children: [ + { + id: 'Noeud #2', + name: 'Noeud #2', + children: [ + { + id: 'Noeud #3', + name: 'Noeud #3', + childrenCount: 0, + children: [ + { + id: 'Noeud #4', + name: 'Noeud #4', + children: [ + { + id: 'Noeud #4.1', + name: 'Noeud #4.1', + children: [ + { + id: 'Noeud #4.2', + name: 'Noeud #4.2', + children: [ + { + id: 'Noeud #4.3', + name: 'Noeud #4.3', + children: [ + { + id: 'Noeud #5', + name: 'Noeud #5', + children: [ + { + id: 'Noeud #6', + name: 'Noeud #6', + children: [ + { + id: 'Noeud #7', + name: 'Noeud #7', + children: [ + { + id: 'Noeud #8 fjdsk nfjksdn fjksd nfjdks nkjfsdn fjkds', + name: 'Noeud #8 hfi sfd hjk sd shjf bdsjhs fbdjhfsdbj kj bq', + children: [], + }, + ], + }, + ], + }, + ], + }, + ], + }, + ], + }, + ], + }, + ], + }, + ], + }, + ], + }, + ], + }, +]; + +const ItemTextCss = css` + overflow: hidden; + text-overflow: ellipsis; + white-space: initial; + display: -webkit-box; + line-clamp: 1; + -webkit-line-clamp: 1; + -webkit-box-orient: vertical; +`; + export const LeftPanelDocContent = () => { + const { ref, width, height } = useResizeObserver(); + const { currentDoc } = useDocStore(); const { spacingsTokens } = useCunninghamTheme(); const spacing = spacingsTokens(); @@ -71,44 +160,45 @@ export const LeftPanelDocContent = () => { return newData; }; - if (!currentDoc) { - return null; - } + // if (!currentDoc) { + // return null; + // } return ( - - - - - - - - - - ( - - +
+
+
+ {width} + ( + + - {node.wesh || node.name} - - )} - /> - - + + {node.wesh || node.name || node.title} + + + )} + /> +
+
+
); }; diff --git a/src/frontend/apps/impress/src/pages/docs/[id]/test.tsx b/src/frontend/apps/impress/src/pages/docs/[id]/test.tsx new file mode 100644 index 000000000..2b3347e04 --- /dev/null +++ b/src/frontend/apps/impress/src/pages/docs/[id]/test.tsx @@ -0,0 +1,37 @@ +import { TreeViewDataType } from '@/components/common/tree/TreeView'; +import { + DataType, + LeftPanelDocContent, +} from '@/features/left-panel/components/LeftPanelDocContent'; + +const initialData: TreeViewDataType[] = [ + { id: 'Noeud #1', name: 'Noeud #1', children: [] }, + { id: 'Noeud #2', name: 'Noeud #2', children: [] }, + { + id: 'Noeud #3', + name: 'Noeud #3', + childrenCount: 0, + children: [], + }, + { + id: 'Noeud #4', + name: 'Noeud #4', + children: [ + { id: 'Noeud #4.1', name: 'Noeud #4.1' }, + { id: 'Noeud #4.2', name: 'Noeud #4.2' }, + { id: 'Noeud #4.3', name: 'Noeud #4.3' }, + ], + }, + { id: 'Noeud #5', name: 'Noeud #5', children: [] }, + { id: 'Noeud #6', name: 'Noeud #6', children: [] }, + { id: 'Noeud #7', name: 'Noeud #7', children: [] }, + { + id: 'Noeud #8 fjdsk nfjksdn fjksd nfjdks nkjfsdn fjkds', + name: 'Noeud #8 hfi sfd hjk sd shjf bdsjhs fbdjhfsdbj kj bq', + children: [], + }, +]; + +export default function Test() { + return ; +} diff --git a/src/frontend/yarn.lock b/src/frontend/yarn.lock index f0f8be8ef..66f8fa1d7 100644 --- a/src/frontend/yarn.lock +++ b/src/frontend/yarn.lock @@ -1994,6 +1994,11 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" +"@juggle/resize-observer@^3.3.1": + version "3.4.0" + resolved "https://registry.yarnpkg.com/@juggle/resize-observer/-/resize-observer-3.4.0.tgz#08d6c5e20cf7e4cc02fd181c4b0c225cd31dbb60" + integrity sha512-dfLbk+PwWvFzSxwk3n5ySL0hfBog779o8h68wK/7/APo/7cgyWp5jcXockbxdk5kFRkbeXWm4Fbi9FrdN381sA== + "@lifeomic/attempt@^3.0.2": version "3.1.0" resolved "https://registry.npmjs.org/@lifeomic/attempt/-/attempt-3.1.0.tgz" @@ -5022,7 +5027,7 @@ dependencies: "@types/node" "*" -"@types/node@*", "@types/node@22.10.3": +"@types/node@*": version "22.10.3" resolved "https://registry.yarnpkg.com/@types/node/-/node-22.10.3.tgz#cdc2a89bf6e5d5e593fad08e83f74d7348d5dd10" integrity sha512-DifAyw4BkrufCILvD3ucnuN8eydUfc/C1GlyrnI+LK6543w5/L3VeVgf05o3B4fqSXP1dKYLOZsKfutpxPzZrw== @@ -5084,7 +5089,7 @@ resolved "https://registry.npmjs.org/@types/range-parser/-/range-parser-1.2.7.tgz" integrity sha512-hKormJbkJqzQGhziax5PItDUTMAM9uE2XXQmM37dyd4hVM+5aVl7oVxMVUiVQn2oCQFN/LKCZdvSM0pFRqbSmQ== -"@types/react-dom@*", "@types/react-dom@18.3.1": +"@types/react-dom@*": version "18.3.1" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.3.1.tgz#1e4654c08a9cdcfb6594c780ac59b55aad42fe07" integrity sha512-qW1Mfv8taImTthu4KoXgDfLuk4bydU6Q/TkADnDWWHwi4NX4BR+LWfTp2sVmTqRrsHvyDDTelgelxJ+SsejKKQ== @@ -5222,7 +5227,7 @@ dependencies: "@types/yargs-parser" "*" -"@typescript-eslint/eslint-plugin@*", "@typescript-eslint/eslint-plugin@8.19.0", "@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0": +"@typescript-eslint/eslint-plugin@*", "@typescript-eslint/eslint-plugin@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0": version "8.19.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.19.0.tgz#2b1e1b791e21d5fc27ddc93884db066444f597b5" integrity sha512-NggSaEZCdSrFddbctrVjkVZvFC6KGfKfNK0CU7mNK/iKHGKbzT4Wmgm08dKpcZECBu9f5FypndoMyRHkdqfT1Q== @@ -5237,7 +5242,7 @@ natural-compare "^1.4.0" ts-api-utils "^1.3.0" -"@typescript-eslint/parser@*", "@typescript-eslint/parser@8.19.0", "@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0": +"@typescript-eslint/parser@*", "@typescript-eslint/parser@^5.4.2 || ^6.0.0 || ^7.0.0 || ^8.0.0": version "8.19.0" resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-8.19.0.tgz#f1512e6e5c491b03aabb2718b95becde22b15292" integrity sha512-6M8taKyOETY1TKHp0x8ndycipTVgmp4xtg5QpEZzXxDhNvvHOJi5rLRkLr8SK3jTgD5l4fTlvBiRdfsuWydxBw== @@ -7365,7 +7370,7 @@ eslint-visitor-keys@^4.2.0: resolved "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.0.tgz" integrity sha512-UyLnSehNt62FFhSwjZlHmeokpRK59rcz29j+F1/aDgbkbRTk7wIc9XzdoasMUbRNKDM0qQt/+BJ4BrpFeABemw== -eslint@*, eslint@8.57.0: +eslint@*: version "8.57.0" resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.57.0.tgz#c786a6fd0e0b68941aaf624596fb987089195668" integrity sha512-dZ6+mexnaTIbSBZWgou51U6OmzIhYM2VcNdtiTtI7qPNZm35Akpr0f6vtw3w1Kmn5PYo+tZVfh13WrhpS6oLqQ== @@ -13332,7 +13337,7 @@ typed-array-length@^1.0.7: possible-typed-array-names "^1.0.0" reflect.getprototypeof "^1.0.6" -typescript@*, typescript@5.7.2, typescript@^5.0.4: +typescript@*, typescript@^5.0.4: version "5.7.2" resolved "https://registry.yarnpkg.com/typescript/-/typescript-5.7.2.tgz#3169cf8c4c8a828cde53ba9ecb3d2b1d5dd67be6" integrity sha512-i5t66RHxDvVN40HfDd1PsEThGNnlMCMT3jMUuoh9/0TaqWevNontacunWyN02LA9/fIbEWlcHZcgTKb9QoaLfg== @@ -13594,6 +13599,13 @@ use-latest@^1.2.1: dependencies: use-isomorphic-layout-effect "^1.1.1" +use-resize-observer@^9.1.0: + version "9.1.0" + resolved "https://registry.yarnpkg.com/use-resize-observer/-/use-resize-observer-9.1.0.tgz#14735235cf3268569c1ea468f8a90c5789fc5c6c" + integrity sha512-R25VqO9Wb3asSD4eqtcxk8sJalvIOYBqS8MNZlpDSQ4l4xMQxC/J7Id9HoTqPq8FwULIn0PVW+OAqF2dyYbjow== + dependencies: + "@juggle/resize-observer" "^3.3.1" + use-sidecar@^1.1.2: version "1.1.3" resolved "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.3.tgz"