From 83263756b921f73ceddd78934af55cf7fa67348c Mon Sep 17 00:00:00 2001 From: Nancy <68706811+nancy-dassana@users.noreply.github.com> Date: Thu, 1 Jul 2021 16:05:35 -0700 Subject: [PATCH] enhancement #355 - TableDrawer mobile experience (#357) Closes #355 --- package.json | 2 +- src/__snapshots__/storybook.test.ts.snap | 1 + src/components/Modal/Modal.tsx | 7 +- src/components/Modal/index.tsx | 2 +- src/components/TableDrawer/TableDrawer.tsx | 106 +++++++++++++++++++++ src/components/TableDrawer/index.tsx | 102 +++----------------- 6 files changed, 124 insertions(+), 96 deletions(-) create mode 100644 src/components/TableDrawer/TableDrawer.tsx diff --git a/package.json b/package.json index 9093fd40..b29e69b6 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@dassana-io/web-components", - "version": "0.11.6", + "version": "0.11.7", "publishConfig": { "registry": "https://npm.pkg.github.com/dassana-io" }, diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap index 7f07b964..fc8eb8f8 100644 --- a/src/__snapshots__/storybook.test.ts.snap +++ b/src/__snapshots__/storybook.test.ts.snap @@ -5097,6 +5097,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = ` >
void } @@ -70,9 +70,10 @@ const Modal: FC = ({ }) useEffect(() => { - emitter.on(EmitterEventTypes.loggedOut, unsetModal) + emitter && emitter.on(EmitterEventTypes.loggedOut, unsetModal) - return () => emitter.off(EmitterEventTypes.loggedOut, unsetModal) + return () => + emitter && emitter.off(EmitterEventTypes.loggedOut, unsetModal) }) return ( diff --git a/src/components/Modal/index.tsx b/src/components/Modal/index.tsx index 3243b840..7f07a5fd 100644 --- a/src/components/Modal/index.tsx +++ b/src/components/Modal/index.tsx @@ -8,7 +8,7 @@ import React, { FC, ReactNode } from 'react' export interface Props { children: ReactNode - emitter: Emitter + emitter?: Emitter popupContainerSelector?: string } diff --git a/src/components/TableDrawer/TableDrawer.tsx b/src/components/TableDrawer/TableDrawer.tsx new file mode 100644 index 00000000..83a9b1b3 --- /dev/null +++ b/src/components/TableDrawer/TableDrawer.tsx @@ -0,0 +1,106 @@ +import cn from 'classnames' +import { createUseStyles } from 'react-jss' +import Drawer from './Drawer' +import isEmpty from 'lodash/isEmpty' +import { TableDrawerProps } from './index' +import { useModal } from 'components/Modal' +import { useWindowSize } from 'components/Table/useWindowSize' +import { DataId, Table } from '../Table' +import React, { useState } from 'react' +import { styleguide, themes, ThemeType } from '../assets/styles' + +const { borderRadius, spacing } = styleguide +const { dark, light } = ThemeType + +const useStyles = createUseStyles({ + container: { + borderRadius, + display: 'flex', + height: '100%', + overflowX: 'auto', + width: '100%' + }, + drawer: { + flex: 1, + minWidth: 300, + overflow: 'auto', + wordBreak: 'break-word' + }, + drawerOpen: { + borderLeft: `1px solid ${themes[light].border}` + }, + table: { + padding: `${spacing.m}px ${spacing.l}px` + }, + tableContainer: { + flex: 2.5, + overflow: 'auto', + padding: spacing.m, + position: 'relative' + }, + // eslint-disable-next-line sort-keys + '@global': { + [`.${dark}`]: { + '& $drawerOpen': { + borderLeft: `1px solid ${themes[dark].border}` + } + } + } +}) + +export const TableDrawer = ({ + containerId, + drawerContainerClasses = [], + renderDrawerCmp, + tableContainerClasses = [], + ...rest +}: TableDrawerProps) => { + const [rowData, setRowData] = useState({} as DataType) + const resetRowData = () => setRowData({} as DataType) + const { isMobile } = useWindowSize() + const { setModalConfig } = useModal() + + const isRowEmpty = isEmpty(rowData) + + const classes = useStyles() + const drawerClasses = cn( + { + [classes.drawer]: true, + [classes.drawerOpen]: !isRowEmpty + }, + drawerContainerClasses + ) + + const onRowClick = (clickedRowData: DataType) => { + isMobile && + setModalConfig({ + content: renderDrawerCmp(rowData.id, clickedRowData) + }) + + return rowData.id === clickedRowData.id + ? resetRowData() + : setRowData(clickedRowData) + } + + return ( +
+
+ + activeRowKey={rowData.id} + onRowClick={onRowClick} + {...rest} + /> +
+ {!isMobile && !isRowEmpty && ( + + {renderDrawerCmp(rowData.id, rowData)} + + )} +
+ ) +} diff --git a/src/components/TableDrawer/index.tsx b/src/components/TableDrawer/index.tsx index da9f9d30..5fcaf673 100644 --- a/src/components/TableDrawer/index.tsx +++ b/src/components/TableDrawer/index.tsx @@ -1,101 +1,21 @@ -import cn from 'classnames' -import { createUseStyles } from 'react-jss' -import Drawer from './Drawer' -import isEmpty from 'lodash/isEmpty' -import { DataId, Table, TableProps } from '../Table' -import React, { Key, ReactNode, useState } from 'react' -import { styleguide, themes, ThemeType } from '../assets/styles' - -const { borderRadius, spacing } = styleguide -const { dark, light } = ThemeType - -const useStyles = createUseStyles({ - container: { - borderRadius, - display: 'flex', - height: '100%', - overflowX: 'auto', - width: '100%' - }, - drawer: { - flex: 1, - minWidth: 300, - overflow: 'auto', - wordBreak: 'break-word' - }, - drawerOpen: { - borderLeft: `1px solid ${themes[light].border}` - }, - table: { - padding: `${spacing.m}px ${spacing.l}px` - }, - tableContainer: { - flex: 2.5, - overflow: 'auto', - padding: spacing.m, - position: 'relative' - }, - // eslint-disable-next-line sort-keys - '@global': { - [`.${dark}`]: { - '& $drawerOpen': { - borderLeft: `1px solid ${themes[dark].border}` - } - } - } -}) +import { ModalProvider } from 'components/Modal' +import { TableDrawer as TableDrawerCmp } from './TableDrawer' +import { DataId, TableProps } from '../Table' +import React, { Key, ReactNode } from 'react' export interface TableDrawerProps extends Omit, 'activeRowKey' | 'onRowClick'> { + containerId?: string drawerContainerClasses?: string[] renderDrawerCmp: (id: Key, rowData: DataType) => ReactNode tableContainerClasses?: string[] } export const TableDrawer = ({ - drawerContainerClasses = [], - renderDrawerCmp, - tableContainerClasses = [], + containerId = 'table-drawer-wrapper', ...rest -}: TableDrawerProps) => { - const [rowData, setRowData] = useState({} as DataType) - const resetRowData = () => setRowData({} as DataType) - - const isRowEmpty = isEmpty(rowData) - - const classes = useStyles() - const drawerClasses = cn( - { - [classes.drawer]: true, - [classes.drawerOpen]: !isRowEmpty - }, - drawerContainerClasses - ) - - const onRowClick = (clickedRowData: DataType) => - rowData.id === clickedRowData.id - ? resetRowData() - : setRowData(clickedRowData) - - return ( -
-
- - activeRowKey={rowData.id} - onRowClick={onRowClick} - {...rest} - /> -
- {!isRowEmpty && ( - - {renderDrawerCmp(rowData.id, rowData)} - - )} -
- ) -} +}: TableDrawerProps) => ( + + + +)