feat - Add Table row click handler (#131)

dassana-io · Oct 29, 2020 · dc1adeb · dc1adeb
1 parent 7399654
commit dc1adeb
Show file tree

Hide file tree

Showing 13 changed files with 713 additions and 441 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
 	"name": "@dassana-io/web-components",
-	"version": "0.6.2",
+	"version": "0.6.3",
 	"publishConfig": {
 		"registry": "https://npm.pkg.github.com/dassana-io"
 	},
@@ -11,7 +11,7 @@
 	},
 	"dependencies": {
 		"@ant-design/icons": "^4.2.2",
-		"@storybook/addon-cssresources": "^6.0.26",
+		"@storybook/addon-cssresources": "^6.0.27",
 		"@testing-library/jest-dom": "^4.2.4",
 		"@testing-library/react": "^9.5.0",
 		"@testing-library/react-hooks": "^3.4.2",
@@ -76,14 +76,14 @@
 		"@rollup/plugin-commonjs": "^15.1.0",
 		"@rollup/plugin-image": "^2.0.5",
 		"@rollup/plugin-node-resolve": "^9.0.0",
-		"@storybook/addon-actions": "^6.0.26",
-		"@storybook/addon-essentials": "^6.0.26",
-		"@storybook/addon-links": "^6.0.26",
-		"@storybook/addon-storyshots": "^6.0.26",
-		"@storybook/addons": "^6.0.26",
+		"@storybook/addon-actions": "^6.0.27",
+		"@storybook/addon-essentials": "^6.0.27",
+		"@storybook/addon-links": "^6.0.27",
+		"@storybook/addon-storyshots": "^6.0.27",
+		"@storybook/addons": "^6.0.27",
 		"@storybook/preset-create-react-app": "^3.1.4",
-		"@storybook/react": "^6.0.26",
-		"@storybook/theming": "^6.0.26",
+		"@storybook/react": "^6.0.27",
+		"@storybook/theming": "^6.0.27",
 		"@svgr/rollup": "^5.4.0",
 		"@types/bytes": "^3.1.0",
 		"@types/classnames": "^2.2.10",

diff --git a/src/__snapshots__/storybook.test.ts.snap b/src/__snapshots__/storybook.test.ts.snap
@@ -211,68 +211,56 @@ exports[`Storyshots Input Default 1`] = `
 <div
   className="light storyWrapper-0-2-2"
 >
-  <div
-    className="container-0-2-5 container-d0-0-2-8"
-  >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
-  </div>
+  <input
+    className="ant-input container-0-2-5 container-d0-0-2-8"
+    data-test="input"
+    disabled={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder=""
+    type="text"
+    value=""
+  />
 </div>
 `;
 
 exports[`Storyshots Input Error 1`] = `
 <div
   className="light storyWrapper-0-2-2"
 >
-  <div
-    className="container-0-2-5 container-d5-0-2-14"
-  >
-    <input
-      className="ant-input error-0-2-6"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
-  </div>
+  <input
+    className="ant-input container-0-2-5 container-d5-0-2-14 error-0-2-6"
+    data-test="input"
+    disabled={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder=""
+    type="text"
+    value=""
+  />
 </div>
 `;
 
 exports[`Storyshots Input Full Width 1`] = `
 <div
   className="light storyWrapper-0-2-2"
 >
-  <div
-    className="container-0-2-5 container-d4-0-2-13"
-  >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder=""
-      type="text"
-      value=""
-    />
-  </div>
+  <input
+    className="ant-input container-0-2-5 container-d4-0-2-13"
+    data-test="input"
+    disabled={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder=""
+    type="text"
+    value=""
+  />
 </div>
 `;
 
@@ -300,22 +288,18 @@ exports[`Storyshots Input Placeholder 1`] = `
 <div
   className="light storyWrapper-0-2-2"
 >
-  <div
-    className="container-0-2-5 container-d1-0-2-9"
-  >
-    <input
-      className="ant-input"
-      data-test="input"
-      disabled={false}
-      onBlur={[Function]}
-      onChange={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      placeholder="Search..."
-      type="text"
-      value=""
-    />
-  </div>
+  <input
+    className="ant-input container-0-2-5 container-d1-0-2-9"
+    data-test="input"
+    disabled={false}
+    onBlur={[Function]}
+    onChange={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    placeholder="Search..."
+    type="text"
+    value=""
+  />
 </div>
 `;
 

diff --git a/src/components/Input/index.tsx b/src/components/Input/index.tsx
@@ -90,15 +90,13 @@ export const Input: FC<InputProps> = (props: InputProps) => {
 	return loading ? (
 		<InputSkeleton {...props} />
 	) : (
-		<div className={componentClasses.container}>
-			<AntDInput
-				className={inputClasses}
-				disabled={disabled}
-				placeholder={placeholder}
-				type={type}
-				{...controlledCmpProps}
-				{...getDataTestAttributeProp('input', dataTag)}
-			/>
-		</div>
+		<AntDInput
+			className={cn(componentClasses.container, inputClasses)}
+			disabled={disabled}
+			placeholder={placeholder}
+			type={type}
+			{...controlledCmpProps}
+			{...getDataTestAttributeProp('input', dataTag)}
+		/>
 	)
 }
diff --git a/src/components/Table/Table.stories.mdx b/src/components/Table/Table.stories.mdx
@@ -100,14 +100,29 @@ The rendered table generated by the above code will look like:
 
 <ArgsTable story='Simple' />
 
-## Searching
+## Searching and Search Props
 
 The Table has a global search field that uses [Fuse.js](https://fusejs.io/) to fuzzy search the table. Both formatted and unformatted number data type can be searched. Searching is also enabled by default. To disable search, pass it as a prop to the table. E.g.
 
 ```ts
 const tableProps = TableProps<Person> = { columns, data, search: false }
 ```
 
+The search bar is rendered on the left without a placeholder by default. You can change it by passing the following props to the table:
+
+```ts
+const tableProps: TableProps<Person> = {
+	columns,
+	data,
+	searchProps: {
+		placeholder: 'Search...',
+		placement: 'right'
+	}
+}
+```
+
+Take a look at the [Missing Cells Table](?path=/docs/table--missing-cells#missing-data-cells) for an example.
+
 ## Sorting
 
 Each column is sortable by default. To disable sort on a specific column, add `sort: false` to the column configuration object. E.g.
@@ -235,6 +250,7 @@ import {
 	ColumnFormats,
 	ColumnType,
 	ColumnTypes,
+	DateDisplayFormat,
 	Table,
 	TableProps
 } from '@dassana-io/web-components'
@@ -244,6 +260,7 @@ export interface File {
 	data_size: number
 	created_at: number
 	updated_at?: number // Pass an optional type if there will be missing data
+	last_opened?: number
 }
 
 const { number, string } = ColumnTypes
@@ -261,17 +278,24 @@ const columns: ColumnType[] = [
 		title: 'Size',
 		type: number
 	},
+	{
+		dataIndex: 'last_opened',
+		format: date,
+		renderProps: { displayFormat: DateDisplayFormat.fromNow }, // display date as time from now. E.g. 3 months ago
+		title: 'Last Opened',
+		type: number
+	},
 	{
 		dataIndex: 'created_at',
 		format: date,
-		renderProps: { displayFormat: 'MMM D, YYYY h:mm A' }, // moment.js display format
+		renderProps: { displayFormat: dateFormat0 }, // moment.js display format
 		title: 'Uploaded Time',
 		type: number
 	},
 	{
 		dataIndex: 'updated_at',
 		format: date,
-		renderProps: { displayFormat: 'lll' }, // moment.js format shortcuts also work
+		renderProps: { displayFormat: dateFormat1 }, // moment.js format shortcuts also work
 		title: 'Last Updated Time',
 		type: number
 	}
@@ -281,12 +305,14 @@ const data: File[] = [
 	{
 		created_at: 1598400668681,
 		data_size: 1048576,
-		file_name: 'IMG_4542.jpeg'
+		file_name: 'IMG_4542.jpeg',
+		last_opened: 1598400668681
 	},
 	{
 		created_at: 1582330066861,
 		data_size: 1998576,
-		file_name: 'test_123.png'
+		file_name: 'test_123.png',
+		last_opened: 1603779899922
 	},
 	{
 		created_at: 1553223066861,
@@ -307,7 +333,10 @@ const data: File[] = [
 	}
 ]
 
-const tableProps: TableProps<File> = { columns, data }
+const tableProps: TableProps<File> = {
+	columns,
+	data
+}
 const FilesTable = () => <Table<File> {...tableProps} />
 ```
 

diff --git a/src/components/Table/Table.stories.tsx b/src/components/Table/Table.stories.tsx
@@ -1,3 +1,4 @@
+import { action } from '@storybook/addon-actions'
 import React from 'react'
 import { Story } from '@storybook/react/types-6-0'
 import { Table, TableProps } from '.'
@@ -6,6 +7,38 @@ import tableData1, { File } from './fixtures/1_sample_data'
 import tableData2, { Client } from './fixtures/2_sample_data'
 import tableData3, { Client1 } from './fixtures/3_sample_data'
 
+const commonArgTypes = {
+	dataTag: {
+		control: { disable: true }
+	},
+	onRowClick: {
+		control: { disable: true },
+		defaultValue: action('onRowClick'),
+		description: 'Optional callback that runs when a table row is clicked.',
+		table: {
+			type: {
+				detail: `
+        interface OnRowClick<DataType> {
+  (data: DataType, rowIndex: number): void
+}`
+			}
+		}
+	},
+	searchProps: {
+		control: 'object',
+		defaultValue: { placeholder: '', placement: 'left' }, // This isn't the default, it's a placeholder for storybook
+		table: {
+			type: {
+				detail: `
+        interface SearchProps {
+  placeholder?: string
+  placement?: 'left' | 'right'
+}`
+			}
+		}
+	}
+}
+
 const SimpleTemplate: Story<TableProps<Person>> = args => (
 	<Table<Person> {...args} />
 )
@@ -14,6 +47,7 @@ Simple.args = {
 	...tableData0
 }
 Simple.argTypes = {
+	...commonArgTypes,
 	columns: {
 		description:
 			'Array of column objects. Click to view a simplified partial ColumnType interface used for this simple table.',
@@ -52,6 +86,7 @@ Number.args = {
 	...tableData1
 }
 Number.argTypes = {
+	...commonArgTypes,
 	columns: {
 		description:
 			/* eslint-disable quotes */
@@ -114,6 +149,7 @@ Mixed.args = {
 	...tableData2
 }
 Mixed.argTypes = {
+	...commonArgTypes,
 	columns: {
 		control: { disable: true },
 		description: `Array of column objects. [Click to view a partial ColumnType interface.](/?path=/docs/table--simple#representing-columntype-with-typescript-1)`
@@ -146,6 +182,7 @@ MissingCells.args = {
 	...tableData3
 }
 MissingCells.argTypes = {
+	...commonArgTypes,
 	columns: {
 		control: { disable: true },
 		description: `Array of column objects. [Click to view a partial ColumnType interface.](/?path=/docs/table--simple#representing-columntype-with-typescript-1)`