lu-lowcode-package-form 0.9.7 → 0.9.16

package/src/components/field/date-picker/index.jsx

@@ -3,7 +3,14 @@ import { DatePicker as OriginalDatePicker, Button } from 'antd';
 import { BaseWrapper } from "../base.jsx"
 import dayjs from 'dayjs';
 import 'dayjs/locale/zh-cn';
-dayjs.locale('zh-cn');
+import zh from 'antd/es/date-picker/locale/zh_CN';
+
+import updateLocale from 'dayjs/plugin/updateLocale';
+
+dayjs.extend(updateLocale);
+dayjs.updateLocale('zh-cn', {
+  weekStart: 0,
+});
 
 const DatePicker = ({ datetype, value, onChange, ...props }) => {
     datetype = datetype || "date"
@@ -58,7 +65,7 @@ const DatePicker = ({ datetype, value, onChange, ...props }) => {
     }, [datetype])
     return (
         <BaseWrapper {...props}>
-            <OriginalDatePicker {...props} picker={picker} format={format} style={{ width: '100%' }} onChange={handleChange} value={nValue} showTime={showTime} needConfirm={needConfirm} />
+            <OriginalDatePicker locale={zh} {...props} picker={picker} format={format} style={{ width: '100%' }} onChange={handleChange} value={nValue} showTime={showTime} needConfirm={needConfirm} />
         </BaseWrapper>
     );
 }

package/src/components/field/select/index.jsx

@@ -1,4 +1,4 @@
 export { default as TreeSelect } from './tree-select.jsx';
 export { Select, WithSingleSelect,WithMultipleSelect , MultipleSelect, SingleSelect} from './select.jsx';
-
+export { SearchSelect } from './search-select.jsx'
 

package/src/components/field/select/search-select.jsx

@@ -0,0 +1,110 @@
+
+
+import { Input, Select as OriginalSelect, Spin } from 'antd';
+import React, { useEffect, useState } from 'react';
+import { BaseWrapper } from "../base"
+import { debounce } from 'lodash';
+
+
+const SearchSelect = ({ addWrapper = true, value, type, defaultValue, onChange, option_label, option_value, option_search, options, request, requestParams, callError, ...props }) => {
+    const [nOptions, setNOptions] = React.useState([])
+    const [fetching, setFetching] = useState(false);
+    useEffect(() => {
+        initData(requestParams)
+    }, [requestParams])
+
+    const initData = async (params) => {
+        let item = null
+        if (request && typeof request === 'function') {
+            const list = await fetchOptions(params)
+            if (list && Array.isArray(list))
+                item = value ? list.find(item => item.value == value) : null
+        }
+
+        if (options && options.length > 0) {
+            item = value ? options.find(item => item.value == value) : null
+            setNOptions(options)
+        }
+
+        if (item) {
+            onChange(item)
+        }
+
+    }
+
+    const handleSearch = debounce(async (value) => {
+        const params = { ...requestParams }
+        params[option_search] = value
+        await fetchOptions(params)
+    }, 200)
+
+    const fetchOptions = async (params) => {
+        try {
+            setFetching(true)
+            const response = await request(params);
+            if (response.code > 0) {
+                callError && typeof callError === 'function' && callError(response.message);
+                return
+            }
+            let list = response.data?.list || response.data
+            if (Array.isArray(list)) {
+                list = list.map(item => ({ ...item, label: item[option_label], value: item[option_value] }))
+                setNOptions(list)
+            }
+            else setNOptions([])
+            return list
+        } catch (error) {
+            console.error("fetchOptions", error)
+        }
+        finally {
+            setFetching(false)
+        }
+    }
+
+    const handleChange = (value) => {
+        const item = nOptions.find(item => item.value === value)
+        onChange(item)
+    }
+
+
+    return addWrapper ? (
+        <BaseWrapper {...props}>
+            <OriginalSelect
+                notFoundContent={fetching ? <Spin size="small" /> : null}
+                value={value}
+                {...props}
+                disabled={false}
+                filterOption={false}
+                showSearch={request && option_search ? true : false}
+                onSearch={request && option_search ? handleSearch : null}
+                onChange={handleChange}
+                style={{ width: '100%' }}
+                mode="single" >
+                {nOptions.map((item, index) => (
+                    <OriginalSelect.Option key={index} value={item.value} disabled={false}>
+                        {item.label}
+                    </OriginalSelect.Option>
+                ))}
+            </OriginalSelect>
+        </BaseWrapper>
+    ) : <OriginalSelect
+        notFoundContent={fetching ? <Spin size="small" /> : null}
+        value={value}
+        {...props}
+        disabled={false}
+        filterOption={false}
+        showSearch={request && option_search ? true : false}
+        onSearch={request && option_search ? handleSearch : null}
+        onChange={handleChange}
+        style={{ width: '100%' }}
+        mode="single" >
+        {nOptions.map((item, index) => (
+            <OriginalSelect.Option key={index} value={item.value} disabled={false}>
+                {item.label}
+            </OriginalSelect.Option>
+        ))}
+    </OriginalSelect>
+
+}
+
+export {SearchSelect}

package/src/components/field/select/select.jsx

@@ -3,7 +3,7 @@ import { Select as OriginalSelect } from "antd";
 import { BaseWrapper } from "../base"
 import React, { useEffect, useState } from 'react';
 
-const Select = ({ request, option_label = "label", option_value = "id", disabledValue, callError, options, ...props }) => {
+const Select = ({ request, option_label = "label", option_value = "id", disabledValue, callError, options, addWrapper = true, ...props }) => {
     // const [firstLoad, setFirstLoad] = React.useState(false)
     const [nOptions, setNOptions] = React.useState([])
     useEffect(() => {
@@ -29,11 +29,11 @@ const Select = ({ request, option_label = "label", option_value = "id", disabled
 
         // setFirstLoad(true)
     }
-    return (
+    return addWrapper ?(
         <BaseWrapper {...props}>
             <OriginalSelect {...props} options={nOptions} style={{ width: '100%' }} />
         </BaseWrapper>
-    )
+    ) : <OriginalSelect {...props} options={nOptions} style={{ width: '100%' }} />
 }
 
 const SingleSelect =  ({ ...props }) => {
@@ -46,7 +46,7 @@ const MultipleSelect =  ({ onChange, value, ...props }) => {
     const [nValue, setNValue] = React.useState([])
 
     useEffect(()=>{
-        if (typeof value === "string") {
+        if (value && typeof value === "string") {
             try {
                 value = JSON.parse(value)
                 onChange(value)
@@ -55,7 +55,7 @@ const MultipleSelect =  ({ onChange, value, ...props }) => {
             }
         }
        
-        setNValue(value)
+        if(value) setNValue(value)
     },[value])
   
     return (

package/src/components/field/table/index.jsx

@@ -0,0 +1,267 @@
+import React, { useEffect, useState, useRef, useCallback } from "react";
+import { Button } from "antd";
+import { DeleteOutlined } from "@ant-design/icons";
+import { isEqual, debounce } from 'lodash';
+import { evalFormula } from "../../../utils/formula";
+
+const TableCol = ({ children, width, ...props }) => {
+    const [sWidth, setSWidth] = useState(0);
+    useEffect(() => {
+        setSWidth(width);
+    }, [width]);
+    return <div className="fflex-1" style={{ minWidth: `${sWidth}px` }} {...props}>
+        {children}
+    </div>
+}
+
+const TableAction = ({ label, subTableIndex, children, ...props }) => {
+    return <div className="fw-16">
+        <div className="frelative fw-full fh-full fflex fflex-col">
+            {label && subTableIndex === 0 && <div className='fh-12 ffont-semibold fbg-gray-100 ftext-sm fflex fjustify-between fitems-center fpx-2 fborder-b'>{label}</div>}
+            <div className="fw-full fflex-1 fflex fitems-center fjustify-center fp-2 ">
+                {children}
+            </div>
+        </div>
+    </div>
+}
+
+const Table = ({ children, value, onChange, ...props }) => {
+    const [rows, setRows] = useState([{}]);
+    const prevRowsRef = useRef(rows);
+    const dependencyMap = useRef(new Map());
+    const [updateField, setUpdateField] = useState({});
+    const tableId = props.componentId || props.__id;
+    const setPrevRows = (newValue) => {
+        setRows(newValue);
+        prevRowsRef.current = newValue;
+      }
+    
+    useEffect(() => {
+        console.log("value useEffect ", JSON.stringify(value));
+        if (value && typeof value === "string") {
+            try {
+                value = JSON.parse(value);
+                onChange(value);
+            } catch (error) { }
+        }
+        if (value && Array.isArray(value) && !isEqual(prevRowsRef.current, value)) {
+            console.log("useEffect setRows");
+            setPrevRows(value);
+        }
+    }, [value]);
+
+    useEffect(() => {
+        console.log("children useEffect ",children);
+        initializeDependencyMap();
+    }, [children]);
+
+    const initializeDependencyMap = useCallback(() => {
+        dependencyMap.current.clear();
+        const childrenArray = React.Children.toArray(children);
+        childrenArray.forEach(child => {
+            const { componentId, __id, ...props } = child.props;
+            const identifier = `${tableId}.${(componentId || __id)}`;
+
+            dependencyMap.current.set(identifier, {
+                children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.includes(identifier)),
+                show: true,
+            });
+        });
+        initializeFieldVisibility();
+    }, [children, tableId]);
+
+    const handleRowValues = useCallback((rowValues) => {
+        const result = {};
+        for (let key in rowValues) {
+            result[`${tableId}.${key}`] = rowValues[key] || '';
+        }
+        return result;
+    }, [tableId]);
+
+    const initializeFieldVisibility = useCallback(() => {
+        rows.forEach((row, rowIndex) => {
+            const fieldValues = handleRowValues(row);
+            for (let key of dependencyMap.current.keys()) {
+                handleFieldsWith(key, fieldValues, rowIndex);
+            }
+        });
+    }, [rows, handleRowValues]);
+
+    const handleFieldsWith = useCallback((identifier, fieldValues, rowIndex) => {
+        let needRefresh = false;
+        const fullIdentifier = `${tableId}.${identifier}`;
+        if (dependencyMap.current.has(fullIdentifier)) {
+            const dependentChildren = dependencyMap.current.get(fullIdentifier).children;
+            dependentChildren.forEach(child => {
+                if (child.props.withFunc && typeof child.props.withFunc === 'function') {
+                    needRefresh = handleFieldsVisible(fieldValues, child);
+                }
+
+                if (child.props.withFill) {
+                    handleFieldsWithFill(fieldValues, child, rowIndex);
+                }
+            });
+        }
+        return needRefresh;
+    }, [tableId, rows]);
+
+    const handleFieldsVisible = useCallback((fieldValues, child) => {
+        let needRefresh = false;
+        const childShouldBeVisible = child.props.withFunc(fieldValues);
+        const childIdentifier = child.props.componentId || child.props.__id;
+        if (dependencyMap.current.has(childIdentifier)) {
+            const childData = dependencyMap.current.get(childIdentifier);
+            if (childData.show !== childShouldBeVisible) {
+                childData.show = childShouldBeVisible;
+                dependencyMap.current.set(childIdentifier, childData);
+                needRefresh = true;
+            }
+        }
+        return needRefresh;
+    }, []);
+
+    const handleFieldsWithFill = useCallback(async (fieldValues, child, rowIndex) => {
+        const withFill = child.props.withFill;
+        const withDataFetch = child.props.withDataFetch;
+
+        let withDatas = [];
+        if (withFill?.withData && withFill?.withData.length > 0 && withDataFetch && typeof withDataFetch === 'function') {
+            for (let index = 0; index < withFill?.withData.length; index++) {
+                const element = withFill?.withData[index];
+                let params = {}
+                params.tableName = element.withTable.table_name;
+                params.filter = {};
+                for (let index = 0; index < element.withCondition.length; index++) {
+                    const { value: condition_value, column: condition_column } = element.withCondition[index];
+                    params.filter[condition_column.column_name] = getParamValue(condition_value.group_key, condition_value.field_key, fieldValues, withDatas);
+                }
+
+                const response = await withDataFetch(params);
+                if (response.code === 0 && response.data.list) {
+                    withDatas.push({
+                        id: element.id,
+                        data: response.data.list
+                    });
+                }
+            }
+        }
+
+        let formula;
+        if (withFill.value && withFill.value.length > 0) {
+            formula = withFill.value.map(item => {
+                let result = "";
+                const { insert, attributes } = item;
+                if (typeof insert !== "string") {
+                    if (insert?.span && attributes && attributes.tagKey && attributes.id) {
+                        result = getParamValue(attributes.tagKey, attributes.id, fieldValues, withDatas);
+                        if(result) result = `"${result}"`
+                    }
+                } else {
+                    result = insert;
+                }
+                return result;
+            });
+        }
+        console.log("formula", formula);
+        if (formula && formula.length > 0) {
+            const childIdentifier = child.props.componentId || child.props.__id;
+            const formulaResult = evalFormula(formula);
+            console.log("formulaResult", formulaResult);
+            console.log("handleFieldsWithFill setRows");
+            const newRows = [...rows]
+            newRows[rowIndex][childIdentifier] = formulaResult;
+            setPrevRows(newRows)
+        }
+    }, [rows])
+
+    const getParamValue = useCallback((tagKey, id, fieldValues, withDatas) => {
+        let result = "";
+        if (tagKey === "fieldsValue") result = fieldValues?.[id] || "";
+        else {
+            let withData = withDatas.find(item => item.id === tagKey);
+            if (withData && withData.data && withData.data.length > 0) {
+                result = withData.data[0]?.[id] || "";
+            }
+        }
+        return result;
+    }, []);
+
+
+
+    const handleInputChange = useCallback((rowIndex, childIndex, e) => {
+
+        const newRows = [...rows];
+        newRows[rowIndex] = {
+            ...newRows[rowIndex],
+            [childIndex]: e?.target?.value || '',
+        };
+        console.log("handleInputChange setRows")
+        setPrevRows(newRows);
+
+        setUpdateField({
+            rowIndex: rowIndex,
+            identifier: childIndex,
+            value: handleRowValues(newRows[rowIndex]),
+        });
+
+    }, [rows, handleFieldsWith, handleRowValues, onChange]);
+
+
+    const handleDeleteRow = (rowIndex) => {
+        const newRows = [...rows];
+        newRows.splice(rowIndex, 1);
+        console.log("handleDeleteRow setRows")
+        setPrevRows(newRows);
+    }
+
+    const addRow = () => {
+        console.log("addRow setRows")
+        setPrevRows([...rows, {}]);
+    }
+
+    useEffect(() => {
+        console.log("rows changed rows", JSON.stringify(prevRowsRef.current));
+        console.log("rows changed value", JSON.stringify(value));
+        if (isEqual(prevRowsRef.current, value)) return;
+        console.log("noreq")
+        typeof onChange === "function" && onChange(prevRowsRef.current);
+    }, [rows]);
+
+    useEffect(() => {
+        if (updateField && updateField.identifier) {
+            handleFieldsWith(updateField.identifier, updateField.value, updateField.rowIndex);
+        }
+    }, [updateField])
+
+
+    return (
+        <>
+            <div className="fw-full fmin-h-20 foverflow-x-auto">
+                {rows.map((row, rowIndex) => (
+                    <div className="fborder-b finline-flex fflex-wrap fmin-w-full" style={{ width: "max-content" }} key={rowIndex}>
+                        {React.Children.map(children, (child, childIndex) => {
+                            const col_id = child?.props?.__id || childIndex;
+                            if (row?.[col_id] === undefined) row[col_id] = "";
+                            return <TableCol width={200} key={`row_${rowIndex}_col_${childIndex}`}>
+                                {React.cloneElement(child, {
+                                    key: `row_${rowIndex}_child_${childIndex}`,
+                                    subTable: true,
+                                    subTableIndex: rowIndex,
+                                    value: row[col_id] || '',
+                                    onChange: (e) => handleInputChange(rowIndex, col_id, e),
+                                })}
+                            </TableCol>
+                        })}
+                        <TableAction key={`row_${rowIndex}_action`} subTable={true} subTableIndex={rowIndex} label={"操作"}>
+                            <DeleteOutlined className="fcursor-pointer" onClick={() => handleDeleteRow(rowIndex)} />
+                        </TableAction>
+                    </div>
+                ))}
+            </div>
+            <Button onClick={addRow}>新增行</Button>
+        </>
+    );
+};
+
+export default Table;
+export { TableCol, TableAction };

package/src/components/field/upload/upload-image.jsx

@@ -22,8 +22,6 @@ const UploadImage = ({ maxCount, value, onChange, ...props }) => {
                 for (let i = 0; i < value.length; i++) {
                     let file = value[i]
                     var oldfile = fileMap.current.find((item) => item.uid === file.uid)
-                    console.log("set file", file)
-                    console.log("set oldfile", oldfile)
                     if (!oldfile ||( (oldfile.version||0) < (file.version||0 )))
                         _fileList.push(file)
                     else _fileList.push(oldfile)

package/src/components/form-container/index.jsx

@@ -1,7 +1,8 @@
 import React, { forwardRef, useEffect } from "react";
 import { Form, Row, Col } from "antd";
 
-import {debounce } from 'lodash';
+import { debounce } from 'lodash';
+import { evalFormula } from '../../utils/formula'
 
 
 function batchElements(elements, groupSize) {
@@ -16,7 +17,7 @@ function batchElements(elements, groupSize) {
     for (const element of elements) {
         const { _componentName } = element?.props || {};
 
-        if (_componentName && _componentName.startsWith('Layout')) {
+        if (_componentName && _componentName.startsWith('Layout.')) {
             if (tempArray.length > 0) {
                 fillWithReactElement(groupSize, tempArray);
                 groupedElements.push(tempArray);
@@ -57,67 +58,151 @@ const FormContainer = forwardRef(({ cols = 1, children }, ref) => {
     }, [children, cols]);
 
     const initializeDependencyMap = () => {
+        console.log("initializeDependencyMap**********")
         dependencyMap.current = new Map();
         const childrenArray = React.Children.toArray(children);
 
         childrenArray.forEach(child => {
             const { componentId, __id, ...props } = child.props;
+            console.log("child.props**********", child.props)
             const identifier = componentId || __id;
             dependencyMap.current.set(identifier, {
-                children: childrenArray.filter(item => item.props.__withId === identifier || item.props.__withIds?.includes(identifier)),
+                children: childrenArray.filter(item => item.props.withId === identifier || item.props.withIds?.includes(identifier)),
                 show: true,
             });
         });
-
+        console.log("dependencyMap", dependencyMap.current)
         initializeFieldVisibility();
     };
 
-    // 初始化字段的显示状态
+    // 初始化字段的级联关系
     const initializeFieldVisibility = (reloadFields = false) => {
+        console.log("initializeFieldVisibility**********")
         const fieldValues = form.getFieldsValue();
         for (let key of dependencyMap.current.keys()) {
-            updateFieldVisibility(key, fieldValues);
+            handleFieldsWith(key, fieldValues);
         }
 
         if (reloadFields) setFormContent(renderChildren());
     };
 
-    // 计算是否显示
-    const updateFieldVisibility = (identifier, fieldValues) => {
+    // 计算字段级联关系
+    const handleFieldsWith = (identifier, fieldValues) => {
         let needRefresh = false;
         if (dependencyMap.current.has(identifier)) {
             const dependentChildren = dependencyMap.current.get(identifier).children;
             dependentChildren.forEach(child => {
-                if (child.props.__withFunc && typeof child.props.__withFunc === 'function') {
-                    const childShouldBeVisible = child.props.__withFunc(fieldValues);
-                    const childIdentifier = child.props.componentId || child.props.__id;
-                    if (dependencyMap.current.has(childIdentifier)) {
-                        const childData = dependencyMap.current.get(childIdentifier);
-                        if (childData.show !== childShouldBeVisible) {
-                            childData.show = childShouldBeVisible;
-                            dependencyMap.current.set(childIdentifier, childData);
-                            needRefresh = true;
-                        }
-                    }
+                if (child.props.withFunc && typeof child.props.withFunc === 'function') {
+                    needRefresh = handleFieldsVisible(fieldValues, child)
                 }
+
+                if (child.props.withFill)
+                    handleFieldsWithFill(fieldValues, child)
+
             });
         }
         return needRefresh;
     };
 
+    // 处理级联显示隐藏 @return {boolean} 是否需要重新渲染表单的字段
+    const handleFieldsVisible = (fieldValues, child) => {
+        let needRefresh = false;
+        const childShouldBeVisible = child.props.withFunc(fieldValues);
+        const childIdentifier = child.props.componentId || child.props.__id;
+        if (dependencyMap.current.has(childIdentifier)) {
+            const childData = dependencyMap.current.get(childIdentifier);
+            if (childData.show !== childShouldBeVisible) {
+                childData.show = childShouldBeVisible;
+                dependencyMap.current.set(childIdentifier, childData);
+                needRefresh = true;
+            }
+        }
+        return needRefresh
+    }
+    // 处理级联数据源
+    // 处理级联填充
+    const handleFieldsWithFill = async (fieldValues, child) => {
+        const withFill = child.props.withFill;
+        const withDataFetch = child.props.withDataFetch;
+        console.log("withFill", withFill)
+        console.log("fieldValues", fieldValues)
+        console.log("child", child)
+
+        let withDatas = [];
+        // 先处理依赖数据
+        if (withFill?.withData && withFill?.withData.length > 0 && withDataFetch && typeof withDataFetch === 'function') {
+            for (let index = 0; index < withFill?.withData.length; index++) {
+                const element = withFill?.withData[index];
+                let params = {}
+                params.tableName = element.withTable.table_name
+                params.filter = {}
+                for (let index = 0; index < element.withCondition.length; index++) {
+                    const { value: condition_value, column: condition_column } = element.withCondition[index];
+                    params.filter[condition_column.column_name] = getParamValue(condition_value.group_key, condition_value.field_key, fieldValues, withDatas)
+                }
+
+                // 访问接口获取数据
+                const response = await withDataFetch(params)
+                if (response.code === 0 && response.data.list) {
+                    withDatas.push({
+                        id: element.id,
+                        data: response.data.list
+                    })
+                }
+            }
+        }
+
+        // 构造计算公式
+        let formula;
+        if (withFill.value && withFill.value.length > 0) {
+            formula = withFill.value.map(item => {
+                let result = "";
+                const { insert, attributes } = item
+                if (typeof insert !== "string") {
+                    if (insert?.span && attributes && attributes.tagKey && attributes.id) {
+                        result = getParamValue(attributes.tagKey, attributes.id, fieldValues, withDatas)
+                        if (result) result = `"${result}"`
+                    }
+                }
+                else result = insert
+                return result
+            })
+        }
+
+        if (formula && formula.length > 0) {
+            const childIdentifier = child.props.componentId || child.props.__id;
+            form.setFieldValue(childIdentifier, evalFormula(formula))
+        }
+    }
+
+    const getParamValue = (tagKey, id, fieldValues, withDatas) => {
+        let result = "";
+        // 从当前表单字段取值
+        if (tagKey == "fieldsValue") result = fieldValues?.[id] || ""
+        // 从依赖数据取值
+        else {
+            let withData = withDatas.find(item => item.id === tagKey)
+            if (withData && withData.data && withData.data.length > 0) {
+                // 暂时只取一条数据，后续再想 sum 函数等问题
+                result = withData.data[0]?.[id] || ""
+            }
+        }
+        return result
+    }
+
     const handleFieldsChange = debounce((changedFields, allFields) => {
         const fieldValues = form.getFieldsValue();
         let needRefresh = false;
         changedFields.forEach(field => {
             if (field.name && field.name.length > 0) {
-                needRefresh = updateFieldVisibility(field.name[0], fieldValues);
+                needRefresh = handleFieldsWith(field.name[0], fieldValues);
             }
         });
 
         if (needRefresh) {
             setFormContent(renderChildren());
         }
-    }, 100);
+    }, 200);
 
     const renderChildren = () => {
         const childrenArray = React.Children.toArray(children);
@@ -129,12 +214,12 @@ const FormContainer = forwardRef(({ cols = 1, children }, ref) => {
             cols
         );
 
-        return groupedChildren.map((group,index) => (
+        return groupedChildren.map((group, index) => (
             <Row key={`row-${index}`} gutter={[24, 24]}>
                 {group.map((child, index) => {
                     const { componentId, __id, _componentName, ...props } = child.props;
                     const identifier = componentId || __id;
-                    const isLayoutComponent = _componentName && _componentName.startsWith('Layout');
+                    const isLayoutComponent = _componentName && _componentName.startsWith('Layout.');
 
                     return (
                         <Col key={identifier || `col-${index}`} span={isLayoutComponent ? 24 : 24 / group.length} style={{ marginBottom: 0 }}>
@@ -168,7 +253,7 @@ export function withWrap(Component) {
     return forwardRef((props, ref) => <Component {...props} ref={ref} forwardedRef={ref} />);
 }
 
-export class FormContainerClass extends React.PureComponent{
+export class FormContainerClass extends React.PureComponent {
     render() {
         const { forwardedRef, ...otherProps } = this.props;
         return <FormContainer {...otherProps} ref={forwardedRef} />

package/src/components/form-container/layout/form-group-title.jsx

@@ -1,5 +1,5 @@
 const FormGroupTitle = ({ title }) => {
-  return (title? <div className="fh-11  fflex fitems-center ftext-lg ffont-medium fmb-5  "><span className="fborder-l-4 fborder-slate-300  fpl-2 ">{title}</span></div>: null ) 
+  return (title? <div className="fh-11  fflex fitems-center ftext-lg ffont-medium "><span className="fborder-l-4 fborder-slate-300  fpl-2 ">{title}</span></div>: null ) 
 };
 
 export default FormGroupTitle;