From c05178348e5fce1e9aca8fd2277af5f481c0bb9e Mon Sep 17 00:00:00 2001 From: Alexey Ivanov Date: Mon, 18 Oct 2021 17:19:10 +0300 Subject: [PATCH] [refactor] Tree & Tabs to MST --- src/data-controls/DataControl.tsx | 4 +- src/data-controls/TabControlRenderer.tsx | 79 +++++++++++++++++------- src/data-controls/TreeRenderer.tsx | 5 ++ src/util/ContextToProps.tsx | 59 ++---------------- 4 files changed, 70 insertions(+), 77 deletions(-) diff --git a/src/data-controls/DataControl.tsx b/src/data-controls/DataControl.tsx index c8bc1b5..23dea64 100644 --- a/src/data-controls/DataControl.tsx +++ b/src/data-controls/DataControl.tsx @@ -68,10 +68,10 @@ export const AntdDataLayout: React.FC = 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 index f37d70d..872791a 100644 --- 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 = ({ 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((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 ; + } + 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,7 +86,6 @@ export const TabControl: React.FC = ({ tabs = [], handleChange )} - {tabs.map((tab, index) => ( ))} @@ -51,11 +93,6 @@ export const TabControl: React.FC = ({ tabs = [], handleChange ); -}; - -export const TabControlRenderer = (props: any): JSX.Element => { - return ; -}; +}); 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 index 36567d6..0371b6c 100644 --- a/src/data-controls/TreeRenderer.tsx +++ b/src/data-controls/TreeRenderer.tsx @@ -46,6 +46,11 @@ export const TreeRenderer: React.FC = (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 index 8e8981b..fe76f0a 100644 --- a/src/util/ContextToProps.tsx +++ b/src/util/ContextToProps.tsx @@ -249,14 +249,12 @@ export const withStoreToDataControlProps = (Component: React.FC): 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 ; + if (!coll) return ; + + 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): React.F ); }); -export const withStoreToTabProps = (Component: React.FC): React.FC => - observer(({ ...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 ; - } - 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 ( - - ); - }); - export const withStoreToMenuProps = (Component: React.FC): React.FC => observer(({ ...props }: any) => { const { schema, viewKind, viewDescr } = props;