@reltio/components 1.4.2226 → 1.4.2228
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/AttributeVerificationStatus/AttributeVerificationStatus.module.css.js +2 -2
- package/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.d.ts +9 -1
- package/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.js +3 -3
- package/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.module.css.js +1 -1
- package/SimpleAttribute/SimpleAttribute.d.ts +5 -2
- package/SimpleAttribute/SimpleAttribute.js +15 -7
- package/SimpleAttribute/SimpleAttribute.module.css.js +9 -0
- package/VerificationButton/VerificationButton.js +9 -17
- package/VerificationButton/VerificationButton.module.css.js +2 -2
- package/cjs/AttributeVerificationStatus/AttributeVerificationStatus.module.css.js +2 -2
- package/cjs/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.d.ts +9 -1
- package/cjs/ReadOnlyAttributeValuesBlock/ReadOnlyAttributeValuesBlock.js +3 -3
- package/cjs/ReadOnlyComplexAttribute/ReadOnlyComplexAttribute.module.css.js +1 -1
- package/cjs/SimpleAttribute/SimpleAttribute.d.ts +5 -2
- package/cjs/SimpleAttribute/SimpleAttribute.js +19 -11
- package/cjs/SimpleAttribute/SimpleAttribute.module.css.js +9 -0
- package/cjs/VerificationButton/VerificationButton.js +9 -17
- package/cjs/VerificationButton/VerificationButton.module.css.js +2 -2
- package/cjs/features/crosswalks/AttributesTable/AttributesTable.js +3 -1
- package/cjs/features/crosswalks/AttributesTable/AttributesTable.test-data.d.ts +4 -1
- package/cjs/features/crosswalks/AttributesTable/AttributesTable.test-data.js +51 -21
- package/cjs/features/crosswalks/AttributesTable/AttributesTable.test.js +56 -0
- package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.d.ts +7 -0
- package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.js +31 -0
- package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.module.css.js +9 -0
- package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/index.d.ts +1 -0
- package/cjs/features/crosswalks/AttributesTable/components/FallbackIndicator/index.js +5 -0
- package/cjs/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.js +3 -1
- package/cjs/features/crosswalks/AttributesTable/components/RuleTypeInfoButton/RuleTypeInfoButton.js +1 -1
- package/cjs/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.d.ts +1 -1
- package/cjs/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.js +65 -11
- package/cjs/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.module.css.js +9 -0
- package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightConsumer.d.ts +7 -0
- package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightConsumer.js +15 -0
- package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightReporter.d.ts +7 -0
- package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightReporter.js +53 -0
- package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/index.d.ts +2 -0
- package/cjs/features/crosswalks/AttributesTable/components/SyncedValueHeight/index.js +7 -0
- package/cjs/features/crosswalks/AttributesTable/helpers.d.ts +4 -2
- package/cjs/features/crosswalks/AttributesTable/helpers.js +96 -17
- package/cjs/features/crosswalks/AttributesTable/helpers.test.js +499 -50
- package/cjs/features/crosswalks/AttributesTable/types.d.ts +17 -3
- package/cjs/features/crosswalks/contexts/SyncedValueHeightsContext.d.ts +11 -0
- package/cjs/features/crosswalks/contexts/SyncedValueHeightsContext.js +66 -0
- package/features/crosswalks/AttributesTable/AttributesTable.js +3 -1
- package/features/crosswalks/AttributesTable/AttributesTable.test-data.d.ts +4 -1
- package/features/crosswalks/AttributesTable/AttributesTable.test-data.js +49 -20
- package/features/crosswalks/AttributesTable/AttributesTable.test.js +58 -2
- package/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.d.ts +7 -0
- package/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.js +24 -0
- package/features/crosswalks/AttributesTable/components/FallbackIndicator/FallbackIndicator.module.css.js +9 -0
- package/features/crosswalks/AttributesTable/components/FallbackIndicator/index.d.ts +1 -0
- package/features/crosswalks/AttributesTable/components/FallbackIndicator/index.js +1 -0
- package/features/crosswalks/AttributesTable/components/OvValuesRenderer/OvValuesRenderer.js +3 -1
- package/features/crosswalks/AttributesTable/components/RuleTypeInfoButton/RuleTypeInfoButton.js +1 -1
- package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.d.ts +1 -1
- package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.js +65 -11
- package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/RuleTypeRenderer.module.css.js +9 -0
- package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightConsumer.d.ts +7 -0
- package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightConsumer.js +8 -0
- package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightReporter.d.ts +7 -0
- package/features/crosswalks/AttributesTable/components/SyncedValueHeight/ValueHeightReporter.js +23 -0
- package/features/crosswalks/AttributesTable/components/SyncedValueHeight/index.d.ts +2 -0
- package/features/crosswalks/AttributesTable/components/SyncedValueHeight/index.js +2 -0
- package/features/crosswalks/AttributesTable/helpers.d.ts +4 -2
- package/features/crosswalks/AttributesTable/helpers.js +95 -18
- package/features/crosswalks/AttributesTable/helpers.test.js +501 -52
- package/features/crosswalks/AttributesTable/types.d.ts +17 -3
- package/features/crosswalks/contexts/SyncedValueHeightsContext.d.ts +11 -0
- package/features/crosswalks/contexts/SyncedValueHeightsContext.js +38 -0
- package/package.json +2 -2
- package/SimpleAttribute/styles.d.ts +0 -1
- package/SimpleAttribute/styles.js +0 -42
- package/cjs/SimpleAttribute/styles.d.ts +0 -1
- package/cjs/SimpleAttribute/styles.js +0 -45
- package/cjs/features/crosswalks/AttributesTable/components/RuleTypeRenderer/styles.d.ts +0 -1
- package/cjs/features/crosswalks/AttributesTable/components/RuleTypeRenderer/styles.js +0 -13
- package/cjs/icons/VerifyAllIcon.d.ts +0 -3
- package/cjs/icons/VerifyAllIcon.js +0 -26
- package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/styles.d.ts +0 -1
- package/features/crosswalks/AttributesTable/components/RuleTypeRenderer/styles.js +0 -10
- package/icons/VerifyAllIcon.d.ts +0 -3
- package/icons/VerifyAllIcon.js +0 -21
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
const styles = {"status":"AttributeVerificationStatus-status--NwPR6","
|
|
1
|
+
const styles = {"status":"AttributeVerificationStatus-status--NwPR6","icon":"AttributeVerificationStatus-icon--C8xBC"};
|
|
2
2
|
if (typeof document !== 'undefined') {
|
|
3
3
|
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
4
|
const style = document.createElement('style');
|
|
5
5
|
style.type = 'text/css'
|
|
6
|
-
style.innerHTML = `.AttributeVerificationStatus-status--NwPR6{height:18px;margin-left:4px;position:relative;width:14px}.AttributeVerificationStatus-
|
|
6
|
+
style.innerHTML = `.AttributeVerificationStatus-status--NwPR6{height:18px;margin-left:4px;position:relative;width:14px}.AttributeVerificationStatus-icon--C8xBC{left:0;position:absolute;top:2px}`;
|
|
7
7
|
head.appendChild(style);
|
|
8
8
|
}
|
|
9
9
|
export default styles;
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { AttributeType, AttributeValue } from '@reltio/mdm-sdk';
|
|
2
|
+
import { AttributeType, AttributeValue, OvDetails } from '@reltio/mdm-sdk';
|
|
3
3
|
type SlotParams<T> = {
|
|
4
4
|
attributeType?: AttributeType;
|
|
5
5
|
attributeValue: T;
|
|
6
6
|
};
|
|
7
|
+
type WrapperParams = {
|
|
8
|
+
uri: string;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
};
|
|
7
11
|
type Props = {
|
|
8
12
|
values: AttributeValue[];
|
|
9
13
|
attributeType: AttributeType;
|
|
@@ -11,7 +15,11 @@ type Props = {
|
|
|
11
15
|
valueContainerClassName?: string;
|
|
12
16
|
LabelRenderer?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
|
|
13
17
|
RightSlot?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
|
|
18
|
+
FallbackSlot?: ({ ovDetails }: {
|
|
19
|
+
ovDetails: OvDetails;
|
|
20
|
+
}) => React.ReactElement;
|
|
14
21
|
showNonOv?: boolean;
|
|
22
|
+
AttributeValueWrapper?: ({ uri, children }: WrapperParams) => React.ReactElement;
|
|
15
23
|
};
|
|
16
24
|
declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, RightSlot, ...props }: Props) => React.JSX.Element>;
|
|
17
25
|
export default _default;
|
|
@@ -27,11 +27,11 @@ import { ReadOnlyImageAttributesLine } from '../ReadOnlyImageAttributesLine';
|
|
|
27
27
|
import { LazyRenderer } from '../LazyRenderer';
|
|
28
28
|
var lazyRendererStyle = { height: '18px' };
|
|
29
29
|
var renderAttributesList = function (_a) {
|
|
30
|
-
var values = _a.values, valueContainerClassName = _a.valueContainerClassName, props = __rest(_a, ["values", "valueContainerClassName"]);
|
|
30
|
+
var values = _a.values, valueContainerClassName = _a.valueContainerClassName, AttributeValueWrapper = _a.AttributeValueWrapper, props = __rest(_a, ["values", "valueContainerClassName", "AttributeValueWrapper"]);
|
|
31
31
|
var enabledLazyRendering = (values === null || values === void 0 ? void 0 : values.length) > 20;
|
|
32
32
|
return (React.createElement(React.Fragment, null, (values || []).map(function (attributeValue) { return (React.createElement(LazyRenderer, { key: attributeValue.uri, className: valueContainerClassName, enabled: enabledLazyRendering, style: lazyRendererStyle },
|
|
33
|
-
React.createElement("div", { className: valueContainerClassName },
|
|
34
|
-
React.createElement(ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props))))); })));
|
|
33
|
+
React.createElement("div", { className: valueContainerClassName }, AttributeValueWrapper ? (React.createElement(AttributeValueWrapper, { uri: attributeValue.uri },
|
|
34
|
+
React.createElement(ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))) : (React.createElement(ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))))); })));
|
|
35
35
|
};
|
|
36
36
|
var ReadOnlyAttributeValuesBlock = function (_a) {
|
|
37
37
|
var expanded = _a.expanded, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot, props = __rest(_a, ["expanded", "LabelRenderer", "RightSlot"]);
|
|
@@ -3,7 +3,7 @@ if (typeof document !== 'undefined') {
|
|
|
3
3
|
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
4
|
const style = document.createElement('style');
|
|
5
5
|
style.type = 'text/css'
|
|
6
|
-
style.innerHTML = `.ReadOnlyComplexAttribute-complexContainer--DybRT{margin-top:1px}.ReadOnlyComplexAttribute-labelContainer--x4Ikp{display:flex;min-height:18px
|
|
6
|
+
style.innerHTML = `.ReadOnlyComplexAttribute-complexContainer--DybRT{margin-top:1px}.ReadOnlyComplexAttribute-labelContainer--x4Ikp{display:flex;min-height:18px}.ReadOnlyComplexAttribute-label--BqM8F{display:inline-flex;font-size:13px;letter-spacing:normal;line-height:16px;margin-left:2px;white-space:break-spaces}.ReadOnlyComplexAttribute-spacer--raB-d{flex:1}.ReadOnlyComplexAttribute-ovFalse--9sySx{opacity:var(--mui-inactive-opacity)}`;
|
|
7
7
|
head.appendChild(style);
|
|
8
8
|
}
|
|
9
9
|
export default styles;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { AttributeType, SimpleAttributeValue } from '@reltio/mdm-sdk';
|
|
2
|
+
import { AttributeType, SimpleAttributeValue, OvDetails } from '@reltio/mdm-sdk';
|
|
3
3
|
type Props = {
|
|
4
4
|
className?: string;
|
|
5
5
|
attributeValue: SimpleAttributeValue;
|
|
6
6
|
attributeType: AttributeType;
|
|
7
7
|
inlined?: boolean;
|
|
8
|
+
FallbackSlot?: ({ ovDetails }: {
|
|
9
|
+
ovDetails: OvDetails;
|
|
10
|
+
}) => React.ReactElement;
|
|
8
11
|
};
|
|
9
|
-
export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined }: Props) => React.JSX.Element;
|
|
12
|
+
export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined, FallbackSlot }: Props) => React.JSX.Element;
|
|
10
13
|
export {};
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import React, { useContext, useMemo } from 'react';
|
|
2
|
-
import { getAttrDataTypeDefinition, getHistoryAppearanceByUri, getAttributeValue, createRelatedObjectUris, isOv, getHistoryAttributeClassName, getObjectTypeByAttributeUri } from '@reltio/mdm-sdk';
|
|
2
|
+
import { getAttrDataTypeDefinition, getHistoryAppearanceByUri, getAttributeValue, createRelatedObjectUris, isOv, getHistoryAttributeClassName, getObjectTypeByAttributeUri, HistoryOperations, historyPalettes } from '@reltio/mdm-sdk';
|
|
3
3
|
import classnames from 'classnames';
|
|
4
4
|
import { useMaskedAttribute } from '../hooks/useMaskedAttribute';
|
|
5
|
+
import { useCssVariableStyles } from '../hooks/useCssVariableStyles';
|
|
5
6
|
import { COMMENTS_CONTAINER_VISIBILITY_AREA } from '../constants/classnames';
|
|
6
7
|
import { HistoryDiffContext } from '../contexts/HistoryAppearanceContext';
|
|
7
8
|
import { HighlightedValuesContext } from '../contexts/HighlightedValuesContext';
|
|
@@ -9,15 +10,21 @@ import { CommentsContainer } from '../CommentsContainer';
|
|
|
9
10
|
import { DataTypeValue } from '../DataTypeValue';
|
|
10
11
|
import { PivotingTooltip } from '../PivotingTooltip';
|
|
11
12
|
import { MaskingSwitcher } from '../MaskingSwitcher';
|
|
12
|
-
import
|
|
13
|
+
import styles from './SimpleAttribute.module.css';
|
|
13
14
|
export var SimpleAttribute = function (_a) {
|
|
14
15
|
var _b, _c, _d, _e, _f;
|
|
15
|
-
var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined;
|
|
16
|
+
var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined, FallbackSlot = _a.FallbackSlot;
|
|
16
17
|
var _h = useMaskedAttribute({
|
|
17
18
|
attributeType: attributeType,
|
|
18
19
|
attributeValue: rawAttributeValue
|
|
19
20
|
}), isUnmaskingNeeded = _h.isUnmaskingNeeded, isMasked = _h.isMasked, toggleMasking = _h.toggleMasking, attributeValue = _h.attributeValue, isUnmasking = _h.isUnmasking;
|
|
20
|
-
var
|
|
21
|
+
var variableStyles = useCssVariableStyles({
|
|
22
|
+
'--history-insert-color': historyPalettes[HistoryOperations.insertAttribute].color,
|
|
23
|
+
'--history-update-backgroundColor': historyPalettes[HistoryOperations.updateAttribute].backgroundColor,
|
|
24
|
+
'--history-update-color': historyPalettes[HistoryOperations.updateAttribute].color,
|
|
25
|
+
'--history-delete-backgroundColor': historyPalettes[HistoryOperations.deleteAttribute].backgroundColor,
|
|
26
|
+
'--history-delete-color': historyPalettes[HistoryOperations.deleteAttribute].color
|
|
27
|
+
});
|
|
21
28
|
var _j = useContext(HighlightedValuesContext), _k = _j.highlightedValuesUris, highlightedValuesUris = _k === void 0 ? [] : _k, highlightedClassName = _j.highlightedClassName;
|
|
22
29
|
var appearance = useContext(HistoryDiffContext).appearance;
|
|
23
30
|
var attributeAppearance = getHistoryAppearanceByUri(attributeValue.uri, appearance);
|
|
@@ -25,7 +32,7 @@ export var SimpleAttribute = function (_a) {
|
|
|
25
32
|
var dataTypeValue = useMemo(function () { return (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: getAttrDataTypeDefinition(attributeType) })); }, [attributeValue, attributeType]);
|
|
26
33
|
var objectType = getObjectTypeByAttributeUri(attributeValue.uri);
|
|
27
34
|
var unmaskingControl = isUnmaskingNeeded && (React.createElement(MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }));
|
|
28
|
-
return inlined || historyClassName ? (React.createElement("div", { className: classnames(className, (_b = {},
|
|
35
|
+
return inlined || historyClassName ? (React.createElement("div", { style: variableStyles, className: classnames(className, (_b = {},
|
|
29
36
|
_b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
|
|
30
37
|
_b)) },
|
|
31
38
|
React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: classnames((_c = {}, _c[styles.multilineAttribute] = !inlined, _c)) },
|
|
@@ -33,13 +40,14 @@ export var SimpleAttribute = function (_a) {
|
|
|
33
40
|
_d[styles.ovFalse] = !isOv(attributeValue),
|
|
34
41
|
_d)), "data-reltio-id": "reltio-attribute-value" },
|
|
35
42
|
dataTypeValue,
|
|
36
|
-
unmaskingControl)))) : (React.createElement("div", { "data-reltio-id": "comments-container-visibility-area", className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
|
|
43
|
+
unmaskingControl)))) : (React.createElement("div", { "data-reltio-id": "comments-container-visibility-area", style: variableStyles, className: classnames(className, styles.root, COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
|
|
37
44
|
_e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
|
|
38
45
|
_e)) },
|
|
39
46
|
React.createElement(PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
|
|
40
47
|
React.createElement("span", { className: classnames(styles.attributeValue, (_f = {}, _f[styles.ovFalse] = !isOv(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" },
|
|
41
48
|
dataTypeValue,
|
|
42
|
-
unmaskingControl
|
|
49
|
+
unmaskingControl,
|
|
50
|
+
FallbackSlot && React.createElement(FallbackSlot, { ovDetails: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails }))),
|
|
43
51
|
React.createElement(CommentsContainer, { className: styles.commentsContainer, uri: attributeValue.uri, relatedObjectUris: createRelatedObjectUris(objectType, {
|
|
44
52
|
uri: attributeValue.uri
|
|
45
53
|
}), objectType: objectType })));
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const styles = {"root":"SimpleAttribute-root--msTML","commentsContainer":"SimpleAttribute-commentsContainer--kT8wH","attributeValue":"SimpleAttribute-attributeValue--5ESxH","updateAttribute":"SimpleAttribute-updateAttribute--HLqXI","insertAttribute":"SimpleAttribute-insertAttribute--3A5Xi","deleteAttribute":"SimpleAttribute-deleteAttribute--ftsz5","multilineAttribute":"SimpleAttribute-multilineAttribute--xY9V-","ovFalse":"SimpleAttribute-ovFalse--n4JcN"};
|
|
2
|
+
if (typeof document !== 'undefined') {
|
|
3
|
+
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
+
const style = document.createElement('style');
|
|
5
|
+
style.type = 'text/css'
|
|
6
|
+
style.innerHTML = `.SimpleAttribute-root--msTML{align-items:start;display:flex;justify-content:space-between}.SimpleAttribute-commentsContainer--kT8wH{height:15px;margin-right:-4px}.SimpleAttribute-attributeValue--5ESxH{vertical-align:middle;white-space:break-spaces;word-break:break-all}.SimpleAttribute-updateAttribute--HLqXI{background-color:var(--history-update-backgroundColor);color:var(--history-update-color);margin-left:-4px;padding:0 4px;width:fit-content}.SimpleAttribute-updateAttribute--HLqXI>a{color:var(--history-update-color)}.SimpleAttribute-insertAttribute--3A5Xi{color:var(--history-insert-color);width:fit-content}.SimpleAttribute-insertAttribute--3A5Xi>a{color:var(--history-insert-color)}.SimpleAttribute-deleteAttribute--ftsz5{background-color:var(--history-delete-backgroundColor);color:var(--history-delete-color);margin-left:-4px;padding:0 4px;text-decoration:line-through;width:fit-content}.SimpleAttribute-deleteAttribute--ftsz5>a{color:var(--history-delete-color)}.SimpleAttribute-multilineAttribute--xY9V-{width:fit-content}.SimpleAttribute-ovFalse--n4JcN{opacity:var(--mui-inactive-opacity)}`;
|
|
7
|
+
head.appendChild(style);
|
|
8
|
+
}
|
|
9
|
+
export default styles;
|
|
@@ -34,35 +34,27 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
34
34
|
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
35
35
|
}
|
|
36
36
|
};
|
|
37
|
-
var _a, _b;
|
|
38
37
|
import React, { useCallback, useMemo, useState } from 'react';
|
|
39
38
|
import { isNil } from 'ramda';
|
|
40
39
|
import classnames from 'classnames';
|
|
41
40
|
import { useContextSelector } from '@fluentui/react-context-selector';
|
|
42
41
|
import CircularProgress from '@mui/material/CircularProgress';
|
|
42
|
+
import Button from '@mui/material/Button';
|
|
43
|
+
import CheckCircleOutlineIcon from '@mui/icons-material/CheckCircleOutline';
|
|
43
44
|
import i18n from 'ui-i18n';
|
|
44
|
-
import VerificationIcon from '../icons/VerifyAllIcon';
|
|
45
45
|
import { useSafePromise } from '../hooks/useSafePromise';
|
|
46
46
|
import { InputVerificationAttribute, verifyAttributes, VerifyAttributesClientFilter } from '@reltio/mdm-sdk';
|
|
47
47
|
import { useMdmEntityUri, useMdmAction } from '../contexts/MdmModuleContext';
|
|
48
48
|
import { AttributesVerificationContext } from '../contexts/AttributesVerificationContext';
|
|
49
49
|
import { showDefaultErrorMessage } from '../helpers/errors';
|
|
50
|
-
import {
|
|
51
|
-
import { SmallIconButtonWithTooltip } from '../SmallIconButton';
|
|
50
|
+
import { withTooltip } from '../HOCs/withTooltip';
|
|
52
51
|
import styles from './VerificationButton.module.css';
|
|
52
|
+
var ButtonWithTooltip = withTooltip(Button);
|
|
53
53
|
export var VerificationButtonSize;
|
|
54
54
|
(function (VerificationButtonSize) {
|
|
55
55
|
VerificationButtonSize["SMALL"] = "small";
|
|
56
56
|
VerificationButtonSize["MEDIUM"] = "medium";
|
|
57
57
|
})(VerificationButtonSize || (VerificationButtonSize = {}));
|
|
58
|
-
var ICON_SIZES = (_a = {},
|
|
59
|
-
_a[VerificationButtonSize.SMALL] = 16,
|
|
60
|
-
_a[VerificationButtonSize.MEDIUM] = 24,
|
|
61
|
-
_a);
|
|
62
|
-
var BUTTON_SIZES = (_b = {},
|
|
63
|
-
_b[VerificationButtonSize.SMALL] = 20,
|
|
64
|
-
_b[VerificationButtonSize.MEDIUM] = 36,
|
|
65
|
-
_b);
|
|
66
58
|
var getTooltipTitle = function (verificationTypes) {
|
|
67
59
|
if (verificationTypes.includes(InputVerificationAttribute.Email) &&
|
|
68
60
|
verificationTypes.includes(InputVerificationAttribute.Phone)) {
|
|
@@ -78,10 +70,6 @@ var getTooltipTitle = function (verificationTypes) {
|
|
|
78
70
|
};
|
|
79
71
|
export var VerificationButton = function (_a) {
|
|
80
72
|
var attributeType = _a.attributeType, _b = _a.size, size = _b === void 0 ? VerificationButtonSize.SMALL : _b, className = _a.className;
|
|
81
|
-
var variableStyles = useCssVariableStyles({
|
|
82
|
-
'--icon-size': ICON_SIZES[size] + 'px',
|
|
83
|
-
'--button-size': BUTTON_SIZES[size] + 'px'
|
|
84
|
-
});
|
|
85
73
|
var _c = useState(false), loading = _c[0], setLoading = _c[1];
|
|
86
74
|
var entityUri = useMdmEntityUri();
|
|
87
75
|
var updateEntityAttributeValues = useMdmAction('updateEntityAttributeValues');
|
|
@@ -146,5 +134,9 @@ export var VerificationButton = function (_a) {
|
|
|
146
134
|
return allVerificationTypes;
|
|
147
135
|
}, [verificationType, allVerificationTypes]);
|
|
148
136
|
var tooltipTitle = getTooltipTitle(currentVerificationTypes);
|
|
149
|
-
|
|
137
|
+
var buttonText = attributeType ? i18n.text('Verify') : i18n.text('Verify contact details');
|
|
138
|
+
var startIcon = loading ? (React.createElement(CircularProgress, { size: size === VerificationButtonSize.SMALL ? 18 : 20 })) : (React.createElement(CheckCircleOutlineIcon, null));
|
|
139
|
+
var tooltipText = tooltipTitle || buttonText;
|
|
140
|
+
return (React.createElement("div", { className: styles.root },
|
|
141
|
+
React.createElement(ButtonWithTooltip, { variant: "text", color: "primary", startIcon: startIcon, onClick: handleClick, disabled: loading, className: classnames(styles.button, className), classes: { startIcon: styles.startIcon }, size: size === VerificationButtonSize.SMALL ? 'small' : 'medium', tooltipTitle: tooltipText, tooltipPlacement: "bottom" }, buttonText)));
|
|
150
142
|
};
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
const styles = {"root":"VerificationButton-root--0piRf","
|
|
1
|
+
const styles = {"root":"VerificationButton-root--0piRf","startIcon":"VerificationButton-startIcon--Txlkd"};
|
|
2
2
|
if (typeof document !== 'undefined') {
|
|
3
3
|
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
4
|
const style = document.createElement('style');
|
|
5
5
|
style.type = 'text/css'
|
|
6
|
-
style.innerHTML = `.VerificationButton-root--0piRf{display:inline-block;margin-left:
|
|
6
|
+
style.innerHTML = `.VerificationButton-root--0piRf{display:inline-block;margin-left:4px}.VerificationButton-root--0piRf .VerificationButton-startIcon--Txlkd{margin-right:4px}`;
|
|
7
7
|
head.appendChild(style);
|
|
8
8
|
}
|
|
9
9
|
export default styles;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
const styles = {"status":"AttributeVerificationStatus-status--NwPR6","
|
|
1
|
+
const styles = {"status":"AttributeVerificationStatus-status--NwPR6","icon":"AttributeVerificationStatus-icon--C8xBC"};
|
|
2
2
|
if (typeof document !== 'undefined') {
|
|
3
3
|
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
4
|
const style = document.createElement('style');
|
|
5
5
|
style.type = 'text/css'
|
|
6
|
-
style.innerHTML = `.AttributeVerificationStatus-status--NwPR6{height:18px;margin-left:4px;position:relative;width:14px}.AttributeVerificationStatus-
|
|
6
|
+
style.innerHTML = `.AttributeVerificationStatus-status--NwPR6{height:18px;margin-left:4px;position:relative;width:14px}.AttributeVerificationStatus-icon--C8xBC{left:0;position:absolute;top:2px}`;
|
|
7
7
|
head.appendChild(style);
|
|
8
8
|
}
|
|
9
9
|
module.exports = styles;
|
|
@@ -1,9 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { AttributeType, AttributeValue } from '@reltio/mdm-sdk';
|
|
2
|
+
import { AttributeType, AttributeValue, OvDetails } from '@reltio/mdm-sdk';
|
|
3
3
|
type SlotParams<T> = {
|
|
4
4
|
attributeType?: AttributeType;
|
|
5
5
|
attributeValue: T;
|
|
6
6
|
};
|
|
7
|
+
type WrapperParams = {
|
|
8
|
+
uri: string;
|
|
9
|
+
children: React.ReactNode;
|
|
10
|
+
};
|
|
7
11
|
type Props = {
|
|
8
12
|
values: AttributeValue[];
|
|
9
13
|
attributeType: AttributeType;
|
|
@@ -11,7 +15,11 @@ type Props = {
|
|
|
11
15
|
valueContainerClassName?: string;
|
|
12
16
|
LabelRenderer?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
|
|
13
17
|
RightSlot?: ({ attributeType, attributeValue }: SlotParams<AttributeValue>) => React.ReactElement;
|
|
18
|
+
FallbackSlot?: ({ ovDetails }: {
|
|
19
|
+
ovDetails: OvDetails;
|
|
20
|
+
}) => React.ReactElement;
|
|
14
21
|
showNonOv?: boolean;
|
|
22
|
+
AttributeValueWrapper?: ({ uri, children }: WrapperParams) => React.ReactElement;
|
|
15
23
|
};
|
|
16
24
|
declare const _default: React.MemoExoticComponent<({ expanded, LabelRenderer, RightSlot, ...props }: Props) => React.JSX.Element>;
|
|
17
25
|
export default _default;
|
|
@@ -52,11 +52,11 @@ var ReadOnlyImageAttributesLine_1 = require("../ReadOnlyImageAttributesLine");
|
|
|
52
52
|
var LazyRenderer_1 = require("../LazyRenderer");
|
|
53
53
|
var lazyRendererStyle = { height: '18px' };
|
|
54
54
|
var renderAttributesList = function (_a) {
|
|
55
|
-
var values = _a.values, valueContainerClassName = _a.valueContainerClassName, props = __rest(_a, ["values", "valueContainerClassName"]);
|
|
55
|
+
var values = _a.values, valueContainerClassName = _a.valueContainerClassName, AttributeValueWrapper = _a.AttributeValueWrapper, props = __rest(_a, ["values", "valueContainerClassName", "AttributeValueWrapper"]);
|
|
56
56
|
var enabledLazyRendering = (values === null || values === void 0 ? void 0 : values.length) > 20;
|
|
57
57
|
return (react_1.default.createElement(react_1.default.Fragment, null, (values || []).map(function (attributeValue) { return (react_1.default.createElement(LazyRenderer_1.LazyRenderer, { key: attributeValue.uri, className: valueContainerClassName, enabled: enabledLazyRendering, style: lazyRendererStyle },
|
|
58
|
-
react_1.default.createElement("div", { className: valueContainerClassName },
|
|
59
|
-
react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props))))); })));
|
|
58
|
+
react_1.default.createElement("div", { className: valueContainerClassName }, AttributeValueWrapper ? (react_1.default.createElement(AttributeValueWrapper, { uri: attributeValue.uri },
|
|
59
|
+
react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))) : (react_1.default.createElement(ReadOnlyAttributesFactory_1.ReadOnlyAttribute, __assign({ attributeValue: attributeValue }, props)))))); })));
|
|
60
60
|
};
|
|
61
61
|
var ReadOnlyAttributeValuesBlock = function (_a) {
|
|
62
62
|
var expanded = _a.expanded, LabelRenderer = _a.LabelRenderer, RightSlot = _a.RightSlot, props = __rest(_a, ["expanded", "LabelRenderer", "RightSlot"]);
|
|
@@ -3,7 +3,7 @@ if (typeof document !== 'undefined') {
|
|
|
3
3
|
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
4
|
const style = document.createElement('style');
|
|
5
5
|
style.type = 'text/css'
|
|
6
|
-
style.innerHTML = `.ReadOnlyComplexAttribute-complexContainer--DybRT{margin-top:1px}.ReadOnlyComplexAttribute-labelContainer--x4Ikp{display:flex;min-height:18px
|
|
6
|
+
style.innerHTML = `.ReadOnlyComplexAttribute-complexContainer--DybRT{margin-top:1px}.ReadOnlyComplexAttribute-labelContainer--x4Ikp{display:flex;min-height:18px}.ReadOnlyComplexAttribute-label--BqM8F{display:inline-flex;font-size:13px;letter-spacing:normal;line-height:16px;margin-left:2px;white-space:break-spaces}.ReadOnlyComplexAttribute-spacer--raB-d{flex:1}.ReadOnlyComplexAttribute-ovFalse--9sySx{opacity:var(--mui-inactive-opacity)}`;
|
|
7
7
|
head.appendChild(style);
|
|
8
8
|
}
|
|
9
9
|
module.exports = styles;
|
|
@@ -1,10 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
|
-
import { AttributeType, SimpleAttributeValue } from '@reltio/mdm-sdk';
|
|
2
|
+
import { AttributeType, SimpleAttributeValue, OvDetails } from '@reltio/mdm-sdk';
|
|
3
3
|
type Props = {
|
|
4
4
|
className?: string;
|
|
5
5
|
attributeValue: SimpleAttributeValue;
|
|
6
6
|
attributeType: AttributeType;
|
|
7
7
|
inlined?: boolean;
|
|
8
|
+
FallbackSlot?: ({ ovDetails }: {
|
|
9
|
+
ovDetails: OvDetails;
|
|
10
|
+
}) => React.ReactElement;
|
|
8
11
|
};
|
|
9
|
-
export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined }: Props) => React.JSX.Element;
|
|
12
|
+
export declare const SimpleAttribute: ({ className, attributeType, attributeValue: rawAttributeValue, inlined, FallbackSlot }: Props) => React.JSX.Element;
|
|
10
13
|
export {};
|
|
@@ -31,6 +31,7 @@ var react_1 = __importStar(require("react"));
|
|
|
31
31
|
var mdm_sdk_1 = require("@reltio/mdm-sdk");
|
|
32
32
|
var classnames_1 = __importDefault(require("classnames"));
|
|
33
33
|
var useMaskedAttribute_1 = require("../hooks/useMaskedAttribute");
|
|
34
|
+
var useCssVariableStyles_1 = require("../hooks/useCssVariableStyles");
|
|
34
35
|
var classnames_2 = require("../constants/classnames");
|
|
35
36
|
var HistoryAppearanceContext_1 = require("../contexts/HistoryAppearanceContext");
|
|
36
37
|
var HighlightedValuesContext_1 = require("../contexts/HighlightedValuesContext");
|
|
@@ -38,15 +39,21 @@ var CommentsContainer_1 = require("../CommentsContainer");
|
|
|
38
39
|
var DataTypeValue_1 = require("../DataTypeValue");
|
|
39
40
|
var PivotingTooltip_1 = require("../PivotingTooltip");
|
|
40
41
|
var MaskingSwitcher_1 = require("../MaskingSwitcher");
|
|
41
|
-
var
|
|
42
|
+
var SimpleAttribute_module_css_1 = __importDefault(require("./SimpleAttribute.module.css"));
|
|
42
43
|
var SimpleAttribute = function (_a) {
|
|
43
44
|
var _b, _c, _d, _e, _f;
|
|
44
|
-
var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined;
|
|
45
|
+
var className = _a.className, _g = _a.attributeType, attributeType = _g === void 0 ? null : _g, rawAttributeValue = _a.attributeValue, inlined = _a.inlined, FallbackSlot = _a.FallbackSlot;
|
|
45
46
|
var _h = (0, useMaskedAttribute_1.useMaskedAttribute)({
|
|
46
47
|
attributeType: attributeType,
|
|
47
48
|
attributeValue: rawAttributeValue
|
|
48
49
|
}), isUnmaskingNeeded = _h.isUnmaskingNeeded, isMasked = _h.isMasked, toggleMasking = _h.toggleMasking, attributeValue = _h.attributeValue, isUnmasking = _h.isUnmasking;
|
|
49
|
-
var
|
|
50
|
+
var variableStyles = (0, useCssVariableStyles_1.useCssVariableStyles)({
|
|
51
|
+
'--history-insert-color': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.insertAttribute].color,
|
|
52
|
+
'--history-update-backgroundColor': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.updateAttribute].backgroundColor,
|
|
53
|
+
'--history-update-color': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.updateAttribute].color,
|
|
54
|
+
'--history-delete-backgroundColor': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.deleteAttribute].backgroundColor,
|
|
55
|
+
'--history-delete-color': mdm_sdk_1.historyPalettes[mdm_sdk_1.HistoryOperations.deleteAttribute].color
|
|
56
|
+
});
|
|
50
57
|
var _j = (0, react_1.useContext)(HighlightedValuesContext_1.HighlightedValuesContext), _k = _j.highlightedValuesUris, highlightedValuesUris = _k === void 0 ? [] : _k, highlightedClassName = _j.highlightedClassName;
|
|
51
58
|
var appearance = (0, react_1.useContext)(HistoryAppearanceContext_1.HistoryDiffContext).appearance;
|
|
52
59
|
var attributeAppearance = (0, mdm_sdk_1.getHistoryAppearanceByUri)(attributeValue.uri, appearance);
|
|
@@ -54,22 +61,23 @@ var SimpleAttribute = function (_a) {
|
|
|
54
61
|
var dataTypeValue = (0, react_1.useMemo)(function () { return (react_1.default.createElement(DataTypeValue_1.DataTypeValue, { value: (0, mdm_sdk_1.getAttributeValue)(attributeValue), dataTypeDefinition: (0, mdm_sdk_1.getAttrDataTypeDefinition)(attributeType) })); }, [attributeValue, attributeType]);
|
|
55
62
|
var objectType = (0, mdm_sdk_1.getObjectTypeByAttributeUri)(attributeValue.uri);
|
|
56
63
|
var unmaskingControl = isUnmaskingNeeded && (react_1.default.createElement(MaskingSwitcher_1.MaskingSwitcher, { isMasked: isMasked, onToggleMasking: toggleMasking, isUnmasking: isUnmasking }));
|
|
57
|
-
return inlined || historyClassName ? (react_1.default.createElement("div", { className: (0, classnames_1.default)(className, (_b = {},
|
|
64
|
+
return inlined || historyClassName ? (react_1.default.createElement("div", { style: variableStyles, className: (0, classnames_1.default)(className, (_b = {},
|
|
58
65
|
_b[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
|
|
59
66
|
_b)) },
|
|
60
|
-
react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: (0, classnames_1.default)((_c = {}, _c[
|
|
61
|
-
react_1.default.createElement("span", { className: (0, classnames_1.default)(
|
|
62
|
-
_d[
|
|
67
|
+
react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri, className: (0, classnames_1.default)((_c = {}, _c[SimpleAttribute_module_css_1.default.multilineAttribute] = !inlined, _c)) },
|
|
68
|
+
react_1.default.createElement("span", { className: (0, classnames_1.default)(SimpleAttribute_module_css_1.default.attributeValue, SimpleAttribute_module_css_1.default[historyClassName], (_d = {},
|
|
69
|
+
_d[SimpleAttribute_module_css_1.default.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue),
|
|
63
70
|
_d)), "data-reltio-id": "reltio-attribute-value" },
|
|
64
71
|
dataTypeValue,
|
|
65
|
-
unmaskingControl)))) : (react_1.default.createElement("div", { "data-reltio-id": "comments-container-visibility-area", className: (0, classnames_1.default)(className,
|
|
72
|
+
unmaskingControl)))) : (react_1.default.createElement("div", { "data-reltio-id": "comments-container-visibility-area", style: variableStyles, className: (0, classnames_1.default)(className, SimpleAttribute_module_css_1.default.root, classnames_2.COMMENTS_CONTAINER_VISIBILITY_AREA, (_e = {},
|
|
66
73
|
_e[highlightedClassName] = highlightedValuesUris.includes(attributeValue.uri),
|
|
67
74
|
_e)) },
|
|
68
75
|
react_1.default.createElement(PivotingTooltip_1.PivotingTooltip, { value: attributeValue, attributeType: attributeType, key: attributeValue.uri },
|
|
69
|
-
react_1.default.createElement("span", { className: (0, classnames_1.default)(
|
|
76
|
+
react_1.default.createElement("span", { className: (0, classnames_1.default)(SimpleAttribute_module_css_1.default.attributeValue, (_f = {}, _f[SimpleAttribute_module_css_1.default.ovFalse] = !(0, mdm_sdk_1.isOv)(attributeValue), _f)), "data-reltio-id": "reltio-attribute-value" },
|
|
70
77
|
dataTypeValue,
|
|
71
|
-
unmaskingControl
|
|
72
|
-
|
|
78
|
+
unmaskingControl,
|
|
79
|
+
FallbackSlot && react_1.default.createElement(FallbackSlot, { ovDetails: attributeValue === null || attributeValue === void 0 ? void 0 : attributeValue.ovDetails }))),
|
|
80
|
+
react_1.default.createElement(CommentsContainer_1.CommentsContainer, { className: SimpleAttribute_module_css_1.default.commentsContainer, uri: attributeValue.uri, relatedObjectUris: (0, mdm_sdk_1.createRelatedObjectUris)(objectType, {
|
|
73
81
|
uri: attributeValue.uri
|
|
74
82
|
}), objectType: objectType })));
|
|
75
83
|
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const styles = {"root":"SimpleAttribute-root--msTML","commentsContainer":"SimpleAttribute-commentsContainer--kT8wH","attributeValue":"SimpleAttribute-attributeValue--5ESxH","updateAttribute":"SimpleAttribute-updateAttribute--HLqXI","insertAttribute":"SimpleAttribute-insertAttribute--3A5Xi","deleteAttribute":"SimpleAttribute-deleteAttribute--ftsz5","multilineAttribute":"SimpleAttribute-multilineAttribute--xY9V-","ovFalse":"SimpleAttribute-ovFalse--n4JcN"};
|
|
2
|
+
if (typeof document !== 'undefined') {
|
|
3
|
+
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
|
+
const style = document.createElement('style');
|
|
5
|
+
style.type = 'text/css'
|
|
6
|
+
style.innerHTML = `.SimpleAttribute-root--msTML{align-items:start;display:flex;justify-content:space-between}.SimpleAttribute-commentsContainer--kT8wH{height:15px;margin-right:-4px}.SimpleAttribute-attributeValue--5ESxH{vertical-align:middle;white-space:break-spaces;word-break:break-all}.SimpleAttribute-updateAttribute--HLqXI{background-color:var(--history-update-backgroundColor);color:var(--history-update-color);margin-left:-4px;padding:0 4px;width:fit-content}.SimpleAttribute-updateAttribute--HLqXI>a{color:var(--history-update-color)}.SimpleAttribute-insertAttribute--3A5Xi{color:var(--history-insert-color);width:fit-content}.SimpleAttribute-insertAttribute--3A5Xi>a{color:var(--history-insert-color)}.SimpleAttribute-deleteAttribute--ftsz5{background-color:var(--history-delete-backgroundColor);color:var(--history-delete-color);margin-left:-4px;padding:0 4px;text-decoration:line-through;width:fit-content}.SimpleAttribute-deleteAttribute--ftsz5>a{color:var(--history-delete-color)}.SimpleAttribute-multilineAttribute--xY9V-{width:fit-content}.SimpleAttribute-ovFalse--n4JcN{opacity:var(--mui-inactive-opacity)}`;
|
|
7
|
+
head.appendChild(style);
|
|
8
|
+
}
|
|
9
|
+
module.exports = styles;
|
|
@@ -61,7 +61,6 @@ var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
|
61
61
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
62
62
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
63
63
|
};
|
|
64
|
-
var _a, _b;
|
|
65
64
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
66
65
|
exports.VerificationButton = exports.VerificationButtonSize = void 0;
|
|
67
66
|
var react_1 = __importStar(require("react"));
|
|
@@ -69,29 +68,22 @@ var ramda_1 = require("ramda");
|
|
|
69
68
|
var classnames_1 = __importDefault(require("classnames"));
|
|
70
69
|
var react_context_selector_1 = require("@fluentui/react-context-selector");
|
|
71
70
|
var CircularProgress_1 = __importDefault(require("@mui/material/CircularProgress"));
|
|
71
|
+
var Button_1 = __importDefault(require("@mui/material/Button"));
|
|
72
|
+
var CheckCircleOutline_1 = __importDefault(require("@mui/icons-material/CheckCircleOutline"));
|
|
72
73
|
var ui_i18n_1 = __importDefault(require("ui-i18n"));
|
|
73
|
-
var VerifyAllIcon_1 = __importDefault(require("../icons/VerifyAllIcon"));
|
|
74
74
|
var useSafePromise_1 = require("../hooks/useSafePromise");
|
|
75
75
|
var mdm_sdk_1 = require("@reltio/mdm-sdk");
|
|
76
76
|
var MdmModuleContext_1 = require("../contexts/MdmModuleContext");
|
|
77
77
|
var AttributesVerificationContext_1 = require("../contexts/AttributesVerificationContext");
|
|
78
78
|
var errors_1 = require("../helpers/errors");
|
|
79
|
-
var
|
|
80
|
-
var SmallIconButton_1 = require("../SmallIconButton");
|
|
79
|
+
var withTooltip_1 = require("../HOCs/withTooltip");
|
|
81
80
|
var VerificationButton_module_css_1 = __importDefault(require("./VerificationButton.module.css"));
|
|
81
|
+
var ButtonWithTooltip = (0, withTooltip_1.withTooltip)(Button_1.default);
|
|
82
82
|
var VerificationButtonSize;
|
|
83
83
|
(function (VerificationButtonSize) {
|
|
84
84
|
VerificationButtonSize["SMALL"] = "small";
|
|
85
85
|
VerificationButtonSize["MEDIUM"] = "medium";
|
|
86
86
|
})(VerificationButtonSize || (exports.VerificationButtonSize = VerificationButtonSize = {}));
|
|
87
|
-
var ICON_SIZES = (_a = {},
|
|
88
|
-
_a[VerificationButtonSize.SMALL] = 16,
|
|
89
|
-
_a[VerificationButtonSize.MEDIUM] = 24,
|
|
90
|
-
_a);
|
|
91
|
-
var BUTTON_SIZES = (_b = {},
|
|
92
|
-
_b[VerificationButtonSize.SMALL] = 20,
|
|
93
|
-
_b[VerificationButtonSize.MEDIUM] = 36,
|
|
94
|
-
_b);
|
|
95
87
|
var getTooltipTitle = function (verificationTypes) {
|
|
96
88
|
if (verificationTypes.includes(mdm_sdk_1.InputVerificationAttribute.Email) &&
|
|
97
89
|
verificationTypes.includes(mdm_sdk_1.InputVerificationAttribute.Phone)) {
|
|
@@ -107,10 +99,6 @@ var getTooltipTitle = function (verificationTypes) {
|
|
|
107
99
|
};
|
|
108
100
|
var VerificationButton = function (_a) {
|
|
109
101
|
var attributeType = _a.attributeType, _b = _a.size, size = _b === void 0 ? VerificationButtonSize.SMALL : _b, className = _a.className;
|
|
110
|
-
var variableStyles = (0, useCssVariableStyles_1.useCssVariableStyles)({
|
|
111
|
-
'--icon-size': ICON_SIZES[size] + 'px',
|
|
112
|
-
'--button-size': BUTTON_SIZES[size] + 'px'
|
|
113
|
-
});
|
|
114
102
|
var _c = (0, react_1.useState)(false), loading = _c[0], setLoading = _c[1];
|
|
115
103
|
var entityUri = (0, MdmModuleContext_1.useMdmEntityUri)();
|
|
116
104
|
var updateEntityAttributeValues = (0, MdmModuleContext_1.useMdmAction)('updateEntityAttributeValues');
|
|
@@ -175,6 +163,10 @@ var VerificationButton = function (_a) {
|
|
|
175
163
|
return allVerificationTypes;
|
|
176
164
|
}, [verificationType, allVerificationTypes]);
|
|
177
165
|
var tooltipTitle = getTooltipTitle(currentVerificationTypes);
|
|
178
|
-
|
|
166
|
+
var buttonText = attributeType ? ui_i18n_1.default.text('Verify') : ui_i18n_1.default.text('Verify contact details');
|
|
167
|
+
var startIcon = loading ? (react_1.default.createElement(CircularProgress_1.default, { size: size === VerificationButtonSize.SMALL ? 18 : 20 })) : (react_1.default.createElement(CheckCircleOutline_1.default, null));
|
|
168
|
+
var tooltipText = tooltipTitle || buttonText;
|
|
169
|
+
return (react_1.default.createElement("div", { className: VerificationButton_module_css_1.default.root },
|
|
170
|
+
react_1.default.createElement(ButtonWithTooltip, { variant: "text", color: "primary", startIcon: startIcon, onClick: handleClick, disabled: loading, className: (0, classnames_1.default)(VerificationButton_module_css_1.default.button, className), classes: { startIcon: VerificationButton_module_css_1.default.startIcon }, size: size === VerificationButtonSize.SMALL ? 'small' : 'medium', tooltipTitle: tooltipText, tooltipPlacement: "bottom" }, buttonText)));
|
|
179
171
|
};
|
|
180
172
|
exports.VerificationButton = VerificationButton;
|
|
@@ -1,9 +1,9 @@
|
|
|
1
|
-
const styles = {"root":"VerificationButton-root--0piRf","
|
|
1
|
+
const styles = {"root":"VerificationButton-root--0piRf","startIcon":"VerificationButton-startIcon--Txlkd"};
|
|
2
2
|
if (typeof document !== 'undefined') {
|
|
3
3
|
const head = document.head || document.getElementsByTagName('head')[0]
|
|
4
4
|
const style = document.createElement('style');
|
|
5
5
|
style.type = 'text/css'
|
|
6
|
-
style.innerHTML = `.VerificationButton-root--0piRf{display:inline-block;margin-left:
|
|
6
|
+
style.innerHTML = `.VerificationButton-root--0piRf{display:inline-block;margin-left:4px}.VerificationButton-root--0piRf .VerificationButton-startIcon--Txlkd{margin-right:4px}`;
|
|
7
7
|
head.appendChild(style);
|
|
8
8
|
}
|
|
9
9
|
module.exports = styles;
|
|
@@ -53,6 +53,7 @@ var helpers_1 = require("./helpers");
|
|
|
53
53
|
var ConfirmEditIgnoredDialog_1 = require("./components/ConfirmEditIgnoredDialog");
|
|
54
54
|
var CommonRowCellRenderer_1 = require("./components/CommonRowCellRenderer");
|
|
55
55
|
var LazyRenderer_1 = require("../../../LazyRenderer");
|
|
56
|
+
var SyncedValueHeightsContext_1 = require("../contexts/SyncedValueHeightsContext");
|
|
56
57
|
var styles_1 = require("./styles");
|
|
57
58
|
var DEFAULT_ROW_HEIGHT = 68;
|
|
58
59
|
var getIdFromRowValue = function (rowValue) { return rowValue.ovValues.attributeType.uri; };
|
|
@@ -147,7 +148,8 @@ var AttributesTable = function (_a) {
|
|
|
147
148
|
react_1.default.createElement(ColumnsSettings_1.ColumnsSettings, { columnsData: helpers_1.COLUMNS_DATA, selectedColumns: visibleColumns, onChangeColumns: onChangeVisibleColumns })),
|
|
148
149
|
react_1.default.createElement("div", { className: styles.tableContent },
|
|
149
150
|
isLoading && react_1.default.createElement(LinearLoadIndicator_1.LinearLoadIndicator, null),
|
|
150
|
-
react_1.default.createElement(
|
|
151
|
+
react_1.default.createElement(SyncedValueHeightsContext_1.SyncedValueHeightsProvider, null,
|
|
152
|
+
react_1.default.createElement(BasicTable_1.BasicTable, { ref: tableRef, fixFirstColumn: true, headRowHeight: 48, defaultColumnWidth: 250, defaultColumnMinWidth: 200, columnsData: visibleColumnsData, dndRowReorderingEnabled: false, dndRowReorderingHandler: handleReorderAttributeTypes, getIdFromRowValue: getIdFromRowValue, rowsData: rowsData, onScroll: debouncedNotifyLazyRenderer, renderRowCell: renderRowCell, getRowCellHeight: getRowCellHeight, context: tableContext }))),
|
|
151
153
|
react_1.default.createElement(ConfirmDeleteDialog_1.ConfirmDeleteDialog, { open: !!pendingDeletion, onClose: function () { return setPendingDeletion(null); }, onConfirm: handleDelete }),
|
|
152
154
|
react_1.default.createElement(ConfirmEditIgnoredDialog_1.ConfirmEditIgnoredDialog, { open: !!pendingIgnoredEditing, onClose: function () { return setPendingIgnoredEditing(null); }, onConfirmEditWithIgnore: function () { return pendingIgnoredEditing && onEdit(pendingIgnoredEditing); }, onConfirmEditWithoutIgnore: function () {
|
|
153
155
|
if (pendingIgnoredEditing)
|
|
@@ -1,5 +1,8 @@
|
|
|
1
1
|
import { Entity, Metadata } from '@reltio/mdm-sdk';
|
|
2
|
-
export declare const createEntity: (
|
|
2
|
+
export declare const createEntity: ({ withAppliedSurvivorshipRules }?: {
|
|
3
|
+
withAppliedSurvivorshipRules?: boolean;
|
|
4
|
+
}) => Entity;
|
|
5
|
+
export declare const createEntityWithoutAppliedRule: () => Entity;
|
|
3
6
|
export declare const createMetadata: () => Metadata;
|
|
4
7
|
export declare const selectedAttributeTypes: ({
|
|
5
8
|
description: string;
|