GH-40 Refactor layout behaviour, add PanelLayout, add some layout stories

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",

src/controls/AntdImageControl.tsx

@@ -7,7 +7,6 @@ export const AntdImageControl = (props: any): JSX.Element => {
   const { uiOptions, data } = props;
   return (
     <Image
-      height={'80%'}
       src={Array.isArray(data) ? data[0] || '' : data && typeof data === 'string' ? data : ''}
       fallback={uiOptions.fallback}
     />

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<any> = (props) => {
+  const style = props?.viewKindElement.options?.style;
+  const value = props?.viewKindElement.options?.value;
+  return (
+    <div style={{ ...style, backgroundColor: colors[getRandomInt(colors.length)] }}>
+      <pre style={{ verticalAlign: 'center' }}>{value}</pre>
+    </div>
+  );
+};
+
+export const panelWithTextControlTester: RankedTester = rankWith(3, uiTypeIs('aldkg:TextPanel'));

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 },

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<any> = ({
 }) => {
   const { readOnly, style } = viewKindElement.options;
   return (
-    <AutoSizer>
-      {({ width, height }: any) => (
-        <div
-          style={{ width, height, overflow: 'auto', position: 'relative', ...style }}
-          onClick={() => !readOnly && onEdit()}>
-          {title && <span style={{ padding: '7px', fontSize: '2em' }}>{title}</span>}
-          {readOnly ? null : <LogicalButton form={id} onSave={onSave} onCancel={onCancel} />}
-          <Form labelAlign={'left'}>
-            <AntdVerticalLayoutWithStore
-              id={`${id}Layout`}
-              viewKind={viewKind}
-              viewKindElement={viewKindElement}
-              viewDescr={viewDescr}
-              viewDescrElement={viewDescrElement}
-              schema={{}}
-              enabled={enabled}
-              form={id}
-              readOnly={readOnly}
-            />
-          </Form>
-        </div>
-      )}
-    </AutoSizer>
+    <div style={{ overflow: 'auto', position: 'relative', ...style }} onClick={() => !readOnly && onEdit()}>
+      {title && <span style={{ padding: '7px', fontSize: '2em' }}>{title}</span>}
+      {readOnly ? null : <LogicalButton form={id} onSave={onSave} onCancel={onCancel} />}
+      <Form labelAlign={'left'}>
+        <PanelLayoutWithStore
+          id={`${id}Layout`}
+          viewKind={viewKind}
+          viewKindElement={viewKindElement}
+          viewDescr={viewDescr}
+          viewDescrElement={viewDescrElement}
+          schema={{}}
+          enabled={enabled}
+          form={id}
+          readOnly={readOnly}
+        />
+      </Form>
+    </div>
   );
 };
 

src/layouts/AntdHorizontalLayout.tsx

@@ -30,35 +30,39 @@ export const AntdHorizontalLayoutRenderer: React.FC<LayoutComponent> = ({
   //const layout = viewKindElement as Layout;
   const parentViewKindElement = viewKindElement;
   const Render: React.FC<FormsDispatchProps & Idx> = ({ 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 (
-      <Col key={idx} style={style} span={span}>
+      <div key={idx} style={style}>
         <FormsDispatch
           viewKind={viewKind}
           viewKindElement={viewKindElement}
           viewDescr={viewDescr}
           enabled={enabled}
           form={form}
         />
-      </Col>
+      </div>
     );
   };
   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 (
-    <Row justify={justify} style={rowStyle} align={align}>
-      {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render })}
-    </Row>
-  );
+  return renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render });
 };
 
 export const antdHorizontalLayoutTester: RankedTester = rankWith(2, uiTypeIs('aldkg:HorizontalLayout'));

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<LayoutComponent> = ({
 }) => {
   const style = viewKindElement.options?.style;
   const Render: React.FC<FormsDispatchProps & Idx> = ({ 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 (
       <Row
         style={{
           position: 'relative',
-          width: '100%', //
-          height,
-          //flex: viewKindElement.options && viewKindElement.options.height === 'all-empty-space' ? '1 1 auto' : '',
+          ...rowStyle,
+          flexGrow: grow,
         }}>
-        <Col span={24} style={{ position: 'relative' }}>
-          <FormsDispatch
-            viewKind={viewKind}
-            viewKindElement={newViewKindElement}
-            viewDescr={viewDescr}
-            enabled={enabled}
-            form={form}
-          />
-        </Col>
+        <FormsDispatch
+          viewKind={viewKind}
+          viewKindElement={viewKindElement}
+          viewDescr={viewDescr}
+          enabled={enabled}
+          form={form}
+        />
       </Row>
     );
   };
   return (
-    <React.Fragment>
-      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%', ...style }}>
-        {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render, readOnly })}
-      </div>
-    </React.Fragment>
+    <div style={{ display: 'flex', flexDirection: 'column', ...style }}>
+      {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render, readOnly })}
+    </div>
   );
 };
 

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<LayoutComponent> = ({
+  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<FormsDispatchProps & Idx> = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => {
+    const style = viewKindElement.options?.style;
+    const newViewKindElement = { ...viewKindElement };
+    if (newViewKindElement.options) {
+      newViewKindElement.options.style = { ...style, ...childLayoutStyle };
+    }
+    return (
+      <FormsDispatch
+        viewKind={viewKind}
+        viewKindElement={newViewKindElement}
+        viewDescr={viewDescr}
+        enabled={enabled}
+        form={form}
+      />
+    );
+  };
+  return (
+    <div style={{ ...style, ...layoutStyle }}>
+      {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render })}
+    </div>
+  );
+};
+
+export const panelLayoutTester: RankedTester = rankWith(2, uiTypeIs('aldkg:PanelLayout'));
+export const PanelLayoutWithStore = withLayoutProps(PanelLayout);