Merge pull request #399 from komarovalexander/dev

add customReducer support to uncontrolled mode
komarovalexander · Apr 8, 2024 · 2d06994 · 2d06994
2 parents dad181e + 8f81ea0
commit 2d06994
Show file tree

Hide file tree

Showing 68 changed files with 404 additions and 339 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "8.11.0",
+  "version": "8.12.0",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",

diff --git a/src/Demos/AddRowDemo/AddRowDemo.tsx b/src/Demos/AddRowDemo/AddRowDemo.tsx
@@ -1,10 +1,8 @@
 import './AddRowDemo.scss';
 
-import React from 'react';
+import { DataType, Table, useTableInstance } from '../../lib';
 
-import { DataType, Table } from '../../lib';
-import { hideNewRow, saveNewRow, showNewRow } from '../../lib/actionCreators';
-import { ICellEditorProps, IHeadCellProps } from '../../lib/props';
+import React from 'react';
 
 const dataArray = Array(7).fill(undefined).map(
     (_, index) => ({
@@ -22,29 +20,27 @@ const generateNewId = () => {
     return maxValue;
 };
 
-const AddButton: React.FC<IHeadCellProps> = ({
-    dispatch,
-}) => {
+const AddButton = () => {
+    const table = useTableInstance();
     return (
         <div className='plus-cell-button'>
             <img
                 src='static/icons/plus.svg'
                 alt='Add New Row'
                 title='Add New Row'
-                onClick={() => dispatch(showNewRow())}
+                onClick={() => table.showNewRow()}
             />
         </div>
     );
 };
 
-const SaveButton: React.FC<ICellEditorProps> = ({
-    dispatch
-}) => {
+const SaveButton = () => {
+    const table = useTableInstance();
     const saveNewData = () => {
         const rowKeyValue = generateNewId();
-        dispatch(saveNewRow(rowKeyValue, {
+        table.saveNewRow(rowKeyValue, {
             validate: true
-        }));
+        });
     };
     return (
         <div className='buttons'>
@@ -60,7 +56,7 @@ const SaveButton: React.FC<ICellEditorProps> = ({
                 className='close-cell-button'
                 alt='Cancel'
                 title='Cancel'
-                onClick={() => dispatch(hideNewRow())}
+                onClick={() => table.hideNewRow()}
             />
         </div>
     );
@@ -95,14 +91,14 @@ const AddRowDemo: React.FC = () => {
                     cellEditor: {
                         content: (props) => {
                             if (props.column.key === 'addColumn'){
-                                return <SaveButton {...props}/>;
+                                return <SaveButton />;
                             }
                         }
                     },
                     headCell: {
                         content: (props) => {
                             if (props.column.key === 'addColumn'){
-                                return <AddButton {...props}/>;
+                                return <AddButton />;
                             }
                         }
                     }

diff --git a/src/Demos/AlertCellDemo/AlertCellDemo.tsx b/src/Demos/AlertCellDemo/AlertCellDemo.tsx
@@ -16,9 +16,9 @@ const dataArray = Array(10).fill(undefined).map(
 );
 
 
-const AlertCell: React.FC<ICellTextProps> = ({
+const AlertCell = ({
     rowData,
-}) => {
+}: ICellTextProps) => {
     return (
         <img
             src='static/icons/alert.svg'
@@ -29,7 +29,7 @@ const AlertCell: React.FC<ICellTextProps> = ({
     );
 };
 
-const AlertCellDemo: React.FC = () => {
+const AlertCellDemo = () => {
     return (
         <Table
             columns={[

diff --git a/src/Demos/BootstrapDemo/BootstrapDemo.tsx b/src/Demos/BootstrapDemo/BootstrapDemo.tsx
@@ -1,11 +1,10 @@
 import './BootstrapDemo.scss';
 
-import React from 'react';
-
+import { CustomLookupEditor, DateEditor, NumberEditor } from './editors';
 import { DataType, Table } from '../../lib';
 import { EditingMode, FilteringMode, SortingMode } from '../../lib/enums';
-import { ChildComponents } from '../../lib/models';
-import { CustomLookupEditor, DateEditor, NumberEditor } from './editors';
+
+import React from 'react';
 
 const dataArray = Array(119).fill(undefined).map(
     (_, index) => ({
@@ -17,54 +16,7 @@ const dataArray = Array(119).fill(undefined).map(
     }),
 );
 
-const bootstrapChildComponents: ChildComponents = {
-    table: {
-        elementAttributes: () => ({
-            className: 'table table-striped table-hover table-bordered table-primary'
-        })
-    },
-    tableHead: {
-        elementAttributes: () => ({
-            className: 'thead-dark'
-        })
-    },
-    noDataRow: {
-        content: () => 'No Data Found'
-    },
-    filterRowCell: {
-        content: (props) => {
-            const getEditor = () => {
-                switch (props.column.key){
-                case 'column1': return <CustomLookupEditor {...props}/>;
-                case 'column2': return <></>;
-                case 'column3': return <NumberEditor {...props}/>;
-                case 'column4': return <DateEditor {...props}/>;
-                }
-            }
-            return (
-                <div className='d-flex'>{getEditor()}</div>
-            )
-        }
-    },
-    cellEditorInput: {
-        elementAttributes: ({column}) => ({
-            className: column.dataType === DataType.Boolean ? 'form-check-input' : undefined
-        }),
-    },
-    pagingIndex: {
-        elementAttributes: ({ isActive }) => ({
-            className: `page-item ${(isActive ? 'active' : '')}`
-        }),
-        content: ({ text, isActive }) => <div className={`page-link ${(isActive ? 'active' : '')}`}>{text}</div>
-    },
-    pagingPages: {
-        elementAttributes: () => ({
-            className: 'pagination'
-        }),
-    }
-};
-
-const BootstrapDemo: React.FC = () => {
+const BootstrapDemo = () => {
     return (
         <div className='bootstrap-demo'>
             <Table
@@ -89,7 +41,54 @@ const BootstrapDemo: React.FC = () => {
                 rowKeyField={'id'}
                 sortingMode={SortingMode.Single}
                 filteringMode={FilteringMode.FilterRow}
-                childComponents={bootstrapChildComponents}
+
+                // bootstrap overrides for child components
+                childComponents={{
+                    table: {
+                        elementAttributes: () => ({
+                            className: 'table table-striped table-hover table-bordered table-primary'
+                        })
+                    },
+                    tableHead: {
+                        elementAttributes: () => ({
+                            className: 'thead-dark'
+                        })
+                    },
+                    noDataRow: {
+                        content: () => 'No Data Found'
+                    },
+                    filterRowCell: {
+                        content: (props) => {
+                            const getEditor = () => {
+                                switch (props.column.key){
+                                case 'column1': return <CustomLookupEditor {...props}/>;
+                                case 'column2': return <></>;
+                                case 'column3': return <NumberEditor {...props}/>;
+                                case 'column4': return <DateEditor {...props}/>;
+                                }
+                            }
+                            return (
+                                <div className='d-flex'>{getEditor()}</div>
+                            )
+                        }
+                    },
+                    cellEditorInput: {
+                        elementAttributes: ({column}) => ({
+                            className: column.dataType === DataType.Boolean ? 'form-check-input' : undefined
+                        }),
+                    },
+                    pagingIndex: {
+                        elementAttributes: ({ isActive }) => ({
+                            className: `page-item ${(isActive ? 'active' : '')}`
+                        }),
+                        content: ({ text, isActive }) => <div className={`page-link ${(isActive ? 'active' : '')}`}>{text}</div>
+                    },
+                    pagingPages: {
+                        elementAttributes: () => ({
+                            className: 'pagination'
+                        }),
+                    }
+                }}
             />
         </div>
     );

diff --git a/src/Demos/CustomAttributesDemo/CustomAttributesDemo.tsx b/src/Demos/CustomAttributesDemo/CustomAttributesDemo.tsx
@@ -1,9 +1,9 @@
-import React from 'react';
-
 import { DataType, Table } from '../../lib';
+
+import React from 'react';
 import { SortingMode } from '../../lib/enums';
 
-const dataArray: any[] = [
+const dataArray = [
     { id: 1, name: 'Mike Wazowski', score: 80, passed: true, tryDate: new Date(2021, 10, 9) },
     { id: 2, name: 'Billi Bob', score: 55, passed: false, tryDate: new Date(2021, 10, 8) },
     { id: 3, name: 'Tom Williams', score: 45, passed: false, tryDate: new Date(2019, 11, 8) },
@@ -24,7 +24,7 @@ const CustomAttributesDemo: React.FC = () => {
                 { key: 'passed', title: 'Passed', dataType: DataType.Boolean },
                 { dataType: DataType.Date, key: 'tryDate', title: 'Date', filterRowOperator: '<' },
             ]}
-            format= {({ column, value }) => {
+            format= {({ column, value, rowData }) => {
                 if (column.dataType === DataType.Date){
                     return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' });
                 }

diff --git a/src/Demos/CustomCellDemo/CustomCellDemo.tsx b/src/Demos/CustomCellDemo/CustomCellDemo.tsx
@@ -7,11 +7,11 @@ import { ICellTextProps } from '../../lib/props';
 import React from 'react';
 import dataArray from './data';
 
-const CustomCell: React.FC<ICellTextProps> = ({
+const CustomCell = ({
     column,
     rowKeyValue,
     value,
-}) => {
+}: ICellTextProps) => {
     const table = useTableInstance();
     return (
         <div onClick={() => {
@@ -22,7 +22,7 @@ const CustomCell: React.FC<ICellTextProps> = ({
     );
 };
 
-const CustomCellDemo: React.FC = () => {
+const CustomCellDemo = () => {
     return (
         <Table
             columns= {[

diff --git a/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx b/src/Demos/CustomDataRowDemo/CustomDataRowDemo.tsx
@@ -1,11 +1,10 @@
-import React from 'react';
-
 import { DataType, Table } from '../../lib';
-import defaultOptions from '../../lib/defaultOptions';
 import { SortDirection, SortingMode } from '../../lib/enums';
-import { IDataRowProps } from '../../lib/props';
 
-const dataArray: any[] = [
+import React from 'react';
+import defaultOptions from '../../lib/defaultOptions';
+
+const dataArray = [
     { id: 1, name: 'Mike Wazowski', score: 80, passed: true },
     { id: 2, name: 'Billi Bob', score: 55, passed: false },
     { id: 3, name: 'Tom Williams', score: 45, passed: false },
@@ -14,17 +13,7 @@ const dataArray: any[] = [
     { id: 6, name: 'Sunny Fox', score: 33, passed: false },
 ];
 
-const DataRow: React.FC<IDataRowProps> = ({rowData, columns}) => {
-    return (
-        <td className={defaultOptions.css.cell} colSpan={columns.length}>
-            <div>
-                {rowData.name}: {rowData.score} ({rowData.passed ? 'Passed' : 'Failed'})
-            </div>
-        </td>
-    );
-};
-
-const CustomDataRowDemo: React.FC = () => {
+const CustomDataRowDemo = () => {
     return (
         <Table
             columns= {[
@@ -42,7 +31,15 @@ const CustomDataRowDemo: React.FC = () => {
             sortingMode={SortingMode.Single}
             childComponents={{
                 dataRow: {
-                    content: (props) => <DataRow {...props}/>,
+                    content: ({rowData, columns}) => {
+                        return (
+                            <td className={defaultOptions.css.cell} colSpan={columns.length}>
+                                <div>
+                                    {rowData.name}: {rowData.score} ({rowData.passed ? 'Passed' : 'Failed'})
+                                </div>
+                            </td>
+                        );
+                    }
                 }
             }}
         />

diff --git a/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx b/src/Demos/CustomEditorDemo/CustomEditorDemo.tsx
@@ -1,9 +1,8 @@
 import './CustomEditorDemo.scss';
 
+import { DataType, Table, useTableInstance } from '../../lib';
 import React, { useState } from 'react';
 
-import { DataType, Table } from '../../lib';
-import { closeEditor, updateCellValue } from '../../lib/actionCreators';
 import { EditingMode } from '../../lib/enums';
 import { ICellEditorProps } from '../../lib/props';
 
@@ -16,11 +15,12 @@ const dataArray: any[] = [
     { id: 6, name: 'Sunny Fox', score: 33, passed: false, nextTry: new Date(2019, 10, 9, 10) },
 ];
 
-const CustomEditor: React.FC<ICellEditorProps> = ({
-    column, rowKeyValue, dispatch, value,
-}) => {
+const CustomEditor = ({
+    column, rowKeyValue, value,
+}: ICellEditorProps) => {
+    const table = useTableInstance();
     const close = () => {
-        dispatch(closeEditor(rowKeyValue, column.key));
+        table.closeEditor(rowKeyValue, column.key);
     };
     const [editorValue, setValue] = useState(value);
     return (
@@ -32,20 +32,18 @@ const CustomEditor: React.FC<ICellEditorProps> = ({
                 onChange={(event) => setValue(event.currentTarget.value)}/>
             <button className='custom-editor-button custom-editor-button-save'
                 onClick={() => {
-                    dispatch(updateCellValue(rowKeyValue, column.key, editorValue));
+                    table.updateCellValue(rowKeyValue, column.key, editorValue);
                     close();
                 }}>Save</button>
             <button className='custom-editor-button custom-editor-button-cancel' onClick={close}>Cancel</button>
         </div>
     );
 };
 
-const CustomLookupEditor: React.FC<ICellEditorProps> = ({
+const CustomLookupEditor = ({
     column, dispatch, rowKeyValue, value,
-}) => {
-    const close = () => {
-        dispatch(closeEditor(rowKeyValue, column.key));
-    };
+}: ICellEditorProps) => {
+    const table = useTableInstance();
     const [editorValue, setValue] = useState(value);
     return (
         <div>
@@ -54,8 +52,8 @@ const CustomLookupEditor: React.FC<ICellEditorProps> = ({
                 autoFocus={true}
                 defaultValue={editorValue}
                 onBlur={() => {
-                    dispatch(updateCellValue(rowKeyValue, column.key, editorValue));
-                    close();
+                    table.updateCellValue(rowKeyValue, column.key, editorValue);
+                    table.closeEditor(rowKeyValue, column.key);
                 }}
                 onChange={(event) => {
                     setValue(event.currentTarget.value === 'true');