From 164b9e47c2b7aeab5230fb72adf5b33594c52647 Mon Sep 17 00:00:00 2001
From: Artyom <artkrygin@yandex.ru>
Date: Wed, 8 Sep 2021 01:38:08 +0300
Subject: [PATCH] [ADD] style option for SplitPane. Its more flexibly now

---
 src/layouts/SplitPaneLayout.tsx     | 20 ++++++++------------
 stories/TreeAndFormMktp.stories.tsx |  4 ++++
 2 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/src/layouts/SplitPaneLayout.tsx b/src/layouts/SplitPaneLayout.tsx
index 6af40d1..a3ed7f9 100644
--- a/src/layouts/SplitPaneLayout.tsx
+++ b/src/layouts/SplitPaneLayout.tsx
@@ -12,20 +12,13 @@ import SplitPane from 'react-split-pane';
 import Pane from 'react-split-pane/lib/Pane';
 
 import { FormsDispatchProps, FormsDispatch } from '../Form';
-import { rankWith, uiTypeIs, RankedTester } from '../testers';
+import { rankWith, uiTypeIs, RankedTester, optionIs } from '../testers';
 import { withLayoutProps } from '../util/ContextToProps';
 
 import { LayoutComponent } from './LayoutComponent';
 import { Idx, RenderLayoutProps } from '../util/layout';
 import { IViewKindElement } from '../models/uischema';
 
-const divStyle: React.CSSProperties = {
-  position: 'relative',
-  width: '300px',
-  flex: '1 1 auto',
-  margin: '1px',
-};
-
 const renderSplitElements = ({ viewKind, viewKindElement, viewDescr, enabled, Render, form }: RenderLayoutProps) => {
   const elements = viewKindElement.elements;
   const defaultSize = viewKindElement.options && viewKindElement.options.defaultSize;
@@ -35,7 +28,7 @@ const renderSplitElements = ({ viewKind, viewKindElement, viewDescr, enabled, Re
       const style = el.options && el.options.style;
       return (
         <Pane key={idx} style={style} initialSize={defaultSize[id]}>
-          <div style={{ height: '100%', ...style }}>
+          <div>
             <FormsDispatch viewKind={viewKind} viewKindElement={el} viewDescr={viewDescr} enabled={enabled} />
           </div>
         </Pane>
@@ -55,6 +48,7 @@ export const SplitPaneLayoutRenderer: React.FC<LayoutComponent> = ({
   visible,
 }) => {
   //const layout = viewKindElement as Layout;
+  const options = viewKindElement.options || {};
   const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => {
     return (
       <div>
@@ -64,9 +58,11 @@ export const SplitPaneLayoutRenderer: React.FC<LayoutComponent> = ({
   };
   return (
     <React.Fragment>
-      <SplitPane split='vertical' style={divStyle} minSize={300}>
-        {renderSplitElements({ viewKind, viewKindElement, viewDescr, enabled, Render })}
-      </SplitPane>
+      <div style={{ position: 'relative', ...options.style }}>
+        <SplitPane split='vertical' minSize={300}>
+          {renderSplitElements({ viewKind, viewKindElement, viewDescr, enabled, Render })}
+        </SplitPane>
+      </div>
     </React.Fragment>
   );
 };
diff --git a/stories/TreeAndFormMktp.stories.tsx b/stories/TreeAndFormMktp.stories.tsx
index 906bc1e..daa7d4e 100644
--- a/stories/TreeAndFormMktp.stories.tsx
+++ b/stories/TreeAndFormMktp.stories.tsx
@@ -86,6 +86,10 @@ const viewKinds = [
         '@id': 'mktp:_934Jfg7',
         '@type': 'aldkg:SplitPaneLayout',
         options: {
+          style: {
+            width: '100%',
+            height: '100%',
+          },
           defaultSize: {
             'mktp:_85dfg67': '17%',
             'mktp:_83jdv8': '40%',