@etsoo/materialui 1.5.12 → 1.5.13

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 (6) hide show
  1. package/lib/cjs/TabBox.d.ts +4 -5
  2. package/lib/cjs/TabBox.js +7 -3
  3. package/lib/mjs/TabBox.d.ts +4 -5
  4. package/lib/mjs/TabBox.js +7 -3
  5. package/package.json +1 -1
  6. package/src/TabBox.tsx +20 -11
package/lib/cjs/TabBox.d.ts CHANGED
@@ -2,6 +2,8 @@ import { BoxProps } from "@mui/material/Box";
2
2
  import { TabProps } from "@mui/material/Tab";
3
3
  import { TabsProps } from "@mui/material/Tabs";
4
4
  import React from "react";
5
+ type TabBoxPanelActionType = () => void;
6
+ type TabBoxPanelChildrenType = TabBoxPanelActionType | ((visible: boolean) => React.ReactNode) | React.ReactNode;
5
7
  /**
6
8
  * Tab with box panel props
7
9
  */
@@ -9,15 +11,11 @@ export interface TabBoxPanel extends Omit<TabProps, "value" | "children"> {
9
11
  /**
10
12
  * Children
11
13
  */
12
- children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
14
+ children: TabBoxPanelChildrenType;
13
15
  /**
14
16
  * Panel box props
15
17
  */
16
18
  panelProps?: Omit<BoxProps, "hidden">;
17
- /**
18
- * Tab action
19
- */
20
- action?: () => void;
21
19
  }
22
20
  /**
23
21
  * Tabs with box props
@@ -58,3 +56,4 @@ export interface TabBoxPros extends BoxProps {
58
56
  * @returns Component
59
57
  */
60
58
  export declare function TabBox(props: TabBoxPros): import("react/jsx-runtime").JSX.Element;
59
+ export {};
package/lib/cjs/TabBox.js CHANGED
@@ -10,6 +10,9 @@ const Box_1 = __importDefault(require("@mui/material/Box"));
10
10
  const Tab_1 = __importDefault(require("@mui/material/Tab"));
11
11
  const Tabs_1 = __importDefault(require("@mui/material/Tabs"));
12
12
  const react_1 = __importDefault(require("react"));
13
+ function isActionTab(children) {
14
+ return typeof children === "function" && children.length === 0;
15
+ }
13
16
  /**
14
17
  * Tabs with box
15
18
  * @param props Props
@@ -28,13 +31,14 @@ function TabBox(props) {
28
31
  }, [index]);
29
32
  // Layout
30
33
  return ((0, jsx_runtime_1.jsxs)(react_1.default.Fragment, { children: [inputName && (0, jsx_runtime_1.jsx)("input", { type: "hidden", name: inputName, value: value }), (0, jsx_runtime_1.jsx)(Box_1.default, { ...root, children: (0, jsx_runtime_1.jsx)(Tabs_1.default, { value: value, onChange: (event, newValue) => {
31
- if (tabs[newValue].action) {
32
- tabs[newValue].action();
34
+ const { children } = tabs[newValue];
35
+ if (isActionTab(children)) {
36
+ children();
33
37
  }
34
38
  else {
35
39
  setValue(newValue);
36
40
  if (onChange)
37
41
  onChange(event, newValue);
38
42
  }
39
- }, ...rest, children: tabs.map(({ action, children, panelProps, ...tabRest }, index) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { value: index, ...tabRest }, index))) }) }), tabs.map(({ action, children, panelProps }, index) => ((0, jsx_runtime_1.jsx)(Box_1.default, { hidden: value !== index, ...tabProps, ...panelProps, children: action ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, {})) : (shared_1.Utils.getResult(children, value === index)) }, index)))] }));
43
+ }, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { value: index, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => ((0, jsx_runtime_1.jsx)(Box_1.default, { hidden: value !== index, ...tabProps, ...panelProps, children: isActionTab(children) ? ((0, jsx_runtime_1.jsx)(react_1.default.Fragment, {})) : (shared_1.Utils.getResult(children, value === index)) }, index)))] }));
40
44
  }
package/lib/mjs/TabBox.d.ts CHANGED
@@ -2,6 +2,8 @@ import { BoxProps } from "@mui/material/Box";
2
2
  import { TabProps } from "@mui/material/Tab";
3
3
  import { TabsProps } from "@mui/material/Tabs";
4
4
  import React from "react";
5
+ type TabBoxPanelActionType = () => void;
6
+ type TabBoxPanelChildrenType = TabBoxPanelActionType | ((visible: boolean) => React.ReactNode) | React.ReactNode;
5
7
  /**
6
8
  * Tab with box panel props
7
9
  */
@@ -9,15 +11,11 @@ export interface TabBoxPanel extends Omit<TabProps, "value" | "children"> {
9
11
  /**
10
12
  * Children
11
13
  */
12
- children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
14
+ children: TabBoxPanelChildrenType;
13
15
  /**
14
16
  * Panel box props
15
17
  */
16
18
  panelProps?: Omit<BoxProps, "hidden">;
17
- /**
18
- * Tab action
19
- */
20
- action?: () => void;
21
19
  }
22
20
  /**
23
21
  * Tabs with box props
@@ -58,3 +56,4 @@ export interface TabBoxPros extends BoxProps {
58
56
  * @returns Component
59
57
  */
60
58
  export declare function TabBox(props: TabBoxPros): import("react/jsx-runtime").JSX.Element;
59
+ export {};
package/lib/mjs/TabBox.js CHANGED
@@ -4,6 +4,9 @@ import Box from "@mui/material/Box";
4
4
  import Tab from "@mui/material/Tab";
5
5
  import Tabs from "@mui/material/Tabs";
6
6
  import React from "react";
7
+ function isActionTab(children) {
8
+ return typeof children === "function" && children.length === 0;
9
+ }
7
10
  /**
8
11
  * Tabs with box
9
12
  * @param props Props
@@ -22,13 +25,14 @@ export function TabBox(props) {
22
25
  }, [index]);
23
26
  // Layout
24
27
  return (_jsxs(React.Fragment, { children: [inputName && _jsx("input", { type: "hidden", name: inputName, value: value }), _jsx(Box, { ...root, children: _jsx(Tabs, { value: value, onChange: (event, newValue) => {
25
- if (tabs[newValue].action) {
26
- tabs[newValue].action();
28
+ const { children } = tabs[newValue];
29
+ if (isActionTab(children)) {
30
+ children();
27
31
  }
28
32
  else {
29
33
  setValue(newValue);
30
34
  if (onChange)
31
35
  onChange(event, newValue);
32
36
  }
33
- }, ...rest, children: tabs.map(({ action, children, panelProps, ...tabRest }, index) => (_jsx(Tab, { value: index, ...tabRest }, index))) }) }), tabs.map(({ action, children, panelProps }, index) => (_jsx(Box, { hidden: value !== index, ...tabProps, ...panelProps, children: action ? (_jsx(React.Fragment, {})) : (Utils.getResult(children, value === index)) }, index)))] }));
37
+ }, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => (_jsx(Tab, { value: index, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => (_jsx(Box, { hidden: value !== index, ...tabProps, ...panelProps, children: isActionTab(children) ? (_jsx(React.Fragment, {})) : (Utils.getResult(children, value === index)) }, index)))] }));
34
38
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.12",
3
+ "version": "1.5.13",
4
4
  "description": "TypeScript Material-UI Implementation",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/mjs/index.js",
package/src/TabBox.tsx CHANGED
@@ -4,6 +4,19 @@ import Tab, { TabProps } from "@mui/material/Tab";
4
4
  import Tabs, { TabsProps } from "@mui/material/Tabs";
5
5
  import React from "react";
6
6
 
7
+ type TabBoxPanelActionType = () => void;
8
+
9
+ type TabBoxPanelChildrenType =
10
+ | TabBoxPanelActionType
11
+ | ((visible: boolean) => React.ReactNode)
12
+ | React.ReactNode;
13
+
14
+ function isActionTab(
15
+ children?: TabBoxPanelChildrenType
16
+ ): children is TabBoxPanelActionType {
17
+ return typeof children === "function" && children.length === 0;
18
+ }
19
+
7
20
  /**
8
21
  * Tab with box panel props
9
22
  */
@@ -11,17 +24,12 @@ export interface TabBoxPanel extends Omit<TabProps, "value" | "children"> {
11
24
  /**
12
25
  * Children
13
26
  */
14
- children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
27
+ children: TabBoxPanelChildrenType;
15
28
 
16
29
  /**
17
30
  * Panel box props
18
31
  */
19
32
  panelProps?: Omit<BoxProps, "hidden">;
20
-
21
- /**
22
- * Tab action
23
- */
24
- action?: () => void;
25
33
  }
26
34
 
27
35
  /**
@@ -98,8 +106,9 @@ export function TabBox(props: TabBoxPros) {
98
106
  <Tabs
99
107
  value={value}
100
108
  onChange={(event, newValue) => {
101
- if (tabs[newValue].action) {
102
- tabs[newValue].action();
109
+ const { children } = tabs[newValue];
110
+ if (isActionTab(children)) {
111
+ children();
103
112
  } else {
104
113
  setValue(newValue);
105
114
  if (onChange) onChange(event, newValue);
@@ -107,14 +116,14 @@ export function TabBox(props: TabBoxPros) {
107
116
  }}
108
117
  {...rest}
109
118
  >
110
- {tabs.map(({ action, children, panelProps, ...tabRest }, index) => (
119
+ {tabs.map(({ children, panelProps, ...tabRest }, index) => (
111
120
  <Tab key={index} value={index} {...tabRest} />
112
121
  ))}
113
122
  </Tabs>
114
123
  </Box>
115
- {tabs.map(({ action, children, panelProps }, index) => (
124
+ {tabs.map(({ children, panelProps }, index) => (
116
125
  <Box key={index} hidden={value !== index} {...tabProps} {...panelProps}>
117
- {action ? (
126
+ {isActionTab(children) ? (
118
127
  <React.Fragment />
119
128
  ) : (
120
129
  Utils.getResult(children, value === index)