Refactor BaseTable onSelect

agentlab · Sep 8, 2021 · 27aaf1e · 27aaf1e
1 parent e910367
commit 27aaf1e
Show file tree

Hide file tree

Showing 10 changed files with 214 additions and 140 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@agentlab/ldkg-ui-react",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "LDKG Forms UI Components",
   "license": "GPL-3.0",
   "author": "Alexey Ivanov <[email protected]>",
@@ -51,7 +51,7 @@
     "lint-staged": "lint-staged"
   },
   "peerDependencies": {
-    "@agentlab/sparql-jsld-client": ">=5.0.0-rc.11",
+    "@agentlab/sparql-jsld-client": ">=5.0.0-rc.12",
     "@ant-design/icons": ">=4.6.4",
     "@rdfjs/data-model": ">=1.3.3",
     "@tinymce/tinymce-react": ">=3.12.6",
@@ -80,7 +80,7 @@
     "uuid62": ">=1.0.1"
   },
   "dependencies": {
-    "@agentlab/sparql-jsld-client": "^5.0.0-rc.11",
+    "@agentlab/sparql-jsld-client": "^5.0.0-rc.12",
     "@ant-design/icons": "^4.6.4",
     "@tinymce/tinymce-react": "^3.12.6",
     "@types/react": "^17.0.20",
@@ -130,8 +130,8 @@
     "@testing-library/react": "^12.0.0",
     "@testing-library/user-event": "^13.2.1",
     "@types/jest": "^27.0.1",
-    "@typescript-eslint/eslint-plugin": "^4.30.0",
-    "@typescript-eslint/parser": "^4.30.0",
+    "@typescript-eslint/eslint-plugin": "^4.31.0",
+    "@typescript-eslint/parser": "^4.31.0",
     "autoprefixer": "^10.3.4",
     "babel-loader": "^8.2.2",
     "cross-env": "^7.0.3",

diff --git a/src/table/BaseTableArrayControlRenderer.tsx b/src/table/BaseTableArrayControlRenderer.tsx
@@ -11,10 +11,10 @@ import React from 'react';
 import { RankedTester, rankWith, uiTypeIs } from '../testers';
 import { withStoreToArrayProps } from '../util/ContextToProps';
 
-import { JsonSchemaTable } from './BaseTableControl';
+import { BaseTableControl } from './BaseTableControl';
 
 export const BaseTableArrayControlRenderer = (props: any) => {
-  return <JsonSchemaTable {...props} />;
+  return <BaseTableControl {...props} />;
 };
 
 export const tableArrayControlTester: RankedTester = rankWith(3, uiTypeIs('aldkg:Array'));

diff --git a/src/table/BaseTableControl.tsx b/src/table/BaseTableControl.tsx
@@ -38,7 +38,7 @@ const createTableData = (data: any) => {
   });
 };
 
-export const JsonSchemaTable: React.FC<JsonSchemaTableProps> = React.memo(
+export const BaseTableControl: React.FC<JsonSchemaTableProps> = React.memo(
   ({
     viewKind,
     viewKindElement,

diff --git a/src/table/basetable/BaseTableMenu.tsx b/src/table/basetable/BaseTableMenu.tsx
@@ -32,21 +32,21 @@ interface BaseTablrMenu {
 
 const labelsRu: JsStrObj = {
   'table.menu.createArtifactBefore': 'Создать перед',
-  'table.menu.createArtifactBefore0': 'Создать перед {{ count }} требованием',
-  'table.menu.createArtifactBefore1': 'Создать перед {{ count }} требованиями',
-  'table.menu.createArtifactBefore2': 'Создать перед {{ count }} требованиями',
+  'table.menu.createArtifactBefore0': 'Создать перед {{ count }}',
+  'table.menu.createArtifactBefore1': 'Создать перед {{ count }}',
+  'table.menu.createArtifactBefore2': 'Создать перед {{ count }}',
   'table.menu.createArtifactAfter': 'Создать после',
-  'table.menu.createArtifactAfter0': 'Создать после {{ count }} требованием',
-  'table.menu.createArtifactAfter1': 'Создать после {{ count }} требований',
-  'table.menu.createArtifactAfter2': 'Создать после {{ count }} требований',
-  'table.menu.deleteArtifacts': 'Удалить требование',
-  'table.menu.deleteArtifacts0': 'Удалить {{ count }} требование',
-  'table.menu.deleteArtifacts1': 'Удалить {{ count }} требования',
-  'table.menu.deleteArtifacts2': 'Удалить {{ count }} требований',
+  'table.menu.createArtifactAfter0': 'Создать после {{ count }}',
+  'table.menu.createArtifactAfter1': 'Создать после {{ count }}',
+  'table.menu.createArtifactAfter2': 'Создать после {{ count }}',
+  'table.menu.deleteArtifacts': 'Удалить',
+  'table.menu.deleteArtifacts0': 'Удалить {{ count }}',
+  'table.menu.deleteArtifacts1': 'Удалить {{ count }}',
+  'table.menu.deleteArtifacts2': 'Удалить {{ count }}',
   'table.menu.linkArtifacts': 'Слинковать',
-  'table.menu.linkArtifacts0': 'Слинковать {{ count }} требование',
-  'table.menu.linkArtifacts1': 'Слинковать {{ count }} требования',
-  'table.menu.linkArtifacts2': 'Слинковать {{ count }} требований',
+  'table.menu.linkArtifacts0': 'Слинковать {{ count }}',
+  'table.menu.linkArtifacts1': 'Слинковать {{ count }}',
+  'table.menu.linkArtifacts2': 'Слинковать {{ count }}',
 };
 
 export const BaseTableMenu: React.FC<BaseTablrMenu> = ({

diff --git a/src/table/basetable/ReactBaseTable.tsx b/src/table/basetable/ReactBaseTable.tsx
@@ -227,13 +227,14 @@ export const EditableTable: React.FC<EditableTableProps<any>> = React.memo(
       onClick: ({ rowData, event }: any) => {
         const idx = selection.indexOf(rowData);
         let newSelection = [...selection];
-        if (idx != -1) {
-          newSelection = newSelection.splice(idx, 1);
+        if (idx !== -1) {
+          if (newSelection.length === 1) newSelection = [];
+          else newSelection.splice(idx, 1);
         } else {
           newSelection.push(rowData);
         }
         setSelection(newSelection);
-        onSelect(rowData);
+        onSelect(newSelection);
       },
     };
 
@@ -287,19 +288,20 @@ export const EditableTable: React.FC<EditableTableProps<any>> = React.memo(
       });
     };
     const setExpanded = (expanded: boolean, id: string) => {
-      const newExpandedRowKeys = [...expandedRowKeys];
+      let newExpandedRowKeys = [...expandedRowKeys];
       if (expanded) {
         newExpandedRowKeys.push(id);
       } else {
         const idx = newExpandedRowKeys.findIndex((e: string) => e === id);
-        newExpandedRowKeys.splice(idx, 1);
+        if (newExpandedRowKeys.length === 1) newExpandedRowKeys = [];
+        else newExpandedRowKeys.splice(idx, 1);
       }
       setExpandedRowKeys(newExpandedRowKeys);
     };
     const loadMore = () => {
-      if (!limit) {
-        setLoadedAll(true);
-      } else {
+      //if (!limit) {
+      setLoadedAll(true);
+      /*} else {
         setLoadingMore(true);
         loadMoreData(data.length).then((d: any) => {
           if (d.length < limit) {
@@ -309,7 +311,7 @@ export const EditableTable: React.FC<EditableTableProps<any>> = React.memo(
           setData(newData);
           setLoadingMore(false);
         });
-      }
+      }*/
     };
     const renderOverlay = () => {
       if (loadingMore)
@@ -331,6 +333,10 @@ export const EditableTable: React.FC<EditableTableProps<any>> = React.memo(
       setData(newData);
     };
     useEffect(() => {
+      setSelectedRowKeys([]);
+      setExpandedRowKeys([]);
+      setSelection([]);
+      onSelect([]);
       const newData = checkChildren(dataSource);
       if (newData.length < limit) {
         setLoadedAll(true);

diff --git a/src/util/ContextToProps.tsx b/src/util/ContextToProps.tsx
@@ -7,7 +7,7 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
-import { cloneDeep, get, isEqual, omit } from 'lodash-es';
+import { cloneDeep, get, isArray, isEqual, omit } from 'lodash-es';
 
 import React, { useContext, useState } from 'react';
 import { Spin } from 'antd';
@@ -258,13 +258,13 @@ export const withStoreToDataControlProps = (Component: any): any =>
       //store.loadData(scope);
       return <Spin />;
     }
-    const scope = viewKindElement.resultsScope;
+    //const scope = viewKindElement.resultsScope;
     data = cloneDeep(getSnapshot(data));
     const options = viewKindElement?.options || {};
     const withConnections = options.connections;
-    const onChange = (data: any) => {
+    const onSelect = (data: any) => {
       if (data) {
-        store.setSelectedData(scope, data);
+        store.setSelectedData(collIriOverride, data);
         withConnections && store.editConn(withConnections, data);
       }
     };
@@ -297,7 +297,7 @@ export const withStoreToDataControlProps = (Component: any): any =>
         viewKindElement={viewKindElement}
         viewDescr={viewDescr}
         viewDescrElement={viewDescrElement}
-        handleChange={onChange}
+        handleChange={onSelect}
         onCreateFolder={onCreateFolder}
         getData={getData}
         onDnD={onDnD}
@@ -478,7 +478,7 @@ export const withStoreToArrayProps = (Component: any): any =>
       return <Spin />;
     }
     data = getSnapshot(data);
-    const loadMoreData = (offset: number) => {
+    const loadMoreData = async (offset: number) => {
       return data; //store.loadDataByUri(scope, offset);
     };
     const withConnections = options.connections;
@@ -495,14 +495,17 @@ export const withStoreToArrayProps = (Component: any): any =>
         applySnapshot(coll?.data, newData);
       }
     };
-    const onChange = (data: any) => {
-      /*store.setSelectedData(scope, data);
-      withConnections &&
-        options.connections.forEach((e: any) => {
-          const condition: any = {};
-          condition[e.by] = data['@id'];
-          store.editCondition(e.to, condition, scope, e.by, data);
-        });*/
+    const onSelect = (data: any) => {
+      console.log('onChange', data);
+      if (data && isArray(data)) {
+        if (data.length === 1) {
+          store.setSelectedData(collIriOverride, data[0]);
+          withConnections && store.editConn(withConnections, data[0]);
+        } else {
+          store.setSelectedData(collIriOverride, undefined);
+          withConnections && store.editConn(withConnections, undefined);
+        }
+      }
     };
     const loadExpandedData = (subject: string) => {
       //const newQuery = store.queries[viewKindElement.resultsScope];
@@ -528,7 +531,7 @@ export const withStoreToArrayProps = (Component: any): any =>
         }}
         data={data}
         options={options}
-        onSelect={onChange}
+        onSelect={onSelect}
       />
     );
   });

diff --git a/stories/TableLocalArtifacts.stories.tsx b/stories/TableLocalArtifacts.stories.tsx
@@ -16,7 +16,7 @@ import { asReduxStore, connectReduxDevtools } from 'mst-middlewares';
 import { SparqlClientImpl, MstRepository, rootModelInitialState } from '@agentlab/sparql-jsld-client';
 
 import { artifactSchema } from '../test/schema/TestSchemas';
-import { JsonSchemaTable } from '../src/table/BaseTableControl';
+import { BaseTableControl } from '../src/table/BaseTableControl';
 
 import {
   antdCells,
@@ -924,7 +924,7 @@ const fakeData = [
 
 export default {
   title: 'Table/LocalArtifacts',
-  component: JsonSchemaTable,
+  component: BaseTableControl,
 } as Meta;
 
 const Template: Story = (args: any) => {
@@ -940,7 +940,7 @@ const Template: Story = (args: any) => {
     <Provider store={store}>
       <MstContextProvider store={rootStore} renderers={antdRenderers} cells={antdCells}>
         <div style={{ height: '1000px' }}>
-          <JsonSchemaTable
+          <BaseTableControl
             schema={artifactSchema}
             path=''
             data={fakeData}