enhancement #355 - TableDrawer mobile experience (#357)

Closes #355

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"
 	},

src/__snapshots__/storybook.test.ts.snap

@@ -5097,6 +5097,7 @@ exports[`Storyshots TableDrawer Simple Drawer 1`] = `
 >
   <div
     className="container-0-2-245"
+    id="table-drawer-wrapper"
   >
     <div
       className="tableContainer-0-2-249"

src/components/Modal/Modal.tsx

@@ -40,7 +40,7 @@ const useStyles = createUseStyles({
 })
 
 interface ModalProps {
-	emitter: Emitter
+	emitter?: Emitter
 	modalConfig: ModalConfig
 	unsetModal: () => void
 }
@@ -70,9 +70,10 @@ const Modal: FC<ModalProps> = ({
 	})
 
 	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 (

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
 }
 

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 = <DataType extends DataId>({
+	containerId,
+	drawerContainerClasses = [],
+	renderDrawerCmp,
+	tableContainerClasses = [],
+	...rest
+}: TableDrawerProps<DataType>) => {
+	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 (
+		<div className={classes.container} id={containerId}>
+			<div
+				className={cn(
+					{ [classes.tableContainer]: true },
+					tableContainerClasses
+				)}
+			>
+				<Table<DataType>
+					activeRowKey={rowData.id}
+					onRowClick={onRowClick}
+					{...rest}
+				/>
+			</div>
+			{!isMobile && !isRowEmpty && (
+				<Drawer classes={[drawerClasses]} onClose={resetRowData}>
+					{renderDrawerCmp(rowData.id, rowData)}
+				</Drawer>
+			)}
+		</div>
+	)
+}

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<DataType>
 	extends Omit<TableProps<DataType>, 'activeRowKey' | 'onRowClick'> {
+	containerId?: string
 	drawerContainerClasses?: string[]
 	renderDrawerCmp: (id: Key, rowData: DataType) => ReactNode
 	tableContainerClasses?: string[]
 }
 
 export const TableDrawer = <DataType extends DataId>({
-	drawerContainerClasses = [],
-	renderDrawerCmp,
-	tableContainerClasses = [],
+	containerId = 'table-drawer-wrapper',
 	...rest
-}: TableDrawerProps<DataType>) => {
-	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 (
-		<div className={classes.container}>
-			<div
-				className={cn(
-					{ [classes.tableContainer]: true },
-					tableContainerClasses
-				)}
-			>
-				<Table<DataType>
-					activeRowKey={rowData.id}
-					onRowClick={onRowClick}
-					{...rest}
-				/>
-			</div>
-			{!isRowEmpty && (
-				<Drawer classes={[drawerClasses]} onClose={resetRowData}>
-					{renderDrawerCmp(rowData.id, rowData)}
-				</Drawer>
-			)}
-		</div>
-	)
-}
+}: TableDrawerProps<DataType>) => (
+	<ModalProvider popupContainerSelector={containerId}>
+		<TableDrawerCmp containerId={containerId} {...rest} />
+	</ModalProvider>
+)