@comet/admin 9.0.0-beta.5 → 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/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/index.d.ts +4 -2
- package/lib/index.d.ts.map +1 -1
- package/lib/index.js +4 -2
- package/package.json +19 -12
- 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/common/toolbar/__stories__/DataGridToolbar.stories.js +0 -76
- package/lib/common/toolbar/__stories__/Toolbar.stories.js +0 -82
- package/lib/dataGrid/__stories__/ClickableRows.stories.js +0 -109
- package/lib/dataGrid/__stories__/CrudMoreActionsMenu.stories.js +0 -50
- package/lib/dataGrid/__stories__/DataGrid.stories.js +0 -94
- package/lib/dataGrid/__stories__/DataGridSingleSelectFilter.stories.js +0 -492
- 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/form/__stories__/AsyncAutocompleteField.stories.js +0 -660
- package/lib/form/__stories__/AsyncSelectField.stories.js +0 -513
- package/lib/form/__stories__/Autocomplete.stories.js +0 -188
- package/lib/form/__stories__/AutocompleteField.stories.js +0 -48
- package/lib/form/__stories__/Checkbox.stories.js +0 -70
- package/lib/form/__stories__/CheckboxField.stories.js +0 -87
- package/lib/form/__stories__/CheckboxListField.stories.js +0 -172
- package/lib/form/__stories__/CustomButtons.stories.js +0 -78
- package/lib/form/__stories__/DependentAsyncSelects.stories.js +0 -91
- package/lib/form/__stories__/DisableAutoNavigation.stories.js +0 -132
- package/lib/form/__stories__/DisabledSubmitIfNotDirty.stories.js +0 -54
- package/lib/form/__stories__/FieldContainer.stories.js +0 -87
- package/lib/form/__stories__/FinalFormFileSelect.stories.js +0 -155
- package/lib/form/__stories__/FormInStack.stories.js +0 -133
- package/lib/form/__stories__/FormLayouts.stories.js +0 -174
- package/lib/form/__stories__/FormValidation.stories.js +0 -82
- package/lib/form/__stories__/Input.stories.js +0 -37
- package/lib/form/__stories__/NumberField.stories.js +0 -38
- package/lib/form/__stories__/Radio.stories.js +0 -101
- package/lib/form/__stories__/RadioGroupField.stories.js +0 -172
- package/lib/form/__stories__/RangeInput.stories.js +0 -239
- package/lib/form/__stories__/RouterTabs.stories.js +0 -96
- package/lib/form/__stories__/RouterTabsInForm.stories.js +0 -73
- package/lib/form/__stories__/RouterTabsInFormWithSubroutes.stories.js +0 -96
- package/lib/form/__stories__/ScrollToErrorField.stories.js +0 -82
- package/lib/form/__stories__/SearchField.stories.js +0 -38
- package/lib/form/__stories__/Select.stories.js +0 -187
- package/lib/form/__stories__/SelectField.stories.js +0 -100
- package/lib/form/__stories__/ShowErrorStrategies.stories.js +0 -107
- package/lib/form/__stories__/SingleTextField.stories.js +0 -108
- package/lib/form/__stories__/StackInForm.stories.js +0 -53
- package/lib/form/__stories__/SubmitErrors.stories.js +0 -90
- package/lib/form/__stories__/Switch.stories.js +0 -49
- package/lib/form/__stories__/SwitchField.stories.js +0 -87
- package/lib/form/__stories__/Tabs.stories.js +0 -78
- package/lib/form/__stories__/TextAreaField.stories.js +0 -38
- package/lib/form/__stories__/TextField.stories.js +0 -67
- package/lib/form/__stories__/ToggleButtonGroupField.stories.js +0 -312
- package/lib/form/__stories__/TwoLevelValidation.stories.js +0 -168
- package/lib/form/__stories__/Typography.stories.js +0 -71
- package/lib/form/file/__stories__/FileDropzone.stories.js +0 -81
- package/lib/form/file/__stories__/FileSelect.stories.js +0 -139
- package/lib/form/file/__stories__/FileSelectListItem.stories.js +0 -108
- package/lib/form/file/__stories__/FileSelectMultipleExamples.stories.js +0 -187
- 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/tabs/__stories__/DynamicTabs.stories.js +0 -84
- package/lib/tabs/__stories__/NestedStackSwitchWithRouterTabs.stories.js +0 -84
- package/lib/tabs/__stories__/OverflowIssues.stories.js +0 -224
- package/lib/tabs/__stories__/RouterTabs.stories.js +0 -31
- package/lib/tabs/__stories__/RouterTabsInStack.stories.js +0 -74
- package/lib/tabs/__stories__/RouterTabsInSubroute.stories.js +0 -68
- package/lib/tabs/__stories__/Tabs.stories.js +0 -219
- 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,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 { DatePickerField } from "../DatePickerField";
|
|
8
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
var config = {
|
|
10
|
-
component: DatePickerField,
|
|
11
|
-
title: "components/dateTime/DatePickerField"
|
|
12
|
-
};
|
|
13
|
-
export default config;
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* The basic DatePickerField component allows users to select a date.
|
|
17
|
-
*
|
|
18
|
-
* Use this when you need:
|
|
19
|
-
* - A simple date input in a form
|
|
20
|
-
* - Users to select a specific date from a calendar interface
|
|
21
|
-
* - Date values to be stored as strings
|
|
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(DatePickerField, {
|
|
37
|
-
name: "value",
|
|
38
|
-
label: "Date Picker",
|
|
39
|
-
fullWidth: true,
|
|
40
|
-
variant: "horizontal"
|
|
41
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* DatePickerField 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 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(DatePickerField, {
|
|
82
|
-
name: "value",
|
|
83
|
-
label: "Date 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
|
-
* DatePickerField with clearable functionality allows users to reset the selected date.
|
|
97
|
-
*
|
|
98
|
-
* Use this when:
|
|
99
|
-
* - The date 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(DatePickerField, {
|
|
117
|
-
clearable: true,
|
|
118
|
-
name: "value",
|
|
119
|
-
label: "Clearable Date Picker",
|
|
120
|
-
fullWidth: true,
|
|
121
|
-
variant: "horizontal"
|
|
122
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
123
|
-
});
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
/**
|
|
130
|
-
* DatePickerField can be disabled to prevent user interaction.
|
|
131
|
-
*
|
|
132
|
-
* Use this when:
|
|
133
|
-
* - The date should be displayed but not editable
|
|
134
|
-
* - Form logic requires certain conditions before editing
|
|
135
|
-
* - You want to show read-only date 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: "2026-01-15"
|
|
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(DatePickerField, {
|
|
154
|
-
disabled: true,
|
|
155
|
-
name: "value",
|
|
156
|
-
label: "Disabled Date 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 DatePicker, such as `shouldDisableDate`, `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 DatePicker
|
|
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 = new Date(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(DatePickerField, {
|
|
209
|
-
name: "value",
|
|
210
|
-
label: "Date 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 { DateRangePicker } from "../DateRangePicker";
|
|
17
|
-
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
18
|
-
var config = {
|
|
19
|
-
component: DateRangePicker,
|
|
20
|
-
title: "components/dateTime/DateRangePicker"
|
|
21
|
-
};
|
|
22
|
-
export default config;
|
|
23
|
-
|
|
24
|
-
/**
|
|
25
|
-
* The basic DateRangePicker component allows users to select a date range from a calendar interface.
|
|
26
|
-
*
|
|
27
|
-
* Use this for date range input fields where users need to pick a start and end date.
|
|
28
|
-
*/
|
|
29
|
-
export var Default = {
|
|
30
|
-
render: function render(args) {
|
|
31
|
-
var _useState = useState({
|
|
32
|
-
start: "2024-01-15",
|
|
33
|
-
end: "2024-01-30"
|
|
34
|
-
}),
|
|
35
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
36
|
-
value = _useState2[0],
|
|
37
|
-
setValue = _useState2[1];
|
|
38
|
-
return /*#__PURE__*/_jsx(DateRangePicker, _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: "2024-01-15",
|
|
48
|
-
end: "2024-01-30"
|
|
49
|
-
}),
|
|
50
|
-
_useState4 = _slicedToArray(_useState3, 2),
|
|
51
|
-
value = _useState4[0],
|
|
52
|
-
setValue = _useState4[1];
|
|
53
|
-
return /*#__PURE__*/_jsx(DateRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
54
|
-
fullWidth: true,
|
|
55
|
-
value: value,
|
|
56
|
-
onChange: setValue
|
|
57
|
-
}));
|
|
58
|
-
}
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
/**
|
|
62
|
-
* DateRangePicker in a required state.
|
|
63
|
-
*
|
|
64
|
-
* Use this when:
|
|
65
|
-
* - The date range selection is mandatory
|
|
66
|
-
* - Form validation requires date range values
|
|
67
|
-
* - Users must select a date 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: "2024-01-15",
|
|
75
|
-
end: "2024-01-30"
|
|
76
|
-
}),
|
|
77
|
-
_useState6 = _slicedToArray(_useState5, 2),
|
|
78
|
-
value = _useState6[0],
|
|
79
|
-
setValue = _useState6[1];
|
|
80
|
-
return /*#__PURE__*/_jsx(DateRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
81
|
-
required: true,
|
|
82
|
-
value: value,
|
|
83
|
-
onChange: setValue
|
|
84
|
-
}));
|
|
85
|
-
}
|
|
86
|
-
};
|
|
87
|
-
|
|
88
|
-
/**
|
|
89
|
-
* DateRangePicker in a disabled state.
|
|
90
|
-
*
|
|
91
|
-
* Use this when:
|
|
92
|
-
* - The date range cannot be changed due to permissions or state
|
|
93
|
-
* - You want to show date 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: "2024-01-15",
|
|
100
|
-
end: "2024-01-30"
|
|
101
|
-
}),
|
|
102
|
-
_useState8 = _slicedToArray(_useState7, 2),
|
|
103
|
-
value = _useState8[0],
|
|
104
|
-
setValue = _useState8[1];
|
|
105
|
-
return /*#__PURE__*/_jsx(DateRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
106
|
-
disabled: true,
|
|
107
|
-
value: value,
|
|
108
|
-
onChange: setValue
|
|
109
|
-
}));
|
|
110
|
-
}
|
|
111
|
-
};
|
|
112
|
-
|
|
113
|
-
/**
|
|
114
|
-
* DateRangePicker in a read-only state.
|
|
115
|
-
*
|
|
116
|
-
* Use this when:
|
|
117
|
-
* - The date range should be visible but not editable
|
|
118
|
-
* - You want to display date 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: "2024-01-15",
|
|
125
|
-
end: "2024-01-30"
|
|
126
|
-
}),
|
|
127
|
-
_useState0 = _slicedToArray(_useState9, 2),
|
|
128
|
-
value = _useState0[0],
|
|
129
|
-
setValue = _useState0[1];
|
|
130
|
-
return /*#__PURE__*/_jsx(DateRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
131
|
-
readOnly: true,
|
|
132
|
-
value: value,
|
|
133
|
-
onChange: setValue
|
|
134
|
-
}));
|
|
135
|
-
}
|
|
136
|
-
};
|
|
137
|
-
|
|
138
|
-
/**
|
|
139
|
-
* DateRangePicker 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 range selection
|
|
145
|
-
*/
|
|
146
|
-
export var WithCustomIcon = {
|
|
147
|
-
render: function render(args) {
|
|
148
|
-
var _useState1 = useState({
|
|
149
|
-
start: "2024-01-15",
|
|
150
|
-
end: "2024-01-30"
|
|
151
|
-
}),
|
|
152
|
-
_useState10 = _slicedToArray(_useState1, 2),
|
|
153
|
-
value = _useState10[0],
|
|
154
|
-
setValue = _useState10[1];
|
|
155
|
-
return /*#__PURE__*/_jsx(DateRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
156
|
-
value: value,
|
|
157
|
-
onChange: setValue,
|
|
158
|
-
iconMapping: {
|
|
159
|
-
openPicker: /*#__PURE__*/_jsx(Edit, {})
|
|
160
|
-
}
|
|
161
|
-
}));
|
|
162
|
-
}
|
|
163
|
-
};
|
|
164
|
-
|
|
165
|
-
/**
|
|
166
|
-
* DateRangePicker 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 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(DateRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
188
|
-
label: "Future Date Range Only",
|
|
189
|
-
minDate: args.minDate,
|
|
190
|
-
value: value,
|
|
191
|
-
onChange: setValue
|
|
192
|
-
}));
|
|
193
|
-
}
|
|
194
|
-
};
|
|
195
|
-
|
|
196
|
-
/**
|
|
197
|
-
* Multiple DateRangePicker instances demonstrating different configurations.
|
|
198
|
-
*
|
|
199
|
-
* This example shows how DateRangePickers can be combined in forms or interfaces
|
|
200
|
-
* to collect multiple date range values with different requirements and states.
|
|
201
|
-
*/
|
|
202
|
-
export var MultiplePickers = {
|
|
203
|
-
render: function render(args) {
|
|
204
|
-
var _useState13 = useState({
|
|
205
|
-
start: "2024-07-01",
|
|
206
|
-
end: "2024-07-15"
|
|
207
|
-
}),
|
|
208
|
-
_useState14 = _slicedToArray(_useState13, 2),
|
|
209
|
-
vacation = _useState14[0],
|
|
210
|
-
setVacation = _useState14[1];
|
|
211
|
-
var _useState15 = useState({
|
|
212
|
-
start: "2024-08-01",
|
|
213
|
-
end: "2024-09-30"
|
|
214
|
-
}),
|
|
215
|
-
_useState16 = _slicedToArray(_useState15, 2),
|
|
216
|
-
project = _useState16[0],
|
|
217
|
-
setProject = _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: "Date Range Selection"
|
|
225
|
-
}), /*#__PURE__*/_jsx(DateRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
226
|
-
label: "Vacation Period",
|
|
227
|
-
fullWidth: true,
|
|
228
|
-
value: vacation,
|
|
229
|
-
onChange: setVacation
|
|
230
|
-
})), /*#__PURE__*/_jsx(DateRangePicker, _objectSpread(_objectSpread({}, args), {}, {
|
|
231
|
-
label: "Project Duration",
|
|
232
|
-
fullWidth: true,
|
|
233
|
-
value: project,
|
|
234
|
-
onChange: setProject
|
|
235
|
-
}))]
|
|
236
|
-
});
|
|
237
|
-
}
|
|
238
|
-
};
|
|
@@ -1,224 +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 { DateRangePickerField } from "../DateRangePickerField";
|
|
8
|
-
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
9
|
-
var config = {
|
|
10
|
-
component: DateRangePickerField,
|
|
11
|
-
title: "components/dateTime/DateRangePickerField"
|
|
12
|
-
};
|
|
13
|
-
export default config;
|
|
14
|
-
|
|
15
|
-
/**
|
|
16
|
-
* The basic DateRangePickerField component allows users to select a date range.
|
|
17
|
-
*
|
|
18
|
-
* Use this when you need:
|
|
19
|
-
* - A date range input in a form
|
|
20
|
-
* - Users to select a start and end date from a calendar interface
|
|
21
|
-
* - Date range values to be stored as objects with start and end 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(DateRangePickerField, {
|
|
37
|
-
name: "value",
|
|
38
|
-
label: "Date Range Picker",
|
|
39
|
-
fullWidth: true,
|
|
40
|
-
variant: "horizontal"
|
|
41
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
42
|
-
});
|
|
43
|
-
}
|
|
44
|
-
});
|
|
45
|
-
}
|
|
46
|
-
};
|
|
47
|
-
|
|
48
|
-
/**
|
|
49
|
-
* DateRangePickerField 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 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(DateRangePickerField, {
|
|
82
|
-
name: "value",
|
|
83
|
-
label: "Date 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
|
-
* DateRangePickerField with clearable functionality allows users to reset the selected date range.
|
|
97
|
-
*
|
|
98
|
-
* Use this when:
|
|
99
|
-
* - The date 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(DateRangePickerField, {
|
|
117
|
-
clearable: true,
|
|
118
|
-
name: "value",
|
|
119
|
-
label: "Clearable Date Range Picker",
|
|
120
|
-
fullWidth: true,
|
|
121
|
-
variant: "horizontal"
|
|
122
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
123
|
-
});
|
|
124
|
-
}
|
|
125
|
-
});
|
|
126
|
-
}
|
|
127
|
-
};
|
|
128
|
-
|
|
129
|
-
/**
|
|
130
|
-
* DateRangePickerField can be disabled to prevent user interaction.
|
|
131
|
-
*
|
|
132
|
-
* Use this when:
|
|
133
|
-
* - The date range should be displayed but not editable
|
|
134
|
-
* - Form logic requires certain conditions before editing
|
|
135
|
-
* - You want to show read-only date 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: "2026-01-15",
|
|
147
|
-
end: "2026-01-20"
|
|
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(DateRangePickerField, {
|
|
157
|
-
disabled: true,
|
|
158
|
-
name: "value",
|
|
159
|
-
label: "Disabled Date 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 DateRangePicker, such as `shouldDisableDate`, `disableFuture`, `disablePast`.
|
|
171
|
-
*
|
|
172
|
-
* Use this when:
|
|
173
|
-
* - You need to validate the date range against a custom rule, which cannot be achieved using the props provided by MUI's DateRangePicker
|
|
174
|
-
* - You want to provide a custom error message
|
|
175
|
-
* - You want to validate the date 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 startDate, endDate, differenceInDays;
|
|
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
|
-
startDate = new Date(value.start);
|
|
192
|
-
endDate = new Date(value.end);
|
|
193
|
-
differenceInDays = (endDate.getTime() - startDate.getTime()) / (1000 * 60 * 60 * 24);
|
|
194
|
-
return _context.a(2, differenceInDays <= 30 ? undefined : "Please select a range no longer than 30 days");
|
|
195
|
-
}
|
|
196
|
-
}, _callee);
|
|
197
|
-
}));
|
|
198
|
-
return function validateMaxThirtyDayRange(_x) {
|
|
199
|
-
return _ref5.apply(this, arguments);
|
|
200
|
-
};
|
|
201
|
-
}();
|
|
202
|
-
return /*#__PURE__*/_jsx(FinalForm, {
|
|
203
|
-
mode: "edit",
|
|
204
|
-
onSubmit: function onSubmit() {
|
|
205
|
-
// not handled
|
|
206
|
-
},
|
|
207
|
-
subscription: {
|
|
208
|
-
values: true
|
|
209
|
-
},
|
|
210
|
-
children: function children() {
|
|
211
|
-
return /*#__PURE__*/_jsxs(_Fragment, {
|
|
212
|
-
children: [/*#__PURE__*/_jsx(DateRangePickerField, {
|
|
213
|
-
name: "value",
|
|
214
|
-
label: "Date Range Picker",
|
|
215
|
-
helperText: "The selected range must not exceed 30 days",
|
|
216
|
-
fullWidth: true,
|
|
217
|
-
variant: "horizontal",
|
|
218
|
-
validate: validateMaxThirtyDayRange
|
|
219
|
-
}), /*#__PURE__*/_jsx(FinalFormDebug, {})]
|
|
220
|
-
});
|
|
221
|
-
}
|
|
222
|
-
});
|
|
223
|
-
}
|
|
224
|
-
};
|