-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
fix(table): #98 Table cellEditor not works with select component
- Loading branch information
1 parent
6fefefd
commit edc266a
Showing
9 changed files
with
231 additions
and
8 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,138 @@ | ||
| import * as React from 'react'; | ||
| import { Meta, StoryObj } from '@storybook/react'; | ||
| import { Holo } from '@devoinc/holo'; | ||
|
|
||
| import { Flex, Select } from '@devoinc/genesys-ui'; | ||
|
|
||
| import { BasicTable, getSelectOptions, TColDef, TContextOptions } from '..'; | ||
| import { ROW_HEIGHT_MD } from '../constants'; | ||
|
|
||
| const meta: Meta<typeof BasicTable> = { | ||
| title: 'Components/Layout/Table/Editors/CellsEditor', | ||
| component: BasicTable, | ||
| parameters: { | ||
| layout: 'fullscreen', | ||
| }, | ||
| }; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof BasicTable>; | ||
|
|
||
| const data = Holo.of() | ||
| .addType('index', (args = {}) => args.index + 1) | ||
| .schema({ | ||
| id: 'index', | ||
| booleanValue: 'bool', | ||
| name: 'name', | ||
| age: 'age', | ||
| status: () => Holo.chance.pickone(['TODO', 'inProgress', 'test', 'done']), | ||
| custom: () => | ||
| Holo.chance.pickone(['read', 'view', 'inProgress', 'completed']), | ||
| picture: 'avatar', | ||
| }) | ||
| .repeat(9) | ||
| .generate(); | ||
|
|
||
| const colDefs: TColDef = [ | ||
| { | ||
| id: 'id', | ||
| preset: 'text', | ||
| headerName: 'ID', | ||
| }, | ||
| { | ||
| id: 'booleanValue', | ||
| headerName: 'Boolean value', | ||
| preset: 'boolean', | ||
| }, | ||
| { | ||
| id: 'name', | ||
| headerName: 'Name', | ||
| preset: 'text', | ||
| }, | ||
| { | ||
| id: 'age', | ||
| headerName: 'Age', | ||
| preset: 'number', | ||
| }, | ||
| { | ||
| id: 'status', | ||
| headerName: 'Status', | ||
| preset: 'options', | ||
| context: { | ||
| options: { | ||
| done: { colorScheme: 'success' }, | ||
| test: { colorScheme: 'warning' }, | ||
| TODO: { colorScheme: 'data-purple' }, | ||
| inProgress: { colorScheme: 'data-blue' }, | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| id: 'custom', | ||
| headerName: 'Custom', | ||
| preset: 'options', | ||
| cellEditor: ({ value, onChange, colDef }) => { | ||
| const options = (colDef?.context as TContextOptions)?.options; | ||
|
|
||
| return ( | ||
| <Select | ||
| id={'test'} | ||
| label={'custom'} | ||
| placeholder={'custom'} | ||
| menuAppendToBody | ||
| onChange={(event) => { | ||
| onChange(event.value) | ||
| }} | ||
| options={getSelectOptions(options)} | ||
| value={String(value)} | ||
| /> | ||
| ); | ||
| }, | ||
| context: { | ||
| options: { | ||
| read: { colorScheme: 'success' }, | ||
| view: { colorScheme: 'warning' }, | ||
| completed: { colorScheme: 'data-purple' }, | ||
| inProgress: { colorScheme: 'data-blue' }, | ||
| }, | ||
| }, | ||
| }, | ||
| { | ||
| id: 'picture', | ||
| headerName: 'Image (URL)', | ||
| preset: 'link', | ||
| }, | ||
| ]; | ||
|
|
||
| const BasicCmp = ({ data, colDefs }) => { | ||
| const [newData, setNewData] = React.useState(data); | ||
| return ( | ||
| <Flex flexDirection="column" gap="cmp-md" height={'auto'}> | ||
| <Flex.Item> | ||
| <BasicTable | ||
| data={newData} | ||
| colDefs={colDefs} | ||
| defaultColDef={{ | ||
| editable: true, | ||
| }} | ||
| maxHeight="80vh" | ||
| rowHeight={ROW_HEIGHT_MD} | ||
| onCellDataChange={({ colDef, value, rowIndex }) => { | ||
| setNewData( | ||
| newData.map((data, index) => { | ||
| if (index === rowIndex) { | ||
| data[colDef.id] = value; | ||
| } | ||
| return data; | ||
| }), | ||
| ); | ||
| }} | ||
| /> | ||
| </Flex.Item> | ||
| </Flex> | ||
| ); | ||
| }; | ||
|
|
||
| export const TableCellsEditor: Story = { | ||
| render: () => <BasicCmp data={data} colDefs={colDefs} />, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,57 @@ | ||
| import { Meta } from '@storybook/blocks'; | ||
|
|
||
| import * as Stories from './Table.stories'; | ||
|
|
||
| <Meta of={Stories} /> | ||
|
|
||
| # Editors Table | ||
|
|
||
| Through the editable cells we can modify the value of a specific cell. The predefined columns already come with a cell editor defined. However whether it is a predefined column or a 100% custom column **you can use a custom cell editor**. | ||
|
|
||
| Editable cells receive the following parameters: | ||
|
|
||
| ```ts | ||
| (({ value, onChange, colDef }: TCellEditor) => React.ReactNode) | ||
| ``` | ||
|
|
||
| ```ts | ||
| // example cell editor custom | ||
| ({ value, onChange, colDef }) => { | ||
| const options = (colDef?.context as TContextOptions)?.options; | ||
|
|
||
| return ( | ||
| <Select | ||
| id={'test'} | ||
| label={'custom'} | ||
| placeholder={'custom'} | ||
| menuAppendToBody | ||
| onChange={(event) => { | ||
| onChange(event.value) | ||
| }} | ||
| options={getSelectOptions(options)} | ||
| value={String(value)} | ||
| /> | ||
| ); | ||
| } | ||
| ``` | ||
|
|
||
| To “hook” to the data changes that happen in the editable cells we will pass to the table a parameter called: **onCellDataChange**. | ||
|
|
||
| ```ts | ||
| onCellDataChange?: ({ colDef, value, rowIndex }) => void; | ||
| ``` | ||
|
|
||
| This will allow us to receive the necessary information from the modified cell and then do what we need to do. For example: | ||
|
|
||
| ```ts | ||
| onCellDataChange={({ colDef, value, rowIndex }) => { | ||
| setNewData( | ||
| newData.map((data, index) => { | ||
| if (index === rowIndex) { | ||
| data[colDef.id] = value; | ||
| } | ||
| return data; | ||
| }), | ||
| ); | ||
| }} | ||
| ``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters