@talxis/base-controls 1.2406.2 → 1.2406.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/examples/Currency/package.json +1 -1
- package/examples/DateTime/package.json +1 -1
- package/examples/Decimal/package.json +1 -1
- package/examples/Duration/package.json +1 -1
- package/examples/Grid/package.json +1 -1
- package/examples/Lookup/package.json +1 -1
- package/examples/MultiSelectOptionSet/package.json +1 -1
- package/examples/OptionSet/package.json +1 -1
- package/examples/TwoOptions/package.json +1 -1
- package/package.json +1 -1
- package/.env +0 -1
- package/.eslintrc +0 -117
- package/.npmgitignore +0 -9
- package/.vscode/settings.json +0 -3
- package/.yalcignore +0 -2
- package/azure-pipelines.yml +0 -44
- package/examples/Currency/package-lock.json +0 -15900
- package/examples/Currency/tsconfig.json +0 -7
- package/examples/DateTime/package-lock.json +0 -15900
- package/examples/DateTime/tsconfig.json +0 -7
- package/examples/Decimal/package-lock.json +0 -15900
- package/examples/Decimal/tsconfig.json +0 -7
- package/examples/Duration/package-lock.json +0 -15900
- package/examples/Duration/tsconfig.json +0 -7
- package/examples/Grid/package-lock.json +0 -15901
- package/examples/Grid/tsconfig.json +0 -7
- package/examples/Lookup/package-lock.json +0 -15900
- package/examples/Lookup/tsconfig.json +0 -8
- package/examples/MultiSelectOptionSet/package-lock.json +0 -15900
- package/examples/MultiSelectOptionSet/tsconfig.json +0 -7
- package/examples/OptionSet/package-lock.json +0 -15900
- package/examples/OptionSet/tsconfig.json +0 -7
- package/examples/TwoOptions/package-lock.json +0 -15900
- package/examples/TwoOptions/tsconfig.json +0 -7
- package/public/index.html +0 -43
- package/public/manifest.json +0 -25
- package/rollup.config.js +0 -44
- package/src/components/DateTime/DateTime.tsx +0 -97
- package/src/components/DateTime/components/Calendar.tsx +0 -80
- package/src/components/DateTime/hooks/useDateTime.ts +0 -144
- package/src/components/DateTime/index.ts +0 -2
- package/src/components/DateTime/interfaces.ts +0 -22
- package/src/components/DateTime/styles.ts +0 -37
- package/src/components/DateTime/translations.ts +0 -18
- package/src/components/Decimal/Decimal.tsx +0 -120
- package/src/components/Decimal/index.ts +0 -2
- package/src/components/Decimal/interfaces.ts +0 -20
- package/src/components/Duration/Duration.tsx +0 -143
- package/src/components/Duration/index.ts +0 -2
- package/src/components/Duration/interfaces.ts +0 -22
- package/src/components/Duration/translations.ts +0 -30
- package/src/components/Grid/Grid.tsx +0 -24
- package/src/components/Grid/core/components/AgGrid/AgGrid.tsx +0 -206
- package/src/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.tsx +0 -16
- package/src/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/styles.ts +0 -20
- package/src/components/Grid/core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.tsx +0 -7
- package/src/components/Grid/core/components/AgGrid/controllers/useAgGridController.ts +0 -68
- package/src/components/Grid/core/components/AgGrid/model/AgGrid.ts +0 -100
- package/src/components/Grid/core/components/AgGrid/styles.ts +0 -72
- package/src/components/Grid/core/components/Cell/Commands/Commands.tsx +0 -32
- package/src/components/Grid/core/components/Cell/Commands/Icon.tsx +0 -17
- package/src/components/Grid/core/components/Cell/Commands/styles.ts +0 -21
- package/src/components/Grid/core/components/Cell/Commands/useCommands.tsx +0 -53
- package/src/components/Grid/core/components/Cell/EditableCell/EditableCell.tsx +0 -140
- package/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyCell.tsx +0 -176
- package/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.tsx +0 -67
- package/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/styles.ts +0 -24
- package/src/components/Grid/core/components/Cell/ReadOnlyCell/styles.ts +0 -56
- package/src/components/Grid/core/components/ColumnHeader/ColumnHeader.tsx +0 -71
- package/src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.tsx +0 -31
- package/src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.ts +0 -16
- package/src/components/Grid/core/components/ColumnHeader/styles.ts +0 -40
- package/src/components/Grid/core/components/Component/Component.tsx +0 -59
- package/src/components/Grid/core/components/Component/controller/useComponentController.ts +0 -39
- package/src/components/Grid/core/components/Component/model/Component.ts +0 -251
- package/src/components/Grid/core/components/Dialog/Constants.tsx +0 -8
- package/src/components/Grid/core/components/Dialog/Styles.tsx +0 -61
- package/src/components/Grid/core/components/Dialog/index.tsx +0 -22
- package/src/components/Grid/core/components/Dialog/interfaces/index.d.ts +0 -7
- package/src/components/Grid/core/components/Save/Save.tsx +0 -74
- package/src/components/Grid/core/components/Save/components/ChangeEditor/ChangeEditor.tsx +0 -63
- package/src/components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/RecordGrids.tsx +0 -153
- package/src/components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/styles.ts +0 -52
- package/src/components/Grid/core/components/Save/components/ChangeEditor/styles.ts +0 -34
- package/src/components/Grid/core/components/Save/hooks/useSave.ts +0 -59
- package/src/components/Grid/core/components/Save/styles.ts +0 -41
- package/src/components/Grid/core/controllers/useGridController.ts +0 -46
- package/src/components/Grid/core/enums/ConditionOperator.ts +0 -46
- package/src/components/Grid/core/enums/DataType.ts +0 -25
- package/src/components/Grid/core/hooks/useGridInstance.ts +0 -7
- package/src/components/Grid/core/hooks/useRefreshCallback.ts +0 -20
- package/src/components/Grid/core/hooks/useRerender.ts +0 -15
- package/src/components/Grid/core/interfaces/IGridColumn.ts +0 -19
- package/src/components/Grid/core/interfaces/IGridContext.ts +0 -7
- package/src/components/Grid/core/model/Grid.ts +0 -250
- package/src/components/Grid/core/model/GridDependency.ts +0 -34
- package/src/components/Grid/core/model/Metadata.ts +0 -20
- package/src/components/Grid/core/services/RecordUpdateService/controllers/useRecordUpdateServiceController.ts +0 -36
- package/src/components/Grid/core/services/RecordUpdateService/model/RecordUpdateService.ts +0 -222
- package/src/components/Grid/filtering/components/FilterCallout/FilterCallout.tsx +0 -83
- package/src/components/Grid/filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.tsx +0 -66
- package/src/components/Grid/filtering/components/FilterCallout/components/ConditionValue/ConditionValue.tsx +0 -48
- package/src/components/Grid/filtering/components/FilterCallout/components/ConditionValue/model/ConditionComponentValue.ts +0 -120
- package/src/components/Grid/filtering/components/FilterCallout/styles.ts +0 -37
- package/src/components/Grid/filtering/constants.ts +0 -48
- package/src/components/Grid/filtering/controller/useColumnFilterConditionController.ts +0 -63
- package/src/components/Grid/filtering/model/Condition.ts +0 -309
- package/src/components/Grid/filtering/model/Filtering.ts +0 -78
- package/src/components/Grid/filtering/utils/FilteringUtilts.ts +0 -190
- package/src/components/Grid/interfaces.ts +0 -109
- package/src/components/Grid/paging/components/Paging/Paging.tsx +0 -76
- package/src/components/Grid/paging/components/Paging/styles.ts +0 -38
- package/src/components/Grid/paging/controllers/usePagingController.ts +0 -34
- package/src/components/Grid/paging/model/Paging.ts +0 -49
- package/src/components/Grid/selection/controllers/useSelectionController.ts +0 -25
- package/src/components/Grid/selection/model/Selection.ts +0 -60
- package/src/components/Grid/sorting/Sorting.ts +0 -30
- package/src/components/Grid/sorting/components/SortingContextualMenu/SortingContextualMenu.tsx +0 -126
- package/src/components/Grid/sorting/components/SortingContextualMenu/styles.ts +0 -12
- package/src/components/Grid/sorting/controllers/useColumnSortingController.ts +0 -26
- package/src/components/Grid/translations.ts +0 -80
- package/src/components/Grid/validation/controllers/useRecordValidationController.ts +0 -31
- package/src/components/Grid/validation/model/ColumnValidation.ts +0 -81
- package/src/components/Lookup/Lookup.tsx +0 -199
- package/src/components/Lookup/components/RecordCreator.tsx +0 -53
- package/src/components/Lookup/components/TargetSelector.tsx +0 -43
- package/src/components/Lookup/hooks/useFetchXml.ts +0 -31
- package/src/components/Lookup/hooks/useLoadedEntities.ts +0 -23
- package/src/components/Lookup/hooks/useLookup.ts +0 -126
- package/src/components/Lookup/index.ts +0 -2
- package/src/components/Lookup/interfaces.ts +0 -45
- package/src/components/Lookup/lib.ts +0 -3110
- package/src/components/Lookup/styles.ts +0 -106
- package/src/components/Lookup/translations.ts +0 -28
- package/src/components/MultiSelectOptionSet/MultiSelectOptionSet.tsx +0 -83
- package/src/components/MultiSelectOptionSet/index.ts +0 -2
- package/src/components/MultiSelectOptionSet/interfaces.ts +0 -14
- package/src/components/OptionSet/OptionSet.tsx +0 -67
- package/src/components/OptionSet/index.ts +0 -2
- package/src/components/OptionSet/interfaces.ts +0 -17
- package/src/components/TextField/TextField.tsx +0 -58
- package/src/components/TextField/hooks/useTextField.ts +0 -42
- package/src/components/TextField/index.ts +0 -2
- package/src/components/TextField/interfaces.ts +0 -20
- package/src/components/TwoOptions/TwoOptions.tsx +0 -43
- package/src/components/TwoOptions/index.ts +0 -2
- package/src/components/TwoOptions/interfaces.ts +0 -17
- package/src/hooks/index.ts +0 -1
- package/src/hooks/useComponent.ts +0 -83
- package/src/hooks/useFocusIn.ts +0 -23
- package/src/hooks/useInputBasedComponent.ts +0 -71
- package/src/hooks/useMouseOver.ts +0 -23
- package/src/index.tsx +0 -12
- package/src/interfaces/context.ts +0 -21
- package/src/interfaces/index.ts +0 -12
- package/src/interfaces/parameters.ts +0 -26
- package/src/interfaces/property.ts +0 -111
- package/src/sandbox/index.tsx +0 -137
- package/src/sandbox/mock/Context.ts +0 -18
- package/src/sandbox/mock/Formatting.ts +0 -186
- package/src/sandbox/mock/Mode.ts +0 -25
- package/src/sandbox/mock/UserSettings.ts +0 -31
- package/src/sandbox/mock/Utility.ts +0 -14
- package/src/sandbox/shared/durationList.tsx +0 -24
- package/src/sandbox/shared/multiSelectOptionList.tsx +0 -5
- package/src/sandbox/shared/optionList.tsx +0 -5
- package/src/stories/Introduction.stories.mdx +0 -122
- package/src/stories/assets/code-brackets.svg +0 -1
- package/src/stories/assets/colors.svg +0 -1
- package/src/stories/assets/comments.svg +0 -1
- package/src/stories/assets/direction.svg +0 -1
- package/src/stories/assets/flow.svg +0 -1
- package/src/stories/assets/plugin.svg +0 -1
- package/src/stories/assets/repo.svg +0 -1
- package/src/stories/assets/stackalt.svg +0 -1
- package/src/types/index.ts +0 -3
- package/src/utils/NumeralPCF.ts +0 -62
- package/tsconfig.json +0 -28
package/public/index.html
DELETED
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
|
|
6
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
7
|
-
<meta name="theme-color" content="#000000" />
|
|
8
|
-
<meta
|
|
9
|
-
name="description"
|
|
10
|
-
content="Web site created using create-react-app"
|
|
11
|
-
/>
|
|
12
|
-
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
|
|
13
|
-
<!--
|
|
14
|
-
manifest.json provides metadata used when your web app is installed on a
|
|
15
|
-
user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
|
|
16
|
-
-->
|
|
17
|
-
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
|
|
18
|
-
<!--
|
|
19
|
-
Notice the use of %PUBLIC_URL% in the tags above.
|
|
20
|
-
It will be replaced with the URL of the `public` folder during the build.
|
|
21
|
-
Only files inside the `public` folder can be referenced from the HTML.
|
|
22
|
-
|
|
23
|
-
Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
|
|
24
|
-
work correctly both with client-side routing and a non-root public URL.
|
|
25
|
-
Learn how to configure a non-root public URL by running `npm run build`.
|
|
26
|
-
-->
|
|
27
|
-
<title>React App</title>
|
|
28
|
-
</head>
|
|
29
|
-
<body>
|
|
30
|
-
<noscript>You need to enable JavaScript to run this app.</noscript>
|
|
31
|
-
<div id="root"></div>
|
|
32
|
-
<!--
|
|
33
|
-
This HTML file is a template.
|
|
34
|
-
If you open it directly in the browser, you will see an empty page.
|
|
35
|
-
|
|
36
|
-
You can add webfonts, meta tags, or analytics to this file.
|
|
37
|
-
The build step will place the bundled scripts into the <body> tag.
|
|
38
|
-
|
|
39
|
-
To begin the development, run `npm start` or `yarn start`.
|
|
40
|
-
To create a production bundle, use `npm run build` or `yarn build`.
|
|
41
|
-
-->
|
|
42
|
-
</body>
|
|
43
|
-
</html>
|
package/public/manifest.json
DELETED
|
@@ -1,25 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"short_name": "React App",
|
|
3
|
-
"name": "Create React App Sample",
|
|
4
|
-
"icons": [
|
|
5
|
-
{
|
|
6
|
-
"src": "favicon.ico",
|
|
7
|
-
"sizes": "64x64 32x32 24x24 16x16",
|
|
8
|
-
"type": "image/x-icon"
|
|
9
|
-
},
|
|
10
|
-
{
|
|
11
|
-
"src": "logo192.png",
|
|
12
|
-
"type": "image/png",
|
|
13
|
-
"sizes": "192x192"
|
|
14
|
-
},
|
|
15
|
-
{
|
|
16
|
-
"src": "logo512.png",
|
|
17
|
-
"type": "image/png",
|
|
18
|
-
"sizes": "512x512"
|
|
19
|
-
}
|
|
20
|
-
],
|
|
21
|
-
"start_url": ".",
|
|
22
|
-
"display": "standalone",
|
|
23
|
-
"theme_color": "#000000",
|
|
24
|
-
"background_color": "#ffffff"
|
|
25
|
-
}
|
package/rollup.config.js
DELETED
|
@@ -1,44 +0,0 @@
|
|
|
1
|
-
import commonjs from '@rollup/plugin-commonjs';
|
|
2
|
-
import typescript from '@rollup/plugin-typescript';
|
|
3
|
-
import { terser } from 'rollup-plugin-terser';
|
|
4
|
-
import peerDepsExternal from 'rollup-plugin-peer-deps-external';
|
|
5
|
-
import postcss from 'rollup-plugin-postcss';
|
|
6
|
-
import dts from 'rollup-plugin-dts';
|
|
7
|
-
import resolve from '@rollup/plugin-node-resolve';
|
|
8
|
-
import multiInput from 'rollup-plugin-multi-input';
|
|
9
|
-
import del from 'rollup-plugin-delete';
|
|
10
|
-
|
|
11
|
-
export default [
|
|
12
|
-
{
|
|
13
|
-
input: [
|
|
14
|
-
'src/components/*/*.tsx',
|
|
15
|
-
'src/hooks/*.ts'
|
|
16
|
-
],
|
|
17
|
-
output: [
|
|
18
|
-
{
|
|
19
|
-
dir: 'dist',
|
|
20
|
-
format: 'esm',
|
|
21
|
-
}
|
|
22
|
-
],
|
|
23
|
-
plugins: [
|
|
24
|
-
commonjs(),
|
|
25
|
-
peerDepsExternal('./package.json'),
|
|
26
|
-
resolve(),
|
|
27
|
-
typescript({
|
|
28
|
-
tsconfig: './tsconfig.json',
|
|
29
|
-
}),
|
|
30
|
-
postcss(),
|
|
31
|
-
multiInput(),
|
|
32
|
-
terser()
|
|
33
|
-
],
|
|
34
|
-
},
|
|
35
|
-
{
|
|
36
|
-
input: ['dist/index.d.ts'],
|
|
37
|
-
output: [{ file: 'dist/index.d.ts', format: "esm"}],
|
|
38
|
-
external: [/\.css$/],
|
|
39
|
-
plugins: [
|
|
40
|
-
dts(),
|
|
41
|
-
del({ hook: "buildEnd", targets: ['dist/stories', 'dist/sandbox'] })
|
|
42
|
-
],
|
|
43
|
-
},
|
|
44
|
-
];
|
|
@@ -1,97 +0,0 @@
|
|
|
1
|
-
|
|
2
|
-
import { IDateTime } from "./interfaces";
|
|
3
|
-
import { IDatePicker, useTheme } from "@fluentui/react";
|
|
4
|
-
import { useEffect, useRef } from "react";
|
|
5
|
-
import { getDateTimeStyles } from "./styles";
|
|
6
|
-
import { useDateTime } from "./hooks/useDateTime";
|
|
7
|
-
import dayjs from 'dayjs';
|
|
8
|
-
import { Calendar } from "./components/Calendar";
|
|
9
|
-
import { DatePicker } from "@talxis/react-components/dist/components/DatePicker";
|
|
10
|
-
import React from 'react';
|
|
11
|
-
|
|
12
|
-
export const DateTime = (componentProps: IDateTime) => {
|
|
13
|
-
const ref = useRef<HTMLDivElement>(null);
|
|
14
|
-
const datePickerRef = useRef<IDatePicker>(null);
|
|
15
|
-
const theme = useTheme();
|
|
16
|
-
const styles = getDateTimeStyles(theme);
|
|
17
|
-
const context = componentProps.context;
|
|
18
|
-
const parameters = componentProps.parameters;
|
|
19
|
-
const [date, stringDate, isDateTime, patterns, labels, setStringDate, selectDate, clearDate] = useDateTime(componentProps, ref);
|
|
20
|
-
|
|
21
|
-
useEffect(() => {
|
|
22
|
-
if(componentProps.parameters.AutoFocus?.raw === true) {
|
|
23
|
-
datePickerRef.current?.showDatePickerPopup();
|
|
24
|
-
}
|
|
25
|
-
}, []);
|
|
26
|
-
return (
|
|
27
|
-
<div ref={ref}>
|
|
28
|
-
<DatePicker
|
|
29
|
-
className={styles.datePicker}
|
|
30
|
-
componentRef={datePickerRef}
|
|
31
|
-
keepCalendarOpenAfterDaySelect={isDateTime}
|
|
32
|
-
allowTextInput
|
|
33
|
-
calendarProps={{
|
|
34
|
-
//needs to be here as the internal picker does not call the function passed in calendarAs
|
|
35
|
-
onSelectDate: (date) => selectDate(date),
|
|
36
|
-
}}
|
|
37
|
-
// Lowest date supported by CDS: https://learn.microsoft.com/en-us/previous-versions/dynamicscrm-2016/developers-guide/dn996866(v=crm.8)?redirectedfrom=MSDN
|
|
38
|
-
minDate={new Date('1753-01-01T00:00:00.000Z')}
|
|
39
|
-
firstDayOfWeek={componentProps.context.userSettings.dateFormattingInfo.firstDayOfWeek}
|
|
40
|
-
calendarAs={(props) =>
|
|
41
|
-
<Calendar {...props}
|
|
42
|
-
strings={{
|
|
43
|
-
goToToday: labels.goToToday(),
|
|
44
|
-
days: JSON.parse(labels.days()),
|
|
45
|
-
months: JSON.parse(labels.months()),
|
|
46
|
-
shortDays: JSON.parse(labels.shortDays()),
|
|
47
|
-
shortMonths: JSON.parse(labels.shortMonths())
|
|
48
|
-
}}
|
|
49
|
-
timePickerProps={{
|
|
50
|
-
autoComplete: "off",
|
|
51
|
-
autoCapitalize: "off",
|
|
52
|
-
timeFormat: patterns.shortTimePattern,
|
|
53
|
-
label: labels.time(),
|
|
54
|
-
visible: isDateTime && !parameters.value.errorMessage,
|
|
55
|
-
useHour12: patterns.shortTimePattern.endsWith('A'),
|
|
56
|
-
onChange: (e, date) => selectDate(undefined, dayjs(date).format('HH:mm')),
|
|
57
|
-
defaultValue: date
|
|
58
|
-
}} />
|
|
59
|
-
}
|
|
60
|
-
textField={{
|
|
61
|
-
value: stringDate ?? "",
|
|
62
|
-
onChange: (e, value) => setStringDate(value),
|
|
63
|
-
placeholder: '---',
|
|
64
|
-
onNotifyValidationResult: () => null,
|
|
65
|
-
noValidate: true,
|
|
66
|
-
borderless: parameters.EnableBorder?.raw === false,
|
|
67
|
-
errorMessage: parameters.value.errorMessage,
|
|
68
|
-
styles:{
|
|
69
|
-
fieldGroup: {
|
|
70
|
-
height: context.mode.allocatedHeight || undefined,
|
|
71
|
-
width: context.mode.allocatedWidth || undefined
|
|
72
|
-
}
|
|
73
|
-
},
|
|
74
|
-
//@ts-ignore - TODO: fix types in shared components
|
|
75
|
-
deleteButtonProps: parameters.EnableDeleteButton?.raw === true ? {
|
|
76
|
-
key: 'Delete',
|
|
77
|
-
onClick: clearDate,
|
|
78
|
-
showOnlyOnHover: true,
|
|
79
|
-
iconProps: {
|
|
80
|
-
iconName: 'Cancel'
|
|
81
|
-
}
|
|
82
|
-
} : undefined,
|
|
83
|
-
clickToCopyProps: parameters.EnableCopyButton?.raw === true ? {
|
|
84
|
-
key: 'copy',
|
|
85
|
-
showOnlyOnHover: true,
|
|
86
|
-
iconProps: {
|
|
87
|
-
iconName: 'Copy'
|
|
88
|
-
}
|
|
89
|
-
} : undefined
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
//undefined will break the calendar => it wont reflect date change in it's UI
|
|
93
|
-
value={date ?? new Date()}
|
|
94
|
-
/>
|
|
95
|
-
</div>
|
|
96
|
-
);
|
|
97
|
-
};
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
import { ICalendarProps } from "@fluentui/react/lib/components/Calendar/Calendar.types";
|
|
2
|
-
import { IAutofill } from "@fluentui/react/lib/components/pickers/AutoFill/BaseAutoFill.types";
|
|
3
|
-
import { ITimePickerProps } from "@fluentui/react/lib/components/TimePicker/TimePicker.types";
|
|
4
|
-
import { useTheme } from "@fluentui/react/lib/utilities/ThemeProvider/useTheme";
|
|
5
|
-
import { Calendar as CalendarBase } from '@fluentui/react/lib/Calendar';
|
|
6
|
-
import { useEffect, useRef, useState } from "react";
|
|
7
|
-
import { getDateTimeStyles } from "../styles";
|
|
8
|
-
import { TimePicker } from "@talxis/react-components/dist/components/TimePicker";
|
|
9
|
-
import { Text } from '@fluentui/react/lib/Text';
|
|
10
|
-
import dayjs from "dayjs";
|
|
11
|
-
import React from 'react';
|
|
12
|
-
import { FocusTrapZone } from "@fluentui/react";
|
|
13
|
-
|
|
14
|
-
interface IInternalTimePickerProps extends ITimePickerProps {
|
|
15
|
-
visible: boolean;
|
|
16
|
-
timeFormat: string;
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
interface IInternalCalendarProps extends ICalendarProps {
|
|
20
|
-
timePickerProps: IInternalTimePickerProps;
|
|
21
|
-
}
|
|
22
|
-
|
|
23
|
-
export const Calendar = (props: IInternalCalendarProps) => {
|
|
24
|
-
const theme = useTheme();
|
|
25
|
-
const styles = getDateTimeStyles(theme);
|
|
26
|
-
const timePickerRef = useRef<IAutofill>(null);
|
|
27
|
-
const [isTimePickerControlled, setIsTimePickerControlled] = useState<boolean>(true);
|
|
28
|
-
useEffect(() => {
|
|
29
|
-
//@ts-ignore - we need to use the internal method to display exact time, otherwise the shown value would always get rounded to the next 15 min
|
|
30
|
-
timePickerRef.current?._updateValue(getFormattedTime());
|
|
31
|
-
setIsTimePickerControlled(false);
|
|
32
|
-
|
|
33
|
-
}, [props.timePickerProps.defaultValue]);
|
|
34
|
-
|
|
35
|
-
const getFormattedTime = () => {
|
|
36
|
-
return dayjs(props.timePickerProps.defaultValue).format(props.timePickerProps.timeFormat);
|
|
37
|
-
};
|
|
38
|
-
|
|
39
|
-
useEffect(() => {
|
|
40
|
-
//hack to focus the selected date for keyboard support
|
|
41
|
-
const day = document.querySelector('.ms-CalendarDay-daySelected') as HTMLButtonElement;
|
|
42
|
-
day?.focus();
|
|
43
|
-
}, [props]);
|
|
44
|
-
|
|
45
|
-
return (
|
|
46
|
-
<div className={styles.calendarCallout}>
|
|
47
|
-
<CalendarBase {...props} />
|
|
48
|
-
<hr />
|
|
49
|
-
{props.timePickerProps.visible &&
|
|
50
|
-
<TimePicker
|
|
51
|
-
{...props.timePickerProps}
|
|
52
|
-
onChange={(e, time) => {
|
|
53
|
-
setIsTimePickerControlled(true);
|
|
54
|
-
props.timePickerProps.onChange!(e, time);
|
|
55
|
-
}}
|
|
56
|
-
defaultValue={dayjs(new Date()).startOf('day').toDate()}
|
|
57
|
-
useComboBoxAsMenuWidth
|
|
58
|
-
styles={{
|
|
59
|
-
callout: {
|
|
60
|
-
maxHeight: '300px !important'
|
|
61
|
-
}
|
|
62
|
-
}}
|
|
63
|
-
autofill={{
|
|
64
|
-
componentRef: timePickerRef,
|
|
65
|
-
//hack to prevent blinking on prop updates
|
|
66
|
-
value: isTimePickerControlled ? getFormattedTime() : undefined
|
|
67
|
-
}}
|
|
68
|
-
buttonIconProps={{
|
|
69
|
-
iconName: 'Clock'
|
|
70
|
-
}}
|
|
71
|
-
onRenderOption={(option) => {
|
|
72
|
-
//the timepicker displays 24 instead of 00 during the option displaying for some reason
|
|
73
|
-
return <Text>{option?.text.replace('24', '00')}</Text>;
|
|
74
|
-
}}
|
|
75
|
-
increments={15}
|
|
76
|
-
allowFreeform />
|
|
77
|
-
}
|
|
78
|
-
</div>
|
|
79
|
-
);
|
|
80
|
-
};
|
|
@@ -1,144 +0,0 @@
|
|
|
1
|
-
import { useEffect, useMemo } from "react";
|
|
2
|
-
import { useInputBasedComponent } from "../../../hooks/useInputBasedComponent";
|
|
3
|
-
import { IDateTime, IDateTimeOutputs, IDateTimeParameters, IDateTimeTranslations } from "../interfaces";
|
|
4
|
-
import dayjs from 'dayjs';
|
|
5
|
-
import utc from 'dayjs/plugin/utc';
|
|
6
|
-
import customParseFormat from 'dayjs/plugin/customParseFormat';
|
|
7
|
-
import { getDefaultDateTimeTranslations } from "../translations";
|
|
8
|
-
import { StringProps } from "../../../types";
|
|
9
|
-
dayjs.extend(customParseFormat);
|
|
10
|
-
dayjs.extend(utc);
|
|
11
|
-
|
|
12
|
-
export const useDateTime = (props: IDateTime, ref: React.RefObject<HTMLDivElement>): [
|
|
13
|
-
Date | undefined,
|
|
14
|
-
string | undefined,
|
|
15
|
-
boolean,
|
|
16
|
-
{
|
|
17
|
-
shortDatePattern: string
|
|
18
|
-
shortTimePattern: string;
|
|
19
|
-
},
|
|
20
|
-
Required<StringProps<IDateTimeTranslations>>,
|
|
21
|
-
(value: string | undefined) => void,
|
|
22
|
-
(date: Date | undefined, time?: string) => void,
|
|
23
|
-
() => void
|
|
24
|
-
|
|
25
|
-
] => {
|
|
26
|
-
|
|
27
|
-
const boundValue = props.parameters.value;
|
|
28
|
-
const context = props.context;
|
|
29
|
-
const behavior = boundValue.attributes.Behavior;
|
|
30
|
-
const format = boundValue.attributes.Format;
|
|
31
|
-
const dateFormattingInfo = context.userSettings.dateFormattingInfo;
|
|
32
|
-
|
|
33
|
-
const isDateTime = (() => {
|
|
34
|
-
switch (format) {
|
|
35
|
-
case 'DateAndTime':
|
|
36
|
-
case 'Date and Time':
|
|
37
|
-
case 'DateAndTime.DateAndTime':
|
|
38
|
-
case 'datetime': {
|
|
39
|
-
return true;
|
|
40
|
-
}
|
|
41
|
-
default: {
|
|
42
|
-
return false;
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
})();
|
|
46
|
-
|
|
47
|
-
//MS returns the pattern without correct separator and they do this during formatting
|
|
48
|
-
const shortDatePattern = dateFormattingInfo.shortDatePattern.replace(/\//g, dateFormattingInfo.dateSeparator).toUpperCase();
|
|
49
|
-
const shortTimePattern = dateFormattingInfo.shortTimePattern.replace(/:/g, dateFormattingInfo.timeSeparator).replace('tt', 'A');
|
|
50
|
-
const formatting = (() => {
|
|
51
|
-
if (isDateTime) {
|
|
52
|
-
return `${shortDatePattern} ${shortTimePattern}`;
|
|
53
|
-
}
|
|
54
|
-
return shortDatePattern;
|
|
55
|
-
})();
|
|
56
|
-
|
|
57
|
-
const formatDate = (date: Date | undefined | null | string): string | undefined => {
|
|
58
|
-
if (date == undefined) {
|
|
59
|
-
return undefined;
|
|
60
|
-
}
|
|
61
|
-
if (typeof date === 'string') {
|
|
62
|
-
const dayjsDate = dayjs(date, formatting);
|
|
63
|
-
//error situation
|
|
64
|
-
if (!dayjsDate.isValid()) {
|
|
65
|
-
return date;
|
|
66
|
-
}
|
|
67
|
-
date = dayjsDate.toDate();
|
|
68
|
-
}
|
|
69
|
-
if (isDateTime) {
|
|
70
|
-
//should handle the time zone conversion
|
|
71
|
-
return context.formatting.formatTime(date, behavior);
|
|
72
|
-
}
|
|
73
|
-
return context.formatting.formatDateShort(date);
|
|
74
|
-
};
|
|
75
|
-
|
|
76
|
-
const [dateStringValue, labels, setDateStringValue, notifyOutputChanged] = useInputBasedComponent<string | undefined, IDateTimeParameters, IDateTimeOutputs, IDateTimeTranslations>('DateTime', props, {
|
|
77
|
-
formatter: formatDate,
|
|
78
|
-
defaultTranslations: getDefaultDateTimeTranslations(props.context.userSettings.dateFormattingInfo)
|
|
79
|
-
});
|
|
80
|
-
|
|
81
|
-
useEffect(() => {
|
|
82
|
-
const onBlur = () => {
|
|
83
|
-
if (formatDate(boundValue.raw) === dateStringValue) {
|
|
84
|
-
return;
|
|
85
|
-
}
|
|
86
|
-
notifyOutputChanged({
|
|
87
|
-
value: dateExtractor(dateStringValue!) as any
|
|
88
|
-
});
|
|
89
|
-
};
|
|
90
|
-
const input = ref.current?.querySelector('input');
|
|
91
|
-
input?.addEventListener('blur', onBlur);
|
|
92
|
-
return () => {
|
|
93
|
-
input?.removeEventListener('blur', onBlur);
|
|
94
|
-
};
|
|
95
|
-
}, [dateStringValue]);
|
|
96
|
-
|
|
97
|
-
const getDate = (): Date | undefined => {
|
|
98
|
-
if (boundValue.raw instanceof Date) {
|
|
99
|
-
if (behavior === 3) {
|
|
100
|
-
//the date in javascript gets automatically adjusted to local time zone
|
|
101
|
-
//this will make it think that the date already came in local time, thus not adjusting the time
|
|
102
|
-
const date = new Date(boundValue.raw.toISOString().replace('Z', ''));
|
|
103
|
-
return date;
|
|
104
|
-
}
|
|
105
|
-
return boundValue.raw;
|
|
106
|
-
}
|
|
107
|
-
//this scenario should only happen in cases of error or null value
|
|
108
|
-
return undefined;
|
|
109
|
-
};
|
|
110
|
-
|
|
111
|
-
const dateExtractor = (value: string | Date): Date | string => {
|
|
112
|
-
if (value instanceof Date) {
|
|
113
|
-
return value;
|
|
114
|
-
}
|
|
115
|
-
const dayjsDate = dayjs(value, formatting);
|
|
116
|
-
if (!dayjsDate.isValid()) {
|
|
117
|
-
return value;
|
|
118
|
-
}
|
|
119
|
-
return dayjsDate.toDate();
|
|
120
|
-
};
|
|
121
|
-
|
|
122
|
-
const clearDate = () => {
|
|
123
|
-
notifyOutputChanged({
|
|
124
|
-
value: undefined
|
|
125
|
-
});
|
|
126
|
-
};
|
|
127
|
-
|
|
128
|
-
const selectDate = (date?: Date, time?: string) => {
|
|
129
|
-
let dayjsDate = dayjs(date ?? getDate());
|
|
130
|
-
let _time = time;
|
|
131
|
-
//date selected from calendar, keep the original time
|
|
132
|
-
if (!_time) {
|
|
133
|
-
_time = dayjs(getDate()).format('HH:mm');
|
|
134
|
-
}
|
|
135
|
-
const [hours, minutes] = _time.split(':');
|
|
136
|
-
dayjsDate = dayjsDate.hour(parseInt(hours));
|
|
137
|
-
dayjsDate = dayjsDate.minute(parseInt(minutes));
|
|
138
|
-
notifyOutputChanged({
|
|
139
|
-
value: dayjsDate.toDate()
|
|
140
|
-
});
|
|
141
|
-
};
|
|
142
|
-
|
|
143
|
-
return [getDate(), dateStringValue, isDateTime, { shortDatePattern, shortTimePattern }, labels, setDateStringValue, selectDate, clearDate];
|
|
144
|
-
};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
import { IDateTimeProperty } from "../../interfaces";
|
|
2
|
-
import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
|
|
3
|
-
import { IBaseParameters, IInputParameters } from "../../interfaces/parameters";
|
|
4
|
-
|
|
5
|
-
export interface IDateTime extends IComponent<IDateTimeParameters, IDateTimeOutputs, IDateTimeTranslations> {
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
export interface IDateTimeParameters extends IInputParameters {
|
|
9
|
-
value: IDateTimeProperty;
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
export interface IDateTimeOutputs extends IOutputs {
|
|
13
|
-
value?: Date;
|
|
14
|
-
}
|
|
15
|
-
export interface IDateTimeTranslations extends ITranslations {
|
|
16
|
-
time?: {[LCID: number]: string}
|
|
17
|
-
goToToday?: {[LCID: number]: string}
|
|
18
|
-
days?: {[LCID: number]: string[]} | string[];
|
|
19
|
-
months?: {[LCID: number]: string[]} | string[];
|
|
20
|
-
shortDays?: {[LCID: number]: string[]} | string[];
|
|
21
|
-
shortMonths?: {[LCID: number]: string[]} | string[];
|
|
22
|
-
}
|
|
@@ -1,37 +0,0 @@
|
|
|
1
|
-
import { ITheme, mergeStyleSets } from "@fluentui/react";
|
|
2
|
-
|
|
3
|
-
export const getDateTimeStyles = (theme: ITheme) => {
|
|
4
|
-
return mergeStyleSets({
|
|
5
|
-
datePicker: {
|
|
6
|
-
'[class^="statusMessage"]': {
|
|
7
|
-
display: 'none'
|
|
8
|
-
}
|
|
9
|
-
},
|
|
10
|
-
calendarCallout: {
|
|
11
|
-
'.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.bodyDivider
|
|
25
|
-
},
|
|
26
|
-
'[class^="monthAndYear"], [class*="weekDayLabelCell"]': {
|
|
27
|
-
animationDuration: '0s'
|
|
28
|
-
},
|
|
29
|
-
'[class^="dayCell"]:focus': {
|
|
30
|
-
outline: `solid 1px !important`
|
|
31
|
-
},
|
|
32
|
-
'.ms-DatePicker': {
|
|
33
|
-
animationDuration: '0s'
|
|
34
|
-
}
|
|
35
|
-
}
|
|
36
|
-
});
|
|
37
|
-
};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
import { IDateTimeTranslations } from "./interfaces";
|
|
2
|
-
|
|
3
|
-
export const getDefaultDateTimeTranslations = (dateFormattingInfo: ComponentFramework.UserSettingApi.DateFormattingInfo): Required<IDateTimeTranslations> => {
|
|
4
|
-
return {
|
|
5
|
-
time: {
|
|
6
|
-
1029: 'Čas',
|
|
7
|
-
1033: 'Time'
|
|
8
|
-
},
|
|
9
|
-
goToToday: {
|
|
10
|
-
1029: 'Přejít na dnešek',
|
|
11
|
-
1033: 'Go to today'
|
|
12
|
-
},
|
|
13
|
-
days: dateFormattingInfo.dayNames,
|
|
14
|
-
months: dateFormattingInfo.monthNames,
|
|
15
|
-
shortDays: dateFormattingInfo.shortestDayNames,
|
|
16
|
-
shortMonths: dateFormattingInfo.abbreviatedMonthNames,
|
|
17
|
-
};
|
|
18
|
-
};
|
|
@@ -1,120 +0,0 @@
|
|
|
1
|
-
import { TextField } from "@talxis/react-components/dist/components/TextField";
|
|
2
|
-
import { useInputBasedComponent } from "../../hooks/useInputBasedComponent";
|
|
3
|
-
import { IDecimal, IDecimalOutputs, IDecimalParameters, IDecimalTranslations } from "./interfaces";
|
|
4
|
-
import React, { useEffect } from "react";
|
|
5
|
-
import numeral from "numeral";
|
|
6
|
-
import { NumeralPCF } from "../../utils/NumeralPCF";
|
|
7
|
-
|
|
8
|
-
export const Decimal = (props: IDecimal) => {
|
|
9
|
-
const context = props.context;
|
|
10
|
-
const parameters = props.parameters;
|
|
11
|
-
const boundValue = parameters.value;
|
|
12
|
-
const numberFormatting = context.userSettings.numberFormattingInfo;
|
|
13
|
-
|
|
14
|
-
const formatter = (value: string | number | null): string | undefined => {
|
|
15
|
-
if (value == null) {
|
|
16
|
-
return undefined;
|
|
17
|
-
}
|
|
18
|
-
if (isNaN(value as number)) {
|
|
19
|
-
return value as string;
|
|
20
|
-
}
|
|
21
|
-
if (props.parameters.value.type === 'Decimal') {
|
|
22
|
-
return context.formatting.formatDecimal(parseFloat(value as string), boundValue.attributes?.Precision);
|
|
23
|
-
}
|
|
24
|
-
if(props.parameters.value.type === 'Currency') {
|
|
25
|
-
return props.parameters.value.formatted;
|
|
26
|
-
}
|
|
27
|
-
return context.formatting.formatInteger(parseInt(value as string));
|
|
28
|
-
};
|
|
29
|
-
|
|
30
|
-
const extractNumericPart = (str: any): number | undefined => {
|
|
31
|
-
// Currency control just sends the string up and lets the framework decide whether the value is correct
|
|
32
|
-
// It only tries to parse the number based on the current user format
|
|
33
|
-
// This means that the value will also pass if the user inputs his own currency even though
|
|
34
|
-
// the currency is different on the field
|
|
35
|
-
const escapeRegExp = (string: string) => {
|
|
36
|
-
return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'); // Escaping utility function
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
let regex: RegExp;
|
|
40
|
-
NumeralPCF.decimal(numberFormatting);
|
|
41
|
-
if (props.parameters.value.type === 'Decimal') {
|
|
42
|
-
regex = new RegExp('^[' + '\\d' + escapeRegExp(numberFormatting.numberDecimalSeparator) + escapeRegExp(numberFormatting.numberGroupSeparator) + '\\s' + escapeRegExp(numberFormatting.negativeSign) + ']+$');
|
|
43
|
-
} else if (props.parameters.value.type === 'Currency') {
|
|
44
|
-
NumeralPCF.currency(numberFormatting);
|
|
45
|
-
regex = new RegExp(
|
|
46
|
-
'^\\s*' +
|
|
47
|
-
'(?:' + escapeRegExp(numberFormatting.currencySymbol) + '\\s*)?' +
|
|
48
|
-
'[' +
|
|
49
|
-
'\\d' +
|
|
50
|
-
escapeRegExp(numberFormatting.currencyDecimalSeparator) +
|
|
51
|
-
escapeRegExp(numberFormatting.currencyGroupSeparator) +
|
|
52
|
-
'\\s' +
|
|
53
|
-
escapeRegExp(numberFormatting.negativeSign) +
|
|
54
|
-
']*' +
|
|
55
|
-
'(?:\\s*' + escapeRegExp(numberFormatting.currencySymbol) + ')?' +
|
|
56
|
-
'\\s*$'
|
|
57
|
-
);
|
|
58
|
-
} else {
|
|
59
|
-
regex = new RegExp('^[' + '\\d' + escapeRegExp(numberFormatting.numberGroupSeparator) + '\\s' + escapeRegExp(numberFormatting.negativeSign) + ']+$');
|
|
60
|
-
}
|
|
61
|
-
if (regex.test(str)) {
|
|
62
|
-
return numeral(str).value() ?? undefined;
|
|
63
|
-
}
|
|
64
|
-
return str; // Return undefined if no numeric part is extracted
|
|
65
|
-
};
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
const [value, labels, setValue, onNotifyOutputChanged] = useInputBasedComponent<string | undefined, IDecimalParameters, IDecimalOutputs, IDecimalTranslations>('Decimal', props, {
|
|
70
|
-
formatter: formatter,
|
|
71
|
-
valueExtractor: extractNumericPart
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
return (
|
|
75
|
-
<TextField
|
|
76
|
-
readOnly={context.mode.isControlDisabled}
|
|
77
|
-
autoFocus={parameters.AutoFocus?.raw}
|
|
78
|
-
borderless={parameters.EnableBorder?.raw === false}
|
|
79
|
-
errorMessage={boundValue.errorMessage}
|
|
80
|
-
styles={{
|
|
81
|
-
fieldGroup: {
|
|
82
|
-
height: context.mode.allocatedHeight || undefined,
|
|
83
|
-
width: context.mode.allocatedWidth || undefined
|
|
84
|
-
}
|
|
85
|
-
}}
|
|
86
|
-
deleteButtonProps={
|
|
87
|
-
parameters.EnableDeleteButton?.raw === true
|
|
88
|
-
? {
|
|
89
|
-
key: "delete",
|
|
90
|
-
showOnlyOnHover: true,
|
|
91
|
-
iconProps: {
|
|
92
|
-
iconName: "Delete",
|
|
93
|
-
},
|
|
94
|
-
onClick: () => setValue(undefined),
|
|
95
|
-
}
|
|
96
|
-
: undefined
|
|
97
|
-
}
|
|
98
|
-
clickToCopyProps={
|
|
99
|
-
parameters.EnableCopyButton?.raw === true
|
|
100
|
-
? {
|
|
101
|
-
key: "copy",
|
|
102
|
-
showOnlyOnHover: true,
|
|
103
|
-
iconProps: {
|
|
104
|
-
iconName: "Copy",
|
|
105
|
-
},
|
|
106
|
-
}
|
|
107
|
-
: undefined
|
|
108
|
-
}
|
|
109
|
-
value={value ?? ""}
|
|
110
|
-
onBlur={(event) => {
|
|
111
|
-
onNotifyOutputChanged({
|
|
112
|
-
value: extractNumericPart(event.target.value)
|
|
113
|
-
});
|
|
114
|
-
}}
|
|
115
|
-
onChange={(e, value) => {
|
|
116
|
-
setValue(value);
|
|
117
|
-
}}
|
|
118
|
-
/>
|
|
119
|
-
);
|
|
120
|
-
};
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { IDecimalNumberProperty } from "../../interfaces";
|
|
2
|
-
import { IInputParameters } from "../../interfaces/parameters";
|
|
3
|
-
import { IComponent, IOutputs, ITranslations } from "../../interfaces/context";
|
|
4
|
-
|
|
5
|
-
export interface IDecimal extends IComponent<IDecimalParameters, IDecimalOutputs, IDecimalTranslations> {
|
|
6
|
-
|
|
7
|
-
}
|
|
8
|
-
|
|
9
|
-
export interface IDecimalParameters extends IInputParameters {
|
|
10
|
-
//bound parameter
|
|
11
|
-
value: IDecimalNumberProperty;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
export interface IDecimalOutputs extends IOutputs {
|
|
15
|
-
value?: number;
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
export interface IDecimalTranslations extends ITranslations {
|
|
19
|
-
|
|
20
|
-
}
|