Merge pull request #282 from komarovalexander/dev

Add controlledPropsKeys
komarovalexander · Feb 12, 2023 · 254b091 · 254b091
2 parents 37f7a71 + 9d88eaa
commit 254b091
Show file tree

Hide file tree

Showing 79 changed files with 1,955 additions and 2,377 deletions.
diff --git a/README.md b/README.md
@@ -34,11 +34,10 @@ yarn add ka-table
 ```js
 import 'ka-table/style.css';
 
-import React, { useState } from 'react';
+import React from 'react';
 
-import { ITableProps, kaReducer, Table } from 'ka-table';
+import { Table } from 'ka-table';
 import { DataType, EditingMode, SortingMode } from 'ka-table/enums';
-import { DispatchFunc } from 'ka-table/types';
 
 const dataArray = Array(10)
   .fill(undefined)
@@ -50,29 +49,19 @@ const dataArray = Array(10)
     id: index,
   }));
 
-const tablePropsInit: ITableProps = {
-  columns: [
-    { key: 'column1', title: 'Column 1', dataType: DataType.String },
-    { key: 'column2', title: 'Column 2', dataType: DataType.String },
-    { key: 'column3', title: 'Column 3', dataType: DataType.String },
-    { key: 'column4', title: 'Column 4', dataType: DataType.String },
-  ],
-  data: dataArray,
-  editingMode: EditingMode.Cell,
-  rowKeyField: 'id',
-  sortingMode: SortingMode.Single,
-};
-
 const OverviewDemo: React.FC = () => {
-  const [tableProps, changeTableProps] = useState(tablePropsInit);
-  const dispatch: DispatchFunc = (action) => {
-    changeTableProps((prevState: ITableProps) => kaReducer(prevState, action));
-  };
-
   return (
     <Table
-      {...tableProps}
-      dispatch={dispatch}
+      columns={[
+        { key: 'column1', title: 'Column 1', dataType: DataType.String },
+        { key: 'column2', title: 'Column 2', dataType: DataType.String },
+        { key: 'column3', title: 'Column 3', dataType: DataType.String },
+        { key: 'column4', title: 'Column 4', dataType: DataType.String },
+      ]}
+      data={dataArray}
+      editingMode={EditingMode.Cell}
+      rowKeyField={'id'}
+      sortingMode={SortingMode.Single}
     />
   );
 };

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "ka-table",
-  "version": "7.8.5",
+  "version": "7.9.0",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",
@@ -21,6 +21,7 @@
     "react": "17.0.2",
     "react-csv": "^2.0.3",
     "react-dom": "17.0.2",
+    "react-query": "^3.39.3",
     "react-redux": "^7.2.0",
     "react-to-print": "^2.12.6"
   },

diff --git a/src/Demos/AddRowDemo/AddRowDemo.tsx b/src/Demos/AddRowDemo/AddRowDemo.tsx
@@ -1,12 +1,10 @@
 import './AddRowDemo.scss';
 
-import React, { useState } from 'react';
+import React from 'react';
 
-import { ITableProps, kaReducer, Table } from '../../lib';
+import { DataType, Table } from '../../lib';
 import { hideNewRow, saveNewRow, showNewRow } from '../../lib/actionCreators';
-import { DataType } from '../../lib/enums';
 import { ICellEditorProps, IHeadCellProps } from '../../lib/props';
-import { DispatchFunc } from '../../lib/types';
 
 const dataArray = Array(7).fill(undefined).map(
   (_, index) => ({
@@ -68,40 +66,31 @@ const SaveButton: React.FC<ICellEditorProps> = ({
  );
 };
 
-const tablePropsInit: ITableProps = {
-  columns: [
-    {
-      key: 'column1',
-      title: 'Column 1',
-      dataType: DataType.String
-    },
-    { key: 'column2', title: 'Column 2', dataType: DataType.String },
-    { key: 'column3', title: 'Column 3', dataType: DataType.String },
-    { key: 'column4', title: 'Column 4', dataType: DataType.String },
-    {
-      key: 'addColumn',
-      style: {width: 53}
-    },
-  ],
-  data: dataArray,
-  validation: ({ column, value }) => {
-    if (column.key === 'column1'){
-      return value ? '' : 'value must be specified';
-    }
-  },
-  rowKeyField: 'id',
-};
-
 const AddRowDemo: React.FC = () => {
-  const [tableProps, changeTableProps] = useState(tablePropsInit);
-  const dispatch: DispatchFunc = (action) => {
-    changeTableProps((prevState: ITableProps) => kaReducer(prevState, action));
-  };
-
   return (
     <div className='add-row-demo'>
       <Table
-        {...tableProps}
+        columns={[
+          {
+            key: 'column1',
+            title: 'Column 1',
+            dataType: DataType.String
+          },
+          { key: 'column2', title: 'Column 2', dataType: DataType.String },
+          { key: 'column3', title: 'Column 3', dataType: DataType.String },
+          { key: 'column4', title: 'Column 4', dataType: DataType.String },
+          {
+            key: 'addColumn',
+            style: {width: 53}
+          },
+        ]}
+        data={dataArray}
+        validation= {({ column, value }) => {
+          if (column.key === 'column1'){
+            return value ? '' : 'value must be specified';
+          }
+        }}
+        rowKeyField={'id'}
         childComponents={{
           cellEditor: {
             content: (props) => {
@@ -118,7 +107,6 @@ const AddRowDemo: React.FC = () => {
             }
           }
         }}
-        dispatch={dispatch}
       />
     </div>
   );

diff --git a/src/Demos/AlertCellDemo/AlertCellDemo.tsx b/src/Demos/AlertCellDemo/AlertCellDemo.tsx
@@ -1,11 +1,9 @@
 import './AlertCellDemo.scss';
 
-import React, { useState } from 'react';
+import React from 'react';
 
-import { ITableProps, kaReducer, Table } from '../../lib';
-import { DataType } from '../../lib/enums';
+import { DataType, Table } from '../../lib';
 import { ICellTextProps } from '../../lib/props';
-import { DispatchFunc } from '../../lib/types';
 
 const dataArray = Array(10).fill(undefined).map(
   (_, index) => ({
@@ -30,29 +28,23 @@ const AlertCell: React.FC<ICellTextProps> = ({
   );
 };
 
-const tablePropsInit: ITableProps = {
-  columns: [
-    { key: 'command1', style: { textAlign: 'center' }, width: 70 },
-    { key: 'column1-1', field: 'column1', title: 'Column 1', dataType: DataType.String },
-    { key: 'column1-2', field: 'column1', title: 'Column 1', dataType: DataType.String },
-    { key: 'column2', title: 'Column 2', dataType: DataType.String },
-    { key: 'column3', title: 'Column 3', dataType: DataType.String },
-    { key: 'column4', title: 'Column 4', dataType: DataType.String },
-  ],
-  data: dataArray,
-  rowKeyField: 'id',
-};
-
 const AlertCellDemo: React.FC = () => {
-  const [tableProps, changeTableProps] = useState(tablePropsInit);
-
-  const dispatch: DispatchFunc = (action) => {
-    changeTableProps((prevState: ITableProps) => kaReducer(prevState, action));
-  };
-
   return (
     <Table
-      {...tableProps}
+      columns={[
+        {
+        key: 'command1',
+        style: { textAlign: 'center' },
+        width: 70
+        },
+        { key: 'column1-1', field: 'column1', title: 'Column 1', dataType: DataType.String },
+        { key: 'column1-2', field: 'column1', title: 'Column 1', dataType: DataType.String },
+        { key: 'column2', title: 'Column 2', dataType: DataType.String },
+        { key: 'column3', title: 'Column 3', dataType: DataType.String },
+        { key: 'column4', title: 'Column 4', dataType: DataType.String },
+      ]}
+      data={dataArray}
+      rowKeyField={'id'}
       childComponents={{
         cellText: {
           content: (props) => {
@@ -62,7 +54,6 @@ const AlertCellDemo: React.FC = () => {
           }
         }
       }}
-      dispatch={dispatch}
     />
   );
 };

diff --git a/src/Demos/BootstrapDemo/BootstrapDemo.tsx b/src/Demos/BootstrapDemo/BootstrapDemo.tsx
@@ -1,11 +1,10 @@
 import './BootstrapDemo.scss';
 
-import React, { useState } from 'react';
+import React from 'react';
 
-import { ITableProps, kaReducer, Table } from '../../lib';
-import { DataType, EditingMode, FilteringMode, SortingMode } from '../../lib/enums';
+import { DataType, Table } from '../../lib';
+import { EditingMode, FilteringMode, SortingMode } from '../../lib/enums';
 import { ChildComponents } from '../../lib/models';
-import { DispatchFunc } from '../../lib/types';
 import { CustomLookupEditor, DateEditor, NumberEditor } from './editors';
 
 const dataArray = Array(119).fill(undefined).map(
@@ -18,30 +17,6 @@ const dataArray = Array(119).fill(undefined).map(
   }),
 );
 
-const tablePropsInit: ITableProps = {
-  columns: [
-    { key: 'column1', title: 'Column 1', dataType: DataType.Boolean, style: {minWidth: 130}   },
-    { key: 'column2', title: 'Column 2', dataType: DataType.String, style: {width: 240} },
-    { key: 'column3', title: 'Column 3', dataType: DataType.Number, filterRowOperator: '>', style: {width: 230}  },
-    { key: 'column4', title: 'Column 4', dataType: DataType.Date, filterRowOperator: '<', style: {minWidth: 100} },
-  ],
-  format: ({ column, value }) => {
-    if (column.dataType === DataType.Date){
-      return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' });
-    }
-  },
-  paging: {
-    enabled: true,
-    pageSize: 7,
-    pageIndex: 0
-  },
-  data: dataArray,
-  editingMode: EditingMode.Cell,
-  rowKeyField: 'id',
-  sortingMode: SortingMode.Single,
-  filteringMode: FilteringMode.FilterRow
-};
-
 const bootstrapChildComponents: ChildComponents = {
   table: {
     elementAttributes: () => ({
@@ -90,18 +65,31 @@ const bootstrapChildComponents: ChildComponents = {
 };
 
 const BootstrapDemo: React.FC = () => {
-  const [tableProps, changeTableProps] = useState(tablePropsInit);
-
-  const dispatch: DispatchFunc = (action) => {
-    changeTableProps((prevState: ITableProps) => kaReducer(prevState, action));
-  };
-
   return (
     <div className='bootstrap-demo'>
       <Table
-        {...tableProps}
+        columns={[
+          { key: 'column1', title: 'Column 1', dataType: DataType.Boolean, style: {minWidth: 130}   },
+          { key: 'column2', title: 'Column 2', dataType: DataType.String, style: {width: 240} },
+          { key: 'column3', title: 'Column 3', dataType: DataType.Number, filterRowOperator: '>', style: {width: 230}  },
+          { key: 'column4', title: 'Column 4', dataType: DataType.Date, filterRowOperator: '<', style: {minWidth: 100} },
+        ]}
+        format= {({ column, value }) => {
+          if (column.dataType === DataType.Date){
+            return value && value.toLocaleDateString('en', {month: '2-digit', day: '2-digit', year: 'numeric' });
+          }
+        }}
+        paging= {{
+          enabled: true,
+          pageSize: 7,
+          pageIndex: 0
+        }}
+        data={dataArray}
+        editingMode={EditingMode.Cell}
+        rowKeyField={'id'}
+        sortingMode={SortingMode.Single}
+        filteringMode={FilteringMode.FilterRow}
         childComponents={bootstrapChildComponents}
-        dispatch={dispatch}
       />
     </div>
   );

diff --git a/src/Demos/ClassComponentDemo/ClassComponentDemo.tsx b/src/Demos/ClassComponentDemo/ClassComponentDemo.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { ITableProps, kaReducer, Table } from '../../lib';
+import { Table } from '../../lib';
 import { DataType, EditingMode, SortingMode } from '../../lib/enums';
 
 const dataArray = Array(20).fill(undefined).map(
@@ -13,40 +13,22 @@ const dataArray = Array(20).fill(undefined).map(
   }),
 );
 
-const tableProps: ITableProps = {
-  columns: [
-    { key: 'column1', title: 'Column 1', dataType: DataType.String },
-    { key: 'column2', title: 'Column 2', dataType: DataType.String },
-    { key: 'column3', title: 'Column 3', dataType: DataType.String },
-    { key: 'column4', title: 'Column 4', dataType: DataType.String },
-  ],
-  data: dataArray,
-  editingMode: EditingMode.Cell,
-  rowKeyField: 'id',
-  sortingMode: SortingMode.Single,
-};
-
-class ClassComponentDemo extends React.Component<any, { tableProps: ITableProps }> {
-  constructor(props: any) {
-    super(props);
-    this.state = { tableProps };
-    this.dispatch = this.dispatch.bind(this);
-  }
-
+class ClassComponentDemo extends React.Component {
   public render() {
     return (
       <Table
-      {...this.state.tableProps}
-      dispatch={this.dispatch} />
+        columns={[
+          { key: 'column1', title: 'Column 1', dataType: DataType.String },
+          { key: 'column2', title: 'Column 2', dataType: DataType.String },
+          { key: 'column3', title: 'Column 3', dataType: DataType.String },
+          { key: 'column4', title: 'Column 4', dataType: DataType.String },
+        ]}
+        data={dataArray}
+        editingMode={EditingMode.Cell}
+        rowKeyField={'id'}
+        sortingMode={SortingMode.Single} />
     );
   }
-
-  private dispatch(action: any) {
-    this.setState((prevState) => ({
-      ...prevState,
-      ...{tableProps: kaReducer(prevState.tableProps, action)}
-    }));
-  }
 }
 
 export default ClassComponentDemo;