[refactor] GH-5 Introduce ViewKind, del UiSchema

agentlab · Aug 9, 2021 · d759b02 · d759b02
1 parent 81e421d
commit d759b02
Show file tree

Hide file tree

Showing 28 changed files with 342 additions and 479 deletions.
diff --git a/src/DispatchCell.tsx b/src/DispatchCell.tsx
@@ -19,21 +19,7 @@ import { MstContext } from './MstContext';
  * Dispatch renderer component for cells.
  */
 export const DispatchCell: React.FC<DispatchCellProps> = React.memo(
-  ({
-    data,
-    uischema,
-    onMeasureChange,
-    uri,
-    schema,
-    viewElement,
-    view,
-    enabled,
-    id,
-    parent,
-    CKey,
-    rowData,
-    ...rest
-  }) => {
+  ({ data, onMeasureChange, uri, schema, viewElement, view, enabled, id, parent, CKey, rowData, ...rest }) => {
     const { cells } = useContext(MstContext);
     const renderer = maxBy(cells, (r) => r.tester(viewElement, schema));
     if (renderer === undefined || renderer.tester(viewElement, schema) === -1) {
@@ -51,7 +37,6 @@ export const DispatchCell: React.FC<DispatchCellProps> = React.memo(
             data={data}
             rowData={rowData}
             onMeasureChange={onMeasureChange}
-            uischema={uischema}
             schema={schema}
             viewElement={viewElement}
             uri={uri}

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 { UISchema, View, ViewElement } from './models/uischema';
+import { View, ViewElement } from './models/uischema';
 
 export interface ControlComponent {
   data: any;
@@ -52,22 +52,22 @@ export interface FormsCell {
   cell: React.FC<any>;
 }
 export interface InitStateProps {
-  uischema: UISchema;
   viewElement: ViewElement;
   view: View;
 }
 export interface FormsInitStateProps {
-  viewIri: string;
-  viewsResultsScope: string;
+  viewDescrCollId: string;
+  viewDescrId: string;
+  viewKindCollId: string;
 }
 export interface FormsDispatchProps extends InitStateProps {
   enabled?: boolean;
   parent?: string;
   form?: string;
 }
 export interface FormDispatchProps extends FormsDispatchProps {
-  schema: any;
-  uri: string;
+  schema?: any;
+  uri?: string;
 }
 export interface RenderProps extends FormsDispatchProps {
   schema: JsonSchema7;
@@ -86,20 +86,38 @@ export interface DispatchCellProps extends RenderProps {
   [key: string]: any;
 }
 
-const FormDispatch: React.FC<FormDispatchProps> = observer<FormDispatchProps>(
-  ({ uischema, schema, uri, viewElement, view, enabled, parent, form }) => {
-    const { renderers } = useContext(MstContext);
+export const FormsDispatch: React.FC<FormDispatchProps> = observer<FormDispatchProps>(
+  ({ view, viewElement, parent, form, uri, enabled }: any) => {
+    const { store, renderers } = useContext(MstContext);
+
+    const shapes = viewElement.resultsScope ? viewElement.resultsScope.split('/') : [];
+    const iri = shapes.length === 2 ? shapes[0] : viewElement.resultsScope;
+    let schema: any;
+    if (iri) {
+      const coll = store.getColl(iri);
+      schema = coll?.collConstr.entConstrs[0]?.schemaJs;
+      //if (store.schemas[iri]) {
+      //  schema = store.schemas[iri];
+      //} else {
+      //  if (iri !== 'client:views' && iri !== 'rm:viewPick' && iri !== 'data:Tabs') {
+      //store.getSchemaByUri(iri);
+      //    return <Spin />;
+      //  }
+      //}
+      if (!schema) return <Spin />;
+    }
+    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;
+    //const isModal = viewElement.options && viewElement.options.modal;
     if (renderer === undefined || renderer.tester(viewElement, schema) === -1) {
       return <UnknownRenderer type={'renderer'} />;
     } else {
       const Render: React.FC<RenderProps> = renderer.renderer;
       return (
         <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
           <Render
-            uischema={uischema}
             schema={schema}
             viewElement={viewElement}
             enabled={enabled}
@@ -114,34 +132,6 @@ const FormDispatch: React.FC<FormDispatchProps> = observer<FormDispatchProps>(
   },
 );
 
-const withStoreToFormDispatch = (Component: any): any =>
-  observer<any>(({ ...props }: any) => {
-    const { view, viewElement, parent, form, uischema } = props;
-    const { store } = useContext(MstContext);
-
-    const shapes = viewElement.resultsScope ? viewElement.resultsScope.split('/') : [];
-    const iri = shapes.length === 2 ? shapes[0] : viewElement.resultsScope;
-    let schema: any;
-    if (iri) {
-      const coll = store.getColl(iri);
-      schema = coll?.collConstr.entConstrs[0]?.schemaJs;
-      //if (store.schemas[iri]) {
-      //  schema = store.schemas[iri];
-      //} else {
-      //  if (iri !== 'client:views' && iri !== 'rm:viewPick' && iri !== 'data:Tabs') {
-      //store.getSchemaByUri(iri);
-      //    return <Spin />;
-      //  }
-      //}
-      if (!schema) return <Spin />;
-    }
-    const s = shapes.length === 2 ? schema.properties[shapes[1]] : schema;
-    return (
-      <Component schema={s} uischema={uischema} viewElement={viewElement} view={view} parent={parent} form={form} />
-    );
-  });
-export const FormsDispatch = withStoreToFormDispatch(FormDispatch);
-
 export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
   return (
     <div role='alert'>
@@ -154,23 +144,45 @@ export function ErrorFallback({ error, resetErrorBoundary }: FallbackProps) {
 
 export const Form: React.FC<FormsInitStateProps> = observer<FormsInitStateProps>((props) => {
   const { store } = useContext(MstContext);
-  console.log('inForm', { store });
-  if (Object.keys(store.ns.currentJs).length < 5) {
+  if (!store) {
+    console.log('!store', store);
+    return <Spin />;
+  }
+  if (Object.keys(store.ns.currentJs).length < 6) {
+    console.log('!ns');
+    return <Spin />;
+  }
+
+  const { viewDescrId, viewDescrCollId, viewKindCollId } = props;
+
+  const collWithViewDescrsObs = store.getColl(viewDescrCollId);
+  if (!collWithViewDescrsObs) {
+    console.log('!collWithViewDescrsObs', viewDescrCollId);
+    return <Spin />;
+  }
+
+  const viewDescrObs = collWithViewDescrsObs?.dataByIri(viewDescrId);
+  if (!viewDescrObs) {
+    console.log('!viewDescrObs', viewDescrId);
     return <Spin />;
   }
 
-  const { viewIri, viewsResultsScope } = props;
-  const coll = store.getColl(viewsResultsScope);
-  //const collSS = getSnapshot(coll);
-  const views = coll?.data;
-  const viewObs: any = coll?.dataByIri(viewIri);
-  if (!viewObs) {
+  const collWithViewKindsObs = store.getColl(viewKindCollId);
+  if (!collWithViewKindsObs) {
+    console.log('!collWithViewKindsObs', viewKindCollId);
+    return <Spin />;
+  }
+  const viewKindId = viewDescrObs.viewKind;
+  const viewKindObs = collWithViewKindsObs.dataByIri(viewKindId);
+  if (!viewKindObs) {
+    console.log('!viewKindObs', viewKindId);
     return <Spin />;
   }
-  const view = getSnapshot(viewObs);
+  const viewKind: any = getSnapshot(viewKindObs);
+  const view: any = getSnapshot(viewDescrObs);
   return (
     <ErrorBoundary FallbackComponent={ErrorFallback} onReset={() => {}}>
-      <FormsDispatch {...props} view={view} viewElement={view} />
+      <FormsDispatch {...props} view={viewKind} viewElement={viewKind} />
     </ErrorBoundary>
   );
 });
diff --git a/src/antd-controls/AntdSelect.tsx b/src/antd-controls/AntdSelect.tsx
@@ -14,8 +14,8 @@ import { Select } from 'antd';
 import { areEqual } from '../util/ContextToProps';
 
 export const AntdSelect = React.memo((props: any /*EnumCellProps & WithClassname*/) => {
-  const { data, className, id, enabled, uischema, path, handleChange, options = [], config } = props;
-  const appliedUiSchemaOptions = merge({}, config, uischema.options);
+  const { data, className, id, enabled, path, handleChange, options = [], config } = props;
+  const appliedUiSchemaOptions = merge({}, config);
   console.log('OPTIONS', options);
 
   return (

diff --git a/src/cells/AntdCellCardLayout.tsx b/src/cells/AntdCellCardLayout.tsx
@@ -18,7 +18,7 @@ import { DispatchCell } from '../DispatchCell';
 import './cell.css';
 
 export const AntdCellCardLayout = (props: any) => {
-  const { viewElement, view, schema, uischema, data, id } = props;
+  const { viewElement, view, schema, data, id } = props;
   const createCardChilds = () =>
     viewElement.elements
       ? viewElement.elements.map((e: ViewElement, idx: number) => {
@@ -32,7 +32,6 @@ export const AntdCellCardLayout = (props: any) => {
               rowData={data}
               schema={newSchema || schema}
               viewElement={e}
-              uischema={uischema}
             />
           );
         })

diff --git a/src/cells/AntdCellHorizontalLayout.tsx b/src/cells/AntdCellHorizontalLayout.tsx
@@ -18,18 +18,11 @@ import { get } from 'lodash-es';
 
 import { Idx } from '../util/layout';
 
-export const AntdHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({
-  uischema,
-  viewElement,
-  view,
-  data,
-  schema,
-}) => {
+export const AntdHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({ viewElement, view, data, schema }) => {
   //const layout = viewElement as Layout;
   const Render: React.FC<DispatchCellProps & Idx> = ({
     idx,
     schema,
-    uischema,
     viewElement,
     view,
     data,
@@ -52,7 +45,6 @@ export const AntdHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({
           view={view}
           rowData={data}
           schema={newSchema || schema}
-          uischema={uischema}
           enabled={enabled}
           parent={parent}
           form={form}
@@ -66,15 +58,7 @@ export const AntdHorizontalLayoutRenderer: React.FC<DispatchCellProps> = ({
   return (
     <Row justify={justify} style={rowStyle} align={'middle'}>
       {(viewElement.elements || []).map((e: ViewElement, idx: number) => (
-        <Render
-          viewElement={e}
-          schema={schema}
-          uischema={uischema}
-          idx={idx}
-          data={data}
-          id={String(idx)}
-          view={view}
-        />
+        <Render viewElement={e} schema={schema} idx={idx} data={data} id={String(idx)} view={view} />
       ))}
     </Row>
   );

diff --git a/src/data-controls/DataControl.tsx b/src/data-controls/DataControl.tsx
@@ -28,7 +28,6 @@ export const AntdDataLayout: React.FC<any> = (props) => {
     handleChange = () => {},
     dataSource,
     view,
-    uischema,
     schema,
     editing,
     getData,
@@ -53,7 +52,6 @@ export const AntdDataLayout: React.FC<any> = (props) => {
       onDnD={onDnD}
       viewElement={viewElement}
       view={view}
-      uischema={uischema}
       onCreateFolder={onCreateFolder}
       onDeleteFolder={onDeleteFolder}
       onRename={onRename}

diff --git a/src/data-controls/GridRenderer.tsx b/src/data-controls/GridRenderer.tsx
@@ -20,9 +20,8 @@ const divStyle: React.CSSProperties = {
 };
 
 export const GridRenderer: React.FC<any> = (props) => {
-  const { child, onSelect, viewElement, uischema, view, schema } = props;
+  const { child, onSelect, viewElement, view, schema } = props;
   const grid = viewElement?.options?.grid || { gutter: 16, column: 4 };
-  console.log('UISCEMA', uischema);
   const template = viewElement?.options?.elementTemplate || null;
   const createCell = (data: any, id: string | number) =>
     template ? (
@@ -35,7 +34,6 @@ export const GridRenderer: React.FC<any> = (props) => {
           rowData={data}
           schema={schema}
           viewElement={e}
-          uischema={uischema}
         />
       ))
     ) : (

diff --git a/src/data-controls/TableRenderer.tsx b/src/data-controls/TableRenderer.tsx
@@ -22,7 +22,7 @@ const divStyle: React.CSSProperties = {
 
 export const TableRenderer: React.FC<any> = React.memo(
   (props) => {
-    const { schema, enabled, child, onSelect, viewElement, uischema, view, editing } = props;
+    const { schema, enabled, child, onSelect, viewElement, view, editing } = props;
     const [selected, setSelected] = useState(child[0]);
     const [cacheSelect, setCacheSelect] = useState();
     const [dataSource, setDataSource] = useState(child);
@@ -82,7 +82,6 @@ export const TableRenderer: React.FC<any> = React.memo(
               <FormsDispatch
                 viewElement={selected.viewElement || viewElement.elements[0]}
                 enabled={enabled}
-                uischema={uischema}
                 view={view}
               />
             </div>

diff --git a/src/data-controls/TreeRenderer.tsx b/src/data-controls/TreeRenderer.tsx
@@ -30,7 +30,6 @@ export const TreeRenderer: React.FC<any> = (props) => {
     onSelect,
     viewElement,
     dataSource,
-    uischema,
     view,
     editing,
     onDnD,

diff --git a/src/layouts/AntdFormLayout.tsx b/src/layouts/AntdFormLayout.tsx
@@ -74,7 +74,6 @@ export const LogicalButton: React.FC<any> = observer<any>(({ form, onCancel, onS
 });
 
 export const AntdFormLayout: React.FC<any> = ({
-  uischema,
   viewElement,
   view,
   enabled,
@@ -98,7 +97,6 @@ export const AntdFormLayout: React.FC<any> = ({
           <Form {...formItemLayout}>
             <AntdVerticalLayoutWithStore
               id={`${formId}Layout`}
-              uischema={uischema}
               schema={{}}
               viewElement={viewElement}
               enabled={enabled}

diff --git a/src/layouts/AntdHorizontalLayout.tsx b/src/layouts/AntdHorizontalLayout.tsx
@@ -19,28 +19,20 @@ import { Idx } from '../util/layout';
 import { LayoutComponent } from './LayoutComponent';
 
 export const AntdHorizontalLayoutRenderer: React.FC<LayoutComponent> = ({
-  uischema,
   viewElement,
   view,
   enabled,
   visible,
   parent,
 }) => {
   //const layout = viewElement as Layout;
-  const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, uischema, viewElement, view, enabled, parent, form }) => {
+  const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, viewElement, view, enabled, parent, form }) => {
     const options = viewElement.options || {};
     const style: any = options.style;
     const span = options.contentSize || !viewElement.elements ? undefined : Math.ceil(24 / viewElement.elements.length);
     return (
       <Col key={idx} style={style} span={span}>
-        <FormsDispatch
-          viewElement={viewElement}
-          view={view}
-          uischema={uischema}
-          enabled={enabled}
-          parent={parent}
-          form={form}
-        />
+        <FormsDispatch viewElement={viewElement} view={view} enabled={enabled} parent={parent} form={form} />
       </Col>
     );
   };
@@ -49,7 +41,7 @@ export const AntdHorizontalLayoutRenderer: React.FC<LayoutComponent> = ({
   if (viewElement.options && viewElement.options.width === 'all-empty-space') rowStyle.width = '100%';
   return (
     <Row justify={justify} style={rowStyle} align={'middle'}>
-      {renderLayoutElements({ uischema, viewElement, view, enabled, Render, parent })}
+      {renderLayoutElements({ viewElement, view, enabled, Render, parent })}
     </Row>
   );
 };