@etsoo/materialui 1.5.11 → 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 +13 -5
  3. package/lib/mjs/TabBox.d.ts +4 -5
  4. package/lib/mjs/TabBox.js +13 -5
  5. package/package.json +1 -1
  6. package/src/TabBox.tsx +27 -16
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
- * To URL
19
- */
20
- to?: string;
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,7 +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
- const react_router_1 = require("react-router");
13
+ function isActionTab(children) {
14
+ return typeof children === "function" && children.length === 0;
15
+ }
14
16
  /**
15
17
  * Tabs with box
16
18
  * @param props Props
@@ -29,8 +31,14 @@ function TabBox(props) {
29
31
  }, [index]);
30
32
  // Layout
31
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) => {
32
- setValue(newValue);
33
- if (onChange)
34
- onChange(event, newValue);
35
- }, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => ((0, jsx_runtime_1.jsx)(Tab_1.default, { value: index, LinkComponent: tabRest.to ? react_router_1.Link : undefined, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => ((0, jsx_runtime_1.jsx)(Box_1.default, { hidden: value !== index, ...tabProps, ...panelProps, children: shared_1.Utils.getResult(children, value === index) }, index)))] }));
34
+ const { children } = tabs[newValue];
35
+ if (isActionTab(children)) {
36
+ children();
37
+ }
38
+ else {
39
+ setValue(newValue);
40
+ if (onChange)
41
+ onChange(event, newValue);
42
+ }
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)))] }));
36
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
- * To URL
19
- */
20
- to?: string;
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,7 +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
- import { Link } from "react-router";
7
+ function isActionTab(children) {
8
+ return typeof children === "function" && children.length === 0;
9
+ }
8
10
  /**
9
11
  * Tabs with box
10
12
  * @param props Props
@@ -23,8 +25,14 @@ export function TabBox(props) {
23
25
  }, [index]);
24
26
  // Layout
25
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) => {
26
- setValue(newValue);
27
- if (onChange)
28
- onChange(event, newValue);
29
- }, ...rest, children: tabs.map(({ children, panelProps, ...tabRest }, index) => (_jsx(Tab, { value: index, LinkComponent: tabRest.to ? Link : undefined, ...tabRest }, index))) }) }), tabs.map(({ children, panelProps }, index) => (_jsx(Box, { hidden: value !== index, ...tabProps, ...panelProps, children: Utils.getResult(children, value === index) }, index)))] }));
28
+ const { children } = tabs[newValue];
29
+ if (isActionTab(children)) {
30
+ children();
31
+ }
32
+ else {
33
+ setValue(newValue);
34
+ if (onChange)
35
+ onChange(event, newValue);
36
+ }
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)))] }));
30
38
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@etsoo/materialui",
3
- "version": "1.5.11",
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
@@ -3,7 +3,19 @@ import Box, { BoxProps } from "@mui/material/Box";
3
3
  import Tab, { TabProps } from "@mui/material/Tab";
4
4
  import Tabs, { TabsProps } from "@mui/material/Tabs";
5
5
  import React from "react";
6
- import { Link } from "react-router";
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
+ }
7
19
 
8
20
  /**
9
21
  * Tab with box panel props
@@ -12,17 +24,12 @@ export interface TabBoxPanel extends Omit<TabProps, "value" | "children"> {
12
24
  /**
13
25
  * Children
14
26
  */
15
- children?: ((visible: boolean) => React.ReactNode) | React.ReactNode;
27
+ children: TabBoxPanelChildrenType;
16
28
 
17
29
  /**
18
30
  * Panel box props
19
31
  */
20
32
  panelProps?: Omit<BoxProps, "hidden">;
21
-
22
- /**
23
- * To URL
24
- */
25
- to?: string;
26
33
  }
27
34
 
28
35
  /**
@@ -99,24 +106,28 @@ export function TabBox(props: TabBoxPros) {
99
106
  <Tabs
100
107
  value={value}
101
108
  onChange={(event, newValue) => {
102
- setValue(newValue);
103
- if (onChange) onChange(event, newValue);
109
+ const { children } = tabs[newValue];
110
+ if (isActionTab(children)) {
111
+ children();
112
+ } else {
113
+ setValue(newValue);
114
+ if (onChange) onChange(event, newValue);
115
+ }
104
116
  }}
105
117
  {...rest}
106
118
  >
107
119
  {tabs.map(({ children, panelProps, ...tabRest }, index) => (
108
- <Tab
109
- key={index}
110
- value={index}
111
- LinkComponent={tabRest.to ? Link : undefined}
112
- {...tabRest}
113
- />
120
+ <Tab key={index} value={index} {...tabRest} />
114
121
  ))}
115
122
  </Tabs>
116
123
  </Box>
117
124
  {tabs.map(({ children, panelProps }, index) => (
118
125
  <Box key={index} hidden={value !== index} {...tabProps} {...panelProps}>
119
- {Utils.getResult(children, value === index)}
126
+ {isActionTab(children) ? (
127
+ <React.Fragment />
128
+ ) : (
129
+ Utils.getResult(children, value === index)
130
+ )}
120
131
  </Box>
121
132
  ))}
122
133
  </React.Fragment>