@portnet/ui 1.1.5 → 1.1.6
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.
|
@@ -8,41 +8,128 @@ exports.default = void 0;
|
|
|
8
8
|
require("core-js/modules/web.dom-collections.iterator.js");
|
|
9
9
|
var _Stack = _interopRequireDefault(require("@mui/material/Stack"));
|
|
10
10
|
var _dayjs = _interopRequireDefault(require("dayjs"));
|
|
11
|
+
var _utc = _interopRequireDefault(require("dayjs/plugin/utc"));
|
|
11
12
|
var _formik = require("formik");
|
|
12
13
|
var _react = _interopRequireWildcard(require("react"));
|
|
13
|
-
var
|
|
14
|
-
var
|
|
15
|
-
var
|
|
14
|
+
var _material = require("@mui/material");
|
|
15
|
+
var _styles = require("@mui/material/styles");
|
|
16
|
+
var _PuiIcon = _interopRequireDefault(require("../others/PuiIcon"));
|
|
17
|
+
var _PuiIndication = _interopRequireDefault(require("../typography/PuiIndication"));
|
|
16
18
|
var _jsxRuntime = require("react/jsx-runtime");
|
|
17
19
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
18
20
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
19
21
|
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
|
|
20
22
|
_dayjs.default.extend(_utc.default);
|
|
21
|
-
|
|
22
|
-
|
|
23
|
+
const palette = {
|
|
24
|
+
inherit: "inherit",
|
|
25
|
+
primary: "#232f66",
|
|
26
|
+
secondary: "#e7e7e7",
|
|
27
|
+
error: "#d32f2f",
|
|
28
|
+
warning: "#FD9727",
|
|
29
|
+
success: "#48AC24",
|
|
30
|
+
info: "#2278CF",
|
|
31
|
+
white: "#FFF",
|
|
32
|
+
dark: "#000",
|
|
33
|
+
gray: {
|
|
34
|
+
darker: "#505050",
|
|
35
|
+
dark: "#b6b6b6",
|
|
36
|
+
light: "#F1F1F1"
|
|
37
|
+
},
|
|
38
|
+
background: {
|
|
39
|
+
required: "#FFFBE3",
|
|
40
|
+
error: "#FFE5E5"
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const StyledMuiTextField = (0, _styles.styled)(_material.TextField)(_ref => {
|
|
44
|
+
let {
|
|
45
|
+
theme,
|
|
46
|
+
required
|
|
47
|
+
} = _ref;
|
|
48
|
+
return {
|
|
49
|
+
"&.MuiFormControl-root": {
|
|
50
|
+
"&.required .MuiInputBase-root": {
|
|
51
|
+
backgroundColor: required ? palette.background.required : "white"
|
|
52
|
+
},
|
|
53
|
+
"& .MuiFormLabel-root": {
|
|
54
|
+
zIndex: 0,
|
|
55
|
+
lineSpacing: "-0.03em",
|
|
56
|
+
position: "initial",
|
|
57
|
+
transform: "none",
|
|
58
|
+
fontSize: "0.8rem",
|
|
59
|
+
fontWeight: "600",
|
|
60
|
+
marginBottom: "4px",
|
|
61
|
+
color: palette.gray.darker,
|
|
62
|
+
"&.Mui-focused ": {
|
|
63
|
+
color: palette.primary
|
|
64
|
+
},
|
|
65
|
+
"&.Mui-disabled": {
|
|
66
|
+
color: palette.gray.darker
|
|
67
|
+
},
|
|
68
|
+
"&.Mui-error": {
|
|
69
|
+
color: palette.error
|
|
70
|
+
}
|
|
71
|
+
},
|
|
72
|
+
"& .MuiInputBase-root": {
|
|
73
|
+
backgroundColor: required ? palette.background.required : "white",
|
|
74
|
+
border: "2px solid ".concat(palette.gray.dark),
|
|
75
|
+
borderRadius: "5px",
|
|
76
|
+
"&.MuiInputBase-multiline": {
|
|
77
|
+
padding: "8px 0"
|
|
78
|
+
},
|
|
79
|
+
"&.Mui-focused ": {
|
|
80
|
+
border: "2px solid ".concat(palette.primary)
|
|
81
|
+
},
|
|
82
|
+
"&.Mui-error ": {
|
|
83
|
+
border: "2px solid ".concat(palette.error),
|
|
84
|
+
backgroundColor: palette.background.error
|
|
85
|
+
},
|
|
86
|
+
"&.Mui-disabled ": {
|
|
87
|
+
"& input": {
|
|
88
|
+
color: "".concat(palette.gray.darker),
|
|
89
|
+
WebkitTextFillColor: "".concat(palette.gray.darker)
|
|
90
|
+
},
|
|
91
|
+
backgroundColor: "".concat(palette.secondary)
|
|
92
|
+
},
|
|
93
|
+
"& .MuiInputBase-input": {
|
|
94
|
+
lineHeight: "1",
|
|
95
|
+
padding: "1px 6px",
|
|
96
|
+
fontSize: "0.7rem"
|
|
97
|
+
}
|
|
98
|
+
},
|
|
99
|
+
"& .MuiFormHelperText-root": {
|
|
100
|
+
fontWeight: "bold",
|
|
101
|
+
fontSize: ".7rem",
|
|
102
|
+
color: palette.gray.darker
|
|
103
|
+
},
|
|
104
|
+
"& fieldset": {
|
|
105
|
+
display: "none"
|
|
106
|
+
}
|
|
107
|
+
}
|
|
108
|
+
};
|
|
109
|
+
});
|
|
110
|
+
const DateTimePickerField = _ref2 => {
|
|
23
111
|
let {
|
|
24
112
|
label,
|
|
25
113
|
name,
|
|
26
114
|
value: propValue,
|
|
27
115
|
onChange,
|
|
28
|
-
timezoneOffset = "Africa/Casablanca",
|
|
29
116
|
required = true,
|
|
30
117
|
error = false,
|
|
31
118
|
helperText = null,
|
|
32
119
|
fullWidth = true
|
|
33
|
-
} =
|
|
120
|
+
} = _ref2;
|
|
34
121
|
const [field,, helpers] = (0, _formik.useField)(name);
|
|
35
122
|
const [selectedDateTime, setSelectedDateTime] = (0, _react.useState)("");
|
|
36
123
|
(0, _react.useEffect)(() => {
|
|
37
124
|
const formatValue = value => {
|
|
38
125
|
if (!value) return "";
|
|
39
|
-
const parsedDate =
|
|
126
|
+
const parsedDate = _dayjs.default.utc(value); // Parse and maintain in UTC
|
|
40
127
|
if (!parsedDate.isValid()) return "";
|
|
41
128
|
return parsedDate.format("YYYY-MM-DDTHH:mm");
|
|
42
129
|
};
|
|
43
130
|
const formattedValue = formatValue(propValue || (field === null || field === void 0 ? void 0 : field.value));
|
|
44
131
|
setSelectedDateTime(formattedValue);
|
|
45
|
-
}, [propValue, field === null || field === void 0 ? void 0 : field.value
|
|
132
|
+
}, [propValue, field === null || field === void 0 ? void 0 : field.value]);
|
|
46
133
|
const handleDateTimeChange = event => {
|
|
47
134
|
const newValue = event.target.value;
|
|
48
135
|
if (!newValue) {
|
|
@@ -51,19 +138,20 @@ const DateTimePickerField = _ref => {
|
|
|
51
138
|
if (onChange) onChange("");
|
|
52
139
|
return;
|
|
53
140
|
}
|
|
54
|
-
|
|
55
|
-
|
|
141
|
+
|
|
142
|
+
// Parse as UTC and send the correct UTC value
|
|
143
|
+
const parsedDate = _dayjs.default.utc(newValue);
|
|
144
|
+
const formattedValue = parsedDate.format("YYYY-MM-DDTHH:mm:ss.SSS[Z]"); // Ensures Z is appended to mark UTC
|
|
145
|
+
|
|
56
146
|
setSelectedDateTime(newValue);
|
|
57
147
|
helpers.setValue(formattedValue);
|
|
58
148
|
if (onChange) onChange(formattedValue);
|
|
59
149
|
};
|
|
60
|
-
console.log("error : ", error);
|
|
61
|
-
console.log("helperText : ", helperText);
|
|
62
150
|
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Stack.default, {
|
|
63
151
|
component: "form",
|
|
64
152
|
noValidate: true,
|
|
65
153
|
spacing: 3,
|
|
66
|
-
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
154
|
+
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledMuiTextField, {
|
|
67
155
|
id: "datetime-local",
|
|
68
156
|
label: label,
|
|
69
157
|
type: "datetime-local",
|
|
@@ -72,7 +160,14 @@ const DateTimePickerField = _ref => {
|
|
|
72
160
|
fullWidth: fullWidth,
|
|
73
161
|
required: required,
|
|
74
162
|
error: error,
|
|
75
|
-
helperText: helperText,
|
|
163
|
+
helperText: error && helperText ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIndication.default, {
|
|
164
|
+
icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_PuiIcon.default, {
|
|
165
|
+
type: "danger"
|
|
166
|
+
}),
|
|
167
|
+
color: "error",
|
|
168
|
+
size: "small",
|
|
169
|
+
children: helperText
|
|
170
|
+
}) : helperText,
|
|
76
171
|
InputLabelProps: {
|
|
77
172
|
shrink: true
|
|
78
173
|
}
|