@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
package/lib/dateTime/dateTimeRangePickerField/__stories__/DateTimeRangePickerField.stories.js
DELETED
|
@@ -1,223 +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 { DateTimeRangePickerField } from "../DateTimeRangePickerField";
|
|
8
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
var config = {
|
|
10
|
-
component: DateTimeRangePickerField,
|
|
11
|
-
title: "components/dateTime/DateTimeRangePickerField"
|
|
12
|
-
};
|
|
13
|
-
export default config;
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* The basic DateTimeRangePickerField component allows users to select a date and time range.
|
|
17
|
-
*
|
|
18
|
-
* Use this when you need:
|
|
19
|
-
* - A date time range input in a form
|
|
20
|
-
* - Users to select a start and end date with time from calendar and time picker interfaces
|
|
21
|
-
* - DateTime range values to be stored as objects with start and end Date properties
|
|
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(DateTimeRangePickerField, {
|
|
37
|
-
name: "value",
|
|
38
|
-
label: "Date Time Range Picker",
|
|
39
|
-
fullWidth: true,
|
|
40
|
-
variant: "horizontal"
|
|
41
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* DateTimeRangePickerField 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(DateTimeRangePickerField, {
|
|
82
|
-
name: "value",
|
|
83
|
-
label: "Date Time Range 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
|
-
* DateTimeRangePickerField with clearable functionality allows users to reset the selected date time range.
|
|
97
|
-
*
|
|
98
|
-
* Use this when:
|
|
99
|
-
* - The date time range 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(DateTimeRangePickerField, {
|
|
117
|
-
clearable: true,
|
|
118
|
-
name: "value",
|
|
119
|
-
label: "Clearable Date Time Range Picker",
|
|
120
|
-
fullWidth: true,
|
|
121
|
-
variant: "horizontal"
|
|
122
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
123
|
-
});
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
/**
|
|
130
|
-
* DateTimeRangePickerField can be disabled to prevent user interaction.
|
|
131
|
-
*
|
|
132
|
-
* Use this when:
|
|
133
|
-
* - The date time range should be displayed but not editable
|
|
134
|
-
* - Form logic requires certain conditions before editing
|
|
135
|
-
* - You want to show read-only date time range 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: {
|
|
146
|
-
start: new Date(2026, 0, 15, 10, 0),
|
|
147
|
-
end: new Date(2026, 0, 20, 18, 0)
|
|
148
|
-
}
|
|
149
|
-
},
|
|
150
|
-
subscription: {
|
|
151
|
-
values: true
|
|
152
|
-
},
|
|
153
|
-
children: function children(_ref4) {
|
|
154
|
-
var values = _ref4.values;
|
|
155
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
156
|
-
children: [/*#__PURE__*/_jsx(DateTimeRangePickerField, {
|
|
157
|
-
disabled: true,
|
|
158
|
-
name: "value",
|
|
159
|
-
label: "Disabled Date Time Range Picker",
|
|
160
|
-
fullWidth: true,
|
|
161
|
-
variant: "horizontal"
|
|
162
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
163
|
-
});
|
|
164
|
-
}
|
|
165
|
-
});
|
|
166
|
-
}
|
|
167
|
-
};
|
|
168
|
-
|
|
169
|
-
/**
|
|
170
|
-
* Before implementing custom validation, try to disable certain values using the props provided by MUI's DateTimeRangePicker, such as `shouldDisableDate`, `shouldDisableTime`, `disableFuture`, `disablePast`.
|
|
171
|
-
*
|
|
172
|
-
* Use this when:
|
|
173
|
-
* - You need to validate the date time range against a custom rule, which cannot be achieved using the props provided by MUI's DateTimeRangePicker
|
|
174
|
-
* - You want to provide a custom error message
|
|
175
|
-
* - You want to validate the date time range asynchronously
|
|
176
|
-
*/
|
|
177
|
-
export var CustomValidation = {
|
|
178
|
-
render: function render() {
|
|
179
|
-
var validateMaxThirtyDayRange = /*#__PURE__*/function () {
|
|
180
|
-
var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(value) {
|
|
181
|
-
var millisecondsDifference, daysDifference;
|
|
182
|
-
return _regenerator().w(function (_context) {
|
|
183
|
-
while (1) switch (_context.n) {
|
|
184
|
-
case 0:
|
|
185
|
-
if (!(!(value !== null && value !== void 0 && value.start) || !(value !== null && value !== void 0 && value.end))) {
|
|
186
|
-
_context.n = 1;
|
|
187
|
-
break;
|
|
188
|
-
}
|
|
189
|
-
return _context.a(2, undefined);
|
|
190
|
-
case 1:
|
|
191
|
-
millisecondsDifference = value.end.getTime() - value.start.getTime();
|
|
192
|
-
daysDifference = millisecondsDifference / (1000 * 60 * 60 * 24);
|
|
193
|
-
return _context.a(2, daysDifference <= 30 ? undefined : "Please select a range no longer than 30 days");
|
|
194
|
-
}
|
|
195
|
-
}, _callee);
|
|
196
|
-
}));
|
|
197
|
-
return function validateMaxThirtyDayRange(_x) {
|
|
198
|
-
return _ref5.apply(this, arguments);
|
|
199
|
-
};
|
|
200
|
-
}();
|
|
201
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
202
|
-
mode: "edit",
|
|
203
|
-
onSubmit: function onSubmit() {
|
|
204
|
-
// not handled
|
|
205
|
-
},
|
|
206
|
-
subscription: {
|
|
207
|
-
values: true
|
|
208
|
-
},
|
|
209
|
-
children: function children() {
|
|
210
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
211
|
-
children: [/*#__PURE__*/_jsx(DateTimeRangePickerField, {
|
|
212
|
-
name: "value",
|
|
213
|
-
label: "Date Time Range Picker",
|
|
214
|
-
helperText: "The selected range must not exceed 30 days",
|
|
215
|
-
fullWidth: true,
|
|
216
|
-
variant: "horizontal",
|
|
217
|
-
validate: validateMaxThirtyDayRange
|
|
218
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
219
|
-
});
|
|
220
|
-
}
|
|
221
|
-
});
|
|
222
|
-
}
|
|
223
|
-
};
|
|
@@ -1,219 +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 { TimePicker } from "../TimePicker";
|
|
17
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
|
-
var config = {
|
|
19
|
-
component: TimePicker,
|
|
20
|
-
title: "components/dateTime/TimePicker"
|
|
21
|
-
};
|
|
22
|
-
export default config;
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* The basic TimePicker component allows users to select a time from a time picker interface.
|
|
26
|
-
*
|
|
27
|
-
* Use this for time input fields where users need to pick a specific time.
|
|
28
|
-
*/
|
|
29
|
-
export var Default = {
|
|
30
|
-
render: function render(args) {
|
|
31
|
-
var _useState = useState("14:30"),
|
|
32
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
33
|
-
value = _useState2[0],
|
|
34
|
-
setValue = _useState2[1];
|
|
35
|
-
return /*#__PURE__*/_jsx(TimePicker, _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("14:30"),
|
|
44
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
45
|
-
value = _useState4[0],
|
|
46
|
-
setValue = _useState4[1];
|
|
47
|
-
return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
48
|
-
fullWidth: true,
|
|
49
|
-
value: value,
|
|
50
|
-
onChange: setValue
|
|
51
|
-
}));
|
|
52
|
-
}
|
|
53
|
-
};
|
|
54
|
-
|
|
55
|
-
/**
|
|
56
|
-
* TimePicker in a required state.
|
|
57
|
-
*
|
|
58
|
-
* Use this when:
|
|
59
|
-
* - The time selection is mandatory
|
|
60
|
-
* - Form validation requires a time value
|
|
61
|
-
* - Users must select a 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("14:30"),
|
|
68
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
69
|
-
value = _useState6[0],
|
|
70
|
-
setValue = _useState6[1];
|
|
71
|
-
return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
72
|
-
required: true,
|
|
73
|
-
value: value,
|
|
74
|
-
onChange: setValue
|
|
75
|
-
}));
|
|
76
|
-
}
|
|
77
|
-
};
|
|
78
|
-
|
|
79
|
-
/**
|
|
80
|
-
* TimePicker in a disabled state.
|
|
81
|
-
*
|
|
82
|
-
* Use this when:
|
|
83
|
-
* - The time cannot be changed due to permissions or state
|
|
84
|
-
* - You want to show a 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("14:30"),
|
|
90
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
91
|
-
value = _useState8[0],
|
|
92
|
-
setValue = _useState8[1];
|
|
93
|
-
return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
94
|
-
disabled: true,
|
|
95
|
-
value: value,
|
|
96
|
-
onChange: setValue
|
|
97
|
-
}));
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* TimePicker in a read-only state.
|
|
103
|
-
*
|
|
104
|
-
* Use this when:
|
|
105
|
-
* - The time should be visible but not editable
|
|
106
|
-
* - You want to display a 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("14:30"),
|
|
112
|
-
_useState0 = _slicedToArray(_useState9, 2),
|
|
113
|
-
value = _useState0[0],
|
|
114
|
-
setValue = _useState0[1];
|
|
115
|
-
return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
116
|
-
readOnly: true,
|
|
117
|
-
value: value,
|
|
118
|
-
onChange: setValue
|
|
119
|
-
}));
|
|
120
|
-
}
|
|
121
|
-
};
|
|
122
|
-
|
|
123
|
-
/**
|
|
124
|
-
* TimePicker with a custom icon.
|
|
125
|
-
*
|
|
126
|
-
* Use this when:
|
|
127
|
-
* - You want to match your brand's icon style
|
|
128
|
-
* - The default time icon doesn't fit your design
|
|
129
|
-
* - You need to indicate a specific type of time selection
|
|
130
|
-
*/
|
|
131
|
-
export var WithCustomIcon = {
|
|
132
|
-
render: function render(args) {
|
|
133
|
-
var _useState1 = useState("14:30"),
|
|
134
|
-
_useState10 = _slicedToArray(_useState1, 2),
|
|
135
|
-
value = _useState10[0],
|
|
136
|
-
setValue = _useState10[1];
|
|
137
|
-
return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
138
|
-
value: value,
|
|
139
|
-
onChange: setValue,
|
|
140
|
-
iconMapping: {
|
|
141
|
-
openPicker: /*#__PURE__*/_jsx(Edit, {})
|
|
142
|
-
}
|
|
143
|
-
}));
|
|
144
|
-
}
|
|
145
|
-
};
|
|
146
|
-
|
|
147
|
-
/**
|
|
148
|
-
* TimePicker with time restrictions.
|
|
149
|
-
*
|
|
150
|
-
* Use this when:
|
|
151
|
-
* - Only certain times should be selectable
|
|
152
|
-
* - You need to limit selection to business hours
|
|
153
|
-
* - Business rules require time range restrictions
|
|
154
|
-
*/
|
|
155
|
-
export var WithTimeRestrictions = {
|
|
156
|
-
args: {
|
|
157
|
-
minTime: new Date(2000, 0, 1, 9, 0),
|
|
158
|
-
maxTime: new Date(2000, 0, 1, 17, 0)
|
|
159
|
-
},
|
|
160
|
-
argTypes: {
|
|
161
|
-
minTime: {
|
|
162
|
-
control: "date"
|
|
163
|
-
},
|
|
164
|
-
maxTime: {
|
|
165
|
-
control: "date"
|
|
166
|
-
}
|
|
167
|
-
},
|
|
168
|
-
render: function render(args) {
|
|
169
|
-
var _useState11 = useState(),
|
|
170
|
-
_useState12 = _slicedToArray(_useState11, 2),
|
|
171
|
-
value = _useState12[0],
|
|
172
|
-
setValue = _useState12[1];
|
|
173
|
-
return /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
174
|
-
label: "Business Hours Only",
|
|
175
|
-
minTime: args.minTime,
|
|
176
|
-
maxTime: args.maxTime,
|
|
177
|
-
value: value,
|
|
178
|
-
onChange: setValue
|
|
179
|
-
}));
|
|
180
|
-
}
|
|
181
|
-
};
|
|
182
|
-
|
|
183
|
-
/**
|
|
184
|
-
* Multiple TimePicker instances demonstrating different configurations.
|
|
185
|
-
*
|
|
186
|
-
* This example shows how TimePickers can be combined in forms or interfaces
|
|
187
|
-
* to collect multiple time values with different requirements and states.
|
|
188
|
-
*/
|
|
189
|
-
export var MultiplePickers = {
|
|
190
|
-
render: function render(args) {
|
|
191
|
-
var _useState13 = useState("09:00"),
|
|
192
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
193
|
-
startTime = _useState14[0],
|
|
194
|
-
setStartTime = _useState14[1];
|
|
195
|
-
var _useState15 = useState("17:00"),
|
|
196
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
197
|
-
endTime = _useState16[0],
|
|
198
|
-
setEndTime = _useState16[1];
|
|
199
|
-
return /*#__PURE__*/_jsxs(Box, {
|
|
200
|
-
display: "flex",
|
|
201
|
-
flexDirection: "column",
|
|
202
|
-
gap: 4,
|
|
203
|
-
children: [/*#__PURE__*/_jsx(Typography, {
|
|
204
|
-
variant: "h5",
|
|
205
|
-
children: "Work Hours"
|
|
206
|
-
}), /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
207
|
-
label: "Start Time",
|
|
208
|
-
fullWidth: true,
|
|
209
|
-
value: startTime,
|
|
210
|
-
onChange: setStartTime
|
|
211
|
-
})), /*#__PURE__*/_jsx(TimePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
212
|
-
label: "End Time",
|
|
213
|
-
fullWidth: true,
|
|
214
|
-
value: endTime,
|
|
215
|
-
onChange: setEndTime
|
|
216
|
-
}))]
|
|
217
|
-
});
|
|
218
|
-
}
|
|
219
|
-
};
|
|
@@ -1,229 +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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
|
|
4
|
-
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."); }
|
|
5
|
-
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; } }
|
|
6
|
-
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; }
|
|
7
|
-
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; } }
|
|
8
|
-
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
|
|
9
|
-
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); }
|
|
10
|
-
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); }); }; }
|
|
11
|
-
import { FinalForm } from "../../../FinalForm";
|
|
12
|
-
import { FinalFormDebug } from "../../../form/FinalFormDebug";
|
|
13
|
-
import { TimePickerField } from "../TimePickerField";
|
|
14
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
15
|
-
var config = {
|
|
16
|
-
component: TimePickerField,
|
|
17
|
-
title: "components/dateTime/TimePickerField"
|
|
18
|
-
};
|
|
19
|
-
export default config;
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* The basic TimePickerField component allows users to select a time.
|
|
23
|
-
*
|
|
24
|
-
* Use this when you need:
|
|
25
|
-
* - A time input in a form
|
|
26
|
-
* - Users to select a specific time from a time picker interface
|
|
27
|
-
* - Time values to be stored as strings
|
|
28
|
-
*/
|
|
29
|
-
export var Default = {
|
|
30
|
-
render: function render() {
|
|
31
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
32
|
-
mode: "edit",
|
|
33
|
-
onSubmit: function onSubmit() {
|
|
34
|
-
// not handled
|
|
35
|
-
},
|
|
36
|
-
subscription: {
|
|
37
|
-
values: true
|
|
38
|
-
},
|
|
39
|
-
children: function children(_ref) {
|
|
40
|
-
var values = _ref.values;
|
|
41
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
42
|
-
children: [/*#__PURE__*/_jsx(TimePickerField, {
|
|
43
|
-
name: "value",
|
|
44
|
-
label: "Time Picker",
|
|
45
|
-
fullWidth: true,
|
|
46
|
-
variant: "horizontal"
|
|
47
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
48
|
-
});
|
|
49
|
-
}
|
|
50
|
-
});
|
|
51
|
-
}
|
|
52
|
-
};
|
|
53
|
-
|
|
54
|
-
/**
|
|
55
|
-
* TimePickerField can be configured with minimum and maximum time constraints.
|
|
56
|
-
*
|
|
57
|
-
* Use this when:
|
|
58
|
-
* - You need to restrict selectable times to a specific range
|
|
59
|
-
* - Business rules require time boundaries (e.g., business hours)
|
|
60
|
-
* - You want to prevent invalid time selections
|
|
61
|
-
*/
|
|
62
|
-
export var MinMaxTime = {
|
|
63
|
-
args: {
|
|
64
|
-
minTime: new Date(2000, 0, 1, 9, 0),
|
|
65
|
-
maxTime: new Date(2000, 0, 1, 17, 0)
|
|
66
|
-
},
|
|
67
|
-
argTypes: {
|
|
68
|
-
minTime: {
|
|
69
|
-
control: "date"
|
|
70
|
-
},
|
|
71
|
-
maxTime: {
|
|
72
|
-
control: "date"
|
|
73
|
-
}
|
|
74
|
-
},
|
|
75
|
-
render: function render(args) {
|
|
76
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
77
|
-
mode: "edit",
|
|
78
|
-
onSubmit: function onSubmit() {
|
|
79
|
-
// not handled
|
|
80
|
-
},
|
|
81
|
-
subscription: {
|
|
82
|
-
values: true
|
|
83
|
-
},
|
|
84
|
-
children: function children(_ref2) {
|
|
85
|
-
var values = _ref2.values;
|
|
86
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
87
|
-
children: [/*#__PURE__*/_jsx(TimePickerField, {
|
|
88
|
-
name: "value",
|
|
89
|
-
label: "Time Picker with Min/Max Time",
|
|
90
|
-
fullWidth: true,
|
|
91
|
-
variant: "horizontal",
|
|
92
|
-
minTime: args.minTime,
|
|
93
|
-
maxTime: args.maxTime
|
|
94
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
95
|
-
});
|
|
96
|
-
}
|
|
97
|
-
});
|
|
98
|
-
}
|
|
99
|
-
};
|
|
100
|
-
|
|
101
|
-
/**
|
|
102
|
-
* TimePickerField with clearable functionality allows users to reset the selected time.
|
|
103
|
-
*
|
|
104
|
-
* Use this when:
|
|
105
|
-
* - The time field is optional
|
|
106
|
-
* - Users should be able to clear their selection
|
|
107
|
-
* - You want to provide an easy way to reset the field
|
|
108
|
-
*/
|
|
109
|
-
export var Clearable = {
|
|
110
|
-
render: function render() {
|
|
111
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
112
|
-
mode: "edit",
|
|
113
|
-
onSubmit: function onSubmit() {
|
|
114
|
-
// not handled
|
|
115
|
-
},
|
|
116
|
-
subscription: {
|
|
117
|
-
values: true
|
|
118
|
-
},
|
|
119
|
-
children: function children(_ref3) {
|
|
120
|
-
var values = _ref3.values;
|
|
121
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
122
|
-
children: [/*#__PURE__*/_jsx(TimePickerField, {
|
|
123
|
-
clearable: true,
|
|
124
|
-
name: "value",
|
|
125
|
-
label: "Clearable Time Picker",
|
|
126
|
-
fullWidth: true,
|
|
127
|
-
variant: "horizontal"
|
|
128
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
129
|
-
});
|
|
130
|
-
}
|
|
131
|
-
});
|
|
132
|
-
}
|
|
133
|
-
};
|
|
134
|
-
|
|
135
|
-
/**
|
|
136
|
-
* TimePickerField can be disabled to prevent user interaction.
|
|
137
|
-
*
|
|
138
|
-
* Use this when:
|
|
139
|
-
* - The time should be displayed but not editable
|
|
140
|
-
* - Form logic requires certain conditions before editing
|
|
141
|
-
* - You want to show read-only time information
|
|
142
|
-
*/
|
|
143
|
-
export var Disabled = {
|
|
144
|
-
render: function render() {
|
|
145
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
146
|
-
mode: "edit",
|
|
147
|
-
onSubmit: function onSubmit() {
|
|
148
|
-
// not handled
|
|
149
|
-
},
|
|
150
|
-
initialValues: {
|
|
151
|
-
value: "14:30"
|
|
152
|
-
},
|
|
153
|
-
subscription: {
|
|
154
|
-
values: true
|
|
155
|
-
},
|
|
156
|
-
children: function children(_ref4) {
|
|
157
|
-
var values = _ref4.values;
|
|
158
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
159
|
-
children: [/*#__PURE__*/_jsx(TimePickerField, {
|
|
160
|
-
disabled: true,
|
|
161
|
-
name: "value",
|
|
162
|
-
label: "Disabled Time Picker",
|
|
163
|
-
fullWidth: true,
|
|
164
|
-
variant: "horizontal"
|
|
165
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
166
|
-
});
|
|
167
|
-
}
|
|
168
|
-
});
|
|
169
|
-
}
|
|
170
|
-
};
|
|
171
|
-
|
|
172
|
-
/**
|
|
173
|
-
* Before implementing custom validation, try to disable certain values using the props provided by MUI's TimePicker, such as `shouldDisableTime`, `minTime`, `maxTime`.
|
|
174
|
-
*
|
|
175
|
-
* Use this when:
|
|
176
|
-
* - You need to validate the time against a custom rule, which cannot be achieved using the props provided by MUI's TimePicker
|
|
177
|
-
* - You want to provide a custom error message
|
|
178
|
-
* - You want to validate the time asynchronously
|
|
179
|
-
*/
|
|
180
|
-
export var CustomValidation = {
|
|
181
|
-
render: function render() {
|
|
182
|
-
var validateIsNotLunchBreak = /*#__PURE__*/function () {
|
|
183
|
-
var _ref5 = _asyncToGenerator(/*#__PURE__*/_regenerator().m(function _callee(value) {
|
|
184
|
-
var _value$split$map, _value$split$map2, hours, minutes, totalMinutes, lunchStartMinutes, lunchEndMinutes, isDuringLunchBreak;
|
|
185
|
-
return _regenerator().w(function (_context) {
|
|
186
|
-
while (1) switch (_context.n) {
|
|
187
|
-
case 0:
|
|
188
|
-
if (value) {
|
|
189
|
-
_context.n = 1;
|
|
190
|
-
break;
|
|
191
|
-
}
|
|
192
|
-
return _context.a(2, undefined);
|
|
193
|
-
case 1:
|
|
194
|
-
_value$split$map = value.split(":").map(Number), _value$split$map2 = _slicedToArray(_value$split$map, 2), hours = _value$split$map2[0], minutes = _value$split$map2[1];
|
|
195
|
-
totalMinutes = hours * 60 + minutes;
|
|
196
|
-
lunchStartMinutes = 12 * 60;
|
|
197
|
-
lunchEndMinutes = 13 * 60;
|
|
198
|
-
isDuringLunchBreak = totalMinutes >= lunchStartMinutes && totalMinutes < lunchEndMinutes;
|
|
199
|
-
return _context.a(2, isDuringLunchBreak ? "Please select a time outside of lunch break (12:00-13:00)" : undefined);
|
|
200
|
-
}
|
|
201
|
-
}, _callee);
|
|
202
|
-
}));
|
|
203
|
-
return function validateIsNotLunchBreak(_x) {
|
|
204
|
-
return _ref5.apply(this, arguments);
|
|
205
|
-
};
|
|
206
|
-
}();
|
|
207
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
208
|
-
mode: "edit",
|
|
209
|
-
onSubmit: function onSubmit() {
|
|
210
|
-
// not handled
|
|
211
|
-
},
|
|
212
|
-
subscription: {
|
|
213
|
-
values: true
|
|
214
|
-
},
|
|
215
|
-
children: function children() {
|
|
216
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
217
|
-
children: [/*#__PURE__*/_jsx(TimePickerField, {
|
|
218
|
-
name: "value",
|
|
219
|
-
label: "Time Picker",
|
|
220
|
-
helperText: "Lunch break (12:00-13:00) is not allowed",
|
|
221
|
-
fullWidth: true,
|
|
222
|
-
variant: "horizontal",
|
|
223
|
-
validate: validateIsNotLunchBreak
|
|
224
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
225
|
-
});
|
|
226
|
-
}
|
|
227
|
-
});
|
|
228
|
-
}
|
|
229
|
-
};
|