@homefile/components-v2 2.8.30 → 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 (3) hide show
  1. package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.js +15 -11
  2. package/package.json +1 -1
  3. package/src/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.tsx +34 -20
package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.js CHANGED
@@ -1,15 +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.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
- 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 }) }) })] }));
15
19
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.8.30",
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,16 +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.id === 'item-name-header') {
31
- firstChild = header
32
- otherChildren = children.slice(1)
27
+ const { firstChild, otherChildren } = useMemo(() => {
28
+ let firstChild: ReactNode | null = null
29
+ let otherChildren: ReactNode = children
30
+
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
+ }
33
37
  }
34
- }
38
+
39
+ return { firstChild, otherChildren }
40
+ }, [children])
35
41
 
36
42
  return (
37
43
  <DrawerContent bg="lightBlue.1">
@@ -44,17 +50,25 @@ export const ItemFormPanel = ({
44
50
  </DrawerHeader>
45
51
 
46
52
  <DrawerBody p="0" overflowX="hidden" bg="lightBlue.1">
47
- {firstChild}
48
- <Box position="relative" mb="200px">
49
- <Overlay
50
- showOverlay={showOverlay}
51
- position="absolute"
52
- w="inherit"
53
- h="inherit"
54
- zIndex="9"
55
- />
56
- {otherChildren}
57
- </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
+ }
58
72
  </DrawerBody>
59
73
  <FooterDrawer isOpen={!showOverlay}>
60
74
  <DrawerFooter w="100%" py="0">