From 4879184a32d86a1a771fb15cef231947ccab43be Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 6 Nov 2024 17:42:59 +0300 Subject: [PATCH 1/3] feat: groups documentations and examples --- .../__stories__/DashKitGroupsShowcase.tsx | 123 +++++++++++++++++- .../DashKit/__stories__/DashKitShowcase.scss | 28 ++++ src/components/GridLayout/GridLayout.js | 1 + src/typings/config.ts | 1 + 4 files changed, 150 insertions(+), 3 deletions(-) diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx index 81f1099..e4e75f2 100644 --- a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx +++ b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx @@ -1,7 +1,19 @@ import React from 'react'; -import {ChartColumn, Copy, Heading, Pin, Sliders, TextAlignLeft, TrashBin} from '@gravity-ui/icons'; -import {Button, Icon} from '@gravity-ui/uikit'; +import { + ArrowDown, + ArrowUp, + ChartColumn, + ChevronDown, + ChevronUp, + Copy, + Heading, + Pin, + Sliders, + TextAlignLeft, + TrashBin, +} from '@gravity-ui/icons'; +import {Button, Disclosure, Icon} from '@gravity-ui/uikit'; import { ActionPanel, @@ -29,9 +41,19 @@ const b = cn('stories-dashkit-showcase'); const MAX_ROWS = 2; const GRID_COLUMNS = 36; +function arrayMove(arr: string[], oldIndex: number, newIndex: number) { + const copy = [...arr]; + const item = copy[oldIndex]; + copy[oldIndex] = copy[newIndex]; + copy[newIndex] = item; + + return copy; +} + export const DashKitGroupsShowcase: React.FC = () => { const [editMode, setEditMode] = React.useState(true); const [headerInteractions, setHeaderInteractions] = React.useState(true); + const [chartGroups, setChartGroups] = React.useState(['1_group', '2_group']); const onClick = () => { console.log('click'); @@ -134,6 +156,89 @@ export const DashKitGroupsShowcase: React.FC = () => { }; }, }, + ...chartGroups.map((id) => ({ + id, + render: (id: string, children: React.ReactNode, props: DashkitGroupRenderProps) => { + const showPlaceholder = props.items.length === 0 && !props.isDragging; + + const isMultipleGroups = chartGroups.length > 1; + const groupIndex = chartGroups.indexOf(id); + const hasNext = isMultipleGroups && groupIndex < chartGroups.length - 1; + const hasPrev = isMultipleGroups && groupIndex > 0; + + return ( + +
+ {showPlaceholder ? ( +
+ Empty group +
+ ) : ( + children + )} +
+ + + {(props) => ( +
+
+ +
+
+ + +
+
+ )} + + + ); + }, + })), { id: DEFAULT_GROUP, gridProperties: (props: ReactGridLayoutProps) => { @@ -146,7 +251,7 @@ export const DashKitGroupsShowcase: React.FC = () => { }, }, ], - [headerInteractions], + [headerInteractions, chartGroups], ); const overlayMenuItems = React.useMemo(() => { @@ -316,6 +421,18 @@ export const DashKitGroupsShowcase: React.FC = () => { ? 'Disable header interactions' : 'Enable header interactions'} + diff --git a/src/components/DashKit/__stories__/DashKitShowcase.scss b/src/components/DashKit/__stories__/DashKitShowcase.scss index 4de101f..d7b1141 100644 --- a/src/components/DashKit/__stories__/DashKitShowcase.scss +++ b/src/components/DashKit/__stories__/DashKitShowcase.scss @@ -31,4 +31,32 @@ flex: 1; } } + + &__collapse-group { + margin-bottom: 8px; + } + + &__collapse-group-placeholder { + flex: 1; + text-align: center; + } + + &__collapse-group-header { + display: flex; + } + + &__collapse-group-header-action { + flex-grow: 1; + } + + &__collapse-group-grid { + min-height: 52px; + display: flex; + flex-direction: column; + margin-top: 8px; + + > .react-grid-layout { + flex-grow: 1; + } + } } diff --git a/src/components/GridLayout/GridLayout.js b/src/components/GridLayout/GridLayout.js index 129a1b5..2f57441 100644 --- a/src/components/GridLayout/GridLayout.js +++ b/src/components/GridLayout/GridLayout.js @@ -734,6 +734,7 @@ export default class GridLayout extends React.PureComponent { items, layout, context, + isDragging: this.state.isDragging, }; return group.render(id, element, groupContext); } diff --git a/src/typings/config.ts b/src/typings/config.ts index 3b0dcb2..c5b83d6 100644 --- a/src/typings/config.ts +++ b/src/typings/config.ts @@ -36,6 +36,7 @@ export type AddNewItemOptions = SetItemOptions & { export interface DashkitGroupRenderProps { config: Config; editMode: boolean; + isDragging: boolean; items: ConfigItem[]; layout: ConfigLayout[]; context: any; From 7a3905eceaefec718a9ea3eebd0024418b3c0c77 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 6 Nov 2024 18:08:22 +0300 Subject: [PATCH 2/3] chore: add items count --- src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx index e4e75f2..95cff11 100644 --- a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx +++ b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx @@ -159,7 +159,8 @@ export const DashKitGroupsShowcase: React.FC = () => { ...chartGroups.map((id) => ({ id, render: (id: string, children: React.ReactNode, props: DashkitGroupRenderProps) => { - const showPlaceholder = props.items.length === 0 && !props.isDragging; + const itemsLength = props.items.length; + const showPlaceholder = itemsLength === 0 && !props.isDragging; const isMultipleGroups = chartGroups.length > 1; const groupIndex = chartGroups.indexOf(id); @@ -195,7 +196,7 @@ export const DashKitGroupsShowcase: React.FC = () => { - {`Group: ${id}`} + {`${id}: (${itemsLength})`}
From 836b1d91f287d39321ab1bbaa160130a4bf3da67 Mon Sep 17 00:00:00 2001 From: Serge Pavlyuk Date: Wed, 6 Nov 2024 18:13:16 +0300 Subject: [PATCH 3/3] fix: add keep mounted prop for disclosure --- src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx index 95cff11..3084deb 100644 --- a/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx +++ b/src/components/DashKit/__stories__/DashKitGroupsShowcase.tsx @@ -172,6 +172,7 @@ export const DashKitGroupsShowcase: React.FC = () => { className={b('collapse-group')} key={`key_${id}`} defaultExpanded={true} + keepMounted={true} >