@webiny/admin-ui 6.3.0-beta.2 → 6.3.0-beta.3
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/Accordion/components/AccordionItemAction.d.ts +1 -1
- package/Accordion/components/AccordionItemAction.js.map +1 -1
- package/Calendar/Calendar.d.ts +25 -0
- package/Calendar/Calendar.js +45 -0
- package/Calendar/Calendar.js.map +1 -0
- package/Calendar/calendarClassNames.d.ts +2 -0
- package/Calendar/calendarClassNames.js +33 -0
- package/Calendar/calendarClassNames.js.map +1 -0
- package/Calendar/index.d.ts +1 -0
- package/Calendar/index.js +3 -0
- package/Calendar/index.js.map +1 -0
- package/CodeEditor/CodeEditorPrimitive.js +1 -1
- package/CodeEditor/CodeEditorPrimitive.js.map +1 -1
- package/DatePicker/DatePicker.d.ts +24 -0
- package/DatePicker/DatePicker.js +46 -0
- package/DatePicker/DatePicker.js.map +1 -0
- package/DatePicker/DatePicker.mdx +153 -0
- package/DatePicker/DatePicker.stories.d.ts +25 -0
- package/DatePicker/DatePicker.stories.js +365 -0
- package/DatePicker/DatePicker.stories.js.map +1 -0
- package/DatePicker/index.d.ts +2 -0
- package/DatePicker/index.js +4 -0
- package/DatePicker/index.js.map +1 -0
- package/DatePicker/primitives/DateOnlyPicker.d.ts +4 -0
- package/DatePicker/primitives/DateOnlyPicker.js +78 -0
- package/DatePicker/primitives/DateOnlyPicker.js.map +1 -0
- package/DatePicker/primitives/DatePickerPrimitive.d.ts +22 -0
- package/DatePicker/primitives/DatePickerPrimitive.js +46 -0
- package/DatePicker/primitives/DatePickerPrimitive.js.map +1 -0
- package/DatePicker/primitives/DateRangePicker.d.ts +4 -0
- package/DatePicker/primitives/DateRangePicker.js +69 -0
- package/DatePicker/primitives/DateRangePicker.js.map +1 -0
- package/DatePicker/primitives/DateTimePicker.d.ts +7 -0
- package/DatePicker/primitives/DateTimePicker.js +129 -0
- package/DatePicker/primitives/DateTimePicker.js.map +1 -0
- package/DatePicker/primitives/MonthPicker.d.ts +4 -0
- package/DatePicker/primitives/MonthPicker.js +60 -0
- package/DatePicker/primitives/MonthPicker.js.map +1 -0
- package/DatePicker/primitives/MultipleDatesPicker.d.ts +4 -0
- package/DatePicker/primitives/MultipleDatesPicker.js +73 -0
- package/DatePicker/primitives/MultipleDatesPicker.js.map +1 -0
- package/DatePicker/primitives/MultipleMonthsPicker.d.ts +4 -0
- package/DatePicker/primitives/MultipleMonthsPicker.js +85 -0
- package/DatePicker/primitives/MultipleMonthsPicker.js.map +1 -0
- package/DatePicker/primitives/MultipleYearsPicker.d.ts +4 -0
- package/DatePicker/primitives/MultipleYearsPicker.js +75 -0
- package/DatePicker/primitives/MultipleYearsPicker.js.map +1 -0
- package/DatePicker/primitives/TimeOnlyPicker.d.ts +4 -0
- package/DatePicker/primitives/TimeOnlyPicker.js +24 -0
- package/DatePicker/primitives/TimeOnlyPicker.js.map +1 -0
- package/DatePicker/primitives/WeekPicker.d.ts +4 -0
- package/DatePicker/primitives/WeekPicker.js +97 -0
- package/DatePicker/primitives/WeekPicker.js.map +1 -0
- package/DatePicker/primitives/YearPicker.d.ts +4 -0
- package/DatePicker/primitives/YearPicker.js +54 -0
- package/DatePicker/primitives/YearPicker.js.map +1 -0
- package/DatePicker/primitives/components/DatePickerTrigger.d.ts +13 -0
- package/DatePicker/primitives/components/DatePickerTrigger.js +45 -0
- package/DatePicker/primitives/components/DatePickerTrigger.js.map +1 -0
- package/DatePicker/primitives/components/MonthGrid.d.ts +7 -0
- package/DatePicker/primitives/components/MonthGrid.js +23 -0
- package/DatePicker/primitives/components/MonthGrid.js.map +1 -0
- package/DatePicker/primitives/components/SelectedTagsList.d.ts +11 -0
- package/DatePicker/primitives/components/SelectedTagsList.js +23 -0
- package/DatePicker/primitives/components/SelectedTagsList.js.map +1 -0
- package/DatePicker/primitives/components/TimePicker.d.ts +13 -0
- package/DatePicker/primitives/components/TimePicker.js +33 -0
- package/DatePicker/primitives/components/TimePicker.js.map +1 -0
- package/DatePicker/primitives/components/YearGrid.d.ts +8 -0
- package/DatePicker/primitives/components/YearGrid.js +46 -0
- package/DatePicker/primitives/components/YearGrid.js.map +1 -0
- package/DatePicker/primitives/components/YearStepper.d.ts +7 -0
- package/DatePicker/primitives/components/YearStepper.js +36 -0
- package/DatePicker/primitives/components/YearStepper.js.map +1 -0
- package/DatePicker/primitives/components/index.d.ts +6 -0
- package/DatePicker/primitives/components/index.js +8 -0
- package/DatePicker/primitives/components/index.js.map +1 -0
- package/DatePicker/primitives/index.d.ts +1 -0
- package/DatePicker/primitives/index.js +3 -0
- package/DatePicker/primitives/index.js.map +1 -0
- package/DatePicker/utils/constants.d.ts +3 -0
- package/DatePicker/utils/constants.js +5 -0
- package/DatePicker/utils/constants.js.map +1 -0
- package/DatePicker/utils/dateHelpers.d.ts +24 -0
- package/DatePicker/utils/dateHelpers.js +184 -0
- package/DatePicker/utils/dateHelpers.js.map +1 -0
- package/DatePicker/utils/index.d.ts +3 -0
- package/DatePicker/utils/index.js +5 -0
- package/DatePicker/utils/index.js.map +1 -0
- package/DatePicker/utils/types.d.ts +81 -0
- package/DatePicker/utils/types.js +3 -0
- package/DatePicker/utils/types.js.map +1 -0
- package/Dialog/Dialog.d.ts +1 -0
- package/Dialog/Dialog.js +9 -3
- package/Dialog/Dialog.js.map +1 -1
- package/Dialog/components/DialogBody.d.ts +2 -2
- package/Dialog/components/DialogBody.js +10 -3
- package/Dialog/components/DialogBody.js.map +1 -1
- package/Dialog/components/DialogContent.d.ts +3 -0
- package/Dialog/components/DialogContent.js +11 -4
- package/Dialog/components/DialogContent.js.map +1 -1
- package/FilePicker/FilePicker.d.ts +1 -1
- package/FilePicker/FilePicker.js.map +1 -1
- package/FilePicker/FilePicker.stories.js +4 -5
- package/FilePicker/FilePicker.stories.js.map +1 -1
- package/FilePicker/domains/FileItem.js +2 -0
- package/FilePicker/domains/FileItem.js.map +1 -1
- package/List/components/ListItemAction.d.ts +1 -1
- package/List/components/ListItemAction.js.map +1 -1
- package/List/components/ListItemHandle.d.ts +1 -1
- package/List/components/ListItemHandle.js.map +1 -1
- package/MultiFilePicker/MultiFilePicker.stories.js +4 -5
- package/MultiFilePicker/MultiFilePicker.stories.js.map +1 -1
- package/RangeSlider/primitives/RangeSliderPrimitive.js +1 -1
- package/RangeSlider/primitives/RangeSliderPrimitive.js.map +1 -1
- package/Sidebar/Sidebar.js +1 -1
- package/Sidebar/Sidebar.js.map +1 -1
- package/Sidebar/components/SidebarContent.js +1 -1
- package/Sidebar/components/SidebarContent.js.map +1 -1
- package/Sidebar/components/items/SidebarMenuRootButton.js +1 -1
- package/Sidebar/components/items/SidebarMenuRootButton.js.map +1 -1
- package/Sidebar/components/items/SidebarMenuRootItem.js +2 -1
- package/Sidebar/components/items/SidebarMenuRootItem.js.map +1 -1
- package/Sidebar/components/items/SidebarMenuSubButton.js +1 -1
- package/Sidebar/components/items/SidebarMenuSubButton.js.map +1 -1
- package/Tabs/Tabs.js +1 -1
- package/Tabs/Tabs.js.map +1 -1
- package/exports/admin/ui.d.ts +1 -0
- package/exports/admin/ui.js +2 -0
- package/exports/admin/ui.js.map +1 -1
- package/index.d.ts +2 -0
- package/index.js +2 -0
- package/index.js.map +1 -1
- package/package.json +19 -15
|
@@ -0,0 +1,365 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { addDays, nextSaturday } from "date-fns";
|
|
3
|
+
import { DatePicker } from "./DatePicker.js";
|
|
4
|
+
const meta = {
|
|
5
|
+
title: "Components/Form/DatePicker",
|
|
6
|
+
component: DatePicker,
|
|
7
|
+
argTypes: {
|
|
8
|
+
onChange: {
|
|
9
|
+
action: "onChange"
|
|
10
|
+
},
|
|
11
|
+
type: {
|
|
12
|
+
control: "select",
|
|
13
|
+
options: ["date", "time", "dateTimeLocal", "dateTimeTz", "month", "week", "year", "dateRange", "multipleDates", "multipleMonths", "multipleYears"],
|
|
14
|
+
defaultValue: "date"
|
|
15
|
+
},
|
|
16
|
+
disabled: {
|
|
17
|
+
control: "boolean",
|
|
18
|
+
defaultValue: false
|
|
19
|
+
}
|
|
20
|
+
},
|
|
21
|
+
parameters: {
|
|
22
|
+
layout: "padded"
|
|
23
|
+
},
|
|
24
|
+
render: args => {
|
|
25
|
+
const [value, setValue] = useState();
|
|
26
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
27
|
+
value: value,
|
|
28
|
+
onChange: setValue
|
|
29
|
+
}));
|
|
30
|
+
}
|
|
31
|
+
};
|
|
32
|
+
export default meta;
|
|
33
|
+
export const Default = {
|
|
34
|
+
args: {
|
|
35
|
+
type: "date"
|
|
36
|
+
}
|
|
37
|
+
};
|
|
38
|
+
export const WithLabel = {
|
|
39
|
+
args: {
|
|
40
|
+
type: "date",
|
|
41
|
+
label: "Any field label"
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
export const WithLabelRequired = {
|
|
45
|
+
args: {
|
|
46
|
+
type: "date",
|
|
47
|
+
label: "Any field label",
|
|
48
|
+
required: true
|
|
49
|
+
}
|
|
50
|
+
};
|
|
51
|
+
export const WithDescription = {
|
|
52
|
+
args: {
|
|
53
|
+
type: "date",
|
|
54
|
+
description: "Provide the required information for processing your request."
|
|
55
|
+
}
|
|
56
|
+
};
|
|
57
|
+
export const WithNotes = {
|
|
58
|
+
args: {
|
|
59
|
+
type: "date",
|
|
60
|
+
note: "Note: Ensure your selection or input is accurate before proceeding."
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
export const WithErrors = {
|
|
64
|
+
args: {
|
|
65
|
+
type: "date",
|
|
66
|
+
validation: {
|
|
67
|
+
isValid: false,
|
|
68
|
+
message: "This field is required."
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
export const Disabled = {
|
|
73
|
+
args: {
|
|
74
|
+
type: "date",
|
|
75
|
+
label: "Any field label",
|
|
76
|
+
disabled: true
|
|
77
|
+
}
|
|
78
|
+
};
|
|
79
|
+
export const FullExample = {
|
|
80
|
+
args: {
|
|
81
|
+
type: "date",
|
|
82
|
+
label: "Any field label",
|
|
83
|
+
required: true,
|
|
84
|
+
description: "Provide the required information for processing your request.",
|
|
85
|
+
note: "Note: Ensure your selection or input is accurate before proceeding.",
|
|
86
|
+
validation: {
|
|
87
|
+
isValid: false,
|
|
88
|
+
message: "This field is required."
|
|
89
|
+
}
|
|
90
|
+
}
|
|
91
|
+
};
|
|
92
|
+
export const WithPresets = {
|
|
93
|
+
render: args => {
|
|
94
|
+
const [value, setValue] = useState();
|
|
95
|
+
const presets = [{
|
|
96
|
+
label: "Today",
|
|
97
|
+
value: () => new Date()
|
|
98
|
+
}, {
|
|
99
|
+
label: "Tomorrow",
|
|
100
|
+
value: () => addDays(new Date(), 1)
|
|
101
|
+
}, {
|
|
102
|
+
label: "In 3 days",
|
|
103
|
+
value: () => addDays(new Date(), 3)
|
|
104
|
+
}, {
|
|
105
|
+
label: "In a week",
|
|
106
|
+
value: () => addDays(new Date(), 7)
|
|
107
|
+
}, {
|
|
108
|
+
label: "In 2 weeks",
|
|
109
|
+
value: () => addDays(new Date(), 14)
|
|
110
|
+
}, {
|
|
111
|
+
label: "Next Saturday",
|
|
112
|
+
value: () => nextSaturday(new Date())
|
|
113
|
+
}];
|
|
114
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
115
|
+
type: "date",
|
|
116
|
+
value: value,
|
|
117
|
+
onChange: setValue,
|
|
118
|
+
presets: presets
|
|
119
|
+
}));
|
|
120
|
+
},
|
|
121
|
+
args: {
|
|
122
|
+
label: "Pick a date",
|
|
123
|
+
description: "Choose a date or use a preset."
|
|
124
|
+
}
|
|
125
|
+
};
|
|
126
|
+
export const TypeTime = {
|
|
127
|
+
render: args => {
|
|
128
|
+
const [value, setValue] = useState();
|
|
129
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
130
|
+
type: "time",
|
|
131
|
+
value: value,
|
|
132
|
+
onChange: setValue
|
|
133
|
+
}));
|
|
134
|
+
},
|
|
135
|
+
args: {
|
|
136
|
+
label: "Time"
|
|
137
|
+
}
|
|
138
|
+
};
|
|
139
|
+
export const TypeDateTimeLocal = {
|
|
140
|
+
render: args => {
|
|
141
|
+
const [value, setValue] = useState();
|
|
142
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
143
|
+
type: "dateTimeLocal",
|
|
144
|
+
value: value,
|
|
145
|
+
onChange: setValue
|
|
146
|
+
}));
|
|
147
|
+
},
|
|
148
|
+
args: {
|
|
149
|
+
label: "Date & Time (local)"
|
|
150
|
+
}
|
|
151
|
+
};
|
|
152
|
+
export const TypeDateTimeTz = {
|
|
153
|
+
render: args => {
|
|
154
|
+
const [value, setValue] = useState();
|
|
155
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
156
|
+
type: "dateTimeTz",
|
|
157
|
+
value: value,
|
|
158
|
+
onChange: setValue
|
|
159
|
+
}));
|
|
160
|
+
},
|
|
161
|
+
args: {
|
|
162
|
+
label: "Date & Time (with timezone)"
|
|
163
|
+
}
|
|
164
|
+
};
|
|
165
|
+
export const TypeMonth = {
|
|
166
|
+
render: args => {
|
|
167
|
+
const [value, setValue] = useState();
|
|
168
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
169
|
+
type: "month",
|
|
170
|
+
value: value,
|
|
171
|
+
onChange: setValue
|
|
172
|
+
}));
|
|
173
|
+
},
|
|
174
|
+
args: {
|
|
175
|
+
label: "Month"
|
|
176
|
+
}
|
|
177
|
+
};
|
|
178
|
+
export const TypeWeek = {
|
|
179
|
+
render: args => {
|
|
180
|
+
const [value, setValue] = useState();
|
|
181
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
182
|
+
type: "week",
|
|
183
|
+
value: value,
|
|
184
|
+
onChange: setValue
|
|
185
|
+
}));
|
|
186
|
+
},
|
|
187
|
+
args: {
|
|
188
|
+
label: "Week"
|
|
189
|
+
}
|
|
190
|
+
};
|
|
191
|
+
export const TypeYear = {
|
|
192
|
+
render: args => {
|
|
193
|
+
const [value, setValue] = useState();
|
|
194
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
195
|
+
type: "year",
|
|
196
|
+
value: value,
|
|
197
|
+
onChange: setValue,
|
|
198
|
+
yearRange: [2015, 2035]
|
|
199
|
+
}));
|
|
200
|
+
},
|
|
201
|
+
args: {
|
|
202
|
+
label: "Year"
|
|
203
|
+
}
|
|
204
|
+
};
|
|
205
|
+
export const TypeDateRange = {
|
|
206
|
+
render: args => {
|
|
207
|
+
const [value, setValue] = useState();
|
|
208
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
209
|
+
type: "dateRange",
|
|
210
|
+
value: value,
|
|
211
|
+
onChange: setValue
|
|
212
|
+
}));
|
|
213
|
+
},
|
|
214
|
+
args: {
|
|
215
|
+
label: "Date Range"
|
|
216
|
+
}
|
|
217
|
+
};
|
|
218
|
+
export const TypeMultipleDates = {
|
|
219
|
+
render: args => {
|
|
220
|
+
const [value, setValue] = useState([]);
|
|
221
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
222
|
+
type: "multipleDates",
|
|
223
|
+
value: value,
|
|
224
|
+
onChange: setValue
|
|
225
|
+
}));
|
|
226
|
+
},
|
|
227
|
+
args: {
|
|
228
|
+
label: "Multiple Dates"
|
|
229
|
+
}
|
|
230
|
+
};
|
|
231
|
+
export const TypeMultipleMonths = {
|
|
232
|
+
render: args => {
|
|
233
|
+
const [value, setValue] = useState([]);
|
|
234
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
235
|
+
type: "multipleMonths",
|
|
236
|
+
value: value,
|
|
237
|
+
onChange: setValue
|
|
238
|
+
}));
|
|
239
|
+
},
|
|
240
|
+
args: {
|
|
241
|
+
label: "Multiple Months"
|
|
242
|
+
}
|
|
243
|
+
};
|
|
244
|
+
export const TypeMultipleYears = {
|
|
245
|
+
render: args => {
|
|
246
|
+
const [value, setValue] = useState([]);
|
|
247
|
+
return /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
248
|
+
type: "multipleYears",
|
|
249
|
+
value: value,
|
|
250
|
+
onChange: setValue,
|
|
251
|
+
yearRange: [2015, 2035]
|
|
252
|
+
}));
|
|
253
|
+
},
|
|
254
|
+
args: {
|
|
255
|
+
label: "Multiple Years"
|
|
256
|
+
}
|
|
257
|
+
};
|
|
258
|
+
const formatValue = value => {
|
|
259
|
+
if (value === undefined || value === null) {
|
|
260
|
+
return "undefined";
|
|
261
|
+
}
|
|
262
|
+
if (value instanceof Date) {
|
|
263
|
+
return value.toISOString();
|
|
264
|
+
}
|
|
265
|
+
if (Array.isArray(value)) {
|
|
266
|
+
return JSON.stringify(value.map(v => v instanceof Date ? v.toISOString() : v), null, 2);
|
|
267
|
+
}
|
|
268
|
+
if (typeof value === "object") {
|
|
269
|
+
return JSON.stringify(value, (_k, v) => v instanceof Date ? v.toISOString() : v, 2);
|
|
270
|
+
}
|
|
271
|
+
return String(value);
|
|
272
|
+
};
|
|
273
|
+
const DocumentationInner = args => {
|
|
274
|
+
const isMultiple = args.type?.startsWith("multiple");
|
|
275
|
+
const [value, setValue] = useState(isMultiple ? [] : undefined);
|
|
276
|
+
const [validation, setValidation] = useState({
|
|
277
|
+
isValid: true,
|
|
278
|
+
message: ""
|
|
279
|
+
});
|
|
280
|
+
const handleChange = newValue => {
|
|
281
|
+
setValue(newValue);
|
|
282
|
+
const isEmpty = newValue === undefined || newValue === null || newValue === "" || Array.isArray(newValue) && newValue.length === 0;
|
|
283
|
+
if (args.required && isEmpty) {
|
|
284
|
+
setValidation({
|
|
285
|
+
isValid: false,
|
|
286
|
+
message: "This field is required"
|
|
287
|
+
});
|
|
288
|
+
} else {
|
|
289
|
+
setValidation({
|
|
290
|
+
isValid: true,
|
|
291
|
+
message: ""
|
|
292
|
+
});
|
|
293
|
+
}
|
|
294
|
+
};
|
|
295
|
+
return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(DatePicker, Object.assign({}, args, {
|
|
296
|
+
value: value,
|
|
297
|
+
onChange: handleChange,
|
|
298
|
+
validation: validation
|
|
299
|
+
})), /*#__PURE__*/React.createElement("div", {
|
|
300
|
+
className: "mt-md rounded-md border-sm border-neutral-muted bg-neutral-light p-sm"
|
|
301
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
302
|
+
className: "text-xs font-medium text-neutral-dimmed mb-xs"
|
|
303
|
+
}, "Current value"), /*#__PURE__*/React.createElement("pre", {
|
|
304
|
+
className: "text-sm text-neutral-strong whitespace-pre-wrap m-0"
|
|
305
|
+
}, formatValue(value))));
|
|
306
|
+
};
|
|
307
|
+
export const Documentation = {
|
|
308
|
+
render: args => {
|
|
309
|
+
return /*#__PURE__*/React.createElement(DocumentationInner, Object.assign({
|
|
310
|
+
key: args.type
|
|
311
|
+
}, args));
|
|
312
|
+
},
|
|
313
|
+
args: {
|
|
314
|
+
type: "date",
|
|
315
|
+
label: "Event Date",
|
|
316
|
+
required: true,
|
|
317
|
+
disabled: false,
|
|
318
|
+
description: "Select the date for your event",
|
|
319
|
+
note: "Note: Choose a date that works for all participants",
|
|
320
|
+
placeholder: "Pick a date",
|
|
321
|
+
validation: undefined
|
|
322
|
+
},
|
|
323
|
+
argTypes: {
|
|
324
|
+
type: {
|
|
325
|
+
description: "The type of date picker variant to render",
|
|
326
|
+
control: "select",
|
|
327
|
+
options: ["date", "time", "dateTimeLocal", "dateTimeTz", "month", "week", "year", "dateRange", "multipleDates", "multipleMonths", "multipleYears"],
|
|
328
|
+
defaultValue: "date"
|
|
329
|
+
},
|
|
330
|
+
label: {
|
|
331
|
+
description: "Label text displayed above the picker",
|
|
332
|
+
control: "text"
|
|
333
|
+
},
|
|
334
|
+
required: {
|
|
335
|
+
description: "Makes the field required",
|
|
336
|
+
control: "boolean",
|
|
337
|
+
defaultValue: true
|
|
338
|
+
},
|
|
339
|
+
disabled: {
|
|
340
|
+
description: "Disables the date picker",
|
|
341
|
+
control: "boolean",
|
|
342
|
+
defaultValue: false
|
|
343
|
+
},
|
|
344
|
+
description: {
|
|
345
|
+
description: "Helper text displayed below the label",
|
|
346
|
+
control: "text"
|
|
347
|
+
},
|
|
348
|
+
note: {
|
|
349
|
+
description: "Additional note displayed below the picker",
|
|
350
|
+
control: "text"
|
|
351
|
+
},
|
|
352
|
+
placeholder: {
|
|
353
|
+
description: "Placeholder text shown when no date is selected",
|
|
354
|
+
control: "text"
|
|
355
|
+
},
|
|
356
|
+
validation: {
|
|
357
|
+
description: "Object containing validation state and message. Please refer to the example code for details on usage."
|
|
358
|
+
},
|
|
359
|
+
onChange: {
|
|
360
|
+
description: "Callback function when the value changes"
|
|
361
|
+
}
|
|
362
|
+
}
|
|
363
|
+
};
|
|
364
|
+
|
|
365
|
+
//# sourceMappingURL=DatePicker.stories.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useState","addDays","nextSaturday","DatePicker","meta","title","component","argTypes","onChange","action","type","control","options","defaultValue","disabled","parameters","layout","render","args","value","setValue","createElement","Object","assign","Default","WithLabel","label","WithLabelRequired","required","WithDescription","description","WithNotes","note","WithErrors","validation","isValid","message","Disabled","FullExample","WithPresets","presets","Date","TypeTime","TypeDateTimeLocal","TypeDateTimeTz","TypeMonth","TypeWeek","TypeYear","yearRange","TypeDateRange","TypeMultipleDates","TypeMultipleMonths","TypeMultipleYears","formatValue","undefined","toISOString","Array","isArray","JSON","stringify","map","v","_k","String","DocumentationInner","isMultiple","startsWith","setValidation","handleChange","newValue","isEmpty","length","className","Documentation","key","placeholder"],"sources":["DatePicker.stories.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react-webpack5\";\nimport { addDays, nextSaturday } from \"date-fns\";\nimport { DatePicker } from \"./DatePicker.js\";\n\nconst meta: Meta<typeof DatePicker> = {\n title: \"Components/Form/DatePicker\",\n component: DatePicker,\n argTypes: {\n onChange: { action: \"onChange\" },\n type: {\n control: \"select\",\n options: [\n \"date\",\n \"time\",\n \"dateTimeLocal\",\n \"dateTimeTz\",\n \"month\",\n \"week\",\n \"year\",\n \"dateRange\",\n \"multipleDates\",\n \"multipleMonths\",\n \"multipleYears\"\n ],\n defaultValue: \"date\"\n },\n disabled: {\n control: \"boolean\",\n defaultValue: false\n }\n },\n parameters: {\n layout: \"padded\"\n },\n render: args => {\n const [value, setValue] = useState<any>();\n return <DatePicker {...args} value={value} onChange={setValue} />;\n }\n};\n\nexport default meta;\ntype Story = StoryObj<typeof DatePicker>;\n\nexport const Default: Story = {\n args: {\n type: \"date\"\n }\n};\n\nexport const WithLabel: Story = {\n args: {\n type: \"date\",\n label: \"Any field label\"\n }\n};\n\nexport const WithLabelRequired: Story = {\n args: {\n type: \"date\",\n label: \"Any field label\",\n required: true\n }\n};\n\nexport const WithDescription: Story = {\n args: {\n type: \"date\",\n description: \"Provide the required information for processing your request.\"\n }\n};\n\nexport const WithNotes: Story = {\n args: {\n type: \"date\",\n note: \"Note: Ensure your selection or input is accurate before proceeding.\"\n }\n};\n\nexport const WithErrors: Story = {\n args: {\n type: \"date\",\n validation: {\n isValid: false,\n message: \"This field is required.\"\n }\n }\n};\n\nexport const Disabled: Story = {\n args: {\n type: \"date\",\n label: \"Any field label\",\n disabled: true\n }\n};\n\nexport const FullExample: Story = {\n args: {\n type: \"date\",\n label: \"Any field label\",\n required: true,\n description: \"Provide the required information for processing your request.\",\n note: \"Note: Ensure your selection or input is accurate before proceeding.\",\n validation: {\n isValid: false,\n message: \"This field is required.\"\n }\n }\n};\n\nexport const WithPresets: Story = {\n render: args => {\n const [value, setValue] = useState<string | undefined>();\n const presets = [\n { label: \"Today\", value: () => new Date() },\n { label: \"Tomorrow\", value: () => addDays(new Date(), 1) },\n { label: \"In 3 days\", value: () => addDays(new Date(), 3) },\n { label: \"In a week\", value: () => addDays(new Date(), 7) },\n { label: \"In 2 weeks\", value: () => addDays(new Date(), 14) },\n { label: \"Next Saturday\", value: () => nextSaturday(new Date()) }\n ];\n return (\n <DatePicker {...args} type=\"date\" value={value} onChange={setValue} presets={presets} />\n );\n },\n args: {\n label: \"Pick a date\",\n description: \"Choose a date or use a preset.\"\n }\n};\n\nexport const TypeTime: Story = {\n render: args => {\n const [value, setValue] = useState<string | undefined>();\n return <DatePicker {...args} type=\"time\" value={value} onChange={setValue} />;\n },\n args: {\n label: \"Time\"\n }\n};\n\nexport const TypeDateTimeLocal: Story = {\n render: args => {\n const [value, setValue] = useState<string | undefined>();\n return <DatePicker {...args} type=\"dateTimeLocal\" value={value} onChange={setValue} />;\n },\n args: {\n label: \"Date & Time (local)\"\n }\n};\n\nexport const TypeDateTimeTz: Story = {\n render: args => {\n const [value, setValue] = useState<string | undefined>();\n return <DatePicker {...args} type=\"dateTimeTz\" value={value} onChange={setValue} />;\n },\n args: {\n label: \"Date & Time (with timezone)\"\n }\n};\n\nexport const TypeMonth: Story = {\n render: args => {\n const [value, setValue] = useState<string | undefined>();\n return <DatePicker {...args} type=\"month\" value={value} onChange={setValue} />;\n },\n args: {\n label: \"Month\"\n }\n};\n\nexport const TypeWeek: Story = {\n render: args => {\n const [value, setValue] = useState<string | undefined>();\n return <DatePicker {...args} type=\"week\" value={value} onChange={setValue} />;\n },\n args: {\n label: \"Week\"\n }\n};\n\nexport const TypeYear: Story = {\n render: args => {\n const [value, setValue] = useState<number | undefined>();\n return (\n <DatePicker\n {...args}\n type=\"year\"\n value={value}\n onChange={setValue}\n yearRange={[2015, 2035]}\n />\n );\n },\n args: {\n label: \"Year\"\n }\n};\n\nexport const TypeDateRange: Story = {\n render: args => {\n const [value, setValue] = useState<{ from?: string; to?: string } | undefined>();\n return <DatePicker {...args} type=\"dateRange\" value={value} onChange={setValue} />;\n },\n args: {\n label: \"Date Range\"\n }\n};\n\nexport const TypeMultipleDates: Story = {\n render: args => {\n const [value, setValue] = useState<string[]>([]);\n return <DatePicker {...args} type=\"multipleDates\" value={value} onChange={setValue} />;\n },\n args: {\n label: \"Multiple Dates\"\n }\n};\n\nexport const TypeMultipleMonths: Story = {\n render: args => {\n const [value, setValue] = useState<string[]>([]);\n return <DatePicker {...args} type=\"multipleMonths\" value={value} onChange={setValue} />;\n },\n args: {\n label: \"Multiple Months\"\n }\n};\n\nexport const TypeMultipleYears: Story = {\n render: args => {\n const [value, setValue] = useState<number[]>([]);\n return (\n <DatePicker\n {...args}\n type=\"multipleYears\"\n value={value}\n onChange={setValue}\n yearRange={[2015, 2035]}\n />\n );\n },\n args: {\n label: \"Multiple Years\"\n }\n};\n\nconst formatValue = (value: any): string => {\n if (value === undefined || value === null) {\n return \"undefined\";\n }\n if (value instanceof Date) {\n return value.toISOString();\n }\n if (Array.isArray(value)) {\n return JSON.stringify(\n value.map((v: any) => (v instanceof Date ? v.toISOString() : v)),\n null,\n 2\n );\n }\n if (typeof value === \"object\") {\n return JSON.stringify(value, (_k, v) => (v instanceof Date ? v.toISOString() : v), 2);\n }\n return String(value);\n};\n\nconst DocumentationInner = (args: any) => {\n const isMultiple = (args.type as string)?.startsWith(\"multiple\");\n const [value, setValue] = useState<any>(isMultiple ? [] : undefined);\n const [validation, setValidation] = useState({ isValid: true, message: \"\" });\n\n const handleChange = (newValue: any) => {\n setValue(newValue);\n const isEmpty =\n newValue === undefined ||\n newValue === null ||\n newValue === \"\" ||\n (Array.isArray(newValue) && newValue.length === 0);\n if (args.required && isEmpty) {\n setValidation({ isValid: false, message: \"This field is required\" });\n } else {\n setValidation({ isValid: true, message: \"\" });\n }\n };\n\n return (\n <div>\n <DatePicker {...args} value={value} onChange={handleChange} validation={validation} />\n <div className=\"mt-md rounded-md border-sm border-neutral-muted bg-neutral-light p-sm\">\n <div className=\"text-xs font-medium text-neutral-dimmed mb-xs\">Current value</div>\n <pre className=\"text-sm text-neutral-strong whitespace-pre-wrap m-0\">\n {formatValue(value)}\n </pre>\n </div>\n </div>\n );\n};\n\nexport const Documentation: Story = {\n render: args => {\n return <DocumentationInner key={args.type as string} {...args} />;\n },\n args: {\n type: \"date\",\n label: \"Event Date\",\n required: true,\n disabled: false,\n description: \"Select the date for your event\",\n note: \"Note: Choose a date that works for all participants\",\n placeholder: \"Pick a date\",\n validation: undefined\n },\n argTypes: {\n type: {\n description: \"The type of date picker variant to render\",\n control: \"select\",\n options: [\n \"date\",\n \"time\",\n \"dateTimeLocal\",\n \"dateTimeTz\",\n \"month\",\n \"week\",\n \"year\",\n \"dateRange\",\n \"multipleDates\",\n \"multipleMonths\",\n \"multipleYears\"\n ],\n defaultValue: \"date\"\n },\n label: {\n description: \"Label text displayed above the picker\",\n control: \"text\"\n },\n required: {\n description: \"Makes the field required\",\n control: \"boolean\",\n defaultValue: true\n },\n disabled: {\n description: \"Disables the date picker\",\n control: \"boolean\",\n defaultValue: false\n },\n description: {\n description: \"Helper text displayed below the label\",\n control: \"text\"\n },\n note: {\n description: \"Additional note displayed below the picker\",\n control: \"text\"\n },\n placeholder: {\n description: \"Placeholder text shown when no date is selected\",\n control: \"text\"\n },\n validation: {\n description:\n \"Object containing validation state and message. Please refer to the example code for details on usage.\"\n },\n onChange: {\n description: \"Callback function when the value changes\"\n }\n }\n};\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":[],"sources":["index.ts"],"sourcesContent":["export * from \"./DatePicker.js\";\nexport * from \"./primitives/index.js\";\n"],"mappings":"AAAA;AACA","ignoreList":[]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { DateOnlyPickerProps } from "../utils/types.js";
|
|
3
|
+
declare const DateOnlyPicker: ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, presets, displayFormat }: DateOnlyPickerProps) => React.JSX.Element;
|
|
4
|
+
export { DateOnlyPicker };
|
|
@@ -0,0 +1,78 @@
|
|
|
1
|
+
import React, { useState } from "react";
|
|
2
|
+
import { format } from "date-fns";
|
|
3
|
+
import { Button } from "../../Button/index.js";
|
|
4
|
+
import { Calendar } from "../../Calendar/index.js";
|
|
5
|
+
import { PopoverPrimitive } from "../../Popover/index.js";
|
|
6
|
+
import { formatDateForDisplay } from "../utils/dateHelpers.js";
|
|
7
|
+
import { DatePickerTrigger } from "./components/DatePickerTrigger.js";
|
|
8
|
+
const DateOnlyPicker = ({
|
|
9
|
+
value,
|
|
10
|
+
onChange,
|
|
11
|
+
placeholder,
|
|
12
|
+
disabled,
|
|
13
|
+
size,
|
|
14
|
+
variant,
|
|
15
|
+
invalid,
|
|
16
|
+
weekStartsOn,
|
|
17
|
+
onOpenChange,
|
|
18
|
+
className,
|
|
19
|
+
presets,
|
|
20
|
+
displayFormat
|
|
21
|
+
}) => {
|
|
22
|
+
const [open, setOpen] = useState(false);
|
|
23
|
+
const handleOpenChange = isOpen => {
|
|
24
|
+
setOpen(isOpen);
|
|
25
|
+
if (onOpenChange) {
|
|
26
|
+
onOpenChange(isOpen);
|
|
27
|
+
}
|
|
28
|
+
};
|
|
29
|
+
const handlePresetClick = computeDate => {
|
|
30
|
+
if (onChange) {
|
|
31
|
+
onChange(format(computeDate(), "yyyy-MM-dd"));
|
|
32
|
+
}
|
|
33
|
+
handleOpenChange(false);
|
|
34
|
+
};
|
|
35
|
+
const displayValue = formatDateForDisplay(value, "date", displayFormat);
|
|
36
|
+
const selectedDate = value ? new Date(value) : undefined;
|
|
37
|
+
return /*#__PURE__*/React.createElement("div", {
|
|
38
|
+
className: className
|
|
39
|
+
}, /*#__PURE__*/React.createElement(PopoverPrimitive, {
|
|
40
|
+
open: open,
|
|
41
|
+
onOpenChange: handleOpenChange
|
|
42
|
+
}, /*#__PURE__*/React.createElement(DatePickerTrigger, {
|
|
43
|
+
displayValue: displayValue,
|
|
44
|
+
placeholder: placeholder ?? "Pick a date",
|
|
45
|
+
disabled: disabled,
|
|
46
|
+
size: size,
|
|
47
|
+
variant: variant,
|
|
48
|
+
invalid: invalid
|
|
49
|
+
}), /*#__PURE__*/React.createElement(PopoverPrimitive.Content, {
|
|
50
|
+
align: "start"
|
|
51
|
+
}, /*#__PURE__*/React.createElement("div", {
|
|
52
|
+
className: presets?.length ? "flex" : undefined
|
|
53
|
+
}, /*#__PURE__*/React.createElement(Calendar, {
|
|
54
|
+
mode: "single",
|
|
55
|
+
selected: selectedDate,
|
|
56
|
+
onSelect: date => {
|
|
57
|
+
if (onChange) {
|
|
58
|
+
onChange(date ? format(date, "yyyy-MM-dd") : undefined);
|
|
59
|
+
}
|
|
60
|
+
handleOpenChange(false);
|
|
61
|
+
},
|
|
62
|
+
weekStartsOn: weekStartsOn
|
|
63
|
+
}), presets && presets.length > 0 && /*#__PURE__*/React.createElement("div", {
|
|
64
|
+
className: "flex flex-col gap-xs border-l-sm border-neutral-muted p-sm min-w-[130px]"
|
|
65
|
+
}, presets.map(preset => {
|
|
66
|
+
const presetDate = format(preset.value(), "yyyy-MM-dd");
|
|
67
|
+
return /*#__PURE__*/React.createElement(Button, {
|
|
68
|
+
key: preset.label,
|
|
69
|
+
variant: value === presetDate ? "primary" : "ghost",
|
|
70
|
+
size: "sm",
|
|
71
|
+
text: preset.label,
|
|
72
|
+
onClick: () => handlePresetClick(preset.value)
|
|
73
|
+
});
|
|
74
|
+
}))))));
|
|
75
|
+
};
|
|
76
|
+
export { DateOnlyPicker };
|
|
77
|
+
|
|
78
|
+
//# sourceMappingURL=DateOnlyPicker.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","useState","format","Button","Calendar","PopoverPrimitive","formatDateForDisplay","DatePickerTrigger","DateOnlyPicker","value","onChange","placeholder","disabled","size","variant","invalid","weekStartsOn","onOpenChange","className","presets","displayFormat","open","setOpen","handleOpenChange","isOpen","handlePresetClick","computeDate","displayValue","selectedDate","Date","undefined","createElement","Content","align","length","mode","selected","onSelect","date","map","preset","presetDate","key","label","text","onClick"],"sources":["DateOnlyPicker.tsx"],"sourcesContent":["import React, { useState } from \"react\";\nimport { format } from \"date-fns\";\nimport { Button } from \"~/Button/index.js\";\nimport { Calendar } from \"~/Calendar/index.js\";\nimport { PopoverPrimitive } from \"~/Popover/index.js\";\nimport type { DateOnlyPickerProps } from \"../utils/types.js\";\nimport { formatDateForDisplay } from \"../utils/dateHelpers.js\";\nimport { DatePickerTrigger } from \"./components/DatePickerTrigger.js\";\n\nconst DateOnlyPicker = ({\n value,\n onChange,\n placeholder,\n disabled,\n size,\n variant,\n invalid,\n weekStartsOn,\n onOpenChange,\n className,\n presets,\n displayFormat\n}: DateOnlyPickerProps) => {\n const [open, setOpen] = useState(false);\n\n const handleOpenChange = (isOpen: boolean) => {\n setOpen(isOpen);\n if (onOpenChange) {\n onOpenChange(isOpen);\n }\n };\n\n const handlePresetClick = (computeDate: () => Date) => {\n if (onChange) {\n onChange(format(computeDate(), \"yyyy-MM-dd\"));\n }\n handleOpenChange(false);\n };\n\n const displayValue = formatDateForDisplay(value, \"date\", displayFormat);\n const selectedDate = value ? new Date(value) : undefined;\n\n return (\n <div className={className}>\n <PopoverPrimitive open={open} onOpenChange={handleOpenChange}>\n <DatePickerTrigger\n displayValue={displayValue}\n placeholder={placeholder ?? \"Pick a date\"}\n disabled={disabled}\n size={size}\n variant={variant}\n invalid={invalid}\n />\n <PopoverPrimitive.Content align=\"start\">\n <div className={presets?.length ? \"flex\" : undefined}>\n <Calendar\n mode=\"single\"\n selected={selectedDate}\n onSelect={date => {\n if (onChange) {\n onChange(date ? format(date, \"yyyy-MM-dd\") : undefined);\n }\n handleOpenChange(false);\n }}\n weekStartsOn={weekStartsOn}\n />\n {presets && presets.length > 0 && (\n <div className=\"flex flex-col gap-xs border-l-sm border-neutral-muted p-sm min-w-[130px]\">\n {presets.map(preset => {\n const presetDate = format(preset.value(), \"yyyy-MM-dd\");\n return (\n <Button\n key={preset.label}\n variant={value === presetDate ? \"primary\" : \"ghost\"}\n size=\"sm\"\n text={preset.label}\n onClick={() => handlePresetClick(preset.value)}\n />\n );\n })}\n </div>\n )}\n </div>\n </PopoverPrimitive.Content>\n </PopoverPrimitive>\n </div>\n );\n};\n\nexport { DateOnlyPicker };\n"],"mappings":"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","ignoreList":[]}
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { DatePickerPrimitiveProps } from "../utils/types.js";
|
|
3
|
+
declare const DatePickerPrimitive: ((props: DatePickerPrimitiveProps) => React.JSX.Element) & {
|
|
4
|
+
original: (props: DatePickerPrimitiveProps) => React.JSX.Element;
|
|
5
|
+
originalName: string;
|
|
6
|
+
displayName: string;
|
|
7
|
+
} & {
|
|
8
|
+
original: ((props: DatePickerPrimitiveProps) => React.JSX.Element) & {
|
|
9
|
+
original: (props: DatePickerPrimitiveProps) => React.JSX.Element;
|
|
10
|
+
originalName: string;
|
|
11
|
+
displayName: string;
|
|
12
|
+
};
|
|
13
|
+
originalName: string;
|
|
14
|
+
displayName: string;
|
|
15
|
+
} & {
|
|
16
|
+
createDecorator: (decorator: import("@webiny/react-composition/types.js").ComponentDecorator<((props: DatePickerPrimitiveProps) => React.JSX.Element) & {
|
|
17
|
+
original: (props: DatePickerPrimitiveProps) => React.JSX.Element;
|
|
18
|
+
originalName: string;
|
|
19
|
+
displayName: string;
|
|
20
|
+
}>) => (props: unknown) => React.JSX.Element;
|
|
21
|
+
};
|
|
22
|
+
export { DatePickerPrimitive, type DatePickerPrimitiveProps };
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import { makeDecoratable } from "../../utils.js";
|
|
3
|
+
import { DateOnlyPicker } from "./DateOnlyPicker.js";
|
|
4
|
+
import { TimeOnlyPicker } from "./TimeOnlyPicker.js";
|
|
5
|
+
import { DateTimePicker } from "./DateTimePicker.js";
|
|
6
|
+
import { MonthPicker } from "./MonthPicker.js";
|
|
7
|
+
import { WeekPicker } from "./WeekPicker.js";
|
|
8
|
+
import { YearPicker } from "./YearPicker.js";
|
|
9
|
+
import { DateRangePicker } from "./DateRangePicker.js";
|
|
10
|
+
import { MultipleDatesPicker } from "./MultipleDatesPicker.js";
|
|
11
|
+
import { MultipleMonthsPicker } from "./MultipleMonthsPicker.js";
|
|
12
|
+
import { MultipleYearsPicker } from "./MultipleYearsPicker.js";
|
|
13
|
+
const DecoratableDatePickerPrimitive = props => {
|
|
14
|
+
switch (props.type) {
|
|
15
|
+
case "date":
|
|
16
|
+
return /*#__PURE__*/React.createElement(DateOnlyPicker, props);
|
|
17
|
+
case "time":
|
|
18
|
+
return /*#__PURE__*/React.createElement(TimeOnlyPicker, props);
|
|
19
|
+
case "dateTimeLocal":
|
|
20
|
+
return /*#__PURE__*/React.createElement(DateTimePicker, Object.assign({}, props, {
|
|
21
|
+
withTimezone: false
|
|
22
|
+
}));
|
|
23
|
+
case "dateTimeTz":
|
|
24
|
+
return /*#__PURE__*/React.createElement(DateTimePicker, Object.assign({}, props, {
|
|
25
|
+
withTimezone: true
|
|
26
|
+
}));
|
|
27
|
+
case "month":
|
|
28
|
+
return /*#__PURE__*/React.createElement(MonthPicker, props);
|
|
29
|
+
case "week":
|
|
30
|
+
return /*#__PURE__*/React.createElement(WeekPicker, props);
|
|
31
|
+
case "year":
|
|
32
|
+
return /*#__PURE__*/React.createElement(YearPicker, props);
|
|
33
|
+
case "dateRange":
|
|
34
|
+
return /*#__PURE__*/React.createElement(DateRangePicker, props);
|
|
35
|
+
case "multipleDates":
|
|
36
|
+
return /*#__PURE__*/React.createElement(MultipleDatesPicker, props);
|
|
37
|
+
case "multipleMonths":
|
|
38
|
+
return /*#__PURE__*/React.createElement(MultipleMonthsPicker, props);
|
|
39
|
+
case "multipleYears":
|
|
40
|
+
return /*#__PURE__*/React.createElement(MultipleYearsPicker, props);
|
|
41
|
+
}
|
|
42
|
+
};
|
|
43
|
+
const DatePickerPrimitive = makeDecoratable("DatePickerPrimitive", DecoratableDatePickerPrimitive);
|
|
44
|
+
export { DatePickerPrimitive };
|
|
45
|
+
|
|
46
|
+
//# sourceMappingURL=DatePickerPrimitive.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"names":["React","makeDecoratable","DateOnlyPicker","TimeOnlyPicker","DateTimePicker","MonthPicker","WeekPicker","YearPicker","DateRangePicker","MultipleDatesPicker","MultipleMonthsPicker","MultipleYearsPicker","DecoratableDatePickerPrimitive","props","type","createElement","Object","assign","withTimezone","DatePickerPrimitive"],"sources":["DatePickerPrimitive.tsx"],"sourcesContent":["import React from \"react\";\nimport { makeDecoratable } from \"~/utils.js\";\nimport type { DatePickerPrimitiveProps } from \"../utils/types.js\";\nimport { DateOnlyPicker } from \"./DateOnlyPicker.js\";\nimport { TimeOnlyPicker } from \"./TimeOnlyPicker.js\";\nimport { DateTimePicker } from \"./DateTimePicker.js\";\nimport { MonthPicker } from \"./MonthPicker.js\";\nimport { WeekPicker } from \"./WeekPicker.js\";\nimport { YearPicker } from \"./YearPicker.js\";\nimport { DateRangePicker } from \"./DateRangePicker.js\";\nimport { MultipleDatesPicker } from \"./MultipleDatesPicker.js\";\nimport { MultipleMonthsPicker } from \"./MultipleMonthsPicker.js\";\nimport { MultipleYearsPicker } from \"./MultipleYearsPicker.js\";\n\nconst DecoratableDatePickerPrimitive = (props: DatePickerPrimitiveProps) => {\n switch (props.type) {\n case \"date\":\n return <DateOnlyPicker {...props} />;\n case \"time\":\n return <TimeOnlyPicker {...props} />;\n case \"dateTimeLocal\":\n return <DateTimePicker {...props} withTimezone={false} />;\n case \"dateTimeTz\":\n return <DateTimePicker {...props} withTimezone={true} />;\n case \"month\":\n return <MonthPicker {...props} />;\n case \"week\":\n return <WeekPicker {...props} />;\n case \"year\":\n return <YearPicker {...props} />;\n case \"dateRange\":\n return <DateRangePicker {...props} />;\n case \"multipleDates\":\n return <MultipleDatesPicker {...props} />;\n case \"multipleMonths\":\n return <MultipleMonthsPicker {...props} />;\n case \"multipleYears\":\n return <MultipleYearsPicker {...props} />;\n }\n};\n\nconst DatePickerPrimitive = makeDecoratable(\"DatePickerPrimitive\", DecoratableDatePickerPrimitive);\n\nexport { DatePickerPrimitive, type DatePickerPrimitiveProps };\n"],"mappings":"AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,eAAe;AAExB,SAASC,cAAc;AACvB,SAASC,cAAc;AACvB,SAASC,cAAc;AACvB,SAASC,WAAW;AACpB,SAASC,UAAU;AACnB,SAASC,UAAU;AACnB,SAASC,eAAe;AACxB,SAASC,mBAAmB;AAC5B,SAASC,oBAAoB;AAC7B,SAASC,mBAAmB;AAE5B,MAAMC,8BAA8B,GAAIC,KAA+B,IAAK;EACxE,QAAQA,KAAK,CAACC,IAAI;IACd,KAAK,MAAM;MACP,oBAAOd,KAAA,CAAAe,aAAA,CAACb,cAAc,EAAKW,KAAQ,CAAC;IACxC,KAAK,MAAM;MACP,oBAAOb,KAAA,CAAAe,aAAA,CAACZ,cAAc,EAAKU,KAAQ,CAAC;IACxC,KAAK,eAAe;MAChB,oBAAOb,KAAA,CAAAe,aAAA,CAACX,cAAc,EAAAY,MAAA,CAAAC,MAAA,KAAKJ,KAAK;QAAEK,YAAY,EAAE;MAAM,EAAE,CAAC;IAC7D,KAAK,YAAY;MACb,oBAAOlB,KAAA,CAAAe,aAAA,CAACX,cAAc,EAAAY,MAAA,CAAAC,MAAA,KAAKJ,KAAK;QAAEK,YAAY,EAAE;MAAK,EAAE,CAAC;IAC5D,KAAK,OAAO;MACR,oBAAOlB,KAAA,CAAAe,aAAA,CAACV,WAAW,EAAKQ,KAAQ,CAAC;IACrC,KAAK,MAAM;MACP,oBAAOb,KAAA,CAAAe,aAAA,CAACT,UAAU,EAAKO,KAAQ,CAAC;IACpC,KAAK,MAAM;MACP,oBAAOb,KAAA,CAAAe,aAAA,CAACR,UAAU,EAAKM,KAAQ,CAAC;IACpC,KAAK,WAAW;MACZ,oBAAOb,KAAA,CAAAe,aAAA,CAACP,eAAe,EAAKK,KAAQ,CAAC;IACzC,KAAK,eAAe;MAChB,oBAAOb,KAAA,CAAAe,aAAA,CAACN,mBAAmB,EAAKI,KAAQ,CAAC;IAC7C,KAAK,gBAAgB;MACjB,oBAAOb,KAAA,CAAAe,aAAA,CAACL,oBAAoB,EAAKG,KAAQ,CAAC;IAC9C,KAAK,eAAe;MAChB,oBAAOb,KAAA,CAAAe,aAAA,CAACJ,mBAAmB,EAAKE,KAAQ,CAAC;EACjD;AACJ,CAAC;AAED,MAAMM,mBAAmB,GAAGlB,eAAe,CAAC,qBAAqB,EAAEW,8BAA8B,CAAC;AAElG,SAASO,mBAAmB","ignoreList":[]}
|
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
import type { DateRangePickerProps } from "../utils/types.js";
|
|
3
|
+
declare const DateRangePicker: ({ value, onChange, placeholder, disabled, size, variant, invalid, weekStartsOn, onOpenChange, className, displayFormat }: DateRangePickerProps) => React.JSX.Element;
|
|
4
|
+
export { DateRangePicker };
|