datastake-daf 0.6.271 → 0.6.272

package/src/@daf/core/components/ViewForm/content.jsx

@@ -1,371 +1,411 @@
 /* eslint-disable no-unused-vars */
-import { Tabs, Alert } from 'antd';
-import React, { useEffect, useState } from 'react';
-import Group from './components/group';
-import Input from './components/input';
-import { getInputLabel } from './config';
-import { getToken } from '../../../../helpers/Token';
-import RepeatableGroup from './components/repeatableGroup';
-import RepeatableModals from './components/repeatableModals';
-import { repeatObjects, isGroupInput, groupSubsections, getLastRow, showHideInput } from './helper';
-import GetIcon from '../Icon/index.jsx';
+import { Tabs, Alert } from "antd";
+import React, { useEffect, useState } from "react";
+import Group from "./components/group";
+import Input from "./components/input";
+import { getInputLabel } from "./config";
+import { getToken } from "../../../../helpers/Token";
+import RepeatableGroup from "./components/repeatableGroup";
+import RepeatableModals from "./components/repeatableModals";
+import { repeatObjects, isGroupInput, groupSubsections, getLastRow, showHideInput } from "./helper";
+import GetIcon from "../Icon/index.jsx";
 
 const Content = ({
-  style = {},
-  form = {},
-  data = {},
-  groupConfig = {},
-  versionsDatapoints,
-  linkingData = {},
-  linkingForms = {},
-  ajaxOptions = [],
-  // ADDED
-  t,
-  app,
-  ajaxForms,
-  language,
-  changeAjaxForms,
-  getApiBaseUrl,
-  getAppHeader,
-  user,
-  evaluationConfig = [],
+	style = {},
+	form = {},
+	data = {},
+	groupConfig = {},
+	versionsDatapoints,
+	linkingData = {},
+	linkingForms = {},
+	ajaxOptions = [],
+	// ADDED
+	t,
+	app,
+	ajaxForms,
+	language,
+	changeAjaxForms,
+	getApiBaseUrl,
+	getAppHeader,
+	user,
+	evaluationConfig = [],
+	fullWidth = false,
 }) => {
-  const groupSingle = (grps) => {
-    const form = Object.keys(grps).reduce((f, gKey) => {
-      if (
-        grps[gKey].type !== 'modal' &&
-        !isGroupInput(grps[gKey], false, data) &&
-        !isGroupInput(grps[gKey], true, data) &&
-        grps[gKey].display !== 'group' &&
-        !grps[gKey].viewGroup &&
-        !grps[gKey].component) {
-        if (grps[gKey].group && !f[grps[gKey].group]) {
-          f[grps[gKey].group] = {};
-          Object.assign(f[grps[gKey].group], { [gKey]: grps[gKey] });
-        } else if (grps[gKey].group && f[grps[gKey].group]) {
-          Object.assign(f[grps[gKey].group], { [gKey]: grps[gKey] });
-        }
+	const groupSingle = (grps) => {
+		const form = Object.keys(grps).reduce((f, gKey) => {
+			if (
+				grps[gKey].type !== "modal" &&
+				!isGroupInput(grps[gKey], false, data) &&
+				!isGroupInput(grps[gKey], true, data) &&
+				grps[gKey].display !== "group" &&
+				!grps[gKey].viewGroup &&
+				!grps[gKey].component
+			) {
+				if (grps[gKey].group && !f[grps[gKey].group]) {
+					f[grps[gKey].group] = {};
+					Object.assign(f[grps[gKey].group], { [gKey]: grps[gKey] });
+				} else if (grps[gKey].group && f[grps[gKey].group]) {
+					Object.assign(f[grps[gKey].group], { [gKey]: grps[gKey] });
+				}
 
-        if (grps[gKey]?.meta?.group && !f[grps[gKey]?.meta?.group]) {
-          f[grps[gKey]?.meta?.group] = {};
-          Object.assign(f[grps[gKey].meta.group], { [gKey]: grps[gKey] });
-        } else if (grps[gKey]?.meta?.group && f[grps[gKey]?.meta?.group]) {
-          Object.assign(f[grps[gKey].meta.group], { [gKey]: grps[gKey] });
-        }
+				if (grps[gKey]?.meta?.group && !f[grps[gKey]?.meta?.group]) {
+					f[grps[gKey]?.meta?.group] = {};
+					Object.assign(f[grps[gKey].meta.group], { [gKey]: grps[gKey] });
+				} else if (grps[gKey]?.meta?.group && f[grps[gKey]?.meta?.group]) {
+					Object.assign(f[grps[gKey].meta.group], { [gKey]: grps[gKey] });
+				}
 
-        if (grps[gKey].section && !f[grps[gKey].section]) {
-          f[grps[gKey].section] = {};
-          Object.assign(f[grps[gKey].section], { [gKey]: grps[gKey] });
-        } else if (grps[gKey].section && f[grps[gKey].section]) {
-          Object.assign(f[grps[gKey].section], { [gKey]: grps[gKey] });
-        }
-      }
-      return f;
-    }, {});
-    return form;
-  }
+				if (grps[gKey].section && !f[grps[gKey].section]) {
+					f[grps[gKey].section] = {};
+					Object.assign(f[grps[gKey].section], { [gKey]: grps[gKey] });
+				} else if (grps[gKey].section && f[grps[gKey].section]) {
+					Object.assign(f[grps[gKey].section], { [gKey]: grps[gKey] });
+				}
+			}
+			return f;
+		}, {});
+		return form;
+	};
 
-  const getDisplayGroupConfig = (groups, key) => {
-    return Object.keys(groups).reduce((items, gKey) => {
-      if (groups[gKey].viewGroup === key) {
-        // eslint-disable-next-line no-unused-vars
-        const { viewGroup, ...gCfg } = groups[gKey];
-        items[gKey] = gCfg;
-      }
-      return items;
-    }, {});
-  }
+	const getDisplayGroupConfig = (groups, key) => {
+		return Object.keys(groups).reduce((items, gKey) => {
+			if (groups[gKey].viewGroup === key) {
+				// eslint-disable-next-line no-unused-vars
+				const { viewGroup, ...gCfg } = groups[gKey];
+				items[gKey] = gCfg;
+			}
+			return items;
+		}, {});
+	};
 
-  const getComponent = (component, key, config) => {
-    switch (component) {
-      case 'repeatableModals':
-        return <RepeatableModals
-          app={app}
-          key={key}
-          t={t}
-          ajaxForms={ajaxForms}
-          changeAjaxForms={changeAjaxForms}
-          getApiBaseUrl={getApiBaseUrl}
-          getAppHeader={getAppHeader}
-          user={user}
-          getToken={getToken}
-          name={key}
-          data={data}
-          config={config}
-          linkingData={linkingData}
-          linkingForms={linkingForms}
-          ajaxOptions={ajaxOptions}
-        />;
-      default:
-        return <p>Component</p>;
-    }
-  }
+	const getComponent = (component, key, config) => {
+		switch (component) {
+			case "repeatableModals":
+				return (
+					<RepeatableModals
+						app={app}
+						key={key}
+						t={t}
+						ajaxForms={ajaxForms}
+						changeAjaxForms={changeAjaxForms}
+						getApiBaseUrl={getApiBaseUrl}
+						getAppHeader={getAppHeader}
+						user={user}
+						getToken={getToken}
+						name={key}
+						data={data}
+						config={config}
+						linkingData={linkingData}
+						linkingForms={linkingForms}
+						ajaxOptions={ajaxOptions}
+					/>
+				);
+			default:
+				return <p>Component</p>;
+		}
+	};
 
-  const isDisplayGroup = (input) => input.display && input.display === 'group';
-  const isSingleModal = (input) => input.type && input.type === 'modal';
-  const hasComponent = (input) => input.component && typeof input.component === 'string';
+	const isDisplayGroup = (input) => input.display && input.display === "group";
+	const isSingleModal = (input) => input.type && input.type === "modal";
+	const hasComponent = (input) => input.component && typeof input.component === "string";
 
-  const typeRender = (groups, singleGroupsKeys, addedContent) => {
-    const _length = Object.keys(groups || {}).length;
-    const isEven = _length % 2 === 0;
+	const typeRender = (groups, singleGroupsKeys, addedContent) => {
+		const _length = Object.keys(groups || {}).length;
+		const isEven = _length % 2 === 0;
 
-    const groupped = Object.keys(groups).reduce((all, key) => {
-      const _val = groups[key];
-      const group = _val.group || _val?.meta?.group || _val.section;
+		const groupped = Object.keys(groups).reduce((all, key) => {
+			const _val = groups[key];
+			const group = _val.group || _val?.meta?.group || _val.section;
 
-      if (all[group]) {
-        all[group][key] = _val;
-      } else {
-        all[group] = { [key]: _val };
-      }
+			if (all[group]) {
+				all[group][key] = _val;
+			} else {
+				all[group] = { [key]: _val };
+			}
 
-      return all;
-    }, {});
+			return all;
+		}, {});
 
+		return Object.keys(groupped).map((key) => {
+			const groups = groupped[key];
 
-    return Object.keys(groupped).map((key) => {
-      const groups = groupped[key];
+			return (
+				<React.Fragment key={key}>
+					{repeatObjects(groups, (key, ind) => {
+						// normal group
+						return hasComponent(groups[key]) ? (
+							getComponent(groups[key].component, key, groups[key])
+						) : isGroupInput(groups[key], false, data) ? (
+							<Group
+								t={t}
+								key={key}
+								name={key}
+								linkingData={linkingData}
+								config={groups[key]}
+								data={data}
+								allData={data}
+								linkingForms={linkingForms}
+								cols={2}
+								ajaxForms={ajaxForms}
+								changeAjaxForms={changeAjaxForms}
+								getApiBaseUrl={getApiBaseUrl}
+								getAppHeader={getAppHeader}
+								user={user}
+								getToken={getToken}
+								evaluationConfig={evaluationConfig}
+								ajaxOptions={ajaxOptions}
+							></Group>
+						) : // repeatable group
+						isGroupInput(groups[key], true, data) ? (
+							<RepeatableGroup
+								app={app}
+								key={key}
+								t={t}
+								ajaxForms={ajaxForms}
+								changeAjaxForms={changeAjaxForms}
+								getApiBaseUrl={getApiBaseUrl}
+								getAppHeader={getAppHeader}
+								user={user}
+								getToken={getToken}
+								name={key}
+								config={groups[key]}
+								data={data}
+								allData={data}
+								linkingData={linkingData}
+								linkingForms={linkingForms}
+								ajaxOptions={ajaxOptions}
+							></RepeatableGroup>
+						) : // single inputs grouped
+						singleGroupsKeys.includes(key) ? (
+							(() => {
+								if (!addedContent.includes(key)) {
+									const currentGroup = Object.keys(groupSingle(groups)).find(
+										(k) => Object.keys(groupSingle(groups)[k]).includes(key),
+									);
+									addedContent.push(
+										...Object.keys(groupSingle(groups)[currentGroup]),
+									);
+									const config = groupSingle(groups)[currentGroup];
+									if (
+										groups[key].viewShowIf ||
+										groups[key]?.meta?.excludeFromView
+									) {
+										if (!showHideInput(groups[key], data)) {
+											return null;
+										}
+									}
 
-      return (
-        <React.Fragment key={key}>
-          {repeatObjects(groups, (key, ind) => {
-            // normal group
-            return hasComponent(groups[key]) ? getComponent(groups[key].component, key, groups[key]) : isGroupInput(groups[key], false, data)
-              ? (
-                <Group
-                  t={t}
-                  key={key}
-                  name={key}
-                  linkingData={linkingData}
-                  config={groups[key]}
-                  data={data}
-                  allData={data}
-                  linkingForms={linkingForms}
-                  cols={2}
-                  ajaxForms={ajaxForms}
-                  changeAjaxForms={changeAjaxForms}
-                  getApiBaseUrl={getApiBaseUrl}
-                  getAppHeader={getAppHeader}
-                  user={user}
-                  getToken={getToken}
-                  evaluationConfig={evaluationConfig}
-                  ajaxOptions={ajaxOptions}
-                  >
-                </Group>
-              )
-              // repeatable group
-              : isGroupInput(groups[key], true, data)
-                ? <RepeatableGroup
-                  app={app}
-                  key={key}
-                  t={t}
-                  ajaxForms={ajaxForms}
-                  changeAjaxForms={changeAjaxForms}
-                  getApiBaseUrl={getApiBaseUrl}
-                  getAppHeader={getAppHeader}
-                  user={user}
-                  getToken={getToken}
-                  name={key}
-                  config={groups[key]}
-                  data={data}
-                  allData={data}
-                  linkingData={linkingData}
-                  linkingForms={linkingForms}
-                  ajaxOptions={ajaxOptions}
-                  >
-                </RepeatableGroup>
-                // single inputs grouped
-                : singleGroupsKeys.includes(key) ? (() => {
-                  if (!addedContent.includes(key)) {
-                    const currentGroup = Object.keys(groupSingle(groups))
-                      .find(k => Object.keys(groupSingle(groups)[k]).includes(key));
-                    addedContent.push(...Object.keys(groupSingle(groups)[currentGroup]));
-                    const config = groupSingle(groups)[currentGroup];
-                    if (groups[key].viewShowIf || groups[key]?.meta?.excludeFromView) {
-                      if (!showHideInput(groups[key], data)) {
-                        return null;
-                      }
-                    }
+									return (
+										<div
+											className="group"
+											id={currentGroup}
+											key={`${currentGroup}-${Date.now()}`}
+										>
+											{groupConfig[currentGroup] ? (
+												<div className="title">
+													<h1>{groupConfig[currentGroup][language]}</h1>
+												</div>
+											) : null}
+											<Input
+												app={app}
+												t={t}
+												ajaxForms={ajaxForms}
+												changeAjaxForms={changeAjaxForms}
+												getApiBaseUrl={getApiBaseUrl}
+												getAppHeader={getAppHeader}
+												user={user}
+												getToken={getToken}
+												versionsDatapoints={versionsDatapoints}
+												key={key}
+												name={config.dataId || key}
+												config={config}
+												data={data}
+												allData={data}
+												linkingData={linkingData}
+												className={
+													isEven
+														? ind === _length - 1 || ind === _length - 2
+															? "last"
+															: undefined
+														: ind === _length - 1
+														? "last"
+														: undefined
+												}
+												linkingForms={linkingForms}
+												ajaxOptions={ajaxOptions}
+												evaluationConfig={evaluationConfig}
+												cols={2}
+											></Input>
+										</div>
+									);
+								}
+							})()
+						) : // display group
+						isDisplayGroup(groups[key]) ? (
+							<div className="group display" key={key}>
+								<div className="title">
+									<h1>{groups[key].label}</h1>
+								</div>
+								{typeRender(
+									getDisplayGroupConfig(groups, key),
+									singleGroupsKeys,
+									addedContent,
+								)}
+							</div>
+						) : // single modal
+						isSingleModal(groups[key]) ? (
+							<div className="group" key={key}>
+								<div className="title">
+									<h1>
+										{groups[key].outputLabel ||
+											getInputLabel(groups[key], data)}
+									</h1>
+								</div>
+								<Input
+									app={app}
+									t={t}
+									key={key}
+									ajaxForms={ajaxForms}
+									changeAjaxForms={changeAjaxForms}
+									getApiBaseUrl={getApiBaseUrl}
+									getAppHeader={getAppHeader}
+									user={user}
+									getToken={getToken}
+									versionsDatapoints={versionsDatapoints}
+									parent={key}
+									name={groups[key].dataId || key}
+									config={groups[key]}
+									className="last"
+									data={data}
+									allData={data}
+									linkingData={linkingData}
+									linkingForms={linkingForms}
+									ajaxOptions={ajaxOptions}
+									evaluationConfig={evaluationConfig}
+									cols={2}
+								></Input>
+							</div>
+						) : null;
+					})}
+				</React.Fragment>
+			);
+		});
+	};
 
-                    return <div className="group" id={currentGroup} key={`${currentGroup}-${Date.now()}`}>
-                      {groupConfig[currentGroup] ? <div className="title">
-                        <h1>{groupConfig[currentGroup][language]}</h1>
-                      </div> : null}
-                      <Input
-                        app={app}
-                        t={t}
-                        ajaxForms={ajaxForms}
-                        changeAjaxForms={changeAjaxForms}
-                        getApiBaseUrl={getApiBaseUrl}
-                        getAppHeader={getAppHeader}
-                        user={user}
-                        getToken={getToken}
-                        versionsDatapoints={versionsDatapoints}
-                        key={key}
-                        name={config.dataId || key}
-                        config={config}
-                        data={data}
-                        allData={data}
-                        linkingData={linkingData}
-                        className={
-                          isEven ? (
-                            (ind === _length - 1 || ind === _length - 2) ? 'last' : undefined
-                          ) : ind === _length - 1 ? 'last' : undefined}
-                        linkingForms={linkingForms}
-                        ajaxOptions={ajaxOptions}
-                        evaluationConfig={evaluationConfig}
-                        cols={2}
-                        >
-                      </Input>
-                    </div>
-                  }
-                })()
-                  // display group
-                  : isDisplayGroup(groups[key])
-                    ? (
-                      <div className="group display" key={key}>
-                        <div className="title">
-                          <h1>{groups[key].label}</h1>
-                        </div>
-                        {typeRender(getDisplayGroupConfig(groups, key), singleGroupsKeys, addedContent)}
-                      </div>
-                    )
-                    // single modal
-                    : isSingleModal(groups[key])
-                      ? (
-                        <div className="group" key={key}>
-                          <div className="title">
-                            <h1>{groups[key].outputLabel || getInputLabel(groups[key], data)}</h1>
-                          </div>
-                          <Input
-                            app={app}
-                            t={t}
-                            key={key}
-                            ajaxForms={ajaxForms}
-                            changeAjaxForms={changeAjaxForms}
-                            getApiBaseUrl={getApiBaseUrl}
-                            getAppHeader={getAppHeader}
-                            user={user}
-                            getToken={getToken}
-                            versionsDatapoints={versionsDatapoints}
-                            parent={key}
-                            name={groups[key].dataId || key}
-                            config={groups[key]}
-                            className="last"
-                            data={data}
-                            allData={data}
-                            linkingData={linkingData}
-                            linkingForms={linkingForms}
-                            ajaxOptions={ajaxOptions}
-                            evaluationConfig={evaluationConfig}
-                            cols={2}
-                            >
-                          </Input>
-                        </div>
-                      )
-                      : null;
-          })}
-        </React.Fragment>
-      )
-    })
-  }
+	useEffect(() => {
+		setTimeout(() => {
+			const groups = Array.from(document.getElementsByClassName("group"));
+			const rows = Array.from(document.querySelectorAll(".repetable-row-extra"));
+			rows.forEach((row) => {
+				const inputs = Array.from(row.querySelectorAll(".input"));
+				const lasts = getLastRow(
+					inputs.map((i, ind) => ind),
+					4,
+				);
+				if (lasts) {
+					lasts.forEach((index) => inputs[index].classList.add("last"));
+				}
+			});
+			groups.forEach((group) => {
+				// const isRepeatable = Array.from(group.classList).includes('repeatable');
+				const inputs = Array.from(group.querySelectorAll(".input"));
+				// if (inputs.length && !isRepeatable) {
+				//   if (inputs.length % 2 === 0) {
+				//     inputs[inputs.length - 1].classList.add('last');
+				//     inputs[inputs.length - 2].classList.add('last');
+				//   } else {
+				//     inputs[inputs.length - 1].classList.add('last');
+				//   }
+				// }
+				// remove groups without inputs
+				if (!inputs.length) {
+					group.remove();
+				}
+			});
+		}, 200);
+	}, [form, data]);
 
-  useEffect(() => {
-    setTimeout(() => {
-      const groups = Array.from(document.getElementsByClassName('group'));
-      const rows = Array.from(document.querySelectorAll('.repetable-row-extra'));
-      rows.forEach(row => {
-        const inputs = Array.from(row.querySelectorAll('.input'));
-        const lasts = getLastRow(inputs.map((i, ind) => ind), 4);
-        if (lasts) {
-          lasts.forEach(index => inputs[index].classList.add('last'));
-        }
-      });
-      groups.forEach(group => {
-        // const isRepeatable = Array.from(group.classList).includes('repeatable');
-        const inputs = Array.from(group.querySelectorAll('.input'));
-        // if (inputs.length && !isRepeatable) {
-        //   if (inputs.length % 2 === 0) {
-        //     inputs[inputs.length - 1].classList.add('last');
-        //     inputs[inputs.length - 2].classList.add('last');
-        //   } else {
-        //     inputs[inputs.length - 1].classList.add('last');
-        //   }
-        // }
-        // remove groups without inputs
-        if (!inputs.length) {
-          group.remove();
-        }
-      });
-    }, 200)
-  }, [form, data])
+	const [extraRequestSent, setExtraRequestSent] = useState({});
+	const [extraRequestLoading, setExtraRequestLoading] = useState({});
+	const [extraRequestData, setExtraRequestData] = useState({});
+	const hasSubSections = false;
 
-  const [extraRequestSent, setExtraRequestSent] = useState({});
-  const [extraRequestLoading, setExtraRequestLoading] = useState({});
-  const [extraRequestData, setExtraRequestData] = useState({});
-  const hasSubSections = false;
+	const renderContent = (f, showTitle = true) => {
+		if (f) {
+			const alertType = ["error", "warning", "info", "success"];
+			if (f.alertConf && f.alertConf.type === "warning") {
+				return <Alert message={f.alertConf.text} type={f.alertConf.type} showIcon />;
+			}
+			let { label, icon, position, ...groups } = f;
+			groups = Object.keys(groups).reduce((items, key) => {
+				if (!groups[key]?.meta?.excludeFromView) {
+					items[key] = groups[key];
+				}
+				return items;
+			}, {});
+			const addedContent = [];
+			const singleGroupsKeys = [].concat(
+				...Object.keys(groupSingle(groups)).map((key) =>
+					Object.keys(groupSingle(groups)[key]),
+				),
+			);
 
-  const renderContent = (f, showTitle = true) => {
-    if (f) {
-      const alertType = ['error', 'warning', 'info', 'success'];
-      if (f.alertConf && f.alertConf.type === 'warning') {
-        return <Alert message={f.alertConf.text} type={f.alertConf.type} showIcon />
-      }
-      let { label, icon, position, ...groups } = f;
-      groups = Object.keys(groups).reduce((items, key) => {
-        if (!groups[key]?.meta?.excludeFromView) {
-          items[key] = groups[key];
-        }
-        return items;
-      }, {});
-      const addedContent = [];
-      const singleGroupsKeys = [].concat(...Object.keys(groupSingle(groups))
-        .map(key => Object.keys(groupSingle(groups)[key])));
+			return (
+				<>
+					<div className="wrapper" key={Date.now()} style={{ width: fullWidth ? "100%" : 700 }}>
+						{f.alertConf ? (
+							<Alert
+								className="w-100"
+								style={{ marginBottom: "20px" }}
+								message={f.alertConf.text}
+								type={
+									alertType.includes(f.alertConf.type) ? f.alertConf.type : "info"
+								}
+								showIcon
+							/>
+						) : null}
+						{typeRender(groups, singleGroupsKeys, addedContent)}
+					</div>
+				</>
+			);
+		}
+	};
 
-      return <>
-        <div className="wrapper" key={Date.now()} style={{ width: 700 }}>
-          {f.alertConf ? <Alert className="w-100" style={{ marginBottom: '20px' }} message={f.alertConf.text} type={
-            alertType.includes(f.alertConf.type) ? f.alertConf.type : 'info'
-          } showIcon /> : null}
-          {typeRender(groups, singleGroupsKeys, addedContent)}
-        </div>
-      </>
-    }
-  }
+	let groupSections = [];
+	if (hasSubSections) {
+		groupSections = groupSubsections(form);
+	}
 
-  let groupSections = [];
-  if (hasSubSections) {
-    groupSections = groupSubsections(form);
-  }
+	return (
+		<div className="content" style={style}>
+			{!hasSubSections ? (
+				renderContent(form)
+			) : (
+				<React.Fragment>
+					<h1 className="title">{form ? getInputLabel(form, data) : ""}</h1>
+					<Tabs
+						className="section-tabs"
+						items={repeatObjects(groupSections, (key) => {
+							const section = groupSections[key];
 
-  return (
-    <div className="content" style={style}>
-      {!hasSubSections ? renderContent(form) : (
-        <React.Fragment>
-          <h1 className="title">{form ? getInputLabel(form, data) : ''}</h1>
-          <Tabs
-            className="section-tabs"
-            items={repeatObjects(groupSections, (key) => {
-              const section = groupSections[key];
-
-              return {
-                style: { maxHeight: 'calc(100vh - 100px)', overflowY: 'auto' },
-                label: (
-                  <span>
-                    {section.icon ?
-                      <GetIcon icon={section.icon} /> : null} {getInputLabel(section, data)}
-                  </span>
-                ),
-                key: key,
-                tabKey: key,
-                children: renderContent(groupSections[key], false),
-              };
-            })}
-          />
-        </React.Fragment>
-      )}
-    </div>
-  );
-}
+							return {
+								style: { maxHeight: "calc(100vh - 100px)", overflowY: "auto" },
+								label: (
+									<span>
+										{section.icon ? <GetIcon icon={section.icon} /> : null}{" "}
+										{getInputLabel(section, data)}
+									</span>
+								),
+								key: key,
+								tabKey: key,
+								children: renderContent(groupSections[key], false),
+							};
+						})}
+					/>
+				</React.Fragment>
+			)}
+		</div>
+	);
+};
 
 export default Content;