@homefile/components-v2 2.27.2 → 2.27.3

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 +5 -1
  2. package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.js +53 -12
  3. package/package.json +1 -1
  4. package/src/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.tsx +94 -27
package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.d.ts CHANGED
@@ -1,3 +1,7 @@
1
1
  import { PropsWithChildren } from 'react';
2
2
  import { ItemFormPanelI } from '../../../../interfaces';
3
- export declare const ItemFormPanel: ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay, onClearForm, onDuplicate, }: PropsWithChildren<ItemFormPanelI>) => import("react/jsx-runtime").JSX.Element;
3
+ type ItemFormPanelProps = PropsWithChildren<ItemFormPanelI & {
4
+ skipHeaderDiscovery?: boolean;
5
+ }>;
6
+ export declare const ItemFormPanel: ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay, onClearForm, onDuplicate, skipHeaderDiscovery, }: ItemFormPanelProps) => import("react/jsx-runtime").JSX.Element;
7
+ export {};
package/dist/components/forms/dynamicForm/ItemFormPanel/ItemFormPanel.js CHANGED
@@ -1,19 +1,60 @@
1
1
  import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
2
- import { useMemo } from 'react';
2
+ import { isValidElement, Fragment, Children, useMemo, } from 'react';
3
3
  import { DrawerBody, DrawerHeader, DrawerFooter, Box } from '@chakra-ui/react';
4
4
  import { PanelHeader, FooterDrawer, ItemFormFooter, Overlay, Loading, } from '../../..';
5
- export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay = false, onClearForm, onDuplicate, }) => {
5
+ function isElementWithChildren(node) {
6
+ return isValidElement(node);
7
+ }
8
+ function isHeaderElement(node) {
9
+ var _a;
10
+ return (isValidElement(node) &&
11
+ ((_a = node.props) === null || _a === void 0 ? void 0 : _a.id) === 'item-name-header');
12
+ }
13
+ function flattenChildren(nodes) {
14
+ const array = Children.toArray(nodes);
15
+ const flat = [];
16
+ for (const node of array) {
17
+ if (isElementWithChildren(node) && node.type === Fragment) {
18
+ flat.push(...flattenChildren(node.props.children));
19
+ }
20
+ else {
21
+ flat.push(node);
22
+ }
23
+ }
24
+ return flat;
25
+ }
26
+ export const ItemFormPanel = ({ children, onClose, onSubmitForm, panelIcon, panelTitle, showOverlay = false, onClearForm, onDuplicate, skipHeaderDiscovery = false, }) => {
6
27
  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
- }
28
+ if (skipHeaderDiscovery) {
29
+ return {
30
+ firstChild: null,
31
+ otherChildren: children,
32
+ };
33
+ }
34
+ const flat = flattenChildren(children);
35
+ const headerIndex = flat.findIndex(isHeaderElement);
36
+ if (headerIndex === -1) {
37
+ return {
38
+ firstChild: null,
39
+ otherChildren: flat,
40
+ };
15
41
  }
42
+ const firstChild = flat[headerIndex];
43
+ const otherChildren = [
44
+ ...flat.slice(0, headerIndex),
45
+ ...flat.slice(headerIndex + 1),
46
+ ];
16
47
  return { firstChild, otherChildren };
17
- }, [children]);
18
- return (_jsxs(_Fragment, { 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, {})) }), onSubmitForm && (_jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onClearForm: onClearForm, onDuplicate: onDuplicate, onSave: onSubmitForm, onCancel: onClose }) }) }))] }));
48
+ }, [children, skipHeaderDiscovery]);
49
+ let bodyContent;
50
+ if (skipHeaderDiscovery) {
51
+ bodyContent = (_jsx(Box, { position: "relative", pb: "200px", children: children }));
52
+ }
53
+ else if (firstChild) {
54
+ bodyContent = (_jsxs(_Fragment, { children: [firstChild, _jsxs(Box, { position: "relative", pb: "200px", children: [_jsx(Overlay, { showOverlay: showOverlay, position: "absolute", w: "inherit", h: "inherit", zIndex: "9" }), otherChildren] })] }));
55
+ }
56
+ else {
57
+ bodyContent = _jsx(Loading, {});
58
+ }
59
+ return (_jsxs(_Fragment, { children: [_jsx(DrawerHeader, { p: "0", children: _jsx(PanelHeader, { handleCloseButton: onClose, icon: panelIcon, title: panelTitle }) }), _jsx(DrawerBody, { p: "0", overflowX: "hidden", bg: "lightBlue.1", children: bodyContent }), onSubmitForm && (_jsx(FooterDrawer, { isOpen: !showOverlay, children: _jsx(DrawerFooter, { w: "100%", py: "0", children: _jsx(ItemFormFooter, { onClearForm: onClearForm, onDuplicate: onDuplicate, onSave: onSubmitForm, onCancel: onClose }) }) }))] }));
19
60
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@homefile/components-v2",
3
- "version": "2.27.2",
3
+ "version": "2.27.3",
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,12 @@
1
- import { PropsWithChildren, ReactNode, useMemo } from 'react'
1
+ import {
2
+ PropsWithChildren,
3
+ ReactNode,
4
+ ReactElement,
5
+ isValidElement,
6
+ Fragment,
7
+ Children,
8
+ useMemo,
9
+ } from 'react'
2
10
  import { DrawerBody, DrawerHeader, DrawerFooter, Box } from '@chakra-ui/react'
3
11
  import {
4
12
  PanelHeader,
@@ -9,6 +17,39 @@ import {
9
17
  } from '@/components'
10
18
  import { ItemFormPanelI } from '@/interfaces'
11
19
 
20
+ type ItemFormPanelProps = PropsWithChildren<
21
+ ItemFormPanelI & { skipHeaderDiscovery?: boolean }
22
+ >
23
+
24
+ function isElementWithChildren(
25
+ node: ReactNode
26
+ ): node is ReactElement<{ children?: ReactNode }> {
27
+ return isValidElement(node)
28
+ }
29
+
30
+ function isHeaderElement(
31
+ node: ReactNode
32
+ ): node is ReactElement<{ id?: string }> {
33
+ return (
34
+ isValidElement(node) &&
35
+ (node.props as { id: string })?.id === 'item-name-header'
36
+ )
37
+ }
38
+
39
+ function flattenChildren(nodes: ReactNode): ReactNode[] {
40
+ const array = Children.toArray(nodes)
41
+ const flat: ReactNode[] = []
42
+
43
+ for (const node of array) {
44
+ if (isElementWithChildren(node) && node.type === Fragment) {
45
+ flat.push(...flattenChildren(node.props.children))
46
+ } else {
47
+ flat.push(node)
48
+ }
49
+ }
50
+ return flat
51
+ }
52
+
12
53
  export const ItemFormPanel = ({
13
54
  children,
14
55
  onClose,
@@ -18,21 +59,62 @@ export const ItemFormPanel = ({
18
59
  showOverlay = false,
19
60
  onClearForm,
20
61
  onDuplicate,
21
- }: PropsWithChildren<ItemFormPanelI>) => {
62
+ skipHeaderDiscovery = false,
63
+ }: ItemFormPanelProps) => {
22
64
  const { firstChild, otherChildren } = useMemo(() => {
23
- let firstChild: ReactNode | null = null
24
- let otherChildren: ReactNode = children
65
+ if (skipHeaderDiscovery) {
66
+ return {
67
+ firstChild: null as ReactNode | null,
68
+ otherChildren: children as ReactNode,
69
+ }
70
+ }
71
+
72
+ const flat = flattenChildren(children)
73
+ const headerIndex = flat.findIndex(isHeaderElement)
25
74
 
26
- if (Array.isArray(children) && children.length > 0) {
27
- const header = children[0]
28
- if (header.props && header.props.id === 'item-name-header') {
29
- firstChild = header
30
- otherChildren = children.slice(1)
75
+ if (headerIndex === -1) {
76
+ return {
77
+ firstChild: null as ReactNode | null,
78
+ otherChildren: flat as ReactNode,
31
79
  }
32
80
  }
33
81
 
82
+ const firstChild = flat[headerIndex]
83
+ const otherChildren = [
84
+ ...flat.slice(0, headerIndex),
85
+ ...flat.slice(headerIndex + 1),
86
+ ] as ReactNode
87
+
34
88
  return { firstChild, otherChildren }
35
- }, [children])
89
+ }, [children, skipHeaderDiscovery])
90
+
91
+ let bodyContent: ReactNode
92
+
93
+ if (skipHeaderDiscovery) {
94
+ bodyContent = (
95
+ <Box position="relative" pb="200px">
96
+ {children}
97
+ </Box>
98
+ )
99
+ } else if (firstChild) {
100
+ bodyContent = (
101
+ <>
102
+ {firstChild}
103
+ <Box position="relative" pb="200px">
104
+ <Overlay
105
+ showOverlay={showOverlay}
106
+ position="absolute"
107
+ w="inherit"
108
+ h="inherit"
109
+ zIndex="9"
110
+ />
111
+ {otherChildren}
112
+ </Box>
113
+ </>
114
+ )
115
+ } else {
116
+ bodyContent = <Loading />
117
+ }
36
118
 
37
119
  return (
38
120
  <>
@@ -45,24 +127,9 @@ export const ItemFormPanel = ({
45
127
  </DrawerHeader>
46
128
 
47
129
  <DrawerBody p="0" overflowX="hidden" bg="lightBlue.1">
48
- {firstChild ? (
49
- <>
50
- {firstChild}
51
- <Box position="relative" mb="200px">
52
- <Overlay
53
- showOverlay={showOverlay}
54
- position="absolute"
55
- w="inherit"
56
- h="inherit"
57
- zIndex="9"
58
- />
59
- {otherChildren}
60
- </Box>
61
- </>
62
- ) : (
63
- <Loading />
64
- )}
130
+ {bodyContent}
65
131
  </DrawerBody>
132
+
66
133
  {onSubmitForm && (
67
134
  <FooterDrawer isOpen={!showOverlay}>
68
135
  <DrawerFooter w="100%" py="0">