@comet/admin 9.0.0-beta.4 → 9.0.0-beta.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.
- package/lib/common/ClearInputAdornment.d.ts.map +1 -1
- package/lib/common/ClearInputAdornment.js +6 -2
- package/lib/common/DeleteDialog.d.ts +1 -0
- package/lib/common/DeleteDialog.d.ts.map +1 -1
- package/lib/common/DeleteDialog.js +8 -1
- package/lib/common/buttons/clearinput/ClearInputButton.js +1 -1
- package/lib/dataGrid/excelExport/generateExcelFile.d.ts.map +1 -1
- package/lib/dataGrid/excelExport/generateExcelFile.js +23 -1
- package/lib/dateTime/timePicker/TimePicker.d.ts.map +1 -1
- package/lib/dateTime/timePicker/TimePicker.js +2 -17
- package/lib/dateTime/timeRangePicker/TimeRangePicker.d.ts +71 -0
- package/lib/dateTime/timeRangePicker/TimeRangePicker.d.ts.map +1 -0
- package/lib/dateTime/timeRangePicker/TimeRangePicker.js +191 -0
- package/lib/dateTime/timeRangePickerField/TimeRangePickerField.d.ts +13 -0
- package/lib/dateTime/timeRangePickerField/TimeRangePickerField.d.ts.map +1 -0
- package/lib/dateTime/timeRangePickerField/TimeRangePickerField.js +31 -0
- package/lib/dateTime/utils.d.ts +6 -0
- package/lib/dateTime/utils.d.ts.map +1 -1
- package/lib/dateTime/utils.js +19 -1
- package/lib/{EditDialog.d.ts → editDialog/EditDialog.d.ts} +1 -1
- package/lib/editDialog/EditDialog.d.ts.map +1 -0
- package/lib/{EditDialog.js → editDialog/EditDialog.js} +5 -5
- package/lib/editDialog/EditDialogApiContext.d.ts.map +1 -0
- package/lib/form/FinalFormNumberInput.d.ts.map +1 -1
- package/lib/form/FinalFormNumberInput.js +2 -3
- package/lib/helpers/useTopOffset.js +1 -1
- package/lib/index.d.ts +4 -2
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +4 -2
- package/lib/theme/componentsTheme/MuiDataGrid.js +1 -1
- package/package.json +26 -19
- package/lib/EditDialog.d.ts.map +0 -1
- package/lib/EditDialogApiContext.d.ts.map +0 -1
- package/lib/alert/__stories__/Alert.stories.js +0 -152
- package/lib/common/__stories__/Tooltip.stories.js +0 -404
- package/lib/common/buttons/__stories__/Button.stories.js +0 -445
- package/lib/common/buttons/delete/__stories__/DeleteButton.stories.js +0 -8
- package/lib/dateTime/datePicker/__stories__/DatePicker.stories.js +0 -214
- package/lib/dateTime/datePickerField/__stories__/DatePickerField.stories.js +0 -220
- package/lib/dateTime/dateRangePicker/__stories__/DateRangePicker.stories.js +0 -238
- package/lib/dateTime/dateRangePickerField/__stories__/DateRangePickerField.stories.js +0 -224
- package/lib/dateTime/dateTimePicker/__stories__/DateTimePicker.stories.js +0 -214
- package/lib/dateTime/dateTimePickerField/__stories__/DateTimePickerField.stories.js +0 -220
- package/lib/dateTime/dateTimeRangePicker/__stories__/DateTimeRangePicker.stories.js +0 -238
- package/lib/dateTime/dateTimeRangePickerField/__stories__/DateTimeRangePickerField.stories.js +0 -223
- package/lib/dateTime/timePicker/__stories__/TimePicker.stories.js +0 -219
- package/lib/dateTime/timePickerField/__stories__/TimePickerField.stories.js +0 -229
- package/lib/section/__stories__/SectionHeadline.stories.js +0 -71
- package/lib/stack/__stories__/RouterTabsNestedStack.stories.js +0 -51
- package/lib/stack/__stories__/Stack.stories.js +0 -14
- package/lib/stack/__stories__/StackBackButton.stories.js +0 -50
- package/lib/stack/__stories__/StackBreadcrumbs.stories.js +0 -139
- package/lib/stack/__stories__/StackBreadcrumbsTabs.stories.js +0 -47
- package/lib/stack/__stories__/StackCustomSeparator.stories.js +0 -47
- package/lib/stack/__stories__/StackLink.stories.js +0 -41
- package/lib/stack/__stories__/StackNested.stories.js +0 -58
- package/lib/stack/__stories__/StackNestedOnInitialPage.stories.js +0 -78
- package/lib/stack/__stories__/StackNestedOneStack.stories.js +0 -90
- package/lib/stack/__stories__/StackPageTitle.stories.js +0 -121
- package/lib/stack/__stories__/StackReactNodeTitle.stories.js +0 -54
- package/lib/stack/__stories__/StackRefApi.stories.js +0 -56
- package/lib/stack/__stories__/StackTableFormQueryAtStack.stories.js +0 -155
- package/lib/stack/__stories__/StackTableFormQueryInTable.stories.js +0 -160
- package/lib/stack/__stories__/StackUrl.stories.js +0 -66
- package/lib/translator/__stories__/ContentTranslation.stories.js +0 -104
- /package/lib/{EditDialogApiContext.d.ts → editDialog/EditDialogApiContext.d.ts} +0 -0
- /package/lib/{EditDialogApiContext.js → editDialog/EditDialogApiContext.js} +0 -0
|
@@ -1,214 +0,0 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
5
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
6
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
8
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
10
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
11
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
13
|
-
import { Edit } from "@comet/admin-icons";
|
|
14
|
-
import { Box, Typography } from "@mui/material";
|
|
15
|
-
import { useState } from "react";
|
|
16
|
-
import { DateTimePicker } from "../DateTimePicker";
|
|
17
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
|
-
var config = {
|
|
19
|
-
component: DateTimePicker,
|
|
20
|
-
title: "components/dateTime/DateTimePicker"
|
|
21
|
-
};
|
|
22
|
-
export default config;
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* The basic DateTimePicker component allows users to select both a date and time from a calendar and time picker interface.
|
|
26
|
-
*
|
|
27
|
-
* Use this for date time input fields where users need to pick a specific date and time.
|
|
28
|
-
*/
|
|
29
|
-
export var Default = {
|
|
30
|
-
render: function render(args) {
|
|
31
|
-
var _useState = useState(new Date(2024, 0, 15, 14, 30)),
|
|
32
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
33
|
-
value = _useState2[0],
|
|
34
|
-
setValue = _useState2[1];
|
|
35
|
-
return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
36
|
-
value: value,
|
|
37
|
-
onChange: setValue
|
|
38
|
-
}));
|
|
39
|
-
}
|
|
40
|
-
};
|
|
41
|
-
export var FullWidth = {
|
|
42
|
-
render: function render(args) {
|
|
43
|
-
var _useState3 = useState(new Date(2024, 0, 15, 14, 30)),
|
|
44
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
45
|
-
value = _useState4[0],
|
|
46
|
-
setValue = _useState4[1];
|
|
47
|
-
return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
48
|
-
fullWidth: true,
|
|
49
|
-
value: value,
|
|
50
|
-
onChange: setValue
|
|
51
|
-
}));
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* DateTimePicker in a required state.
|
|
57
|
-
*
|
|
58
|
-
* Use this when:
|
|
59
|
-
* - The date and time selection is mandatory
|
|
60
|
-
* - Form validation requires a date time value
|
|
61
|
-
* - Users must select a date and time to proceed
|
|
62
|
-
*
|
|
63
|
-
* Note: The clear button is automatically hidden when the field is required.
|
|
64
|
-
*/
|
|
65
|
-
export var Required = {
|
|
66
|
-
render: function render(args) {
|
|
67
|
-
var _useState5 = useState(new Date(2024, 0, 15, 14, 30)),
|
|
68
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
69
|
-
value = _useState6[0],
|
|
70
|
-
setValue = _useState6[1];
|
|
71
|
-
return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
72
|
-
required: true,
|
|
73
|
-
value: value,
|
|
74
|
-
onChange: setValue
|
|
75
|
-
}));
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
/**
|
|
80
|
-
* DateTimePicker in a disabled state.
|
|
81
|
-
*
|
|
82
|
-
* Use this when:
|
|
83
|
-
* - The date and time cannot be changed due to permissions or state
|
|
84
|
-
* - You want to show a date time value but prevent interaction
|
|
85
|
-
* - Form logic requires the field to be temporarily disabled
|
|
86
|
-
*/
|
|
87
|
-
export var Disabled = {
|
|
88
|
-
render: function render(args) {
|
|
89
|
-
var _useState7 = useState(new Date(2024, 0, 15, 14, 30)),
|
|
90
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
91
|
-
value = _useState8[0],
|
|
92
|
-
setValue = _useState8[1];
|
|
93
|
-
return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
94
|
-
disabled: true,
|
|
95
|
-
value: value,
|
|
96
|
-
onChange: setValue
|
|
97
|
-
}));
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* DateTimePicker in a read-only state.
|
|
103
|
-
*
|
|
104
|
-
* Use this when:
|
|
105
|
-
* - The date and time should be visible but not editable
|
|
106
|
-
* - You want to display a date time value that cannot be modified
|
|
107
|
-
* - The field is used for reference only
|
|
108
|
-
*/
|
|
109
|
-
export var ReadOnly = {
|
|
110
|
-
render: function render(args) {
|
|
111
|
-
var _useState9 = useState(new Date(2024, 0, 15, 14, 30)),
|
|
112
|
-
_useState0 = _slicedToArray(_useState9, 2),
|
|
113
|
-
value = _useState0[0],
|
|
114
|
-
setValue = _useState0[1];
|
|
115
|
-
return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
116
|
-
readOnly: true,
|
|
117
|
-
value: value,
|
|
118
|
-
onChange: setValue
|
|
119
|
-
}));
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
|
|
123
|
-
/**
|
|
124
|
-
* DateTimePicker with a custom icon.
|
|
125
|
-
*
|
|
126
|
-
* Use this when:
|
|
127
|
-
* - You want to match your brand's icon style
|
|
128
|
-
* - The default calendar icon doesn't fit your design
|
|
129
|
-
* - You need to indicate a specific type of date time selection
|
|
130
|
-
*/
|
|
131
|
-
export var WithCustomIcon = {
|
|
132
|
-
render: function render(args) {
|
|
133
|
-
var _useState1 = useState(new Date(2024, 0, 15, 14, 30)),
|
|
134
|
-
_useState10 = _slicedToArray(_useState1, 2),
|
|
135
|
-
value = _useState10[0],
|
|
136
|
-
setValue = _useState10[1];
|
|
137
|
-
return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
138
|
-
value: value,
|
|
139
|
-
onChange: setValue,
|
|
140
|
-
iconMapping: {
|
|
141
|
-
openPicker: /*#__PURE__*/_jsx(Edit, {})
|
|
142
|
-
}
|
|
143
|
-
}));
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
/**
|
|
148
|
-
* DateTimePicker with date restrictions.
|
|
149
|
-
*
|
|
150
|
-
* Use this when:
|
|
151
|
-
* - Only certain dates should be selectable
|
|
152
|
-
* - You need to limit selection to future or past dates
|
|
153
|
-
* - Business rules require date time range restrictions
|
|
154
|
-
*/
|
|
155
|
-
export var WithDateRestrictions = {
|
|
156
|
-
args: {
|
|
157
|
-
minDate: new Date()
|
|
158
|
-
},
|
|
159
|
-
argTypes: {
|
|
160
|
-
minDate: {
|
|
161
|
-
control: "date"
|
|
162
|
-
}
|
|
163
|
-
},
|
|
164
|
-
render: function render(args) {
|
|
165
|
-
var _useState11 = useState(),
|
|
166
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
167
|
-
value = _useState12[0],
|
|
168
|
-
setValue = _useState12[1];
|
|
169
|
-
return /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
170
|
-
label: "Future Date Time Only",
|
|
171
|
-
minDate: args.minDate,
|
|
172
|
-
value: value,
|
|
173
|
-
onChange: setValue
|
|
174
|
-
}));
|
|
175
|
-
}
|
|
176
|
-
};
|
|
177
|
-
|
|
178
|
-
/**
|
|
179
|
-
* Multiple DateTimePicker instances demonstrating different configurations.
|
|
180
|
-
*
|
|
181
|
-
* This example shows how DateTimePickers can be combined in forms or interfaces
|
|
182
|
-
* to collect multiple date time values with different requirements and states.
|
|
183
|
-
*/
|
|
184
|
-
export var MultiplePickers = {
|
|
185
|
-
render: function render(args) {
|
|
186
|
-
var _useState13 = useState(new Date(2024, 0, 15, 9, 0)),
|
|
187
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
188
|
-
startDateTime = _useState14[0],
|
|
189
|
-
setStartDateTime = _useState14[1];
|
|
190
|
-
var _useState15 = useState(new Date(2024, 0, 15, 17, 0)),
|
|
191
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
192
|
-
endDateTime = _useState16[0],
|
|
193
|
-
setEndDateTime = _useState16[1];
|
|
194
|
-
return /*#__PURE__*/_jsxs(Box, {
|
|
195
|
-
display: "flex",
|
|
196
|
-
flexDirection: "column",
|
|
197
|
-
gap: 4,
|
|
198
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
|
199
|
-
variant: "h5",
|
|
200
|
-
children: "Date Time Range Selection"
|
|
201
|
-
}), /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
202
|
-
label: "Start Date Time",
|
|
203
|
-
fullWidth: true,
|
|
204
|
-
value: startDateTime,
|
|
205
|
-
onChange: setStartDateTime
|
|
206
|
-
})), /*#__PURE__*/_jsx(DateTimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
207
|
-
label: "End Date Time",
|
|
208
|
-
fullWidth: true,
|
|
209
|
-
value: endDateTime,
|
|
210
|
-
onChange: setEndDateTime
|
|
211
|
-
}))]
|
|
212
|
-
});
|
|
213
|
-
}
|
|
214
|
-
};
|
|
@@ -1,220 +0,0 @@
|
|
|
1
|
-
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
|
|
2
|
-
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
|
|
3
|
-
function asyncGeneratorStep(n, t, e, r, o, a, c) { try { var i = n[a](c), u = i.value; } catch (n) { return void e(n); } i.done ? t(u) : Promise.resolve(u).then(r, o); }
|
|
4
|
-
function _asyncToGenerator(n) { return function () { var t = this, e = arguments; return new Promise(function (r, o) { var a = n.apply(t, e); function _next(n) { asyncGeneratorStep(a, r, o, _next, _throw, "next", n); } function _throw(n) { asyncGeneratorStep(a, r, o, _next, _throw, "throw", n); } _next(void 0); }); }; }
|
|
5
|
-
import { FinalForm } from "../../../FinalForm";
|
|
6
|
-
import { FinalFormDebug } from "../../../form/FinalFormDebug";
|
|
7
|
-
import { DateTimePickerField } from "../DateTimePickerField";
|
|
8
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
var config = {
|
|
10
|
-
component: DateTimePickerField,
|
|
11
|
-
title: "components/dateTime/DateTimePickerField"
|
|
12
|
-
};
|
|
13
|
-
export default config;
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* The basic DateTimePickerField component allows users to select both a date and time.
|
|
17
|
-
*
|
|
18
|
-
* Use this when you need:
|
|
19
|
-
* - A date and time input in a form
|
|
20
|
-
* - Users to select a specific date and time from a calendar and time picker interface
|
|
21
|
-
* - DateTime values to be stored as Date objects
|
|
22
|
-
*/
|
|
23
|
-
export var Default = {
|
|
24
|
-
render: function render() {
|
|
25
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
26
|
-
mode: "edit",
|
|
27
|
-
onSubmit: function onSubmit() {
|
|
28
|
-
// not handled
|
|
29
|
-
},
|
|
30
|
-
subscription: {
|
|
31
|
-
values: true
|
|
32
|
-
},
|
|
33
|
-
children: function children(_ref) {
|
|
34
|
-
var values = _ref.values;
|
|
35
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
36
|
-
children: [/*#__PURE__*/_jsx(DateTimePickerField, {
|
|
37
|
-
name: "value",
|
|
38
|
-
label: "Date Time Picker",
|
|
39
|
-
fullWidth: true,
|
|
40
|
-
variant: "horizontal"
|
|
41
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* DateTimePickerField can be configured with minimum and maximum date constraints.
|
|
50
|
-
*
|
|
51
|
-
* Use this when:
|
|
52
|
-
* - You need to restrict selectable dates to a specific range
|
|
53
|
-
* - Business rules require date boundaries
|
|
54
|
-
* - You want to prevent invalid date and time selections
|
|
55
|
-
*/
|
|
56
|
-
export var MinMaxDate = {
|
|
57
|
-
args: {
|
|
58
|
-
minDate: new Date(2025, 0, 1),
|
|
59
|
-
maxDate: new Date(2025, 11, 31)
|
|
60
|
-
},
|
|
61
|
-
argTypes: {
|
|
62
|
-
minDate: {
|
|
63
|
-
control: "date"
|
|
64
|
-
},
|
|
65
|
-
maxDate: {
|
|
66
|
-
control: "date"
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
render: function render(args) {
|
|
70
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
71
|
-
mode: "edit",
|
|
72
|
-
onSubmit: function onSubmit() {
|
|
73
|
-
// not handled
|
|
74
|
-
},
|
|
75
|
-
subscription: {
|
|
76
|
-
values: true
|
|
77
|
-
},
|
|
78
|
-
children: function children(_ref2) {
|
|
79
|
-
var values = _ref2.values;
|
|
80
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
81
|
-
children: [/*#__PURE__*/_jsx(DateTimePickerField, {
|
|
82
|
-
name: "value",
|
|
83
|
-
label: "Date Time Picker with Min/Max Date",
|
|
84
|
-
fullWidth: true,
|
|
85
|
-
variant: "horizontal",
|
|
86
|
-
minDate: args.minDate,
|
|
87
|
-
maxDate: args.maxDate
|
|
88
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
89
|
-
});
|
|
90
|
-
}
|
|
91
|
-
});
|
|
92
|
-
}
|
|
93
|
-
};
|
|
94
|
-
|
|
95
|
-
/**
|
|
96
|
-
* DateTimePickerField with clearable functionality allows users to reset the selected date and time.
|
|
97
|
-
*
|
|
98
|
-
* Use this when:
|
|
99
|
-
* - The date time field is optional
|
|
100
|
-
* - Users should be able to clear their selection
|
|
101
|
-
* - You want to provide an easy way to reset the field
|
|
102
|
-
*/
|
|
103
|
-
export var Clearable = {
|
|
104
|
-
render: function render() {
|
|
105
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
106
|
-
mode: "edit",
|
|
107
|
-
onSubmit: function onSubmit() {
|
|
108
|
-
// not handled
|
|
109
|
-
},
|
|
110
|
-
subscription: {
|
|
111
|
-
values: true
|
|
112
|
-
},
|
|
113
|
-
children: function children(_ref3) {
|
|
114
|
-
var values = _ref3.values;
|
|
115
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
116
|
-
children: [/*#__PURE__*/_jsx(DateTimePickerField, {
|
|
117
|
-
clearable: true,
|
|
118
|
-
name: "value",
|
|
119
|
-
label: "Clearable Date Time Picker",
|
|
120
|
-
fullWidth: true,
|
|
121
|
-
variant: "horizontal"
|
|
122
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
123
|
-
});
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
/**
|
|
130
|
-
* DateTimePickerField can be disabled to prevent user interaction.
|
|
131
|
-
*
|
|
132
|
-
* Use this when:
|
|
133
|
-
* - The date and time should be displayed but not editable
|
|
134
|
-
* - Form logic requires certain conditions before editing
|
|
135
|
-
* - You want to show read-only date and time information
|
|
136
|
-
*/
|
|
137
|
-
export var Disabled = {
|
|
138
|
-
render: function render() {
|
|
139
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
140
|
-
mode: "edit",
|
|
141
|
-
onSubmit: function onSubmit() {
|
|
142
|
-
// not handled
|
|
143
|
-
},
|
|
144
|
-
initialValues: {
|
|
145
|
-
value: new Date(2026, 0, 15, 14, 30)
|
|
146
|
-
},
|
|
147
|
-
subscription: {
|
|
148
|
-
values: true
|
|
149
|
-
},
|
|
150
|
-
children: function children(_ref4) {
|
|
151
|
-
var values = _ref4.values;
|
|
152
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
153
|
-
children: [/*#__PURE__*/_jsx(DateTimePickerField, {
|
|
154
|
-
disabled: true,
|
|
155
|
-
name: "value",
|
|
156
|
-
label: "Disabled Date Time Picker",
|
|
157
|
-
fullWidth: true,
|
|
158
|
-
variant: "horizontal"
|
|
159
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
160
|
-
});
|
|
161
|
-
}
|
|
162
|
-
});
|
|
163
|
-
}
|
|
164
|
-
};
|
|
165
|
-
|
|
166
|
-
/**
|
|
167
|
-
* Before implementing custom validation, try to disable certain values using the props provided by MUI's DateTimePicker, such as `shouldDisableDate`, `shouldDisableTime`, `disableFuture`, `disablePast`.
|
|
168
|
-
*
|
|
169
|
-
* Use this when:
|
|
170
|
-
* - You need to validate the date against a custom rule, which cannot be achieved using the props provided by MUI's DateTimePicker
|
|
171
|
-
* - You want to provide a custom error message
|
|
172
|
-
* - You want to validate the date asynchronously
|
|
173
|
-
*/
|
|
174
|
-
export var CustomValidation = {
|
|
175
|
-
render: function render() {
|
|
176
|
-
var validateIsWeekday = /*#__PURE__*/function () {
|
|
177
|
-
var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(value) {
|
|
178
|
-
var day, isWeekday;
|
|
179
|
-
return _regenerator().w(function (_context) {
|
|
180
|
-
while (1) switch (_context.n) {
|
|
181
|
-
case 0:
|
|
182
|
-
if (value) {
|
|
183
|
-
_context.n = 1;
|
|
184
|
-
break;
|
|
185
|
-
}
|
|
186
|
-
return _context.a(2, undefined);
|
|
187
|
-
case 1:
|
|
188
|
-
day = value.getDay();
|
|
189
|
-
isWeekday = day !== 0 && day !== 6;
|
|
190
|
-
return _context.a(2, isWeekday ? undefined : "Please select a weekday");
|
|
191
|
-
}
|
|
192
|
-
}, _callee);
|
|
193
|
-
}));
|
|
194
|
-
return function validateIsWeekday(_x) {
|
|
195
|
-
return _ref5.apply(this, arguments);
|
|
196
|
-
};
|
|
197
|
-
}();
|
|
198
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
199
|
-
mode: "edit",
|
|
200
|
-
onSubmit: function onSubmit() {
|
|
201
|
-
// not handled
|
|
202
|
-
},
|
|
203
|
-
subscription: {
|
|
204
|
-
values: true
|
|
205
|
-
},
|
|
206
|
-
children: function children() {
|
|
207
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
208
|
-
children: [/*#__PURE__*/_jsx(DateTimePickerField, {
|
|
209
|
-
name: "value",
|
|
210
|
-
label: "Date Time Picker",
|
|
211
|
-
helperText: "Only weekdays are valid",
|
|
212
|
-
fullWidth: true,
|
|
213
|
-
variant: "horizontal",
|
|
214
|
-
validate: validateIsWeekday
|
|
215
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
216
|
-
});
|
|
217
|
-
}
|
|
218
|
-
});
|
|
219
|
-
}
|
|
220
|
-
};
|
|
@@ -1,238 +0,0 @@
|
|
|
1
|
-
function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
|
|
2
|
-
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
|
|
3
|
-
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
|
|
4
|
-
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
|
|
5
|
-
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
|
|
6
|
-
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
|
|
7
|
-
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
8
|
-
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
|
|
9
|
-
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
10
|
-
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
11
|
-
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
|
|
12
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
13
|
-
import { Edit } from "@comet/admin-icons";
|
|
14
|
-
import { Box, Typography } from "@mui/material";
|
|
15
|
-
import { useState } from "react";
|
|
16
|
-
import { DateTimeRangePicker } from "../DateTimeRangePicker";
|
|
17
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
|
-
var config = {
|
|
19
|
-
component: DateTimeRangePicker,
|
|
20
|
-
title: "components/dateTime/DateTimeRangePicker"
|
|
21
|
-
};
|
|
22
|
-
export default config;
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* The basic DateTimeRangePicker component allows users to select a date time range from calendar and time picker interfaces.
|
|
26
|
-
*
|
|
27
|
-
* Use this for date time range input fields where users need to pick a start and end date with time.
|
|
28
|
-
*/
|
|
29
|
-
export var Default = {
|
|
30
|
-
render: function render(args) {
|
|
31
|
-
var _useState = useState({
|
|
32
|
-
start: new Date(2024, 0, 15, 9, 0),
|
|
33
|
-
end: new Date(2024, 0, 15, 17, 0)
|
|
34
|
-
}),
|
|
35
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
36
|
-
value = _useState2[0],
|
|
37
|
-
setValue = _useState2[1];
|
|
38
|
-
return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
39
|
-
value: value,
|
|
40
|
-
onChange: setValue
|
|
41
|
-
}));
|
|
42
|
-
}
|
|
43
|
-
};
|
|
44
|
-
export var FullWidth = {
|
|
45
|
-
render: function render(args) {
|
|
46
|
-
var _useState3 = useState({
|
|
47
|
-
start: new Date(2024, 0, 15, 9, 0),
|
|
48
|
-
end: new Date(2024, 0, 15, 17, 0)
|
|
49
|
-
}),
|
|
50
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
51
|
-
value = _useState4[0],
|
|
52
|
-
setValue = _useState4[1];
|
|
53
|
-
return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
54
|
-
fullWidth: true,
|
|
55
|
-
value: value,
|
|
56
|
-
onChange: setValue
|
|
57
|
-
}));
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* DateTimeRangePicker in a required state.
|
|
63
|
-
*
|
|
64
|
-
* Use this when:
|
|
65
|
-
* - The date time range selection is mandatory
|
|
66
|
-
* - Form validation requires date time range values
|
|
67
|
-
* - Users must select a date time range to proceed
|
|
68
|
-
*
|
|
69
|
-
* Note: The clear button is automatically hidden when the field is required.
|
|
70
|
-
*/
|
|
71
|
-
export var Required = {
|
|
72
|
-
render: function render(args) {
|
|
73
|
-
var _useState5 = useState({
|
|
74
|
-
start: new Date(2024, 0, 15, 9, 0),
|
|
75
|
-
end: new Date(2024, 0, 15, 17, 0)
|
|
76
|
-
}),
|
|
77
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
78
|
-
value = _useState6[0],
|
|
79
|
-
setValue = _useState6[1];
|
|
80
|
-
return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
81
|
-
required: true,
|
|
82
|
-
value: value,
|
|
83
|
-
onChange: setValue
|
|
84
|
-
}));
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
/**
|
|
89
|
-
* DateTimeRangePicker in a disabled state.
|
|
90
|
-
*
|
|
91
|
-
* Use this when:
|
|
92
|
-
* - The date time range cannot be changed due to permissions or state
|
|
93
|
-
* - You want to show date time range values but prevent interaction
|
|
94
|
-
* - Form logic requires the field to be temporarily disabled
|
|
95
|
-
*/
|
|
96
|
-
export var Disabled = {
|
|
97
|
-
render: function render(args) {
|
|
98
|
-
var _useState7 = useState({
|
|
99
|
-
start: new Date(2024, 0, 15, 9, 0),
|
|
100
|
-
end: new Date(2024, 0, 15, 17, 0)
|
|
101
|
-
}),
|
|
102
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
103
|
-
value = _useState8[0],
|
|
104
|
-
setValue = _useState8[1];
|
|
105
|
-
return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
106
|
-
disabled: true,
|
|
107
|
-
value: value,
|
|
108
|
-
onChange: setValue
|
|
109
|
-
}));
|
|
110
|
-
}
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
/**
|
|
114
|
-
* DateTimeRangePicker in a read-only state.
|
|
115
|
-
*
|
|
116
|
-
* Use this when:
|
|
117
|
-
* - The date time range should be visible but not editable
|
|
118
|
-
* - You want to display date time range values that cannot be modified
|
|
119
|
-
* - The field is used for reference only
|
|
120
|
-
*/
|
|
121
|
-
export var ReadOnly = {
|
|
122
|
-
render: function render(args) {
|
|
123
|
-
var _useState9 = useState({
|
|
124
|
-
start: new Date(2024, 0, 15, 9, 0),
|
|
125
|
-
end: new Date(2024, 0, 15, 17, 0)
|
|
126
|
-
}),
|
|
127
|
-
_useState0 = _slicedToArray(_useState9, 2),
|
|
128
|
-
value = _useState0[0],
|
|
129
|
-
setValue = _useState0[1];
|
|
130
|
-
return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
131
|
-
readOnly: true,
|
|
132
|
-
value: value,
|
|
133
|
-
onChange: setValue
|
|
134
|
-
}));
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* DateTimeRangePicker with a custom icon.
|
|
140
|
-
*
|
|
141
|
-
* Use this when:
|
|
142
|
-
* - You want to match your brand's icon style
|
|
143
|
-
* - The default calendar icon doesn't fit your design
|
|
144
|
-
* - You need to indicate a specific type of date time range selection
|
|
145
|
-
*/
|
|
146
|
-
export var WithCustomIcon = {
|
|
147
|
-
render: function render(args) {
|
|
148
|
-
var _useState1 = useState({
|
|
149
|
-
start: new Date(2024, 0, 15, 9, 0),
|
|
150
|
-
end: new Date(2024, 0, 15, 17, 0)
|
|
151
|
-
}),
|
|
152
|
-
_useState10 = _slicedToArray(_useState1, 2),
|
|
153
|
-
value = _useState10[0],
|
|
154
|
-
setValue = _useState10[1];
|
|
155
|
-
return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
156
|
-
value: value,
|
|
157
|
-
onChange: setValue,
|
|
158
|
-
iconMapping: {
|
|
159
|
-
openPicker: /*#__PURE__*/_jsx(Edit, {})
|
|
160
|
-
}
|
|
161
|
-
}));
|
|
162
|
-
}
|
|
163
|
-
};
|
|
164
|
-
|
|
165
|
-
/**
|
|
166
|
-
* DateTimeRangePicker with date restrictions.
|
|
167
|
-
*
|
|
168
|
-
* Use this when:
|
|
169
|
-
* - Only certain dates should be selectable
|
|
170
|
-
* - You need to limit selection to future or past dates
|
|
171
|
-
* - Business rules require date time range restrictions
|
|
172
|
-
*/
|
|
173
|
-
export var WithDateRestrictions = {
|
|
174
|
-
args: {
|
|
175
|
-
minDate: new Date()
|
|
176
|
-
},
|
|
177
|
-
argTypes: {
|
|
178
|
-
minDate: {
|
|
179
|
-
control: "date"
|
|
180
|
-
}
|
|
181
|
-
},
|
|
182
|
-
render: function render(args) {
|
|
183
|
-
var _useState11 = useState(),
|
|
184
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
185
|
-
value = _useState12[0],
|
|
186
|
-
setValue = _useState12[1];
|
|
187
|
-
return /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
188
|
-
label: "Future Date Time Range Only",
|
|
189
|
-
minDate: args.minDate,
|
|
190
|
-
value: value,
|
|
191
|
-
onChange: setValue
|
|
192
|
-
}));
|
|
193
|
-
}
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
/**
|
|
197
|
-
* Multiple DateTimeRangePicker instances demonstrating different configurations.
|
|
198
|
-
*
|
|
199
|
-
* This example shows how DateTimeRangePickers can be combined in forms or interfaces
|
|
200
|
-
* to collect multiple date time range values with different requirements and states.
|
|
201
|
-
*/
|
|
202
|
-
export var MultiplePickers = {
|
|
203
|
-
render: function render(args) {
|
|
204
|
-
var _useState13 = useState({
|
|
205
|
-
start: new Date(2024, 0, 15, 8, 0),
|
|
206
|
-
end: new Date(2024, 0, 15, 16, 0)
|
|
207
|
-
}),
|
|
208
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
209
|
-
shift1 = _useState14[0],
|
|
210
|
-
setShift1 = _useState14[1];
|
|
211
|
-
var _useState15 = useState({
|
|
212
|
-
start: new Date(2024, 0, 15, 16, 0),
|
|
213
|
-
end: new Date(2024, 0, 16, 0, 0)
|
|
214
|
-
}),
|
|
215
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
216
|
-
shift2 = _useState16[0],
|
|
217
|
-
setShift2 = _useState16[1];
|
|
218
|
-
return /*#__PURE__*/_jsxs(Box, {
|
|
219
|
-
display: "flex",
|
|
220
|
-
flexDirection: "column",
|
|
221
|
-
gap: 4,
|
|
222
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
|
223
|
-
variant: "h5",
|
|
224
|
-
children: "Shift Schedule"
|
|
225
|
-
}), /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
226
|
-
label: "Morning Shift",
|
|
227
|
-
fullWidth: true,
|
|
228
|
-
value: shift1,
|
|
229
|
-
onChange: setShift1
|
|
230
|
-
})), /*#__PURE__*/_jsx(DateTimeRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
231
|
-
label: "Evening Shift",
|
|
232
|
-
fullWidth: true,
|
|
233
|
-
value: shift2,
|
|
234
|
-
onChange: setShift2
|
|
235
|
-
}))]
|
|
236
|
-
});
|
|
237
|
-
}
|
|
238
|
-
};
|