@homefile/components-v2 2.25.3 → 2.25.4

package/dist/components/forms/dynamicForm/DynamicForm.js

@@ -14,7 +14,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
 import { FormProvider } from 'react-hook-form';
 import { t } from 'i18next';
 import { Box, Stack, Text } from '@chakra-ui/react';
-import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, TileBody, CheckboxGroupField, CheckboxAgreement, AIGridField, SearchItemLoader, } from '../..';
+import { HiddenFieldSection, GroupField, TextField, TextAreaField, SelectField, RatingField, GridField, FieldWithDelete, FileField, SwitchField, DateField, NumberField, CurrencyField, TileBody, CheckboxGroupField, CheckboxAgreement, AIGridField, SearchItemLoader, EditCollapsible, } from '../..';
 import { useDynamicForm } from '../../../hooks';
 import { fieldIcons } from '../../../helpers';
 export const DynamicForm = (_a) => {
@@ -68,6 +68,9 @@ export const DynamicForm = (_a) => {
                                     _jsx(RatingField, Object.assign({}, baseProps))));
                             case 'ai-grid':
                                 return (_jsxs(Stack, { p: "base", spacing: "base", bg: "lightBlue.2", children: [description && (_jsx(Text, { fontFamily: "secondary", children: description })), _jsx(AIGridField, Object.assign({}, baseProps, { onRemove: onRemoveImage, onUpload: (files) => handleFilesUpload({ id, files }), onAISend: onAISend, children: children }))] }, id));
+                            case 'collapsible':
+                                return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
+                                    _jsx(EditCollapsible, Object.assign({}, field))));
                             case 'grid':
                                 return (_createElement(FieldWithDelete, Object.assign({}, fieldWithDeleteBaseProps, { key: id }),
                                     _jsx(GridField, Object.assign({}, baseProps, { showIcon: showIcon, children: children }))));

package/dist/components/forms/dynamicForm/fields/EditCollapsible.d.ts

@@ -0,0 +1,2 @@
+import { ReportI } from '../../../../interfaces';
+export declare const EditCollapsible: ({ children, }: Pick<ReportI, "children">) => import("react/jsx-runtime").JSX.Element;

package/dist/components/forms/dynamicForm/fields/EditCollapsible.js

@@ -0,0 +1,19 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Stack } from '@chakra-ui/react';
+import { Collapsible, TextAreaField } from '../../..';
+export const EditCollapsible = ({ children, }) => {
+    return (_jsx(Stack, { bg: "lightBlue.2", spacing: "2px", width: '100%', children: children === null || children === void 0 ? void 0 : children.map(({ id, name = '', value, type }) => {
+            const baseProps = {
+                id,
+                value,
+                type,
+                name,
+            };
+            switch (type) {
+                case 'textarea':
+                    return (_jsx(Collapsible, { title: name, showShadow: false, children: _jsx(TextAreaField, Object.assign({}, baseProps)) }, `${id}-${name}-${value}-${type}`));
+                default:
+                    return null;
+            }
+        }) }));
+};

package/dist/components/forms/dynamicForm/fields/index.d.ts

@@ -22,3 +22,4 @@ export * from './TileBodyFields';
 export * from './TileFooterFields';
 export * from './TileHeaderFields';
 export * from './uiFields';
+export * from './EditCollapsible';

package/dist/components/forms/dynamicForm/fields/index.js

@@ -22,3 +22,4 @@ export * from './TileBodyFields';
 export * from './TileFooterFields';
 export * from './TileHeaderFields';
 export * from './uiFields';
+export * from './EditCollapsible';

package/dist/utils/DynamicForm.utils.js

@@ -28,12 +28,14 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
         }
         // string array
         if (Array.isArray(value) && value.every((v) => typeof v === 'string')) {
-            return [buildField(currentLabel, 'textarea', value.join('<br/>'))];
+            // return [buildField(currentLabel, 'textarea', value.join('<br/>'))]
+            return [buildCollapsibleField(currentLabel, value.join('<br/>'))];
         }
         // object array directly
         if (Array.isArray(value) &&
             value.every((v) => Object.prototype.toString.call(v) === '[object Object]')) {
-            return [buildField(currentLabel, 'textarea', renderObjectArray(value))];
+            // return [buildField(currentLabel, 'textarea', renderObjectArray(value))]
+            return [buildCollapsibleField(currentLabel, renderObjectArray(value))];
         }
         // object with single array field
         if (isRecord(value)) {
@@ -44,7 +46,7 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
                 const [subKey, subArr] = entries[0];
                 const label = `${currentLabel} - ${capitalize(subKey)}`;
                 return [
-                    Object.assign(Object.assign({}, buildField(label, 'textarea', renderObjectArray(subArr))), { name: label, label }),
+                    Object.assign(Object.assign({}, buildCollapsibleField(label, renderObjectArray(subArr))), { name: label, label }),
                 ];
             }
         }
@@ -58,7 +60,8 @@ export const mapApiObjectToFormFields = ({ obj = {}, depth = 0, labelPrefix = ''
                 });
             }
             // shallow object -> flatten
-            return [buildField(currentLabel, 'textarea', renderObject(value))];
+            // return [buildField(currentLabel, 'textarea', renderObject(value))]
+            return [buildCollapsibleField(currentLabel, renderObject(value))];
         }
         // fallback
         return [buildField(currentLabel, 'default', String(value), false)];
@@ -75,6 +78,31 @@ const buildField = (name, type, value, visible = true) => ({
     type: type,
     visible,
 });
+const buildCollapsibleField = (name, 
+// type: string,
+value, visible = true) => {
+    const childObj = {
+        id: uuidv4(),
+        name,
+        label: name,
+        description: '',
+        comments: '',
+        value,
+        type: 'textarea',
+        visible,
+    };
+    return {
+        id: uuidv4(),
+        name,
+        label: name,
+        description: '',
+        comments: '',
+        value,
+        type: 'collapsible',
+        visible,
+        children: [childObj]
+    };
+};
 const renderObjectArray = (arr) => arr
     .map((item) => `<div>${renderObject(item).replace(/<br\/\>/g, '')}</div>`)
     .join('<br/>');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@homefile/components-v2",
-  "version": "2.25.3",
+  "version": "2.25.4",
   "author": "Homefile",
   "license": "UNLICENSED",
   "typings": "dist/index.d.ts",

package/src/components/forms/dynamicForm/DynamicForm.tsx

@@ -21,6 +21,7 @@ import {
   CheckboxAgreement,
   AIGridField,
   SearchItemLoader,
+  EditCollapsible,
 } from '@/components'
 import { useDynamicForm } from '@/hooks'
 import { fieldIcons } from '@/helpers'
@@ -173,6 +174,12 @@ export const DynamicForm = ({
                     </AIGridField>
                   </Stack>
                 )
+              case 'collapsible':
+                return (
+                  <FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>
+                    <EditCollapsible {...field} />
+                  </FieldWithDelete>
+                )
               case 'grid':
                 return (
                   <FieldWithDelete {...fieldWithDeleteBaseProps} key={id}>

package/src/components/forms/dynamicForm/fields/EditCollapsible.tsx

@@ -0,0 +1,34 @@
+import { Stack } from '@chakra-ui/react'
+import { Collapsible, TextAreaField } from '@/components'
+import { ReportI } from '@/interfaces'
+
+export const EditCollapsible = ({
+  children,
+}: Pick<ReportI, 'children'>) => {
+  return (
+    <Stack bg="lightBlue.2" spacing="2px" width={'100%'}>
+      {children?.map(({ id, name = '', value, type }) => {
+        const baseProps = {
+          id,
+          value,
+          type,
+          name,
+        }
+        switch (type) {
+          case 'textarea':
+            return (
+              <Collapsible
+                title={name}
+                showShadow={false}
+                key={`${id}-${name}-${value}-${type}`}
+              >
+                <TextAreaField {...baseProps} />
+              </Collapsible>
+            )
+          default:
+            return null
+        }
+      })}
+    </Stack>
+  )
+}

package/src/components/forms/dynamicForm/fields/index.ts

@@ -22,3 +22,4 @@ export * from './TileBodyFields'
 export * from './TileFooterFields'
 export * from './TileHeaderFields'
 export * from './uiFields'
+export * from './EditCollapsible'

package/src/utils/DynamicForm.utils.ts

@@ -47,7 +47,8 @@ export const mapApiObjectToFormFields = ({
 
       // string array
       if (Array.isArray(value) && value.every((v) => typeof v === 'string')) {
-        return [buildField(currentLabel, 'textarea', value.join('<br/>'))]
+        // return [buildField(currentLabel, 'textarea', value.join('<br/>'))]
+        return [buildCollapsibleField(currentLabel, value.join('<br/>'))]
       }
 
       // object array directly
@@ -57,7 +58,8 @@ export const mapApiObjectToFormFields = ({
           (v) => Object.prototype.toString.call(v) === '[object Object]'
         )
       ) {
-        return [buildField(currentLabel, 'textarea', renderObjectArray(value))]
+        // return [buildField(currentLabel, 'textarea', renderObjectArray(value))]
+        return [buildCollapsibleField(currentLabel, renderObjectArray(value))]
       }
 
       // object with single array field
@@ -72,7 +74,8 @@ export const mapApiObjectToFormFields = ({
           const label = `${currentLabel} - ${capitalize(subKey)}`
           return [
             {
-              ...buildField(label, 'textarea', renderObjectArray(subArr)),
+              // ...buildField(label, 'textarea', renderObjectArray(subArr)),
+              ...buildCollapsibleField(label, renderObjectArray(subArr)),
               name: label,
               label,
             },
@@ -90,7 +93,8 @@ export const mapApiObjectToFormFields = ({
           })
         }
         // shallow object -> flatten
-        return [buildField(currentLabel, 'textarea', renderObject(value))]
+        // return [buildField(currentLabel, 'textarea', renderObject(value))]
+        return [buildCollapsibleField(currentLabel, renderObject(value))]
       }
 
       // fallback
@@ -115,6 +119,35 @@ const buildField = (
   visible,
 })
 
+const buildCollapsibleField = (
+  name: string,
+  // type: string,
+  value: string,
+  visible = true
+): ReportI => {
+  const childObj: ReportI = {
+    id: uuidv4(),
+    name,
+    label: name,
+    description: '',
+    comments: '',
+    value,
+    type: 'textarea',
+    visible,
+  }
+  return {
+    id: uuidv4(),
+    name,
+    label: name,
+    description: '',
+    comments: '',
+    value,
+    type: 'collapsible',
+    visible,
+    children: [childObj]
+  }
+}
+
 const renderObjectArray = (arr: Record<string, any>[]): string =>
   arr
     .map((item) => `<div>${renderObject(item).replace(/<br\/\>/g, '')}</div>`)