[refactor] Tree & Tabs to MST

agentlab · Oct 18, 2021 · c051783 · c051783
1 parent 0fd7704
commit c051783
Show file tree

Hide file tree

Showing 4 changed files with 70 additions and 77 deletions.
diff --git a/src/data-controls/DataControl.tsx b/src/data-controls/DataControl.tsx
@@ -68,10 +68,10 @@ export const AntdDataLayout: React.FC<any> = React.memo(
       />
     );
   },
-  (prev, next) => {
+  /*(prev, next) => {
     console.log('PREV', prev, 'NEXT', next, prev === next);
     return true;
-  },
+  },*/
 );
 
 export const antdDataControlTester: RankedTester = rankWith(2, uiTypeIs('aldkg:DataControl'));

diff --git a/src/data-controls/TabControlRenderer.tsx b/src/data-controls/TabControlRenderer.tsx
@@ -7,29 +7,72 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
-import React from 'react';
-import { Tabs, Col } from 'antd';
+import React, { useContext } from 'react';
+import { Tabs, Col, Spin } from 'antd';
+import { getSnapshot, types } from 'mobx-state-tree';
+import { observer } from 'mobx-react-lite';
 import { JsObject } from '@agentlab/sparql-jsld-client';
 
+import { MstViewKindElement } from '../models/MstViewDescr';
+
 import { rankWith, RankedTester, uiTypeIs } from '../testers';
-import { withStoreToTabProps } from '../util/ContextToProps';
+import { MstContext } from '../MstContext';
+import { processViewKindOverride } from '../Form';
+import { MstJsObject } from '@agentlab/sparql-jsld-client/es/models/MstCollConstr';
+import { IViewKindElement } from '../models/uischema';
 
-interface TabControlProps {
+export type IMstVkeTabControl = IViewKindElement & {
   tabs: JsObject[];
-  handleChange?: (data: JsObject) => void;
-  options: JsObject;
-}
-
-const localeRus = {
-  all: 'Все',
 };
 
-export const TabControl: React.FC<TabControlProps> = ({ tabs = [], handleChange = () => {}, options = {} }) => {
+export const MstVkeTabControl = types.compose(
+  'MstVkeTabControl',
+  MstViewKindElement,
+  types.model({
+    '@type': types.literal('aldkg:TabControl'),
+    tabs: types.maybe(types.array(MstJsObject)),
+  }),
+);
+
+export const AntdTabControlWithStore = observer<any>((props) => {
+  const { schema, viewKind, viewDescr } = props;
+  const { store } = useContext(MstContext);
+  //if (viewKindElement.resultsScope && !store.saveLogicTree[viewKindElement.resultsScope]) {
+  //  store.setSaveLogic(viewKindElement.resultsScope);
+  //}
+
+  const [id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement] = processViewKindOverride(
+    props,
+    store,
+  );
+  const options = viewKindElement.options || {};
+
+  const coll = store.getColl(collIriOverride);
+  let data = coll?.data;
+  if (!data) {
+    return <Spin />;
+  }
+  data = getSnapshot(data);
+  const withConnections = options.connections;
+  let tabs: JsObject[] = data;
+
+  let additionalTabs = (viewKindElement as IMstVkeTabControl).tabs;
+  if (additionalTabs) {
+    additionalTabs = additionalTabs.slice().sort((t1, t2) => t2.rank - t1.rank);
+    tabs = [...additionalTabs.filter((t) => t.rank <= 100), ...tabs, ...additionalTabs.filter((t) => t.rank > 100)];
+  }
+
+  const handleChange = (data: any) => {
+    store.setSelectedData(collIriOverride, data);
+    if (withConnections) store.editConn(withConnections, data);
+  };
+
   const onSelect = (key: string) => {
-    if (key === 'all') {
-      handleChange({});
+    const v = tabs[Number(key)];
+    if (v['@type'] === 'aldkg:Tab') {
+      handleChange(v.value);
     } else {
-      handleChange(tabs[Number(key)]);
+      handleChange(v);
     }
   };
   return (
@@ -43,19 +86,13 @@ export const TabControl: React.FC<TabControlProps> = ({ tabs = [], handleChange
       )}
       <Col>
         <Tabs size='small' onChange={onSelect}>
-          <Tabs.TabPane tab={localeRus.all} key='all' />
           {tabs.map((tab, index) => (
             <Tabs.TabPane tab={tab.title} key={String(index)} />
           ))}
         </Tabs>
       </Col>
     </div>
   );
-};
-
-export const TabControlRenderer = (props: any): JSX.Element => {
-  return <TabControl {...props} />;
-};
+});
 
 export const antdTabControlTester: RankedTester = rankWith(2, uiTypeIs('aldkg:TabControl'));
-export const AntdTabControlWithStore = withStoreToTabProps(TabControlRenderer);
diff --git a/src/data-controls/TreeRenderer.tsx b/src/data-controls/TreeRenderer.tsx
@@ -46,6 +46,11 @@ export const TreeRenderer: React.FC<any> = (props) => {
   const [searchValue, setSearchValue] = useState('');
   const [autoExpandParent, setAutoExpandParent] = useState(true);
   const [beforeSearchExpand, setBeforeSearchExpand] = useState([]);
+
+  useEffect(() => {
+    setTreeData(child);
+  }, [child]);
+
   useEffect(() => {
     onSelect(selected);
   }, [selected, onSelect]);

diff --git a/src/util/ContextToProps.tsx b/src/util/ContextToProps.tsx
@@ -249,14 +249,12 @@ export const withStoreToDataControlProps = (Component: React.FC<any>): React.FC<
       store,
     );
     const coll = store.getColl(collIriOverride);
-    let data = coll?.data;
-    if (!data || data.length === 0) {
-      //if (store.data[scope] === undefined) {
-      //store.loadData(scope);
-      return <Spin />;
+    if (!coll) return <Spin />;
+
+    let data: any[] = [];
+    if (!coll.isLoading) {
+      data = cloneDeep(coll.dataJs);
     }
-    //const scope = viewKindElement.resultsScope;
-    data = cloneDeep(getSnapshot(data));
     const options = viewKindElement?.options || {};
     const withConnections = options.connections;
     const onSelect = (data: any) => {
@@ -342,53 +340,6 @@ export const withStoreToSelectControlProps = (Component: React.FC<any>): React.F
     );
   });
 
-export const withStoreToTabProps = (Component: React.FC<any>): React.FC<any> =>
-  observer<any>(({ ...props }: any) => {
-    const { schema, viewKind, viewDescr } = props;
-    const { store } = useContext(MstContext);
-    //if (viewKindElement.resultsScope && !store.saveLogicTree[viewKindElement.resultsScope]) {
-    //  store.setSaveLogic(viewKindElement.resultsScope);
-    //}
-
-    const [id, collIri, collIriOverride, inCollPath, viewKindElement, viewDescrElement] = processViewKindOverride(
-      props,
-      store,
-    );
-    const options = viewKindElement.options || {};
-
-    const coll = store.getColl(collIriOverride);
-    let data = coll?.data;
-    if (!data) {
-      return <Spin />;
-    }
-    data = getSnapshot(data);
-    const withConnections = options.connections;
-    const onChange = (data: any) => {
-      store.setSelectedData(collIriOverride, data);
-      if (withConnections) {
-        store.editConn(withConnections, data['@id']);
-        //        options.connections.forEach((e: any) => {
-        //          const condition: any = {};
-        //          condition[e.by] = data['@id'];
-        //          store.editCondition(e.to, condition, scope, e.by, data);
-        //        });
-      }
-    };
-    return (
-      <Component
-        viewKind={viewKind}
-        viewKindElement={viewKindElement}
-        viewDescr={viewDescr}
-        viewDescrElement={viewDescrElement}
-        schema={schema}
-        uri={id}
-        tabs={data}
-        handleChange={onChange}
-        options={options}
-      />
-    );
-  });
-
 export const withStoreToMenuProps = (Component: React.FC<any>): React.FC<any> =>
   observer<any>(({ ...props }: any) => {
     const { schema, viewKind, viewDescr } = props;