GH-38 [ADD] Align for HorizontalLayout, no borders for read-only fields

agentlab · Oct 12, 2021 · 401c634 · 401c634
1 parent 4adc93b
commit 401c634
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 2 deletions.
diff --git a/src/Form.css b/src/Form.css
@@ -0,0 +1,3 @@
+.ant-input-disabled {
+  border: none;
+}
diff --git a/src/Form.tsx b/src/Form.tsx
@@ -22,6 +22,7 @@ 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/AntdHorizontalLayout.tsx b/src/layouts/AntdHorizontalLayout.tsx
@@ -47,11 +47,12 @@ export const AntdHorizontalLayoutRenderer: React.FC<LayoutComponent> = ({
       </Col>
     );
   };
-  const justify: any = viewKindElement.options ? viewKindElement.options.justify : 'center';
+  const justify: any = viewKindElement.options?.justify || 'center';
+  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>
   );

diff --git a/stories/FormWithColumns.stories.tsx b/stories/FormWithColumns.stories.tsx
@@ -96,6 +96,7 @@ const viewKinds = [
         '@type': 'aldkg:HorizontalLayout',
         options: {
           justify: 'start', // start end center space-between space-around
+          align: 'flex-start',
           //contentSize: true,
           style: {
             //flexGrow: '5',