diff --git a/package.json b/package.json index f51cb7a..fc11d78 100644 --- a/package.json +++ b/package.json @@ -45,7 +45,8 @@ "cypress:open": "cypress open", "lint": "eslint \"{src,stories,test}/**/*.{js,jsx,ts,tsx}\"", "prepare": "husky install && yarn build", - "storybook": "start-storybook -s ./stories/public -p 6006", + "storybook": "start-storybook -p 6006", + "storybook17": "SET NODE_OPTIONS=--openssl-legacy-provider && yarn storybook", "build-storybook": "build-storybook", "format": "./node_modules/.bin/prettier --write \"{src,stories,test}/**/*.{js,jsx,ts,tsx,json,css,less,scss,md}\"", "lint-staged": "lint-staged" @@ -65,6 +66,7 @@ "rc-util": ">=5.14.0", "react": ">=17.0.2", "react-base-table": ">=1.12.0", + "react-collapse-pane": ">=2.0.1", "react-dnd": ">=13.1.1", "react-dnd-html5-backend": ">=12.1.1", "react-dom": ">=17.0.2", @@ -97,6 +99,7 @@ "mst-middlewares": "^5.0.3", "react": "^17.0.2", "react-base-table": "^1.12.0", + "react-collapse-pane": "^2.0.1", "react-dnd": "13.1.1", "react-dnd-html5-backend": "12.1.1", "react-dom": "^17.0.2", diff --git a/src/controls/AntdImageControl.tsx b/src/controls/AntdImageControl.tsx index 0ec822a..e1c1271 100644 --- a/src/controls/AntdImageControl.tsx +++ b/src/controls/AntdImageControl.tsx @@ -7,7 +7,6 @@ export const AntdImageControl = (props: any): JSX.Element => { const { uiOptions, data } = props; return ( diff --git a/src/controls/PanelWithTextControl.tsx b/src/controls/PanelWithTextControl.tsx new file mode 100644 index 0000000..2b6ddb9 --- /dev/null +++ b/src/controls/PanelWithTextControl.tsx @@ -0,0 +1,21 @@ +import React from 'react'; + +import { rankWith, RankedTester, uiTypeIs } from '../testers'; + +function getRandomInt(max: number) { + return Math.floor(Math.random() * max); +} + +const colors = ['#FED6BC', '#FFFADD', '#DEF7FE', '#E7ECFF', '#C3FBD8', '#FDEED9', '#F6FFF8', '#B5F2EA', '#C6D8FF']; + +export const PanelWithText: React.FC = (props) => { + const style = props?.viewKindElement.options?.style; + const value = props?.viewKindElement.options?.value; + return ( +
+ 
{value}
+
+ ); +}; + +export const panelWithTextControlTester: RankedTester = rankWith(3, uiTypeIs('aldkg:TextPanel')); diff --git a/src/controls/index.ts b/src/controls/index.ts index 94d9382..8121e51 100644 --- a/src/controls/index.ts +++ b/src/controls/index.ts @@ -19,6 +19,7 @@ import { antdTextControlTester, AntdTextControlWithStore } from './AntdTextContr import { tinyMCEControlTester, TinyMCEControlWithStore } from './TinyMCEControl'; import { antdImageControlTester, AntdImageControlWithStore } from './AntdImageControl'; import { antdQueryTester, AntQueryWithStore } from './query/Query'; +import { panelWithTextControlTester, PanelWithText } from './PanelWithTextControl'; export const antdControlRenderers: RendererRegistryEntry[] = [ { tester: antdBooleanControlTester, renderer: AntdBooleanControlWithStore }, @@ -36,6 +37,7 @@ export const antdControlRenderers: RendererRegistryEntry[] = [ }, { tester: antdSliderControlTester, renderer: AntdSliderControlWithStore }, { tester: antdTextControlTester, renderer: AntdTextControlWithStore }, + { tester: panelWithTextControlTester, renderer: PanelWithText }, { tester: tinyMCEControlTester, renderer: TinyMCEControlWithStore }, { tester: antdQueryTester, renderer: AntQueryWithStore }, diff --git a/src/layouts/AntdFormLayout.tsx b/src/layouts/AntdFormLayout.tsx index eebfb0b..fc05308 100644 --- a/src/layouts/AntdFormLayout.tsx +++ b/src/layouts/AntdFormLayout.tsx @@ -16,7 +16,7 @@ import 'react-virtualized/styles.css'; // only needs to be imported once import { rankWith, uiTypeIs, RankedTester } from '../testers'; import { MstContext } from '../MstContext'; import { withStoreToFormProps } from '../util/ContextToProps'; -import { AntdVerticalLayoutWithStore } from './AntdVerticalLayout'; +import { PanelLayoutWithStore } from './Panel'; import './form.css'; @@ -80,29 +80,23 @@ export const AntdFormLayout: React.FC = ({ }) => { const { readOnly, style } = viewKindElement.options; return ( - - {({ width, height }: any) => ( -
!readOnly && onEdit()}> - {title && {title}} - {readOnly ? null : } -
- - -
- )} - +
!readOnly && onEdit()}> + {title && {title}} + {readOnly ? null : } +
+ + +
); }; diff --git a/src/layouts/AntdHorizontalLayout.tsx b/src/layouts/AntdHorizontalLayout.tsx index def4b3b..ddf985d 100644 --- a/src/layouts/AntdHorizontalLayout.tsx +++ b/src/layouts/AntdHorizontalLayout.tsx @@ -30,16 +30,24 @@ export const AntdHorizontalLayoutRenderer: React.FC = ({ //const layout = viewKindElement as Layout; const parentViewKindElement = viewKindElement; const Render: React.FC = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => { - const defaultSize = parentViewKindElement.options?.defaultSize; const options = viewKindElement.options || {}; - const numberOfColumns = Math.ceil(24 / (parentViewKindElement.elements?.length || 1)); - const style: any = options.style; - const span = - defaultSize && defaultSize[viewKindElement['@id']] - ? defaultSize && defaultSize[viewKindElement['@id']] - : options.contentSize || numberOfColumns; + const width = viewKindElement.options?.width; + const height = viewKindElement.options?.height; + + const style: React.CSSProperties = {}; + + if (width === 'all-empty-space') { + style.flexGrow = 1; + } else { + style.width = width; + } + if (height === 'all-empty-space') { + style.alignSelf = 'stretch'; + } else { + style.height = height; + } return ( - +
= ({ enabled={enabled} form={form} /> - +
); }; const justify: any = viewKindElement.options?.justify || 'space-between'; const align: any = viewKindElement.options?.align || 'middle'; const rowStyle: any = { flexWrap: 'nowrap' }; if (viewKindElement.options && viewKindElement.options.width === 'all-empty-space') rowStyle.width = '100%'; - return ( - - {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render })} - - ); + return renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render }); }; export const antdHorizontalLayoutTester: RankedTester = rankWith(2, uiTypeIs('aldkg:HorizontalLayout')); diff --git a/src/layouts/AntdVerticalLayout.tsx b/src/layouts/AntdVerticalLayout.tsx index ed96bf8..f82e9f6 100644 --- a/src/layouts/AntdVerticalLayout.tsx +++ b/src/layouts/AntdVerticalLayout.tsx @@ -19,6 +19,7 @@ import { withLayoutProps } from '../util/ContextToProps'; import { renderLayoutElements } from '../util/layout'; import { Idx } from '../util/layout'; import { LayoutComponent } from './LayoutComponent'; +import { convertSizeOptionToStyle } from './utils'; export const MstVkeVerticalLayout = types.compose( 'MstVerticalLayout', @@ -40,38 +41,32 @@ export const AntdVerticalLayoutRenderer: React.FC = ({ }) => { const style = viewKindElement.options?.style; const Render: React.FC = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => { - const height = viewKindElement.options?.style?.height; - console.log('OPT', viewKindElement, height); - const newViewKindElement = { ...viewKindElement }; - if (newViewKindElement.options) { - newViewKindElement.options.style = {}; - } + const height = viewKindElement.options?.height; + const width = viewKindElement.options?.width; + const grow = viewKindElement.options?.grow; + + const rowStyle = convertSizeOptionToStyle({ height, width }); return ( - - - + ); }; return ( - -
- {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render, readOnly })} -
- +
+ {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render, readOnly })} +
); }; diff --git a/src/layouts/Panel.tsx b/src/layouts/Panel.tsx new file mode 100644 index 0000000..75f779d --- /dev/null +++ b/src/layouts/Panel.tsx @@ -0,0 +1,64 @@ +/******************************************************************************** + * 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 React from 'react'; +import { FormsDispatchProps, FormsDispatch } from '../Form'; +import { rankWith, uiTypeIs, RankedTester } from '../testers'; +import { Idx } from '../util/layout'; +import { withLayoutProps } from '../util/ContextToProps'; +import { renderLayoutElements } from '../util/layout'; + +import { LayoutComponent } from './LayoutComponent'; + +export const PanelLayout: React.FC = ({ + viewKind, + viewKindElement, + viewDescr, + viewDescrElement, + enabled, + visible, + form, +}) => { + const options = viewKindElement.options || {}; + const style = options.style; + const layoutStyle: React.CSSProperties = {}; + const childLayoutStyle: React.CSSProperties = {}; + if (options.flow === 'horizontal') { + layoutStyle.whiteSpace = 'nowrap'; + } + + if (options.flow === 'horizontal' || options.flow === 'wrap') { + childLayoutStyle.display = 'inline-block'; + } + + const Render: React.FC = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => { + const style = viewKindElement.options?.style; + const newViewKindElement = { ...viewKindElement }; + if (newViewKindElement.options) { + newViewKindElement.options.style = { ...style, ...childLayoutStyle }; + } + return ( + + ); + }; + return ( +
+ {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render })} +
+ ); +}; + +export const panelLayoutTester: RankedTester = rankWith(2, uiTypeIs('aldkg:PanelLayout')); +export const PanelLayoutWithStore = withLayoutProps(PanelLayout); diff --git a/src/layouts/SplitPaneLayout.tsx b/src/layouts/SplitPaneLayout.tsx index 90aeaeb..72599d3 100644 --- a/src/layouts/SplitPaneLayout.tsx +++ b/src/layouts/SplitPaneLayout.tsx @@ -7,36 +7,14 @@ * * SPDX-License-Identifier: GPL-3.0-only ********************************************************************************/ -import React from 'react'; -import SplitPane from 'react-split-pane'; -import Pane from 'react-split-pane/lib/Pane'; - -import { FormsDispatchProps, FormsDispatch } from '../Form'; +import React, { useMemo } from 'react'; +import { SplitPane } from 'react-collapse-pane'; +import { FormsDispatch } from '../Form'; import { rankWith, uiTypeIs, RankedTester } from '../testers'; import { withLayoutProps } from '../util/ContextToProps'; - import { LayoutComponent } from './LayoutComponent'; -import { Idx, RenderLayoutProps } from '../util/layout'; import { IViewKindElement } from '../models/uischema'; -const renderSplitElements = ({ viewKind, viewKindElement, viewDescr, enabled, Render, form }: RenderLayoutProps) => { - const elements = viewKindElement.elements; - const defaultSize = viewKindElement.options && viewKindElement.options.defaultSize; - return elements ? ( - elements.map((el: IViewKindElement, idx: number) => { - const id = el['@id'] || el.resultsScope || ''; - const style = el.options && el.options.style; - return ( - - - - ); - }) - ) : ( - <> - ); -}; - export const SplitPaneLayoutRenderer: React.FC = ({ viewKindElement, viewKind, @@ -45,23 +23,36 @@ export const SplitPaneLayoutRenderer: React.FC = ({ enabled, visible, }) => { - //const layout = viewKindElement as Layout; + const elements = viewKindElement.elements; const options = viewKindElement.options || {}; - const Render: React.FC = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => { - return ( -
- -
- ); - }; + + const panes = useMemo( + () => + elements + ? elements.map((el: IViewKindElement, idx: number) => ( +
+ +
+ )) + : [], + [viewKind, elements, viewDescr, enabled], + ); + return ( - -
- - {renderSplitElements({ viewKind, viewKindElement, viewDescr, enabled, Render })} - -
- +
+ + {panes} + +
); }; diff --git a/src/layouts/index.ts b/src/layouts/index.ts index 5713d3c..4d82e43 100644 --- a/src/layouts/index.ts +++ b/src/layouts/index.ts @@ -13,6 +13,7 @@ import { antdHorizontalLayoutTester, AntdHorizontalLayoutWithStore } from './Ant import { antdVerticalLayoutTester, AntdVerticalLayoutWithStore, MstVkeVerticalLayout } from './AntdVerticalLayout'; import { splitPaneLayoutTester, SplitPaneLayoutWithStore } from './SplitPaneLayout'; import { antdTabsLayoutTester, AntdTabsLayoutWithStore } from './TabsLayout'; +import { panelLayoutTester, PanelLayoutWithStore } from './Panel'; export const antdLayoutRenderers: RendererRegistryEntry[] = [ { @@ -32,6 +33,10 @@ export const antdLayoutRenderers: RendererRegistryEntry[] = [ tester: antdTabsLayoutTester, renderer: AntdTabsLayoutWithStore, }, + { + tester: panelLayoutTester, + renderer: PanelLayoutWithStore, + }, ]; export * from './AntdHorizontalLayout'; diff --git a/src/layouts/utils.ts b/src/layouts/utils.ts new file mode 100644 index 0000000..6484954 --- /dev/null +++ b/src/layouts/utils.ts @@ -0,0 +1,22 @@ +import React, { CSSProperties } from 'react'; + +export const convertSizeOptionToStyle = ({ + width, + height, +}: { + width: string | number; + height: string | number; +}): CSSProperties => { + const style: CSSProperties = {}; + if (height === 'all-empty-space') { + style.flexGrow = 1; + } else { + style.height = height; + } + if (width === 'all-empty-space') { + style.width = '100%'; + } else { + style.width = width; + } + return style; +}; diff --git a/src/util/layout.tsx b/src/util/layout.tsx index 7230383..462a691 100644 --- a/src/util/layout.tsx +++ b/src/util/layout.tsx @@ -13,7 +13,7 @@ import { IViewKindElement } from '../models/uischema'; import { FormsDispatchProps } from '../Form'; export declare type Idx = { - idx: number; + idx?: number; }; export interface RenderLayoutProps extends FormsDispatchProps { diff --git a/stories/FormColumnsAndTable.stories.tsx b/stories/FormColumnsAndTable.stories.tsx index f68a444..0295217 100644 --- a/stories/FormColumnsAndTable.stories.tsx +++ b/stories/FormColumnsAndTable.stories.tsx @@ -48,7 +48,7 @@ export const Empty: Story<{}> = () => { const client = new SparqlClientImpl( 'https://rdf4j.agentlab.ru/rdf4j-server', - 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces', + 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp-schema/namespaces', ); const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, additionalColls); const store: any = asReduxStore(rootStore); @@ -96,237 +96,246 @@ const viewKinds = [ // child ui elements configs elements: [ { - '@id': 'mktp:_8255hFsd', - '@type': 'aldkg:VerticalLayout', + '@id': 'mktp:_97hFH67', + '@type': 'aldkg:SplitPaneLayout', options: { style: { - height: '20%', + width: '100%', + height: '120%', }, - width: 'all-empty-space', + split: 'horizontal', + collapseDirection: 'up', + initialSizes: [25, 65], + minSizes: [100, 100], }, elements: [ { - '@id': 'rm:_834hd7f', - '@type': 'aldkg:FormLayout', + '@id': 'mktp:_8255hFsd', + '@type': 'aldkg:PanelLayout', options: { style: { - height: '100%', + width: '100%', }, - readOnly: true, }, elements: [ { - '@id': 'mktp:_87Dfg78', - '@type': 'aldkg:HorizontalLayout', + '@id': 'rm:_834hd7f', + '@type': 'aldkg:FormLayout', options: { - justify: 'start', // start end center space-between space-around - align: 'flex-start', - //contentSize: true, style: { - //flexGrow: '5', + height: '100%', width: '100%', }, - defaultSize: { - 'mktp:_8255hFd3': 4, - 'mktp:_88Dfg78': 20, - }, - width: 'all-empty-space', + readOnly: true, }, elements: [ { - '@id': 'mktp:_8255hFd3', - '@type': 'aldkg:VerticalLayout', + '@id': 'mktp:_87Dfg78', + '@type': 'aldkg:PanelLayout', options: { + flow: 'horizontal', style: { - padding: '5px', + height: '100%', + width: '100%', }, - width: 'all-empty-space', }, elements: [ { - '@id': 'mktp:_63JdF67', - '@type': 'aldkg:Image', - resultsScope: 'rm:Cards_Coll/imageUrl', + '@id': 'mktp:_8255hFd3', + '@type': 'aldkg:PanelLayout', options: { - fallback: - 'data:image/png;base64,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', - }, - }, - ], - }, - { - '@id': 'mktp:_88Dfg78', - '@type': 'aldkg:VerticalLayout', - options: { - style: { - height: '20%', - }, - }, - elements: [ - { - '@id': 'mktp:_63JdF67', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/name', - }, - { - '@id': 'mktp:_87Dfg78', - '@type': 'aldkg:HorizontalLayout', - options: { - justify: 'start', // start end center space-between space-around - align: 'flex-start', - //contentSize: true, style: { - //flexGrow: '5', - width: '100%', + width: '20%', + height: '100%', + padding: '5px', }, - width: 'all-empty-space', }, elements: [ { - '@id': 'mktp:_93JhdA78', - '@type': 'aldkg:VerticalLayout', + '@id': 'mktp:_63JdF67', + '@type': 'aldkg:Image', + resultsScope: 'rm:Cards_Coll/imageUrl', options: { - style: { - padding: '5px', - }, - width: 'all-empty-space', + fallback: + 'data:image/png;base64,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', }, - elements: [ - { - '@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', - }, - ], }, - { - '@id': 'mktp:_87Kdf3Ry7', - '@type': 'aldkg:VerticalLayout', - options: { - style: { - padding: '5px', - }, - 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', - }, - ], + ], + }, + { + '@id': 'mktp:_88Dfg78', + '@type': 'aldkg:PanelLayout', + options: { + style: { + verticalAlign: 'top', + height: '20%', + width: '80%', }, + }, + elements: [ { - '@id': 'mktp:_86hDyf9', - '@type': 'aldkg:VerticalLayout', - options: { - style: { - padding: '5px', - }, - width: 'all-empty-space', - }, - elements: [ - { - '@id': 'mktp:_Kd83457', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/lastMonthSalesAmount', - }, - { - '@id': 'mktp:_8385jKd', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/lastMonthSalesValue', - }, - { - '@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', - }, - ], + '@id': 'mktp:_63JdF67', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/name', }, { - '@id': 'mktp:_9348jDf7', - '@type': 'aldkg:VerticalLayout', + '@id': 'mktp:_87Dfg78', + '@type': 'aldkg:PanelLayout', options: { + flow: 'horizontal', style: { - padding: '5px', + //flexGrow: '5', + width: '100%', }, - width: 'all-empty-space', }, elements: [ { - '@id': 'mktp:_912JdmF', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/salesAmountDiff', - }, - { - '@id': 'mktp:_935KfH', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/totalSales', + '@id': 'mktp:_93JhdA78', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + verticalAlign: 'top', + padding: '5px', + }, + }, + elements: [ + { + '@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', + }, + ], }, { - '@id': 'mktp:_482fDg8', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/totalSalesDiff', + '@id': 'mktp:_87Kdf3Ry7', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + verticalAlign: 'top', + padding: '5px', + }, + }, + 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', + }, + ], }, { - '@id': 'mktp:_94Fdf72', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/stocks', + '@id': 'mktp:_86hDyf9', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + verticalAlign: 'top', + padding: '5px', + }, + }, + elements: [ + { + '@id': 'mktp:_Kd83457', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/lastMonthSalesAmount', + }, + { + '@id': 'mktp:_8385jKd', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/lastMonthSalesValue', + }, + { + '@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', + }, + ], }, { - '@id': 'mktp:_68hDf2', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/stocksDiffOrders', - }, - { - '@id': 'mktp:_683Jfg72', - '@type': 'aldkg:Control', - resultsScope: 'rm:Cards_Coll/stocksDiffReturns', + '@id': 'mktp:_9348jDf7', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + verticalAlign: 'top', + padding: '5px', + }, + }, + elements: [ + { + '@id': 'mktp:_912JdmF', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/salesAmountDiff', + }, + { + '@id': 'mktp:_935KfH', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/totalSales', + }, + { + '@id': 'mktp:_482fDg8', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/totalSalesDiff', + }, + { + '@id': 'mktp:_94Fdf72', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/stocks', + }, + { + '@id': 'mktp:_68hDf2', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/stocksDiffOrders', + }, + { + '@id': 'mktp:_683Jfg72', + '@type': 'aldkg:Control', + resultsScope: 'rm:Cards_Coll/stocksDiffReturns', + }, + ], }, ], }, @@ -338,200 +347,199 @@ const viewKinds = [ }, ], }, - ], - }, - { - '@id': 'mktp:_8255hFsd', - '@type': 'aldkg:VerticalLayout', - options: { - style: { - height: '80%', - }, - width: 'all-empty-space', - }, - elements: [ { - '@id': 'mktp:CategoryCardsTable', - '@type': 'aldkg:Array', - resultsScope: 'rm:Cards_Coll', + '@id': 'mktp:_8255hFsd', + '@type': 'aldkg:PanelLayout', options: { - draggable: true, - resizeableHeader: true, - height: 'all-empty-space', - style: { height: '100%' }, - order: [ - 'imageUrl', - 'name', - 'price', - 'saleValue', - 'categoryPopularity', - 'commentsCount', - 'starsValue', - 'questionsCount', - 'lastMonthSalesAmount', - 'lastMonthSalesValue', - 'perMonthSalesAmount', - 'perMonthSalesValue', - 'prevMonthSalesAmount', - 'prevMonthSalesValue', - 'salesAmountDiff', - 'totalSales', - 'totalSalesDiff', - 'stocks', - 'stocksDiffOrders', - 'stocksDiffReturns', - 'country', - 'brand', - 'seller', - 'identifier', - 'rootId', - 'photosCount', - 'firstParsedAt', - 'lastMonthParsedAt', - 'parsedAt', - 'prevParsedAt', - ], - imageUrl: { - width: 60, - formatter: 'image', - editable: false, - }, - identifier: { - formatter: 'link', - //dataToFormatter: { link: 'identifier' }, - sortable: true, - editable: false, - }, - name: { - width: 340, - formatter: 'link', - dataToFormatter: { link: '@id' }, - sortable: true, - editable: false, - }, - country: { - width: 60, - sortable: true, - editable: false, - }, - brand: { - formatter: 'link', - sortable: true, - editable: false, - }, - price: { - width: 60, - sortable: true, - editable: false, - }, - saleValue: { - width: 60, - sortable: true, - editable: false, - }, - seller: { - formatter: 'link', - sortable: true, - editable: false, - }, - categoryPopularity: { - width: 100, - editable: false, - }, - commentsCount: { - width: 100, - sortable: true, - editable: false, - }, - starsValue: { - width: 100, - sortable: true, - editable: false, - }, - questionsCount: { - width: 100, - sortable: true, - editable: false, - }, - lastMonthSalesAmount: { - width: 150, - sortable: true, - editable: false, - }, - lastMonthSalesValue: { - width: 150, - sortable: true, - editable: false, - }, - perMonthSalesAmount: { - width: 150, - sortable: true, - editable: false, - }, - perMonthSalesValue: { - width: 150, - sortable: true, - editable: false, - }, - prevMonthSalesAmount: { - width: 150, - sortable: true, - editable: false, - }, - prevMonthSalesValue: { - width: 150, - sortable: true, - editable: false, - }, - salesAmountDiff: { - width: 150, - sortable: true, - editable: false, - }, - totalSales: { - width: 100, - sortable: true, - editable: false, - }, - totalSalesDiff: { - width: 150, - sortable: true, - editable: false, - }, - stocks: { - width: 100, - sortable: true, - editable: false, - }, - stocksDiffOrders: { - width: 100, - sortable: true, - editable: false, - }, - stocksDiffReturns: { - width: 100, - sortable: true, - editable: false, - }, - rootId: { - editable: false, - }, - photosCount: { - editable: false, - }, - firstParsedAt: { - editable: false, - }, - lastMonthParsedAt: { - editable: false, - }, - parsedAt: { - editable: false, - }, - prevParsedAt: { - editable: false, + style: { + height: '100%', + width: '100%', }, }, + elements: [ + { + '@id': 'mktp:CategoryCardsTable', + '@type': 'aldkg:Array', + resultsScope: 'rm:Cards_Coll', + options: { + draggable: true, + resizeableHeader: true, + style: { height: '100%' }, + order: [ + 'imageUrl', + 'name', + 'price', + 'saleValue', + 'categoryPopularity', + 'commentsCount', + 'starsValue', + 'questionsCount', + 'lastMonthSalesAmount', + 'lastMonthSalesValue', + 'perMonthSalesAmount', + 'perMonthSalesValue', + 'prevMonthSalesAmount', + 'prevMonthSalesValue', + 'salesAmountDiff', + 'totalSales', + 'totalSalesDiff', + 'stocks', + 'stocksDiffOrders', + 'stocksDiffReturns', + 'country', + 'brand', + 'seller', + 'identifier', + 'rootId', + 'photosCount', + 'firstParsedAt', + 'lastMonthParsedAt', + 'parsedAt', + 'prevParsedAt', + ], + imageUrl: { + width: 60, + formatter: 'image', + editable: false, + }, + identifier: { + formatter: 'link', + //dataToFormatter: { link: 'identifier' }, + sortable: true, + editable: false, + }, + name: { + width: 340, + formatter: 'link', + dataToFormatter: { link: '@id' }, + sortable: true, + editable: false, + }, + country: { + width: 60, + sortable: true, + editable: false, + }, + brand: { + formatter: 'link', + sortable: true, + editable: false, + }, + price: { + width: 60, + sortable: true, + editable: false, + }, + saleValue: { + width: 60, + sortable: true, + editable: false, + }, + seller: { + formatter: 'link', + sortable: true, + editable: false, + }, + categoryPopularity: { + width: 100, + editable: false, + }, + commentsCount: { + width: 100, + sortable: true, + editable: false, + }, + starsValue: { + width: 100, + sortable: true, + editable: false, + }, + questionsCount: { + width: 100, + sortable: true, + editable: false, + }, + lastMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + lastMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + perMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + perMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + prevMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + prevMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + salesAmountDiff: { + width: 150, + sortable: true, + editable: false, + }, + totalSales: { + width: 100, + sortable: true, + editable: false, + }, + totalSalesDiff: { + width: 150, + sortable: true, + editable: false, + }, + stocks: { + width: 100, + sortable: true, + editable: false, + }, + stocksDiffOrders: { + width: 100, + sortable: true, + editable: false, + }, + stocksDiffReturns: { + width: 100, + sortable: true, + editable: false, + }, + rootId: { + editable: false, + }, + photosCount: { + editable: false, + }, + firstParsedAt: { + editable: false, + }, + lastMonthParsedAt: { + editable: false, + }, + parsedAt: { + editable: false, + }, + prevParsedAt: { + editable: false, + }, + }, + }, + ], }, ], }, diff --git a/stories/PanelLayout.stories.tsx b/stories/PanelLayout.stories.tsx new file mode 100644 index 0000000..a0e7af8 --- /dev/null +++ b/stories/PanelLayout.stories.tsx @@ -0,0 +1,255 @@ +/******************************************************************************** + * 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 moment from 'moment'; +import { variable } from '@rdfjs/data-model'; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; + +import { Provider } from 'react-redux'; +import { asReduxStore, connectReduxDevtools } from 'mst-middlewares'; +import { rootModelInitialState, CollState, SparqlClientImpl } from '@agentlab/sparql-jsld-client'; +import { + antdCells, + antdControlRenderers, + antdLayoutRenderers, + createUiModelFromState, + Form, + MstContextProvider, + RendererRegistryEntry, + viewKindCollConstr, + viewDescrCollConstr, +} from '../src'; + +import { tableRenderers } from '../src'; + +export default { + title: 'Layout', + component: Form, + // Due to Storybook bug https://github.com/storybookjs/storybook/issues/12747 + parameters: { docs: { source: { type: 'code' } } }, +} as Meta; + +const baseStyle = { + padding: '10px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + fontSize: '1.5em', + boxSizing: 'border-box', + borderRadius: '6px', + boxShadow: '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)', +}; + +const formatMessage = (rowHeight: string | number, blockHeight: string | number, blockWidth: string | number) => + `RowHeight: ${rowHeight} +BoxHeight:${blockHeight} +BoxWidth:${blockWidth}`; + +const Template: Story = (args: any) => { + const antdRenderers: RendererRegistryEntry[] = [...antdControlRenderers, ...antdLayoutRenderers, ...tableRenderers]; + + const client = new SparqlClientImpl( + 'https://rdf4j.agentlab.ru/rdf4j-server', + 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp-schema/namespaces', + ); + const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, additionalColls); + const store: any = asReduxStore(rootStore); + // eslint-disable-next-line @typescript-eslint/no-var-requires + connectReduxDevtools(require('remotedev'), rootStore); + console.log('OK'); + return ( +
+ + +
+ + +
+ ); +}; + +const viewKinds = [ + { + '@id': 'mktp:TableViewKind', + '@type': 'aldkg:ViewKind', + title: 'Карточки', + description: 'Big table View with form', + collsConstrs: [], + elements: [ + { + '@id': 'mktp:_1', + '@type': 'aldkg:PanelLayout', + options: { + style: { height: '100%', width: '100%' }, + }, + elements: [ + { + '@id': 'mktp:_1_1', + '@type': 'aldkg:TextPanel', + options: { + value: formatMessage('100%, vertical', '20%', '80%'), + style: { ...baseStyle, height: '20%', width: '80%', marginBottom: '10px' }, + }, + }, + { + '@id': 'mktp:_1_2', + '@type': 'aldkg:PanelLayout', + options: { + flow: 'horizontal', + style: { + width: '100%', + height: '300px', + padding: '10px', + overflow: 'scroll', + }, + }, + elements: [ + { + '@id': 'mktp:_1_2_1', + '@type': 'aldkg:TextPanel', + options: { + value: formatMessage('80px, horizontal', '50%', '25%'), + style: { ...baseStyle, height: '50%', width: '25%', margin: '10px' }, + }, + }, + { + '@id': 'mktp:_1_2_2', + '@type': 'aldkg:TextPanel', + options: { + height: '80%', + width: '45%', + value: formatMessage('80px, horizontal', '80%', '45%'), + style: { ...baseStyle, height: '80%', width: '45%', margin: '10px' }, + }, + }, + { + '@id': 'mktp:_1_2_3', + '@type': 'aldkg:TextPanel', + options: { + height: '80%', + width: '45%', + value: formatMessage('80px, horizontal', '80%', '45%'), + style: { ...baseStyle, height: '80%', width: '45%', margin: '10px' }, + }, + }, + { + '@id': 'mktp:_1_2_4', + '@type': 'aldkg:TextPanel', + options: { + height: '80%', + width: '45%', + value: formatMessage('80px, horizontal', '80%', '45%'), + style: { ...baseStyle, height: '80%', width: '45%', margin: '10px' }, + }, + }, + ], + }, + { + '@id': 'mktp:_1_3', + '@type': 'aldkg:PanelLayout', + options: { + width: '100%', + flow: 'wrap', + style: { overflow: 'scroll' }, + }, + elements: [ + { + '@id': 'mktp:_2_2_1', + '@type': 'aldkg:TextPanel', + options: { + value: formatMessage('-, wrap', '200px', '25%'), + style: { ...baseStyle, height: '200px', width: '25%', margin: '10px' }, + }, + }, + { + '@id': 'mktp:_2_2_2', + '@type': 'aldkg:TextPanel', + options: { + height: '80%', + width: '45%', + value: formatMessage('-, wrap', '10em', '45%'), + style: { ...baseStyle, height: '10em', width: '45%', margin: '10px' }, + }, + }, + { + '@id': 'mktp:_2_2_3', + '@type': 'aldkg:TextPanel', + options: { + height: '80%', + width: '45%', + value: formatMessage('-, wrap', '10em', '45%'), + style: { ...baseStyle, height: '10em', width: '45%', margin: '10px' }, + }, + }, + { + '@id': 'mktp:_2_2_4', + '@type': 'aldkg:TextPanel', + options: { + height: '80%', + width: '45%', + value: formatMessage('-, wrap', '10em', '45%'), + style: { ...baseStyle, height: '10em', width: '45%', margin: '10px' }, + }, + }, + ], + }, + { + '@id': 'mktp:_2_2_4', + '@type': 'aldkg:TextPanel', + options: { + value: formatMessage('100%', '70%', '100%'), + style: { ...baseStyle, height: '70%', width: '100%', margin: '10px' }, + }, + }, + ], + }, + ], + }, +]; + +const viewDescrs = [ + { + '@id': 'rm:TableViewDescr', + '@type': 'aldkg:ViewDescr', + viewKind: 'mktp:TableViewKind', + title: 'CardCellGrid', + description: 'CardCellGrid', + collsConstrs: [], + // child ui elements configs + elements: [], + }, +]; + +const additionalColls: CollState[] = [ + // ViewKinds Collection + { + constr: viewKindCollConstr, + data: viewKinds, + opt: { + updPeriod: undefined, + lastSynced: moment.now(), + //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs + }, + }, + // ViewDescrs Collection + { + constr: viewDescrCollConstr, + data: viewDescrs, + opt: { + updPeriod: undefined, + lastSynced: moment.now(), + //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server + // for viewDescrs.collConstrs (it loads lazily -- after the first access) + }, + }, +]; + +export const PanelLayout = Template.bind({}); +PanelLayout.args = {}; diff --git a/stories/PanelWithFlexLayout.stories.tsx b/stories/PanelWithFlexLayout.stories.tsx new file mode 100644 index 0000000..155173c --- /dev/null +++ b/stories/PanelWithFlexLayout.stories.tsx @@ -0,0 +1,268 @@ +/******************************************************************************** + * 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 moment from 'moment'; +import { variable } from '@rdfjs/data-model'; +import React from 'react'; +import { Meta, Story } from '@storybook/react'; + +import { Provider } from 'react-redux'; +import { asReduxStore, connectReduxDevtools } from 'mst-middlewares'; +import { rootModelInitialState, CollState, SparqlClientImpl } from '@agentlab/sparql-jsld-client'; +import { + antdCells, + antdControlRenderers, + antdLayoutRenderers, + createUiModelFromState, + Form, + MstContextProvider, + RendererRegistryEntry, + viewKindCollConstr, + viewDescrCollConstr, +} from '../src'; + +import { tableRenderers } from '../src'; + +export default { + title: 'Layout', + component: Form, + // Due to Storybook bug https://github.com/storybookjs/storybook/issues/12747 + parameters: { docs: { source: { type: 'code' } } }, +} as Meta; + +const baseStyle = { + padding: '10px', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + fontSize: '1.5em', + boxSizing: 'border-box', + borderRadius: '6px', + boxShadow: '0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22)', +}; + +const formatMessage = (rowHeight: string | number, blockHeight: string | number, blockWidth: string | number) => + `RowHeight: ${rowHeight} + BoxHeight:${blockHeight} + BoxWidth:${blockWidth}`; + +const Template: Story = (args: any) => { + const antdRenderers: RendererRegistryEntry[] = [...antdControlRenderers, ...antdLayoutRenderers, ...tableRenderers]; + + const client = new SparqlClientImpl( + 'https://rdf4j.agentlab.ru/rdf4j-server', + 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp-schema/namespaces', + ); + + const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, additionalColls); + const store: any = asReduxStore(rootStore); + // eslint-disable-next-line @typescript-eslint/no-var-requires + connectReduxDevtools(require('remotedev'), rootStore); + return ( +
+ + + + + +
+ ); +}; + +const viewKinds = [ + { + '@id': 'mktp:TableViewKind', + '@type': 'aldkg:ViewKind', + title: 'Карточки', + description: 'Big table View with form', + collsConstrs: [], + elements: [ + { + '@id': 'mktp:_1', + '@type': 'aldkg:PanelLayout', + options: { + style: { height: '100%', width: '100%' }, + }, + elements: [ + { + '@id': 'mktp:_1_1', + '@type': 'aldkg:TextPanel', + options: { + value: 'VerticalLayout, align: space-between', + style: { ...baseStyle, height: '100px', width: '100%', marginBottom: '10px' }, + }, + }, + { + '@id': 'mktp:_1_2', + '@type': 'aldkg:PanelLayout', + options: { + style: { + width: '100%', + height: '700px', + padding: '10px', + backgroundColor: 'rgba(0, 0, 0, 0.1)', + }, + }, + elements: [ + { + '@id': 'mktp:_1_2_1', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + width: '100%', + height: '100%', + padding: '10px', + justifyContent: 'space-between', + }, + }, + elements: [ + { + '@id': 'mktp:_1_2_1', + '@type': 'aldkg:TextPanel', + options: { + height: '25%', + width: '100%', + value: formatMessage('25%', '90%', '100%'), + style: { ...baseStyle, height: '90%', width: '100%', margin: '10px' }, + }, + }, + { + '@id': 'mktp:_1_2_1', + '@type': 'aldkg:TextPanel', + options: { + height: '25%', + width: '100%', + value: formatMessage('25%', '90%', '100%'), + style: { ...baseStyle, height: '90%', width: '100%', margin: '10px' }, + }, + }, + { + '@id': 'mktp:_1_2_1', + '@type': 'aldkg:TextPanel', + options: { + height: '25%', + width: '100%', + value: formatMessage('25%', '90%', '100%'), + style: { ...baseStyle, height: '90%', width: '100%', margin: '10px' }, + }, + }, + ], + }, + ], + }, + { + '@id': 'mktp:_1_1', + '@type': 'aldkg:TextPanel', + options: { + value: 'VerticalLayout, align: 3 rows', + style: { ...baseStyle, height: '100px', width: '100%', marginBottom: '10px' }, + }, + }, + { + '@id': 'mktp:_1_2', + '@type': 'aldkg:PanelLayout', + options: { + style: { + width: '100%', + height: '700px', + padding: '10px', + backgroundColor: 'rgba(0, 0, 0, 0.1)', + }, + }, + elements: [ + { + '@id': 'mktp:_1_2_1', + '@type': 'aldkg:VerticalLayout', + options: { + style: { + width: '100%', + height: '100%', + padding: '10px', + }, + }, + elements: [ + { + '@id': 'mktp:_1_2_1', + '@type': 'aldkg:TextPanel', + options: { + width: '100%', + grow: '1', + value: formatMessage('grow 1', '90%', '100%'), + style: { ...baseStyle, height: '90%', width: '100%', margin: '10px' }, + }, + }, + { + '@id': 'mktp:_1_2_1', + '@type': 'aldkg:TextPanel', + options: { + width: '100%', + grow: '1', + value: formatMessage('grow 1', '90%', '100%'), + style: { ...baseStyle, height: '90%', width: '100%', margin: '10px' }, + }, + }, + { + '@id': 'mktp:_1_2_1', + '@type': 'aldkg:TextPanel', + options: { + width: '100%', + grow: '1', + value: formatMessage('grow 1', '90%', '100%'), + style: { ...baseStyle, height: '90%', width: '100%', margin: '10px' }, + }, + }, + ], + }, + ], + }, + ], + }, + ], + }, +]; + +const viewDescrs = [ + { + '@id': 'rm:TableViewDescr', + '@type': 'aldkg:ViewDescr', + viewKind: 'mktp:TableViewKind', + title: 'CardCellGrid', + description: 'CardCellGrid', + collsConstrs: [], + // child ui elements configs + elements: [], + }, +]; + +const additionalColls: CollState[] = [ + // ViewKinds Collection + { + constr: viewKindCollConstr, + data: viewKinds, + opt: { + updPeriod: undefined, + lastSynced: moment.now(), + //resolveCollConstrs: false, // disable data loading from the server for viewKinds.collConstrs + }, + }, + // ViewDescrs Collection + { + constr: viewDescrCollConstr, + data: viewDescrs, + opt: { + updPeriod: undefined, + lastSynced: moment.now(), + //resolveCollConstrs: false, // 'true' here (by default) triggers data loading from the server + // for viewDescrs.collConstrs (it loads lazily -- after the first access) + }, + }, +]; + +export const GridFlexLayout = Template.bind({}); +GridFlexLayout.args = {}; diff --git a/stories/QueryTable.stories.tsx b/stories/QueryTable.stories.tsx index dd0fae5..ce75e4d 100644 --- a/stories/QueryTable.stories.tsx +++ b/stories/QueryTable.stories.tsx @@ -84,9 +84,12 @@ const viewKinds = [ elements: [ { '@id': 'rm:_934jHd67', - '@type': 'aldkg:VerticalLayout', + '@type': 'aldkg:PanelLayout', options: { - height: 'all-empty-space', + style: { + height: '100%', + width: '100%', + }, }, elements: [ { @@ -100,7 +103,6 @@ const viewKinds = [ options: { draggable: true, resizeableHeader: true, - height: 'all-empty-space', style: { height: '100%' }, order: [ 'imageUrl', diff --git a/stories/QueryTreeTableArtifacts.stories.tsx b/stories/QueryTreeTableArtifacts.stories.tsx index 8148839..d20f6e1 100644 --- a/stories/QueryTreeTableArtifacts.stories.tsx +++ b/stories/QueryTreeTableArtifacts.stories.tsx @@ -136,7 +136,9 @@ const viewKinds = [ '@id': 'rm:_934jHd67', '@type': 'aldkg:VerticalLayout', options: { - height: 'all-empty-space', + style: { + height: '100%', + }, }, elements: [ { @@ -238,15 +240,14 @@ const viewKinds = [ '@id': 'rm:_we34U8', '@type': 'aldkg:SplitPaneLayout', options: { + grow: '1', + width: '100%', style: { width: '100%', height: '100%', }, - height: 'all-empty-space', - //width: 'all-empty-space', - defaultSize: { - 'rm:_901hHft': '17%', - }, + collapseDirection: 'left', + initialSizes: [17, 83], }, elements: [ { diff --git a/stories/TableRemoteArtifacts.stories.tsx b/stories/TableRemoteArtifacts.stories.tsx index cdee82f..ddcd2b2 100644 --- a/stories/TableRemoteArtifacts.stories.tsx +++ b/stories/TableRemoteArtifacts.stories.tsx @@ -102,9 +102,11 @@ const viewKinds = [ elements: [ { '@id': 'rm:_124jHd67', - '@type': 'aldkg:VerticalLayout', + '@type': 'aldkg:PanelLayout', options: { - height: 'all-empty-space', + style: { + height: '100%', + }, }, elements: [ { @@ -114,7 +116,6 @@ const viewKinds = [ options: { draggable: true, resizeableHeader: true, - height: 'all-empty-space', style: { height: '100%' }, order: [ 'identifier', diff --git a/stories/TableRemoteMktp.stories.tsx b/stories/TableRemoteMktp.stories.tsx index 5ce8886..027897f 100644 --- a/stories/TableRemoteMktp.stories.tsx +++ b/stories/TableRemoteMktp.stories.tsx @@ -41,7 +41,7 @@ const Template: Story = (args: any) => { const client = new SparqlClientImpl( 'https://rdf4j.agentlab.ru/rdf4j-server', - 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces', + 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp-schema/namespaces', ); const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, additionalColls); const store: any = asReduxStore(rootStore); @@ -86,9 +86,9 @@ const viewKinds = [ elements: [ { '@id': 'mktp:_934jHd67', - '@type': 'aldkg:VerticalLayout', + '@type': 'aldkg:PanelLayout', options: { - height: 'all-empty-space', + style: { height: '100%' }, }, elements: [ { @@ -98,7 +98,6 @@ const viewKinds = [ options: { draggable: true, resizeableHeader: true, - height: 'all-empty-space', style: { height: '100%' }, multiSelect: true, order: [ diff --git a/stories/TreeAndFormArtifact.stories.tsx b/stories/TreeAndFormArtifact.stories.tsx index 8363603..e377980 100644 --- a/stories/TreeAndFormArtifact.stories.tsx +++ b/stories/TreeAndFormArtifact.stories.tsx @@ -68,12 +68,9 @@ const viewKinds = [ width: '100%', height: '50%', }, - defaultSize: { - 'rm:Folders_Coll': '17%', - 'rm:_fgu778f': '83%', - }, - height: 'all-empty-space', - //width: 'all-empty-space', + + collapseDirection: 'left', + initialSizes: [17, 83], }, elements: [ { diff --git a/stories/TreeTableFormMktp.stories.tsx b/stories/TreeTableFormMktp.stories.tsx index c6f07f5..d5c3a18 100644 --- a/stories/TreeTableFormMktp.stories.tsx +++ b/stories/TreeTableFormMktp.stories.tsx @@ -58,7 +58,7 @@ const Template: Story = (args: any) => { //const rootStore = createUiModelFromState('mktp', client, rootModelInitialState, additionalColls); const client = new SparqlClientImpl( 'https://rdf4j.agentlab.ru/rdf4j-server', - 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces', + 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp-schema/namespaces', ); const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, args.additionalColls); const store: any = asReduxStore(rootStore); @@ -131,7 +131,7 @@ const viewKinds = [ schema: 'hs:ProductCardShape', conditions: { '@id': 'mktp:ProductCards_in_Category_Coll_Ent0_con', - CardInCatLink: undefined, //'https://www.wildberries.ru/catalog/igrushki/antistress', + CardInCatLink: null, //'https://www.wildberries.ru/catalog/igrushki/antistress', }, service: mktpSchemaRepoIri, }, @@ -148,7 +148,7 @@ const viewKinds = [ schema: 'hs:ProductCardShape', conditions: { '@id': 'mktp:Cards_Coll_Ent0_con', - '@_id': undefined, + '@_id': null, }, service: mktpSchemaRepoIri, }, @@ -166,13 +166,8 @@ const viewKinds = [ width: '100%', height: '100%', }, - height: 'all-empty-space', - //width: 'all-empty-space', - defaultSize: { - 'mktp:MarketplacesTabs': '17%', - 'mktp:CategoryCardsTable': '43%', - 'mktp:CategoryCardForm': '43%', - }, + collapseDirection: 'left', + initialSizes: [17, 43, 43], }, elements: [ { @@ -223,7 +218,6 @@ const viewKinds = [ connections: [{ toObj: 'mktp:Cards_Coll_Ent0_con', toProp: '@_id' }], draggable: true, resizeableHeader: true, - height: 'all-empty-space', style: { height: '100%' }, order: ['imageUrl', 'name', 'price', 'saleValue', 'country', 'brand', 'seller', 'identifier'], imageUrl: { diff --git a/stories/TwoTables.stories.tsx b/stories/TwoTables.stories.tsx index eb7b95f..848bd79 100644 --- a/stories/TwoTables.stories.tsx +++ b/stories/TwoTables.stories.tsx @@ -147,440 +147,460 @@ const viewKinds = [ width: '100%', height: '100%', }, - defaultSize: { - 'mktp:MarketplacesTabs': '17%', - 'mktp:CategoryCardsTable': '43', - 'mktp:ProductCardsTable': '26%', - 'mktp:ProductTree': '17%', - }, - //height: 'all-empty-space', - //width: 'all-empty-space', + initialSizes: [40, 60], + collapseDirection: 'left', }, // child ui elements configs elements: [ { - '@id': 'mktp:MarketplacesTabs', - '@type': 'aldkg:TabsLayout', + '@id': 'mktp:_97hFH67', + '@type': 'aldkg:SplitPaneLayout', + options: { + style: { + width: '100%', + height: '100%', + }, + initialSizes: [30, 70], + collapseDirection: 'left', + }, elements: [ { - '@id': 'mktp:_23sLhd67', - '@type': 'aldkg:DataControl', - resultsScope: 'mktp:Categories_Coll', + '@id': 'mktp:MarketplacesTabs', + '@type': 'aldkg:TabsLayout', + elements: [ + { + '@id': 'mktp:_23sLhd67', + '@type': 'aldkg:DataControl', + resultsScope: 'mktp:Categories_Coll', + options: { + renderType: 'tree', + title: 'WildBerries', + treeNodeTitleKey: 'name', + treeNodeParentKey: 'SubcatInCatLink', + connections: [{ toObj: 'mktp:ProductCards_in_Category_Coll_Ent0_con', toProp: 'CardInCatLink' }], + }, + }, + { + '@id': 'mktp:_90Syd67', + '@type': 'aldkg:DataControl', + resultsScope: 'mktp:Categories_Coll_Amzn', + options: { + renderType: 'tree', + title: 'Amazon', + treeNodeTitleKey: 'name', + treeNodeParentKey: 'SubcatInCatLink', + }, + }, + { + '@id': 'mktp:_20dAy80', + '@type': 'aldkg:DataControl', + resultsScope: 'mktp:Categories_Coll_1688', + options: { + renderType: 'tree', + title: '1688', + treeNodeTitleKey: 'name', + treeNodeParentKey: 'SubcatInCatLink', + }, + }, + ], + }, + { + '@id': 'mktp:CategoryCardsTable', + '@type': 'aldkg:Array', + resultsScope: 'mktp:ProductCards_in_Category_Coll', options: { - renderType: 'tree', - title: 'WildBerries', - treeNodeTitleKey: 'name', - treeNodeParentKey: 'SubcatInCatLink', - connections: [{ toObj: 'mktp:ProductCards_in_Category_Coll_Ent0_con', toProp: 'CardInCatLink' }], + target: { + name: 'правую таблицу', + iri: 'mktp:ProductCards_in_Product_Coll', + }, + multiSelect: true, + draggable: true, + resizeableHeader: true, + style: { height: '100%' }, + order: [ + 'imageUrl', + 'name', + 'price', + 'saleValue', + 'categoryPopularity', + 'commentsCount', + 'starsValue', + 'questionsCount', + 'lastMonthSalesAmount', + 'lastMonthSalesValue', + 'perMonthSalesAmount', + 'perMonthSalesValue', + 'prevMonthSalesAmount', + 'prevMonthSalesValue', + 'salesAmountDiff', + 'totalSales', + 'totalSalesDiff', + 'stocks', + 'stocksDiffOrders', + 'stocksDiffReturns', + 'country', + 'brand', + 'seller', + 'identifier', + 'rootId', + 'photosCount', + 'firstParsedAt', + 'lastMonthParsedAt', + 'parsedAt', + 'prevParsedAt', + ], + imageUrl: { + width: 60, + formatter: 'image', + editable: false, + }, + identifier: { + formatter: 'link', + //dataToFormatter: { link: 'identifier' }, + sortable: true, + editable: false, + }, + name: { + width: 340, + formatter: 'link', + dataToFormatter: { link: '@id' }, + sortable: true, + editable: false, + }, + country: { + width: 60, + sortable: true, + editable: false, + }, + brand: { + formatter: 'link', + sortable: true, + editable: false, + }, + price: { + width: 60, + sortable: true, + editable: false, + }, + saleValue: { + width: 60, + sortable: true, + editable: false, + }, + seller: { + formatter: 'link', + sortable: true, + editable: false, + }, + categoryPopularity: { + width: 100, + editable: false, + }, + commentsCount: { + width: 100, + sortable: true, + editable: false, + }, + starsValue: { + width: 100, + sortable: true, + editable: false, + }, + questionsCount: { + width: 100, + sortable: true, + editable: false, + }, + lastMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + lastMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + perMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + perMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + prevMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + prevMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + salesAmountDiff: { + width: 150, + sortable: true, + editable: false, + }, + totalSales: { + width: 100, + sortable: true, + editable: false, + }, + totalSalesDiff: { + width: 150, + sortable: true, + editable: false, + }, + stocks: { + width: 100, + sortable: true, + editable: false, + }, + stocksDiffOrders: { + width: 100, + sortable: true, + editable: false, + }, + stocksDiffReturns: { + width: 100, + sortable: true, + editable: false, + }, + rootId: { + editable: false, + }, + photosCount: { + editable: false, + }, + firstParsedAt: { + editable: false, + }, + lastMonthParsedAt: { + editable: false, + }, + parsedAt: { + editable: false, + }, + prevParsedAt: { + editable: false, + }, }, }, + ], + }, + { + '@id': 'mktp:_97hFH67', + '@type': 'aldkg:SplitPaneLayout', + options: { + style: { + width: '100%', + height: '100%', + }, + initialSizes: [80, 20], + collapseDirection: 'right', + }, + elements: [ { - '@id': 'mktp:_90Syd67', - '@type': 'aldkg:DataControl', - resultsScope: 'mktp:Categories_Coll_Amzn', + '@id': 'mktp:ProductCardsTable', + '@type': 'aldkg:Array', + resultsScope: 'mktp:ProductCards_in_Product_Coll', options: { - renderType: 'tree', - title: 'Amazon', - treeNodeTitleKey: 'name', - treeNodeParentKey: 'SubcatInCatLink', + draggable: true, + resizeableHeader: true, + style: { height: '100%' }, + order: [ + 'imageUrl', + 'name', + 'price', + 'saleValue', + 'categoryPopularity', + 'commentsCount', + 'starsValue', + 'questionsCount', + 'lastMonthSalesAmount', + 'lastMonthSalesValue', + 'perMonthSalesAmount', + 'perMonthSalesValue', + 'prevMonthSalesAmount', + 'prevMonthSalesValue', + 'salesAmountDiff', + 'totalSales', + 'totalSalesDiff', + 'stocks', + 'stocksDiffOrders', + 'stocksDiffReturns', + 'country', + 'brand', + 'seller', + 'identifier', + 'rootId', + 'photosCount', + 'firstParsedAt', + 'lastMonthParsedAt', + 'parsedAt', + 'prevParsedAt', + ], + imageUrl: { + width: 60, + formatter: 'image', + editable: false, + }, + identifier: { + formatter: 'link', + //dataToFormatter: { link: 'identifier' }, + sortable: true, + editable: false, + }, + name: { + width: 340, + formatter: 'link', + dataToFormatter: { link: '@id' }, + sortable: true, + editable: false, + }, + country: { + width: 60, + sortable: true, + editable: false, + }, + brand: { + formatter: 'link', + sortable: true, + editable: false, + }, + price: { + width: 60, + sortable: true, + editable: false, + }, + saleValue: { + width: 60, + sortable: true, + editable: false, + }, + seller: { + formatter: 'link', + sortable: true, + editable: false, + }, + categoryPopularity: { + width: 100, + editable: false, + }, + commentsCount: { + width: 100, + sortable: true, + editable: false, + }, + starsValue: { + width: 100, + sortable: true, + editable: false, + }, + questionsCount: { + width: 100, + sortable: true, + editable: false, + }, + lastMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + lastMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + perMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + perMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + prevMonthSalesAmount: { + width: 150, + sortable: true, + editable: false, + }, + prevMonthSalesValue: { + width: 150, + sortable: true, + editable: false, + }, + salesAmountDiff: { + width: 150, + sortable: true, + editable: false, + }, + totalSales: { + width: 100, + sortable: true, + editable: false, + }, + totalSalesDiff: { + width: 150, + sortable: true, + editable: false, + }, + stocks: { + width: 100, + sortable: true, + editable: false, + }, + stocksDiffOrders: { + width: 100, + sortable: true, + editable: false, + }, + stocksDiffReturns: { + width: 100, + sortable: true, + editable: false, + }, + rootId: { + editable: false, + }, + photosCount: { + editable: false, + }, + firstParsedAt: { + editable: false, + }, + lastMonthParsedAt: { + editable: false, + }, + parsedAt: { + editable: false, + }, + prevParsedAt: { + editable: false, + }, }, }, { - '@id': 'mktp:_20dAy80', + '@id': 'mktp:ProductTree', '@type': 'aldkg:DataControl', - resultsScope: 'mktp:Categories_Coll_1688', + resultsScope: 'mktp:Products_Coll', options: { renderType: 'tree', - title: '1688', - treeNodeTitleKey: 'name', - treeNodeParentKey: 'SubcatInCatLink', + title: 'Продукты', + treeNodeTitleKey: 'title', + treeNodeParentKey: 'SubProdInProdLink', + connections: [{ toObj: 'mktp:ProductCards_in_Product_Coll_Ent0_Cond', toProp: 'CardInProdLink' }], }, }, ], }, - { - '@id': 'mktp:CategoryCardsTable', - '@type': 'aldkg:Array', - resultsScope: 'mktp:ProductCards_in_Category_Coll', - options: { - target: { - name: 'правую таблицу', - iri: 'mktp:ProductCards_in_Product_Coll', - }, - multiSelect: true, - draggable: true, - resizeableHeader: true, - height: 'all-empty-space', - style: { height: '100%' }, - order: [ - 'imageUrl', - 'name', - 'price', - 'saleValue', - 'categoryPopularity', - 'commentsCount', - 'starsValue', - 'questionsCount', - 'lastMonthSalesAmount', - 'lastMonthSalesValue', - 'perMonthSalesAmount', - 'perMonthSalesValue', - 'prevMonthSalesAmount', - 'prevMonthSalesValue', - 'salesAmountDiff', - 'totalSales', - 'totalSalesDiff', - 'stocks', - 'stocksDiffOrders', - 'stocksDiffReturns', - 'country', - 'brand', - 'seller', - 'identifier', - 'rootId', - 'photosCount', - 'firstParsedAt', - 'lastMonthParsedAt', - 'parsedAt', - 'prevParsedAt', - ], - imageUrl: { - width: 60, - formatter: 'image', - editable: false, - }, - identifier: { - formatter: 'link', - //dataToFormatter: { link: 'identifier' }, - sortable: true, - editable: false, - }, - name: { - width: 340, - formatter: 'link', - dataToFormatter: { link: '@id' }, - sortable: true, - editable: false, - }, - country: { - width: 60, - sortable: true, - editable: false, - }, - brand: { - formatter: 'link', - sortable: true, - editable: false, - }, - price: { - width: 60, - sortable: true, - editable: false, - }, - saleValue: { - width: 60, - sortable: true, - editable: false, - }, - seller: { - formatter: 'link', - sortable: true, - editable: false, - }, - categoryPopularity: { - width: 100, - editable: false, - }, - commentsCount: { - width: 100, - sortable: true, - editable: false, - }, - starsValue: { - width: 100, - sortable: true, - editable: false, - }, - questionsCount: { - width: 100, - sortable: true, - editable: false, - }, - lastMonthSalesAmount: { - width: 150, - sortable: true, - editable: false, - }, - lastMonthSalesValue: { - width: 150, - sortable: true, - editable: false, - }, - perMonthSalesAmount: { - width: 150, - sortable: true, - editable: false, - }, - perMonthSalesValue: { - width: 150, - sortable: true, - editable: false, - }, - prevMonthSalesAmount: { - width: 150, - sortable: true, - editable: false, - }, - prevMonthSalesValue: { - width: 150, - sortable: true, - editable: false, - }, - salesAmountDiff: { - width: 150, - sortable: true, - editable: false, - }, - totalSales: { - width: 100, - sortable: true, - editable: false, - }, - totalSalesDiff: { - width: 150, - sortable: true, - editable: false, - }, - stocks: { - width: 100, - sortable: true, - editable: false, - }, - stocksDiffOrders: { - width: 100, - sortable: true, - editable: false, - }, - stocksDiffReturns: { - width: 100, - sortable: true, - editable: false, - }, - rootId: { - editable: false, - }, - photosCount: { - editable: false, - }, - firstParsedAt: { - editable: false, - }, - lastMonthParsedAt: { - editable: false, - }, - parsedAt: { - editable: false, - }, - prevParsedAt: { - editable: false, - }, - }, - }, - { - '@id': 'mktp:ProductCardsTable', - '@type': 'aldkg:Array', - resultsScope: 'mktp:ProductCards_in_Product_Coll', - options: { - draggable: true, - resizeableHeader: true, - height: 'all-empty-space', - style: { height: '100%' }, - order: [ - 'imageUrl', - 'name', - 'price', - 'saleValue', - 'categoryPopularity', - 'commentsCount', - 'starsValue', - 'questionsCount', - 'lastMonthSalesAmount', - 'lastMonthSalesValue', - 'perMonthSalesAmount', - 'perMonthSalesValue', - 'prevMonthSalesAmount', - 'prevMonthSalesValue', - 'salesAmountDiff', - 'totalSales', - 'totalSalesDiff', - 'stocks', - 'stocksDiffOrders', - 'stocksDiffReturns', - 'country', - 'brand', - 'seller', - 'identifier', - 'rootId', - 'photosCount', - 'firstParsedAt', - 'lastMonthParsedAt', - 'parsedAt', - 'prevParsedAt', - ], - imageUrl: { - width: 60, - formatter: 'image', - editable: false, - }, - identifier: { - formatter: 'link', - //dataToFormatter: { link: 'identifier' }, - sortable: true, - editable: false, - }, - name: { - width: 340, - formatter: 'link', - dataToFormatter: { link: '@id' }, - sortable: true, - editable: false, - }, - country: { - width: 60, - sortable: true, - editable: false, - }, - brand: { - formatter: 'link', - sortable: true, - editable: false, - }, - price: { - width: 60, - sortable: true, - editable: false, - }, - saleValue: { - width: 60, - sortable: true, - editable: false, - }, - seller: { - formatter: 'link', - sortable: true, - editable: false, - }, - categoryPopularity: { - width: 100, - editable: false, - }, - commentsCount: { - width: 100, - sortable: true, - editable: false, - }, - starsValue: { - width: 100, - sortable: true, - editable: false, - }, - questionsCount: { - width: 100, - sortable: true, - editable: false, - }, - lastMonthSalesAmount: { - width: 150, - sortable: true, - editable: false, - }, - lastMonthSalesValue: { - width: 150, - sortable: true, - editable: false, - }, - perMonthSalesAmount: { - width: 150, - sortable: true, - editable: false, - }, - perMonthSalesValue: { - width: 150, - sortable: true, - editable: false, - }, - prevMonthSalesAmount: { - width: 150, - sortable: true, - editable: false, - }, - prevMonthSalesValue: { - width: 150, - sortable: true, - editable: false, - }, - salesAmountDiff: { - width: 150, - sortable: true, - editable: false, - }, - totalSales: { - width: 100, - sortable: true, - editable: false, - }, - totalSalesDiff: { - width: 150, - sortable: true, - editable: false, - }, - stocks: { - width: 100, - sortable: true, - editable: false, - }, - stocksDiffOrders: { - width: 100, - sortable: true, - editable: false, - }, - stocksDiffReturns: { - width: 100, - sortable: true, - editable: false, - }, - rootId: { - editable: false, - }, - photosCount: { - editable: false, - }, - firstParsedAt: { - editable: false, - }, - lastMonthParsedAt: { - editable: false, - }, - parsedAt: { - editable: false, - }, - prevParsedAt: { - editable: false, - }, - }, - }, - { - '@id': 'mktp:ProductTree', - '@type': 'aldkg:DataControl', - resultsScope: 'mktp:Products_Coll', - options: { - renderType: 'tree', - title: 'Продукты', - treeNodeTitleKey: 'title', - treeNodeParentKey: 'SubProdInProdLink', - connections: [{ toObj: 'mktp:ProductCards_in_Product_Coll_Ent0_Cond', toProp: 'CardInProdLink' }], - }, - }, ], }, ], @@ -708,9 +728,9 @@ const additionalCollsVerticalLayout100Height = cloneDeep(additionalColls); additionalCollsVerticalLayout100Height[0].data[0].elements = [ { '@id': 'mktp:_934jHd67', - '@type': 'aldkg:VerticalLayout', + '@type': 'aldkg:PanelLayout', options: { - height: 'all-empty-space', + style: { height: '100%' }, }, elements: additionalCollsVerticalLayout100Height[0].data[0].elements, }, @@ -739,9 +759,9 @@ const additionalCollsVerticalLayout100HeightForm = cloneDeep(additionalColls); additionalCollsVerticalLayout100HeightForm[0].data[0].elements = [ { '@id': 'mktp:_934jHd67', - '@type': 'aldkg:VerticalLayout', + '@type': 'aldkg:PanelLayout', options: { - height: 'all-empty-space', + style: { height: '100%' }, }, elements: [...additionalCollsVerticalLayout100HeightForm[0].data[0].elements, cardForm], }, diff --git a/stories/TwoTablesBig.stories.tsx b/stories/TwoTablesBig.stories.tsx index ac25315..b9f69dd 100644 --- a/stories/TwoTablesBig.stories.tsx +++ b/stories/TwoTablesBig.stories.tsx @@ -40,7 +40,7 @@ export default { const Template: Story = (args) => { const client = new SparqlClientImpl( 'https://rdf4j.agentlab.ru/rdf4j-server', - 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces', + 'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp-schema/namespaces', ); const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, args.additionalColls); const store: any = asReduxStore(rootStore); @@ -74,6 +74,7 @@ const viewKinds = [ title: 'TwoTables', description: 'Big table View with TwoTables', collsConstrs: [ + /// Marketplaces { '@id': 'mktp:Marketplaces_Coll', '@type': 'aldkg:CollConstr', @@ -87,7 +88,7 @@ const viewKinds = [ ], orderBy: [{ expression: variable('rank0'), descending: false }], }, - /// Marketplace products + /// Marketplace categories & cards { '@id': 'mktp:Categories_Coll', '@type': 'aldkg:CollConstr', @@ -95,7 +96,7 @@ const viewKinds = [ { '@id': 'mktp:Categories_Coll_Ent', '@type': 'aldkg:EntConstr', - schema: 'hs:CategoryShape', + schema: 'als:CategoryShape', //'hs:CategoryShape', service: mktpSchemaRepoIri, }, ], @@ -110,7 +111,7 @@ const viewKinds = [ schema: 'hs:ProductCardShape', conditions: { '@id': 'mktp:ProductCards_in_Category_Coll_Ent_con', - CardInCatLink: undefined, //'https://www.wildberries.ru/catalog/zdorove/ozdorovlenie?sort=popular&page=1&xsubject=594', + CardInCatLink: 'https://muying.1688.com/wanju', }, service: mktpSchemaRepoIri, }, @@ -139,7 +140,7 @@ const viewKinds = [ schema: 'hs:ProductCardShape', conditions: { '@id': 'mktp:ProductCards_in_Product_Coll_Ent_Cond', - CardInProdLink: undefined, //'mktp_d:Massager', + CardInProdLink: null, //'mktp_d:Massager', }, service: mktpSchemaRepoIri, }, @@ -149,10 +150,12 @@ const viewKinds = [ elements: [ { '@id': 'mktp:_934jHd67', - '@type': 'aldkg:VerticalLayout', - //options: { - // height: 'all-empty-space', - ///}, + '@type': 'aldkg:PanelLayout', + options: { + style: { + height: '100%', + }, + }, elements: [ { '@id': 'mktp:_df7eds', @@ -188,14 +191,7 @@ const viewKinds = [ width: '100%', height: '100%', }, - height: 'all-empty-space', - width: 'all-empty-space', - defaultSize: { - 'mktp:MarketplacesTabs': '17%', - 'mktp:CategoryCardsTable': '43%', - 'mktp:ProductCardsTable': '26%', - 'mktp:ProductTree': '17%', - }, + initialSizes: [17, 43, 26, 17], }, // child ui elements configs elements: [ @@ -222,7 +218,6 @@ const viewKinds = [ }, draggable: true, resizeableHeader: true, - height: 'all-empty-space', style: { height: '100%' }, order: [ 'imageUrl', @@ -405,7 +400,6 @@ const viewKinds = [ options: { draggable: true, resizeableHeader: true, - height: 'all-empty-space', style: { height: '100%' }, order: [ 'imageUrl', diff --git a/yarn.lock b/yarn.lock index 7928699..eef9e17 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1323,7 +1323,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.2.0": +"@babel/runtime@^7.2.0", "@babel/runtime@^7.4.4", "@babel/runtime@^7.8.3": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a" integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw== @@ -1503,7 +1503,7 @@ "@emotion/utils" "0.11.3" babel-plugin-emotion "^10.0.27" -"@emotion/hash@0.8.0": +"@emotion/hash@0.8.0", "@emotion/hash@^0.8.0": version "0.8.0" resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== @@ -1853,6 +1853,70 @@ "@types/yargs" "^16.0.0" chalk "^4.0.0" +"@material-ui/core@^4.11.4": + version "4.12.3" + resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca" + integrity sha512-sdpgI/PL56QVsEJldwEe4FFaFTLUqN+rd7sSZiRCdx2E/C7z5yK0y/khAWVBH24tXwto7I1hCzNWfJGZIYJKnw== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/styles" "^4.11.4" + "@material-ui/system" "^4.12.1" + "@material-ui/types" "5.1.0" + "@material-ui/utils" "^4.11.2" + "@types/react-transition-group" "^4.2.0" + clsx "^1.0.4" + hoist-non-react-statics "^3.3.2" + popper.js "1.16.1-lts" + prop-types "^15.7.2" + react-is "^16.8.0 || ^17.0.0" + react-transition-group "^4.4.0" + +"@material-ui/styles@^4.11.4": + version "4.11.4" + resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d" + integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew== + dependencies: + "@babel/runtime" "^7.4.4" + "@emotion/hash" "^0.8.0" + "@material-ui/types" "5.1.0" + "@material-ui/utils" "^4.11.2" + clsx "^1.0.4" + csstype "^2.5.2" + hoist-non-react-statics "^3.3.2" + jss "^10.5.1" + jss-plugin-camel-case "^10.5.1" + jss-plugin-default-unit "^10.5.1" + jss-plugin-global "^10.5.1" + jss-plugin-nested "^10.5.1" + jss-plugin-props-sort "^10.5.1" + jss-plugin-rule-value-function "^10.5.1" + jss-plugin-vendor-prefixer "^10.5.1" + prop-types "^15.7.2" + +"@material-ui/system@^4.12.1": + version "4.12.1" + resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c" + integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw== + dependencies: + "@babel/runtime" "^7.4.4" + "@material-ui/utils" "^4.11.2" + csstype "^2.5.2" + prop-types "^15.7.2" + +"@material-ui/types@5.1.0": + version "5.1.0" + resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2" + integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A== + +"@material-ui/utils@^4.11.2": + version "4.11.2" + resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a" + integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA== + dependencies: + "@babel/runtime" "^7.4.4" + prop-types "^15.7.2" + react-is "^16.8.0 || ^17.0.0" + "@mdx-js/loader@^1.6.22": version "1.6.22" resolved "https://registry.yarnpkg.com/@mdx-js/loader/-/loader-1.6.22.tgz#d9e8fe7f8185ff13c9c8639c048b123e30d322c4" @@ -3333,6 +3397,13 @@ dependencies: "@types/react" "*" +"@types/react-transition-group@^4.2.0": + version "4.4.4" + resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e" + integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug== + dependencies: + "@types/react" "*" + "@types/react-virtualized@^9.21.13": version "9.21.13" resolved "https://registry.yarnpkg.com/@types/react-virtualized/-/react-virtualized-9.21.13.tgz#4222173abe7c9ed7504c75886c8367502ac7b9f1" @@ -5834,6 +5905,14 @@ css-tree@^1.1.2: mdn-data "2.0.14" source-map "^0.6.1" +css-vendor@^2.0.8: + version "2.0.8" + resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d" + integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ== + dependencies: + "@babel/runtime" "^7.8.3" + is-in-browser "^1.0.2" + css-what@^5.0.0: version "5.0.1" resolved "https://registry.yarnpkg.com/css-what/-/css-what-5.0.1.tgz#3efa820131f4669a8ac2408f9c32e7c7de9f4cad" @@ -5992,6 +6071,11 @@ csstype@^2.2.0, csstype@^2.5.7: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e" integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A== +csstype@^2.5.2: + version "2.6.18" + resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.18.tgz#980a8b53085f34af313410af064f2bd241784218" + integrity sha512-RSU6Hyeg14am3Ah4VZEmeX8H7kLwEEirXe6aU2IPfKNvhXwTflK5HQRDNI0ypQXoqmm+QPyG2IaPuQE5zMwSIQ== + csstype@^3.0.2: version "3.0.8" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340" @@ -6314,7 +6398,7 @@ dom-converter@^0.2.0: dependencies: utila "~0.4" -dom-helpers@^5.1.3: +dom-helpers@^5.0.1, dom-helpers@^5.1.3: version "5.2.1" resolved "https://registry.yarnpkg.com/dom-helpers/-/dom-helpers-5.2.1.tgz#d9400536b2bf8225ad98fe052e029451ac40e902" integrity sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA== @@ -8360,7 +8444,7 @@ husky@^7.0.2: resolved "https://registry.yarnpkg.com/husky/-/husky-7.0.2.tgz#21900da0f30199acca43a46c043c4ad84ae88dff" integrity sha512-8yKEWNX4z2YsofXAMT7KvA1g8p+GxtB1ffV8XtpAEGuXNAbCV5wdNKH+qTpw8SM9fh4aMPDR+yQuKfgnreyZlg== -hyphenate-style-name@^1.0.2: +hyphenate-style-name@^1.0.2, hyphenate-style-name@^1.0.3: version "1.0.4" resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d" integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ== @@ -8830,6 +8914,11 @@ is-hexadecimal@^1.0.0: resolved "https://registry.yarnpkg.com/is-hexadecimal/-/is-hexadecimal-1.0.4.tgz#cc35c97588da4bd49a8eedd6bc4082d44dcb23a7" integrity sha512-gyPJuv83bHMpocVYoqof5VDiZveEoGoFL8m3BXNb2VW8Xs+rz9kqO8LOQ5DH6EsuvilT1ApazU0pyl+ytbPtlw== +is-in-browser@^1.0.2, is-in-browser@^1.1.3: + version "1.1.3" + resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835" + integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU= + is-installed-globally@~0.4.0: version "0.4.0" resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520" @@ -9858,6 +9947,76 @@ jsprim@^1.2.2: json-schema "0.2.3" verror "1.10.0" +jss-plugin-camel-case@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.8.2.tgz#8d7f915c8115afaff8cbde08faf610ec9892fba6" + integrity sha512-2INyxR+1UdNuKf4v9It3tNfPvf7IPrtkiwzofeKuMd5D58/dxDJVUQYRVg/n460rTlHUfsEQx43hDrcxi9dSPA== + dependencies: + "@babel/runtime" "^7.3.1" + hyphenate-style-name "^1.0.3" + jss "10.8.2" + +jss-plugin-default-unit@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.8.2.tgz#c66f12e02e0815d911b85c02c2a979ee7b4ce69a" + integrity sha512-UZ7cwT9NFYSG+SEy7noRU50s4zifulFdjkUNKE+u6mW7vFP960+RglWjTgMfh79G6OENZmaYnjHV/gcKV4nSxg== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.8.2" + +jss-plugin-global@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.8.2.tgz#1a35632a693cf50113bcc5ffe6b51969df79c4ec" + integrity sha512-UaYMSPsYZ7s/ECGoj4KoHC2jwQd5iQ7K+FFGnCAILdQrv7hPmvM2Ydg45ThT/sH46DqktCRV2SqjRuxeBH8nRA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.8.2" + +jss-plugin-nested@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.8.2.tgz#79f3c7f75ea6a36ae72fe52e777035bb24d230c7" + integrity sha512-acRvuPJOb930fuYmhkJaa994EADpt8TxI63Iyg96C8FJ9T2xRyU5T6R1IYKRwUiqZo+2Sr7fdGzRTDD4uBZaMA== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.8.2" + tiny-warning "^1.0.2" + +jss-plugin-props-sort@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.8.2.tgz#e25a7471868652c394562b6dc5433dcaea7dff6f" + integrity sha512-wqdcjayKRWBZnNpLUrXvsWqh+5J5YToAQ+8HNBNw0kZxVvCDwzhK2Nx6AKs7p+5/MbAh2PLgNW5Ym/ysbVAuqQ== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.8.2" + +jss-plugin-rule-value-function@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.8.2.tgz#55354b55f1b2968a15976729968f767f02d64049" + integrity sha512-bW0EKAs+0HXpb6BKJhrn94IDdiWb0CnSluTkh0rGEgyzY/nmD1uV/Wf6KGlesGOZ9gmJzQy+9FFdxIUID1c9Ug== + dependencies: + "@babel/runtime" "^7.3.1" + jss "10.8.2" + tiny-warning "^1.0.2" + +jss-plugin-vendor-prefixer@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.8.2.tgz#ebb4a482642f34091e454901e21176441dd5f475" + integrity sha512-DeGv18QsSiYLSVIEB2+l0af6OToUe0JB+trpzUxyqD2QRC/5AzzDrCrYffO5AHZ81QbffYvSN/pkfZaTWpRXlg== + dependencies: + "@babel/runtime" "^7.3.1" + css-vendor "^2.0.8" + jss "10.8.2" + +jss@10.8.2, jss@^10.5.1: + version "10.8.2" + resolved "https://registry.yarnpkg.com/jss/-/jss-10.8.2.tgz#4b2a30b094b924629a64928236017a52c7c97505" + integrity sha512-FkoUNxI329CKQ9OQC8L72MBF9KPf5q8mIupAJ5twU7G7XREW7ahb+7jFfrjZ4iy1qvhx1HwIWUIvkZBDnKkEdQ== + dependencies: + "@babel/runtime" "^7.3.1" + csstype "^3.0.2" + is-in-browser "^1.1.3" + tiny-warning "^1.0.2" + "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0: version "3.2.0" resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz#41108d2cec408c3453c1bbe8a4aae9e1e2bd8f82" @@ -11505,6 +11664,11 @@ polished@^4.0.5: dependencies: "@babel/runtime" "^7.14.0" +popper.js@1.16.1-lts: + version "1.16.1-lts" + resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05" + integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA== + posix-character-classes@^0.1.0: version "0.1.1" resolved "https://registry.yarnpkg.com/posix-character-classes/-/posix-character-classes-0.1.1.tgz#01eac0fe3b5af71a2a6c02feabb8c1fef7e00eab" @@ -12636,6 +12800,14 @@ react-base-table@^1.12.0: react-virtualized-auto-sizer "^1.0.2" react-window "^1.8.2" +react-collapse-pane@^2.0.1: + version "2.0.1" + resolved "https://registry.yarnpkg.com/react-collapse-pane/-/react-collapse-pane-2.0.1.tgz#e5dc9c2c16d2ecd98f36ed81daa2a36948960a4a" + integrity sha512-6D95mymzY+NFKDkvjBGgsRNYbcSdLeY3Af7ll+IfIKh7dAmHyqKFh6cGj4sueVdxWoAgtbagiIeRgRcX/rYXUA== + dependencies: + "@material-ui/core" "^4.11.4" + styled-components "^5.3.0" + react-colorful@^5.1.2: version "5.2.2" resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.2.2.tgz#0a69d0648db47e51359d343854d83d250a742243" @@ -12798,7 +12970,7 @@ react-is@^16.12.0, react-is@^16.13.1, react-is@^16.7.0, react-is@^16.8.1: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react-is@^17.0.1, react-is@^17.0.2: +"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== @@ -12907,6 +13079,16 @@ react-textarea-autosize@^8.3.0: use-composed-ref "^1.0.0" use-latest "^1.0.0" +react-transition-group@^4.4.0: + version "4.4.2" + resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470" + integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg== + dependencies: + "@babel/runtime" "^7.5.5" + dom-helpers "^5.0.1" + loose-envify "^1.4.0" + prop-types "^15.6.2" + react-virtualized-auto-sizer@^1.0.2: version "1.0.6" resolved "https://registry.yarnpkg.com/react-virtualized-auto-sizer/-/react-virtualized-auto-sizer-1.0.6.tgz#66c5b1c9278064c5ef1699ed40a29c11518f97ca" @@ -14331,7 +14513,7 @@ styled-components@^2.4.0: stylis "^3.4.0" supports-color "^3.2.3" -styled-components@^5.3.3: +styled-components@^5.3.0, styled-components@^5.3.3: version "5.3.3" resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.3.tgz#312a3d9a549f4708f0fb0edc829eb34bde032743" integrity sha512-++4iHwBM7ZN+x6DtPPWkCI4vdtwumQ+inA/DdAsqYd4SVgUKJie5vXyzotA00ttcFdQkCng7zc6grwlfIfw+lw== @@ -14608,6 +14790,11 @@ timsort@^0.3.0: resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4" integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q= +tiny-warning@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754" + integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA== + tinymce@5.9.2: version "5.9.2" resolved "https://registry.yarnpkg.com/tinymce/-/tinymce-5.9.2.tgz#c56a1d7800ac23026fbe6e0fcf444c0f157ccafe"