@headless-adminapp/fluent 1.3.1 → 1.3.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/package.json +2 -2
- package/PageCalendar/EventDialog/AttributeController.d.ts +0 -11
- package/PageCalendar/EventDialog/AttributeController.js +0 -17
- package/form/controls/DateRangeControl.d.ts +0 -12
- package/form/controls/DateRangeControl.js +0 -293
- package/form/controls/TimeControl.d.ts +0 -4
- package/form/controls/TimeControl.js +0 -87
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@headless-adminapp/fluent",
|
|
3
|
-
"version": "1.3.
|
|
3
|
+
"version": "1.3.3",
|
|
4
4
|
"description": "",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"types": "index.d.ts",
|
|
@@ -52,5 +52,5 @@
|
|
|
52
52
|
"uuid": "11.0.3",
|
|
53
53
|
"yup": "^1.4.0"
|
|
54
54
|
},
|
|
55
|
-
"gitHead": "
|
|
55
|
+
"gitHead": "87e20148674670e3e9aaa2fa2cb62266875d9342"
|
|
56
56
|
}
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
import { Attribute } from '@headless-adminapp/core';
|
|
2
|
-
import { Path, UseFormReturn } from 'react-hook-form';
|
|
3
|
-
import { BaseFieldValues } from './types';
|
|
4
|
-
interface AttributeControllerProps {
|
|
5
|
-
attribute: Attribute;
|
|
6
|
-
attributeName: Path<BaseFieldValues>;
|
|
7
|
-
form: UseFormReturn<BaseFieldValues>;
|
|
8
|
-
readOnly?: boolean;
|
|
9
|
-
}
|
|
10
|
-
export declare function AttributeController({ attribute, attributeName, form, readOnly, }: Readonly<AttributeControllerProps>): import("react/jsx-runtime").JSX.Element;
|
|
11
|
-
export {};
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
3
|
-
exports.AttributeController = AttributeController;
|
|
4
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
5
|
-
const react_hook_form_1 = require("react-hook-form");
|
|
6
|
-
const SectionControl_1 = require("../../DataForm/SectionControl");
|
|
7
|
-
const StandardControl_1 = require("../../PageEntityForm/StandardControl");
|
|
8
|
-
function AttributeController({ attribute, attributeName, form, readOnly, }) {
|
|
9
|
-
return ((0, jsx_runtime_1.jsx)(react_hook_form_1.Controller, { control: form.control, name: attributeName, render: ({ field, fieldState, formState }) => {
|
|
10
|
-
const isError = (fieldState.isTouched || formState.isSubmitted) &&
|
|
11
|
-
!!fieldState.error?.message;
|
|
12
|
-
const errorMessage = fieldState.isTouched || formState.isSubmitted
|
|
13
|
-
? fieldState.error?.message
|
|
14
|
-
: '';
|
|
15
|
-
return ((0, jsx_runtime_1.jsx)(SectionControl_1.SectionControlWrapper, { label: attribute.label, labelPosition: "left", required: attribute.required, isError: isError, errorMessage: errorMessage, children: (0, jsx_runtime_1.jsx)(StandardControl_1.StandardControl, { attribute: attribute, name: attributeName, value: field.value, onChange: field.onChange, onBlur: field.onBlur, errorMessage: errorMessage, isError: isError, readOnly: readOnly || attribute.readonly }) }));
|
|
16
|
-
} }));
|
|
17
|
-
}
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { ControlProps } from './types';
|
|
2
|
-
export interface DateRangeControlProps extends ControlProps<[string, string]> {
|
|
3
|
-
maxDate?: Date;
|
|
4
|
-
minDate?: Date;
|
|
5
|
-
}
|
|
6
|
-
export declare function DateRangeControl({ value, onChange, id, name, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }: DateRangeControlProps): import("react/jsx-runtime").JSX.Element;
|
|
7
|
-
export declare const cornersClassNames: {
|
|
8
|
-
topRightCornerDate: string;
|
|
9
|
-
topLeftCornerDate: string;
|
|
10
|
-
bottomRightCornerDate: string;
|
|
11
|
-
bottomLeftCornerDate: string;
|
|
12
|
-
};
|
|
@@ -1,293 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.cornersClassNames = void 0;
|
|
7
|
-
exports.DateRangeControl = DateRangeControl;
|
|
8
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
9
|
-
const react_calendar_compat_1 = require("@fluentui/react-calendar-compat");
|
|
10
|
-
const react_components_1 = require("@fluentui/react-components");
|
|
11
|
-
const locale_1 = require("@headless-adminapp/app/locale");
|
|
12
|
-
const dayjs_1 = __importDefault(require("dayjs"));
|
|
13
|
-
const react_1 = require("react");
|
|
14
|
-
const AppStringContext_1 = require("../../App/AppStringContext");
|
|
15
|
-
function formatDateRange(value, dateRangeFormat) {
|
|
16
|
-
if (!value || value.length !== 2) {
|
|
17
|
-
return '';
|
|
18
|
-
}
|
|
19
|
-
const [start, end] = value.map((date) => (0, dayjs_1.default)(date)); //.tz(timezone));
|
|
20
|
-
if (start.isSame(end, 'year')) {
|
|
21
|
-
if (start.isSame(end, 'month')) {
|
|
22
|
-
if (start.isSame(end, 'day')) {
|
|
23
|
-
return start.format(dateRangeFormat.date);
|
|
24
|
-
}
|
|
25
|
-
else {
|
|
26
|
-
return (start.format(dateRangeFormat.sameMonth[0]) +
|
|
27
|
-
dateRangeFormat.separator +
|
|
28
|
-
end.format(dateRangeFormat.sameMonth[1]));
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
else {
|
|
32
|
-
return (start.format(dateRangeFormat.sameYear[0]) +
|
|
33
|
-
dateRangeFormat.separator +
|
|
34
|
-
end.format(dateRangeFormat.sameYear[1]));
|
|
35
|
-
}
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
return (start.format(dateRangeFormat.date) +
|
|
39
|
-
dateRangeFormat.separator +
|
|
40
|
-
end.format(dateRangeFormat.date));
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
function DateRangeControl({ value, onChange, id, name, onBlur, onFocus, disabled, maxDate, minDate, readOnly, }) {
|
|
44
|
-
const [open, setOpen] = (0, react_1.useState)(false);
|
|
45
|
-
const { dateRangeFormats } = (0, locale_1.useLocale)();
|
|
46
|
-
const formattedValue = (0, react_1.useMemo)(() => {
|
|
47
|
-
return formatDateRange(value, dateRangeFormats.short);
|
|
48
|
-
}, [value, dateRangeFormats]);
|
|
49
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: { display: 'flex', flexDirection: 'column' }, children: (0, jsx_runtime_1.jsxs)(react_components_1.Popover, { open: open, onOpenChange: (_, data) => {
|
|
50
|
-
if (readOnly || disabled) {
|
|
51
|
-
return;
|
|
52
|
-
}
|
|
53
|
-
onFocus?.();
|
|
54
|
-
setOpen(data.open);
|
|
55
|
-
}, positioning: "below-start", children: [(0, jsx_runtime_1.jsx)(react_components_1.PopoverTrigger, { disableButtonEnhancement: true, children: (0, jsx_runtime_1.jsx)(react_components_1.Input, { appearance: "filled-darker", readOnly: true, style: { cursor: 'pointer' }, value: formattedValue, onChange: () => { } }) }), (0, jsx_runtime_1.jsx)(react_components_1.PopoverSurface, { style: { padding: 0 }, children: (0, jsx_runtime_1.jsx)(PopoverContent, { value: value, minDate: minDate, maxDate: maxDate, onChange: (value) => {
|
|
56
|
-
setOpen(false);
|
|
57
|
-
onChange?.(value);
|
|
58
|
-
onBlur?.();
|
|
59
|
-
} }) })] }) }));
|
|
60
|
-
}
|
|
61
|
-
const PopoverContent = ({ value, minDate, maxDate, onChange, required, }) => {
|
|
62
|
-
const [internalValue, setInternalValue] = (0, react_1.useState)([value ? new Date(value[0]) : null, value ? new Date(value[1]) : null]);
|
|
63
|
-
// const [date1, setDate1] = useState<string | null>(null);
|
|
64
|
-
// const [date2, setDate2] = useState<string | null>(null);
|
|
65
|
-
const [navigationDate1, setNavigationDate1] = (0, react_1.useState)(internalValue[0] ?? (0, dayjs_1.default)().toDate());
|
|
66
|
-
const [navigationDate2, setNavigationDate2] = (0, react_1.useState)(internalValue[1] ?? (0, dayjs_1.default)().add(1, 'month').toDate());
|
|
67
|
-
const [date1, date2] = internalValue;
|
|
68
|
-
// useEffect(() => {
|
|
69
|
-
// if (value) {
|
|
70
|
-
// let d1 = new Date(value[0]);
|
|
71
|
-
// let d2 = new Date(value[1]);
|
|
72
|
-
// if (d1 > d2) {
|
|
73
|
-
// const temp = d1;
|
|
74
|
-
// d1 = d2;
|
|
75
|
-
// d2 = temp;
|
|
76
|
-
// }
|
|
77
|
-
// setDate1(d1.toISOString());
|
|
78
|
-
// setDate2(d2.toISOString());
|
|
79
|
-
// }
|
|
80
|
-
// }, [value]);
|
|
81
|
-
const leftMaxDate = !date1 && date2
|
|
82
|
-
? (0, dayjs_1.default)(date2).subtract(1, 'month').endOf('month').toDate()
|
|
83
|
-
: undefined;
|
|
84
|
-
const rightMinDate = !date2 && date1
|
|
85
|
-
? (0, dayjs_1.default)(date1).add(1, 'month').startOf('month').toDate()
|
|
86
|
-
: undefined;
|
|
87
|
-
const _minDate = minDate
|
|
88
|
-
? new Date(minDate)
|
|
89
|
-
: date1
|
|
90
|
-
? new Date(date1)
|
|
91
|
-
: undefined;
|
|
92
|
-
const _maxDate = maxDate
|
|
93
|
-
? new Date(maxDate)
|
|
94
|
-
: date2
|
|
95
|
-
? new Date(date2)
|
|
96
|
-
: undefined;
|
|
97
|
-
// const date1Ref = useRef<string | null>(date1);
|
|
98
|
-
// const date2Ref = useRef<string | null>(date2);
|
|
99
|
-
// date1Ref.current = date1;
|
|
100
|
-
// date2Ref.current = date2;
|
|
101
|
-
const handleCalendarChange = (date, isLeftCalendar) => {
|
|
102
|
-
if ((date1 && date2) || (!date1 && !date2)) {
|
|
103
|
-
if (isLeftCalendar) {
|
|
104
|
-
setInternalValue([date, null]);
|
|
105
|
-
// setDate1(date.toISOString());
|
|
106
|
-
// setDate2(null);
|
|
107
|
-
setNavigationDate2((0, dayjs_1.default)(date).add(1, 'month').toDate());
|
|
108
|
-
}
|
|
109
|
-
else {
|
|
110
|
-
setInternalValue([null, date]);
|
|
111
|
-
// setDate2(date.toISOString());
|
|
112
|
-
// setDate1(null);
|
|
113
|
-
setNavigationDate1((0, dayjs_1.default)(date).subtract(1, 'month').toDate());
|
|
114
|
-
}
|
|
115
|
-
}
|
|
116
|
-
else {
|
|
117
|
-
let d1 = date1;
|
|
118
|
-
let d2 = date2;
|
|
119
|
-
const v = [date1, date2].filter(Boolean);
|
|
120
|
-
v.push(date);
|
|
121
|
-
v.sort((a, b) => a.getTime() - b.getTime());
|
|
122
|
-
// setDate1(v[0]);
|
|
123
|
-
// setDate2(v[1]);
|
|
124
|
-
console.log('v', v);
|
|
125
|
-
setInternalValue(v.map((d) => new Date(d)));
|
|
126
|
-
}
|
|
127
|
-
// const newValues = [...__values] as [string | null, string | null];
|
|
128
|
-
// if (newValues[0] && newValues[1]) {
|
|
129
|
-
// newValues[0] = null;
|
|
130
|
-
// newValues[1] = null;
|
|
131
|
-
// }
|
|
132
|
-
// if (!newValues[0]) {
|
|
133
|
-
// newValues[0] = date.toISOString();
|
|
134
|
-
// } else {
|
|
135
|
-
// newValues[1] = date.toISOString();
|
|
136
|
-
// }
|
|
137
|
-
// // Swap values if the first date is after the second date
|
|
138
|
-
// if (
|
|
139
|
-
// newValues[0] &&
|
|
140
|
-
// newValues[1] &&
|
|
141
|
-
// new Date(newValues[0]) > new Date(newValues[1])
|
|
142
|
-
// ) {
|
|
143
|
-
// const temp = newValues[0];
|
|
144
|
-
// newValues[0] = newValues[1];
|
|
145
|
-
// newValues[1] = temp;
|
|
146
|
-
// }
|
|
147
|
-
// __setValues(newValues);
|
|
148
|
-
};
|
|
149
|
-
// date1, date2
|
|
150
|
-
// [from, to]
|
|
151
|
-
// navigate date1
|
|
152
|
-
// navigate date2
|
|
153
|
-
// First selection in left calendar is start date
|
|
154
|
-
// First selection in right calendar is end date
|
|
155
|
-
// Second selection is conditional
|
|
156
|
-
return ((0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex' }, children: [JSON.stringify(internalValue), (0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex' }, children: [(0, jsx_runtime_1.jsx)(CalendarItem, { date1: date1, date2: date2, navigatedDate: navigationDate1, maxDate: leftMaxDate ?? maxDate, minDate: minDate, onSelectDate: (date) => {
|
|
157
|
-
handleCalendarChange(date, true);
|
|
158
|
-
}, onNavigateDate: (date) => {
|
|
159
|
-
setNavigationDate1(date);
|
|
160
|
-
} }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { vertical: true, style: { opacity: 0.2 } }), (0, jsx_runtime_1.jsx)(CalendarItem, { date1: date1, date2: date2, navigatedDate: navigationDate2, minDate: rightMinDate ?? minDate, maxDate: maxDate, onSelectDate: (date) => {
|
|
161
|
-
handleCalendarChange(date, false);
|
|
162
|
-
}, onNavigateDate: (date) => {
|
|
163
|
-
setNavigationDate2(date);
|
|
164
|
-
} })] }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.5 } }), (0, jsx_runtime_1.jsxs)("div", { style: {
|
|
165
|
-
display: 'flex',
|
|
166
|
-
gap: react_components_1.tokens.spacingHorizontalS,
|
|
167
|
-
padding: react_components_1.tokens.spacingVerticalS,
|
|
168
|
-
justifyContent: 'flex-end',
|
|
169
|
-
}, children: [!required && ((0, jsx_runtime_1.jsx)(react_components_1.Button, { size: "small", appearance: "secondary", onClick: () => {
|
|
170
|
-
onChange?.(null);
|
|
171
|
-
setInternalValue([null, null]);
|
|
172
|
-
}, children: "Clear" })), (0, jsx_runtime_1.jsx)(react_components_1.Button, { size: "small", appearance: "primary", disabled: !internalValue[0] || !internalValue[1], onClick: () => {
|
|
173
|
-
if (!internalValue[0] || !internalValue[1]) {
|
|
174
|
-
return;
|
|
175
|
-
}
|
|
176
|
-
onChange?.([
|
|
177
|
-
(0, dayjs_1.default)(internalValue[0]).format('YYYY-MM-DD'),
|
|
178
|
-
(0, dayjs_1.default)(internalValue[1]).format('YYYY-MM-DD'),
|
|
179
|
-
]);
|
|
180
|
-
}, children: "Apply" })] })] })] }));
|
|
181
|
-
};
|
|
182
|
-
exports.cornersClassNames = {
|
|
183
|
-
topRightCornerDate: 'fui-CalendarDayGrid__topRightCornerDate',
|
|
184
|
-
topLeftCornerDate: 'fui-CalendarDayGrid__topLeftCornerDate',
|
|
185
|
-
bottomRightCornerDate: 'fui-CalendarDayGrid__bottomRightCornerDate',
|
|
186
|
-
bottomLeftCornerDate: 'fui-CalendarDayGrid__bottomLeftCornerDate',
|
|
187
|
-
};
|
|
188
|
-
function checkIsSameMonth(date1, date2) {
|
|
189
|
-
return date1.isSame(date2, 'month');
|
|
190
|
-
}
|
|
191
|
-
function applyRoundedStyles({ element, date, navigatedDate, selectedDate1, selectedDate2, classNames, }) {
|
|
192
|
-
if (!classNames.daySelected) {
|
|
193
|
-
return;
|
|
194
|
-
}
|
|
195
|
-
const _date = (0, dayjs_1.default)(date); //.tz(timezone);
|
|
196
|
-
const _navigatedDate = (0, dayjs_1.default)(navigatedDate); //.tz(timezone);
|
|
197
|
-
const _selectedDate1 = (0, dayjs_1.default)(selectedDate1); //.tz(timezone);
|
|
198
|
-
const _selectedDate2 = (0, dayjs_1.default)(selectedDate2); //.tz(timezone);
|
|
199
|
-
const isSameMonth = checkIsSameMonth(_navigatedDate, _date);
|
|
200
|
-
const isSelected = isSameMonth &&
|
|
201
|
-
selectedDate1 &&
|
|
202
|
-
selectedDate2 &&
|
|
203
|
-
date >= selectedDate1 &&
|
|
204
|
-
date <= selectedDate2;
|
|
205
|
-
if (!isSelected) {
|
|
206
|
-
element.classList.remove(...classNames.daySelected.split(' '));
|
|
207
|
-
element.classList.add(exports.cornersClassNames.topLeftCornerDate);
|
|
208
|
-
element.classList.add(exports.cornersClassNames.topRightCornerDate);
|
|
209
|
-
element.classList.add(exports.cornersClassNames.bottomLeftCornerDate);
|
|
210
|
-
element.classList.add(exports.cornersClassNames.bottomRightCornerDate);
|
|
211
|
-
return;
|
|
212
|
-
}
|
|
213
|
-
const aboveDate = _date.subtract(7, 'day');
|
|
214
|
-
const belowDate = _date.add(7, 'day');
|
|
215
|
-
const leftDate = _date.subtract(1, 'day');
|
|
216
|
-
const rightDate = _date.add(1, 'day');
|
|
217
|
-
const isFirstDay = _date.day() === 1; // Monday
|
|
218
|
-
const isLastDay = _date.day() === 0; // Sunday
|
|
219
|
-
const isAboveDateInRange = !aboveDate.isBefore(_selectedDate1);
|
|
220
|
-
const isBelowDateInRange = !belowDate.isAfter(_selectedDate2);
|
|
221
|
-
const isLeftDateInRange = !leftDate.isBefore(_selectedDate1);
|
|
222
|
-
const isRightDateInRange = !rightDate.isAfter(_selectedDate2);
|
|
223
|
-
const isAboveDateInSameMonth = checkIsSameMonth(aboveDate, _navigatedDate);
|
|
224
|
-
const isBelowDateInSameMonth = checkIsSameMonth(belowDate, _navigatedDate);
|
|
225
|
-
const isLeftDateInSameMonth = checkIsSameMonth(leftDate, _navigatedDate);
|
|
226
|
-
const isRightDateInSameMonth = checkIsSameMonth(rightDate, _navigatedDate);
|
|
227
|
-
const nothingOnLeft = !isLeftDateInRange || isFirstDay || !isLeftDateInSameMonth;
|
|
228
|
-
const nothingOnRight = !isRightDateInRange || isLastDay || !isRightDateInSameMonth;
|
|
229
|
-
const nothingAbove = !isAboveDateInRange || !isAboveDateInSameMonth;
|
|
230
|
-
const nothingBelow = !isBelowDateInRange || !isBelowDateInSameMonth;
|
|
231
|
-
const hasTopLeftRadius = nothingOnLeft && nothingAbove;
|
|
232
|
-
const hasTopRightRadius = nothingOnRight && nothingAbove;
|
|
233
|
-
const hasBottomLeftRadius = nothingOnLeft && nothingBelow;
|
|
234
|
-
const hasBottomRightRadius = nothingOnRight && nothingBelow;
|
|
235
|
-
const classToAdd = classNames.daySelected.split(' ');
|
|
236
|
-
const classToRemove = [];
|
|
237
|
-
if (hasTopLeftRadius) {
|
|
238
|
-
classToAdd.push(exports.cornersClassNames.topLeftCornerDate);
|
|
239
|
-
}
|
|
240
|
-
else {
|
|
241
|
-
classToRemove.push(exports.cornersClassNames.topLeftCornerDate);
|
|
242
|
-
}
|
|
243
|
-
if (hasTopRightRadius) {
|
|
244
|
-
classToAdd.push(exports.cornersClassNames.topRightCornerDate);
|
|
245
|
-
}
|
|
246
|
-
else {
|
|
247
|
-
classToRemove.push(exports.cornersClassNames.topRightCornerDate);
|
|
248
|
-
}
|
|
249
|
-
if (hasBottomLeftRadius) {
|
|
250
|
-
classToAdd.push(exports.cornersClassNames.bottomLeftCornerDate);
|
|
251
|
-
}
|
|
252
|
-
else {
|
|
253
|
-
classToRemove.push(exports.cornersClassNames.bottomLeftCornerDate);
|
|
254
|
-
}
|
|
255
|
-
if (hasBottomRightRadius) {
|
|
256
|
-
classToAdd.push(exports.cornersClassNames.bottomRightCornerDate);
|
|
257
|
-
}
|
|
258
|
-
else {
|
|
259
|
-
classToRemove.push(exports.cornersClassNames.bottomRightCornerDate);
|
|
260
|
-
}
|
|
261
|
-
element.classList.add(...classToAdd);
|
|
262
|
-
element.classList.remove(...classToRemove);
|
|
263
|
-
}
|
|
264
|
-
const CalendarItem = ({ date1, date2, navigatedDate, maxDate, minDate, onNavigateDate, onSelectDate, }) => {
|
|
265
|
-
const { datePickerStrings } = (0, AppStringContext_1.useAppStrings)();
|
|
266
|
-
const date1Ref = (0, react_1.useRef)(date1);
|
|
267
|
-
const date2Ref = (0, react_1.useRef)(date2);
|
|
268
|
-
const navigatedDateRef = (0, react_1.useRef)(navigatedDate);
|
|
269
|
-
date1Ref.current = date1;
|
|
270
|
-
date2Ref.current = date2;
|
|
271
|
-
navigatedDateRef.current = navigatedDate;
|
|
272
|
-
const customDayCellRef = (0, react_1.useCallback)((element, date, classNames) => {
|
|
273
|
-
if (!element) {
|
|
274
|
-
return;
|
|
275
|
-
}
|
|
276
|
-
applyRoundedStyles({
|
|
277
|
-
element,
|
|
278
|
-
navigatedDate: navigatedDateRef.current,
|
|
279
|
-
date,
|
|
280
|
-
selectedDate1: date1Ref.current,
|
|
281
|
-
selectedDate2: date2Ref.current,
|
|
282
|
-
classNames,
|
|
283
|
-
});
|
|
284
|
-
}, []);
|
|
285
|
-
return ((0, jsx_runtime_1.jsx)(react_calendar_compat_1.Calendar, { showMonthPickerAsOverlay: true, showGoToToday: false, highlightSelectedMonth: false, highlightCurrentMonth: false, firstDayOfWeek: react_calendar_compat_1.DayOfWeek.Monday, strings: datePickerStrings, calendarDayProps: {
|
|
286
|
-
customDayCellRef: customDayCellRef,
|
|
287
|
-
onNavigateDate: onNavigateDate,
|
|
288
|
-
navigatedDate: navigatedDate,
|
|
289
|
-
}, calendarMonthProps: {
|
|
290
|
-
navigatedDate: navigatedDate,
|
|
291
|
-
onNavigateDate: onNavigateDate,
|
|
292
|
-
}, maxDate: maxDate, minDate: minDate, onSelectDate: onSelectDate }));
|
|
293
|
-
};
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { ControlProps } from './types';
|
|
2
|
-
export interface TimeControlProps extends ControlProps<number> {
|
|
3
|
-
}
|
|
4
|
-
export declare function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled, readOnly, }: Readonly<TimeControlProps>): import("react/jsx-runtime").JSX.Element;
|
|
@@ -1,87 +0,0 @@
|
|
|
1
|
-
"use strict";
|
|
2
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
3
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
4
|
-
};
|
|
5
|
-
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
|
-
exports.TimeControl = TimeControl;
|
|
7
|
-
const jsx_runtime_1 = require("react/jsx-runtime");
|
|
8
|
-
const react_components_1 = require("@fluentui/react-components");
|
|
9
|
-
const react_timepicker_compat_1 = require("@fluentui/react-timepicker-compat");
|
|
10
|
-
const locale_1 = require("@headless-adminapp/app/locale");
|
|
11
|
-
const icons_1 = require("@headless-adminapp/icons");
|
|
12
|
-
const dayjs_1 = __importDefault(require("dayjs"));
|
|
13
|
-
const customParseFormat_1 = __importDefault(require("dayjs/plugin/customParseFormat"));
|
|
14
|
-
const react_1 = require("react");
|
|
15
|
-
dayjs_1.default.extend(customParseFormat_1.default);
|
|
16
|
-
function TimeControl({ value, onChange, id, name, onBlur, placeholder, disabled, readOnly, }) {
|
|
17
|
-
const { timeFormats: { short: timeFormat }, timezone, } = (0, locale_1.useLocale)();
|
|
18
|
-
const [internalTimeValue, setInternalTimeValue] = (0, react_1.useState)(value ? (0, dayjs_1.default)().startOf('day').add(value, 'minutes').format(timeFormat) : '');
|
|
19
|
-
const internalTimeValueRef = (0, react_1.useRef)(internalTimeValue);
|
|
20
|
-
internalTimeValueRef.current = internalTimeValue;
|
|
21
|
-
(0, react_1.useEffect)(() => {
|
|
22
|
-
const updatedValue = typeof value === 'number'
|
|
23
|
-
? (0, dayjs_1.default)().startOf('day').add(value, 'minutes').format(timeFormat)
|
|
24
|
-
: '';
|
|
25
|
-
if (internalTimeValueRef.current !== updatedValue) {
|
|
26
|
-
setInternalTimeValue(updatedValue);
|
|
27
|
-
}
|
|
28
|
-
}, [value, timezone, timeFormat]);
|
|
29
|
-
const isReadonly = readOnly || disabled;
|
|
30
|
-
const selectedTime = (0, react_1.useMemo)(() => {
|
|
31
|
-
if (typeof value !== 'number') {
|
|
32
|
-
return null;
|
|
33
|
-
}
|
|
34
|
-
return (0, dayjs_1.default)().startOf('day').add(value, 'minutes').toDate();
|
|
35
|
-
}, [value]);
|
|
36
|
-
return ((0, jsx_runtime_1.jsx)("div", { style: {
|
|
37
|
-
display: 'flex',
|
|
38
|
-
alignItems: 'center',
|
|
39
|
-
gap: react_components_1.tokens.spacingHorizontalS,
|
|
40
|
-
}, children: (0, jsx_runtime_1.jsx)(react_timepicker_compat_1.TimePicker, { appearance: "filled-darker", style: {
|
|
41
|
-
flex: 1,
|
|
42
|
-
minWidth: 0,
|
|
43
|
-
pointerEvents: isReadonly ? 'none' : 'auto',
|
|
44
|
-
}, placeholder: placeholder, id: id, name: name, input: {
|
|
45
|
-
style: { minWidth: 0 },
|
|
46
|
-
}, readOnly: isReadonly, selectedTime: selectedTime, freeform: true, value: internalTimeValue, onTimeChange: (_, data) => {
|
|
47
|
-
if (data.selectedTime) {
|
|
48
|
-
onChange?.((0, dayjs_1.default)(data.selectedTime).diff((0, dayjs_1.default)().startOf('day'), 'minutes'));
|
|
49
|
-
}
|
|
50
|
-
else if (data.selectedTimeText) {
|
|
51
|
-
let resolvedTime = resolveTimeValue(data.selectedTimeText, timeFormat);
|
|
52
|
-
if (!resolvedTime) {
|
|
53
|
-
setInternalTimeValue(value ? (0, dayjs_1.default)(value).format(timeFormat) : '');
|
|
54
|
-
return;
|
|
55
|
-
}
|
|
56
|
-
const newValue = (0, dayjs_1.default)(resolvedTime).diff((0, dayjs_1.default)().startOf('day'), 'minutes');
|
|
57
|
-
if (newValue !== value) {
|
|
58
|
-
onChange?.(newValue);
|
|
59
|
-
}
|
|
60
|
-
setInternalTimeValue((0, dayjs_1.default)(resolvedTime).format(timeFormat));
|
|
61
|
-
}
|
|
62
|
-
else {
|
|
63
|
-
setInternalTimeValue('');
|
|
64
|
-
onChange?.(null);
|
|
65
|
-
}
|
|
66
|
-
}, onInput: (e) => {
|
|
67
|
-
setInternalTimeValue(e.currentTarget.value);
|
|
68
|
-
}, onBlur: () => {
|
|
69
|
-
onBlur?.();
|
|
70
|
-
}, expandIcon: (0, jsx_runtime_1.jsx)("div", { style: {
|
|
71
|
-
display: 'flex',
|
|
72
|
-
alignItems: 'center',
|
|
73
|
-
justifyContent: 'center',
|
|
74
|
-
marginRight: -4,
|
|
75
|
-
color: react_components_1.tokens.colorNeutralForeground2,
|
|
76
|
-
}, children: (0, jsx_runtime_1.jsx)(icons_1.Icons.Clock, { size: 20 }) }) }) }));
|
|
77
|
-
}
|
|
78
|
-
function resolveTimeValue(value, timeFormat) {
|
|
79
|
-
if (!value) {
|
|
80
|
-
return;
|
|
81
|
-
}
|
|
82
|
-
const time = (0, dayjs_1.default)(value, timeFormat);
|
|
83
|
-
if (!time.isValid()) {
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
return time.toDate();
|
|
87
|
-
}
|