GH-28 Incorrect SplitPane behavior inside a VerticalLayout element

src/layouts/AntdVerticalLayout.tsx

@@ -30,17 +30,23 @@ export const AntdVerticalLayoutRenderer: React.FC<LayoutComponent> = ({
 }) => {
   const Render: React.FC<FormsDispatchProps & Idx> = ({ idx, viewKind, viewKindElement, viewDescr, enabled }) => {
     const options = viewKindElement.options || {};
-    const style: any = options.style;
+    const newViewKindElement = { ...viewKindElement };
+    const style = viewKindElement.options?.style;
+    if (newViewKindElement.options) {
+      newViewKindElement.options.style = {};
+    }
     return (
       <Row
         style={{
+          position: 'relative',
           width: '100%',
-          flex: viewKindElement.options && viewKindElement.options.height === 'all-empty-space' ? '1 1 auto' : '',
+          //flex: viewKindElement.options && viewKindElement.options.height === 'all-empty-space' ? '1 1 auto' : '',
+          ...style,
         }}>
-        <Col style={style} span={24}>
+        <Col span={24}>
           <FormsDispatch
             viewKind={viewKind}
-            viewKindElement={viewKindElement}
+            viewKindElement={newViewKindElement}
             viewDescr={viewDescr}
             enabled={enabled}
             form={form}

src/layouts/SplitPaneLayout.tsx

@@ -56,7 +56,7 @@ export const SplitPaneLayoutRenderer: React.FC<LayoutComponent> = ({
   };
   return (
     <React.Fragment>
-      <div style={{ position: 'relative', ...options.style }}>
+      <div style={{ position: 'relative', height: '100%', ...options.style }}>
         <SplitPane split='vertical' minSize={300}>
           {renderSplitElements({ viewKind, viewKindElement, viewDescr, enabled, Render })}
         </SplitPane>

stories/CardsList.stories.tsx

@@ -305,7 +305,6 @@ export const Full: Story<{}> = () => {
 
   const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server');
   const rootStore = createUiModelFromState('mktp', client, rootModelInitialState, additionalColls);
-  console.log('rootStore', rootStore);
   const store: any = asReduxStore(rootStore);
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   connectReduxDevtools(require('remotedev'), rootStore);

stories/TreeTableFormMktp.stories.tsx

@@ -7,6 +7,7 @@
  *
  * SPDX-License-Identifier: GPL-3.0-only
  ********************************************************************************/
+import { cloneDeep } from 'lodash-es';
 import moment from 'moment';
 import React from 'react';
 import { Story, Meta } from '@storybook/react';
@@ -35,6 +36,43 @@ import {
 import { viewKindCollConstr, viewDescrCollConstr } from '../src/models/ViewCollConstrs';
 import { createUiModelFromState } from '../src/models/MstViewDescr';
 
+export default {
+  title: 'Several Controls/Tree-Table-Form',
+  component: Form,
+  argTypes: {
+    backgroundColor: { control: 'color' },
+  },
+} as Meta;
+
+const Template: Story = (args: any) => {
+  const antdRenderers: RendererRegistryEntry[] = [
+    ...antdControlRenderers,
+    ...antdLayoutRenderers,
+    ...antdDataControlRenderers,
+    ...tableRenderers,
+  ];
+
+  //const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server');
+  //const rootStore = createUiModelFromState('mktp', client, rootModelInitialState, additionalColls);
+  const client = new SparqlClientImpl(
+    'https://rdf4j.agentlab.ru/rdf4j-server',
+    'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces',
+  );
+  const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, args.additionalColls);
+  const store: any = asReduxStore(rootStore);
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  connectReduxDevtools(require('remotedev'), rootStore);
+  return (
+    <div style={{ height: 'calc(100vh - 32px)' }}>
+      <Provider store={store}>
+        <MstContextProvider store={rootStore} renderers={antdRenderers} cells={antdCells}>
+          <Form viewDescrId={args.viewDescrId} viewDescrCollId={args.viewDescrCollId} />
+        </MstContextProvider>
+      </Provider>
+    </div>
+  );
+};
+
 const viewKinds = [
   {
     '@id': 'mktp:TreeTableFormMktpCategoriesViewKind',
@@ -118,13 +156,13 @@ const viewKinds = [
             width: '100%',
             height: '100%',
           },
+          height: 'all-empty-space',
+          //width: 'all-empty-space',
           defaultSize: {
             'mktp:MarketplacesTabs': '17%',
             'mktp:CategoryCardsTable': '43%',
             'mktp:CategoryCardForm': '43%',
           },
-          height: 'all-empty-space',
-          //width: 'all-empty-space',
         },
         elements: [
           {
@@ -426,39 +464,18 @@ const additionalColls: CollState[] = [
   },
 ];
 
-export default {
-  title: 'Several Controls/Tree-Table-Form',
-  component: Form,
-  argTypes: {
-    backgroundColor: { control: 'color' },
-  },
-} as Meta;
-
-export const MktpCategories: Story<{}> = () => {
-  const antdRenderers: RendererRegistryEntry[] = [
-    ...antdControlRenderers,
-    ...antdLayoutRenderers,
-    ...antdDataControlRenderers,
-    ...tableRenderers,
-  ];
+export const MktpCategories100Percent = Template.bind({});
+MktpCategories100Percent.args = {
+  additionalColls,
+  viewDescrId: viewDescrs[0]['@id'],
+  viewDescrCollId: viewDescrCollConstr['@id'],
+};
 
-  //const client = new SparqlClientImpl('https://rdf4j.agentlab.ru/rdf4j-server');
-  //const rootStore = createUiModelFromState('mktp', client, rootModelInitialState, additionalColls);
-  const client = new SparqlClientImpl(
-    'https://rdf4j.agentlab.ru/rdf4j-server',
-    'https://rdf4j.agentlab.ru/rdf4j-server/repositories/mktp/namespaces',
-  );
-  const rootStore = createUiModelFromState('mktp-fed', client, rootModelInitialState, additionalColls);
-  const store: any = asReduxStore(rootStore);
-  // eslint-disable-next-line @typescript-eslint/no-var-requires
-  connectReduxDevtools(require('remotedev'), rootStore);
-  return (
-    <div style={{ height: 'calc(100vh - 32px)' }}>
-      <Provider store={store}>
-        <MstContextProvider store={rootStore} renderers={antdRenderers} cells={antdCells}>
-          <Form viewDescrId={viewDescrs[0]['@id']} viewDescrCollId={viewDescrCollConstr['@id']} />
-        </MstContextProvider>
-      </Provider>
-    </div>
-  );
+export const MktpCategories50Percent = Template.bind({});
+const additionalColls50 = cloneDeep(additionalColls);
+additionalColls50[0].data[0].elements[0].options.style.height = '50%';
+MktpCategories50Percent.args = {
+  additionalColls: additionalColls50,
+  viewDescrId: viewDescrs[0]['@id'],
+  viewDescrCollId: viewDescrCollConstr['@id'],
 };