@homefile/components-v2 2.8.31 → 2.8.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.d.ts +1 -1
  2. package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.js +15 -13
  3. package/package.json +1 -1
  4. package/src/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.tsx +34 -22
package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  import { PropsWithChildren } from 'react';
2
2
  import { ItemFormPanelI } from '../../../../interfaces';
3
- export declare const ItemFormPanel: ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element | null;
3
+ export declare const ItemFormPanel: ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;
package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.js CHANGED
@@ -1,17 +1,19 @@
1
- import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
+ import { useMemo } from 'react';
2
3
  import { DrawerBody, DrawerHeader, DrawerContent, DrawerFooter, Box, } from '@chakra-ui/react';
3
- import { PanelHeader, FooterDrawer, ItemFormFooter, Overlay, } from '../../..';
4
+ import { PanelHeader, FooterDrawer, ItemFormFooter, Overlay, Loading } from '../../..';
4
5
  export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay = false, }) => {
5
- let firstChild = null;
6
- let otherChildren = children;
7
- if (Array.isArray(children) && children.length > 0) {
8
- const header = children[0];
9
- if (header.props && header.props.id === 'item-name-header') {
10
- firstChild = header;
11
- otherChildren = children.slice(1);
6
+ const { firstChild, otherChildren } = useMemo(() => {
7
+ let firstChild = null;
8
+ let otherChildren = children;
9
+ if (Array.isArray(children) && children.length > 0) {
10
+ const header = children[0];
11
+ if (header.props && header.props.id === 'item-name-header') {
12
+ firstChild = header;
13
+ otherChildren = children.slice(1);
14
+ }
12
15
  }
13
- }
14
- if (!firstChild)
15
- return null;
16
- return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsxs(DrawerBody, { p: "0", overflowX: "hidden", bg: "lightBlue.1", children: [firstChild, _jsxs(Box, { position: "relative", mb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), otherChildren] })] }), _jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onSave: onSubmitForm, onCancel: onClose }) }) })] }));
16
+ return { firstChild, otherChildren };
17
+ }, [children]);
18
+ return (_jsxs(DrawerContent, { bg: "lightBlue.1", children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsx(DrawerBody, { p: "0", overflowX: "hidden", bg: "lightBlue.1", children: firstChild ? (_jsxs(_Fragment, { children: [firstChild, _jsxs(Box, { position: "relative", mb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), otherChildren] })] })) : (_jsx(Loading, {})) }), _jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onSave: onSubmitForm, onCancel: onClose }) }) })] }));
17
19
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.8.31",
3
+ "version": "2.8.32",
4
4
  "author": "Homefile",
5
5
  "license": "UNLICENSED",
6
6
  "typings": "dist/index.d.ts",
package/src/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.tsx CHANGED
@@ -1,4 +1,4 @@
1
- import { PropsWithChildren, ReactNode } from 'react'
1
+ import { PropsWithChildren, ReactNode, useMemo } from 'react'
2
2
  import {
3
3
  DrawerBody,
4
4
  DrawerHeader,
@@ -11,6 +11,7 @@ import {
11
11
  FooterDrawer,
12
12
  ItemFormFooter,
13
13
  Overlay,
14
+ Loading
14
15
  } from '@/components'
15
16
  import { ItemFormPanelI } from '@/interfaces'
16
17
 
@@ -22,18 +23,21 @@ export const ItemFormPanel = ({
22
23
  panelTitle,
23
24
  showOverlay = false,
24
25
  }: PropsWithChildren<ItemFormPanelI>) => {
25
- let firstChild: ReactNode | null = null
26
- let otherChildren: ReactNode = children
27
26
 
28
- if (Array.isArray(children) && children.length > 0) {
29
- const header = children[0]
30
- if (header.props && header.props.id === 'item-name-header') {
31
- firstChild = header
32
- otherChildren = children.slice(1)
33
- }
34
- }
27
+ const { firstChild, otherChildren } = useMemo(() => {
28
+ let firstChild: ReactNode | null = null
29
+ let otherChildren: ReactNode = children
35
30
 
36
- if (!firstChild) return null
31
+ if (Array.isArray(children) && children.length > 0) {
32
+ const header = children[0]
33
+ if (header.props && header.props.id === 'item-name-header') {
34
+ firstChild = header
35
+ otherChildren = children.slice(1)
36
+ }
37
+ }
38
+
39
+ return { firstChild, otherChildren }
40
+ }, [children])
37
41
 
38
42
  return (
39
43
  <DrawerContent bg="lightBlue.1">
@@ -46,17 +50,25 @@ export const ItemFormPanel = ({
46
50
  </DrawerHeader>
47
51
 
48
52
  <DrawerBody p="0" overflowX="hidden" bg="lightBlue.1">
49
- {firstChild}
50
- <Box position="relative" mb="200px">
51
- <Overlay
52
- showOverlay={showOverlay}
53
- position="absolute"
54
- w="inherit"
55
- h="inherit"
56
- zIndex="9"
57
- />
58
- {otherChildren}
59
- </Box>
53
+ {
54
+ firstChild ? (
55
+ <>
56
+ {firstChild}
57
+ <Box position="relative" mb="200px">
58
+ <Overlay
59
+ showOverlay={showOverlay}
60
+ position="absolute"
61
+ w="inherit"
62
+ h="inherit"
63
+ zIndex="9"
64
+ />
65
+ {otherChildren}
66
+ </Box>
67
+ </>
68
+ ) : (
69
+ <Loading />
70
+ )
71
+ }
60
72
  </DrawerBody>
61
73
  <FooterDrawer isOpen={!showOverlay}>
62
74
  <DrawerFooter w="100%" py="0">