Merge 894aef5 into 748bd7e

komarovalexander · Jan 13, 2023 · 6b0bed9 · 6b0bed9
2 parents 748bd7e + 894aef5
commit 6b0bed9
Show file tree

Hide file tree

Showing 114 changed files with 8,771 additions and 9,714 deletions.
diff --git a/.travis.yml b/.travis.yml
@@ -1,5 +1,5 @@
 language: node_js
-node_js: 12.5.0
+node_js: 16
 cache:
   directories:
     - node_modules

diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,4 @@
+{
+  "prettier.jsxSingleQuote": true,
+  "prettier.printWidth": 140
+}
diff --git a/README.md b/README.md
@@ -31,11 +31,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).map(
   (_, index) => ({
@@ -47,29 +46,20 @@ const dataArray = Array(10).fill(undefined).map(
   }),
 );
 
-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/gulpfile.js b/gulpfile.js
@@ -4,7 +4,7 @@ var file = require('gulp-file');
 var jsonfile = require('jsonfile')
 var ghPages = require('gulp-gh-pages');
 var replace = require('gulp-replace');
-var sass = require('gulp-sass');
+const sass = require('gulp-sass')(require('sass'));
 
 gulp.task('gh-pages', function () {
     return gulp.src('./build/**/*')

diff --git a/package.json b/package.json
@@ -1,20 +1,23 @@
 {
   "name": "ka-table",
-  "version": "7.7.0",
+  "version": "7.8.0",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/overview",
   "dependencies": {
+    "@emotion/react": "^11.10.5",
+    "@emotion/styled": "^11.10.5",
+    "@mui/material": "^5.11.3",
+    "@mui/x-date-pickers": "^5.0.12",
     "@types/enzyme": "^3.10.5",
-    "@types/materialize-css": "^1.0.8",
     "@types/react": "17.0.9",
     "@types/react-csv": "^1.1.1",
     "@types/react-redux": "^7.1.7",
     "bootstrap": "^5.2.0",
+    "date-fns": "^2.29.3",
     "jspdf": "^2.3.1",
     "jspdf-autotable": "^3.5.13",
     "lorem-ipsum": "^2.0.3",
-    "materialize-css": "^1.0.0",
     "react": "17.0.2",
     "react-csv": "^2.0.3",
     "react-dom": "17.0.2",
@@ -70,17 +73,16 @@
     "gulp-file": "^0.4.0",
     "gulp-gh-pages": "^0.5.4",
     "gulp-replace": "^1.0.0",
-    "gulp-sass": "^4.1.1",
+    "gulp-sass": "^5.1.0",
     "jsonfile": "^6.0.1",
     "react-filter-control": "^2.1.0",
-    "react-ga": "^2.7.0",
-    "react-highlight": "^0.12.0",
+    "react-ga": "^3.3.1",
+    "react-highlight": "^0.14.0",
     "react-router-dom": "^5.1.2",
-    "react-scripts": "4.0.0",
+    "react-scripts": "^5.0.1",
     "sass": "^1.54.4",
     "simulant": "^0.2.2",
     "tslint": "^6.1.0",
-    "tslint-react": "^4.2.0",
     "typescript": "~3.7.2"
   },
   "jest": {

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>
   );