GH-38 [FIX] More compact form

agentlab · Oct 12, 2021 · 42ed9e3 · 42ed9e3
1 parent 401c634
commit 42ed9e3
Show file tree

Hide file tree

Showing 7 changed files with 190 additions and 186 deletions.
diff --git a/src/Form.css b/src/Form.css
diff --git a/src/Form.tsx b/src/Form.tsx
@@ -22,7 +22,6 @@ import { UnknownRenderer } from './UnknownRenderer';
 import { RankedTester } from './testers';
 import { IViewDescr, IViewDescrElement, IViewKind, IViewKindElement } from './models/uischema';
 import { JsObject } from '@agentlab/sparql-jsld-client';
-import './Form.css';
 
 export interface ControlComponent {
   data: any;

diff --git a/src/layouts/AntdFormLayout.tsx b/src/layouts/AntdFormLayout.tsx
@@ -82,7 +82,7 @@ export const AntdFormLayout: React.FC<any> = ({
   return (
     <AutoSizer>
       {({ width, height }: any) => (
-        <div style={{ width, height, overflow: 'auto' }} onClick={() => onEdit()}>
+        <div style={{ width, height, overflow: 'auto', position: 'relative' }} onClick={() => onEdit()}>
           <span style={{ padding: '7px', fontSize: '2em' }}>{title}</span>
           {readOnly ? null : <LogicalButton form={id} onSave={onSave} onCancel={onCancel} />}
           <Form labelAlign={'left'}>

diff --git a/src/layouts/AntdHorizontalLayout.tsx b/src/layouts/AntdHorizontalLayout.tsx
@@ -25,18 +25,17 @@ export const AntdHorizontalLayoutRenderer: React.FC<LayoutComponent> = ({
   viewDescrElement,
   enabled,
   visible,
+  form,
 }) => {
   //const layout = viewKindElement as Layout;
   const parentViewKindElement = viewKindElement;
-  const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, viewKind, viewKindElement, viewDescr, enabled, form }) => {
+  const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => {
     const options = viewKindElement.options || {};
+    const numberOfColumns = Math.ceil(24 / (parentViewKindElement.elements?.length || 1));
     const style: any = options.style;
-    const span =
-      options.contentSize || !parentViewKindElement.elements
-        ? undefined
-        : Math.ceil(24 / parentViewKindElement.elements.length);
+    const span = options.contentSize || numberOfColumns;
     return (
-      <Col key={idx} style={style} span={span}>
+      <Col key={idx} style={style} span={numberOfColumns}>
         <FormsDispatch
           viewKind={viewKind}
           viewKindElement={viewKindElement}
@@ -47,7 +46,7 @@ export const AntdHorizontalLayoutRenderer: React.FC<LayoutComponent> = ({
       </Col>
     );
   };
-  const justify: any = 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%';

diff --git a/src/layouts/AntdVerticalLayout.tsx b/src/layouts/AntdVerticalLayout.tsx
@@ -42,7 +42,7 @@ export const AntdVerticalLayoutRenderer: React.FC<LayoutComponent> = ({
           width: '100%',
           //flex: viewKindElement.options && viewKindElement.options.height === 'all-empty-space' ? '1 1 auto' : '',
         }}>
-        <Col span={24}>
+        <Col span={24} style={{ position: 'relative' }}>
           <FormsDispatch
             viewKind={viewKind}
             viewKindElement={newViewKindElement}

diff --git a/src/util/ContextToProps.tsx b/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,