@m4l/components 0.1.8 → 0.1.9
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/commonjs.js +1 -1
- package/components/CommonActions/components/Actions/index.js +42 -41
- package/components/DataGrid/formatters/columnNestedValueFormatter/index.d.ts +3 -0
- package/components/DataGrid/formatters/columnNestedValueFormatter/types.d.ts +5 -0
- package/components/DataGrid/formatters/columnPointsFormatter/index.d.ts +3 -0
- package/components/DataGrid/formatters/columnPointsFormatter/types.d.ts +6 -0
- package/components/DataGrid/formatters/columnUncertaintyFormatter/index.d.ts +3 -0
- package/components/DataGrid/formatters/columnUncertaintyFormatter/types.d.ts +7 -0
- package/components/DataGrid/formatters/index.d.ts +4 -0
- package/components/DataGrid/types.d.ts +3 -1
- package/components/DynamicFilter/index.js +8 -7
- package/components/ErrorLabel/index.d.ts +3 -0
- package/components/ErrorLabel/styles.d.ts +2 -0
- package/components/ErrorLabel/types.d.ts +3 -0
- package/components/LanguagePopover/index.js +1 -0
- package/components/PaperForm/components/Header.d.ts +3 -0
- package/components/PaperForm/index.js +37 -46
- package/components/PaperForm/styles.d.ts +2 -3
- package/components/PaperForm/types.d.ts +1 -0
- package/components/PropertyValue/index.js +35 -24
- package/components/PropertyValue/styles.d.ts +3 -4
- package/components/PropertyValue/types.d.ts +8 -8
- package/components/animate/variants/bounce.d.ts +1 -1
- package/components/animate/variants/container.d.ts +1 -1
- package/components/animate/variants/fade.d.ts +1 -1
- package/components/animate/variants/transition.d.ts +3 -3
- package/components/formatters/BooleanFormatter/index.js +4 -3
- package/components/formatters/BooleanFormatter/types.d.ts +1 -1
- package/components/formatters/PointsFormatter/index.d.ts +3 -0
- package/components/formatters/PointsFormatter/types.d.ts +7 -0
- package/components/formatters/PriceFormatter/index.d.ts +3 -0
- package/components/formatters/PriceFormatter/types.d.ts +5 -0
- package/components/formatters/UncertaintyFormatter/index.d.ts +3 -0
- package/components/formatters/UncertaintyFormatter/types.d.ts +14 -0
- package/components/formatters/index.d.ts +4 -0
- package/components/formatters/index.js +100 -4
- package/components/hook-form/FormProvider/index.js +19 -7
- package/components/hook-form/FormProvider/types.d.ts +4 -1
- package/components/hook-form/RHFAutocompleteAsync/index.js +0 -1
- package/components/hook-form/RHFCheckbox/index.js +34 -29
- package/components/hook-form/RHFCheckbox/styles.d.ts +12 -1
- package/components/hook-form/RHFPeriod/dictionary.d.ts +3 -0
- package/components/hook-form/RHFPeriod/index.d.ts +3 -0
- package/components/hook-form/RHFPeriod/styles.d.ts +6 -0
- package/components/hook-form/RHFPeriod/types.d.ts +29 -0
- package/components/hook-form/RHFUpload/index.js +2 -3
- package/components/hook-form/index.d.ts +4 -0
- package/components/index.d.ts +4 -1
- package/components/mui_extended/Accordion/components/AccordionLabel.d.ts +3 -0
- package/components/mui_extended/Accordion/index.js +68 -8
- package/components/mui_extended/Accordion/styles.d.ts +4 -0
- package/components/mui_extended/Accordion/types.d.ts +4 -0
- package/components/mui_extended/Tab/index.d.ts +2 -1
- package/components/mui_extended/Tab/types.d.ts +5 -0
- package/hooks/index.d.ts +2 -0
- package/hooks/useFormAddEdit/index.d.ts +6 -0
- package/hooks/useFormAddEdit/types.d.ts +8 -0
- package/index.d.ts +1 -1
- package/index.js +289 -19
- package/package.json +3 -3
- package/components/PaperForm/skeleton.d.ts +0 -6
- package/components/hook-form/RHFCheckbox/skeleton.d.ts +0 -2
package/commonjs.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import "react";
|
|
2
|
-
import "react-dom";
|
|
3
2
|
import "prop-types";
|
|
3
|
+
import "react-dom";
|
|
4
4
|
import "clsx";
|
|
5
5
|
var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
|
|
6
6
|
function getDefaultExportFromCjs(x) {
|
|
@@ -1,11 +1,17 @@
|
|
|
1
|
+
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
1
2
|
import { styled } from "@mui/material/styles";
|
|
2
|
-
import { I as IconButton$1 } from "../../../mui_extended/IconButton/index.js";
|
|
3
3
|
import { useEnvironment, useModuleDictionary } from "@m4l/core";
|
|
4
|
-
import
|
|
5
|
-
import
|
|
6
|
-
import
|
|
4
|
+
import "@mui/material/Button";
|
|
5
|
+
import "../../../mui_extended/Button/index.js";
|
|
6
|
+
import "react-hook-form";
|
|
7
|
+
import "react-router-dom";
|
|
7
8
|
import { IconButton, Tooltip, MenuItem, Skeleton, Checkbox } from "@mui/material";
|
|
8
9
|
import { useState, useMemo, forwardRef, useRef, useImperativeHandle, useEffect, useCallback } from "react";
|
|
10
|
+
import "../../../../contexts/ModalContext/index.js";
|
|
11
|
+
import "@mui/lab";
|
|
12
|
+
import { I as IconButton$1 } from "../../../mui_extended/IconButton/index.js";
|
|
13
|
+
import { u as useBase, a as useFilters, O as OriginalDataGridWrapperStyled } from "../../../DataGrid/index.js";
|
|
14
|
+
import { P as Pager } from "../../../mui_extended/Pager/index.js";
|
|
9
15
|
import { D as DataGrid$1 } from "../../../../react-data-grid.js";
|
|
10
16
|
import { u as useModal } from "../../../../hooks/useModal/index.js";
|
|
11
17
|
import { A as ActionCancel } from "../ActionCancel/index.js";
|
|
@@ -13,12 +19,38 @@ import { A as ActionIntro } from "../ActionIntro/index.js";
|
|
|
13
19
|
import { M as MenuPopover } from "../../../mui_extended/MenuPopover/index.js";
|
|
14
20
|
import { I as Icon } from "../../../Icon/index.js";
|
|
15
21
|
import { useResponsiveDesktop } from "@m4l/graphics";
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
+
const WrapperStandarActions = styled("div")(({
|
|
23
|
+
theme
|
|
24
|
+
}) => ({
|
|
25
|
+
paddingTop: theme.spacing(3),
|
|
26
|
+
margin: theme.spacing(0, 1.5),
|
|
27
|
+
display: "flex",
|
|
28
|
+
flexDirection: "row",
|
|
29
|
+
justifyContent: "flex-end",
|
|
30
|
+
"& > button": {
|
|
31
|
+
marginLeft: "10px"
|
|
32
|
+
}
|
|
33
|
+
}));
|
|
34
|
+
const Actions$1 = (props) => {
|
|
35
|
+
const {
|
|
36
|
+
children
|
|
37
|
+
} = props;
|
|
38
|
+
return /* @__PURE__ */ jsx(WrapperStandarActions, {
|
|
39
|
+
id: "WrapperStandarActions",
|
|
40
|
+
children
|
|
41
|
+
});
|
|
42
|
+
};
|
|
43
|
+
function getCommonActionsDictionary() {
|
|
44
|
+
return ["common_actions"];
|
|
45
|
+
}
|
|
46
|
+
const defaultCommonActionsDictionary = {
|
|
47
|
+
common_actions: {
|
|
48
|
+
cancel: "Cancel",
|
|
49
|
+
intro: "Intro",
|
|
50
|
+
confirm_quit_title: "Confirm",
|
|
51
|
+
confirm_quit_msg: "Are your sure exit?"
|
|
52
|
+
}
|
|
53
|
+
};
|
|
22
54
|
const WrapperMenuActions = styled(IconButton)(() => ({}));
|
|
23
55
|
const LabelMemuItem = styled("div")(({
|
|
24
56
|
theme
|
|
@@ -574,26 +606,6 @@ const SKTWrapperColumnsSettings = styled("div")(({ theme }) => ({
|
|
|
574
606
|
minWidth: theme.spacing(3.75),
|
|
575
607
|
height: theme.spacing(3.75)
|
|
576
608
|
}));
|
|
577
|
-
const WrapperStandarActions = styled("div")(({
|
|
578
|
-
theme
|
|
579
|
-
}) => ({
|
|
580
|
-
paddingTop: theme.spacing(3),
|
|
581
|
-
display: "flex",
|
|
582
|
-
flexDirection: "row",
|
|
583
|
-
justifyContent: "flex-end",
|
|
584
|
-
"& > button": {
|
|
585
|
-
marginLeft: "10px"
|
|
586
|
-
}
|
|
587
|
-
}));
|
|
588
|
-
const Actions$1 = (props) => {
|
|
589
|
-
const {
|
|
590
|
-
children
|
|
591
|
-
} = props;
|
|
592
|
-
return /* @__PURE__ */ jsx(WrapperStandarActions, {
|
|
593
|
-
id: "WrapperStandarActions",
|
|
594
|
-
children
|
|
595
|
-
});
|
|
596
|
-
};
|
|
597
609
|
function Settings() {
|
|
598
610
|
const {
|
|
599
611
|
openModal,
|
|
@@ -844,15 +856,4 @@ function Actions(props) {
|
|
|
844
856
|
})]
|
|
845
857
|
});
|
|
846
858
|
}
|
|
847
|
-
function getCommonActionsDictionary() {
|
|
848
|
-
return ["common_actions"];
|
|
849
|
-
}
|
|
850
|
-
const defaultCommonActionsDictionary = {
|
|
851
|
-
common_actions: {
|
|
852
|
-
cancel: "Cancel",
|
|
853
|
-
intro: "Intro",
|
|
854
|
-
confirm_quit_title: "Confirm",
|
|
855
|
-
confirm_quit_msg: "Are your sure exit?"
|
|
856
|
-
}
|
|
857
|
-
};
|
|
858
859
|
export { ActionsColumn as A, LabelMemuItem as L, MenuActions as M, PagerActions as P, Actions as a, Actions$1 as b, defaultCommonActionsDictionary as d, getCommonActionsDictionary as g };
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
export { columnUncertaintyFormatter } from './columnUncertaintyFormatter';
|
|
2
|
+
export { columnPointsFormatter } from './columnPointsFormatter';
|
|
3
|
+
export { columnNestedValueFormatter } from './columnNestedValueFormatter';
|
|
4
|
+
export type { ColumnUncertaintyFormatterProps } from './columnUncertaintyFormatter/types';
|
|
@@ -1,8 +1,10 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import { Maybe } from '@m4l/core';
|
|
3
|
-
import type { Column, RowsChangeData } from 'react-data-grid';
|
|
3
|
+
import type { Column, RowsChangeData, FormatterProps } from 'react-data-grid';
|
|
4
4
|
import type { MenuAction } from '../mui_extended/MenuActions/types';
|
|
5
5
|
import { ActionsProps } from './components/Actions/types';
|
|
6
|
+
export declare type GridFormatterPropss<T, SR> = FormatterProps<T, SR>;
|
|
7
|
+
export type { columnUncertaintyFormatter, columnPointsFormatter, columnNestedValueFormatter, } from './formatters';
|
|
6
8
|
export declare type ColumnType = 'text' | 'date' | 'number' | 'boolean' | 'custom';
|
|
7
9
|
export declare type ColumnAlign = 'left' | 'center' | 'right';
|
|
8
10
|
export declare interface GridRow {
|
|
@@ -13,6 +13,14 @@ import "../hook-form/RHFCheckbox/index.js";
|
|
|
13
13
|
import { R as RHFDateTime } from "../hook-form/RHFDateTime/index.js";
|
|
14
14
|
import "@mui/x-date-pickers";
|
|
15
15
|
import { R as RHFTextField } from "../hook-form/RHFTextField/index.js";
|
|
16
|
+
import "../../index.js";
|
|
17
|
+
import { I as Icon } from "../Icon/index.js";
|
|
18
|
+
import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
|
|
19
|
+
import "@mui/material/Button";
|
|
20
|
+
import { F as FilterButton } from "../mui_extended/Button/index.js";
|
|
21
|
+
import "react-router-dom";
|
|
22
|
+
import "../../contexts/ModalContext/index.js";
|
|
23
|
+
import "@mui/lab";
|
|
16
24
|
import "../../lodash.js";
|
|
17
25
|
import "react-dropzone";
|
|
18
26
|
import "../../react-lazy-load-image-component.js";
|
|
@@ -20,16 +28,9 @@ import "../Image/index.js";
|
|
|
20
28
|
import "../hook-form/RHFUpload/index.js";
|
|
21
29
|
import { I as IconButton } from "../mui_extended/IconButton/index.js";
|
|
22
30
|
import "simplebar/dist/simplebar.min.css";
|
|
23
|
-
import { F as FilterButton } from "../mui_extended/Button/index.js";
|
|
24
|
-
import { L as LabelMemuItem, b as Actions, g as getCommonActionsDictionary } from "../CommonActions/components/Actions/index.js";
|
|
25
31
|
import { M as MenuPopover } from "../mui_extended/MenuPopover/index.js";
|
|
26
|
-
import { I as Icon } from "../Icon/index.js";
|
|
27
32
|
import { A as ActionCancel } from "../CommonActions/components/ActionCancel/index.js";
|
|
28
33
|
import { A as ActionIntro } from "../CommonActions/components/ActionIntro/index.js";
|
|
29
|
-
import "react-router-dom";
|
|
30
|
-
import "@mui/material/Button";
|
|
31
|
-
import "../../contexts/ModalContext/index.js";
|
|
32
|
-
import "@mui/lab";
|
|
33
34
|
import { useResponsiveDesktop } from "@m4l/graphics";
|
|
34
35
|
const WrapperApplyedFilters = styled("div")(({
|
|
35
36
|
theme
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
/// <reference types="react" />
|
|
2
|
+
export declare const Wrapper: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLParagraphElement>, HTMLParagraphElement>, {}>;
|
|
@@ -6,6 +6,7 @@ import { useModuleSkeleton } from "@m4l/core";
|
|
|
6
6
|
import "../Icon/index.js";
|
|
7
7
|
import "@mui/material/styles";
|
|
8
8
|
import { jsx, jsxs, Fragment } from "react/jsx-runtime";
|
|
9
|
+
import "../mui_extended/Accordion/index.js";
|
|
9
10
|
import "../mui_extended/Avatar/index.js";
|
|
10
11
|
import "react-router-dom";
|
|
11
12
|
import "@mui/material/Button";
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import { Skeleton } from "@mui/material";
|
|
2
1
|
import { styled } from "@mui/material/styles";
|
|
3
|
-
import { jsxs, Fragment, jsx } from "react/jsx-runtime";
|
|
4
|
-
import { I as Icon } from "../Icon/index.js";
|
|
5
2
|
import { useModuleSkeleton } from "@m4l/core";
|
|
3
|
+
import { Skeleton } from "@mui/material";
|
|
4
|
+
import { I as Icon } from "../Icon/index.js";
|
|
5
|
+
import { jsxs, jsx } from "react/jsx-runtime";
|
|
6
6
|
const WrapperPaper = styled("div")(({
|
|
7
7
|
theme
|
|
8
8
|
}) => ({
|
|
@@ -17,7 +17,7 @@ const WrapperPaper = styled("div")(({
|
|
|
17
17
|
backgroundColor: theme.palette.background.paper
|
|
18
18
|
}
|
|
19
19
|
}));
|
|
20
|
-
const
|
|
20
|
+
const HeaderContainer = styled("div")(({
|
|
21
21
|
theme
|
|
22
22
|
}) => ({
|
|
23
23
|
display: "flex",
|
|
@@ -51,7 +51,7 @@ const Content = styled("div")(() => ({
|
|
|
51
51
|
flexGrow: 1,
|
|
52
52
|
position: "relative"
|
|
53
53
|
}));
|
|
54
|
-
const
|
|
54
|
+
const SkTPaperFormHeader = styled("div")(({
|
|
55
55
|
theme
|
|
56
56
|
}) => ({
|
|
57
57
|
width: "auto",
|
|
@@ -62,58 +62,49 @@ const SkPaperFormHeader = styled("div")(({
|
|
|
62
62
|
borderBottom: `1px solid ${theme.palette.divider}`,
|
|
63
63
|
marginBottom: `${theme.spacing(3)}`
|
|
64
64
|
}));
|
|
65
|
-
const
|
|
66
|
-
display: "flex",
|
|
67
|
-
flexDirection: "column",
|
|
68
|
-
flexGrow: "1"
|
|
69
|
-
}));
|
|
70
|
-
function SKTPaperForm(prop) {
|
|
65
|
+
const Header = (props) => {
|
|
71
66
|
const {
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
}), /* @__PURE__ */ jsx(PaperFormBoddy, {
|
|
86
|
-
children
|
|
67
|
+
urlIcon,
|
|
68
|
+
title
|
|
69
|
+
} = props;
|
|
70
|
+
const isSkeleton = useModuleSkeleton();
|
|
71
|
+
return isSkeleton ? /* @__PURE__ */ jsxs(SkTPaperFormHeader, {
|
|
72
|
+
children: [/* @__PURE__ */ jsx(Skeleton, {
|
|
73
|
+
variant: "circular",
|
|
74
|
+
width: 16,
|
|
75
|
+
height: 16
|
|
76
|
+
}), /* @__PURE__ */ jsx(Skeleton, {
|
|
77
|
+
variant: "text",
|
|
78
|
+
width: 68,
|
|
79
|
+
height: 14
|
|
87
80
|
})]
|
|
81
|
+
}) : /* @__PURE__ */ jsx(HeaderContainer, {
|
|
82
|
+
id: "Header",
|
|
83
|
+
children: /* @__PURE__ */ jsxs(IconTitleContainer, {
|
|
84
|
+
className: "draggable-dialog-title",
|
|
85
|
+
children: [/* @__PURE__ */ jsx(IconHeader, {
|
|
86
|
+
children: /* @__PURE__ */ jsx(Icon, {
|
|
87
|
+
src: urlIcon
|
|
88
|
+
})
|
|
89
|
+
}), title]
|
|
90
|
+
})
|
|
88
91
|
});
|
|
89
|
-
}
|
|
92
|
+
};
|
|
90
93
|
function PaperForm(props) {
|
|
91
94
|
const {
|
|
92
95
|
urlIcon,
|
|
93
96
|
title,
|
|
94
97
|
children
|
|
95
98
|
} = props;
|
|
96
|
-
|
|
97
|
-
return /* @__PURE__ */ jsx(WrapperPaper, {
|
|
99
|
+
return /* @__PURE__ */ jsxs(WrapperPaper, {
|
|
98
100
|
id: "ContainerPropertyValue",
|
|
99
|
-
children:
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
children: [/* @__PURE__ */ jsx(IconHeader, {
|
|
105
|
-
children: /* @__PURE__ */ jsx(Icon, {
|
|
106
|
-
src: urlIcon
|
|
107
|
-
})
|
|
108
|
-
}), title]
|
|
109
|
-
})
|
|
110
|
-
}), /* @__PURE__ */ jsx(Content, {
|
|
111
|
-
id: "Content",
|
|
112
|
-
children
|
|
113
|
-
})]
|
|
114
|
-
}) : /* @__PURE__ */ jsx(SKTPaperForm, {
|
|
101
|
+
children: [/* @__PURE__ */ jsx(Header, {
|
|
102
|
+
urlIcon,
|
|
103
|
+
title
|
|
104
|
+
}), /* @__PURE__ */ jsx(Content, {
|
|
105
|
+
id: "Content",
|
|
115
106
|
children
|
|
116
|
-
})
|
|
107
|
+
})]
|
|
117
108
|
});
|
|
118
109
|
}
|
|
119
110
|
export { PaperForm as P };
|
|
@@ -1,8 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
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
|
|
3
|
+
export declare const HeaderContainer: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
4
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
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
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
|
|
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>, {}>;
|
|
7
|
+
export declare const SkTPaperFormHeader: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme>, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
@@ -6,50 +6,58 @@ import { useModuleSkeleton } from "@m4l/core";
|
|
|
6
6
|
const WrapperPropertyValue = styled("div", {
|
|
7
7
|
shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
|
|
8
8
|
})(({
|
|
9
|
-
|
|
9
|
+
propertyWidth,
|
|
10
10
|
isForm,
|
|
11
11
|
theme
|
|
12
12
|
}) => ({
|
|
13
|
-
display: "
|
|
13
|
+
display: "grid",
|
|
14
|
+
gridTemplateColumns: "1fr",
|
|
14
15
|
alignItems: "flex-start",
|
|
15
16
|
width: "100%",
|
|
16
17
|
padding: `${theme.spacing(1)} ${theme.spacing(2)}`,
|
|
17
|
-
maxHeight: propertyHeight || "auto",
|
|
18
18
|
":hover": {
|
|
19
19
|
backgroundColor: isForm ? "unset" : theme.palette.grid?.rowHover
|
|
20
20
|
},
|
|
21
21
|
borderBottom: isForm ? "none" : `1px solid ${theme.palette.divider}`,
|
|
22
22
|
flexDirection: "column",
|
|
23
23
|
[theme.breakpoints.up("sm")]: {
|
|
24
|
-
|
|
24
|
+
gridTemplateColumns: propertyWidth ? `${propertyWidth}px 1fr` : "150px 1fr",
|
|
25
|
+
gap: theme.spacing(2),
|
|
25
26
|
alignItems: "center"
|
|
26
27
|
}
|
|
27
28
|
}));
|
|
28
|
-
const Property = styled("
|
|
29
|
+
const Property = styled("div", {
|
|
29
30
|
shouldForwardProp: (prop) => prop !== "propertyWidth" && prop !== "propertyHeight" && prop !== "isForm"
|
|
30
31
|
})(({
|
|
31
32
|
propertyWidth,
|
|
32
33
|
isForm,
|
|
33
34
|
theme
|
|
34
35
|
}) => ({
|
|
35
|
-
width:
|
|
36
|
-
minWidth:
|
|
36
|
+
width: "100%",
|
|
37
|
+
minWidth: "100%",
|
|
37
38
|
...theme.typography.subtitle2,
|
|
38
39
|
color: theme.palette.text.primary,
|
|
40
|
+
height: "100%",
|
|
41
|
+
display: "flex",
|
|
42
|
+
alignItems: "center",
|
|
43
|
+
justifyContent: "flex-start",
|
|
39
44
|
position: "relative",
|
|
40
45
|
[theme.breakpoints.up("sm")]: {
|
|
41
46
|
borderRight: isForm ? "none" : `1px solid ${theme.palette.divider}`,
|
|
42
47
|
paddingRight: theme.spacing(2),
|
|
43
|
-
textAlign: "right"
|
|
48
|
+
textAlign: "right",
|
|
49
|
+
width: propertyWidth || "150px",
|
|
50
|
+
minWidth: propertyWidth || "150px",
|
|
51
|
+
justifyContent: "flex-end"
|
|
44
52
|
},
|
|
45
53
|
overflow: "hidden",
|
|
46
54
|
overflowWrap: "break-word"
|
|
47
55
|
}));
|
|
48
56
|
const Value = styled("div", {
|
|
49
|
-
shouldForwardProp: (prop) => prop !== "
|
|
57
|
+
shouldForwardProp: (prop) => prop !== "valueWidth" && prop !== "valueHeight" && prop !== "withGrid"
|
|
50
58
|
})(({
|
|
51
|
-
|
|
52
|
-
|
|
59
|
+
valueWidth,
|
|
60
|
+
valueHeight,
|
|
53
61
|
theme
|
|
54
62
|
}) => ({
|
|
55
63
|
flexGrow: "1",
|
|
@@ -57,11 +65,12 @@ const Value = styled("div", {
|
|
|
57
65
|
color: theme.palette.text.secondary,
|
|
58
66
|
position: "relative",
|
|
59
67
|
padding: "1px",
|
|
60
|
-
|
|
61
|
-
|
|
68
|
+
maxWidth: `${valueWidth}%`,
|
|
69
|
+
width: `${valueWidth}%`,
|
|
70
|
+
height: valueHeight,
|
|
62
71
|
marginTop: theme.spacing(1),
|
|
63
72
|
[theme.breakpoints.up("sm")]: {
|
|
64
|
-
marginLeft: theme.spacing(
|
|
73
|
+
marginLeft: theme.spacing(0),
|
|
65
74
|
marginTop: "0px"
|
|
66
75
|
},
|
|
67
76
|
overflow: "hidden",
|
|
@@ -84,8 +93,8 @@ function PropertyValue(props) {
|
|
|
84
93
|
const {
|
|
85
94
|
property,
|
|
86
95
|
value,
|
|
87
|
-
propertyWidth,
|
|
88
|
-
|
|
96
|
+
propertyWidth = 200,
|
|
97
|
+
valueHeight = "auto",
|
|
89
98
|
valueWidth = "100",
|
|
90
99
|
isForm
|
|
91
100
|
} = props;
|
|
@@ -103,28 +112,30 @@ function PropertyValue(props) {
|
|
|
103
112
|
return "100";
|
|
104
113
|
}
|
|
105
114
|
if (valueWidth === "25" && isDesktop || valueWidth === "12.5" && isDesktop) {
|
|
106
|
-
return
|
|
107
|
-
}
|
|
108
|
-
|
|
115
|
+
return `${valueWidth}`;
|
|
116
|
+
}
|
|
117
|
+
if (valueWidth === "25" && !isDesktop) {
|
|
118
|
+
return "50";
|
|
119
|
+
}
|
|
120
|
+
if (valueWidth === "12.5" && !isDesktop) {
|
|
121
|
+
return "25";
|
|
109
122
|
}
|
|
110
123
|
return "100";
|
|
111
124
|
};
|
|
112
125
|
const valueW = getValueW();
|
|
113
126
|
return /* @__PURE__ */ jsxs(WrapperPropertyValue, {
|
|
114
|
-
id: "
|
|
127
|
+
id: "WrapperPropertyValue",
|
|
115
128
|
isForm,
|
|
116
129
|
propertyWidth,
|
|
117
|
-
propertyHeight,
|
|
118
130
|
children: [/* @__PURE__ */ jsx(Property, {
|
|
119
131
|
id: "Property",
|
|
120
132
|
isForm,
|
|
121
133
|
propertyWidth,
|
|
122
|
-
propertyHeight,
|
|
123
134
|
children: isSkeleton ? /* @__PURE__ */ jsx(SKTProperty, {}) : property
|
|
124
135
|
}), /* @__PURE__ */ jsx(Value, {
|
|
125
136
|
id: "Value",
|
|
126
|
-
|
|
127
|
-
|
|
137
|
+
valueWidth: valueW,
|
|
138
|
+
valueHeight,
|
|
128
139
|
children: value
|
|
129
140
|
})]
|
|
130
141
|
});
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
|
-
import
|
|
3
|
-
export declare const
|
|
4
|
-
export declare const
|
|
5
|
-
export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & ValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
2
|
+
export declare const WrapperPropertyValue: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("./types").PropertyProps & Pick<import("./types").PropertyValueProps, "isForm">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
3
|
+
export declare const Property: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("./types").PropertyProps & Pick<import("./types").PropertyValueProps, "isForm">, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
4
|
+
export declare const Value: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material/styles").Theme> & import("./types").ValueProps, import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {}>;
|
|
6
5
|
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>, {}>;
|
|
@@ -1,17 +1,17 @@
|
|
|
1
1
|
import type { ReactNode } from 'react';
|
|
2
2
|
export interface PropertyProps {
|
|
3
3
|
propertyWidth?: number;
|
|
4
|
-
propertyHeight?: number | string;
|
|
5
|
-
isForm?: boolean;
|
|
6
4
|
}
|
|
7
5
|
export interface ValueProps {
|
|
8
|
-
|
|
9
|
-
|
|
6
|
+
valueHeight?: number | string;
|
|
7
|
+
valueWidth?: valueWidthType;
|
|
10
8
|
}
|
|
11
|
-
export
|
|
9
|
+
export declare type valueWidthType = '100' | '75' | '50' | '25' | '12.5';
|
|
10
|
+
export interface PropertyValueProps extends PropertyProps, ValueProps {
|
|
12
11
|
property: string;
|
|
13
12
|
value: number | string | ReactNode;
|
|
13
|
+
isForm?: boolean;
|
|
14
14
|
}
|
|
15
|
-
export
|
|
16
|
-
|
|
17
|
-
|
|
15
|
+
export declare type WrapperProps = PropertyProps & Pick<PropertyValueProps, 'isForm'>;
|
|
16
|
+
export declare type WrapperPropertyProps = WrapperProps;
|
|
17
|
+
export declare type WrapperValueProps = ValueProps;
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import { TranHoverType, TranEnterType, TranExitType } from '../type';
|
|
2
|
-
export declare const varTranHover: (props?: TranHoverType
|
|
2
|
+
export declare const varTranHover: (props?: TranHoverType) => {
|
|
3
3
|
duration: number;
|
|
4
4
|
ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
|
|
5
5
|
};
|
|
6
|
-
export declare const varTranEnter: (props?: TranEnterType
|
|
6
|
+
export declare const varTranEnter: (props?: TranEnterType) => {
|
|
7
7
|
duration: number;
|
|
8
8
|
ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
|
|
9
9
|
};
|
|
10
|
-
export declare const varTranExit: (props?: TranExitType
|
|
10
|
+
export declare const varTranExit: (props?: TranExitType) => {
|
|
11
11
|
duration: number;
|
|
12
12
|
ease: "linear" | number[] | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
|
|
13
13
|
};
|
|
@@ -11,18 +11,19 @@ function BooleanFormatter(props) {
|
|
|
11
11
|
const {
|
|
12
12
|
getLabel
|
|
13
13
|
} = useModuleDictionary();
|
|
14
|
+
const final_value = value ?? false;
|
|
14
15
|
if (presentationType === "string_yes_no") {
|
|
15
16
|
return /* @__PURE__ */ jsx(Component, {
|
|
16
|
-
children:
|
|
17
|
+
children: final_value ? getLabel("formatters.boolean_yes") : getLabel("formatters.boolean_no")
|
|
17
18
|
});
|
|
18
19
|
}
|
|
19
20
|
if (presentationType === "string_true_false") {
|
|
20
21
|
return /* @__PURE__ */ jsx(Component, {
|
|
21
|
-
children:
|
|
22
|
+
children: final_value ? getLabel("formatters.boolean_true") : getLabel("formatters.boolean_false")
|
|
22
23
|
});
|
|
23
24
|
}
|
|
24
25
|
return /* @__PURE__ */ jsx(Checkbox, {
|
|
25
|
-
checked:
|
|
26
|
+
checked: final_value,
|
|
26
27
|
size: "small",
|
|
27
28
|
readOnly: true,
|
|
28
29
|
disableFocusRipple: true,
|