GH-38 [FIX] Broken horizontal layout

src/controls/AntdImageControl.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { rankWith, RankedTester, uiTypeIs } from '../testers';
+import { Image } from 'antd';
+import { withStoreToControlProps } from '../util/ContextToProps';
+
+export const AntdImageControl = (props: any): JSX.Element => {
+  const { uiOptions, data } = props;
+  return <Image height={'100%'} src={Array.isArray(data) ? data[0] || '' : ''} fallback={uiOptions.fallback} />;
+};
+
+export const antdImageControlTester: RankedTester = rankWith(3, uiTypeIs('aldkg:Image'));
+export const AntdImageControlWithStore = withStoreToControlProps(AntdImageControl);

src/controls/index.ts

@@ -17,6 +17,7 @@ import { antdRadioGroupControlTester, AntdRadioGroupControlWithStore } from './A
 import { antdSliderControlTester, AntdSliderControlWithStore } from './AntdSliderControl';
 import { antdTextControlTester, AntdTextControlWithStore } from './AntdTextControl';
 import { tinyMCEControlTester, TinyMCEControlWithStore } from './TinyMCEControl';
+import { antdImageControlTester, AntdImageControlWithStore } from './AntdImageControl';
 
 export const antdControlRenderers: RendererRegistryEntry[] = [
   { tester: antdBooleanControlTester, renderer: AntdBooleanControlWithStore },
@@ -28,6 +29,10 @@ export const antdControlRenderers: RendererRegistryEntry[] = [
     tester: antdRadioGroupControlTester,
     renderer: AntdRadioGroupControlWithStore,
   },
+  {
+    tester: antdImageControlTester,
+    renderer: AntdImageControlWithStore,
+  },
   { tester: antdSliderControlTester, renderer: AntdSliderControlWithStore },
   { tester: antdTextControlTester, renderer: AntdTextControlWithStore },
 
@@ -44,3 +49,4 @@ export * from './AntdRadioGroupControl';
 export * from './AntdSliderControl';
 export * from './AntdTextControl';
 export * from './TinyMCEControl';
+export * from './AntdImageControl';

src/layouts/AntdFormLayout.tsx

@@ -78,12 +78,14 @@ export const AntdFormLayout: React.FC<any> = ({
   onEdit,
   editing,
 }) => {
-  const { readOnly } = viewKindElement.options;
+  const { readOnly, style } = viewKindElement.options;
   return (
     <AutoSizer>
       {({ width, height }: any) => (
-        <div style={{ width, height, overflow: 'auto' }} onClick={() => onEdit()}>
-          <span style={{ padding: '7px', fontSize: '2em' }}>{title}</span>
+        <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

src/layouts/AntdHorizontalLayout.tsx

@@ -25,13 +25,19 @@ export const AntdHorizontalLayoutRenderer: React.FC<LayoutComponent> = ({
   viewDescrElement,
   enabled,
   visible,
+  form,
 }) => {
   //const layout = viewKindElement as Layout;
-  const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, viewKind, viewKindElement, viewDescr, enabled, form }) => {
+  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 =
-      options.contentSize || !viewKindElement.elements ? undefined : Math.ceil(24 / viewKindElement.elements.length);
+      defaultSize && defaultSize[viewKindElement['@id']]
+        ? defaultSize && defaultSize[viewKindElement['@id']]
+        : options.contentSize || numberOfColumns;
     return (
       <Col key={idx} style={style} span={span}>
         <FormsDispatch
@@ -44,11 +50,12 @@ export const AntdHorizontalLayoutRenderer: React.FC<LayoutComponent> = ({
       </Col>
     );
   };
-  const justify: any = viewKindElement.options ? viewKindElement.options.justify : 'center';
+  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={'middle'}>
+    <Row justify={justify} style={rowStyle} align={align}>
       {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render })}
     </Row>
   );

src/layouts/AntdVerticalLayout.tsx

@@ -9,7 +9,7 @@
  ********************************************************************************/
 import React from 'react';
 import { Row, Col } from 'antd';
-
+import { getSnapshot } from 'mobx-state-tree';
 import { FormsDispatchProps, FormsDispatch } from '../Form';
 import { rankWith, uiTypeIs, RankedTester } from '../testers';
 import { withLayoutProps } from '../util/ContextToProps';
@@ -28,22 +28,23 @@ export const AntdVerticalLayoutRenderer: React.FC<LayoutComponent> = ({
   form,
   readOnly,
 }) => {
+  const style = viewKindElement.options?.style;
   const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => {
-    const options = viewKindElement.options || {};
+    const height = viewKindElement.options?.style?.height;
+    console.log('OPT', viewKindElement, height);
     const newViewKindElement = { ...viewKindElement };
-    const style = viewKindElement.options?.style;
     if (newViewKindElement.options) {
       newViewKindElement.options.style = {};
     }
     return (
       <Row
         style={{
           position: 'relative',
-          width: '100%',
+          width: '100%', //
+          height,
           //flex: viewKindElement.options && viewKindElement.options.height === 'all-empty-space' ? '1 1 auto' : '',
-          ...style,
         }}>
-        <Col span={24}>
+        <Col span={24} style={{ position: 'relative' }}>
           <FormsDispatch
             viewKind={viewKind}
             viewKindElement={newViewKindElement}
@@ -57,7 +58,7 @@ export const AntdVerticalLayoutRenderer: React.FC<LayoutComponent> = ({
   };
   return (
     <React.Fragment>
-      <div style={{ display: 'flex', flexDirection: 'column', height: '100%' }}>
+      <div style={{ position: 'relative', display: 'flex', flexDirection: 'column', height: '100%', ...style }}>
         {renderLayoutElements({ viewKind, viewKindElement, viewDescr, enabled, Render, readOnly })}
       </div>
     </React.Fragment>

src/util/ContextToProps.tsx

@@ -599,7 +599,7 @@ const mapStateToControlProps = ({ id, schema, viewKindElement, viewKind, data }:
   const labelDesc = createLabelDescriptionFrom(viewKindElement as any, schema);
   const label = labelDesc.show ? (labelDesc.text as string) : '';
   const key = pathSegments[1];
-  const enabled = data[key] && (editable ?? true);
+  const enabled = data[key] !== undefined && data[key] !== null ? editable ?? true : false;
   return {
     description,
     label,

src/util/layout.tsx

@@ -35,7 +35,7 @@ export const renderLayoutElements = ({
   //const sort = id ? viewKind.properties && viewKind.properties[id] && viewKind.properties[id].order : undefined;
   if (!elements || elements.length === 0) return <></>;
   return elements.map((el: IViewKindElement, idx: number) => {
-    el = { ...el, options: { ...el.options, readOnly } };
+    el = { ...el, options: { readOnly, ...el.options } };
     return (
       <Render key={idx} idx={idx} viewKind={viewKind} viewKindElement={el} viewDescr={viewDescr} enabled={enabled} />
     );