@m4l/components 0.0.8 → 0.0.11
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.
- package/dist/can-use-dom.js +3 -0
- package/dist/components/DataGrid/formatters/BooleanFormatter/index.d.ts +3 -0
- package/dist/components/DataGrid/formatters/BooleanFormatter/index.js +26 -0
- package/dist/components/DataGrid/formatters/BooleanFormatter/types.d.ts +5 -0
- package/dist/components/DataGrid/formatters/DateFormatter/index.js +33 -0
- package/dist/components/DataGrid/formatters/index.d.ts +2 -0
- package/dist/components/DataGrid/index.js +4 -37
- package/dist/components/DataGrid/types.d.ts +1 -1
- package/dist/components/ModalDialog/index.js +0 -5
- package/dist/components/ObjectLogs/index.js +2 -1
- package/dist/components/PaperForm/index.d.ts +3 -0
- package/dist/components/PaperForm/index.js +122 -0
- package/dist/components/PaperForm/skeleton.d.ts +6 -0
- package/dist/components/PaperForm/styles.d.ts +8 -0
- package/dist/components/PaperForm/types.d.ts +7 -0
- package/dist/components/PropertyValue/index.d.ts +3 -0
- package/dist/components/PropertyValue/index.js +108 -0
- package/dist/components/PropertyValue/skeleton.d.ts +2 -0
- package/dist/components/PropertyValue/styles.d.ts +6 -0
- package/dist/components/PropertyValue/types.d.ts +11 -0
- package/dist/components/ScrollBar/index.d.ts +3 -0
- package/dist/components/ScrollBar/index.js +60 -0
- package/dist/components/ScrollBar/styles.d.ts +6 -0
- package/dist/components/ScrollBar/types.d.ts +7 -0
- package/dist/components/hook-form/FormProvider/components/FormActions/index.d.ts +3 -0
- package/dist/components/hook-form/FormProvider/components/FormActions/skeleton.d.ts +2 -0
- package/dist/components/hook-form/FormProvider/components/FormActions/styles.d.ts +3 -0
- package/dist/components/hook-form/FormProvider/components/FormActions/types.d.ts +4 -0
- package/dist/components/hook-form/FormProvider/index.d.ts +3 -0
- package/dist/components/hook-form/FormProvider/index.js +162 -0
- package/dist/components/hook-form/FormProvider/styles.d.ts +2 -0
- package/dist/components/hook-form/FormProvider/types.d.ts +10 -0
- package/dist/components/hook-form/RHFAutocompleteAsync/index.d.ts +4 -0
- package/dist/components/hook-form/RHFAutocompleteAsync/index.js +184 -0
- package/dist/components/hook-form/RHFAutocompleteAsync/styles.d.ts +4 -0
- package/dist/components/hook-form/RHFAutocompleteAsync/types.d.ts +17 -0
- package/dist/components/hook-form/RHFCheckbox/index.d.ts +3 -0
- package/dist/components/hook-form/RHFCheckbox/index.js +41 -0
- package/dist/components/hook-form/RHFCheckbox/skeleton.d.ts +2 -0
- package/dist/components/hook-form/RHFCheckbox/styles.d.ts +2 -0
- package/dist/components/hook-form/RHFCheckbox/types.d.ts +10 -0
- package/dist/components/hook-form/RHFMultiCheckbox/index.d.ts +3 -0
- package/dist/components/hook-form/RHFMultiCheckbox/index.js +32 -0
- package/dist/components/hook-form/RHFMultiCheckbox/types.d.ts +10 -0
- package/dist/components/hook-form/RHFRadioGroup.d.ts +9 -0
- package/dist/components/hook-form/RHFRadioGroup.js +41 -0
- package/dist/components/hook-form/RHFSelect.d.ts +8 -0
- package/dist/components/hook-form/RHFSelect.js +34 -0
- package/dist/components/hook-form/RHFTextField/index.d.ts +4 -0
- package/dist/components/hook-form/RHFTextField/index.js +57 -0
- package/dist/components/hook-form/RHFTextField/styles.d.ts +2 -0
- package/dist/components/hook-form/RHFTextField/types.d.ts +9 -0
- package/dist/components/hook-form/index.d.ts +7 -0
- package/dist/components/index.d.ts +12 -5
- package/dist/components/mui_extended/Accordion/index.d.ts +3 -0
- package/dist/components/mui_extended/Accordion/index.js +45 -0
- package/dist/components/mui_extended/Accordion/types.d.ts +11 -0
- package/dist/components/mui_extended/BoxIcon/index.js +1 -1
- package/dist/components/mui_extended/Breadcrumbs/index.d.ts +2 -1
- package/dist/components/mui_extended/MenuPopover/index.d.ts +2 -1
- package/dist/components/mui_extended/Tab/index.d.ts +2 -0
- package/dist/components/mui_extended/Tab/index.js +29 -0
- package/dist/components/mui_extended/Tab/styles.d.ts +2 -0
- package/dist/components/mui_extended/index.d.ts +8 -6
- package/dist/contexts/ModalContext/index.js +1 -1
- package/dist/core-js.js +2645 -0
- package/dist/index.js +39 -18
- package/dist/juggle.js +511 -0
- package/dist/lodash.js +489 -0
- package/dist/node_modules.js +54 -0
- package/dist/react-draggable.js +3 -3
- package/dist/react-resizable.js +3 -3
- package/dist/react-splitter-layout.js +2 -2
- package/dist/simplebar.js +849 -0
- package/dist/vendor.js +29 -13
- package/package.json +7 -2
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { Checkbox } from "@mui/material";
|
|
2
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
3
|
+
function BooleanFormatter(props) {
|
|
4
|
+
const {
|
|
5
|
+
presentationType,
|
|
6
|
+
value
|
|
7
|
+
} = props;
|
|
8
|
+
if (presentationType === "string_yes_no") {
|
|
9
|
+
return /* @__PURE__ */ jsx(Fragment, {
|
|
10
|
+
children: value ? "Yes" : "No"
|
|
11
|
+
});
|
|
12
|
+
}
|
|
13
|
+
if (presentationType === "string_true_false") {
|
|
14
|
+
return /* @__PURE__ */ jsx(Fragment, {
|
|
15
|
+
children: value ? "True" : "False"
|
|
16
|
+
});
|
|
17
|
+
}
|
|
18
|
+
return /* @__PURE__ */ jsx(Checkbox, {
|
|
19
|
+
checked: value !== void 0 ? value : false,
|
|
20
|
+
size: "small",
|
|
21
|
+
readOnly: true,
|
|
22
|
+
disableFocusRipple: true,
|
|
23
|
+
disableRipple: true
|
|
24
|
+
});
|
|
25
|
+
}
|
|
26
|
+
export { BooleanFormatter as B };
|
|
@@ -0,0 +1,33 @@
|
|
|
1
|
+
import { format } from "date-fns";
|
|
2
|
+
import { jsx, Fragment } from "react/jsx-runtime";
|
|
3
|
+
function DateFormatter(props) {
|
|
4
|
+
const {
|
|
5
|
+
presentationType,
|
|
6
|
+
dateTime,
|
|
7
|
+
formatDate
|
|
8
|
+
} = props;
|
|
9
|
+
let finalFormat = formatDate || "yyyy-MM-dd HH:mm:ss";
|
|
10
|
+
let result;
|
|
11
|
+
let resultDate;
|
|
12
|
+
if (presentationType === "date") {
|
|
13
|
+
finalFormat = formatDate || "yyyy-MM-dd";
|
|
14
|
+
} else if (presentationType === "time") {
|
|
15
|
+
finalFormat = formatDate || "HH:mm:ss";
|
|
16
|
+
}
|
|
17
|
+
try {
|
|
18
|
+
if (typeof dateTime === "number") {
|
|
19
|
+
resultDate = new Date(dateTime);
|
|
20
|
+
} else if (typeof dateTime === "string") {
|
|
21
|
+
resultDate = new Date(Date.parse(dateTime));
|
|
22
|
+
} else {
|
|
23
|
+
resultDate = dateTime;
|
|
24
|
+
}
|
|
25
|
+
result = format(resultDate, finalFormat);
|
|
26
|
+
} catch (e) {
|
|
27
|
+
result = "err_typing";
|
|
28
|
+
}
|
|
29
|
+
return /* @__PURE__ */ jsx(Fragment, {
|
|
30
|
+
children: result
|
|
31
|
+
});
|
|
32
|
+
}
|
|
33
|
+
export { DateFormatter as D };
|
|
@@ -6,16 +6,13 @@ import { HTML5Backend } from "react-dnd-html5-backend";
|
|
|
6
6
|
import { SvgIcon, Checkbox, InputBase, Skeleton } from "@mui/material";
|
|
7
7
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
8
8
|
import { voidFunction, useModuleDictionary, useEnvironment } from "@m4l/core";
|
|
9
|
-
import "@mui/material/Box";
|
|
10
|
-
import "../mui_extended/MenuPopover/index.js";
|
|
11
|
-
import "react-router-dom";
|
|
12
9
|
import { M as MenuActions } from "../mui_extended/MenuActions/index.js";
|
|
13
10
|
import { P as Pager, g as getPagerComponentsDictionary, d as defaultPagerDictionary } from "../mui_extended/Pager/index.js";
|
|
14
11
|
import { I as IconButton } from "../mui_extended/IconButton/index.js";
|
|
15
12
|
import { u as useModal } from "../../hooks/useModal/index.js";
|
|
16
13
|
import { u as useResponsiveDesktop } from "../../vendor.js";
|
|
14
|
+
import "date-fns";
|
|
17
15
|
import { g as getModalDialogComponentsDictionary, d as defaultModalDialogDictionary } from "../ModalDialog/index.js";
|
|
18
|
-
import { format } from "date-fns";
|
|
19
16
|
const WrapperGrid$1 = styled("div")(() => ({
|
|
20
17
|
display: "flex",
|
|
21
18
|
flexDirection: "column",
|
|
@@ -1591,7 +1588,7 @@ function DataGrid(props) {
|
|
|
1591
1588
|
function getGridComponentsDictionary() {
|
|
1592
1589
|
return ["grid"].concat(getPagerComponentsDictionary()).concat(getModalDialogComponentsDictionary());
|
|
1593
1590
|
}
|
|
1594
|
-
|
|
1591
|
+
({
|
|
1595
1592
|
grid: {
|
|
1596
1593
|
actions: "Actions",
|
|
1597
1594
|
settings_tooltip: "Settings",
|
|
@@ -1619,40 +1616,10 @@ const defaultGridDictionary = {
|
|
|
1619
1616
|
},
|
|
1620
1617
|
...defaultPagerDictionary,
|
|
1621
1618
|
...defaultModalDialogDictionary
|
|
1622
|
-
};
|
|
1623
|
-
function DateFormatter(props) {
|
|
1624
|
-
const {
|
|
1625
|
-
presentationType,
|
|
1626
|
-
dateTime,
|
|
1627
|
-
formatDate
|
|
1628
|
-
} = props;
|
|
1629
|
-
let finalFormat = formatDate || "yyyy-MM-dd HH:mm:ss";
|
|
1630
|
-
let result;
|
|
1631
|
-
let resultDate;
|
|
1632
|
-
if (presentationType === "date") {
|
|
1633
|
-
finalFormat = formatDate || "yyyy-MM-dd";
|
|
1634
|
-
} else if (presentationType === "time") {
|
|
1635
|
-
finalFormat = formatDate || "HH:mm:ss";
|
|
1636
|
-
}
|
|
1637
|
-
try {
|
|
1638
|
-
if (typeof dateTime === "number") {
|
|
1639
|
-
resultDate = new Date(dateTime);
|
|
1640
|
-
} else if (typeof dateTime === "string") {
|
|
1641
|
-
resultDate = new Date(Date.parse(dateTime));
|
|
1642
|
-
} else {
|
|
1643
|
-
resultDate = dateTime;
|
|
1644
|
-
}
|
|
1645
|
-
result = format(resultDate, finalFormat);
|
|
1646
|
-
} catch (e) {
|
|
1647
|
-
result = "err_typing";
|
|
1648
|
-
}
|
|
1649
|
-
return /* @__PURE__ */ jsx(Fragment, {
|
|
1650
|
-
children: result
|
|
1651
|
-
});
|
|
1652
|
-
}
|
|
1619
|
+
});
|
|
1653
1620
|
const initialPagerState = {
|
|
1654
1621
|
page: 0,
|
|
1655
1622
|
rowsPerPage: 25,
|
|
1656
1623
|
totalRecords: 0
|
|
1657
1624
|
};
|
|
1658
|
-
export {
|
|
1625
|
+
export { DataGrid as D, getGridComponentsDictionary as g, initialPagerState as i };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Column } from 'react-data-grid';
|
|
3
|
-
import { MenuAction } from '../mui_extended';
|
|
3
|
+
import type { MenuAction } from '../mui_extended/MenuActions/types';
|
|
4
4
|
import { ActionsProps } from './components/Actions/types';
|
|
5
5
|
export declare type ColumnType = 'text' | 'date' | 'number' | 'boolean' | 'custom';
|
|
6
6
|
export declare type ColumnAlign = 'left' | 'center' | 'right';
|
|
@@ -6,12 +6,7 @@ import { R as Resizeable } from "../Resizeable/index.js";
|
|
|
6
6
|
import { u as useResponsiveDesktop } from "../../vendor.js";
|
|
7
7
|
import { useEnvironment } from "@m4l/core";
|
|
8
8
|
import { B as BoxIcon } from "../mui_extended/BoxIcon/index.js";
|
|
9
|
-
import "../mui_extended/MenuPopover/index.js";
|
|
10
|
-
import "react";
|
|
11
9
|
import { jsxs, jsx } from "react/jsx-runtime";
|
|
12
|
-
import "react-router-dom";
|
|
13
|
-
import "../mui_extended/MenuActions/index.js";
|
|
14
|
-
import "../mui_extended/Pager/index.js";
|
|
15
10
|
import { F as FormActions, g as getActionnsComponentsDictionary } from "../FormActions/index.js";
|
|
16
11
|
const WrapperDialog = styled(Dialog)(() => ({}));
|
|
17
12
|
const Container = styled("div")(({ theme }) => ({
|
|
@@ -5,8 +5,9 @@ import { LocalizationProvider, DateTimePicker } from "@mui/x-date-pickers";
|
|
|
5
5
|
import AdapterDateFns from "@mui/lab/AdapterDateFns";
|
|
6
6
|
import { styled, useTheme } from "@mui/material/styles";
|
|
7
7
|
import { startOfMonth, endOfDay } from "date-fns";
|
|
8
|
-
import { D as
|
|
8
|
+
import { D as DataGrid } from "../DataGrid/index.js";
|
|
9
9
|
import { I as IconButton$1 } from "../mui_extended/IconButton/index.js";
|
|
10
|
+
import { D as DateFormatter } from "../DataGrid/formatters/DateFormatter/index.js";
|
|
10
11
|
import { R as ReactJson } from "../../react-json-view.js";
|
|
11
12
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
12
13
|
import { u as useModal } from "../../hooks/useModal/index.js";
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
import { styled, useTheme } from "@mui/material/styles";
|
|
2
|
+
import { Skeleton } from "@mui/material";
|
|
3
|
+
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
4
|
+
import { BoxIcon } from "@mui_extended/BoxIcon";
|
|
5
|
+
const WrapperPaper = styled("div")(({
|
|
6
|
+
theme
|
|
7
|
+
}) => ({
|
|
8
|
+
display: "flex",
|
|
9
|
+
flexDirection: "column",
|
|
10
|
+
padding: theme.spacing(1),
|
|
11
|
+
[theme.breakpoints.up("sm")]: {
|
|
12
|
+
margin: `${theme.spacing(1.5)} ${theme.spacing(1.5)} ${theme.spacing(3)} ${theme.spacing(1.5)}`,
|
|
13
|
+
borderRadius: theme.spacing(2),
|
|
14
|
+
boxShadow: theme.customShadows.z8,
|
|
15
|
+
padding: theme.spacing(3),
|
|
16
|
+
backgroundColor: theme.palette.background.paper
|
|
17
|
+
}
|
|
18
|
+
}));
|
|
19
|
+
const Header = styled("div")(({
|
|
20
|
+
theme
|
|
21
|
+
}) => ({
|
|
22
|
+
display: "flex",
|
|
23
|
+
flexDirection: "row",
|
|
24
|
+
alignItems: "center",
|
|
25
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
26
|
+
paddingBottom: theme.spacing(3),
|
|
27
|
+
marginBottom: theme.spacing(2),
|
|
28
|
+
overflow: "hidden"
|
|
29
|
+
}));
|
|
30
|
+
const IconTitleContainer = styled("div")(({
|
|
31
|
+
theme
|
|
32
|
+
}) => ({
|
|
33
|
+
display: "flex",
|
|
34
|
+
flexDirection: "row",
|
|
35
|
+
flexGrow: 1,
|
|
36
|
+
alignItems: "center",
|
|
37
|
+
cursor: "move",
|
|
38
|
+
...theme.typography.subtitle1,
|
|
39
|
+
color: theme.palette.text.primary
|
|
40
|
+
}));
|
|
41
|
+
const IconHeader = styled("div")(({
|
|
42
|
+
theme
|
|
43
|
+
}) => ({
|
|
44
|
+
display: "flex",
|
|
45
|
+
alignItems: "center",
|
|
46
|
+
justifyContent: "center",
|
|
47
|
+
marginRight: theme.spacing(1.5)
|
|
48
|
+
}));
|
|
49
|
+
const Content = styled("div")(() => ({
|
|
50
|
+
flexGrow: 1,
|
|
51
|
+
position: "relative"
|
|
52
|
+
}));
|
|
53
|
+
const SkPaperFormHeader = styled("div")(({
|
|
54
|
+
theme
|
|
55
|
+
}) => ({
|
|
56
|
+
width: "auto",
|
|
57
|
+
display: "grid",
|
|
58
|
+
gridTemplateColumns: `${theme.spacing(2)} auto`,
|
|
59
|
+
gridGap: `${theme.spacing(1.5)}`,
|
|
60
|
+
paddingBottom: `${theme.spacing(3)}`,
|
|
61
|
+
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
62
|
+
marginBottom: `${theme.spacing(3)}`
|
|
63
|
+
}));
|
|
64
|
+
const PaperFormBoddy = styled("div")(() => ({
|
|
65
|
+
display: "flex",
|
|
66
|
+
flexDirection: "column",
|
|
67
|
+
flexGrow: "1"
|
|
68
|
+
}));
|
|
69
|
+
function SKTPaperForm(prop) {
|
|
70
|
+
const {
|
|
71
|
+
children
|
|
72
|
+
} = prop;
|
|
73
|
+
return /* @__PURE__ */ jsxs(Fragment, {
|
|
74
|
+
children: [/* @__PURE__ */ jsxs(SkPaperFormHeader, {
|
|
75
|
+
children: [/* @__PURE__ */ jsx(Skeleton, {
|
|
76
|
+
variant: "circular",
|
|
77
|
+
width: 16,
|
|
78
|
+
height: 16
|
|
79
|
+
}), /* @__PURE__ */ jsx(Skeleton, {
|
|
80
|
+
variant: "text",
|
|
81
|
+
width: 68,
|
|
82
|
+
height: 14
|
|
83
|
+
})]
|
|
84
|
+
}), /* @__PURE__ */ jsx(PaperFormBoddy, {
|
|
85
|
+
children
|
|
86
|
+
})]
|
|
87
|
+
});
|
|
88
|
+
}
|
|
89
|
+
function PaperForm(props) {
|
|
90
|
+
const {
|
|
91
|
+
urlIcon,
|
|
92
|
+
tittle,
|
|
93
|
+
children,
|
|
94
|
+
isSkeleton = false
|
|
95
|
+
} = props;
|
|
96
|
+
const theme = useTheme();
|
|
97
|
+
return /* @__PURE__ */ jsx(WrapperPaper, {
|
|
98
|
+
id: "ContainerPropertyValue",
|
|
99
|
+
children: !isSkeleton ? /* @__PURE__ */ jsxs(Fragment, {
|
|
100
|
+
children: [/* @__PURE__ */ jsx(Header, {
|
|
101
|
+
id: "Header",
|
|
102
|
+
children: /* @__PURE__ */ jsxs(IconTitleContainer, {
|
|
103
|
+
className: "draggable-dialog-title",
|
|
104
|
+
children: [/* @__PURE__ */ jsx(IconHeader, {
|
|
105
|
+
children: /* @__PURE__ */ jsx(BoxIcon, {
|
|
106
|
+
src: urlIcon,
|
|
107
|
+
sx: {
|
|
108
|
+
color: theme.palette.action.active
|
|
109
|
+
}
|
|
110
|
+
})
|
|
111
|
+
}), tittle]
|
|
112
|
+
})
|
|
113
|
+
}), /* @__PURE__ */ jsx(Content, {
|
|
114
|
+
id: "Content",
|
|
115
|
+
children
|
|
116
|
+
})]
|
|
117
|
+
}) : /* @__PURE__ */ jsx(SKTPaperForm, {
|
|
118
|
+
children
|
|
119
|
+
})
|
|
120
|
+
});
|
|
121
|
+
}
|
|
122
|
+
export { PaperForm as P };
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const WrapperPaper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
3
|
+
export declare const Header: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
4
|
+
export declare const IconTitleContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
5
|
+
export declare const IconHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
6
|
+
export declare const Content: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
7
|
+
export declare const SkPaperFormHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
8
|
+
export declare const PaperFormBoddy: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -0,0 +1,108 @@
|
|
|
1
|
+
import { styled } from "@mui/material/styles";
|
|
2
|
+
import { Skeleton } from "@mui/material";
|
|
3
|
+
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
+
const WrapperPropertyValue = styled("div", {
|
|
5
|
+
shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
|
|
6
|
+
})(({
|
|
7
|
+
propertyHeight,
|
|
8
|
+
isForm,
|
|
9
|
+
theme
|
|
10
|
+
}) => ({
|
|
11
|
+
display: "flex",
|
|
12
|
+
alignItems: "flex-start",
|
|
13
|
+
width: "100%",
|
|
14
|
+
padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
|
|
15
|
+
height: propertyHeight || "auto",
|
|
16
|
+
":hover": {
|
|
17
|
+
backgroundColor: isForm ? "unset" : theme.palette.grid?.rowHover
|
|
18
|
+
},
|
|
19
|
+
borderBottom: isForm ? "none" : `1px solid ${theme.palette.divider}`,
|
|
20
|
+
flexDirection: "column",
|
|
21
|
+
[theme.breakpoints.up("sm")]: {
|
|
22
|
+
flexDirection: "row",
|
|
23
|
+
alignItems: "center"
|
|
24
|
+
}
|
|
25
|
+
}));
|
|
26
|
+
const Property = styled("span", {
|
|
27
|
+
shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
|
|
28
|
+
})(({
|
|
29
|
+
propertyWidth,
|
|
30
|
+
isForm,
|
|
31
|
+
theme
|
|
32
|
+
}) => ({
|
|
33
|
+
width: propertyWidth || "150px",
|
|
34
|
+
minWidth: propertyWidth || "150px",
|
|
35
|
+
...theme.typography.subtitle2,
|
|
36
|
+
color: theme.palette.text.primary,
|
|
37
|
+
position: "relative",
|
|
38
|
+
[theme.breakpoints.up("sm")]: {
|
|
39
|
+
borderRight: isForm ? "none" : `1px solid ${theme.palette.divider}`,
|
|
40
|
+
paddingRight: theme.spacing(2),
|
|
41
|
+
textAlign: "right"
|
|
42
|
+
},
|
|
43
|
+
overflow: "hidden",
|
|
44
|
+
overflowWrap: "break-word"
|
|
45
|
+
}));
|
|
46
|
+
const Value = styled("div", {
|
|
47
|
+
shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight"
|
|
48
|
+
})(({
|
|
49
|
+
propertyHeight,
|
|
50
|
+
theme
|
|
51
|
+
}) => ({
|
|
52
|
+
flexGrow: "1",
|
|
53
|
+
...theme.typography.body2,
|
|
54
|
+
color: theme.palette.text.secondary,
|
|
55
|
+
position: "relative",
|
|
56
|
+
padding: "1px",
|
|
57
|
+
height: propertyHeight ? propertyHeight - 24 : "auto",
|
|
58
|
+
marginTop: theme.spacing(1),
|
|
59
|
+
width: "100%",
|
|
60
|
+
[theme.breakpoints.up("sm")]: {
|
|
61
|
+
marginLeft: theme.spacing(2),
|
|
62
|
+
marginTop: "0px"
|
|
63
|
+
},
|
|
64
|
+
overflow: "hidden",
|
|
65
|
+
overflowWrap: "break-word"
|
|
66
|
+
}));
|
|
67
|
+
const SKTWrapperProperty = styled("div")(() => ({
|
|
68
|
+
display: "flex",
|
|
69
|
+
justifyContent: "flex-end"
|
|
70
|
+
}));
|
|
71
|
+
function SKTProperty() {
|
|
72
|
+
return /* @__PURE__ */ jsx(SKTWrapperProperty, {
|
|
73
|
+
children: /* @__PURE__ */ jsx(Skeleton, {
|
|
74
|
+
variant: "text",
|
|
75
|
+
width: 68,
|
|
76
|
+
height: 14
|
|
77
|
+
})
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
function PropertyValue(props) {
|
|
81
|
+
const {
|
|
82
|
+
property,
|
|
83
|
+
value,
|
|
84
|
+
propertyWidth,
|
|
85
|
+
propertyHeight,
|
|
86
|
+
isForm,
|
|
87
|
+
isSkeleton = false
|
|
88
|
+
} = props;
|
|
89
|
+
return /* @__PURE__ */ jsxs(WrapperPropertyValue, {
|
|
90
|
+
id: "ContainerPropertyValue",
|
|
91
|
+
isForm,
|
|
92
|
+
propertyWidth,
|
|
93
|
+
propertyHeight,
|
|
94
|
+
children: [/* @__PURE__ */ jsx(Property, {
|
|
95
|
+
id: "Property",
|
|
96
|
+
isForm,
|
|
97
|
+
propertyWidth,
|
|
98
|
+
propertyHeight,
|
|
99
|
+
children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {}) : property
|
|
100
|
+
}), /* @__PURE__ */ jsx(Value, {
|
|
101
|
+
id: "Value",
|
|
102
|
+
propertyWidth,
|
|
103
|
+
propertyHeight,
|
|
104
|
+
children: value
|
|
105
|
+
})]
|
|
106
|
+
});
|
|
107
|
+
}
|
|
108
|
+
export { PropertyValue as P };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import { PropertyProps } from './types';
|
|
3
|
+
export declare const WrapperPropertyValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PropertyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
4
|
+
export declare const Property: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PropertyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, {}>;
|
|
5
|
+
export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & PropertyProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
6
|
+
export declare const SKTWrapperProperty: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import type { ReactNode } from 'react';
|
|
2
|
+
export interface PropertyProps {
|
|
3
|
+
propertyWidth?: number;
|
|
4
|
+
propertyHeight?: number;
|
|
5
|
+
isForm?: boolean;
|
|
6
|
+
}
|
|
7
|
+
export interface PropertyValueProps extends PropertyProps {
|
|
8
|
+
isSkeleton?: boolean;
|
|
9
|
+
property: string;
|
|
10
|
+
value: number | string | ReactNode;
|
|
11
|
+
}
|
|
@@ -0,0 +1,60 @@
|
|
|
1
|
+
import { Box } from "@mui/material";
|
|
2
|
+
import { styled, alpha } from "@mui/material/styles";
|
|
3
|
+
import { S as SimpleBar } from "../../simplebar.js";
|
|
4
|
+
import { jsx } from "react/jsx-runtime";
|
|
5
|
+
const RootStyle = styled("div")(() => ({
|
|
6
|
+
flexGrow: 1,
|
|
7
|
+
height: "100%",
|
|
8
|
+
overflow: "hidden"
|
|
9
|
+
}));
|
|
10
|
+
const SimpleBarStyle = styled(SimpleBar)(({
|
|
11
|
+
theme
|
|
12
|
+
}) => ({
|
|
13
|
+
maxHeight: "100%",
|
|
14
|
+
"& .simplebar-scrollbar": {
|
|
15
|
+
"&:before": {
|
|
16
|
+
backgroundColor: alpha(theme.palette.grey[600], 0.48)
|
|
17
|
+
},
|
|
18
|
+
"&.simplebar-visible:before": {
|
|
19
|
+
opacity: 1
|
|
20
|
+
}
|
|
21
|
+
},
|
|
22
|
+
"& .simplebar-track.simplebar-vertical": {
|
|
23
|
+
width: 10
|
|
24
|
+
},
|
|
25
|
+
"& .simplebar-track.simplebar-horizontal .simplebar-scrollbar": {
|
|
26
|
+
height: 6
|
|
27
|
+
},
|
|
28
|
+
"& .simplebar-mask": {
|
|
29
|
+
zIndex: "inherit"
|
|
30
|
+
}
|
|
31
|
+
}));
|
|
32
|
+
function ScrollBar({
|
|
33
|
+
children,
|
|
34
|
+
sx,
|
|
35
|
+
...other
|
|
36
|
+
}) {
|
|
37
|
+
const userAgent = typeof navigator === "undefined" ? "SSR" : navigator.userAgent;
|
|
38
|
+
const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent);
|
|
39
|
+
if (isMobile) {
|
|
40
|
+
return /* @__PURE__ */ jsx(Box, {
|
|
41
|
+
sx: {
|
|
42
|
+
overflowX: "auto",
|
|
43
|
+
...sx
|
|
44
|
+
},
|
|
45
|
+
...other,
|
|
46
|
+
children
|
|
47
|
+
});
|
|
48
|
+
}
|
|
49
|
+
return /* @__PURE__ */ jsx(RootStyle, {
|
|
50
|
+
id: "RootStyle",
|
|
51
|
+
children: /* @__PURE__ */ jsx(SimpleBarStyle, {
|
|
52
|
+
timeout: 500,
|
|
53
|
+
clickOnTrack: false,
|
|
54
|
+
sx,
|
|
55
|
+
...other,
|
|
56
|
+
children
|
|
57
|
+
})
|
|
58
|
+
});
|
|
59
|
+
}
|
|
60
|
+
export { ScrollBar as S };
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
import SimpleBarReact from 'simplebar-react';
|
|
3
|
+
export declare const RootStyle: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
4
|
+
export declare const SimpleBarStyle: import("@emotion/styled").StyledComponent<SimpleBarReact.Props & import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, {}, {
|
|
5
|
+
ref?: import("react").Ref<SimpleBarReact> | undefined;
|
|
6
|
+
}>;
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const WrapperFormActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
3
|
+
export declare const WrapperSKTFormActions: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|