@talxis/base-controls 1.2407.2 → 1.2408.2
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/dist/components/DateTime/DateTime.js +133 -1
- package/dist/components/DateTime/DateTime.js.map +1 -0
- package/dist/components/DateTime/components/Calendar.d.ts +1 -1
- package/dist/components/DateTime/components/Calendar.js +63 -1
- package/dist/components/DateTime/components/Calendar.js.map +1 -0
- package/dist/components/DateTime/hooks/useDateTime.js +137 -1
- package/dist/components/DateTime/hooks/useDateTime.js.map +1 -0
- package/dist/components/DateTime/index.js +3 -1
- package/dist/components/DateTime/index.js.map +1 -0
- package/dist/components/DateTime/interfaces.d.ts +11 -1
- package/dist/components/DateTime/styles.js +37 -1
- package/dist/components/DateTime/styles.js.map +1 -0
- package/dist/components/DateTime/translations.js +23 -1
- package/dist/components/DateTime/translations.js.map +1 -0
- package/dist/components/Decimal/Decimal.js +200 -1
- package/dist/components/Decimal/Decimal.js.map +1 -0
- package/dist/components/Decimal/components/ArrowButtons.js +38 -1
- package/dist/components/Decimal/components/ArrowButtons.js.map +1 -0
- package/dist/components/Decimal/components/styles.js +26 -1
- package/dist/components/Decimal/components/styles.js.map +1 -0
- package/dist/components/Decimal/index.js +2 -1
- package/dist/components/Decimal/index.js.map +1 -0
- package/dist/components/Decimal/interfaces.d.ts +1 -1
- package/dist/components/Duration/Duration.js +132 -1
- package/dist/components/Duration/Duration.js.map +1 -0
- package/dist/components/Duration/durationOptions.d.ts +2 -0
- package/dist/components/Duration/durationOptions.js +27 -0
- package/dist/components/Duration/durationOptions.js.map +1 -0
- package/dist/components/Duration/index.js +2 -1
- package/dist/components/Duration/index.js.map +1 -0
- package/dist/components/Duration/translations.js +31 -1
- package/dist/components/Duration/translations.js.map +1 -0
- package/dist/components/Grid/Grid.js +30 -1
- package/dist/components/Grid/Grid.js.map +1 -0
- package/dist/components/Grid/GridContext.js +6 -1
- package/dist/components/Grid/GridContext.js.map +1 -0
- package/dist/components/Grid/constants.js +4 -1
- package/dist/components/Grid/constants.js.map +1 -0
- package/dist/components/Grid/core/components/AgGrid/AgGrid.js +85 -1
- package/dist/components/Grid/core/components/AgGrid/AgGrid.js.map +1 -0
- package/dist/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.js +12 -1
- package/dist/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.js.map +1 -0
- package/dist/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/styles.js +23 -1
- package/dist/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/styles.js.map +1 -0
- package/dist/components/Grid/core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.js +11 -1
- package/dist/components/Grid/core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.js.map +1 -0
- package/dist/components/Grid/core/components/AgGrid/components/LoadingOverlay/styles.js +82 -1
- package/dist/components/Grid/core/components/AgGrid/components/LoadingOverlay/styles.js.map +1 -0
- package/dist/components/Grid/core/components/AgGrid/controllers/useAgGridController.js +169 -1
- package/dist/components/Grid/core/components/AgGrid/controllers/useAgGridController.js.map +1 -0
- package/dist/components/Grid/core/components/AgGrid/model/AgGrid.js +116 -1
- package/dist/components/Grid/core/components/AgGrid/model/AgGrid.js.map +1 -0
- package/dist/components/Grid/core/components/AgGrid/styles.js +91 -1
- package/dist/components/Grid/core/components/AgGrid/styles.js.map +1 -0
- package/dist/components/Grid/core/components/Cell/Commands/Commands.js +29 -1
- package/dist/components/Grid/core/components/Cell/Commands/Commands.js.map +1 -0
- package/dist/components/Grid/core/components/Cell/Commands/Icon.js +14 -1
- package/dist/components/Grid/core/components/Cell/Commands/Icon.js.map +1 -0
- package/dist/components/Grid/core/components/Cell/Commands/styles.js +54 -1
- package/dist/components/Grid/core/components/Cell/Commands/styles.js.map +1 -0
- package/dist/components/Grid/core/components/Cell/Commands/useCommands.js +52 -1
- package/dist/components/Grid/core/components/Cell/Commands/useCommands.js.map +1 -0
- package/dist/components/Grid/core/components/Cell/EditableCell/EditableCell.js +148 -1
- package/dist/components/Grid/core/components/Cell/EditableCell/EditableCell.js.map +1 -0
- package/dist/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyCell.js +139 -1
- package/dist/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyCell.js.map +1 -0
- package/dist/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.js +49 -1
- package/dist/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.js.map +1 -0
- package/dist/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/styles.js +27 -1
- package/dist/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/styles.js.map +1 -0
- package/dist/components/Grid/core/components/Cell/ReadOnlyCell/styles.js +58 -1
- package/dist/components/Grid/core/components/Cell/ReadOnlyCell/styles.js.map +1 -0
- package/dist/components/Grid/core/components/ColumnHeader/ColumnHeader.js +60 -1
- package/dist/components/Grid/core/components/ColumnHeader/ColumnHeader.js.map +1 -0
- package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.js +26 -1
- package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.js.map +1 -0
- package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.js +19 -1
- package/dist/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.js.map +1 -0
- package/dist/components/Grid/core/components/ColumnHeader/styles.js +44 -1
- package/dist/components/Grid/core/components/ColumnHeader/styles.js.map +1 -0
- package/dist/components/Grid/core/components/Component/Component.js +53 -1
- package/dist/components/Grid/core/components/Component/Component.js.map +1 -0
- package/dist/components/Grid/core/components/Component/controller/useComponentController.js +31 -1
- package/dist/components/Grid/core/components/Component/controller/useComponentController.js.map +1 -0
- package/dist/components/Grid/core/components/Component/model/Component.js +225 -1
- package/dist/components/Grid/core/components/Component/model/Component.js.map +1 -0
- package/dist/components/Grid/core/components/Dialog/Constants.js +9 -1
- package/dist/components/Grid/core/components/Dialog/Constants.js.map +1 -0
- package/dist/components/Grid/core/components/Dialog/Styles.js +61 -1
- package/dist/components/Grid/core/components/Dialog/Styles.js.map +1 -0
- package/dist/components/Grid/core/components/Dialog/index.js +16 -1
- package/dist/components/Grid/core/components/Dialog/index.js.map +1 -0
- package/dist/components/Grid/core/components/Dialog/interfaces/index.js +1 -0
- package/dist/components/Grid/core/components/Dialog/interfaces/index.js.map +1 -0
- package/dist/components/Grid/core/components/Save/Save.js +47 -1
- package/dist/components/Grid/core/components/Save/Save.js.map +1 -0
- package/dist/components/Grid/core/components/Save/components/ChangeEditor/ChangeEditor.js +39 -1
- package/dist/components/Grid/core/components/Save/components/ChangeEditor/ChangeEditor.js.map +1 -0
- package/dist/components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/RecordGrids.js +136 -1
- package/dist/components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/RecordGrids.js.map +1 -0
- package/dist/components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/styles.js +54 -1
- package/dist/components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/styles.js.map +1 -0
- package/dist/components/Grid/core/components/Save/components/ChangeEditor/styles.js +37 -1
- package/dist/components/Grid/core/components/Save/components/ChangeEditor/styles.js.map +1 -0
- package/dist/components/Grid/core/components/Save/hooks/useSave.js +45 -1
- package/dist/components/Grid/core/components/Save/hooks/useSave.js.map +1 -0
- package/dist/components/Grid/core/components/Save/styles.js +44 -1
- package/dist/components/Grid/core/components/Save/styles.js.map +1 -0
- package/dist/components/Grid/core/controllers/useGridController.js +39 -1
- package/dist/components/Grid/core/controllers/useGridController.js.map +1 -0
- package/dist/components/Grid/core/enums/ConditionOperator.js +50 -1
- package/dist/components/Grid/core/enums/ConditionOperator.js.map +1 -0
- package/dist/components/Grid/core/enums/DataType.js +30 -1
- package/dist/components/Grid/core/enums/DataType.js.map +1 -0
- package/dist/components/Grid/core/hooks/useGridInstance.js +9 -1
- package/dist/components/Grid/core/hooks/useGridInstance.js.map +1 -0
- package/dist/components/Grid/core/hooks/useRefreshCallback.js +20 -1
- package/dist/components/Grid/core/hooks/useRefreshCallback.js.map +1 -0
- package/dist/components/Grid/core/hooks/useRerender.js +13 -1
- package/dist/components/Grid/core/hooks/useRerender.js.map +1 -0
- package/dist/components/Grid/core/model/Grid.js +249 -1
- package/dist/components/Grid/core/model/Grid.js.map +1 -0
- package/dist/components/Grid/core/model/GridDependency.js +28 -1
- package/dist/components/Grid/core/model/GridDependency.js.map +1 -0
- package/dist/components/Grid/core/model/Metadata.js +22 -1
- package/dist/components/Grid/core/model/Metadata.js.map +1 -0
- package/dist/components/Grid/core/services/RecordUpdateService/controllers/useRecordUpdateServiceController.js +25 -1
- package/dist/components/Grid/core/services/RecordUpdateService/controllers/useRecordUpdateServiceController.js.map +1 -0
- package/dist/components/Grid/core/services/RecordUpdateService/model/RecordUpdateService.js +190 -1
- package/dist/components/Grid/core/services/RecordUpdateService/model/RecordUpdateService.js.map +1 -0
- package/dist/components/Grid/filtering/components/FilterCallout/FilterCallout.js +50 -1
- package/dist/components/Grid/filtering/components/FilterCallout/FilterCallout.js.map +1 -0
- package/dist/components/Grid/filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.js +58 -1
- package/dist/components/Grid/filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.js.map +1 -0
- package/dist/components/Grid/filtering/components/FilterCallout/components/ConditionValue/ConditionValue.js +52 -1
- package/dist/components/Grid/filtering/components/FilterCallout/components/ConditionValue/ConditionValue.js.map +1 -0
- package/dist/components/Grid/filtering/components/FilterCallout/components/ConditionValue/model/ConditionComponentValue.js +125 -1
- package/dist/components/Grid/filtering/components/FilterCallout/components/ConditionValue/model/ConditionComponentValue.js.map +1 -0
- package/dist/components/Grid/filtering/components/FilterCallout/styles.js +40 -1
- package/dist/components/Grid/filtering/components/FilterCallout/styles.js.map +1 -0
- package/dist/components/Grid/filtering/constants.js +51 -1
- package/dist/components/Grid/filtering/constants.js.map +1 -0
- package/dist/components/Grid/filtering/controller/useColumnFilterConditionController.js +42 -1
- package/dist/components/Grid/filtering/controller/useColumnFilterConditionController.js.map +1 -0
- package/dist/components/Grid/filtering/model/Condition.js +297 -1
- package/dist/components/Grid/filtering/model/Condition.js.map +1 -0
- package/dist/components/Grid/filtering/model/Filtering.js +78 -1
- package/dist/components/Grid/filtering/model/Filtering.js.map +1 -0
- package/dist/components/Grid/filtering/utils/FilteringUtilts.js +195 -1
- package/dist/components/Grid/filtering/utils/FilteringUtilts.js.map +1 -0
- package/dist/components/Grid/index.js +2 -1
- package/dist/components/Grid/index.js.map +1 -0
- package/dist/components/Grid/paging/components/Paging/Paging.js +63 -1
- package/dist/components/Grid/paging/components/Paging/Paging.js.map +1 -0
- package/dist/components/Grid/paging/components/Paging/styles.js +41 -1
- package/dist/components/Grid/paging/components/Paging/styles.js.map +1 -0
- package/dist/components/Grid/paging/controllers/usePagingController.js +23 -1
- package/dist/components/Grid/paging/controllers/usePagingController.js.map +1 -0
- package/dist/components/Grid/paging/model/Paging.js +56 -1
- package/dist/components/Grid/paging/model/Paging.js.map +1 -0
- package/dist/components/Grid/selection/controllers/useSelectionController.js +17 -1
- package/dist/components/Grid/selection/controllers/useSelectionController.js.map +1 -0
- package/dist/components/Grid/selection/model/Selection.js +69 -1
- package/dist/components/Grid/selection/model/Selection.js.map +1 -0
- package/dist/components/Grid/sorting/Sorting.js +33 -1
- package/dist/components/Grid/sorting/Sorting.js.map +1 -0
- package/dist/components/Grid/sorting/components/SortingContextualMenu/SortingContextualMenu.js +120 -1
- package/dist/components/Grid/sorting/components/SortingContextualMenu/SortingContextualMenu.js.map +1 -0
- package/dist/components/Grid/sorting/components/SortingContextualMenu/styles.js +15 -1
- package/dist/components/Grid/sorting/components/SortingContextualMenu/styles.js.map +1 -0
- package/dist/components/Grid/sorting/controllers/useColumnSortingController.js +21 -1
- package/dist/components/Grid/sorting/controllers/useColumnSortingController.js.map +1 -0
- package/dist/components/Grid/translations.js +81 -1
- package/dist/components/Grid/translations.js.map +1 -0
- package/dist/components/Grid/validation/controllers/useRecordValidationController.js +25 -1
- package/dist/components/Grid/validation/controllers/useRecordValidationController.js.map +1 -0
- package/dist/components/Grid/validation/model/ColumnValidation.js +84 -1
- package/dist/components/Grid/validation/model/ColumnValidation.js.map +1 -0
- package/dist/components/Lookup/Lookup.js +201 -1
- package/dist/components/Lookup/Lookup.js.map +1 -0
- package/dist/components/Lookup/components/RecordCreator.js +37 -1
- package/dist/components/Lookup/components/RecordCreator.js.map +1 -0
- package/dist/components/Lookup/components/TargetSelector.js +19 -1
- package/dist/components/Lookup/components/TargetSelector.js.map +1 -0
- package/dist/components/Lookup/hooks/useFetchXml.js +27 -1
- package/dist/components/Lookup/hooks/useFetchXml.js.map +1 -0
- package/dist/components/Lookup/hooks/useLoadedEntities.js +20 -1
- package/dist/components/Lookup/hooks/useLoadedEntities.js.map +1 -0
- package/dist/components/Lookup/hooks/useLookup.js +111 -1
- package/dist/components/Lookup/hooks/useLookup.js.map +1 -0
- package/dist/components/Lookup/index.js +3 -1
- package/dist/components/Lookup/index.js.map +1 -0
- package/dist/components/Lookup/styles.js +98 -1
- package/dist/components/Lookup/styles.js.map +1 -0
- package/dist/components/Lookup/translations.js +33 -1
- package/dist/components/Lookup/translations.js.map +1 -0
- package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.js +74 -1
- package/dist/components/MultiSelectOptionSet/MultiSelectOptionSet.js.map +1 -0
- package/dist/components/MultiSelectOptionSet/index.js +2 -1
- package/dist/components/MultiSelectOptionSet/index.js.map +1 -0
- package/dist/components/OptionSet/OptionSet.js +61 -1
- package/dist/components/OptionSet/OptionSet.js.map +1 -0
- package/dist/components/OptionSet/index.js +2 -1
- package/dist/components/OptionSet/index.js.map +1 -0
- package/dist/components/TextField/TextField.js +113 -1
- package/dist/components/TextField/TextField.js.map +1 -0
- package/dist/components/TextField/index.js +2 -1
- package/dist/components/TextField/index.js.map +1 -0
- package/dist/components/TwoOptions/TwoOptions.js +36 -1
- package/dist/components/TwoOptions/TwoOptions.js.map +1 -0
- package/dist/components/TwoOptions/index.js +2 -1
- package/dist/components/TwoOptions/index.js.map +1 -0
- package/dist/constants.js +35 -1
- package/dist/constants.js.map +1 -0
- package/dist/hooks/index.js +7 -1
- package/dist/hooks/index.js.map +1 -0
- package/dist/hooks/useControl.js +95 -1
- package/dist/hooks/useControl.js.map +1 -0
- package/dist/hooks/useControlSizing.js +15 -1
- package/dist/hooks/useControlSizing.js.map +1 -0
- package/dist/hooks/useControlTheme.js +9 -1
- package/dist/hooks/useControlTheme.js.map +1 -0
- package/dist/hooks/useFocusIn.js +33 -1
- package/dist/hooks/useFocusIn.js.map +1 -0
- package/dist/hooks/useInputBasedControl.js +38 -1
- package/dist/hooks/useInputBasedControl.js.map +1 -0
- package/dist/hooks/useMouseOver.js +23 -1
- package/dist/hooks/useMouseOver.js.map +1 -0
- package/dist/index.d.ts +11 -1
- package/dist/index.js +19 -1
- package/dist/index.js.map +1 -0
- package/dist/interfaces/index.js +1 -0
- package/dist/interfaces/index.js.map +1 -0
- package/dist/utils/Numeral.js +64 -1
- package/dist/utils/Numeral.js.map +1 -0
- package/dist/utils/Theme.js +72 -1
- package/dist/utils/Theme.js.map +1 -0
- package/dist/utils/index.js +3 -1
- package/dist/utils/index.js.map +1 -0
- package/package.json +4 -2
- package/dist/Grid-574c3822.js +0 -1
- package/dist/components/DateTime/interfaces.js +0 -1
- package/dist/components/Decimal/interfaces.js +0 -1
- package/dist/components/Duration/interfaces.js +0 -1
- package/dist/components/Grid/core/interfaces/IGridColumn.js +0 -1
- package/dist/components/Grid/core/interfaces/IGridContext.js +0 -1
- package/dist/components/Grid/interfaces.js +0 -1
- package/dist/components/Lookup/interfaces.js +0 -1
- package/dist/components/MultiSelectOptionSet/interfaces.js +0 -1
- package/dist/components/OptionSet/interfaces.js +0 -1
- package/dist/components/TextField/interfaces.js +0 -1
- package/dist/components/TwoOptions/interfaces.js +0 -1
- package/dist/interfaces/context.js +0 -1
- package/dist/interfaces/parameters.js +0 -1
- package/dist/interfaces/property.js +0 -1
- package/dist/interfaces/theme.js +0 -1
|
@@ -1 +1,133 @@
|
|
|
1
|
-
import{
|
|
1
|
+
import { jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { ThemeProvider } from '@fluentui/react';
|
|
3
|
+
import { useRef, useEffect } from 'react';
|
|
4
|
+
import { getDateTimeStyles } from './styles.js';
|
|
5
|
+
import { useDateTime } from './hooks/useDateTime.js';
|
|
6
|
+
import { Calendar } from './components/Calendar.js';
|
|
7
|
+
import { DatePicker } from '@talxis/react-components';
|
|
8
|
+
import { useControlSizing } from '../../hooks/useControlSizing.js';
|
|
9
|
+
import dayjs from 'dayjs';
|
|
10
|
+
|
|
11
|
+
const DateTime = (componentProps) => {
|
|
12
|
+
const ref = useRef(null);
|
|
13
|
+
const datePickerRef = useRef(null);
|
|
14
|
+
const context = componentProps.context;
|
|
15
|
+
const parameters = componentProps.parameters;
|
|
16
|
+
const [isDateTime, theme, labels, date, patterns] = useDateTime(componentProps, ref);
|
|
17
|
+
const styles = getDateTimeStyles(theme);
|
|
18
|
+
const { height, width } = useControlSizing(componentProps.context.mode);
|
|
19
|
+
const lastInputedTimeString = useRef();
|
|
20
|
+
useEffect(() => {
|
|
21
|
+
if (componentProps.parameters.AutoFocus?.raw === true) {
|
|
22
|
+
datePickerRef.current?.showDatePickerPopup();
|
|
23
|
+
}
|
|
24
|
+
}, []);
|
|
25
|
+
const getRestrictedDates = () => {
|
|
26
|
+
if (!parameters.RestrictedDates?.raw) {
|
|
27
|
+
return undefined;
|
|
28
|
+
}
|
|
29
|
+
return JSON.parse(parameters.RestrictedDates?.raw).map((x) => new Date(x));
|
|
30
|
+
};
|
|
31
|
+
const onOverrideDayCellProps = (element, date, classNames) => {
|
|
32
|
+
if (!element || !parameters.RestrictedDaysOfWeek?.raw) {
|
|
33
|
+
return;
|
|
34
|
+
}
|
|
35
|
+
const weekDaysToExclude = JSON.parse(parameters.RestrictedDaysOfWeek.raw);
|
|
36
|
+
if (weekDaysToExclude.includes(date.getDay())) {
|
|
37
|
+
element.setAttribute('data-is-focusable', 'false');
|
|
38
|
+
element.classList?.add(classNames.dayOutsideBounds);
|
|
39
|
+
element.children[0].disabled = true;
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
return (jsx(ThemeProvider, { theme: theme, applyTo: "none", ref: ref, children: jsx(DatePicker, { className: styles.datePicker, underlined: theme.effects.underlined, componentRef: datePickerRef, hideErrorMessage: !parameters.ShowErrorMessage?.raw, keepCalendarOpenAfterDaySelect: isDateTime, readOnly: context.mode.isControlDisabled,
|
|
43
|
+
//@ts-ignore - this is a hack to close the calendar when dates get selected on date only fields
|
|
44
|
+
onSelectDate: isDateTime ? undefined : (newDate) => date.set(newDate),
|
|
45
|
+
//disable so the user cannot input restricted Dates
|
|
46
|
+
allowTextInput: !parameters.RestrictedDates?.raw && !parameters.RestrictedDaysOfWeek?.raw,
|
|
47
|
+
// Lowest date supported by CDS: https://learn.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn996866(v=crm.8)?redirectedfrom=MSDN
|
|
48
|
+
minDate: new Date('1753-01-01T00:00:00.000Z'), firstDayOfWeek: componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek, calendarAs: (props) => {
|
|
49
|
+
const calendarProps = {
|
|
50
|
+
...props,
|
|
51
|
+
isMonthPickerVisible: parameters.EnableMonthPicker?.raw !== false,
|
|
52
|
+
isDayPickerVisible: parameters.EnableDayPicker?.raw !== false,
|
|
53
|
+
calendarDayProps: {
|
|
54
|
+
restrictedDates: getRestrictedDates(),
|
|
55
|
+
customDayCellRef: onOverrideDayCellProps
|
|
56
|
+
},
|
|
57
|
+
strings: {
|
|
58
|
+
goToToday: labels.goToToday(),
|
|
59
|
+
days: JSON.parse(labels.days()),
|
|
60
|
+
months: JSON.parse(labels.months()),
|
|
61
|
+
shortDays: JSON.parse(labels.shortDays()),
|
|
62
|
+
shortMonths: JSON.parse(labels.shortMonths())
|
|
63
|
+
},
|
|
64
|
+
timePickerProps: {
|
|
65
|
+
underlined: theme.effects.underlined,
|
|
66
|
+
dateTimeFormat: patterns.fullDateTimePattern,
|
|
67
|
+
autoComplete: "off",
|
|
68
|
+
autoCapitalize: "off",
|
|
69
|
+
timeFormat: patterns.shortTimePattern,
|
|
70
|
+
label: labels.time(),
|
|
71
|
+
visible: isDateTime,
|
|
72
|
+
errorMessage: labels.invalidTimeInput(),
|
|
73
|
+
lastInputedTimeString: lastInputedTimeString.current,
|
|
74
|
+
useHour12: patterns.shortTimePattern.endsWith('A'),
|
|
75
|
+
onChange: (time) => {
|
|
76
|
+
date.set(undefined, time);
|
|
77
|
+
lastInputedTimeString.current = time;
|
|
78
|
+
},
|
|
79
|
+
value: date.get(),
|
|
80
|
+
formattedDateTime: date.getFormatted() ?? "",
|
|
81
|
+
strings: {
|
|
82
|
+
invalidInputErrorMessage: labels.invalidTimeInput()
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
};
|
|
86
|
+
if (isDateTime) {
|
|
87
|
+
calendarProps.onSelectDate = (newDate) => date.set(newDate);
|
|
88
|
+
}
|
|
89
|
+
return jsx(Calendar, { ...calendarProps });
|
|
90
|
+
}, errorMessage: parameters.value.errorMessage, textField: {
|
|
91
|
+
underlined: theme.effects.underlined,
|
|
92
|
+
value: date.getFormatted() ?? "",
|
|
93
|
+
onChange: (e, value) => {
|
|
94
|
+
if (isDateTime) {
|
|
95
|
+
const datePart = dayjs(value, patterns.shortDatePattern).format(patterns.shortDatePattern);
|
|
96
|
+
const time = value?.split(datePart).pop()?.substring(1);
|
|
97
|
+
lastInputedTimeString.current = time;
|
|
98
|
+
}
|
|
99
|
+
date.setDateString(value);
|
|
100
|
+
},
|
|
101
|
+
placeholder: '---',
|
|
102
|
+
onNotifyValidationResult: () => null,
|
|
103
|
+
noValidate: true,
|
|
104
|
+
borderless: parameters.EnableBorder?.raw === false,
|
|
105
|
+
styles: {
|
|
106
|
+
fieldGroup: {
|
|
107
|
+
height: height,
|
|
108
|
+
width: width
|
|
109
|
+
}
|
|
110
|
+
},
|
|
111
|
+
//@ts-ignore - TODO: fix types in shared components
|
|
112
|
+
deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {
|
|
113
|
+
key: 'Delete',
|
|
114
|
+
onClick: date.clear,
|
|
115
|
+
showOnlyOnHover: true,
|
|
116
|
+
iconProps: {
|
|
117
|
+
iconName: 'Cancel'
|
|
118
|
+
}
|
|
119
|
+
} : undefined,
|
|
120
|
+
clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {
|
|
121
|
+
key: 'copy',
|
|
122
|
+
showOnlyOnHover: true,
|
|
123
|
+
iconProps: {
|
|
124
|
+
iconName: 'Copy'
|
|
125
|
+
}
|
|
126
|
+
} : undefined
|
|
127
|
+
},
|
|
128
|
+
//undefined will break the calendar => it wont reflect date change in it's UI
|
|
129
|
+
value: date.get() ?? new Date() }) }));
|
|
130
|
+
};
|
|
131
|
+
|
|
132
|
+
export { DateTime };
|
|
133
|
+
//# sourceMappingURL=DateTime.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"DateTime.js","sources":["../../../src/components/DateTime/DateTime.tsx"],"sourcesContent":["\nimport { IDateTime } from \"./interfaces\";\nimport { DateRangeType, ICalendarDayGridStyles, IDatePicker, IProcessedStyleSet, ThemeProvider } from \"@fluentui/react\";\nimport { useEffect, useRef } from \"react\";\nimport { getDateTimeStyles } from \"./styles\";\nimport { useDateTime } from \"./hooks/useDateTime\";\nimport { Calendar, IInternalCalendarProps } from \"./components/Calendar\";\nimport { DatePicker } from \"@talxis/react-components\";\nimport React from 'react';\nimport { useControlSizing } from \"../../hooks/useControlSizing\";\nimport dayjs from \"dayjs\";\n\nexport const DateTime = (componentProps: IDateTime) => {\n const ref = useRef<HTMLDivElement>(null);\n const datePickerRef = useRef<IDatePicker>(null);\n const context = componentProps.context;\n const parameters = componentProps.parameters;\n const [isDateTime, theme, labels, date, patterns] = useDateTime(componentProps, ref);\n const styles = getDateTimeStyles(theme);\n const { height, width } = useControlSizing(componentProps.context.mode);\n const lastInputedTimeString = useRef<string>();\n\n useEffect(() => {\n if (componentProps.parameters.AutoFocus?.raw === true) {\n datePickerRef.current?.showDatePickerPopup();\n }\n }, []);\n\n const getRestrictedDates = (): Date[] | undefined => {\n if(!parameters.RestrictedDates?.raw) {\n return undefined;\n }\n return JSON.parse(parameters.RestrictedDates?.raw).map((x: string) => new Date(x))\n }\n const onOverrideDayCellProps = (element: HTMLElement, date: Date, classNames: IProcessedStyleSet<ICalendarDayGridStyles>) => {\n if(!element || !parameters.RestrictedDaysOfWeek?.raw) {\n return;\n }\n const weekDaysToExclude: number[] = JSON.parse(parameters.RestrictedDaysOfWeek.raw);\n if(weekDaysToExclude.includes(date.getDay())) {\n element.setAttribute('data-is-focusable', 'false');\n element.classList?.add(classNames.dayOutsideBounds!);\n (element.children[0] as HTMLButtonElement).disabled = true;\n }\n }\n\n return (\n <ThemeProvider theme={theme} applyTo=\"none\" ref={ref}>\n <DatePicker\n className={styles.datePicker}\n underlined={theme.effects.underlined}\n componentRef={datePickerRef}\n hideErrorMessage={!parameters.ShowErrorMessage?.raw}\n keepCalendarOpenAfterDaySelect={isDateTime}\n readOnly={context.mode.isControlDisabled}\n //@ts-ignore - this is a hack to close the calendar when dates get selected on date only fields\n onSelectDate={isDateTime ? undefined : (newDate) => date.set(newDate!)}\n //disable so the user cannot input restricted Dates\n allowTextInput={!parameters.RestrictedDates?.raw && !parameters.RestrictedDaysOfWeek?.raw}\n // Lowest date supported by CDS: https://learn.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn996866(v=crm.8)?redirectedfrom=MSDN\n minDate={new Date('1753-01-01T00:00:00.000Z')}\n firstDayOfWeek={componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek}\n calendarAs={(props) =>\n {\n const calendarProps: IInternalCalendarProps = {\n ...props,\n isMonthPickerVisible: parameters.EnableMonthPicker?.raw !== false,\n isDayPickerVisible: parameters.EnableDayPicker?.raw !== false,\n calendarDayProps: {\n restrictedDates: getRestrictedDates(),\n customDayCellRef: onOverrideDayCellProps\n },\n strings: {\n goToToday: labels.goToToday(),\n days: JSON.parse(labels.days()),\n months: JSON.parse(labels.months()),\n shortDays: JSON.parse(labels.shortDays()),\n shortMonths: JSON.parse(labels.shortMonths())\n },\n timePickerProps: {\n underlined: theme.effects.underlined,\n dateTimeFormat: patterns.fullDateTimePattern,\n autoComplete: \"off\",\n autoCapitalize: \"off\",\n timeFormat: patterns.shortTimePattern,\n label: labels.time(),\n visible: isDateTime,\n errorMessage: labels.invalidTimeInput(),\n lastInputedTimeString: lastInputedTimeString.current,\n useHour12: patterns.shortTimePattern.endsWith('A'),\n onChange: (time?: string) => {\n date.set(undefined, time);\n lastInputedTimeString.current = time;\n },\n value: date.get(),\n formattedDateTime: date.getFormatted() ?? \"\",\n strings: {\n invalidInputErrorMessage: labels.invalidTimeInput()\n }\n }\n };\n if(isDateTime) {\n calendarProps.onSelectDate = (newDate) => date.set(newDate)\n }\n return <Calendar {...calendarProps} />\n }\n }\n errorMessage={parameters.value.errorMessage}\n textField={{\n underlined: theme.effects.underlined,\n value: date.getFormatted() ?? \"\",\n onChange: (e, value) => {\n if(isDateTime) {\n const datePart = dayjs(value, patterns.shortDatePattern).format(patterns.shortDatePattern);\n const time = value?.split(datePart).pop()?.substring(1);\n lastInputedTimeString.current = time;\n }\n date.setDateString(value)\n },\n placeholder: '---',\n onNotifyValidationResult: () => null,\n noValidate: true,\n borderless: parameters.EnableBorder?.raw === false,\n styles: {\n fieldGroup: {\n height: height,\n width: width\n }\n },\n //@ts-ignore - TODO: fix types in shared components\n deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {\n key: 'Delete',\n onClick: date.clear,\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Cancel'\n }\n } : undefined,\n clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {\n key: 'copy',\n showOnlyOnHover: true,\n iconProps: {\n iconName: 'Copy'\n }\n } : undefined\n }\n }\n //undefined will break the calendar => it wont reflect date change in it's UI\n value={date.get() ?? new Date()}\n />\n </ThemeProvider>\n );\n};\n\n"],"names":["_jsx"],"mappings":"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"}
|
|
@@ -10,7 +10,7 @@ interface IInternalTimePickerProps extends Omit<ITimePickerProps, 'onChange' | '
|
|
|
10
10
|
lastInputedTimeString?: string;
|
|
11
11
|
onChange: (time?: string) => void;
|
|
12
12
|
}
|
|
13
|
-
interface IInternalCalendarProps extends ICalendarProps {
|
|
13
|
+
export interface IInternalCalendarProps extends ICalendarProps {
|
|
14
14
|
timePickerProps: IInternalTimePickerProps;
|
|
15
15
|
}
|
|
16
16
|
export declare const Calendar: (props: IInternalCalendarProps) => JSX.Element;
|
|
@@ -1 +1,63 @@
|
|
|
1
|
-
import{jsxs
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
|
+
import { useTheme } from '@fluentui/react';
|
|
3
|
+
import { Calendar as Calendar$1 } from '@fluentui/react/lib/Calendar';
|
|
4
|
+
import { useRef, useState, useEffect } from 'react';
|
|
5
|
+
import { getDateTimeStyles } from '../styles.js';
|
|
6
|
+
import { TimePicker } from '@talxis/react-components';
|
|
7
|
+
import dayjs from 'dayjs';
|
|
8
|
+
|
|
9
|
+
const Calendar = (props) => {
|
|
10
|
+
const timePickerProps = props.timePickerProps;
|
|
11
|
+
const formattedDateTime = timePickerProps.formattedDateTime;
|
|
12
|
+
const theme = useTheme();
|
|
13
|
+
const styles = getDateTimeStyles(theme);
|
|
14
|
+
const timePickerRef = useRef(null);
|
|
15
|
+
const [error, setError] = useState(false);
|
|
16
|
+
const getFormattedTime = () => {
|
|
17
|
+
const dayjsDate = dayjs(formattedDateTime, timePickerProps.dateTimeFormat, true);
|
|
18
|
+
if (!dayjsDate.isValid()) {
|
|
19
|
+
return timePickerProps.lastInputedTimeString;
|
|
20
|
+
}
|
|
21
|
+
return dayjsDate.format(timePickerProps.timeFormat) ?? "";
|
|
22
|
+
};
|
|
23
|
+
const onChange = (event, time) => {
|
|
24
|
+
const dayjsDate = dayjs(time);
|
|
25
|
+
let timeValue;
|
|
26
|
+
if (!dayjsDate.isValid()) {
|
|
27
|
+
//@ts-ignore - need to access internals to properly show error values
|
|
28
|
+
timeValue = timePickerRef.current.state.currentPendingValue;
|
|
29
|
+
}
|
|
30
|
+
else {
|
|
31
|
+
timeValue = dayjsDate.format(timePickerProps.timeFormat);
|
|
32
|
+
}
|
|
33
|
+
//@ts-ignore - need to access internals to properly show error values
|
|
34
|
+
timePickerProps.onChange(timeValue);
|
|
35
|
+
};
|
|
36
|
+
useEffect(() => {
|
|
37
|
+
setError(false);
|
|
38
|
+
if (!timePickerProps.visible) {
|
|
39
|
+
return;
|
|
40
|
+
}
|
|
41
|
+
const formattedTime = getFormattedTime();
|
|
42
|
+
//@ts-ignore - need to access internals to properly show error values
|
|
43
|
+
timePickerRef.current.setState({
|
|
44
|
+
currentPendingValue: getFormattedTime()
|
|
45
|
+
});
|
|
46
|
+
if (!formattedTime || !formattedDateTime) {
|
|
47
|
+
return;
|
|
48
|
+
}
|
|
49
|
+
const time = dayjs(formattedTime, timePickerProps.timeFormat, true);
|
|
50
|
+
if (!time.isValid()) {
|
|
51
|
+
setError(true);
|
|
52
|
+
}
|
|
53
|
+
}, [formattedDateTime]);
|
|
54
|
+
return (jsxs("div", { className: styles.calendarCallout, children: [jsx(Calendar$1, { ...props, value: props.value }), jsx("hr", {}), timePickerProps.visible &&
|
|
55
|
+
jsx(TimePicker, { ...timePickerProps, errorMessage: error ? timePickerProps.errorMessage : undefined, componentRef: timePickerRef, onFormatDate: (date) => dayjs(date).format(timePickerProps.timeFormat), onChange: onChange, useComboBoxAsMenuWidth: true, styles: {
|
|
56
|
+
callout: {
|
|
57
|
+
maxHeight: '300px !important'
|
|
58
|
+
}
|
|
59
|
+
}, increments: 15, allowFreeform: true })] }));
|
|
60
|
+
};
|
|
61
|
+
|
|
62
|
+
export { Calendar };
|
|
63
|
+
//# sourceMappingURL=Calendar.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Calendar.js","sources":["../../../../src/components/DateTime/components/Calendar.tsx"],"sourcesContent":["import { ICalendarProps, IComboBox } from \"@fluentui/react\";\nimport { useTheme } from \"@fluentui/react\";\nimport { Calendar as CalendarBase } from '@fluentui/react/lib/Calendar';\nimport { useEffect, useRef, useState } from \"react\";\nimport { getDateTimeStyles } from \"../styles\";\nimport { ITimePickerProps, TimePicker } from \"@talxis/react-components\";\nimport dayjs from \"dayjs\";\nimport React from 'react';\n\ninterface IInternalTimePickerProps extends Omit<ITimePickerProps, 'onChange' | 'defaultValue'> {\n formattedDateTime: string;\n visible: boolean;\n timeFormat: string;\n dateTimeFormat: string;\n underlined?: boolean;\n lastInputedTimeString?: string;\n onChange: (time?: string) => void;\n}\n\nexport interface IInternalCalendarProps extends ICalendarProps {\n timePickerProps: IInternalTimePickerProps;\n}\n\nexport const Calendar = (props: IInternalCalendarProps) => {\n const timePickerProps = props.timePickerProps;\n const formattedDateTime = timePickerProps.formattedDateTime;\n const theme = useTheme();\n const styles = getDateTimeStyles(theme);\n const timePickerRef = useRef<IComboBox>(null);\n const [error, setError] = useState(false);\n\n const getFormattedTime = () => {\n const dayjsDate = dayjs(formattedDateTime, timePickerProps.dateTimeFormat, true);\n if (!dayjsDate.isValid()) {\n return timePickerProps.lastInputedTimeString;\n }\n return dayjsDate.format(timePickerProps.timeFormat) ?? \"\";\n };\n\n const onChange = (event: React.FormEvent<IComboBox>, time: Date) => {\n const dayjsDate = dayjs(time);\n let timeValue;\n if (!dayjsDate.isValid()) {\n //@ts-ignore - need to access internals to properly show error values\n timeValue = timePickerRef.current.state.currentPendingValue;\n }\n else {\n timeValue = dayjsDate.format(timePickerProps.timeFormat);\n }\n //@ts-ignore - need to access internals to properly show error values\n timePickerProps.onChange(timeValue);\n\n }\n\n useEffect(() => {\n setError(false);\n if (!timePickerProps.visible) {\n return;\n }\n const formattedTime = getFormattedTime();\n //@ts-ignore - need to access internals to properly show error values\n timePickerRef.current.setState({\n currentPendingValue: getFormattedTime()\n })\n if(!formattedTime || !formattedDateTime) {\n return;\n }\n const time = dayjs(formattedTime, timePickerProps.timeFormat, true);\n if (!time.isValid()) {\n setError(true);\n }\n }, [formattedDateTime]);\n\n\n return (\n <div className={styles.calendarCallout}>\n <CalendarBase {...props} value={props.value} />\n <hr />\n {timePickerProps.visible &&\n <TimePicker\n {...timePickerProps}\n errorMessage={error ? timePickerProps.errorMessage : undefined}\n componentRef={timePickerRef}\n onFormatDate={(date) => dayjs(date).format(timePickerProps.timeFormat)}\n onChange={onChange}\n useComboBoxAsMenuWidth\n styles={{\n callout: {\n maxHeight: '300px !important'\n }\n }}\n increments={15}\n allowFreeform\n />\n }\n </div>\n );\n};\n"],"names":["_jsxs","_jsx","CalendarBase"],"mappings":"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"}
|
|
@@ -1 +1,137 @@
|
|
|
1
|
-
import{useRef
|
|
1
|
+
import { useRef, useEffect } from 'react';
|
|
2
|
+
import { useInputBasedControl } from '../../../hooks/useInputBasedControl.js';
|
|
3
|
+
import dayjs from 'dayjs';
|
|
4
|
+
import utc from 'dayjs/plugin/utc';
|
|
5
|
+
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
6
|
+
import { getDefaultDateTimeTranslations } from '../translations.js';
|
|
7
|
+
|
|
8
|
+
dayjs.extend(customParseFormat);
|
|
9
|
+
dayjs.extend(utc);
|
|
10
|
+
const useDateTime = (props, ref) => {
|
|
11
|
+
const boundValue = props.parameters.value;
|
|
12
|
+
const context = props.context;
|
|
13
|
+
const behavior = boundValue.attributes.Behavior;
|
|
14
|
+
const format = boundValue.attributes.Format;
|
|
15
|
+
const dateFormattingInfo = context.userSettings.dateFormattingInfo;
|
|
16
|
+
const lastValidDateRef = useRef(undefined);
|
|
17
|
+
const isDateTime = (() => {
|
|
18
|
+
switch (format) {
|
|
19
|
+
case 'DateAndTime':
|
|
20
|
+
case 'Date and Time':
|
|
21
|
+
case 'DateAndTime.DateAndTime':
|
|
22
|
+
case 'datetime': {
|
|
23
|
+
return true;
|
|
24
|
+
}
|
|
25
|
+
default: {
|
|
26
|
+
return false;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
})();
|
|
30
|
+
//MS returns the pattern without correct separator and they do this during formatting
|
|
31
|
+
const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\//g, dateFormattingInfo.dateSeparator).toUpperCase();
|
|
32
|
+
const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');
|
|
33
|
+
const formatting = (() => {
|
|
34
|
+
if (isDateTime) {
|
|
35
|
+
return `${shortDatePattern} ${shortTimePattern}`;
|
|
36
|
+
}
|
|
37
|
+
return shortDatePattern;
|
|
38
|
+
})();
|
|
39
|
+
const formatDate = (date) => {
|
|
40
|
+
if (date instanceof Date) {
|
|
41
|
+
if (isDateTime) {
|
|
42
|
+
//should handle the time zone conversion
|
|
43
|
+
return context.formatting.formatTime(date, behavior);
|
|
44
|
+
}
|
|
45
|
+
return context.formatting.formatDateShort(date);
|
|
46
|
+
}
|
|
47
|
+
return date;
|
|
48
|
+
};
|
|
49
|
+
const { value, labels, theme, setValue, onNotifyOutputChanged } = useInputBasedControl('DateTime', props, {
|
|
50
|
+
formatter: formatDate,
|
|
51
|
+
defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)
|
|
52
|
+
});
|
|
53
|
+
useEffect(() => {
|
|
54
|
+
const onBlur = () => {
|
|
55
|
+
onNotifyOutputChanged({
|
|
56
|
+
value: dateExtractor(value)
|
|
57
|
+
});
|
|
58
|
+
};
|
|
59
|
+
const input = ref.current?.querySelector('input');
|
|
60
|
+
input?.addEventListener('blur', onBlur);
|
|
61
|
+
return () => {
|
|
62
|
+
input?.removeEventListener('blur', onBlur);
|
|
63
|
+
};
|
|
64
|
+
}, [value]);
|
|
65
|
+
useEffect(() => {
|
|
66
|
+
if (boundValue.raw instanceof Date) {
|
|
67
|
+
lastValidDateRef.current = boundValue.raw;
|
|
68
|
+
}
|
|
69
|
+
}, [boundValue.raw]);
|
|
70
|
+
const getDate = () => {
|
|
71
|
+
if (boundValue.raw instanceof Date) {
|
|
72
|
+
if (behavior === 3) {
|
|
73
|
+
//the date in javascript gets automatically adjusted to local time zone
|
|
74
|
+
//this will make it think that the date already came in local time, thus not adjusting the time
|
|
75
|
+
const date = new Date(boundValue.raw.toISOString().replace('Z', ''));
|
|
76
|
+
return date;
|
|
77
|
+
}
|
|
78
|
+
return boundValue.raw;
|
|
79
|
+
}
|
|
80
|
+
if (boundValue.error) {
|
|
81
|
+
return lastValidDateRef.current;
|
|
82
|
+
}
|
|
83
|
+
return undefined;
|
|
84
|
+
};
|
|
85
|
+
const dateExtractor = (value) => {
|
|
86
|
+
if (value instanceof Date) {
|
|
87
|
+
return value;
|
|
88
|
+
}
|
|
89
|
+
const dayjsDate = dayjs(value, formatting, true);
|
|
90
|
+
if (!dayjsDate.isValid()) {
|
|
91
|
+
return value;
|
|
92
|
+
}
|
|
93
|
+
return dayjsDate.toDate();
|
|
94
|
+
};
|
|
95
|
+
const clearDate = () => {
|
|
96
|
+
onNotifyOutputChanged({
|
|
97
|
+
value: undefined
|
|
98
|
+
});
|
|
99
|
+
};
|
|
100
|
+
const selectDate = (date, time) => {
|
|
101
|
+
let dayjsDate = dayjs(date ?? getDate());
|
|
102
|
+
//date selected from calendar, keep the original time
|
|
103
|
+
if (!time) {
|
|
104
|
+
time = dayjs(getDate()).format(shortTimePattern);
|
|
105
|
+
}
|
|
106
|
+
const dayjsTime = dayjs(time, shortTimePattern, true);
|
|
107
|
+
let invalidDateString;
|
|
108
|
+
if (!dayjsTime.isValid()) {
|
|
109
|
+
invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`;
|
|
110
|
+
}
|
|
111
|
+
dayjsDate = dayjsDate.hour(dayjsTime.hour());
|
|
112
|
+
dayjsDate = dayjsDate.minute(dayjsTime.minute());
|
|
113
|
+
onNotifyOutputChanged({
|
|
114
|
+
value: dateExtractor(invalidDateString ?? dayjsDate.toDate())
|
|
115
|
+
});
|
|
116
|
+
};
|
|
117
|
+
return [
|
|
118
|
+
isDateTime,
|
|
119
|
+
theme,
|
|
120
|
+
labels,
|
|
121
|
+
{
|
|
122
|
+
get: getDate,
|
|
123
|
+
clear: clearDate,
|
|
124
|
+
getFormatted: () => value,
|
|
125
|
+
set: selectDate,
|
|
126
|
+
setDateString: setValue
|
|
127
|
+
},
|
|
128
|
+
{
|
|
129
|
+
shortDatePattern: shortDatePattern,
|
|
130
|
+
shortTimePattern: shortTimePattern,
|
|
131
|
+
fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`
|
|
132
|
+
}
|
|
133
|
+
];
|
|
134
|
+
};
|
|
135
|
+
|
|
136
|
+
export { useDateTime };
|
|
137
|
+
//# sourceMappingURL=useDateTime.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDateTime.js","sources":["../../../../src/components/DateTime/hooks/useDateTime.ts"],"sourcesContent":["import { useEffect, useRef } from \"react\";\nimport { useInputBasedControl } from \"../../../hooks/useInputBasedControl\";\nimport { IDateTime, IDateTimeOutputs, IDateTimeParameters} from \"../interfaces\";\nimport dayjs from 'dayjs';\nimport utc from 'dayjs/plugin/utc';\nimport customParseFormat from 'dayjs/plugin/customParseFormat';\nimport { getDefaultDateTimeTranslations } from \"../translations\";\nimport {ITranslation } from \"../../../hooks\";\nimport { ITheme } from \"../../../interfaces/theme\";\ndayjs.extend(customParseFormat);\ndayjs.extend(utc);\n\nexport const useDateTime = (props: IDateTime, ref: React.RefObject<HTMLDivElement>): [\n boolean,\n ITheme,\n ITranslation<Required<IDateTime>['translations']>,\n {\n get: () => Date | undefined;\n getFormatted: () => string | undefined;\n set: (date?: Date, time?: string) => void;\n setDateString: (value: string | undefined) => void;\n clear: () => void;\n },\n {\n shortDatePattern: string\n shortTimePattern: string;\n fullDateTimePattern: string;\n },\n] => {\n\n const boundValue = props.parameters.value;\n const context = props.context;\n const behavior = boundValue.attributes.Behavior;\n const format = boundValue.attributes.Format;\n const dateFormattingInfo = context.userSettings.dateFormattingInfo;\n const lastValidDateRef = useRef<Date | undefined>(undefined);\n \n const isDateTime = (() => {\n switch (format) {\n case 'DateAndTime':\n case 'Date and Time':\n case 'DateAndTime.DateAndTime':\n case 'datetime': {\n return true;\n }\n default: {\n return false;\n }\n }\n })();\n\n //MS returns the pattern without correct separator and they do this during formatting\n const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\\//g, dateFormattingInfo.dateSeparator).toUpperCase();\n const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');\n const formatting = (() => {\n if (isDateTime) {\n return `${shortDatePattern} ${shortTimePattern}`;\n }\n return shortDatePattern;\n })();\n\n const formatDate = (date: Date | undefined | null | string): string | undefined | null => {\n if (date instanceof Date) {\n if (isDateTime) {\n //should handle the time zone conversion\n return context.formatting.formatTime(date, behavior);\n }\n return context.formatting.formatDateShort(date);\n }\n return date;\n };\n\n const {value, labels, theme, setValue, onNotifyOutputChanged} = useInputBasedControl<string | undefined, IDateTimeParameters, IDateTimeOutputs, Required<IDateTime>['translations']>('DateTime', props, {\n formatter: formatDate,\n defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)\n });\n\n useEffect(() => {\n const onBlur = () => {\n onNotifyOutputChanged({\n value: dateExtractor(value!) as any\n });\n };\n const input = ref.current?.querySelector('input');\n input?.addEventListener('blur', onBlur);\n return () => {\n input?.removeEventListener('blur', onBlur);\n };\n }, [value]);\n\n useEffect(() => {\n if (boundValue.raw instanceof Date) {\n lastValidDateRef.current = boundValue.raw;\n }\n }, [boundValue.raw]);\n\n const getDate = (): Date | undefined => {\n if (boundValue.raw instanceof Date) {\n if (behavior === 3) {\n //the date in javascript gets automatically adjusted to local time zone\n //this will make it think that the date already came in local time, thus not adjusting the time\n const date = new Date(boundValue.raw.toISOString().replace('Z', ''));\n return date;\n }\n return boundValue.raw;\n }\n if(boundValue.error) {\n return lastValidDateRef.current;\n }\n return undefined;\n };\n\n const dateExtractor = (value: string | Date): Date | string => {\n if (value instanceof Date) {\n return value;\n }\n const dayjsDate = dayjs(value, formatting, true);\n if (!dayjsDate.isValid()) {\n return value;\n }\n return dayjsDate.toDate();\n };\n\n const clearDate = () => {\n onNotifyOutputChanged({\n value: undefined\n });\n };\n\n const selectDate = (date?: Date, time?: string) => {\n let dayjsDate = dayjs(date ?? getDate());\n //date selected from calendar, keep the original time\n if (!time) {\n time = dayjs(getDate()).format(shortTimePattern);\n }\n const dayjsTime = dayjs(time, shortTimePattern, true);\n let invalidDateString;\n if(!dayjsTime.isValid()) {\n invalidDateString = `${dayjsDate.format(shortDatePattern)} ${time}`\n }\n dayjsDate = dayjsDate.hour(dayjsTime.hour());\n dayjsDate = dayjsDate.minute(dayjsTime.minute());\n onNotifyOutputChanged({\n value: dateExtractor(invalidDateString ?? dayjsDate.toDate()) as any\n });\n };\n return [\n isDateTime,\n theme,\n labels,\n {\n get: getDate,\n clear: clearDate,\n getFormatted: () => value,\n set: selectDate,\n setDateString: setValue\n },\n {\n shortDatePattern: shortDatePattern,\n shortTimePattern: shortTimePattern,\n fullDateTimePattern: `${shortDatePattern} ${shortTimePattern}`\n }\n ]\n};"],"names":[],"mappings":"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"}
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
export{DateTime}from
|
|
1
|
+
export { DateTime } from './DateTime.js';
|
|
2
|
+
export { useDateTime } from './hooks/useDateTime.js';
|
|
3
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { IDatePickerProps } from "@talxis/react-components";
|
|
2
|
-
import { IDateTimeProperty } from "../../interfaces";
|
|
2
|
+
import { IDateTimeProperty, IStringProperty, ITwoOptionsProperty } from "../../interfaces";
|
|
3
3
|
import { IControl, IOutputs, ITranslations } from "../../interfaces/context";
|
|
4
4
|
import { IInputParameters } from "../../interfaces/parameters";
|
|
5
5
|
import { getDefaultDateTimeTranslations } from "./translations";
|
|
@@ -7,6 +7,16 @@ export interface IDateTime extends IControl<IDateTimeParameters, IDateTimeOutput
|
|
|
7
7
|
}
|
|
8
8
|
export interface IDateTimeParameters extends IInputParameters {
|
|
9
9
|
value: IDateTimeProperty;
|
|
10
|
+
EnableMonthPicker?: ITwoOptionsProperty;
|
|
11
|
+
EnableDayPicker?: ITwoOptionsProperty;
|
|
12
|
+
/**
|
|
13
|
+
* JSON array of dates that should not be selectable, example: ['2019-01-10', '2019-01-11']
|
|
14
|
+
*/
|
|
15
|
+
RestrictedDates?: IStringProperty;
|
|
16
|
+
/**
|
|
17
|
+
* JSON array of week days that should not be selectable (0 = Sunday,...6 = Saturday), example: [0,2,3]
|
|
18
|
+
*/
|
|
19
|
+
RestrictedDaysOfWeek?: IStringProperty;
|
|
10
20
|
}
|
|
11
21
|
export interface IDateTimeOutputs extends IOutputs {
|
|
12
22
|
value?: Date;
|
|
@@ -1 +1,37 @@
|
|
|
1
|
-
import{mergeStyleSets
|
|
1
|
+
import { mergeStyleSets } from '@fluentui/react';
|
|
2
|
+
|
|
3
|
+
const getDateTimeStyles = (theme) => {
|
|
4
|
+
return mergeStyleSets({
|
|
5
|
+
datePicker: {
|
|
6
|
+
'[class^="statusMessage"]': {
|
|
7
|
+
display: 'none'
|
|
8
|
+
}
|
|
9
|
+
},
|
|
10
|
+
calendarCallout: {
|
|
11
|
+
'[class*="TALXIS__timepicker__root"]': {
|
|
12
|
+
padding: 12,
|
|
13
|
+
'label': {
|
|
14
|
+
paddingTop: 0
|
|
15
|
+
},
|
|
16
|
+
'i': {
|
|
17
|
+
fontSize: 16
|
|
18
|
+
}
|
|
19
|
+
},
|
|
20
|
+
'hr': {
|
|
21
|
+
margin: 0,
|
|
22
|
+
border: 'none',
|
|
23
|
+
height: 1,
|
|
24
|
+
backgroundColor: theme.semanticColors.menuDivider
|
|
25
|
+
},
|
|
26
|
+
'[class^="monthAndYear"], [class*="weekDayLabelCell"]': {
|
|
27
|
+
animationDuration: '0s'
|
|
28
|
+
},
|
|
29
|
+
'.ms-DatePicker': {
|
|
30
|
+
animationDuration: '0s'
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
});
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
export { getDateTimeStyles };
|
|
37
|
+
//# sourceMappingURL=styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"styles.js","sources":["../../../src/components/DateTime/styles.ts"],"sourcesContent":["import { ITheme, mergeStyleSets } from \"@fluentui/react\";\n\nexport const getDateTimeStyles = (theme: ITheme) => {\n return mergeStyleSets({\n datePicker: {\n '[class^=\"statusMessage\"]': {\n display: 'none'\n }\n },\n calendarCallout: {\n '[class*=\"TALXIS__timepicker__root\"]': {\n padding: 12,\n 'label': {\n paddingTop: 0\n },\n 'i': {\n fontSize: 16\n }\n },\n 'hr': {\n margin: 0,\n border: 'none',\n height: 1,\n backgroundColor: theme.semanticColors.menuDivider\n },\n '[class^=\"monthAndYear\"], [class*=\"weekDayLabelCell\"]': {\n animationDuration: '0s'\n },\n '.ms-DatePicker': {\n animationDuration: '0s'\n }\n }\n });\n};"],"names":[],"mappings":";;AAEa,MAAA,iBAAiB,GAAG,CAAC,KAAa,KAAI;AAC/C,IAAA,OAAO,cAAc,CAAC;AAClB,QAAA,UAAU,EAAE;AACR,YAAA,0BAA0B,EAAE;AACxB,gBAAA,OAAO,EAAE,MAAM;AAClB,aAAA;AACJ,SAAA;AACD,QAAA,eAAe,EAAE;AACb,YAAA,qCAAqC,EAAE;AACnC,gBAAA,OAAO,EAAE,EAAE;AACX,gBAAA,OAAO,EAAE;AACL,oBAAA,UAAU,EAAE,CAAC;AAChB,iBAAA;AACD,gBAAA,GAAG,EAAE;AACD,oBAAA,QAAQ,EAAE,EAAE;AACf,iBAAA;AACJ,aAAA;AACD,YAAA,IAAI,EAAE;AACF,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,MAAM,EAAE,MAAM;AACd,gBAAA,MAAM,EAAE,CAAC;AACT,gBAAA,eAAe,EAAE,KAAK,CAAC,cAAc,CAAC,WAAW;AACpD,aAAA;AACD,YAAA,sDAAsD,EAAE;AACpD,gBAAA,iBAAiB,EAAE,IAAI;AAC1B,aAAA;AACD,YAAA,gBAAgB,EAAE;AACd,gBAAA,iBAAiB,EAAE,IAAI;AAC1B,aAAA;AACJ,SAAA;AACJ,KAAA,CAAC,CAAC;AACP;;;;"}
|
|
@@ -1 +1,23 @@
|
|
|
1
|
-
const
|
|
1
|
+
const getDefaultDateTimeTranslations = (dateFormattingInfo) => {
|
|
2
|
+
return {
|
|
3
|
+
time: {
|
|
4
|
+
1029: 'Čas',
|
|
5
|
+
1033: 'Time'
|
|
6
|
+
},
|
|
7
|
+
goToToday: {
|
|
8
|
+
1029: 'Přejít na dnešek',
|
|
9
|
+
1033: 'Go to today'
|
|
10
|
+
},
|
|
11
|
+
invalidTimeInput: {
|
|
12
|
+
1029: 'Neplatný časový formát.',
|
|
13
|
+
1033: 'Invalid time format.'
|
|
14
|
+
},
|
|
15
|
+
days: dateFormattingInfo.dayNames,
|
|
16
|
+
months: dateFormattingInfo.monthNames,
|
|
17
|
+
shortDays: dateFormattingInfo.shortestDayNames,
|
|
18
|
+
shortMonths: dateFormattingInfo.abbreviatedMonthNames,
|
|
19
|
+
};
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { getDefaultDateTimeTranslations };
|
|
23
|
+
//# sourceMappingURL=translations.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"translations.js","sources":["../../../src/components/DateTime/translations.ts"],"sourcesContent":["export const getDefaultDateTimeTranslations = (dateFormattingInfo: ComponentFramework.UserSettingApi.DateFormattingInfo) => {\n return {\n time: {\n 1029: 'Čas',\n 1033: 'Time'\n },\n goToToday: {\n 1029: 'Přejít na dnešek',\n 1033: 'Go to today'\n },\n invalidTimeInput: {\n 1029: 'Neplatný časový formát.',\n 1033: 'Invalid time format.'\n },\n days: dateFormattingInfo.dayNames,\n months: dateFormattingInfo.monthNames,\n shortDays: dateFormattingInfo.shortestDayNames,\n shortMonths: dateFormattingInfo.abbreviatedMonthNames,\n }\n};"],"names":[],"mappings":"AAAa,MAAA,8BAA8B,GAAG,CAAC,kBAAwE,KAAI;IACvH,OAAO;AACH,QAAA,IAAI,EAAE;AACF,YAAA,IAAI,EAAE,KAAK;AACX,YAAA,IAAI,EAAE,MAAM;AACf,SAAA;AACD,QAAA,SAAS,EAAE;AACP,YAAA,IAAI,EAAE,kBAAkB;AACxB,YAAA,IAAI,EAAE,aAAa;AACtB,SAAA;AACD,QAAA,gBAAgB,EAAE;AACd,YAAA,IAAI,EAAE,yBAAyB;AAC/B,YAAA,IAAI,EAAE,sBAAsB;AAC/B,SAAA;QACD,IAAI,EAAE,kBAAkB,CAAC,QAAQ;QACjC,MAAM,EAAE,kBAAkB,CAAC,UAAU;QACrC,SAAS,EAAE,kBAAkB,CAAC,gBAAgB;QAC9C,WAAW,EAAE,kBAAkB,CAAC,qBAAqB;KACxD,CAAA;AACL;;;;"}
|