update loading demo

komarovalexander · Jan 5, 2023 · cf7d8bc · cf7d8bc
1 parent 1c609db
commit cf7d8bc
Showing 1 changed file with 27 additions and 31 deletions.
diff --git a/src/Demos/LoadingDemo/LoadingDemo.tsx b/src/Demos/LoadingDemo/LoadingDemo.tsx
@@ -1,49 +1,45 @@
-import React, { useState } from 'react';
+import { Table, useTable } from '../../lib';
 
-import { ITableProps, kaReducer, Table } from '../../lib';
-import { hideLoading, showLoading } from '../../lib/actionCreators';
 import { DataType } from '../../lib/enums';
-import { DispatchFunc } from '../../lib/types';
+import React from 'react';
 
-const dataArray = Array(10).fill(undefined).map(
-  (_, index) => ({
+const dataArray = Array(10)
+  .fill(undefined)
+  .map((_, index) => ({
     column1: `column:1 row:${index}`,
     column2: `column:2 row:${index}`,
     column3: `column:3 row:${index}`,
     column4: `column:4 row:${index}`,
     id: index,
-  }),
-);
-
-const tableOption: 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,
-  loading: {
-    enabled: true,
-    text: 'Loading data'
-  },
-  rowKeyField: 'id',
-};
+  }));
 
 const LoadingDemo: React.FC = () => {
-  const [option, changeOptions] = useState(tableOption);
-  const dispatch: DispatchFunc = (action) => {
-    changeOptions((prevState: ITableProps) => kaReducer(prevState, action));
-  };
+  const table = useTable();
 
   return (
     <>
-      <button onClick={(e) => dispatch(option.loading?.enabled ? hideLoading() : showLoading())} className='top-element'>
-        {option.loading?.enabled ? 'Hide Loading' :  'Show Loading'}
+      <button
+        onClick={(e) => {
+          table.props.loading?.enabled ? table.hideLoading() : table.showLoading();
+        }}
+        className='top-element'
+      >
+        {table.props.loading?.enabled ? 'Hide Loading' : 'Show Loading'}
       </button>
       <Table
-        {...option}
-        dispatch={dispatch}
+        table={table}
+        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}
+        loading={{
+          enabled: true,
+          text: 'Loading data',
+        }}
+        rowKeyField='id'
       />
     </>
   );