@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.
Files changed (178) hide show
  1. package/examples/Currency/package.json +1 -1
  2. package/examples/DateTime/package.json +1 -1
  3. package/examples/Decimal/package.json +1 -1
  4. package/examples/Duration/package.json +1 -1
  5. package/examples/Grid/package.json +1 -1
  6. package/examples/Lookup/package.json +1 -1
  7. package/examples/MultiSelectOptionSet/package.json +1 -1
  8. package/examples/OptionSet/package.json +1 -1
  9. package/examples/TwoOptions/package.json +1 -1
  10. package/package.json +1 -1
  11. package/.env +0 -1
  12. package/.eslintrc +0 -117
  13. package/.npmgitignore +0 -9
  14. package/.vscode/settings.json +0 -3
  15. package/.yalcignore +0 -2
  16. package/azure-pipelines.yml +0 -44
  17. package/examples/Currency/package-lock.json +0 -15900
  18. package/examples/Currency/tsconfig.json +0 -7
  19. package/examples/DateTime/package-lock.json +0 -15900
  20. package/examples/DateTime/tsconfig.json +0 -7
  21. package/examples/Decimal/package-lock.json +0 -15900
  22. package/examples/Decimal/tsconfig.json +0 -7
  23. package/examples/Duration/package-lock.json +0 -15900
  24. package/examples/Duration/tsconfig.json +0 -7
  25. package/examples/Grid/package-lock.json +0 -15901
  26. package/examples/Grid/tsconfig.json +0 -7
  27. package/examples/Lookup/package-lock.json +0 -15900
  28. package/examples/Lookup/tsconfig.json +0 -8
  29. package/examples/MultiSelectOptionSet/package-lock.json +0 -15900
  30. package/examples/MultiSelectOptionSet/tsconfig.json +0 -7
  31. package/examples/OptionSet/package-lock.json +0 -15900
  32. package/examples/OptionSet/tsconfig.json +0 -7
  33. package/examples/TwoOptions/package-lock.json +0 -15900
  34. package/examples/TwoOptions/tsconfig.json +0 -7
  35. package/public/index.html +0 -43
  36. package/public/manifest.json +0 -25
  37. package/rollup.config.js +0 -44
  38. package/src/components/DateTime/DateTime.tsx +0 -97
  39. package/src/components/DateTime/components/Calendar.tsx +0 -80
  40. package/src/components/DateTime/hooks/useDateTime.ts +0 -144
  41. package/src/components/DateTime/index.ts +0 -2
  42. package/src/components/DateTime/interfaces.ts +0 -22
  43. package/src/components/DateTime/styles.ts +0 -37
  44. package/src/components/DateTime/translations.ts +0 -18
  45. package/src/components/Decimal/Decimal.tsx +0 -120
  46. package/src/components/Decimal/index.ts +0 -2
  47. package/src/components/Decimal/interfaces.ts +0 -20
  48. package/src/components/Duration/Duration.tsx +0 -143
  49. package/src/components/Duration/index.ts +0 -2
  50. package/src/components/Duration/interfaces.ts +0 -22
  51. package/src/components/Duration/translations.ts +0 -30
  52. package/src/components/Grid/Grid.tsx +0 -24
  53. package/src/components/Grid/core/components/AgGrid/AgGrid.tsx +0 -206
  54. package/src/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.tsx +0 -16
  55. package/src/components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/styles.ts +0 -20
  56. package/src/components/Grid/core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.tsx +0 -7
  57. package/src/components/Grid/core/components/AgGrid/controllers/useAgGridController.ts +0 -68
  58. package/src/components/Grid/core/components/AgGrid/model/AgGrid.ts +0 -100
  59. package/src/components/Grid/core/components/AgGrid/styles.ts +0 -72
  60. package/src/components/Grid/core/components/Cell/Commands/Commands.tsx +0 -32
  61. package/src/components/Grid/core/components/Cell/Commands/Icon.tsx +0 -17
  62. package/src/components/Grid/core/components/Cell/Commands/styles.ts +0 -21
  63. package/src/components/Grid/core/components/Cell/Commands/useCommands.tsx +0 -53
  64. package/src/components/Grid/core/components/Cell/EditableCell/EditableCell.tsx +0 -140
  65. package/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyCell.tsx +0 -176
  66. package/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/ReadOnlyOptionSet.tsx +0 -67
  67. package/src/components/Grid/core/components/Cell/ReadOnlyCell/ReadOnlyOptionSet/styles.ts +0 -24
  68. package/src/components/Grid/core/components/Cell/ReadOnlyCell/styles.ts +0 -56
  69. package/src/components/Grid/core/components/ColumnHeader/ColumnHeader.tsx +0 -71
  70. package/src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/GlobalCheckbox.tsx +0 -31
  71. package/src/components/Grid/core/components/ColumnHeader/components/GlobalCheckbox/styles.ts +0 -16
  72. package/src/components/Grid/core/components/ColumnHeader/styles.ts +0 -40
  73. package/src/components/Grid/core/components/Component/Component.tsx +0 -59
  74. package/src/components/Grid/core/components/Component/controller/useComponentController.ts +0 -39
  75. package/src/components/Grid/core/components/Component/model/Component.ts +0 -251
  76. package/src/components/Grid/core/components/Dialog/Constants.tsx +0 -8
  77. package/src/components/Grid/core/components/Dialog/Styles.tsx +0 -61
  78. package/src/components/Grid/core/components/Dialog/index.tsx +0 -22
  79. package/src/components/Grid/core/components/Dialog/interfaces/index.d.ts +0 -7
  80. package/src/components/Grid/core/components/Save/Save.tsx +0 -74
  81. package/src/components/Grid/core/components/Save/components/ChangeEditor/ChangeEditor.tsx +0 -63
  82. package/src/components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/RecordGrids.tsx +0 -153
  83. package/src/components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/styles.ts +0 -52
  84. package/src/components/Grid/core/components/Save/components/ChangeEditor/styles.ts +0 -34
  85. package/src/components/Grid/core/components/Save/hooks/useSave.ts +0 -59
  86. package/src/components/Grid/core/components/Save/styles.ts +0 -41
  87. package/src/components/Grid/core/controllers/useGridController.ts +0 -46
  88. package/src/components/Grid/core/enums/ConditionOperator.ts +0 -46
  89. package/src/components/Grid/core/enums/DataType.ts +0 -25
  90. package/src/components/Grid/core/hooks/useGridInstance.ts +0 -7
  91. package/src/components/Grid/core/hooks/useRefreshCallback.ts +0 -20
  92. package/src/components/Grid/core/hooks/useRerender.ts +0 -15
  93. package/src/components/Grid/core/interfaces/IGridColumn.ts +0 -19
  94. package/src/components/Grid/core/interfaces/IGridContext.ts +0 -7
  95. package/src/components/Grid/core/model/Grid.ts +0 -250
  96. package/src/components/Grid/core/model/GridDependency.ts +0 -34
  97. package/src/components/Grid/core/model/Metadata.ts +0 -20
  98. package/src/components/Grid/core/services/RecordUpdateService/controllers/useRecordUpdateServiceController.ts +0 -36
  99. package/src/components/Grid/core/services/RecordUpdateService/model/RecordUpdateService.ts +0 -222
  100. package/src/components/Grid/filtering/components/FilterCallout/FilterCallout.tsx +0 -83
  101. package/src/components/Grid/filtering/components/FilterCallout/components/ConditionOperator/ConditionOperator.tsx +0 -66
  102. package/src/components/Grid/filtering/components/FilterCallout/components/ConditionValue/ConditionValue.tsx +0 -48
  103. package/src/components/Grid/filtering/components/FilterCallout/components/ConditionValue/model/ConditionComponentValue.ts +0 -120
  104. package/src/components/Grid/filtering/components/FilterCallout/styles.ts +0 -37
  105. package/src/components/Grid/filtering/constants.ts +0 -48
  106. package/src/components/Grid/filtering/controller/useColumnFilterConditionController.ts +0 -63
  107. package/src/components/Grid/filtering/model/Condition.ts +0 -309
  108. package/src/components/Grid/filtering/model/Filtering.ts +0 -78
  109. package/src/components/Grid/filtering/utils/FilteringUtilts.ts +0 -190
  110. package/src/components/Grid/interfaces.ts +0 -109
  111. package/src/components/Grid/paging/components/Paging/Paging.tsx +0 -76
  112. package/src/components/Grid/paging/components/Paging/styles.ts +0 -38
  113. package/src/components/Grid/paging/controllers/usePagingController.ts +0 -34
  114. package/src/components/Grid/paging/model/Paging.ts +0 -49
  115. package/src/components/Grid/selection/controllers/useSelectionController.ts +0 -25
  116. package/src/components/Grid/selection/model/Selection.ts +0 -60
  117. package/src/components/Grid/sorting/Sorting.ts +0 -30
  118. package/src/components/Grid/sorting/components/SortingContextualMenu/SortingContextualMenu.tsx +0 -126
  119. package/src/components/Grid/sorting/components/SortingContextualMenu/styles.ts +0 -12
  120. package/src/components/Grid/sorting/controllers/useColumnSortingController.ts +0 -26
  121. package/src/components/Grid/translations.ts +0 -80
  122. package/src/components/Grid/validation/controllers/useRecordValidationController.ts +0 -31
  123. package/src/components/Grid/validation/model/ColumnValidation.ts +0 -81
  124. package/src/components/Lookup/Lookup.tsx +0 -199
  125. package/src/components/Lookup/components/RecordCreator.tsx +0 -53
  126. package/src/components/Lookup/components/TargetSelector.tsx +0 -43
  127. package/src/components/Lookup/hooks/useFetchXml.ts +0 -31
  128. package/src/components/Lookup/hooks/useLoadedEntities.ts +0 -23
  129. package/src/components/Lookup/hooks/useLookup.ts +0 -126
  130. package/src/components/Lookup/index.ts +0 -2
  131. package/src/components/Lookup/interfaces.ts +0 -45
  132. package/src/components/Lookup/lib.ts +0 -3110
  133. package/src/components/Lookup/styles.ts +0 -106
  134. package/src/components/Lookup/translations.ts +0 -28
  135. package/src/components/MultiSelectOptionSet/MultiSelectOptionSet.tsx +0 -83
  136. package/src/components/MultiSelectOptionSet/index.ts +0 -2
  137. package/src/components/MultiSelectOptionSet/interfaces.ts +0 -14
  138. package/src/components/OptionSet/OptionSet.tsx +0 -67
  139. package/src/components/OptionSet/index.ts +0 -2
  140. package/src/components/OptionSet/interfaces.ts +0 -17
  141. package/src/components/TextField/TextField.tsx +0 -58
  142. package/src/components/TextField/hooks/useTextField.ts +0 -42
  143. package/src/components/TextField/index.ts +0 -2
  144. package/src/components/TextField/interfaces.ts +0 -20
  145. package/src/components/TwoOptions/TwoOptions.tsx +0 -43
  146. package/src/components/TwoOptions/index.ts +0 -2
  147. package/src/components/TwoOptions/interfaces.ts +0 -17
  148. package/src/hooks/index.ts +0 -1
  149. package/src/hooks/useComponent.ts +0 -83
  150. package/src/hooks/useFocusIn.ts +0 -23
  151. package/src/hooks/useInputBasedComponent.ts +0 -71
  152. package/src/hooks/useMouseOver.ts +0 -23
  153. package/src/index.tsx +0 -12
  154. package/src/interfaces/context.ts +0 -21
  155. package/src/interfaces/index.ts +0 -12
  156. package/src/interfaces/parameters.ts +0 -26
  157. package/src/interfaces/property.ts +0 -111
  158. package/src/sandbox/index.tsx +0 -137
  159. package/src/sandbox/mock/Context.ts +0 -18
  160. package/src/sandbox/mock/Formatting.ts +0 -186
  161. package/src/sandbox/mock/Mode.ts +0 -25
  162. package/src/sandbox/mock/UserSettings.ts +0 -31
  163. package/src/sandbox/mock/Utility.ts +0 -14
  164. package/src/sandbox/shared/durationList.tsx +0 -24
  165. package/src/sandbox/shared/multiSelectOptionList.tsx +0 -5
  166. package/src/sandbox/shared/optionList.tsx +0 -5
  167. package/src/stories/Introduction.stories.mdx +0 -122
  168. package/src/stories/assets/code-brackets.svg +0 -1
  169. package/src/stories/assets/colors.svg +0 -1
  170. package/src/stories/assets/comments.svg +0 -1
  171. package/src/stories/assets/direction.svg +0 -1
  172. package/src/stories/assets/flow.svg +0 -1
  173. package/src/stories/assets/plugin.svg +0 -1
  174. package/src/stories/assets/repo.svg +0 -1
  175. package/src/stories/assets/stackalt.svg +0 -1
  176. package/src/types/index.ts +0 -3
  177. package/src/utils/NumeralPCF.ts +0 -62
  178. package/tsconfig.json +0 -28
@@ -1,7 +0,0 @@
1
- {
2
- "extends": "./node_modules/pcf-scripts/tsconfig_base.json",
3
- "compilerOptions": {
4
- "allowSyntheticDefaultImports": true,
5
- "typeRoots": ["node_modules/@types"]
6
- }
7
- }
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>
@@ -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,2 +0,0 @@
1
- export * from './DateTime';
2
- export * from './interfaces';
@@ -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,2 +0,0 @@
1
- export * from "./Decimal";
2
- export * from "./interfaces";
@@ -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
- }