[refactor] GH-5 Dispatch on @type, @parent, separate elements for vie…

…wKind and viwDescr, Mst prefix, custom viewElements
agentlab · Aug 14, 2021 · 0fed3ea · 0fed3ea
1 parent 1b48f46
commit 0fed3ea
Show file tree

Hide file tree

Showing 38 changed files with 1,320 additions and 1,038 deletions.
diff --git a/src/DispatchCell.tsx b/src/DispatchCell.tsx
@@ -19,10 +19,10 @@ import { MstContext } from './MstContext';
  * Dispatch renderer component for cells.
  */
 export const DispatchCell: React.FC<DispatchCellProps> = React.memo(
-  ({ data, onMeasureChange, uri, schema, viewElement, view, enabled, id, CKey, rowData, ...rest }) => {
+  ({ data, onMeasureChange, uri, schema, viewKindElement, viewKind, enabled, id, CKey, rowData, ...rest }) => {
     const { cells } = useContext(MstContext);
-    const renderer = maxBy(cells, (r) => r.tester(viewElement, schema));
-    if (renderer === undefined || renderer.tester(viewElement, schema) === -1) {
+    const renderer = maxBy(cells, (r) => r.tester(viewKindElement, schema));
+    if (renderer === undefined || renderer.tester(viewKindElement, schema) === -1) {
       return (
         <td>
           <UnknownRenderer type={'renderer'} />
@@ -38,10 +38,10 @@ export const DispatchCell: React.FC<DispatchCellProps> = React.memo(
             rowData={rowData}
             onMeasureChange={onMeasureChange}
             schema={schema}
-            viewElement={viewElement}
+            viewKindElement={viewKindElement}
             uri={uri}
             enabled={enabled}
-            view={view}
+            viewKind={viewKind}
             id={id}
             {...rest}
           />

diff --git a/src/Form.tsx b/src/Form.tsx
@@ -19,7 +19,7 @@ import { JsonSchema7 } from './models/jsonSchema7';
 import { MstContext } from './MstContext';
 import { UnknownRenderer } from './UnknownRenderer';
 import { RankedTester } from './testers';
-import { View, ViewElement } from './models/uischema';
+import { IViewDescr, IViewKind, IViewKindElement } from './models/uischema';
 
 export interface ControlComponent {
   data: any;
@@ -51,16 +51,15 @@ export interface FormsCell {
   tester: RankedTester;
   cell: React.FC<any>;
 }
-export interface InitStateProps {
-  viewElement: ViewElement;
-  view: View;
-}
 export interface FormsInitStateProps {
   viewDescrCollId: string;
   viewDescrId: string;
-  viewKindCollId: string;
 }
-export interface FormsDispatchProps extends InitStateProps {
+export interface FormsDispatchProps {
+  viewKind: IViewKind;
+  viewKindElement: IViewKindElement;
+  viewDescr?: IViewDescr;
+  viewDescrElement?: IViewKindElement;
   enabled?: boolean;
   form?: string;
 }
@@ -86,14 +85,24 @@ export interface DispatchCellProps extends RenderProps {
 }
 
 export const FormsDispatch: React.FC<FormDispatchProps> = observer<FormDispatchProps>(
-  ({ view, viewElement, form, uri, enabled }: any) => {
+  ({ viewKind, viewKindElement, viewDescr, viewDescrElement, form, uri, enabled }) => {
     const { store, renderers } = useContext(MstContext);
 
-    const shapes = viewElement.resultsScope ? viewElement.resultsScope.split('/') : [];
-    const iri = shapes.length === 2 ? shapes[0] : viewElement.resultsScope;
+    // if ViewElement extend-override exists
+    if (!viewDescrElement && viewDescr) {
+      viewDescrElement = viewDescr.elements?.find((el) => el['@parent'] === viewKindElement['@id']);
+    }
+
+    const shapes = viewKindElement.resultsScope ? viewKindElement.resultsScope.split('/') : [];
+    let collIri = shapes.length === 2 ? shapes[0] : viewKindElement.resultsScope;
     let schema: any;
-    if (iri) {
-      const coll = store.getColl(iri);
+    if (collIri) {
+      // if CollConstr extend-override exists switch to extCollConstr
+      if (viewDescr && viewDescr.collsConstrs) {
+        const extCollConstr = viewDescr.collsConstrs?.find((el) => el['@parent'] === viewKindElement['@id']);
+        if (extCollConstr) collIri = extCollConstr['@id'];
+      }
+      const coll = store.getColl(collIri);
       schema = coll?.collConstr.entConstrs[0]?.schemaJs;
       //if (store.schemas[iri]) {
       //  schema = store.schemas[iri];
@@ -108,15 +117,26 @@ export const FormsDispatch: React.FC<FormDispatchProps> = observer<FormDispatchP
     schema = shapes.length === 2 ? schema.properties[shapes[1]] : schema;
 
     const id = uri ? /*createId(uri)*/ uri : '';
-    const renderer = maxBy(renderers, (r) => r.tester(viewElement, schema));
-    //const isModal = viewElement.options && viewElement.options.modal;
-    if (renderer === undefined || renderer.tester(viewElement, schema) === -1) {
-      return <UnknownRenderer type={'renderer'} />;
+    const renderer = maxBy(renderers, (r) => r.tester(viewKindElement, schema));
+    //const isModal = viewKindElement.options && viewKindElement.options.modal;
+    if (renderer === undefined || renderer.tester(viewKindElement, schema) === -1) {
+      return (
+        <UnknownRenderer type={'renderer'} elementId={viewKindElement['@id']} elementType={viewKindElement['@type']} />
+      );
     } else {
       const Render: React.FC<RenderProps> = renderer.renderer;
       return (
         <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
-          <Render schema={schema} viewElement={viewElement} enabled={enabled} view={view} id={id} form={form} />
+          <Render
+            id={id}
+            viewKind={viewKind}
+            viewKindElement={viewKindElement}
+            viewDescr={viewDescr}
+            viewDescrElement={viewDescrElement}
+            schema={schema}
+            enabled={enabled}
+            form={form}
+          />
         </ErrorBoundary>
       );
     }
@@ -144,7 +164,7 @@ export const Form: React.FC<FormsInitStateProps> = observer<FormsInitStateProps>
     return <Spin />;
   }
 
-  const { viewDescrId, viewDescrCollId, viewKindCollId } = props;
+  const { viewDescrId, viewDescrCollId } = props;
 
   const collWithViewDescrsObs = store.getColl(viewDescrCollId);
   if (!collWithViewDescrsObs) {
@@ -158,22 +178,23 @@ export const Form: React.FC<FormsInitStateProps> = observer<FormsInitStateProps>
     return <Spin />;
   }
 
-  const collWithViewKindsObs = store.getColl(viewKindCollId);
-  if (!collWithViewKindsObs) {
-    console.log('!collWithViewKindsObs', viewKindCollId);
-    return <Spin />;
-  }
-  const viewKindId = viewDescrObs.viewKind;
-  const viewKindObs = collWithViewKindsObs.dataByIri(viewKindId);
+  //const collWithViewKindsObs = store.getColl(viewKindCollId);
+  //if (!collWithViewKindsObs) {
+  //  console.log('!collWithViewKindsObs', viewKindCollId);
+  //  return <Spin />;
+  //}
+  const viewKindObs = viewDescrObs.viewKind;
   if (!viewKindObs) {
-    console.log('!viewKindObs', viewKindId);
+    console.log('!viewKindObs', viewKindObs);
     return <Spin />;
   }
   const viewKind: any = getSnapshot(viewKindObs);
-  const view: any = getSnapshot(viewDescrObs);
+  const viewDescr: any = getSnapshot(viewDescrObs);
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
-      <FormsDispatch {...props} view={viewKind} viewElement={viewKind} />
+      {viewKind.elements.map((el: IViewKindElement) => (
+        <FormsDispatch {...props} viewKind={viewKind} viewKindElement={el} viewDescr={viewDescr} />
+      ))}
     </ErrorBoundary>
   );
 });
diff --git a/src/UnknownRenderer.tsx b/src/UnknownRenderer.tsx
@@ -18,13 +18,20 @@ export interface UnknownRendererProps {
    * The type for which no renderer has been found.
    */
   type: 'renderer' | 'cell';
+  elementId: string;
+  elementType: string;
 }
 
 /**
  * A renderer that will be used in case no other renderer is applicable.
  */
 export class UnknownRenderer extends Component<UnknownRendererProps, any> {
   render() {
-    return <div style={{ color: 'red' }}>No applicable {this.props.type} found.</div>;
+    return (
+      <div style={{ color: 'red' }}>
+        No applicable {this.props.type} found for element with id={this.props.elementId} and type=
+        {this.props.elementType}.
+      </div>
+    );
   }
 }
diff --git a/src/cells/AntdCellCardLayout.tsx b/src/cells/AntdCellCardLayout.tsx
@@ -12,26 +12,26 @@ import React from 'react';
 import { rankWith, RankedTester, uiTypeIs } from '../testers';
 import { get } from 'lodash-es';
 
-import { ViewElement } from '../models/uischema';
+import { IViewKindElement } from '../models/uischema';
 import { Card } from 'antd';
 import { DispatchCell } from '../DispatchCell';
 import './cell.css';
 
 export const AntdCellCardLayout = (props: any) => {
-  const { viewElement, view, schema, data, id } = props;
+  const { viewKindElement, viewKind, schema, data, id } = props;
   const createCardChilds = () =>
-    viewElement.elements
-      ? viewElement.elements.map((e: ViewElement, idx: number) => {
+    viewKindElement.elements
+      ? viewKindElement.elements.map((e: IViewKindElement, idx: number) => {
           const newSchema = e.scope ? get(schema, 'properties.' + e.scope.replace(/\//, '.properties.')) : schema;
           return (
             <DispatchCell
               id={id + String(idx)}
               key={id + String(idx)}
-              view={view}
+              viewKind={viewKind}
               data={data}
               rowData={data}
               schema={newSchema || schema}
-              viewElement={e}
+              viewKindElement={e}
             />
           );
         })
@@ -43,4 +43,4 @@ export const AntdCellCardLayout = (props: any) => {
  * Default tester for text-based/string controls.
  * @type {RankedTester}
  */
-export const antdCellCardLayoutTester: RankedTester = rankWith(2, uiTypeIs('CardLayout'));
+export const antdCellCardLayoutTester: RankedTester = rankWith(2, uiTypeIs('aldkg:CardLayout'));
diff --git a/src/cells/AntdCellG2.tsx b/src/cells/AntdCellG2.tsx
@@ -18,6 +18,6 @@ export const AntdCellG2 = (props: any) => {
  * Default tester for text-based/string controls.
  * @type {RankedTester}
  */
-export const antdCellG2Tester: RankedTester = rankWith(2, uiTypeIs('G2'));
+export const antdCellG2Tester: RankedTester = rankWith(2, uiTypeIs('aldkg:G2'));
 
 export const AntdCellG2WithStore = withStoreToCellProps(AntdCellG2);
diff --git a/src/cells/AntdCellHorizontalLayout.tsx b/src/cells/AntdCellHorizontalLayout.tsx
@@ -12,28 +12,42 @@ import { Row, Col } from 'antd';
 
 import { DispatchCell } from '../DispatchCell';
 import { DispatchCellProps } from '../Form';
-import { ViewElement } from '../models/uischema';
+import { IViewKindElement } from '../models/uischema';
 import { rankWith, uiTypeIs, RankedTester } from '../testers';
 import { get } from 'lodash-es';
 
 import { Idx } from '../util/layout';
 
-export const AntdCellHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({ viewElement, view, data, schema }) => {
-  //const layout = viewElement as Layout;
-  const Render: React.FC<DispatchCellProps & Idx> = ({ idx, schema, viewElement, view, data, enabled, form }) => {
-    const options = viewElement.options || {};
+export const AntdCellHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({
+  viewKindElement,
+  viewKind,
+  data,
+  schema,
+}) => {
+  //const layout = viewKindElement as Layout;
+  const Render: React.FC<DispatchCellProps & Idx> = ({
+    idx,
+    schema,
+    viewKindElement,
+    viewKind,
+    data,
+    enabled,
+    form,
+  }) => {
+    const options = viewKindElement.options || {};
     //const style: any = options.style;
-    const span = options.contentSize || !viewElement.elements ? undefined : Math.ceil(24 / viewElement.elements.length);
-    const newSchema = viewElement.scope
-      ? get(schema, 'properties.' + viewElement.scope.replace(/\//, '.properties.'))
+    const span =
+      options.contentSize || !viewKindElement.elements ? undefined : Math.ceil(24 / viewKindElement.elements.length);
+    const newSchema = viewKindElement.scope
+      ? get(schema, 'properties.' + viewKindElement.scope.replace(/\//, '.properties.'))
       : schema;
     return (
       <Col key={idx} span={span}>
         <DispatchCell
           id={String(idx)}
           data={data}
-          viewElement={viewElement}
-          view={view}
+          viewKindElement={viewKindElement}
+          viewKind={viewKind}
           rowData={data}
           schema={newSchema || schema}
           enabled={enabled}
@@ -42,16 +56,16 @@ export const AntdCellHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({
       </Col>
     );
   };
-  const justify: any = viewElement.options ? viewElement.options.justify : 'center';
+  const justify: any = viewKindElement.options ? viewKindElement.options.justify : 'center';
   const rowStyle: any = { flexWrap: 'nowrap' };
-  if (viewElement.options && viewElement.options.width === 'all-empty-space') rowStyle.width = '100%';
+  if (viewKindElement.options && viewKindElement.options.width === 'all-empty-space') rowStyle.width = '100%';
   return (
     <Row justify={justify} style={rowStyle} align={'middle'}>
-      {(viewElement.elements || []).map((e: ViewElement, idx: number) => (
-        <Render viewElement={e} schema={schema} idx={idx} data={data} id={String(idx)} view={view} />
+      {(viewKindElement.elements || []).map((e: IViewKindElement, idx: number) => (
+        <Render viewKindElement={e} schema={schema} idx={idx} data={data} id={String(idx)} viewKind={viewKind} />
       ))}
     </Row>
   );
 };
 
-export const antdCellHorizontalLayoutTester: RankedTester = rankWith(2, uiTypeIs('CellHorizontalLayout'));
+export const antdCellHorizontalLayoutTester: RankedTester = rankWith(2, uiTypeIs('aldkg:CellHorizontalLayout'));
diff --git a/src/cells/AntdSimpleCells.tsx b/src/cells/AntdSimpleCells.tsx
@@ -54,7 +54,7 @@ export const AntdButtonCell = (props: any) => {
     </Button>
   );
 };
-export const antdButtonCellTester: RankedTester = rankWith(2, uiTypeIs('Button'));
+export const antdButtonCellTester: RankedTester = rankWith(2, uiTypeIs('aldkg:Button'));
 export const AntdButtonCellWithStore = withStoreToCellProps(AntdButtonCell);
 
 /**
@@ -84,7 +84,7 @@ export const AntdImageCell = (props: any) => {
   const { data } = props;
   return <Image style={{ height: '100%', width: '100%' }} src={data[0]} />;
 };
-export const antdImageCellTester: RankedTester = rankWith(2, uiTypeIs('ImageCell'));
+export const antdImageCellTester: RankedTester = rankWith(2, uiTypeIs('aldkg:ImageCell'));
 export const AntdImageCellWithStore = withStoreToCellProps(AntdImageCell);
 
 /**
@@ -103,7 +103,7 @@ export const AntdRateCell = (props: any /*: EnumCellProps & WithClassname*/) =>
     </React.Fragment>
   );
 };
-export const antdRateCellTester: RankedTester = rankWith(5, uiTypeIs('Rate'));
+export const antdRateCellTester: RankedTester = rankWith(5, uiTypeIs('aldkg:Rate'));
 export const AntdRateCellWithStore = withStoreToCellProps(AntdRateCell);
 
 /**

diff --git a/src/cells/TinyMCECell.tsx b/src/cells/TinyMCECell.tsx
@@ -25,7 +25,7 @@ export const TinyMCECell = (props: any) => {
  */
 export const tinyMCECellTester: RankedTester = rankWith(
   10,
-  (viewElement, schema) => viewElement.options !== undefined && viewElement.options.formatter === 'tinyMCE',
+  (viewKindElement, schema) => viewKindElement.options !== undefined && viewKindElement.options.formatter === 'tinyMCE',
 );
 
 export const TinyMCECellWithStore = withStoreToCellProps(TinyMCECell);
diff --git a/src/controls/AntdButtonControl.tsx b/src/controls/AntdButtonControl.tsx
@@ -30,5 +30,5 @@ export const AntdButtonControl: React.FC<ButtonControlProps> = ({ handleChange,
   );
 };
 
-export const antdButtonControlTester: RankedTester = rankWith(2, uiTypeIs('Button'));
+export const antdButtonControlTester: RankedTester = rankWith(2, uiTypeIs('aldkg:Button'));
 export const AntdButtonControlWithStore = withStoreToButtonProps(AntdButtonControl);
diff --git a/src/data-controls/DataControl.tsx b/src/data-controls/DataControl.tsx
@@ -23,11 +23,11 @@ const renderType: any = {
 
 export const AntdDataLayout: React.FC<any> = (props) => {
   const {
-    viewElement,
+    viewKindElement,
     enabled,
     handleChange = () => {},
     dataSource,
-    view,
+    viewKind,
     schema,
     editing,
     getData,
@@ -36,11 +36,11 @@ export const AntdDataLayout: React.FC<any> = (props) => {
     onDeleteFolder,
     onRename,
   } = props;
-  const data = treeify(dataSource, '@id', viewElement?.options.treeNodeParentKey || 'parent', 'children', strcmp);
+  const data = treeify(dataSource, '@id', viewKindElement?.options.treeNodeParentKey || 'parent', 'children', strcmp);
   const onSelect = (selected: { [key: string]: any }) => {
     handleChange(selected);
   };
-  const Render = renderType[viewElement?.options.renderType];
+  const Render = renderType[viewKindElement?.options.renderType];
 
   return (
     <Render
@@ -50,8 +50,8 @@ export const AntdDataLayout: React.FC<any> = (props) => {
       child={data}
       editing={editing}
       onDnD={onDnD}
-      viewElement={viewElement}
-      view={view}
+      viewKindElement={viewKindElement}
+      viewKind={viewKind}
       onCreateFolder={onCreateFolder}
       onDeleteFolder={onDeleteFolder}
       onRename={onRename}
@@ -62,5 +62,5 @@ export const AntdDataLayout: React.FC<any> = (props) => {
   );
 };
 
-export const antdDataControlTester: RankedTester = rankWith(2, uiTypeIs('DataControl'));
+export const antdDataControlTester: RankedTester = rankWith(2, uiTypeIs('aldkg:DataControl'));
 export const AntdDataControlWithStore = withStoreToDataControlProps(AntdDataLayout);