diff --git a/src/DispatchCell.tsx b/src/DispatchCell.tsx index fbec2b1..69939bd 100644 --- 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 = 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 ( @@ -38,10 +38,10 @@ export const DispatchCell: React.FC = 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 index ef64456..4561925 100644 --- 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; } -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 = observer( - ({ 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 = observer r.tester(viewElement, schema)); - //const isModal = viewElement.options && viewElement.options.modal; - if (renderer === undefined || renderer.tester(viewElement, schema) === -1) { - return ; + 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 ( + + ); } else { const Render: React.FC = renderer.renderer; return ( {}}> - + ); } @@ -144,7 +164,7 @@ export const Form: React.FC = observer return ; } - 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 = observer return ; } - const collWithViewKindsObs = store.getColl(viewKindCollId); - if (!collWithViewKindsObs) { - console.log('!collWithViewKindsObs', viewKindCollId); - return ; - } - const viewKindId = viewDescrObs.viewKind; - const viewKindObs = collWithViewKindsObs.dataByIri(viewKindId); + //const collWithViewKindsObs = store.getColl(viewKindCollId); + //if (!collWithViewKindsObs) { + // console.log('!collWithViewKindsObs', viewKindCollId); + // return ; + //} + const viewKindObs = viewDescrObs.viewKind; if (!viewKindObs) { - console.log('!viewKindObs', viewKindId); + console.log('!viewKindObs', viewKindObs); return ; } const viewKind: any = getSnapshot(viewKindObs); - const view: any = getSnapshot(viewDescrObs); + const viewDescr: any = getSnapshot(viewDescrObs); return ( {}}> - + {viewKind.elements.map((el: IViewKindElement) => ( + + ))} ); }); diff --git a/src/UnknownRenderer.tsx b/src/UnknownRenderer.tsx index fa033a3..fde78a2 100644 --- a/src/UnknownRenderer.tsx +++ b/src/UnknownRenderer.tsx @@ -18,6 +18,8 @@ export interface UnknownRendererProps { * The type for which no renderer has been found. */ type: 'renderer' | 'cell'; + elementId: string; + elementType: string; } /** @@ -25,6 +27,11 @@ export interface UnknownRendererProps { */ export class UnknownRenderer extends Component { render() { - return
No applicable {this.props.type} found.
; + return ( +
+ No applicable {this.props.type} found for element with id={this.props.elementId} and type= + {this.props.elementType}. +
+ ); } } diff --git a/src/cells/AntdCellCardLayout.tsx b/src/cells/AntdCellCardLayout.tsx index c6d768b..29ba978 100644 --- 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 ( ); }) @@ -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 index d4b31e6..0003177 100644 --- 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 index 00df6c4..3bfcfc5 100644 --- 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 = ({ viewElement, view, data, schema }) => { - //const layout = viewElement as Layout; - const Render: React.FC = ({ idx, schema, viewElement, view, data, enabled, form }) => { - const options = viewElement.options || {}; +export const AntdCellHorizontalLayoutRenderer: React.FC = ({ + viewKindElement, + viewKind, + data, + schema, +}) => { + //const layout = viewKindElement as Layout; + const Render: React.FC = ({ + 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 ( = ({ ); }; - 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 ( - {(viewElement.elements || []).map((e: ViewElement, idx: number) => ( - + {(viewKindElement.elements || []).map((e: IViewKindElement, idx: number) => ( + ))} ); }; -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 index a575f42..03100f0 100644 --- a/src/cells/AntdSimpleCells.tsx +++ b/src/cells/AntdSimpleCells.tsx @@ -54,7 +54,7 @@ export const AntdButtonCell = (props: any) => { ); }; -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 ; }; -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*/) => ); }; -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 index bee97dd..ace0f3a 100644 --- 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 index b23a108..112a412 100644 --- a/src/controls/AntdButtonControl.tsx +++ b/src/controls/AntdButtonControl.tsx @@ -30,5 +30,5 @@ export const AntdButtonControl: React.FC = ({ 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 index 7cb2c5e..93e54b6 100644 --- a/src/data-controls/DataControl.tsx +++ b/src/data-controls/DataControl.tsx @@ -23,11 +23,11 @@ const renderType: any = { export const AntdDataLayout: React.FC = (props) => { const { - viewElement, + viewKindElement, enabled, handleChange = () => {}, dataSource, - view, + viewKind, schema, editing, getData, @@ -36,11 +36,11 @@ export const AntdDataLayout: React.FC = (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 ( = (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 = (props) => { ); }; -export const antdDataControlTester: RankedTester = rankWith(2, uiTypeIs('DataControl')); +export const antdDataControlTester: RankedTester = rankWith(2, uiTypeIs('aldkg:DataControl')); export const AntdDataControlWithStore = withStoreToDataControlProps(AntdDataLayout); diff --git a/src/data-controls/GridRenderer.tsx b/src/data-controls/GridRenderer.tsx index 92b700b..89d7480 100644 --- a/src/data-controls/GridRenderer.tsx +++ b/src/data-controls/GridRenderer.tsx @@ -7,33 +7,29 @@ * * SPDX-License-Identifier: GPL-3.0-only ********************************************************************************/ -import React, { useState, useEffect } from 'react'; -import { List, Row, Col, Pagination } from 'antd'; -import { ViewElement } from '../models/uischema'; +import React from 'react'; +import { List } from 'antd'; +import { IViewKindElement } from '../models/uischema'; import { DispatchCell } from '../DispatchCell'; import './styles.css'; -const divStyle: React.CSSProperties = { - padding: '5px', -}; - export const GridRenderer: React.FC = (props) => { - const { child, onSelect, viewElement, view, schema } = props; - const grid = viewElement?.options?.grid || { gutter: 16, column: 4 }; - const template = viewElement?.options?.elementTemplate || null; + const { child, viewKindElement, viewKind, schema } = props; + const grid = viewKindElement?.options?.grid || { gutter: 16, column: 4 }; + const template = viewKindElement?.options?.elementTemplate || null; const createCell = (data: any, id: string | number) => template ? ( - template.map((e: ViewElement, idx: number) => ( + template.map((e: IViewKindElement, idx: number) => ( )) ) : ( diff --git a/src/data-controls/SaveControl.tsx b/src/data-controls/SaveControl.tsx index 1fc24c0..78b2cee 100644 --- a/src/data-controls/SaveControl.tsx +++ b/src/data-controls/SaveControl.tsx @@ -39,5 +39,5 @@ export const SaveControl: React.FC = (props) => { ); }; -export const saveControlTester: RankedTester = rankWith(1, uiTypeIs('SaveControl')); +export const saveControlTester: RankedTester = rankWith(1, uiTypeIs('aldkg:SaveControl')); export const AntdSaveControlWithStore = withStoreToSaveButtonProps(SaveControl); diff --git a/src/data-controls/SelectControl.tsx b/src/data-controls/SelectControl.tsx index 36defd6..4758448 100644 --- a/src/data-controls/SelectControl.tsx +++ b/src/data-controls/SelectControl.tsx @@ -15,7 +15,7 @@ import { withStoreToSelectControlProps } from '../util/ContextToProps'; export const AntdSelectControl: React.FC = (props) => { const { handleChange, dataSource } = props; - //const options = merge({}, viewElement.options); + //const options = merge({}, viewKindElement.options); const data: any = []; const dataObject: any = {}; @@ -63,5 +63,5 @@ export const AntdSelectControl: React.FC = (props) => { ); }; -export const antdSelectControlTester: RankedTester = rankWith(2, uiTypeIs('SelectControl')); +export const antdSelectControlTester: RankedTester = rankWith(2, uiTypeIs('aldkg:SelectControl')); export const AntdSelectControlWithStore = withStoreToSelectControlProps(AntdSelectControl); diff --git a/src/data-controls/TabControlRenderer.tsx b/src/data-controls/TabControlRenderer.tsx index be25b54..836f82d 100644 --- a/src/data-controls/TabControlRenderer.tsx +++ b/src/data-controls/TabControlRenderer.tsx @@ -57,5 +57,5 @@ export const TabControlRenderer = (props: any) => { return ; }; -export const antdTabControlTester: RankedTester = rankWith(2, uiTypeIs('TabControl')); +export const antdTabControlTester: RankedTester = rankWith(2, uiTypeIs('aldkg:TabControl')); export const AntdTabControlWithStore = withStoreToTabProps(TabControlRenderer); diff --git a/src/data-controls/TableRenderer.tsx b/src/data-controls/TableRenderer.tsx index 00f9bee..208bbc1 100644 --- 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 = React.memo( (props) => { - const { schema, enabled, child, onSelect, viewElement, view, editing } = props; + const { schema, enabled, child, onSelect, viewKindElement, viewKind, editing } = props; const [selected, setSelected] = useState(child[0]); const [cacheSelect, setCacheSelect] = useState(); const [dataSource, setDataSource] = useState(child); @@ -77,12 +77,12 @@ export const TableRenderer: React.FC = React.memo( })} /> - {selected.viewElement || viewElement.elements ? ( + {selected.viewKindElement || viewKindElement.elements ? (
) : null} @@ -94,7 +94,7 @@ export const TableRenderer: React.FC = React.memo( onSelect(cacheSelect); setSelected(cacheSelect); }} - //schemaUri={viewElement.resultsScope} + //schemaUri={viewKindElement.resultsScope} onCancel={() => setVisible(false)} /> diff --git a/src/data-controls/TreeRenderer.tsx b/src/data-controls/TreeRenderer.tsx index 1c6680b..f003673 100644 --- a/src/data-controls/TreeRenderer.tsx +++ b/src/data-controls/TreeRenderer.tsx @@ -28,9 +28,9 @@ export const TreeRenderer: React.FC = (props) => { enabled, child, onSelect, - viewElement, + viewKindElement, dataSource, - view, + viewKind, editing, onDnD, onCreateFolder, @@ -120,7 +120,7 @@ export const TreeRenderer: React.FC = (props) => { setAutoExpandParent(false); }; - const titlePropName = viewElement?.options?.treeNodeTitleKey || 'title'; + const titlePropName = viewKindElement?.options?.treeNodeTitleKey || 'title'; const searchEdit = (data: any) => data.map((item: any) => { @@ -234,7 +234,7 @@ export const TreeRenderer: React.FC = (props) => { }; const onCreateDirectory = (parentId: string) => { - onCreateFolder({ [titlePropName]: 'new', [viewElement?.options.treeNodeParentKey || 'parent']: parentId }).then( + onCreateFolder({ [titlePropName]: 'new', [viewKindElement?.options.treeNodeParentKey || 'parent']: parentId }).then( (e: any) => { const data = [...treeData]; loop(data, parentId, (item: any) => { @@ -281,7 +281,7 @@ export const TreeRenderer: React.FC = (props) => { setVisible(false)} - schemaUri={viewElement.resultsScope} + schemaUri={viewKindElement.resultsScope} onCancel={() => setVisible(false)} /> = observer(({ form, onCancel, onS }); export const AntdFormLayout: React.FC = ({ - viewElement, - view, + viewKindElement, + viewKind, enabled, title, visible, @@ -97,9 +97,9 @@ export const AntdFormLayout: React.FC = ({ @@ -109,5 +109,5 @@ export const AntdFormLayout: React.FC = ({ ); }; -export const antdFormLayoutTester: RankedTester = rankWith(2, uiTypeIs('FormLayout')); +export const antdFormLayoutTester: RankedTester = rankWith(2, uiTypeIs('aldkg:FormLayout')); export const AntdFormLayoutWithStore = withStoreToFormProps(AntdFormLayout); diff --git a/src/layouts/AntdHorizontalLayout.tsx b/src/layouts/AntdHorizontalLayout.tsx index 3d18769..7606683 100644 --- a/src/layouts/AntdHorizontalLayout.tsx +++ b/src/layouts/AntdHorizontalLayout.tsx @@ -18,27 +18,33 @@ import { renderLayoutElements } from '../util/layout'; import { Idx } from '../util/layout'; import { LayoutComponent } from './LayoutComponent'; -export const AntdHorizontalLayoutRenderer: React.FC = ({ viewElement, view, enabled, visible }) => { - //const layout = viewElement as Layout; - const Render: React.FC = ({ idx, viewElement, view, enabled, form }) => { - const options = viewElement.options || {}; +export const AntdHorizontalLayoutRenderer: React.FC = ({ + viewKindElement, + viewKind, + enabled, + visible, +}) => { + //const layout = viewKindElement as Layout; + const Render: React.FC = ({ idx, viewKindElement, viewKind, 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 span = + options.contentSize || !viewKindElement.elements ? undefined : Math.ceil(24 / viewKindElement.elements.length); return ( - + ); }; - 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 ( - {renderLayoutElements({ viewElement, view, enabled, Render })} + {renderLayoutElements({ viewKindElement, viewKind, enabled, Render })} ); }; -export const antdHorizontalLayoutTester: RankedTester = rankWith(2, uiTypeIs('HorizontalLayout')); +export const antdHorizontalLayoutTester: RankedTester = rankWith(2, uiTypeIs('aldkg:HorizontalLayout')); export const AntdHorizontalLayoutWithStore = withLayoutProps(AntdHorizontalLayoutRenderer); diff --git a/src/layouts/AntdVerticalLayout.tsx b/src/layouts/AntdVerticalLayout.tsx index a21a64e..5d4a345 100644 --- a/src/layouts/AntdVerticalLayout.tsx +++ b/src/layouts/AntdVerticalLayout.tsx @@ -19,23 +19,23 @@ import { Idx } from '../util/layout'; import { LayoutComponent } from './LayoutComponent'; export const AntdVerticalLayoutRenderer: React.FC = ({ - viewElement, - view, + viewKindElement, + viewKind, enabled, visible, form, }) => { - const Render: React.FC = ({ idx, viewElement, view, enabled }) => { - const options = viewElement.options || {}; + const Render: React.FC = ({ idx, viewKindElement, viewKind, enabled }) => { + const options = viewKindElement.options || {}; const style: any = options.style; return ( - + ); @@ -43,11 +43,11 @@ export const AntdVerticalLayoutRenderer: React.FC = ({ return (
- {renderLayoutElements({ viewElement, view, enabled, Render })} + {renderLayoutElements({ viewKindElement, viewKind, enabled, Render })}
); }; -export const antdVerticalLayoutTester: RankedTester = rankWith(2, uiTypeIs('VerticalLayout')); +export const antdVerticalLayoutTester: RankedTester = rankWith(2, uiTypeIs('aldkg:VerticalLayout')); export const AntdVerticalLayoutWithStore = withLayoutProps(AntdVerticalLayoutRenderer); diff --git a/src/layouts/SplitPaneLayout.tsx b/src/layouts/SplitPaneLayout.tsx index 9df3a42..1afb8cd 100644 --- a/src/layouts/SplitPaneLayout.tsx +++ b/src/layouts/SplitPaneLayout.tsx @@ -7,7 +7,7 @@ * * SPDX-License-Identifier: GPL-3.0-only ********************************************************************************/ -import React, { ReactElement } from 'react'; +import React from 'react'; import SplitPane from 'react-split-pane'; import Pane from 'react-split-pane/lib/Pane'; @@ -17,7 +17,7 @@ import { withLayoutProps } from '../util/ContextToProps'; import { LayoutComponent } from './LayoutComponent'; import { Idx, RenderLayoutProps } from '../util/layout'; -import { ViewElement } from '../models/uischema'; +import { IViewKindElement } from '../models/uischema'; const divStyle: React.CSSProperties = { position: 'relative', @@ -26,17 +26,17 @@ const divStyle: React.CSSProperties = { margin: '1px', }; -const renderSplitElements = ({ viewElement, view, enabled, Render, form }: RenderLayoutProps) => { - const elements = viewElement.elements; - const defaultSize = viewElement.options && viewElement.options.defaultSize; +const renderSplitElements = ({ viewKindElement, viewKind, enabled, Render, form }: RenderLayoutProps) => { + const elements = viewKindElement.elements; + const defaultSize = viewKindElement.options && viewKindElement.options.defaultSize; return elements ? ( - elements.map((el: ViewElement, idx: number) => { + elements.map((el: IViewKindElement, idx: number) => { const id = el['@id'] || el.resultsScope || ''; const style = el.options && el.options.style; return (
- +
); @@ -46,23 +46,23 @@ const renderSplitElements = ({ viewElement, view, enabled, Render, form }: Rende ); }; -export const SplitPaneLayoutRenderer: React.FC = ({ viewElement, view, enabled, visible }) => { - //const layout = viewElement as Layout; - const Render: React.FC = ({ idx, viewElement, view, enabled }) => { +export const SplitPaneLayoutRenderer: React.FC = ({ viewKindElement, viewKind, enabled, visible }) => { + //const layout = viewKindElement as Layout; + const Render: React.FC = ({ idx, viewKindElement, viewKind, enabled }) => { return (
- +
); }; return ( - {renderSplitElements({ viewElement, view, enabled, Render })} + {renderSplitElements({ viewKindElement, viewKind, enabled, Render })} ); }; -export const splitPaneLayoutTester: RankedTester = rankWith(2, uiTypeIs('SplitPaneLayout')); +export const splitPaneLayoutTester: RankedTester = rankWith(2, uiTypeIs('aldkg:SplitPaneLayout')); export const SplitPaneLayoutWithStore = withLayoutProps(SplitPaneLayoutRenderer); diff --git a/src/layouts/TabsLayout.tsx b/src/layouts/TabsLayout.tsx index bbd9552..c69c29c 100644 --- a/src/layouts/TabsLayout.tsx +++ b/src/layouts/TabsLayout.tsx @@ -15,14 +15,14 @@ import { rankWith, RankedTester, uiTypeIs } from '../testers'; import { withLayoutProps } from '../util/ContextToProps'; export const TabsLayout: React.FC = (props) => { - const { enabled, onSelect = () => {}, viewElement, view } = props; - const elements = viewElement.elements; + const { enabled, onSelect = () => {}, viewKindElement, viewKind } = props; + const elements = viewKindElement.elements; const viewTabs = elements ? elements.map((e: any, index: number) => { const title = e.options && e.options.title; return ( - + ); }) @@ -36,5 +36,5 @@ export const TabsLayout: React.FC = (props) => { ); }; -export const antdTabsLayoutTester: RankedTester = rankWith(2, uiTypeIs('TabsLayout')); +export const antdTabsLayoutTester: RankedTester = rankWith(2, uiTypeIs('aldkg:TabsLayout')); export const AntdTabsLayoutWithStore = withLayoutProps(TabsLayout); diff --git a/src/models/MstViewDescr.ts b/src/models/MstViewDescr.ts new file mode 100644 index 0000000..b900b9f --- /dev/null +++ b/src/models/MstViewDescr.ts @@ -0,0 +1,256 @@ +/******************************************************************************** + * Copyright (c) 2020 Agentlab and others. + * + * This program and the accompanying materials are made available under the + * terms of the GNU General Public License v. 3.0 which is available at + * https://www.gnu.org/licenses/gpl-3.0.html. + * + * SPDX-License-Identifier: GPL-3.0-only + ********************************************************************************/ +import { reaction } from 'mobx'; +import { + getParent, + getRoot, + IAnyComplexType, + IAnyModelType, + IAnyStateTreeNode, + IAnyType, + SnapshotIn, + types, +} from 'mobx-state-tree'; + +import { + arrDiff, + CollState, + createModelFromState, + JsObject, + MstCollConstr, + MstModels, + registerMstCollSchema, + SparqlClient, +} from '@agentlab/sparql-jsld-client'; + +/*********************** + * View Kind + ***********************/ + +export const MstViewKindElement = types.model('MstViewKindElement', { + '@id': types.identifier, // JSON-LD object id + '@type': types.string, //types.union(types.literal('aldkg:ViewElement'), types.literal('aldkg:DiagramEditor')), // JSON-LD class id of a View + + title: types.maybe(types.union(types.string, types.frozen())), + description: types.maybe(types.union(types.string, types.frozen())), + + scope: types.maybe(types.string), + resultsScope: types.maybe(types.string), + options: types.maybe(types.frozen()), + + style: types.maybe(types.frozen()), + + // Container-specific (e.g. Layout, type: 'xxxLayout') + elements: types.maybe(types.array(types.late((): IAnyType => MstViewKindDataType))), +}); + +const mstViewKindSchemas: MstModels = {}; + +export function registerMstViewKindSchema(id: string, t: IAnyComplexType): void { + console.log('register mstViewKindSchema', { id, t }); + mstViewKindSchemas[id] = t; +} + +export function unregisterMstViewKindSchema(id: string): IAnyComplexType { + const t = mstViewKindSchemas[id]; + delete mstViewKindSchemas[id]; + return t; +} + +export const MstViewKindDataType = types.union( + { + dispatcher: (snapshot: any) => { + if (snapshot) { + const mstModel = mstViewKindSchemas[snapshot['@type']]; + if (mstModel) { + //console.log('ViewKindDataType, create mstModel for', snapshot['@id'], mstModel.name); + return mstModel; + } + } + //console.log('ViewKindDataType, create ViewKindElement for', snapshot['@id']); + return MstViewKindElement; + }, + }, + MstViewKindElement, +); + +/** + * View Kind, which could be persisted in DB + */ +export const MstViewKind = types + .model('MstViewKind', { + '@id': types.identifier, // JSON-LD object id of a viewKind + '@type': types.string, // JSON-LD class id of a View + + title: types.maybe(types.string), // mandatory title + description: types.maybe(types.string), + + options: types.maybe(types.frozen()), + + // Container-specific (e.g. Layout, type: 'xxxLayout') + elements: types.array(MstViewKindDataType), + + collsConstrs: types.array(MstCollConstr), // former 'queries' + }) + .actions((self) => { + const rep: IAnyStateTreeNode = getRoot(self); + const coll: IAnyStateTreeNode = getParent(self, 2); + let dispose: any; + return { + afterAttach() { + console.log('ViewKind afterAttach, @id=', self['@id']); + if (coll.resolveCollConstrs) { + dispose = reaction( + () => self.collsConstrs, + (newArr: any[], oldArr: any[]) => { + console.log('ViewKind reaction, add coll ref, @id=', self['@id']); + const { deleted, added } = arrDiff(newArr, oldArr); + console.log('ViewKind reaction, add coll ref, {deleted,added}=', { deleted, added }); + deleted.forEach((e: any) => rep.colls.delete(e['@id'])); + added.forEach((e: any) => rep.addCollByConstrRef(e)); + }, + { fireImmediately: true, name: 'ViewKind-Attach' }, + ); + } + }, + beforeDetach() { + console.log('ViewKind beforeDetach, @id=', self['@id']); + if (coll.resolveCollConstrs) { + if (dispose) dispose(); + self.collsConstrs.forEach((e) => rep.colls.delete(e['@id'])); + } + }, + setCollConstrs(collsConstrs: any[]) { + const collsConstrsObservables = collsConstrs.map((cc) => MstCollConstr.create(cc)); + self.collsConstrs.push(...collsConstrsObservables); + }, + }; + }); + +export type IViewKindSnapshotIn = SnapshotIn; + +/*********************** + * View Description + ***********************/ + +export const MstViewDescrElement = types.model('MstViewDescrElement', { + '@id': types.identifier, // JSON-LD object id + '@type': types.string, //types.union(types.literal('aldkg:ViewElement'), types.literal('aldkg:DiagramEditor')), // JSON-LD class id of a View + '@parent': types.safeReference(types.late((): IAnyModelType => MstViewKindElement)), + + title: types.maybe(types.union(types.string, types.frozen())), + description: types.maybe(types.union(types.string, types.frozen())), + + scope: types.maybe(types.string), + resultsScope: types.maybe(types.string), + options: types.maybe(types.frozen()), + + style: types.maybe(types.frozen()), + + // Container-specific (e.g. Layout, type: 'xxxLayout') + elements: types.maybe(types.array(types.late((): IAnyType => MstViewDescrDataType))), +}); + +const mstViewDescrSchemas: MstModels = {}; + +export function registerMstViewDescrSchema(id: string, t: IAnyComplexType): void { + console.log('register mstViewDescrSchema', { id, t }); + mstViewDescrSchemas[id] = t; +} + +export function unregisterMstViewDescrSchema(id: string): IAnyComplexType { + const t = mstViewDescrSchemas[id]; + delete mstViewDescrSchemas[id]; + return t; +} + +export const MstViewDescrDataType = types.union( + { + dispatcher: (snapshot: any) => { + if (snapshot) { + const mstModel = mstViewDescrSchemas[snapshot['@type']]; + if (mstModel) { + //console.log('ViewDescrDataType, create mstModel for', snapshot['@id'], mstModel.name); + return mstModel; + } + } + //console.log('ViewDescrDataType, create ViewDescrElement for', snapshot['@id']); + return MstViewDescrElement; + }, + }, + MstViewDescrElement, +); + +/** + * View Description, which could be persisted in DB + */ +export const MstViewDescr = types + .model('MstViewDescr', { + '@id': types.identifier, // JSON-LD object id of a viewKind + '@type': types.string, // JSON-LD class id of a View + viewKind: types.safeReference(MstViewKind), + + title: types.maybe(types.string), // mandatory title + description: types.maybe(types.string), + + options: types.maybe(types.frozen()), + + // Container-specific (e.g. Layout, type: 'xxxLayout') + elements: types.array(MstViewDescrDataType), + + collsConstrs: types.array(MstCollConstr), // former 'queries' + }) + .actions((self) => { + const rep: IAnyStateTreeNode = getRoot(self); + const coll: IAnyStateTreeNode = getParent(self, 2); + let dispose: any; + return { + afterAttach() { + console.log('MstViewDescr afterAttach, @id=', self['@id']); + if (coll.resolveCollConstrs) { + dispose = reaction( + () => self.collsConstrs, + (newArr: any[], oldArr: any[]) => { + console.log('MstViewDescr reaction, add coll ref, @id=', self['@id']); + const { deleted, added } = arrDiff(newArr, oldArr); + console.log('MstViewDescr reaction, add coll ref, {deleted,added}=', { deleted, added }); + deleted.forEach((e: any) => rep.colls.delete(e['@id'])); + added.forEach((e: any) => rep.addCollByConstrRef(e)); + }, + { fireImmediately: true, name: 'MstViewDescr-Attach' }, + ); + } + }, + beforeDetach() { + console.log('MstViewDescr beforeDetach, @id=', self['@id']); + if (coll.resolveCollConstrs) { + if (dispose) dispose(); + self.collsConstrs.forEach((e) => rep.colls.delete(e['@id'])); + } + }, + setCollConstrs(collsConstrs: any[]) { + const collsConstrsObservables = collsConstrs.map((cc) => MstCollConstr.create(cc)); + self.collsConstrs.push(...collsConstrsObservables); + }, + }; + }); + +export type IViewDescrSnapshotIn = SnapshotIn; + +export const createUiModelFromState = ( + repId: string, + client: SparqlClient, + initialState: any, + additionalColls: CollState[] | undefined = undefined, +): any => { + registerMstCollSchema('aldkg:ViewKind', MstViewKind); + registerMstCollSchema('aldkg:ViewDescr', MstViewDescr); + return createModelFromState(repId, client, initialState, additionalColls); +}; diff --git a/src/models/MstViewSchemas.ts b/src/models/MstViewSchemas.ts new file mode 100644 index 0000000..c5e08e8 --- /dev/null +++ b/src/models/MstViewSchemas.ts @@ -0,0 +1,30 @@ +/******************************************************************************** + * Copyright (c) 2021 Agentlab and others. + * + * This program and the accompanying materials are made available under the + * terms of the GNU General Public License v. 3.0 which is available at + * https://www.gnu.org/licenses/gpl-3.0.html. + * + * SPDX-License-Identifier: GPL-3.0-only + ********************************************************************************/ +import { reaction } from 'mobx'; +import { + getParent, + getRoot, + IAnyComplexType, + IAnyModelType, + IAnyStateTreeNode, + IAnyType, + SnapshotIn, + types, +} from 'mobx-state-tree'; + +import { MstViewKindElement } from './MstViewDescr'; + +export const MstVerticalLayout = types.compose( + 'MstVerticalLayout', + MstViewKindElement, + types.model({ + '@type': types.literal('aldkg:VerticalLayout'), + }), +); diff --git a/src/stores/ViewCollConstrs.ts b/src/models/ViewCollConstrs.ts similarity index 100% rename from src/stores/ViewCollConstrs.ts rename to src/models/ViewCollConstrs.ts diff --git a/src/stores/ViewShapeSchema.ts b/src/models/ViewShapeSchema.ts similarity index 100% rename from src/stores/ViewShapeSchema.ts rename to src/models/ViewShapeSchema.ts diff --git a/src/models/uischema.ts b/src/models/uischema.ts index 40b123a..bb0a2ab 100644 --- a/src/models/uischema.ts +++ b/src/models/uischema.ts @@ -7,40 +7,64 @@ * * SPDX-License-Identifier: GPL-3.0-only ********************************************************************************/ -export interface ViewElement { + +import { ICollConstrJsOpt } from '@agentlab/sparql-jsld-client'; + +export interface IViewDescrElement { '@id': string; '@type': string; + '@parent'?: string; + title?: string; description?: string; - viewKind?: string; - type: string; - //order?: string[]; - //queries?: any[]; scope?: string; resultsScope?: string; options?: { [key: string]: any; }; - elements?: ViewElement[]; + elements?: IViewDescrElement[]; +} + +export interface IViewDescr { + '@id': string; + '@type': string; + viewKind?: string; + + title?: string; + description?: string; + + options?: { + [key: string]: any; + }; + elements: IViewDescrElement[]; + collsConstrs: ICollConstrJsOpt[]; } -export type View = ViewElement; -export interface ViewClassElement { - '@id'?: string; - '@type'?: string; +export interface IViewKindElement { + '@id': string; + '@type': string; + title?: string; description?: string; - queries?: any[]; - type: string; + scope?: string; resultsScope?: string; options?: { [key: string]: any; }; + elements?: IViewKindElement[]; } -export interface Layout extends ViewClassElement { - elements: (Layout | ViewClassElement)[]; -} +export interface IViewKind { + '@id': string; + '@type': string; -export declare type ViewClass = Layout | ViewClassElement; + title?: string; + description?: string; + + options?: { + [key: string]: any; + }; + elements: IViewKindElement[]; + collsConstrs: ICollConstrJsOpt[]; +} diff --git a/src/stores/ViewDescr.ts b/src/stores/ViewDescr.ts deleted file mode 100644 index fd83b37..0000000 --- a/src/stores/ViewDescr.ts +++ /dev/null @@ -1,165 +0,0 @@ -/******************************************************************************** - * Copyright (c) 2020 Agentlab and others. - * - * This program and the accompanying materials are made available under the - * terms of the GNU General Public License v. 3.0 which is available at - * https://www.gnu.org/licenses/gpl-3.0.html. - * - * SPDX-License-Identifier: GPL-3.0-only - ********************************************************************************/ -import { reaction } from 'mobx'; -import { getParent, getRoot, IAnyModelType, IAnyStateTreeNode, SnapshotIn, types } from 'mobx-state-tree'; - -import { - arrDiff, - CollConstr, - CollState, - JsObject, - SparqlClient, - registerMstSchema, - createModelFromState, -} from '@agentlab/sparql-jsld-client'; - -export const ViewElement = types.model('ViewElement', { - '@id': types.maybe(types.string), // JSON-LD object id of a view - '@type': types.maybe(types.string), // JSON-LD class id of a View - title: types.maybe(types.string), - description: types.maybe(types.string), - //viewKind: types.maybe(types.string), - - type: types.string, - scope: types.maybe(types.string), - resultsScope: types.maybe(types.string), - options: types.maybe(types.frozen()), - - // Container-specific (e.g. Layout, type: 'xxxLayout') - elements: types.maybe(types.array(types.late((): IAnyModelType => ViewElement))), -}); - -/** - * View Kind, which could be persisted in DB - */ -export const ViewKind = types - .model('ViewKind', { - '@id': types.identifier, // JSON-LD object id of a view - '@type': types.string, // JSON-LD class id of a View - - title: types.maybe(types.string), // mandatory title - description: types.maybe(types.string), - - type: types.string, - scope: types.maybe(types.string), - resultsScope: types.maybe(types.string), - options: types.maybe(types.frozen()), - - // Container-specific (e.g. Layout, type: 'xxxLayout') - elements: types.array(ViewElement), - - collsConstrs: types.array(CollConstr), // former 'queries' - }) - .actions((self) => { - const rep: IAnyStateTreeNode = getRoot(self); - const coll: IAnyStateTreeNode = getParent(self, 2); - let disp: any; - return { - afterAttach() { - console.log('ViewKind afterAttach, @id=', self['@id']); - if (coll.resolveCollConstrs) { - disp = reaction( - () => self.collsConstrs, - (newArr: any[], oldArr: any[]) => { - console.log('ViewKind reaction, add coll ref, @id=', self['@id']); - const { deleted, added } = arrDiff(newArr, oldArr); - console.log('ViewKind reaction, add coll ref, {deleted,added}=', { deleted, added }); - deleted.forEach((e: any) => rep.colls.delete(e['@id'])); - added.forEach((e: any) => rep.addCollByConstrRef(e)); - }, - { fireImmediately: true }, - ); - } - }, - beforeDetach() { - console.log('ViewKind beforeDetach, @id=', self['@id']); - if (coll.resolveCollConstrs) { - if (disp) disp(); - self.collsConstrs.forEach((e) => rep.colls.delete(e['@id'])); - } - }, - setCollConstrs(collsConstrs: any[]) { - const ccso = collsConstrs.map((cc) => CollConstr.create(cc)); - self.collsConstrs.push(...ccso); - }, - }; - }); - -export type IViewKindSnapshotIn = SnapshotIn; - -/** - * View Description, which could be persisted in DB - */ -export const ViewDescr = types - .model('ViewDescr', { - '@id': types.identifier, // JSON-LD object id of a view - '@type': types.string, // JSON-LD class id of a View - viewKind: types.maybe(types.string), - - title: types.maybe(types.string), // mandatory title - description: types.maybe(types.string), - - type: types.string, - scope: types.maybe(types.string), - resultsScope: types.maybe(types.string), - options: types.maybe(types.frozen()), - - // Container-specific (e.g. Layout, type: 'xxxLayout') - elements: types.array(ViewElement), - - collsConstrs: types.array(CollConstr), // former 'queries' - }) - .actions((self) => { - const rep: IAnyStateTreeNode = getRoot(self); - const coll: IAnyStateTreeNode = getParent(self, 2); - let disp: any; - return { - afterAttach() { - console.log('ViewDescr afterAttach, @id=', self['@id']); - if (coll.resolveCollConstrs) { - disp = reaction( - () => self.collsConstrs, - (newArr: any[], oldArr: any[]) => { - console.log('ViewDescr reaction, add coll ref, @id=', self['@id']); - const { deleted, added } = arrDiff(newArr, oldArr); - console.log('ViewDescr reaction, add coll ref, {deleted,added}=', { deleted, added }); - deleted.forEach((e: any) => rep.colls.delete(e['@id'])); - added.forEach((e: any) => rep.addCollByConstrRef(e)); - }, - { fireImmediately: true }, - ); - } - }, - beforeDetach() { - console.log('ViewDescr beforeDetach, @id=', self['@id']); - if (coll.resolveCollConstrs) { - if (disp) disp(); - self.collsConstrs.forEach((e) => rep.colls.delete(e['@id'])); - } - }, - setCollConstrs(collsConstrs: any[]) { - const ccso = collsConstrs.map((cc) => CollConstr.create(cc)); - self.collsConstrs.push(...ccso); - }, - }; - }); - -export type IViewDescrSnapshotIn = SnapshotIn; - -export const createUiModelFromState = ( - repId: string, - client: SparqlClient, - initialState: any, - additionalColls: CollState[] | undefined = undefined, -): any => { - registerMstSchema('aldkg:ViewKind', ViewKind); - registerMstSchema('aldkg:ViewDescr', ViewDescr); - return createModelFromState(repId, client, initialState, additionalColls); -}; diff --git a/src/testers.ts b/src/testers.ts index 9cb4b88..987edaa 100644 --- a/src/testers.ts +++ b/src/testers.ts @@ -8,8 +8,9 @@ * SPDX-License-Identifier: GPL-3.0-only ********************************************************************************/ import { find, includes, isArray, isEmpty } from 'lodash-es'; + import { JsonSchema7 } from './models/jsonSchema7'; -import { ViewElement } from './models/uischema'; +import { IViewKindElement } from './models/uischema'; /* eslint-disable @typescript-eslint/naming-convention */ @@ -22,7 +23,7 @@ export const NOT_APPLICABLE = -1; /** * A tester is a function that receives an UI schema and a JSON schema and returns a boolean. */ -export type Tester = (viewElement: ViewElement, schema: JsonSchema7) => boolean; +export type Tester = (viewKindElement: IViewKindElement, schema: JsonSchema7) => boolean; /** * A tester that allow composing other testers by && them. @@ -31,8 +32,8 @@ export type Tester = (viewElement: ViewElement, schema: JsonSchema7) => boolean; */ export const and = (...testers: Tester[]): Tester => - (viewElement: ViewElement, schema: JsonSchema7) => - testers.reduce((acc, tester) => acc && tester(viewElement, schema), true); + (viewKindElement: IViewKindElement, schema: JsonSchema7) => + testers.reduce((acc, tester) => acc && tester(viewKindElement, schema), true); /** * A tester that allow composing other testers by || them. @@ -41,8 +42,8 @@ export const and = */ export const or = (...testers: Tester[]): Tester => - (viewElement: ViewElement, schema: JsonSchema7) => - testers.reduce((acc, tester) => acc || tester(viewElement, schema), false); + (viewKindElement: IViewKindElement, schema: JsonSchema7) => + testers.reduce((acc, tester) => acc || tester(viewKindElement, schema), false); /** * Create a ranked tester that will associate a number with a given tester, if the @@ -53,8 +54,8 @@ export const or = */ export const rankWith = (rank: number, tester: Tester) => - (viewElement: ViewElement, schema: JsonSchema7): number => { - if (tester(viewElement, schema)) { + (viewKindElement: IViewKindElement, schema: JsonSchema7): number => { + if (tester(viewKindElement, schema)) { return rank; } @@ -68,8 +69,8 @@ export const rankWith = */ export const uiTypeIs = (expected: string): Tester => - (viewElement: ViewElement): boolean => - !isEmpty(viewElement) && viewElement.type === expected; + (viewKindElement: IViewKindElement): boolean => + !isEmpty(viewKindElement) && viewKindElement['@type'] === expected; /** * Checks whether the given UI schema has an option with the given @@ -81,19 +82,19 @@ export const uiTypeIs = */ export const optionIs = (optionName: string, optionValue: any): Tester => - (viewElement: ViewElement): boolean => { - if (isEmpty(viewElement)) { + (viewKindElement: IViewKindElement): boolean => { + if (isEmpty(viewKindElement)) { return false; } - const options = (viewElement as any).options; + const options = (viewKindElement as any).options; return !isEmpty(options) && options[optionName] === optionValue; }; /** * A ranked tester associates a tester with a number. */ -export declare type RankedTester = (viewElement: ViewElement, schema: JsonSchema7) => number; +export declare type RankedTester = (viewKindElement: IViewKindElement, schema: JsonSchema7) => number; export const hasType = (jsonSchema: JsonSchema7, expected: string): boolean => { return includes(deriveTypes(jsonSchema), expected); @@ -142,8 +143,8 @@ const deriveTypes = (jsonSchema: JsonSchema7): string[] => { */ export const schemaMatches = (predicate: (schema: JsonSchema7) => boolean): Tester => - (viewElement: ViewElement, schema: JsonSchema7): boolean => { - if (isEmpty(viewElement) /*|| !isControl(uischema)*/) { + (viewKindElement: IViewKindElement, schema: JsonSchema7): boolean => { + if (isEmpty(viewKindElement) /*|| !isControl(uischema)*/) { return false; } if (isEmpty(schema)) { @@ -193,24 +194,24 @@ export const formatIs = (expectedFormat: string): Tester => * has a 'date' format. * @type {Tester} */ -export const isDateControl = /*and(uiTypeIs('Control'),*/ formatIs('date' /*)*/); +export const isDateControl = /*and(uiTypeIs('aldkg:Control'),*/ formatIs('date' /*)*/); /** * Tests whether the given UI schema is of type Control and if the schema * has a 'date-time' format. * @type {Tester} */ -export const isDateTimeControl = /*and(uiTypeIs('Control'),*/ formatIs('date-time' /*)*/); +export const isDateTimeControl = /*and(uiTypeIs('aldkg:Control'),*/ formatIs('date-time' /*)*/); /** * Default tester for boolean. * @type {RankedTester} */ -export const isBooleanControl = /*and(uiTypeIs('Control'),*/ schemaTypeIs('boolean' /*)*/); +export const isBooleanControl = /*and(uiTypeIs('aldkg:Control'),*/ schemaTypeIs('boolean' /*)*/); export const isEnumControl = /*and( - uiTypeIs('Control'),*/ + uiTypeIs('aldkg:Control'),*/ or( schemaMatches((schema) => schema.enum !== undefined), schemaMatches((schema) => schema.const !== undefined), @@ -222,21 +223,21 @@ export const isEnumControl = * is of type integer * @type {Tester} */ -export const isIntegerControl = /*and(uiTypeIs('Control'),*/ schemaTypeIs('integer' /*)*/); +export const isIntegerControl = /*and(uiTypeIs('aldkg:Control'),*/ schemaTypeIs('integer' /*)*/); /** * Tests whether the given UI schema is of type Control and if the schema * is of type number * @type {Tester} */ -export const isNumberControl = /*and(uiTypeIs('Control'),*/ schemaTypeIs('number' /*)*/); +export const isNumberControl = /*and(uiTypeIs('aldkg:Control'),*/ schemaTypeIs('number' /*)*/); /** * Tests whether the given UI schema is of type Control and if the schema * is of type string * @type {Tester} */ -export const isStringControl = /*and(uiTypeIs('Control'),*/ schemaTypeIs('string' /*)*/); +export const isStringControl = /*and(uiTypeIs('aldkg:Control'),*/ schemaTypeIs('string' /*)*/); /** * Tests whether a given UI schema is of type Control, @@ -245,7 +246,7 @@ export const isStringControl = /*and(uiTypeIs('Control'),*/ schemaTypeIs('string * @type {Tester} */ export const isRangeControl = and( - /*uiTypeIs('Control'),*/ + /*uiTypeIs('aldkg:Control'),*/ or(schemaTypeIs('number'), schemaTypeIs('integer')), schemaMatches( (schema) => schema.maximum !== undefined && schema.minimum !== undefined && schema.default !== undefined, diff --git a/src/util/AntdModal.tsx b/src/util/AntdModal.tsx index 18c22b2..f48e4a5 100644 --- a/src/util/AntdModal.tsx +++ b/src/util/AntdModal.tsx @@ -15,7 +15,7 @@ import { SaveReqDialog } from './OnSaveDialog'; import { MstContext } from '../MstContext'; export const AntdModal: React.FC = observer( - ({ id, schema, viewElement, enabled, view, cells, childrenId, Render }) => { + ({ id, schema, viewKindElement, enabled, viewKind, cells, childrenId, Render }) => { const [visible, setVisible] = useState(false); const { store } = useContext(MstContext); @@ -41,7 +41,14 @@ export const AntdModal: React.FC = observer( cancelText='Отмена' width={1200} okText='Сохранить'> - + { diff --git a/src/util/ContextToProps.tsx b/src/util/ContextToProps.tsx index f3da76b..603b58a 100644 --- a/src/util/ContextToProps.tsx +++ b/src/util/ContextToProps.tsx @@ -16,7 +16,7 @@ import { observer } from 'mobx-react-lite'; import { createLabelDescriptionFrom } from './label'; import { LayoutComponent } from '../layouts/LayoutComponent'; -import { View, ViewElement } from '../models/uischema'; +import { IViewKindElement, IViewKind } from '../models/uischema'; import { ControlComponent, RenderProps } from '../Form'; //import { FilterType } from '../complex/Query'; import { validators } from '../validation'; @@ -52,17 +52,17 @@ export const withStoreToControlProps = (Component: React.FC): const successValidation = { validateStatus: 'success', }; - const { form, viewElement } = props; - const id = viewElement.resultsScope; + const { form, viewKindElement } = props; + const id = viewKindElement.resultsScope; const [validateObj, setValidateObj] = useState<{ validateStatus: string; help?: string; }>(successValidation); const [req] = id?.split('/') || []; - const [testReq, testUri] = viewElement.resultsScope?.split('/') || []; + const [testReq, testUri] = viewKindElement.resultsScope?.split('/') || []; const { store } = useContext(MstContext); const controlProps = mapStateToControlProps(props); - //const custom = view.properties && view.properties[req] ? view.properties[req].customReq : undefined; + //const custom = viewKind.properties && viewKind.properties[req] ? viewKind.properties[req].customReq : undefined; //custom ? store.loadData(req, custom.req) : store.loadData(testReq); const coll = store.getColl(testReq); let data = coll?.data; @@ -72,19 +72,19 @@ export const withStoreToControlProps = (Component: React.FC): data = getSnapshot(data); data = data[0]; const onValidate = (data: any) => { - if (viewElement.options && Array.isArray(viewElement.options.validation)) { - const validation = viewElement.options.validation; + if (viewKindElement.options && Array.isArray(viewKindElement.options.validation)) { + const validation = viewKindElement.options.validation; const idx = validation.findIndex((el: any) => !validators[el.validator](data, el.propsToValidator)); if (idx !== -1) { const { validateStatus, help } = validation[idx]; - store.setOnValidate(form, viewElement.resultsScope, false); + store.setOnValidate(form, viewKindElement.resultsScope, false); setValidateObj({ validateStatus, help, }); } else { setValidateObj(successValidation); - store.setOnValidate(form, viewElement.resultsScope, true); + store.setOnValidate(form, viewKindElement.resultsScope, true); } } }; @@ -100,28 +100,29 @@ export const withStoreToControlProps = (Component: React.FC): {...controlProps} handleChange={(data: any) => { form - ? store.onChangeFormData(form, viewElement.resultsScope, data) - : store.onChangeData(viewElement.resultsScope, data); + ? store.onChangeFormData(form, viewKindElement.resultsScope, data) + : store.onChangeData(viewKindElement.resultsScope, data); }} /> ); }); + export const withStoreToFormProps = (Component: React.FC): React.FC => - observer(({ viewElement, view, enabled, form }) => { - if (!view['@id']) { + observer(({ viewKindElement, viewKind, enabled, form }) => { + if (!viewKind['@id']) { return null; } - const title = viewElement.options ? viewElement.options.title : ''; - const id = viewElement['@id']; - const enabledLayout = enabled && checkProperty('editable', id, viewElement, view); - const visible = checkProperty('visible', id, viewElement, view); + const title = viewKindElement.options ? viewKindElement.options.title : ''; + const id = viewKindElement['@id']; + const enabledLayout = enabled && checkProperty('editable', id, viewKindElement, viewKind); + const visible = checkProperty('visible', id, viewKindElement, viewKind); const { store } = useContext(MstContext); return ( store.onSaveFormData(id)} @@ -133,23 +134,24 @@ export const withStoreToFormProps = (Component: React.FC): React.FC ); }); + export const withStoreToViewClassProps = (Component: any): any => observer(({ ...props }: any) => { - const { viewElement, view } = props; + const { viewKindElement, viewKind } = props; const { store } = useContext(MstContext); - const scope = viewElement.resultsScope; + const scope = viewKindElement.resultsScope; if (!store.getSelectedDataJs(scope)) { return ; } //const id = store.getSelectedDataJs(scope).type; - return ; + return ; }); export const withStoreToViewProps = (Component: any): any => observer(({ ...props }: any) => { - const { view, viewElement } = props; + const { viewKind, viewKindElement } = props; const { store } = useContext(MstContext); - const scope = viewElement.resultsScope; + const scope = viewKindElement.resultsScope; const coll = store.getColl(scope); let data = coll?.data; if (!data) { @@ -159,8 +161,8 @@ export const withStoreToViewProps = (Component: any): any => return ; } data = getSnapshot(data); - //if (viewElement.resultsScope && !store.saveLogicTree[viewElement.resultsScope]) { - // store.setSaveLogic(viewElement.resultsScope); + //if (viewKindElement.resultsScope && !store.saveLogicTree[viewKindElement.resultsScope]) { + // store.setSaveLogic(viewKindElement.resultsScope); //} //const id = store.getSelectedDataJs(scope)['@type']; //const selection = getSnapshot(store.selectedData); @@ -169,13 +171,13 @@ export const withStoreToViewProps = (Component: any): any => return ; } const newViewElement = newView; - console.log('withStoreToViewProps', { view, viewElement, newView, newViewElement }); + console.log('withStoreToViewProps', { viewKind, viewKindElement, newView, newViewElement }); return ( store.setEditing(viewElement.resultsScope, state)} + viewKindElement={newViewElement} + viewKind={newView} + onChange={(state: boolean) => store.setEditing(viewKindElement.resultsScope, state)} /> ); }); @@ -184,21 +186,23 @@ export const withStoreToModalProps = (Component: any): any => observer(({ ...props }: any) => { return ; }); + export const withStoreToButtonProps = (Component: any): any => observer(({ ...props }: any) => { - const { schema, viewElement } = props; + const { schema, viewKindElement } = props; const { store } = useContext(MstContext); - if (viewElement.resultsScope && !store.saveLogicTree[viewElement.resultsScope]) { - store.setSaveLogic(viewElement.resultsScope); + if (viewKindElement.resultsScope && !store.saveLogicTree[viewKindElement.resultsScope]) { + store.setSaveLogic(viewKindElement.resultsScope); } - const options = viewElement.options || {}; + const options = viewKindElement.options || {}; return {}} options={options} />; }); + export const withStoreToCellProps = (Component: React.FC): React.FC => observer((props: any) => { - const { data, onMeasureChange, height, uri, CKey, rowData, viewElement } = props; - const path = viewElement.scope ? viewElement.scope.split('/').join('.') : null; + const { data, onMeasureChange, height, uri, CKey, rowData, viewKindElement } = props; + const path = viewKindElement.scope ? viewKindElement.scope.split('/').join('.') : null; const controlProps = mapStateToControlProps(props); /*const { store } = useRootCtx(); const onSave = (data: any) => { @@ -223,15 +227,15 @@ export const withStoreToCellProps = (Component: React.FC): React.FC => export const withStoreToDataControlProps = (Component: any): any => observer(({ ...props }: any) => { - const { viewElement, view } = props; + const { viewKindElement, viewKind } = props; const { store } = useContext(MstContext); - //if (viewElement.resultsScope && !store.saveLogicTree[viewElement.resultsScope]) { - // store.setSaveLogic(viewElement.resultsScope); + //if (viewKindElement.resultsScope && !store.saveLogicTree[viewKindElement.resultsScope]) { + // store.setSaveLogic(viewKindElement.resultsScope); //} - const custom = view[viewElement.resultsScope.split('/')[0]] - ? view[view.resultsScope.split('/')[0]].customReq + const custom = viewKind[viewKindElement.resultsScope.split('/')[0]] + ? viewKind[viewKind.resultsScope.split('/')[0]].customReq : undefined; - const scope = custom ? custom : viewElement.resultsScope; + const scope = custom ? custom : viewKindElement.resultsScope; const coll = store.getColl(scope); let data = coll?.data; if (!data || data.length === 0) { @@ -240,7 +244,7 @@ export const withStoreToDataControlProps = (Component: any): any => return ; } data = cloneDeep(getSnapshot(data)); - const options = viewElement.options || {}; + const options = viewKindElement.options || {}; const withConnections = options.connections; const onChange = (data: any) => { /*if (data) { @@ -278,7 +282,7 @@ export const withStoreToDataControlProps = (Component: any): any => uri={scope} dataSource={data} editing={store.editingData.get(scope)} - viewElement={viewElement} + viewKindElement={viewKindElement} handleChange={onChange} onCreateFolder={onCreateFolder} getData={getData} @@ -292,17 +296,17 @@ export const withStoreToDataControlProps = (Component: any): any => export const withStoreToSelectControlProps = (Component: any): any => observer(({ ...props }: any) => { - const { viewElement, view } = props; + const { viewKindElement, viewKind } = props; const { store } = useContext(MstContext); - const id = view['@id']; - const scope = viewElement.resultsScope; + const id = viewKind['@id']; + const scope = viewKindElement.resultsScope; const coll = store.getColl(scope); let data = coll?.data; if (!data) { return ; } data = getSnapshot(data); - const options = viewElement.options || {}; + const options = viewKindElement.options || {}; const withConnections = options.connections; const onChange = (data: any) => { console.log('withStoreToSelectControlProps onChange', data); @@ -317,8 +321,8 @@ export const withStoreToSelectControlProps = (Component: any): any => return ( @@ -327,16 +331,16 @@ export const withStoreToSelectControlProps = (Component: any): any => export const withStoreToTabProps = (Component: any): any => observer(({ ...props }: any) => { - const { schema, viewElement, view } = props; + const { schema, viewKindElement, viewKind } = props; const { store } = useContext(MstContext); - //if (viewElement.resultsScope && !store.saveLogicTree[viewElement.resultsScope]) { - // store.setSaveLogic(viewElement.resultsScope); + //if (viewKindElement.resultsScope && !store.saveLogicTree[viewKindElement.resultsScope]) { + // store.setSaveLogic(viewKindElement.resultsScope); //} - const options = viewElement.options || {}; - const custom = view[viewElement.resultsScope.split('/')[0]] - ? view[viewElement.resultsScope.split('/')[0]].customReq + const options = viewKindElement.options || {}; + const custom = viewKind[viewKindElement.resultsScope.split('/')[0]] + ? viewKind[viewKindElement.resultsScope.split('/')[0]].customReq : undefined; - const scope = custom ? custom : viewElement.resultsScope; + const scope = custom ? custom : viewKindElement.resultsScope; const coll = store.getColl(scope); let data = coll?.data; if (!data) { @@ -360,16 +364,16 @@ export const withStoreToTabProps = (Component: any): any => export const withStoreToMenuProps = (Component: any): any => observer(({ ...props }: any) => { - const { schema, viewElement, view } = props; + const { schema, viewKindElement, viewKind } = props; const { store } = useContext(MstContext); - //if (viewElement.resultsScope && !store.saveLogicTree[viewElement.resultsScope]) { - // store.setSaveLogic(viewElement.resultsScope); + //if (viewKindElement.resultsScope && !store.saveLogicTree[viewKindElement.resultsScope]) { + // store.setSaveLogic(viewKindElement.resultsScope); //} - const options = viewElement.options || {}; - const custom = view[viewElement.resultsScope.split('/')[0]] - ? view[viewElement.resultsScope.split('/')[0]].customReq + const options = viewKindElement.options || {}; + const custom = viewKind[viewKindElement.resultsScope.split('/')[0]] + ? viewKind[viewKindElement.resultsScope.split('/')[0]].customReq : undefined; - const scope = custom ? custom : viewElement.resultsScope; + const scope = custom ? custom : viewKindElement.resultsScope; const coll = store.getColl(scope); let data = coll?.data; if (!data) { @@ -378,9 +382,11 @@ export const withStoreToMenuProps = (Component: any): any => data = getSnapshot(data); return ( e.options && e.options.modal) : []} + modals={ + viewKindElement.elements ? viewKindElement.elements.filter((e: any) => e.options && e.options.modal) : [] + } schema={schema} - view={view} + viewKind={viewKind} uri={scope} tabs={data} handleChange={(data: JsObject) => store.setSelectedData(scope, data)} @@ -392,24 +398,24 @@ export const withStoreToMenuProps = (Component: any): any => export const withStoreToCollapseProps = (Component: any): any => observer(({ ...props }: any) => { - const { viewElement, view } = props; - const options = viewElement.options || {}; + const { viewKindElement, viewKind } = props; + const options = viewKindElement.options || {}; - return ; + return ; }); export const withStoreToArrayProps = (Component: any): any => observer(({ ...props }: any) => { - const { schema, viewElement, view } = props; + const { schema, viewKindElement, viewKind } = props; const { store } = useContext(MstContext); - //if (viewElement.resultsScope && !store.saveLogicTree[viewElement.resultsScope]) { - // store.setSaveLogic(viewElement.resultsScope); + //if (viewKindElement.resultsScope && !store.saveLogicTree[viewKindElement.resultsScope]) { + // store.setSaveLogic(viewKindElement.resultsScope); //} - const options = viewElement.options || {}; - const custom = view[viewElement.resultsScope.split('/')[0]] - ? view[viewElement.resultsScope.split('/')[0]].customReq + const options = viewKindElement.options || {}; + const custom = viewKind[viewKindElement.resultsScope.split('/')[0]] + ? viewKind[viewKindElement.resultsScope.split('/')[0]].customReq : undefined; - const scope = custom ? custom : viewElement.resultsScope; + const scope = custom ? custom : viewKindElement.resultsScope; const coll = store.getColl(scope); let data = coll?.data; if (!data) { @@ -430,14 +436,14 @@ export const withStoreToArrayProps = (Component: any): any => });*/ }; const loadExpandedData = (subject: string) => { - //const newQuery = store.queries[viewElement.resultsScope]; + //const newQuery = store.queries[viewKindElement.resultsScope]; //newQuery.shapes[0].conditions = { ...newQuery.shapes[0].conditions, parentBinding: subject }; return data; //store.getDataByQuery(newQuery); }; return ( }); export const withLayoutProps = (Component: React.FC): React.FC => - observer(({ viewElement, view, enabled, form }) => { - const id = viewElement['@id'] || ''; - const enabledLayout = enabled && checkProperty('editable', id, viewElement, view); - const visible = checkProperty('visible', id, viewElement, view); + observer(({ viewKindElement, viewKind, enabled, form }) => { + const id = viewKindElement['@id'] || ''; + const enabledLayout = enabled && checkProperty('editable', id, viewKindElement, viewKind); + const visible = checkProperty('visible', id, viewKindElement, viewKind); const { store } = useContext(MstContext); - if (viewElement.options && viewElement.options.connections) { - viewElement.options.connections.forEach((e: any) => store.setSaveLogic(e.from, e.to)); + if (viewKindElement.options && viewKindElement.options.connections) { + viewKindElement.options.connections.forEach((e: any) => store.setSaveLogic(e.from, e.to)); } - return ; + return ( + + ); }); export const withStoreToSaveButtonProps = (Component: React.FC): React.FC => - observer(({ viewElement, view, enabled }) => { + observer(({ viewKindElement, enabled }) => { const { store } = useContext(MstContext); - if (viewElement.resultsScope && !store.saveLogicTree[viewElement.resultsScope]) { - store.setSaveLogic(viewElement.resultsScope); + if (viewKindElement.resultsScope && !store.saveLogicTree[viewKindElement.resultsScope]) { + store.setSaveLogic(viewKindElement.resultsScope); } - const key = viewElement.resultsScope; + const key = viewKindElement.resultsScope; return ( ): Rea return ; }); -const mapStateToControlProps = ({ id, schema, viewElement, view, enabled }: ToControlProps) => { +const mapStateToControlProps = ({ id, schema, viewKindElement, viewKind, enabled }: ToControlProps) => { const pathSegments = id.split('/'); const path = pathSegments.join('.properties.'); - const visible = checkProperty('visible', path, viewElement, view); - const editable = viewElement.options && 'editable' in viewElement.options ? viewElement.options.editable : true; + const visible = checkProperty('visible', path, viewKindElement, viewKind); + const editable = + viewKindElement.options && 'editable' in viewKindElement.options ? viewKindElement.options.editable : true; const required = true; - const uiOptions = viewElement.options; + const uiOptions = viewKindElement.options; const description = schema.description || ''; - const labelDesc = createLabelDescriptionFrom(viewElement as any, schema); + const labelDesc = createLabelDescriptionFrom(viewKindElement as any, schema); const label = labelDesc.show ? (labelDesc.text as string) : ''; const key = pathSegments[1]; return { @@ -516,9 +531,9 @@ const mapStateToControlProps = ({ id, schema, viewElement, view, enabled }: ToCo }; }; -const checkProperty = (property: Property, path: string, viewElement: ViewElement, view: View) => { - const viewClassProp = viewElement.options; - const viewProp = get(view, path); +const checkProperty = (property: Property, path: string, viewKindElement: IViewKindElement, viewKind: IViewKind) => { + const viewClassProp = viewKindElement.options; + const viewProp = get(viewKind, path); if (viewClassProp && viewClassProp[property]) { return viewClassProp[property]; } else if (viewProp && viewProp[property]) { diff --git a/src/util/layout.tsx b/src/util/layout.tsx index f918a6d..515a2e6 100644 --- a/src/util/layout.tsx +++ b/src/util/layout.tsx @@ -9,7 +9,7 @@ ********************************************************************************/ import React from 'react'; -import { ViewElement } from '../models/uischema'; +import { IViewKindElement } from '../models/uischema'; import { FormsDispatchProps } from '../Form'; export declare type Idx = { @@ -17,16 +17,16 @@ export declare type Idx = { }; export interface RenderLayoutProps extends FormsDispatchProps { - viewElement: ViewElement; + viewKindElement: IViewKindElement; Render: React.FC; } -export const renderLayoutElements = ({ viewElement, view, enabled, Render }: RenderLayoutProps) => { - const elements = viewElement.elements; - //const id = view['@id']; - //const sort = id ? view.properties && view.properties[id] && view.properties[id].order : undefined; +export const renderLayoutElements = ({ viewKindElement, viewKind, enabled, Render }: RenderLayoutProps) => { + const elements = viewKindElement.elements; + //const id = viewKind['@id']; + //const sort = id ? viewKind.properties && viewKind.properties[id] && viewKind.properties[id].order : undefined; if (!elements || elements.length === 0) return <>; - return elements.map((el: ViewElement, idx: number) => ( - + return elements.map((el: IViewKindElement, idx: number) => ( + )); }; diff --git a/stories/AntdCardCell.stories.tsx b/stories/AntdCardCell.stories.tsx index 4358d1f..341c2e7 100644 --- a/stories/AntdCardCell.stories.tsx +++ b/stories/AntdCardCell.stories.tsx @@ -24,8 +24,9 @@ import { MstContextProvider, RendererRegistryEntry, } from '../src'; -import { viewKindCollConstr, viewDescrCollConstr } from '../src/stores/ViewCollConstrs'; -import { createUiModelFromState } from '../src/stores/ViewDescr'; +import { viewKindCollConstr, viewDescrCollConstr } from '../src/models/ViewCollConstrs'; +import { createUiModelFromState, registerMstViewKindSchema } from '../src/models/MstViewDescr'; +import { MstVerticalLayout } from '../src/models/MstViewSchemas'; const antdRenderers: RendererRegistryEntry[] = [ ...antdControlRenderers, @@ -37,7 +38,6 @@ const viewKinds = [ { '@id': 'mktp:CardCellGridViewKind', '@type': 'aldkg:ViewKind', - type: 'VerticalLayout', collsConstrs: [ { '@id': 'mktp:ViewKind_Cards_Coll', @@ -51,176 +51,193 @@ const viewKinds = [ ], }, ], - options: { - //width: 'all-empty-space', - }, // child ui elements configs elements: [ { - type: 'DataControl', - resultsScope: 'mktp:ViewKind_Cards_Coll', - options: { - renderType: 'grid', - grid: { - gutter: 16, - xs: 2, - sm: 2, - md: 3, - lg: 3, - xl: 4, - xxl: 7, - }, - elementTemplate: [ - { - type: 'CardLayout', - elements: [ - { - type: 'ImageCell', - scope: 'imageUrl', - }, - { - type: 'Control', - scope: 'name', - options: { - editable: false, - style: { - height: '3.5em', - textAlign: 'left', - fontFamily: 'Lato,Tahoma,sans-serif', - overflow: 'hidden', - textOverflow: 'ellipsis', - margin: 0, - }, - }, - }, - { - type: 'Rate', - scope: 'starsValue', - options: { - editable: false, - }, - }, + '@id': 'mktp:_29kFg89', + '@type': 'aldkg:VerticalLayout', + elements: [ + { + '@id': 'mktp:_24Hdr78', + '@type': 'aldkg:DataControl', + resultsScope: 'mktp:ViewKind_Cards_Coll', + options: { + renderType: 'grid', + grid: { + gutter: 16, + xs: 2, + sm: 2, + md: 3, + lg: 3, + xl: 4, + xxl: 7, + }, + elementTemplate: [ { - type: 'CellHorizontalLayout', - options: { - justify: 'space-between', - }, + '@id': 'mktp:_94hfT67', + '@type': 'aldkg:CardLayout', elements: [ { - type: 'Control', - scope: 'price', + '@id': 'mktp:_kje733js', + '@type': 'aldkg:ImageCell', + scope: 'imageUrl', + }, + { + '@id': 'mktp:_jw563df', + '@type': 'aldkg:Control', + scope: 'name', options: { - formatter: 'labeledValue', editable: false, - label: 'Цена', - specialChar: '₽', style: { + height: '3.5em', textAlign: 'left', fontFamily: 'Lato,Tahoma,sans-serif', - color: 'gray', + overflow: 'hidden', + textOverflow: 'ellipsis', + margin: 0, }, }, }, { - type: 'Control', - scope: 'totalSales', + '@id': 'mktp:_84gdY576', + '@type': 'aldkg:Rate', + scope: 'starsValue', + options: { + editable: false, + }, + }, + { + '@id': 'mktp:_934Hfg78', + '@type': 'aldkg:CellHorizontalLayout', + options: { + justify: 'space-between', + }, + elements: [ + { + '@id': 'mktp:_kfg67we', + '@type': 'aldkg:Control', + scope: 'price', + options: { + formatter: 'labeledValue', + editable: false, + label: 'Цена', + specialChar: '₽', + style: { + textAlign: 'left', + fontFamily: 'Lato,Tahoma,sans-serif', + color: 'gray', + }, + }, + }, + { + '@id': 'mktp:_jdf782fK', + '@type': 'aldkg:Control', + scope: 'totalSales', + options: { + formatter: 'labeledValue', + editable: false, + label: 'Всего продано', + style: { + textAlign: 'right', + fontFamily: 'Lato,Tahoma,sans-serif', + color: 'gray', + }, + }, + }, + ], + }, + { + '@id': 'mktp:_Udf783d', + '@type': 'aldkg:Control', + scope: 'lastMonthSalesAmount', options: { - formatter: 'labeledValue', editable: false, - label: 'Всего продано', + formatter: 'сomparison', + dataToFormatter: { + prevValue: 'prevMonthSalesAmount', + }, + label: 'Продажи за месяц', style: { - textAlign: 'right', + textAlign: 'left', fontFamily: 'Lato,Tahoma,sans-serif', color: 'gray', }, }, }, - ], - }, - { - type: 'Control', - scope: 'lastMonthSalesAmount', - options: { - editable: false, - formatter: 'сomparison', - dataToFormatter: { - prevValue: 'prevMonthSalesAmount', - }, - label: 'Продажи за месяц', - style: { - textAlign: 'left', - fontFamily: 'Lato,Tahoma,sans-serif', - color: 'gray', - }, - }, - }, - { - type: 'Control', - scope: 'lastMonthSalesValue', - options: { - formatter: 'сomparison', - editable: false, - dataToFormatter: { - prevValue: 'prevMonthSalesValue', - }, - label: 'Объем продаж', - style: { - textAlign: 'left', - fontFamily: 'Lato,Tahoma,sans-serif', - color: 'gray', - }, - }, - }, - { - type: 'G2', - }, - { - type: 'CellHorizontalLayout', - options: { - justify: 'space-around', - }, - elements: [ { - type: 'Control', - scope: '@id', + '@id': 'mktp:_iw789dd', + '@type': 'aldkg:Control', + scope: 'lastMonthSalesValue', options: { - style: { - border: '1.5px solid black', - borderRadius: '2px', - height: '2em', - textAlign: 'center', - fontWeight: 500, - width: '90px', - color: 'black', - }, - specialImage: 'https://www.meme-arsenal.com/memes/f8e9bfb9fdf368272b21a5dac8f01ec1.jpg', + formatter: 'сomparison', editable: false, - formatter: 'link', dataToFormatter: { - link: '@id', + prevValue: 'prevMonthSalesValue', + }, + label: 'Объем продаж', + style: { + textAlign: 'left', + fontFamily: 'Lato,Tahoma,sans-serif', + color: 'gray', }, - label: 'Wildberries', }, }, { - type: 'Button', + '@id': 'mktp:_385hgf67', + '@type': 'aldkg:G2', + }, + { + '@id': 'mktp:_jfg789df', + '@type': 'aldkg:CellHorizontalLayout', options: { - label: 'Добавить', - style: { - border: '1.5px solid black', - borderRadius: '2px', - width: '90px', - fontWeight: 500, - color: 'black', - }, + justify: 'space-around', }, + elements: [ + { + '@id': 'mktp:_45jdfg78', + '@type': 'aldkg:Control', + scope: '@id', + options: { + style: { + border: '1.5px solid black', + borderRadius: '2px', + height: '2em', + textAlign: 'center', + fontWeight: 500, + width: '90px', + color: 'black', + }, + specialImage: 'https://www.meme-arsenal.com/memes/f8e9bfb9fdf368272b21a5dac8f01ec1.jpg', + editable: false, + formatter: 'link', + dataToFormatter: { + link: '@id', + }, + label: 'Wildberries', + }, + }, + { + '@id': 'mktp:_dfg897', + '@type': 'aldkg:Button', + options: { + label: 'Добавить', + style: { + border: '1.5px solid black', + borderRadius: '2px', + width: '90px', + fontWeight: 500, + color: 'black', + }, + }, + }, + ], }, ], }, ], }, - ], - }, + }, + ], }, ], }, @@ -231,11 +248,10 @@ const viewDescrs = [ '@id': 'mktp:CardCellViewDescr', '@type': 'aldkg:ViewDescr', viewKind: 'mktp:CardCellGridViewKind', - type: 'VerticalLayout', title: 'CardCellGrid', description: 'CardCellGrid', collsConstrs: [ - { + /*{ '@id': 'mktp:ViewDescr_Cards_Coll', '@type': 'aldkg:CollConstr', entConstrs: [ @@ -245,11 +261,9 @@ const viewDescrs = [ schema: 'hs:ProductCardShape', }, ], - }, + },*/ ], - options: { - //width: 'all-empty-space', - }, + options: {}, // child ui elements configs elements: [], }, @@ -279,6 +293,8 @@ const additionalColls: CollState[] = [ }, ]; +registerMstViewKindSchema('aldkg:VerticalLayout', MstVerticalLayout); + const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server'); const rootStore = createUiModelFromState('mktp', client, rootModelInitialState, additionalColls); console.log('rootStore', rootStore); @@ -305,11 +321,7 @@ export const Empty: Story<{}> = () => ( margin: '0 auto', padding: '5px', }}> -
+ diff --git a/stories/Form.stories.tsx b/stories/Form.stories.tsx index 2396acf..57bd827 100644 --- a/stories/Form.stories.tsx +++ b/stories/Form.stories.tsx @@ -23,18 +23,18 @@ import { antdControlRenderers, antdLayoutRenderers, } from '../src'; -import { viewKindCollConstr, viewDescrCollConstr } from '../src/stores/ViewCollConstrs'; -import { createUiModelFromState } from '../src/stores/ViewDescr'; +import { viewKindCollConstr, viewDescrCollConstr } from '../src/models/ViewCollConstrs'; +import { createUiModelFromState } from '../src/models/MstViewDescr'; const antdRenderers: RendererRegistryEntry[] = [...antdControlRenderers, ...antdLayoutRenderers]; const viewKinds = [ { '@id': 'rm:FormViewKind', - '@type': 'aldkg:ViewDescr', + '@type': 'aldkg:ViewKind', title: 'Малая форма', description: 'Small form', - type: 'FormLayout', + collsConstrs: [ { '@id': 'rm:FormView_Artifacts_Coll', @@ -51,28 +51,37 @@ const viewKinds = [ ], elements: [ { - type: 'Control', - resultsScope: 'rm:FormView_Artifacts_Coll/creator', - }, - { - type: 'Control', - resultsScope: 'rm:FormView_Artifacts_Coll/assetFolder', - }, - { - type: 'Control', - resultsScope: 'rm:FormView_Artifacts_Coll/description', - options: { - validation: [ - { - validator: 'RegExp', - propsToValidator: { - regExp: 'bo*', - }, - validateStatus: 'error', - help: 'Работает', + '@id': 'rm:_83hd7f', + '@type': 'aldkg:FormLayout', + elements: [ + { + '@id': 'rm:_17Gj78', + '@type': 'aldkg:Control', + resultsScope: 'rm:FormView_Artifacts_Coll/creator', + }, + { + '@id': 'rm:_297Hgf56', + '@type': 'aldkg:Control', + resultsScope: 'rm:FormView_Artifacts_Coll/assetFolder', + }, + { + '@id': 'rm:_934jHd67', + '@type': 'aldkg:Control', + resultsScope: 'rm:FormView_Artifacts_Coll/description', + options: { + validation: [ + { + validator: 'RegExp', + propsToValidator: { + regExp: 'bo*', + }, + validateStatus: 'error', + help: 'Работает', + }, + ], }, - ], - }, + }, + ], }, ], }, @@ -83,13 +92,9 @@ const viewDescrs = [ '@id': 'rm:FormViewDescr', '@type': 'aldkg:ViewDescr', viewKind: 'rm:FormViewKind', - type: 'VerticalLayout', title: 'CardCellGrid', description: 'CardCellGrid', collsConstrs: [], - options: { - //width: 'all-empty-space', - }, // child ui elements configs elements: [], }, @@ -137,11 +142,7 @@ const Template: Story = (args: any) => (
- +
diff --git a/stories/Tree.stories.tsx b/stories/Tree.stories.tsx index 7b7fbae..cece893 100644 --- a/stories/Tree.stories.tsx +++ b/stories/Tree.stories.tsx @@ -138,13 +138,13 @@ export default { export const Empty: Story<{}> = () => (
= () => (
- +
diff --git a/stories/TreeAndFormArtifact.stories.tsx b/stories/TreeAndFormArtifact.stories.tsx index 924c5aa..ac98d14 100644 --- a/stories/TreeAndFormArtifact.stories.tsx +++ b/stories/TreeAndFormArtifact.stories.tsx @@ -24,8 +24,8 @@ import { MstContextProvider, RendererRegistryEntry, } from '../src'; -import { viewKindCollConstr, viewDescrCollConstr } from '../src/stores/ViewCollConstrs'; -import { createUiModelFromState } from '../src/stores/ViewDescr'; +import { viewKindCollConstr, viewDescrCollConstr } from '../src/models/ViewCollConstrs'; +import { createUiModelFromState } from '../src/models/MstViewDescr'; const antdRenderers: RendererRegistryEntry[] = [ ...antdControlRenderers, @@ -35,8 +35,8 @@ const antdRenderers: RendererRegistryEntry[] = [ const viewKinds = [ { - '@id': 'mktp:TreeAndFormArtifactViewKind', - '@type': 'aldkg:ViewDescr', + '@id': 'rm:TreeAndFormArtifactViewKind', + '@type': 'aldkg:ViewKind', title: 'TreeAndForm', description: 'TreeAndForm', collsConstrs: [ @@ -64,54 +64,63 @@ const viewKinds = [ //orderBy: [{ expression: variable('identifier0'), descending: false }], }, ], - type: 'SplitPaneLayout', - options: { - defaultSize: { - 'rm:Folders_Coll': '17%', - ArtifactForm: '83%', - }, - height: 'all-empty-space', - //width: 'all-empty-space', - }, // child ui elements configs elements: [ { - type: 'DataControl', - resultsScope: 'rm:Folders_Coll', - options: { - renderType: 'tree', - }, - }, - { - '@id': 'ArtifactForm', - type: 'FormLayout', + '@id': 'rm:_kf8Df7', + '@type': 'aldkg:SplitPaneLayout', options: { - title: 'Aртефакт', + defaultSize: { + 'rm:Folders_Coll': '17%', + 'rm:_fgu778f': '83%', + }, + height: 'all-empty-space', + //width: 'all-empty-space', }, elements: [ { - type: 'Control', - resultsScope: 'rm:Artifacts_Coll/creator', - }, - { - type: 'Control', - resultsScope: 'rm:Artifacts_Coll/assetFolder', + '@id': 'rm:_9fKJ7dv', + '@type': 'aldkg:DataControl', + resultsScope: 'rm:Folders_Coll', + options: { + renderType: 'tree', + }, }, { - type: 'Control', - resultsScope: 'rm:Artifacts_Coll/description', + '@id': 'rm:_fgu778f', + '@type': 'aldkg:FormLayout', options: { - validation: [ - { - validator: 'RegExp', - propsToValidator: { - regExp: 'bo*', - }, - validateStatus: 'error', - help: 'Работает', - }, - ], + title: 'Aртефакт', }, + elements: [ + { + '@id': 'rm:_kf8Jdf', + '@type': 'aldkg:Control', + resultsScope: 'rm:Artifacts_Coll/creator', + }, + { + '@id': 'rm:_9dF78', + '@type': 'aldkg:Control', + resultsScope: 'rm:Artifacts_Coll/assetFolder', + }, + { + '@id': 'rm:_37Jdf67', + '@type': 'aldkg:Control', + resultsScope: 'rm:Artifacts_Coll/description', + options: { + validation: [ + { + validator: 'RegExp', + propsToValidator: { + regExp: 'bo*', + }, + validateStatus: 'error', + help: 'Работает', + }, + ], + }, + }, + ], }, ], }, @@ -121,16 +130,13 @@ const viewKinds = [ const viewDescrs = [ { - '@id': 'mktp:TreeAndFormArtifactViewDescr', + '@id': 'rm:TreeAndFormArtifactViewDescr', '@type': 'aldkg:ViewDescr', - viewKind: 'mktp:TreeAndFormArtifactViewKind', - type: 'VerticalLayout', + viewKind: 'rm:TreeAndFormArtifactViewKind', title: 'CardCellGrid', description: 'CardCellGrid', collsConstrs: [], - options: { - //width: 'all-empty-space', - }, + options: {}, // child ui elements configs elements: [], }, @@ -178,11 +184,7 @@ export const Empty: Story<{}> = () => (
- +
diff --git a/stories/TreeAndFormColumns.stories.tsx b/stories/TreeAndFormColumns.stories.tsx index 3847a6b..05b067a 100644 --- a/stories/TreeAndFormColumns.stories.tsx +++ b/stories/TreeAndFormColumns.stories.tsx @@ -24,8 +24,8 @@ import { MstContextProvider, RendererRegistryEntry, } from '../src'; -import { viewKindCollConstr, viewDescrCollConstr } from '../src/stores/ViewCollConstrs'; -import { createUiModelFromState } from '../src/stores/ViewDescr'; +import { viewKindCollConstr, viewDescrCollConstr } from '../src/models/ViewCollConstrs'; +import { createUiModelFromState } from '../src/models/MstViewDescr'; const antdRenderers: RendererRegistryEntry[] = [ ...antdControlRenderers, @@ -36,7 +36,7 @@ const antdRenderers: RendererRegistryEntry[] = [ const viewKinds = [ { '@id': 'mktp:TreeAndFormViewKind', - '@type': 'aldkg:ViewDescr', + '@type': 'aldkg:ViewKind', title: 'TreeAndForm', description: 'TreeAndForm', collsConstrs: [ @@ -53,169 +53,195 @@ const viewKinds = [ //orderBy: [{ expression: variable('identifier0'), descending: false }], }, ], - type: 'SplitPaneLayout', - options: { - defaultSize: { - 'rm:Folders_Coll': '17%', - ArtifactForm: '83%', - }, - height: 'all-empty-space', - //width: 'all-empty-space', - }, // child ui elements configs elements: [ { - '@id': 'ArtifactForm', - type: 'HorizontalLayout', + '@id': 'mktp:_92Jf4u78', + '@type': 'aldkg:SplitPaneLayout', options: { - justify: 'start', // start end center space-between space-around - //contentSize: true, - style: { - //flexGrow: '5', - width: '100%', + defaultSize: { + 'rm:Folders_Coll': '17%', + 'mktp:_87Dfg78': '83%', }, - width: 'all-empty-space', + height: 'all-empty-space', + //width: 'all-empty-space', }, elements: [ { - type: 'VerticalLayout', - options: { - style: { - width: '50%', - }, - width: 'all-empty-space', - }, - elements: [ - /*{ - type: 'Control', - resultsScope: 'rm:Cards_Coll/identifier', - },*/ - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/name', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/country', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/brand', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/price', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/saleValue', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/seller', - }, - ], - }, - { - type: 'VerticalLayout', + '@id': 'mktp:_87Dfg78', + '@type': 'aldkg:HorizontalLayout', options: { + justify: 'start', // start end center space-between space-around + //contentSize: true, style: { - width: '50%', + //flexGrow: '5', + width: '100%', }, width: 'all-empty-space', }, elements: [ { - type: 'Control', - resultsScope: 'rm:Cards_Coll/categoryPopularity', + '@id': 'mktp:_93JhdA78', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + width: '50%', + }, + width: 'all-empty-space', + }, + elements: [ + /*{ + '@id': 'mktp:_92KdFj6', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/identifier', + },*/ + { + '@id': 'mktp:_63JdF67', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/name', + }, + { + '@id': 'mktp:_Kjd7F7s8', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/country', + }, + { + '@id': 'mktp:_Kf893Jd6', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/brand', + }, + { + '@id': 'mktp:_K84jd^', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/price', + }, + { + '@id': 'mktp:_dF7jdF6', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/saleValue', + }, + { + '@id': 'mktp:_93Kdf7j', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/seller', + }, + ], }, { - type: 'Control', - resultsScope: 'rm:Cards_Coll/commentsCount', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/starsValue', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/questionsCount', - }, + '@id': 'mktp:_87Kdf3Ry7', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + width: '50%', + }, + width: 'all-empty-space', + }, + elements: [ + { + '@id': 'mktp:_93Kd8hH', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/categoryPopularity', + }, + { + '@id': 'mktp:_j7JG8d', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/commentsCount', + }, + { + '@id': 'mktp:_fg78Dfj6', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/starsValue', + }, + { + '@id': 'mktp:_924KFhf7', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/questionsCount', + }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/lastMonthSalesAmount', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/lastMonthSalesValue', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/perMonthSalesAmount', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/perMonthSalesValue', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/prevMonthSalesAmount', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/prevMonthSalesValue', - }, + { + '@id': 'mktp:_Kd83457', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/lastMonthSalesAmount', + }, + { + '@id': 'mktp:_8385jKd', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/lastMonthSalesValue', + }, + { + '@id': 'mktp:_8357KhfEm', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/perMonthSalesAmount', + }, + { + '@id': 'mktp:_956jsnH', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/perMonthSalesValue', + }, + { + '@id': 'mktp:_834LdjR', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/prevMonthSalesAmount', + }, + { + '@id': 'mktp:_935jFhj', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/prevMonthSalesValue', + }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/salesAmountDiff', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/totalSales', + { + '@id': 'mktp:_912JdmF', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/salesAmountDiff', + }, + { + '@id': 'mktp:_935KfH', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/totalSales', + }, + /*{ + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/totalSalesDiff', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/stocks', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/stocksDiffOrders', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/stocksDiffReturns', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/rootId', + }, + + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/photosCount', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/firstParsedAt', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/lastMonthParsedAt', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/parsedAt', + }, + { + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/prevParsedAt', + },*/ + ], }, - /*{ - type: 'Control', - resultsScope: 'rm:Cards_Coll/totalSalesDiff', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/stocks', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/stocksDiffOrders', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/stocksDiffReturns', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/rootId', - }, - - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/photosCount', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/firstParsedAt', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/lastMonthParsedAt', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/parsedAt', - }, - { - type: 'Control', - resultsScope: 'rm:Cards_Coll/prevParsedAt', - },*/ ], }, ], @@ -229,13 +255,10 @@ const viewDescrs = [ '@id': 'mktp:TreeAndFormViewDescr', '@type': 'aldkg:ViewDescr', viewKind: 'mktp:TreeAndFormViewKind', - type: 'VerticalLayout', title: 'CardCellGrid', description: 'CardCellGrid', collsConstrs: [], - options: { - //width: 'all-empty-space', - }, + options: {}, // child ui elements configs elements: [], }, @@ -283,11 +306,7 @@ export const Empty: Story<{}> = () => (
- +