@talxis/base-controls 1.2408.1 → 1.2408.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/dist/components/DateTime/DateTime.js +133 -1
- package/dist/components/DateTime/DateTime.js.map +1 -0
- 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/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 +1 -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-b7e6190d.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
package/dist/hooks/useControl.js
CHANGED
|
@@ -1 +1,95 @@
|
|
|
1
|
-
import{useRef
|
|
1
|
+
import { useRef, useMemo, useEffect } from 'react';
|
|
2
|
+
import equal from 'fast-deep-equal/es6';
|
|
3
|
+
import { merge } from 'merge-anything';
|
|
4
|
+
import { Liquid } from 'liquidjs';
|
|
5
|
+
import { useControlTheme } from './useControlTheme.js';
|
|
6
|
+
import { useControlSizing } from './useControlSizing.js';
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want
|
|
10
|
+
* to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.
|
|
11
|
+
*/
|
|
12
|
+
const useControl = (name, props, defaultTranslations) => {
|
|
13
|
+
const parametersRef = useRef(props.parameters);
|
|
14
|
+
const sizing = useControlSizing(props.context.mode);
|
|
15
|
+
const context = props.context;
|
|
16
|
+
const liquid = useMemo(() => new Liquid(), []);
|
|
17
|
+
const labels = useMemo(() => {
|
|
18
|
+
const mergedTranslations = merge(defaultTranslations ?? {}, props.translations ?? {});
|
|
19
|
+
return new Proxy(mergedTranslations, {
|
|
20
|
+
get(target, key) {
|
|
21
|
+
return (variables) => getLabel(key, mergedTranslations, variables);
|
|
22
|
+
}
|
|
23
|
+
});
|
|
24
|
+
}, []);
|
|
25
|
+
useEffect(() => {
|
|
26
|
+
parametersRef.current = props.parameters;
|
|
27
|
+
}, [props.parameters]);
|
|
28
|
+
const getLabel = (key, translations, variables) => {
|
|
29
|
+
const strigify = (value) => {
|
|
30
|
+
if (typeof value === 'string') {
|
|
31
|
+
return value;
|
|
32
|
+
}
|
|
33
|
+
return JSON.stringify(value);
|
|
34
|
+
};
|
|
35
|
+
//@ts-ignore
|
|
36
|
+
const translation = translations[key];
|
|
37
|
+
if (!translation) {
|
|
38
|
+
console.error(`Translation for the ${key} label of the ${name} control has not been defined!`);
|
|
39
|
+
return key;
|
|
40
|
+
}
|
|
41
|
+
if (typeof translation === 'string' || Array.isArray(translation)) {
|
|
42
|
+
return strigify(translation);
|
|
43
|
+
}
|
|
44
|
+
let label = translation[props.context.userSettings.languageId];
|
|
45
|
+
if (!label) {
|
|
46
|
+
console.info(`Translation for the ${key} label of the ${name} control has not been found. Using default Czech label instead.`);
|
|
47
|
+
label = translation[1029];
|
|
48
|
+
}
|
|
49
|
+
if (!label) {
|
|
50
|
+
console.error(`Translation for the ${key} label of the ${name} control does not exists neither for Czech language and current LCID.`);
|
|
51
|
+
label = key;
|
|
52
|
+
}
|
|
53
|
+
return liquid.parseAndRenderSync(strigify(label), variables);
|
|
54
|
+
};
|
|
55
|
+
const onNotifyOutputChanged = (outputs) => {
|
|
56
|
+
let isDirty = false;
|
|
57
|
+
for (let [key, outputValue] of Object.entries(outputs)) {
|
|
58
|
+
let parameterValue = parametersRef.current[key]?.raw;
|
|
59
|
+
if (!equal(parameterValue, outputValue)) {
|
|
60
|
+
if (outputValue === null) {
|
|
61
|
+
outputValue = undefined;
|
|
62
|
+
//@ts-ignore
|
|
63
|
+
outputs[key] = undefined;
|
|
64
|
+
}
|
|
65
|
+
if (outputValue === "") {
|
|
66
|
+
outputValue = undefined;
|
|
67
|
+
//@ts-ignore
|
|
68
|
+
outputs[key] = undefined;
|
|
69
|
+
}
|
|
70
|
+
if (parameterValue === null) {
|
|
71
|
+
parameterValue = undefined;
|
|
72
|
+
}
|
|
73
|
+
if (parameterValue === outputValue) {
|
|
74
|
+
continue;
|
|
75
|
+
}
|
|
76
|
+
isDirty = true;
|
|
77
|
+
break;
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
if (!isDirty) {
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
//console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);
|
|
84
|
+
props.onNotifyOutputChanged?.(outputs);
|
|
85
|
+
};
|
|
86
|
+
return {
|
|
87
|
+
labels,
|
|
88
|
+
sizing,
|
|
89
|
+
theme: useControlTheme(context.fluentDesignLanguage),
|
|
90
|
+
onNotifyOutputChanged
|
|
91
|
+
};
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
export { useControl };
|
|
95
|
+
//# sourceMappingURL=useControl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useControl.js","sources":["../../src/hooks/useControl.ts"],"sourcesContent":["import { useEffect, useMemo, useRef } from \"react\";\nimport React from 'react';\nimport deepEqual from 'fast-deep-equal/es6';\nimport { IControl, IOutputs, IParameters } from \"../interfaces\";\nimport { merge } from 'merge-anything';\nimport { Liquid } from \"liquidjs\";\nimport { useControlTheme } from \"./useControlTheme\";\nimport { ITheme } from \"../interfaces/theme\";\nimport { useControlSizing } from \"./useControlSizing\";\n\nexport type ITranslation<T> = {\n [Property in keyof Required<T>]: (variables?: any) => string\n};\n\nexport interface IDefaultTranslations {\n [LCID: number]: string | string[];\n [key: string]: any;\n}\n\n\nexport interface IControlController<TTranslations, TOutputs> {\n labels: Required<ITranslation<TTranslations>>,\n sizing: {\n width?: number,\n height?: number\n },\n theme: ITheme;\n onNotifyOutputChanged: (outputs: TOutputs) => void,\n}\n/**\n * Provides automatic checking if the given outputs are different from the provided inputs. Use the provided method any time you want\n * to notify the framework that you wish to write changes. The hook will notify the framework only if the provided output differs from the current inputs.\n */\nexport const useControl = <TParameters extends IParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, defaultTranslations?: IDefaultTranslations): IControlController<TTranslations, TOutputs> => {\n const parametersRef = useRef<TParameters>(props.parameters);\n const sizing = useControlSizing(props.context.mode);\n const context = props.context;\n const liquid = useMemo(() => new Liquid(), []);\n const labels = useMemo(() => {\n const mergedTranslations = merge(defaultTranslations ?? {}, props.translations ?? {}) as TTranslations;\n return new Proxy(mergedTranslations as any, {\n get(target, key) {\n return (variables: any) => getLabel(key as string, mergedTranslations, variables)\n }\n }) as any;\n }, []);\n\n useEffect(() => {\n parametersRef.current = props.parameters;\n }, [props.parameters]);\n\n const getLabel = (key: string, translations: TTranslations, variables?: any): string | string[] => {\n const strigify = (value: string | string[]) => {\n if (typeof value === 'string') {\n return value;\n }\n return JSON.stringify(value);\n };\n //@ts-ignore\n const translation = translations[key];\n if (!translation) {\n console.error(`Translation for the ${key} label of the ${name} control has not been defined!`);\n return key;\n }\n if (typeof translation === 'string' || Array.isArray(translation)) {\n return strigify(translation);\n }\n let label = translation[props.context.userSettings.languageId];\n if (!label) {\n console.info(`Translation for the ${key} label of the ${name} control has not been found. Using default Czech label instead.`);\n label = translation[1029];\n }\n if (!label) {\n console.error(`Translation for the ${key} label of the ${name} control does not exists neither for Czech language and current LCID.`);\n label = key;\n }\n\n return liquid.parseAndRenderSync(strigify(label), variables);\n };\n\n const onNotifyOutputChanged = (outputs: TOutputs) => {\n let isDirty = false;\n for (let [key, outputValue] of Object.entries(outputs)) {\n let parameterValue = parametersRef.current[key]?.raw;\n if (!deepEqual(parameterValue, outputValue)) {\n if (outputValue === null) {\n outputValue = undefined;\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (outputValue === \"\") {\n outputValue = undefined\n //@ts-ignore\n outputs[key] = undefined;\n }\n if (parameterValue === null) {\n parameterValue = undefined;\n }\n if (parameterValue === outputValue) {\n continue\n }\n isDirty = true;\n break;\n }\n }\n if (!isDirty) {\n return;\n }\n //console.log(`Change detected, triggering notifyOutputChanged on control ${name}.`);\n props.onNotifyOutputChanged?.(outputs);\n };\n return {\n labels,\n sizing,\n theme: useControlTheme(context.fluentDesignLanguage),\n onNotifyOutputChanged\n }\n};\n"],"names":["deepEqual"],"mappings":"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"}
|
|
@@ -1 +1,15 @@
|
|
|
1
|
-
const
|
|
1
|
+
const useControlSizing = (mode) => {
|
|
2
|
+
const getAllocationSize = (allocationSize) => {
|
|
3
|
+
if (!allocationSize || allocationSize === -1) {
|
|
4
|
+
return undefined;
|
|
5
|
+
}
|
|
6
|
+
return allocationSize;
|
|
7
|
+
};
|
|
8
|
+
return {
|
|
9
|
+
height: getAllocationSize(mode.allocatedHeight),
|
|
10
|
+
width: getAllocationSize(mode.allocatedWidth)
|
|
11
|
+
};
|
|
12
|
+
};
|
|
13
|
+
|
|
14
|
+
export { useControlSizing };
|
|
15
|
+
//# sourceMappingURL=useControlSizing.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useControlSizing.js","sources":["../../src/hooks/useControlSizing.ts"],"sourcesContent":["\nexport const useControlSizing = (mode: ComponentFramework.Mode): {\n height?: number,\n width?: number\n} => {\n const getAllocationSize = (allocationSize?: number) => {\n if(!allocationSize || allocationSize === -1) {\n return undefined;\n }\n return allocationSize;\n }\n return {\n height: getAllocationSize(mode.allocatedHeight),\n width: getAllocationSize(mode.allocatedWidth)\n }\n}"],"names":[],"mappings":"AACa,MAAA,gBAAgB,GAAG,CAAC,IAA6B,KAG1D;AACA,IAAA,MAAM,iBAAiB,GAAG,CAAC,cAAuB,KAAI;AAClD,QAAA,IAAG,CAAC,cAAc,IAAI,cAAc,KAAK,CAAC,CAAC,EAAE;AACzC,YAAA,OAAO,SAAS,CAAC;AACpB,SAAA;AACD,QAAA,OAAO,cAAc,CAAC;AAC1B,KAAC,CAAA;IACD,OAAO;AACH,QAAA,MAAM,EAAE,iBAAiB,CAAC,IAAI,CAAC,eAAe,CAAC;AAC/C,QAAA,KAAK,EAAE,iBAAiB,CAAC,IAAI,CAAC,cAAc,CAAC;KAChD,CAAA;AACL;;;;"}
|
|
@@ -1 +1,9 @@
|
|
|
1
|
-
import{useMemo
|
|
1
|
+
import { useMemo } from 'react';
|
|
2
|
+
import { getControlTheme } from '../utils/Theme.js';
|
|
3
|
+
|
|
4
|
+
const useControlTheme = (fluentDesignLanguage) => {
|
|
5
|
+
return useMemo(() => getControlTheme(fluentDesignLanguage), []);
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export { useControlTheme };
|
|
9
|
+
//# sourceMappingURL=useControlTheme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useControlTheme.js","sources":["../../src/hooks/useControlTheme.ts"],"sourcesContent":["import { useMemo } from \"react\";\nimport { ITheme } from \"../interfaces/theme\";\nimport { getControlTheme } from \"../utils/Theme\";\n\nexport const useControlTheme = (fluentDesignLanguage?: ComponentFramework.FluentDesignState): ITheme => {\n return useMemo(() => getControlTheme(fluentDesignLanguage), [])\n};"],"names":[],"mappings":";;;AAIa,MAAA,eAAe,GAAG,CAAC,oBAA2D,KAAY;AACnG,IAAA,OAAO,OAAO,CAAC,MAAM,eAAe,CAAC,oBAAoB,CAAC,EAAE,EAAE,CAAC,CAAA;AACnE;;;;"}
|
package/dist/hooks/useFocusIn.js
CHANGED
|
@@ -1 +1,33 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
//triggering the focus state immediately can cause issues in some cases => delay can prevent them
|
|
4
|
+
const useFocusIn = (ref, delay) => {
|
|
5
|
+
const [isFocused, setIsFocused] = useState(false);
|
|
6
|
+
const triggerIsFocused = (value) => {
|
|
7
|
+
if (typeof delay !== 'number') {
|
|
8
|
+
setIsFocused(value);
|
|
9
|
+
return;
|
|
10
|
+
}
|
|
11
|
+
setTimeout(() => {
|
|
12
|
+
setIsFocused(value);
|
|
13
|
+
}, delay);
|
|
14
|
+
};
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
const onFocus = (e) => {
|
|
17
|
+
triggerIsFocused(true);
|
|
18
|
+
};
|
|
19
|
+
const onBlur = (e) => {
|
|
20
|
+
triggerIsFocused(false);
|
|
21
|
+
};
|
|
22
|
+
ref.current?.addEventListener('focusin', (e) => onFocus());
|
|
23
|
+
ref.current?.addEventListener('focusout', (e) => onBlur());
|
|
24
|
+
return () => {
|
|
25
|
+
ref.current?.removeEventListener('focusin', onFocus);
|
|
26
|
+
ref.current?.removeEventListener('focusout', onBlur);
|
|
27
|
+
};
|
|
28
|
+
}, []);
|
|
29
|
+
return isFocused;
|
|
30
|
+
};
|
|
31
|
+
|
|
32
|
+
export { useFocusIn };
|
|
33
|
+
//# sourceMappingURL=useFocusIn.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useFocusIn.js","sources":["../../src/hooks/useFocusIn.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\n\n//triggering the focus state immediately can cause issues in some cases => delay can prevent them\nexport const useFocusIn = (ref: React.RefObject<HTMLElement>, delay?: number): boolean => {\n const [isFocused, setIsFocused] = useState<boolean>(false);\n\n const triggerIsFocused = (value: boolean) => {\n if(typeof delay !== 'number') {\n setIsFocused(value);\n return;\n }\n setTimeout(() => {\n setIsFocused(value);\n }, delay);\n }\n\n useEffect(() => {\n const onFocus = (e: FocusEvent) => {\n triggerIsFocused(true);\n }\n const onBlur = (e: FocusEvent) => {\n triggerIsFocused(false);\n }\n ref.current?.addEventListener('focusin', (e) => onFocus(e));\n ref.current?.addEventListener('focusout', (e) => onBlur(e));\n\n return () => {\n ref.current?.removeEventListener('focusin', onFocus);\n ref.current?.removeEventListener('focusout', onBlur);\n }\n }, []);\n return isFocused\n};"],"names":[],"mappings":";;AAGA;MACa,UAAU,GAAG,CAAC,GAAiC,EAAE,KAAc,KAAa;IACrF,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;AAE3D,IAAA,MAAM,gBAAgB,GAAG,CAAC,KAAc,KAAI;AACxC,QAAA,IAAG,OAAO,KAAK,KAAK,QAAQ,EAAE;YAC1B,YAAY,CAAC,KAAK,CAAC,CAAC;YACpB,OAAO;AACV,SAAA;QACD,UAAU,CAAC,MAAK;YACZ,YAAY,CAAC,KAAK,CAAC,CAAC;SACvB,EAAE,KAAK,CAAC,CAAC;AACd,KAAC,CAAA;IAED,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,OAAO,GAAG,CAAC,CAAa,KAAI;YAC9B,gBAAgB,CAAC,IAAI,CAAC,CAAC;AAC3B,SAAC,CAAA;AACD,QAAA,MAAM,MAAM,GAAG,CAAC,CAAa,KAAI;YAC7B,gBAAgB,CAAC,KAAK,CAAC,CAAC;AAC5B,SAAC,CAAA;AACD,QAAA,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,SAAS,EAAE,CAAC,CAAC,KAAK,OAAO,CAAE,CAAC,CAAC,CAAC;AAC5D,QAAA,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,UAAU,EAAE,CAAC,CAAC,KAAK,MAAM,CAAE,CAAC,CAAC,CAAC;AAE5D,QAAA,OAAO,MAAK;YACR,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;YACrD,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,UAAU,EAAE,MAAM,CAAC,CAAC;AACzD,SAAC,CAAA;KACJ,EAAE,EAAE,CAAC,CAAC;AACP,IAAA,OAAO,SAAS,CAAA;AACpB;;;;"}
|
|
@@ -1 +1,38 @@
|
|
|
1
|
-
import{useState
|
|
1
|
+
import { useState, useRef, useEffect } from 'react';
|
|
2
|
+
import { useControl } from './useControl.js';
|
|
3
|
+
|
|
4
|
+
const useInputBasedControl = (name, props, options) => {
|
|
5
|
+
const { formatter, valueExtractor } = { ...options };
|
|
6
|
+
const rawValue = props.parameters.value.raw;
|
|
7
|
+
const [value, setValue] = useState(formatter?.(rawValue) ?? rawValue);
|
|
8
|
+
const valueRef = useRef(rawValue);
|
|
9
|
+
const { labels, sizing, theme, onNotifyOutputChanged } = useControl(name, props, options?.defaultTranslations);
|
|
10
|
+
useEffect(() => {
|
|
11
|
+
const formattedValue = formatter?.(rawValue);
|
|
12
|
+
setValue(formattedValue ?? rawValue);
|
|
13
|
+
//console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);
|
|
14
|
+
}, [rawValue]);
|
|
15
|
+
useEffect(() => {
|
|
16
|
+
valueRef.current = value;
|
|
17
|
+
}, [value]);
|
|
18
|
+
useEffect(() => {
|
|
19
|
+
return () => {
|
|
20
|
+
if (props.parameters.NotifyOutputChangedOnUnmount?.raw === true) {
|
|
21
|
+
onNotifyOutputChanged({
|
|
22
|
+
value: valueExtractor?.(valueRef.current) ?? valueRef.current
|
|
23
|
+
});
|
|
24
|
+
}
|
|
25
|
+
};
|
|
26
|
+
}, []);
|
|
27
|
+
return {
|
|
28
|
+
value,
|
|
29
|
+
labels,
|
|
30
|
+
sizing,
|
|
31
|
+
theme,
|
|
32
|
+
onNotifyOutputChanged,
|
|
33
|
+
setValue
|
|
34
|
+
};
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export { useInputBasedControl };
|
|
38
|
+
//# sourceMappingURL=useInputBasedControl.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useInputBasedControl.js","sources":["../../src/hooks/useInputBasedControl.ts"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport { IControl, IOutputs } from \"../interfaces/context\";\nimport { IControlController, IDefaultTranslations, useControl } from \"./useControl\";\nimport React from 'react';\nimport { IInputParameters } from \"../interfaces/parameters\";\n\n/**\n * Description\n * @param {any} value:any\n * @returns {any}\n */\ninterface IControlOptions {\n defaultTranslations?: IDefaultTranslations;\n /**\n * Formatting function that will format the bound value every time a new one comes from the props.\n */\n formatter?: (value: any) => any,\n valueExtractor?: (value: any) => any\n}\n\n/**\n * Use when working with components that need to store value changes internally before triggering `notifyOutputChanged`.\n * An example of this is a standard Decimal component - we do not want to trigger `notifyOutputChanged` on every value change,\n * since this would trigger decimal validation on every keystroke which would result in a bad UX. In this case, the `notifyOutputChanged` should\n * be triggered when the user looses focus on the component (`onBlur` event).\n * @returns {[]} The hook returns an array with three props. First `value` prop is a value that will will always be in sync with the value that comes from the `value` parameter. \n * Use this for displaying the up-to-date value to the user.\n * Second prop contains the translations for this component.\n * \n * Third prop is a method that can be used to change the current value. The new value will get propagated to the `value` variable returned from this hook. This method wont propagate the value to the framework.\n * \n * The last prop is a method that will notify the framework that you wish to write changes. \n * The method will notify the framework only if the provided output differs from the current inputs.\n */\n\ninterface IInputBasedControlController<TValue, TTranslations, TOutputs> extends IControlController<TTranslations, TOutputs> {\n value: TValue,\n setValue: (value: TValue) => void\n}\n\nexport const useInputBasedControl = <TValue, TParameters extends IInputParameters, TOutputs extends IOutputs, TTranslations>(name: string, props: IControl<TParameters, TOutputs, TTranslations, any>, options?: IControlOptions): IInputBasedControlController<TValue, TTranslations, TOutputs> => {\n const {formatter, valueExtractor} = {...options};\n const rawValue = props.parameters.value.raw;\n const [value, setValue] = useState<TValue>(formatter?.(rawValue) ?? rawValue);\n const valueRef = useRef<TValue>(rawValue);\n const {labels, sizing, theme, onNotifyOutputChanged} = useControl(name, props, options?.defaultTranslations);\n\n useEffect(() => {\n const formattedValue = formatter?.(rawValue);\n setValue(formattedValue ?? rawValue);\n //console.log(`Updating component ${name} with new value: ${formattedValue ?? rawValue}`);\n }, [rawValue]);\n\n useEffect(() => {\n valueRef.current = value;\n }, [value]);\n \n useEffect(() => {\n return () => {\n if(props.parameters.NotifyOutputChangedOnUnmount?.raw === true) {\n onNotifyOutputChanged({\n value: valueExtractor?.(valueRef.current) ?? valueRef.current\n } as any);\n }\n };\n }, []);\n return {\n value,\n labels,\n sizing,\n theme,\n onNotifyOutputChanged,\n setValue\n }\n};"],"names":[],"mappings":";;;AAwCa,MAAA,oBAAoB,GAAG,CAAyF,IAAY,EAAE,KAA0D,EAAE,OAAyB,KAAmE;IAC/R,MAAM,EAAC,SAAS,EAAE,cAAc,EAAC,GAAG,EAAC,GAAG,OAAO,EAAC,CAAC;IACjD,MAAM,QAAQ,GAAG,KAAK,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC;AAC5C,IAAA,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAS,SAAS,GAAG,QAAQ,CAAC,IAAI,QAAQ,CAAC,CAAC;AAC9E,IAAA,MAAM,QAAQ,GAAG,MAAM,CAAS,QAAQ,CAAC,CAAC;IAC1C,MAAM,EAAC,MAAM,EAAE,MAAM,EAAE,KAAK,EAAE,qBAAqB,EAAC,GAAG,UAAU,CAAC,IAAI,EAAE,KAAK,EAAE,OAAO,EAAE,mBAAmB,CAAC,CAAC;IAE7G,SAAS,CAAC,MAAK;AACX,QAAA,MAAM,cAAc,GAAG,SAAS,GAAG,QAAQ,CAAC,CAAC;AAC7C,QAAA,QAAQ,CAAC,cAAc,IAAI,QAAQ,CAAC,CAAC;;AAEzC,KAAC,EAAE,CAAC,QAAQ,CAAC,CAAC,CAAC;IAEf,SAAS,CAAC,MAAK;AACX,QAAA,QAAQ,CAAC,OAAO,GAAG,KAAK,CAAC;AAC7B,KAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,SAAS,CAAC,MAAK;AACX,QAAA,OAAO,MAAK;YACR,IAAG,KAAK,CAAC,UAAU,CAAC,4BAA4B,EAAE,GAAG,KAAK,IAAI,EAAE;AAC5D,gBAAA,qBAAqB,CAAC;oBAClB,KAAK,EAAE,cAAc,GAAG,QAAQ,CAAC,OAAO,CAAC,IAAI,QAAQ,CAAC,OAAO;AACzD,iBAAA,CAAC,CAAC;AACb,aAAA;AACL,SAAC,CAAC;KACL,EAAE,EAAE,CAAC,CAAC;IACP,OAAO;QACH,KAAK;QACL,MAAM;QACN,MAAM;QACN,KAAK;QACL,qBAAqB;QACrB,QAAQ;KACX,CAAA;AACL;;;;"}
|
|
@@ -1 +1,23 @@
|
|
|
1
|
-
import
|
|
1
|
+
import { useState, useEffect } from 'react';
|
|
2
|
+
|
|
3
|
+
const useMouseOver = (ref) => {
|
|
4
|
+
const [isMouseOver, setIsMouseOver] = useState(false);
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
const onMouseEnter = () => {
|
|
7
|
+
setIsMouseOver(true);
|
|
8
|
+
};
|
|
9
|
+
const onMouseLeave = () => {
|
|
10
|
+
setIsMouseOver(false);
|
|
11
|
+
};
|
|
12
|
+
ref.current?.addEventListener('mouseenter', onMouseEnter);
|
|
13
|
+
ref.current?.addEventListener('mouseleave', onMouseLeave);
|
|
14
|
+
return () => {
|
|
15
|
+
ref.current?.removeEventListener('mouseenter', onMouseEnter);
|
|
16
|
+
ref.current?.removeEventListener('mouseleave', onMouseLeave);
|
|
17
|
+
};
|
|
18
|
+
}, []);
|
|
19
|
+
return isMouseOver;
|
|
20
|
+
};
|
|
21
|
+
|
|
22
|
+
export { useMouseOver };
|
|
23
|
+
//# sourceMappingURL=useMouseOver.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useMouseOver.js","sources":["../../src/hooks/useMouseOver.ts"],"sourcesContent":["import { useEffect, useState } from \"react\";\n\nexport const useMouseOver = (ref: React.RefObject<HTMLElement>): boolean => {\n const [isMouseOver, setIsMouseOver] = useState<boolean>(false);\n\n useEffect(() => {\n const onMouseEnter = () => {\n setIsMouseOver(true);\n }\n const onMouseLeave = () => {\n setIsMouseOver(false);\n }\n ref.current?.addEventListener('mouseenter', onMouseEnter);\n ref.current?.addEventListener('mouseleave', onMouseLeave);\n\n return () => {\n ref.current?.removeEventListener('mouseenter',onMouseEnter);\n ref.current?.removeEventListener('mouseleave', onMouseLeave);\n }\n }, []);\n\n return isMouseOver;\n};"],"names":[],"mappings":";;AAEa,MAAA,YAAY,GAAG,CAAC,GAAiC,KAAa;IACvE,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAE/D,SAAS,CAAC,MAAK;QACX,MAAM,YAAY,GAAG,MAAK;YACtB,cAAc,CAAC,IAAI,CAAC,CAAC;AACzB,SAAC,CAAA;QACD,MAAM,YAAY,GAAG,MAAK;YACtB,cAAc,CAAC,KAAK,CAAC,CAAC;AAC1B,SAAC,CAAA;QACD,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;QAC1D,GAAG,CAAC,OAAO,EAAE,gBAAgB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;AAE1D,QAAA,OAAO,MAAK;YACR,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAC,YAAY,CAAC,CAAC;YAC5D,GAAG,CAAC,OAAO,EAAE,mBAAmB,CAAC,YAAY,EAAE,YAAY,CAAC,CAAC;AACjE,SAAC,CAAA;KACJ,EAAE,EAAE,CAAC,CAAC;AAEP,IAAA,OAAO,WAAW,CAAC;AACvB;;;;"}
|
package/dist/index.d.ts
CHANGED
|
@@ -637,7 +637,7 @@ interface IDecimal extends IControl<IDecimalParameters, IDecimalOutputs, any, IT
|
|
|
637
637
|
}
|
|
638
638
|
interface IDecimalParameters extends IInputParameters {
|
|
639
639
|
value: IDecimalNumberProperty;
|
|
640
|
-
EnableSpinButton?: ITwoOptionsProperty
|
|
640
|
+
EnableSpinButton?: Omit<ITwoOptionsProperty, 'attributes'>;
|
|
641
641
|
}
|
|
642
642
|
interface IDecimalOutputs extends IOutputs$1 {
|
|
643
643
|
value?: number;
|
package/dist/index.js
CHANGED
|
@@ -1 +1,19 @@
|
|
|
1
|
-
export{
|
|
1
|
+
export { Numeral } from './utils/Numeral.js';
|
|
2
|
+
export { useControl } from './hooks/useControl.js';
|
|
3
|
+
export { useControlSizing } from './hooks/useControlSizing.js';
|
|
4
|
+
export { useFocusIn } from './hooks/useFocusIn.js';
|
|
5
|
+
export { useInputBasedControl } from './hooks/useInputBasedControl.js';
|
|
6
|
+
export { useMouseOver } from './hooks/useMouseOver.js';
|
|
7
|
+
export { useControlTheme } from './hooks/useControlTheme.js';
|
|
8
|
+
export { DateTime } from './components/DateTime/DateTime.js';
|
|
9
|
+
export { useDateTime } from './components/DateTime/hooks/useDateTime.js';
|
|
10
|
+
export { Decimal } from './components/Decimal/Decimal.js';
|
|
11
|
+
export { Duration } from './components/Duration/Duration.js';
|
|
12
|
+
export { Grid } from './components/Grid/Grid.js';
|
|
13
|
+
export { Lookup } from './components/Lookup/Lookup.js';
|
|
14
|
+
export { useLookup } from './components/Lookup/hooks/useLookup.js';
|
|
15
|
+
export { MultiSelectOptionSet } from './components/MultiSelectOptionSet/MultiSelectOptionSet.js';
|
|
16
|
+
export { OptionSet } from './components/OptionSet/OptionSet.js';
|
|
17
|
+
export { TextField } from './components/TextField/TextField.js';
|
|
18
|
+
export { TwoOptions } from './components/TwoOptions/TwoOptions.js';
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;"}
|
package/dist/interfaces/index.js
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
package/dist/utils/Numeral.js
CHANGED
|
@@ -1 +1,64 @@
|
|
|
1
|
-
import
|
|
1
|
+
import numeral from 'numeral';
|
|
2
|
+
|
|
3
|
+
class Numeral {
|
|
4
|
+
static decimal(formatting) {
|
|
5
|
+
const locale = {
|
|
6
|
+
ordinal: (num) => {
|
|
7
|
+
return '.';
|
|
8
|
+
},
|
|
9
|
+
currency: {
|
|
10
|
+
symbol: formatting.currencySymbol
|
|
11
|
+
},
|
|
12
|
+
abbreviations: {
|
|
13
|
+
thousand: 'k',
|
|
14
|
+
million: 'm',
|
|
15
|
+
billion: 'b',
|
|
16
|
+
trillion: 't'
|
|
17
|
+
},
|
|
18
|
+
delimiters: {
|
|
19
|
+
decimal: formatting.numberDecimalSeparator,
|
|
20
|
+
thousands: formatting.numberGroupSeparator,
|
|
21
|
+
}
|
|
22
|
+
};
|
|
23
|
+
if (!this._locales.includes('__pcfcustomdecimal')) {
|
|
24
|
+
numeral.register('locale', '__pcfcustomdecimal', locale);
|
|
25
|
+
}
|
|
26
|
+
else {
|
|
27
|
+
numeral.locales['__pcfcustomdecimal'] = locale;
|
|
28
|
+
}
|
|
29
|
+
numeral.locale('__pcfcustomdecimal');
|
|
30
|
+
}
|
|
31
|
+
static currency(formatting) {
|
|
32
|
+
const locale = {
|
|
33
|
+
ordinal: (num) => {
|
|
34
|
+
return '.';
|
|
35
|
+
},
|
|
36
|
+
currency: {
|
|
37
|
+
symbol: formatting.currencySymbol
|
|
38
|
+
},
|
|
39
|
+
abbreviations: {
|
|
40
|
+
thousand: 'k',
|
|
41
|
+
million: 'm',
|
|
42
|
+
billion: 'b',
|
|
43
|
+
trillion: 't'
|
|
44
|
+
},
|
|
45
|
+
delimiters: {
|
|
46
|
+
decimal: formatting.currencyDecimalSeparator,
|
|
47
|
+
thousands: formatting.currencyGroupSeparator,
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
if (!this._locales.includes('__pcfcustomcurrency')) {
|
|
51
|
+
numeral.register('locale', '__pcfcustomcurrency', locale);
|
|
52
|
+
}
|
|
53
|
+
else {
|
|
54
|
+
numeral.locales['__pcfcustomcurrency'] = locale;
|
|
55
|
+
}
|
|
56
|
+
numeral.locale('__pcfcustomcurrency');
|
|
57
|
+
}
|
|
58
|
+
static get _locales() {
|
|
59
|
+
return Object.keys(numeral.locales);
|
|
60
|
+
}
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
export { Numeral };
|
|
64
|
+
//# sourceMappingURL=Numeral.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Numeral.js","sources":["../../src/utils/Numeral.ts"],"sourcesContent":["import numeral from \"numeral\";\n\nexport class Numeral {\n public static decimal(formatting: ComponentFramework.UserSettingApi.NumberFormattingInfo) {\n const locale = {\n ordinal: (num: number) => {\n return '.';\n },\n currency: {\n symbol: formatting.currencySymbol\n },\n abbreviations: {\n thousand: 'k',\n million: 'm',\n billion: 'b',\n trillion: 't'\n },\n delimiters: {\n decimal: formatting.numberDecimalSeparator,\n thousands: formatting.numberGroupSeparator,\n }\n };\n if (!this._locales.includes('__pcfcustomdecimal')) {\n numeral.register('locale', '__pcfcustomdecimal', locale);\n }\n else {\n numeral.locales['__pcfcustomdecimal'] = locale;\n }\n numeral.locale('__pcfcustomdecimal');\n }\n\n public static currency(formatting: ComponentFramework.UserSettingApi.NumberFormattingInfo) {\n const locale = {\n ordinal: (num: number) => {\n return '.';\n },\n currency: {\n symbol: formatting.currencySymbol\n },\n abbreviations: {\n thousand: 'k',\n million: 'm',\n billion: 'b',\n trillion: 't'\n },\n delimiters: {\n decimal: formatting.currencyDecimalSeparator,\n thousands: formatting.currencyGroupSeparator,\n }\n };\n if (!this._locales.includes('__pcfcustomcurrency')) {\n numeral.register('locale', '__pcfcustomcurrency', locale);\n }\n else {\n numeral.locales['__pcfcustomcurrency'] = locale;\n }\n numeral.locale('__pcfcustomcurrency');\n }\n private static get _locales() {\n return Object.keys(numeral.locales);\n }\n}"],"names":[],"mappings":";;MAEa,OAAO,CAAA;IACT,OAAO,OAAO,CAAC,UAAkE,EAAA;AACpF,QAAA,MAAM,MAAM,GAAG;AACX,YAAA,OAAO,EAAE,CAAC,GAAW,KAAI;AACrB,gBAAA,OAAO,GAAG,CAAC;aACd;AACD,YAAA,QAAQ,EAAE;gBACN,MAAM,EAAE,UAAU,CAAC,cAAc;AACpC,aAAA;AACD,YAAA,aAAa,EAAE;AACX,gBAAA,QAAQ,EAAE,GAAG;AACb,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,QAAQ,EAAE,GAAG;AAChB,aAAA;AACD,YAAA,UAAU,EAAE;gBACR,OAAO,EAAE,UAAU,CAAC,sBAAsB;gBAC1C,SAAS,EAAE,UAAU,CAAC,oBAAoB;AAC7C,aAAA;SACJ,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,oBAAoB,CAAC,EAAE;YAC/C,OAAO,CAAC,QAAQ,CAAC,QAAQ,EAAE,oBAAoB,EAAE,MAAM,CAAC,CAAC;AAC5D,SAAA;AACI,aAAA;AACD,YAAA,OAAO,CAAC,OAAO,CAAC,oBAAoB,CAAC,GAAG,MAAM,CAAC;AAClD,SAAA;AACD,QAAA,OAAO,CAAC,MAAM,CAAC,oBAAoB,CAAC,CAAC;KACxC;IAEM,OAAO,QAAQ,CAAC,UAAkE,EAAA;AACrF,QAAA,MAAM,MAAM,GAAG;AACX,YAAA,OAAO,EAAE,CAAC,GAAW,KAAI;AACrB,gBAAA,OAAO,GAAG,CAAC;aACd;AACD,YAAA,QAAQ,EAAE;gBACN,MAAM,EAAE,UAAU,CAAC,cAAc;AACpC,aAAA;AACD,YAAA,aAAa,EAAE;AACX,gBAAA,QAAQ,EAAE,GAAG;AACb,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,OAAO,EAAE,GAAG;AACZ,gBAAA,QAAQ,EAAE,GAAG;AAChB,aAAA;AACD,YAAA,UAAU,EAAE;gBACR,OAAO,EAAE,UAAU,CAAC,wBAAwB;gBAC5C,SAAS,EAAE,UAAU,CAAC,sBAAsB;AAC/C,aAAA;SACJ,CAAC;QACF,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,qBAAqB,CAAC,EAAE;YAChD,OAAO,CAAC,QAAQ,CAAC,QAAQ,EAAE,qBAAqB,EAAE,MAAM,CAAC,CAAC;AAC7D,SAAA;AACI,aAAA;AACD,YAAA,OAAO,CAAC,OAAO,CAAC,qBAAqB,CAAC,GAAG,MAAM,CAAC;AACnD,SAAA;AACD,QAAA,OAAO,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC;KACzC;AACO,IAAA,WAAW,QAAQ,GAAA;QACvB,OAAO,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;KACvC;AACJ;;;;"}
|
package/dist/utils/Theme.js
CHANGED
|
@@ -1 +1,72 @@
|
|
|
1
|
-
import{createTheme
|
|
1
|
+
import { createTheme, getTheme } from '@fluentui/react';
|
|
2
|
+
import { createV8Theme } from '@fluentui/react-migration-v8-v9';
|
|
3
|
+
|
|
4
|
+
const lightTheme = createTheme({
|
|
5
|
+
palette: {
|
|
6
|
+
white: '#ffffff'
|
|
7
|
+
},
|
|
8
|
+
});
|
|
9
|
+
const getControlTheme = (fluentDesignLanguage) => {
|
|
10
|
+
const fluentTheme = getTheme();
|
|
11
|
+
if (!fluentDesignLanguage) {
|
|
12
|
+
return {
|
|
13
|
+
...fluentTheme, effects: {
|
|
14
|
+
...fluentTheme.effects,
|
|
15
|
+
underlined: false
|
|
16
|
+
},
|
|
17
|
+
semanticColors: {
|
|
18
|
+
...fluentTheme.semanticColors,
|
|
19
|
+
inputBorder: 'transparent',
|
|
20
|
+
}
|
|
21
|
+
};
|
|
22
|
+
}
|
|
23
|
+
const v8Theme = createV8Theme(fluentDesignLanguage.brand, fluentDesignLanguage.tokenTheme);
|
|
24
|
+
v8Theme.semanticColors.inputBackground = fluentDesignLanguage.tokenTheme.inputBackground ?? fluentDesignLanguage.tokenTheme.colorNeutralBackground1Hover;
|
|
25
|
+
v8Theme.semanticColors.inputBorder = fluentDesignLanguage.tokenTheme.inputBorder ?? 'transparent';
|
|
26
|
+
v8Theme.semanticColors.inputBorderHovered = fluentDesignLanguage.tokenTheme.inputBorderHovered ?? v8Theme.semanticColors.inputBorder;
|
|
27
|
+
v8Theme.semanticColors.inputText = fluentDesignLanguage.tokenTheme.inputText ?? v8Theme.semanticColors.inputText;
|
|
28
|
+
v8Theme.semanticColors.inputPlaceholderText = fluentDesignLanguage.tokenTheme.inputPlaceholderText ?? v8Theme.semanticColors.inputText;
|
|
29
|
+
v8Theme.semanticColors.inputTextHovered = fluentDesignLanguage.tokenTheme.inputTextHovered ?? v8Theme.semanticColors.inputText;
|
|
30
|
+
v8Theme.effects.underlined = fluentDesignLanguage.tokenTheme.underlined ?? true;
|
|
31
|
+
return normalizeComponentStyling(v8Theme);
|
|
32
|
+
};
|
|
33
|
+
const normalizeComponentStyling = (theme) => {
|
|
34
|
+
theme.components = {
|
|
35
|
+
Checkbox: {
|
|
36
|
+
styles: (props) => {
|
|
37
|
+
return {
|
|
38
|
+
root: {
|
|
39
|
+
':hover .ms-Checkbox-checkbox': {
|
|
40
|
+
borderColor: !props.checked ? 'inherit' : undefined
|
|
41
|
+
}
|
|
42
|
+
}
|
|
43
|
+
};
|
|
44
|
+
}
|
|
45
|
+
},
|
|
46
|
+
Toggle: {
|
|
47
|
+
styles: (props) => {
|
|
48
|
+
return {
|
|
49
|
+
pill: {
|
|
50
|
+
backgroundColor: !props.checked ? theme.semanticColors.inputBackground : undefined,
|
|
51
|
+
':hover': {
|
|
52
|
+
borderColor: !props.checked ? props.theme.semanticColors.smallInputBorder : undefined
|
|
53
|
+
},
|
|
54
|
+
}
|
|
55
|
+
};
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
};
|
|
59
|
+
const originalSemanticColors = { ...theme.semanticColors };
|
|
60
|
+
const baseTheme = lightTheme;
|
|
61
|
+
for (const key of Object.keys(baseTheme.semanticColors)) {
|
|
62
|
+
if (key.startsWith('menu') || key.startsWith('list')) {
|
|
63
|
+
//@ts-ignore - a
|
|
64
|
+
theme.semanticColors[key] = baseTheme.semanticColors[key];
|
|
65
|
+
}
|
|
66
|
+
}
|
|
67
|
+
theme.semanticColors.menuIcon = originalSemanticColors.menuIcon;
|
|
68
|
+
return theme;
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
export { getControlTheme, normalizeComponentStyling };
|
|
72
|
+
//# sourceMappingURL=Theme.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Theme.js","sources":["../../src/utils/Theme.ts"],"sourcesContent":["import { createTheme, getTheme, ICheckboxStyleProps, IToggleStyleProps } from '@fluentui/react';\nimport { createV8Theme } from '@fluentui/react-migration-v8-v9';\nimport { ITheme } from '../interfaces/theme';\n\nconst lightTheme = createTheme({\n palette: {\n white: '#ffffff'\n },\n})\n\n\nexport const getControlTheme = (fluentDesignLanguage?: ComponentFramework.FluentDesignState): ITheme => {\n const fluentTheme = getTheme();\n if (!fluentDesignLanguage) {\n return {\n ...fluentTheme, effects: {\n ...fluentTheme.effects,\n underlined: false\n },\n semanticColors: {\n ...fluentTheme.semanticColors,\n inputBorder: 'transparent',\n }\n }\n }\n const v8Theme: ITheme = createV8Theme(fluentDesignLanguage.brand, fluentDesignLanguage.tokenTheme);\n v8Theme.semanticColors.inputBackground = fluentDesignLanguage.tokenTheme.inputBackground ?? fluentDesignLanguage.tokenTheme.colorNeutralBackground1Hover;\n v8Theme.semanticColors.inputBorder = fluentDesignLanguage.tokenTheme.inputBorder ?? 'transparent';\n v8Theme.semanticColors.inputBorderHovered = fluentDesignLanguage.tokenTheme.inputBorderHovered ?? v8Theme.semanticColors.inputBorder;\n v8Theme.semanticColors.inputText = fluentDesignLanguage.tokenTheme.inputText ?? v8Theme.semanticColors.inputText;\n v8Theme.semanticColors.inputPlaceholderText = fluentDesignLanguage.tokenTheme.inputPlaceholderText ?? v8Theme.semanticColors.inputText\n v8Theme.semanticColors.inputTextHovered = fluentDesignLanguage.tokenTheme.inputTextHovered ?? v8Theme.semanticColors.inputText;\n v8Theme.effects.underlined = fluentDesignLanguage.tokenTheme.underlined ?? true;\n return normalizeComponentStyling(v8Theme);\n}\n\nexport const normalizeComponentStyling = (theme: ITheme) => {\n theme.components = {\n Checkbox: {\n styles: (props: ICheckboxStyleProps) => {\n return {\n root: {\n ':hover .ms-Checkbox-checkbox': {\n borderColor: !props.checked ? 'inherit' : undefined\n }\n }\n }\n }\n },\n Toggle: {\n styles: (props: IToggleStyleProps) => {\n return {\n pill: {\n backgroundColor: !props.checked ? theme.semanticColors.inputBackground : undefined,\n ':hover': {\n borderColor: !props.checked ? props.theme.semanticColors.smallInputBorder : undefined\n },\n }\n };\n }\n }\n };\n const originalSemanticColors = { ...theme.semanticColors };\n const baseTheme = lightTheme;\n for (const key of Object.keys(baseTheme.semanticColors)) {\n if (key.startsWith('menu') || key.startsWith('list')) {\n //@ts-ignore - a\n theme.semanticColors[key] = baseTheme.semanticColors[key];\n }\n }\n theme.semanticColors.menuIcon = originalSemanticColors.menuIcon;\n return theme;\n}"],"names":[],"mappings":"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"}
|
package/dist/utils/index.js
CHANGED
|
@@ -1 +1,3 @@
|
|
|
1
|
-
export{Numeral}from
|
|
1
|
+
export { Numeral } from './Numeral.js';
|
|
2
|
+
export { getControlTheme, normalizeComponentStyling } from './Theme.js';
|
|
3
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}
|
package/package.json
CHANGED
|
@@ -1,11 +1,12 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@talxis/base-controls",
|
|
3
|
-
"version": "1.2408.
|
|
3
|
+
"version": "1.2408.3",
|
|
4
4
|
"description": "Set of React components that natively work with Power Apps Component Framework API's",
|
|
5
5
|
"main": "dist/index.js",
|
|
6
6
|
"module": "dist/index.js",
|
|
7
7
|
"license": "MIT",
|
|
8
8
|
"types": "dist/index.d.ts",
|
|
9
|
+
"sideEffects": false,
|
|
9
10
|
"devDependencies": {
|
|
10
11
|
"@babel/core": "^7.16.12",
|
|
11
12
|
"@rollup/plugin-commonjs": "^21.0.1",
|
|
@@ -25,6 +26,7 @@
|
|
|
25
26
|
"@types/validator": "^13.11.9",
|
|
26
27
|
"babel-loader": "^8.2.3",
|
|
27
28
|
"esbuild": "^0.13.9",
|
|
29
|
+
"glob": "^11.0.0",
|
|
28
30
|
"postcss": "^8.3.11",
|
|
29
31
|
"react-scripts": "^5.0.0",
|
|
30
32
|
"rollup": "^2.58.1",
|
|
@@ -76,7 +78,7 @@
|
|
|
76
78
|
"@fluentui/react": "^8.119.1",
|
|
77
79
|
"@fluentui/react-migration-v8-v9": "^9.6.20",
|
|
78
80
|
"@talxis/client-libraries": "^1.2407.2",
|
|
79
|
-
"@talxis/react-components": "^1.2408.
|
|
81
|
+
"@talxis/react-components": "^1.2408.3",
|
|
80
82
|
"color": "^4.2.3",
|
|
81
83
|
"dayjs": "^1.11.10",
|
|
82
84
|
"external-svg-loader": "^1.7.1",
|
package/dist/Grid-b7e6190d.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
import{jsxs as e,jsx as o,Fragment as t}from"react/jsx-runtime";import{useEffect as r,useState as n,useRef as s,useMemo as a}from"react";import{useControl as i}from"./hooks/useControl.js";import{useControlTheme as c}from"./hooks/useControlTheme.js";import{Grid as d}from"./components/Grid/core/model/Grid.js";import{AgGridReact as l}from"@ag-grid-community/react";import{useTheme as m,Text as g,Icon as p,DialogFooter as u,PrimaryButton as v,Spinner as b,SpinnerSize as h,MessageBar as f,MessageBarType as j,CommandBarButton as O,mergeStyleSets as C,ThemeProvider as G}from"@fluentui/react";import{useSelectionController as R}from"./components/Grid/selection/controllers/useSelectionController.js";import{useGridInstance as y}from"./components/Grid/core/hooks/useGridInstance.js";import{getGridStyles as w}from"./components/Grid/core/components/AgGrid/styles.js";import{useAgGridController as N}from"./components/Grid/core/components/AgGrid/controllers/useAgGridController.js";import{Paging as S}from"./components/Grid/paging/components/Paging/Paging.js";import{EmptyRecords as E}from"./components/Grid/core/components/AgGrid/components/EmptyRecordsOverlay/EmptyRecords.js";import{useSave as x}from"./components/Grid/core/components/Save/hooks/useSave.js";import{getSaveStyles as I}from"./components/Grid/core/components/Save/styles.js";import{useRecordUpdateServiceController as D}from"./components/Grid/core/services/RecordUpdateService/controllers/useRecordUpdateServiceController.js";import P from"./components/Grid/core/components/Dialog/index.js";import{__awaiter as V}from"tslib";import{gridTranslations as k}from"./components/Grid/translations.js";import{GridContext as M}from"./components/Grid/GridContext.js";import{getRecordGridStyles as _}from"./components/Grid/core/components/Save/components/ChangeEditor/components/RecordGrids/styles.js";import{getChangeEditorStyles as T}from"./components/Grid/core/components/Save/components/ChangeEditor/styles.js";import{LoadingOverlay as F}from"./components/Grid/core/components/AgGrid/components/LoadingOverlay/LoadingOverlay.js";import{usePagingController as A}from"./components/Grid/paging/controllers/usePagingController.js";const B=t=>{const r=y(),n=Object.assign({},t.record),s=_(m()),a={context:Object.assign(Object.assign({},r.pcfContext),{mode:Object.assign(Object.assign({},r.pcfContext.mode),{setControlState:e=>!1})}),state:{},parameters:{EnableFiltering:{raw:!1},EnablePagination:{raw:!1},EnableSorting:{raw:!1},EnableNavigation:{raw:!1},SelectableRows:{type:"static",raw:"none"},Grid:Object.assign(Object.assign({},r.dataset),{sorting:[],columns:[...n.columns.values()],filtering:Object.assign(Object.assign({},r.dataset.filtering),{getFilter:()=>({conditions:[],filterOperator:0})}),getSelectedRecordIds:()=>[],paging:Object.assign(Object.assign({},r.dataset.paging),{pageSize:1})})}},i=(()=>{const e=[];for(const o of n.columns.values())n.isValid(o.name)||e.push(o);return e})(),c=i.length>0;return e("div",Object.assign({className:s.root},{children:[e("div",Object.assign({className:s.readOnlyGrid},{children:[o("div",Object.assign({className:s.gridTitleWrapper},{children:o(g,Object.assign({title:n.getOriginalFormattedPrimaryNameValue(),variant:"large"},{children:n.getOriginalFormattedPrimaryNameValue()}))})),o(W,Object.assign({},a,{parameters:Object.assign(Object.assign({},a.parameters),{ChangeEditorMode:{raw:"read",error:c},Grid:Object.assign(Object.assign({},a.parameters.Grid),{error:c,errorMessage:c?r.labels["saving-validation-error"]({columnDisplayNames:i.map((e=>e.displayName)).join(", ")}):void 0,records:{[n.getRecordId()]:(e=>({getFormattedValue:o=>e.getOriginalFormattedValue(o),getRecordId:()=>e.getRecordId(),getNamedReference:()=>e.getNamedReference(),getValue:o=>e.getOriginalValue(o),save:()=>V(void 0,void 0,void 0,(function*(){yield e.save(),r.pcfContext.factory.requestRender()})),setValue:(o,t)=>{e.clear(),r.pcfContext.factory.requestRender()}}))(n)}})})}))]})),o(p,{iconName:"DoubleChevronDown8"}),o("div",Object.assign({className:s.editableGrid},{children:o(W,Object.assign({},a,{parameters:Object.assign(Object.assign({},a.parameters),{ChangeEditorMode:{raw:"edit"},EnableEditing:{raw:!0},Grid:Object.assign(Object.assign({},a.parameters.Grid),{records:{[n.getRecordId()]:(e=>({getFormattedValue:o=>e.getFormattedValue(o),getRecordId:()=>e.getRecordId(),getNamedReference:()=>e.getNamedReference(),getValue:o=>e.getValue(o),save:()=>{throw new Error("Should not be called!")},setValue:(o,t)=>{e.setValue(o,t),r.pcfContext.factory.requestRender()}}))(n)}})})}))}))]}))},L=t=>{const n=y().labels,s=D(),{isSaving:a,saveBtnProps:i,save:c}=x(),d=s.updatedRecords,l=T(m());return r((()=>{var e;0===d.length&&(null===(e=t.onDismiss)||void 0===e||e.call(t))}),[d]),e(P,Object.assign({},t,{width:1e3,minWidth:"80%",modalProps:{isBlocking:!0,className:l.root,layerProps:{eventBubblingEnabled:!0}},dialogContentProps:{showCloseButton:!0,title:n["saving-changepreview-title"]({numOfChanges:d.length})},hidden:!1},{children:[o("div",Object.assign({className:l.recordGrids},{children:d.map((e=>o(B,{record:e},e.getRecordId())))})),o(u,{children:o(v,Object.assign({className:l.saveBtn,text:i.text,disabled:i.disabled,onClick:()=>c()},{children:a&&o(b,{size:h.small})}))})]}))},z=()=>{const r=y(),s=r.labels,a=I(),{isDirty:i,updatedRecords:c,hasInvalidRecords:d,clearAll:l}=D(),{isSaving:m,saveBtnProps:g,save:p}=x(),[u,v]=n(!1);return e(t,{children:[o("div",Object.assign({onClick:()=>{i&&v(!0)},className:a.root,"data-dirty":i},{children:o(f,Object.assign({messageBarType:d?j.error:j.info,actions:e("div",Object.assign({className:a.actions},{children:[o(O,{text:m?g.text:void 0,disabled:g.disabled,onRenderIcon:m?()=>o(b,{size:h.small}):void 0,iconProps:{iconName:g.iconName},onClick:e=>{e.stopPropagation(),p()}}),o(O,{disabled:g.disabled&&!d&&!r.props.parameters.ChangeEditorMode,iconProps:{iconName:"Delete"},onClick:e=>{e.stopPropagation(),l()}})]})),isMultiline:!1},{children:i&&o("span",{className:a.notificationText,dangerouslySetInnerHTML:{__html:s["saving-changenotification"]({numOfChanges:c.length})}})}))})),u&&o(L,{onDismiss:e=>{"Escape"!==(null==e?void 0:e.code)&&v(!1)}})]})},H=()=>{var r,n;const a=y(),i=R(),c=s(),d=s(null),g=m();let{agColumns:p,records:u,maxNumberOfVisibleRecords:v,stateRef:b,getTotalColumnsWidth:h,onGridReady:O}=N(c);const C=A(),G=w(g,v,a.useContainerAsHeight),x=()=>{const e=(()=>{var e,o;const t=null===(e=d.current)||void 0===e?void 0:e.querySelector(".ag-root-wrapper");return null!==(o=null==t?void 0:t.clientWidth)&&void 0!==o?o:0})();e>h()&&c.current.sizeColumnsToFit()};return o("div",Object.assign({ref:d,className:`${G.root} ag-theme-balham`},{children:p.length>0&&e(t,{children:[(a.isEditable&&"edit"!==(null===(r=a.parameters.ChangeEditorMode)||void 0===r?void 0:r.raw)||"read"===(null===(n=a.parameters.ChangeEditorMode)||void 0===n?void 0:n.raw))&&o(z,{}),a.error&&o(f,Object.assign({messageBarType:j.error},{children:o("span",{dangerouslySetInnerHTML:{__html:a.errorMessage}})})),o(l,{animateRows:!0,rowSelection:a.selection.type,noRowsOverlayComponent:E,loadingOverlayComponent:F,suppressDragLeaveHidesColumns:!0,onColumnMoved:e=>{e.finished&&(e=>{var o;const t=null===(o=e.api.getState().columnOrder)||void 0===o?void 0:o.orderedColIds.filter((e=>!0));t&&a.pcfContext.factory.fireEvent("__updateColumnOrder",t)})(e)},reactiveCustomComponents:!0,onRowSelected:e=>{e.source.includes("api")||"gridInitializing"===e.source||i.toggle(e.data,e.node.isSelected())},onCellDoubleClicked:e=>{a.isNavigationEnabled&&!a.isEditable&&a.openDatasetItem(e.data.getNamedReference())},onCellMouseOver:e=>{var o;"__checkbox"===e.colDef.colId&&(null===(o=c.current)||void 0===o||o.setGridOption("suppressRowClickSelection",!0))},onCellMouseOut:e=>{var o;null===(o=c.current)||void 0===o||o.setGridOption("suppressRowClickSelection",!1)},getRowId:e=>e.data.getRecordId(),onGridReady:e=>{var o;c.current=e.api,a.loading&&(null===(o=c.current)||void 0===o||o.showLoadingOverlay()),x(),O()},initialState:b.current,onStateUpdated:e=>b.current=Object.assign(Object.assign({},b.current),e.state),rowHeight:42,columnDefs:p,rowData:u}),C.isEnabled&&o(S,{})]})}))},q=C({root:{displayName:"talxis__gridControl",height:"100%"}}),W=e=>{const{labels:t}=i("Grid",e,k),r=a((()=>({gridInstance:new d(e,t)})),[]);r.gridInstance.updateDependencies(e);const n=c(e.context.fluentDesignLanguage);return o(M.Provider,Object.assign({value:r},{children:o(G,Object.assign({className:`talxis__gridControl ${q.root}`,theme:n,applyTo:"none"},{children:o(H,{})}))}))};export{H as A,L as C,W as G,B as R,z as S};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
|