@reltio/components 1.4.1510 → 1.4.1512

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (67) hide show
  1. package/cjs/components/ProfilesList/styles.d.ts +1 -1
  2. package/cjs/components/RelationEditor/RelationEditor.js +4 -4
  3. package/cjs/components/attributes/editMode/AttributesFactory/Attribute.d.ts +6 -1
  4. package/cjs/components/attributes/editMode/AttributesFactory/Attribute.js +40 -4
  5. package/cjs/components/attributes/editMode/AttributesList/AttributesList.d.ts +3 -39
  6. package/cjs/components/attributes/editMode/AttributesList/AttributesList.js +10 -3
  7. package/cjs/components/attributes/editMode/AttributesPager/AttributeRenderer.d.ts +9 -7
  8. package/cjs/components/attributes/editMode/AttributesPager/AttributeRenderer.js +8 -12
  9. package/cjs/components/attributes/editMode/AttributesPager/AttributesPager.d.ts +38 -2
  10. package/cjs/components/attributes/editMode/AttributesPager/AttributesPager.js +19 -28
  11. package/cjs/components/attributes/editMode/AttributesPager/ImageLineRenderer.d.ts +4 -2
  12. package/cjs/components/attributes/editMode/AttributesPager/ImageLineRenderer.js +5 -2
  13. package/cjs/components/attributes/editMode/AttributesPager/SpecialRenderer.d.ts +3 -1
  14. package/cjs/components/attributes/editMode/AttributesPager/SpecialRenderer.js +6 -3
  15. package/cjs/components/attributes/editMode/AttributesPager/index.d.ts +4 -1
  16. package/cjs/components/attributes/editMode/ComplexAttribute/ComplexAttribute.js +5 -4
  17. package/cjs/components/attributes/editMode/ReferenceAttribute/ReferenceAttribute.js +3 -3
  18. package/cjs/components/attributes/editMode/SimpleAttributeEditor/SimpleAttributeEditor.js +3 -3
  19. package/cjs/components/attributes/editMode/hooks/useScrollToAttribute/styles.d.ts +1 -0
  20. package/cjs/components/attributes/editMode/hooks/useScrollToAttribute/styles.js +38 -0
  21. package/cjs/components/attributes/editMode/hooks/useScrollToAttribute/useScrollToAttribute.d.ts +8 -0
  22. package/cjs/components/attributes/editMode/hooks/useScrollToAttribute/useScrollToAttribute.js +17 -0
  23. package/cjs/components/workflow/helpers/errors.d.ts +3 -2
  24. package/cjs/components/workflow/helpers/errors.js +15 -9
  25. package/cjs/components/workflow/hooks/useChangeRequest.js +2 -2
  26. package/cjs/contexts/ScrollToElementContext/index.d.ts +20 -0
  27. package/cjs/contexts/ScrollToElementContext/index.js +73 -0
  28. package/cjs/contexts/index.d.ts +1 -1
  29. package/cjs/contexts/index.js +7 -4
  30. package/cjs/hooks/useScrollToAttributeError/useScrollToAttributeError.d.ts +2 -2
  31. package/cjs/hooks/useScrollToAttributeError/useScrollToAttributeError.js +2 -2
  32. package/esm/components/ProfilesList/styles.d.ts +1 -1
  33. package/esm/components/RelationEditor/RelationEditor.js +5 -5
  34. package/esm/components/attributes/editMode/AttributesFactory/Attribute.d.ts +6 -1
  35. package/esm/components/attributes/editMode/AttributesFactory/Attribute.js +17 -4
  36. package/esm/components/attributes/editMode/AttributesList/AttributesList.d.ts +3 -39
  37. package/esm/components/attributes/editMode/AttributesList/AttributesList.js +12 -5
  38. package/esm/components/attributes/editMode/AttributesPager/AttributeRenderer.d.ts +9 -7
  39. package/esm/components/attributes/editMode/AttributesPager/AttributeRenderer.js +10 -14
  40. package/esm/components/attributes/editMode/AttributesPager/AttributesPager.d.ts +38 -2
  41. package/esm/components/attributes/editMode/AttributesPager/AttributesPager.js +20 -6
  42. package/esm/components/attributes/editMode/AttributesPager/ImageLineRenderer.d.ts +4 -2
  43. package/esm/components/attributes/editMode/AttributesPager/ImageLineRenderer.js +5 -2
  44. package/esm/components/attributes/editMode/AttributesPager/SpecialRenderer.d.ts +3 -1
  45. package/esm/components/attributes/editMode/AttributesPager/SpecialRenderer.js +6 -3
  46. package/esm/components/attributes/editMode/AttributesPager/index.d.ts +4 -1
  47. package/esm/components/attributes/editMode/ComplexAttribute/ComplexAttribute.js +6 -5
  48. package/esm/components/attributes/editMode/ReferenceAttribute/ReferenceAttribute.js +4 -4
  49. package/esm/components/attributes/editMode/SimpleAttributeEditor/SimpleAttributeEditor.js +4 -4
  50. package/esm/components/attributes/editMode/hooks/useScrollToAttribute/styles.d.ts +1 -0
  51. package/esm/components/attributes/editMode/hooks/useScrollToAttribute/styles.js +35 -0
  52. package/esm/components/attributes/editMode/hooks/useScrollToAttribute/useScrollToAttribute.d.ts +8 -0
  53. package/esm/components/attributes/editMode/hooks/useScrollToAttribute/useScrollToAttribute.js +13 -0
  54. package/esm/components/workflow/helpers/errors.d.ts +3 -2
  55. package/esm/components/workflow/helpers/errors.js +13 -8
  56. package/esm/components/workflow/hooks/useChangeRequest.js +3 -3
  57. package/esm/contexts/ScrollToElementContext/index.d.ts +20 -0
  58. package/esm/contexts/ScrollToElementContext/index.js +44 -0
  59. package/esm/contexts/index.d.ts +1 -1
  60. package/esm/contexts/index.js +1 -1
  61. package/esm/hooks/useScrollToAttributeError/useScrollToAttributeError.d.ts +2 -2
  62. package/esm/hooks/useScrollToAttributeError/useScrollToAttributeError.js +2 -2
  63. package/package.json +3 -3
  64. package/cjs/contexts/ScrollToErrorContext/index.d.ts +0 -13
  65. package/cjs/contexts/ScrollToErrorContext/index.js +0 -48
  66. package/esm/contexts/ScrollToErrorContext/index.d.ts +0 -13
  67. package/esm/contexts/ScrollToErrorContext/index.js +0 -21
@@ -1,13 +1,16 @@
1
1
  import React from 'react';
2
+ import classnames from 'classnames';
2
3
  import Title from '../../../Title/Title';
3
4
  import DescriptionIcon from '../../DescriptionIcon';
4
5
  import ImageAttributesLine from '../ImageAttributesLine';
6
+ import { useScrollToAttribute } from '../hooks/useScrollToAttribute/useScrollToAttribute';
5
7
  import { useStyles } from './styles';
6
8
  export var ImageLineRenderer = function (_a) {
7
- var attributeType = _a.attributeType, attributeValues = _a.attributeValues, paging = _a.paging, parentUri = _a.parentUri, showNonOv = _a.showNonOv, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues;
9
+ var attributeType = _a.attributeType, attributeValues = _a.attributeValues, paging = _a.paging, parentUri = _a.parentUri, showNonOv = _a.showNonOv, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, requestNextPageOfAttributeValues = _a.requestNextPageOfAttributeValues, highlightedAttribute = _a.highlightedAttribute;
8
10
  var styles = useStyles();
9
11
  var label = attributeType.label, description = attributeType.description;
10
- return (React.createElement("div", { className: styles.wrapper },
12
+ var _b = useScrollToAttribute(highlightedAttribute), ref = _b.ref, highlightedClassName = _b.highlightedClassName;
13
+ return (React.createElement("div", { ref: ref, className: classnames(styles.wrapper, highlightedClassName) },
11
14
  React.createElement("div", { className: styles.titleWrapper },
12
15
  React.createElement(Title, { className: styles.title, label: label, "data-reltio-id": "reltio-attribute-label" }),
13
16
  React.createElement(DescriptionIcon, { className: styles.description, description: description })),
@@ -1,5 +1,6 @@
1
1
  import React from 'react';
2
2
  import { AttributeType, Mode, AttributeItem } from '@reltio/mdm-sdk';
3
+ import { ScrollToElementContext } from '../../../../contexts';
3
4
  declare type Props = {
4
5
  values: string[] | number[];
5
6
  attributeType: AttributeType;
@@ -11,7 +12,8 @@ declare type Props = {
11
12
  showEmptyEditors?: boolean;
12
13
  hasDeletions?: boolean;
13
14
  setHasDeletions?: (attrTypeUri: string, value: boolean) => void;
15
+ highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
14
16
  };
15
- export declare const SpecialRenderer: ({ values, attributeType, parentUri, mode, errorMessage, onDeleteAttribute, onChangeAttribute, showEmptyEditors, hasDeletions: hasDeletionsProp, setHasDeletions, ...otherProps }: Props) => JSX.Element;
17
+ export declare const SpecialRenderer: ({ values, attributeType, parentUri, mode, errorMessage, onDeleteAttribute, onChangeAttribute, showEmptyEditors, hasDeletions: hasDeletionsProp, setHasDeletions, highlightedAttribute, ...otherProps }: Props) => JSX.Element;
16
18
  declare const _default: React.ComponentType<Props> | ((props: any) => JSX.Element);
17
19
  export default _default;
@@ -22,6 +22,7 @@ var __rest = (this && this.__rest) || function (s, e) {
22
22
  };
23
23
  import React, { useCallback, useRef, useState } from 'react';
24
24
  import { createNewAttribute, EntityAttrTypes, isEditableMode as checkIsEditableMode, isEmptyValue, isActivenessAttrType } from '@reltio/mdm-sdk';
25
+ import classnames from 'classnames';
25
26
  import { pipe, T } from 'ramda';
26
27
  import Box from '@material-ui/core/Box';
27
28
  import Title from '../../../Title/Title';
@@ -33,8 +34,9 @@ import Tags from '../Tags';
33
34
  import { useStyles } from './styles';
34
35
  import { HasDeletionsContext } from '../contexts/HasDeletionsContext';
35
36
  import { withContext } from '../../../../HOCs';
37
+ import { useScrollToAttribute } from '../hooks/useScrollToAttribute/useScrollToAttribute';
36
38
  export var SpecialRenderer = function (_a) {
37
- var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, showEmptyEditors = _a.showEmptyEditors, hasDeletionsProp = _a.hasDeletions, setHasDeletions = _a.setHasDeletions, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage", "onDeleteAttribute", "onChangeAttribute", "showEmptyEditors", "hasDeletions", "setHasDeletions"]);
39
+ var values = _a.values, attributeType = _a.attributeType, parentUri = _a.parentUri, mode = _a.mode, errorMessage = _a.errorMessage, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, showEmptyEditors = _a.showEmptyEditors, hasDeletionsProp = _a.hasDeletions, setHasDeletions = _a.setHasDeletions, highlightedAttribute = _a.highlightedAttribute, otherProps = __rest(_a, ["values", "attributeType", "parentUri", "mode", "errorMessage", "onDeleteAttribute", "onChangeAttribute", "showEmptyEditors", "hasDeletions", "setHasDeletions", "highlightedAttribute"]);
38
40
  var styles = useStyles();
39
41
  var label = attributeType.label, isRequired = attributeType.required, cardinality = attributeType.cardinality;
40
42
  var isEditableMode = checkIsEditableMode(mode);
@@ -55,6 +57,7 @@ export var SpecialRenderer = function (_a) {
55
57
  parentUri: parentUri,
56
58
  attributeType: attributeType
57
59
  }));
60
+ var _c = useScrollToAttribute(highlightedAttribute), ref = _c.ref, highlightedClassName = _c.highlightedClassName;
58
61
  var renderValue = function () {
59
62
  switch (attributeType.uri) {
60
63
  case EntityAttrTypes.tags.uri:
@@ -71,8 +74,8 @@ export var SpecialRenderer = function (_a) {
71
74
  if (isActivenessAttrType(attributeType) && isEmptyValues && !showEmpty) {
72
75
  return null;
73
76
  }
74
- return (React.createElement(Box, { className: styles.wrapper },
75
- React.createElement(Title, { label: label, isRequired: isRequired, className: styles.title, "data-reltio-id": "reltio-attribute-label" }),
77
+ return (React.createElement("div", { ref: ref, className: classnames(highlightedClassName, styles.wrapper) },
78
+ React.createElement(Title, { label: label, isRequired: isRequired, className: classnames(styles.title, styles.titleWrapper), "data-reltio-id": "reltio-attribute-label" }),
76
79
  isEditableMode && React.createElement(Cardinality, { cardinality: cardinality }),
77
80
  isEditableMode && React.createElement(ErrorMessage, { message: errorMessage }),
78
81
  React.createElement(Box, { className: styles.attributesWrapper }, renderValue())));
@@ -3,6 +3,7 @@ import { RequestNextPageOfAttributeValuesPayload } from '@reltio/mdm-module';
3
3
  import { AttributeError, AttributeType, Crosswalk, ImageAttributeValue, Mode, NestedAttributeValue, Paging, ReferenceAttributeValue, SimpleAttributeValue, AttributeItem } from '@reltio/mdm-sdk';
4
4
  import AttributesPager from './AttributesPager';
5
5
  import CardinalityMessage from './CardinalityMessage';
6
+ import { ScrollToElementContext } from '../../../../contexts';
6
7
  declare type StateProps = {
7
8
  errorMessage: string;
8
9
  errors: AttributeError[];
@@ -27,8 +28,10 @@ declare type OwnProps = {
27
28
  onDeleteAttribute: (param: AttributeItem) => void;
28
29
  onChangeAttribute: (param: AttributeItem) => void;
29
30
  additionalControlsRenderer?: (props: any) => JSX.Element;
31
+ highlightedError?: React.ContextType<typeof ScrollToElementContext>;
32
+ highlightedAttribute?: React.ContextType<typeof ScrollToElementContext>;
30
33
  };
31
34
  export declare type AttributePagerProps = StateProps & DispatchProps & OwnProps;
32
35
  export { AttributesPager, CardinalityMessage };
33
- declare const _default: import("react-redux").ConnectedComponent<import("react").MemoExoticComponent<({ values, attributeType, mode, crosswalks, drawLines, paging, parentUri, errors, errorMessage, max, showEmptyEditors, showNonOv, onAddAttributes, onDeleteAttribute, onChangeAttribute, onDeactivateError, additionalControlsRenderer, requestNextPageOfAttributeValues }: AttributePagerProps) => JSX.Element>, import("react-redux").Omit<StateProps & DispatchProps & OwnProps, "max" | "errorMessage" | "errors" | "requestNextPageOfAttributeValues" | "onDeactivateError"> & OwnProps>;
36
+ declare const _default: import("react-redux").ConnectedComponent<import("react").ComponentType<StateProps & DispatchProps & OwnProps> | ((props: any) => JSX.Element), import("react-redux").Omit<any, "max" | "errorMessage" | "errors" | "requestNextPageOfAttributeValues" | "onDeactivateError"> & OwnProps>;
34
37
  export default _default;
@@ -23,7 +23,7 @@ import ArrowExpandButton from '../../../ArrowExpandButton/ArrowExpandButton';
23
23
  import ErrorWrapper from '../../../ErrorWrapper/ErrorWrapper';
24
24
  import AttributesList from '../AttributesList/AttributesList';
25
25
  import { withContext } from '../../../../HOCs';
26
- import { ScrollToErrorContext } from '../../../../contexts';
26
+ import { isHighlightedErrorType, ScrollToElementContext } from '../../../../contexts';
27
27
  import { useScrollToAttributeError } from '../../../../hooks';
28
28
  import { useStyles } from './styles';
29
29
  var ComplexAttribute = function (_a) {
@@ -89,11 +89,12 @@ var ComplexAttribute = function (_a) {
89
89
  expanded && (React.createElement(AttributesList, { parentAttributeType: attributeType, attrTypes: attributeTypesList, entity: attributeListEntity, showEmptyEditors: showEmptyEditors || isNew, drawLines: true, parentUri: uri, mode: mode, crosswalks: crosswalks, onAddAttributes: onAddAttributes, onChangeAttribute: onChangeAttribute, onDeleteAttribute: onDeleteAttribute, additionalControlsRenderer: additionalControlsRenderer, showNonOv: showNonOv }, children))));
90
90
  };
91
91
  ComplexAttribute.propTypes = __assign({ label: PropTypes.string, children: PropTypes.node, attributeTypesList: PropTypes.arrayOf(AttributeTypeType), attributeValue: PropTypes.oneOfType([NestedAttributeValueType, ReferenceAttributeValueType]), highlightedError: PropTypes.object, isHighlightedPath: PropTypes.bool }, ComplexAttributeType);
92
- export default withContext(ScrollToErrorContext, function (contextValue, _a) {
92
+ export default withContext(ScrollToElementContext, function (contextValue, _a) {
93
93
  var attributeValue = _a.attributeValue;
94
- var error = (contextValue || {}).error;
95
- var isHighlighted = (error === null || error === void 0 ? void 0 : error.uri) === attributeValue.uri;
96
- var isHighlightedPath = pipe(propOr([], 'path'), any(pathEq(['value', 'uri'], attributeValue.uri)))(error);
94
+ var _b = contextValue || {}, element = _b.element, type = _b.type;
95
+ var isError = isHighlightedErrorType(type);
96
+ var isHighlighted = isError && (element === null || element === void 0 ? void 0 : element.uri) === attributeValue.uri;
97
+ var isHighlightedPath = isError && pipe(propOr([], 'path'), any(pathEq(['value', 'uri'], attributeValue.uri)))(element);
97
98
  return {
98
99
  highlightedError: isHighlighted ? contextValue : null,
99
100
  isHighlightedPath: isHighlightedPath
@@ -29,7 +29,7 @@ import ComplexAttribute from '../ComplexAttribute/ComplexAttribute';
29
29
  import EntitySelector from '../EntitySelector/EntitySelector';
30
30
  import { ErrorWrapper } from '../../../index';
31
31
  import { withContext } from '../../../../HOCs';
32
- import { ScrollToErrorContext } from '../../../../contexts';
32
+ import { isHighlightedErrorType, ScrollToElementContext } from '../../../../contexts';
33
33
  import { useScrollToAttributeError } from '../../../../hooks';
34
34
  import { useStyles } from './styles';
35
35
  var ReferenceAttribute = function (props) {
@@ -121,9 +121,9 @@ var ReferenceAttribute = function (props) {
121
121
  _a)), entity: selectedEntity || {}, entityTypesUris: entityTypesUris, max: 20, globalSearchRequestOptions: globalSearchRequestOptions, mode: mode, isDisabled: !canChangeReferencedEntity, onChange: onChangeEntity, onCreate: canCreateReferencedEntity ? onCreateEntity : undefined, metadata: metadata, attributeTypesSelectionStrategy: newEntityAttrTypesSelectionStrategy })))));
122
122
  };
123
123
  ReferenceAttribute.propTypes = __assign(__assign({}, ReferenceAttributeType), { modifiedEntity: EntityType, metadata: MetadataType, globalSearchRequestOptions: PropTypes.object, onDeleteModifiedEntity: PropTypes.func, onUpdateModifiedEntity: PropTypes.func, onDeactivateError: PropTypes.func, highlightedError: PropTypes.object });
124
- export default withContext(ScrollToErrorContext, function (contextValue, _a) {
124
+ export default withContext(ScrollToElementContext, function (contextValue, _a) {
125
125
  var attributeValue = _a.attributeValue, attributeType = _a.attributeType;
126
- var error = (contextValue || {}).error;
127
- var isHighlighted = isAttributeTypeError(error, attributeValue.uri, attributeType.uri);
126
+ var _b = contextValue || {}, element = _b.element, type = _b.type;
127
+ var isHighlighted = isHighlightedErrorType(type) && isAttributeTypeError(element, attributeValue.uri, attributeType.uri);
128
128
  return { highlightedError: isHighlighted ? contextValue : null };
129
129
  }, ReferenceAttribute);
@@ -38,7 +38,7 @@ import { attributeValueToEditorValue, prepareChangeData } from './utils';
38
38
  import withAsyncMount from '../../../../HOCs/withAsyncMount/withAsyncMount';
39
39
  import { getDependentLookupEditorContext } from './selectors/getDependentLookupEditorContext';
40
40
  import { withContext } from '../../../../HOCs';
41
- import { ScrollToErrorContext, DependentLookupAutopopulationContext, ProfilePerspectiveViewContext } from '../../../../contexts';
41
+ import { isHighlightedErrorType, ScrollToElementContext, DependentLookupAutopopulationContext, ProfilePerspectiveViewContext } from '../../../../contexts';
42
42
  import { useScrollToAttributeError } from '../../../../hooks';
43
43
  import { useAutopopulationContextValue } from './useAutopopulationContextValue';
44
44
  import { useStyles } from './styles';
@@ -116,9 +116,9 @@ SimpleAttributeEditor.propTypes = {
116
116
  additionalControlsRenderer: PropTypes.func,
117
117
  highlightedError: PropTypes.object
118
118
  };
119
- export default withAsyncMount(withContext(ScrollToErrorContext, function (contextValue, _a) {
119
+ export default withAsyncMount(withContext(ScrollToElementContext, function (contextValue, _a) {
120
120
  var attributeValue = _a.attributeValue;
121
- var error = (contextValue || {}).error;
122
- var isHighlighted = (error === null || error === void 0 ? void 0 : error.uri) === attributeValue.uri;
121
+ var _b = contextValue || {}, element = _b.element, type = _b.type;
122
+ var isHighlighted = isHighlightedErrorType(type) && (element === null || element === void 0 ? void 0 : element.uri) === attributeValue.uri;
123
123
  return { highlightedError: isHighlighted ? contextValue : null };
124
124
  }, SimpleAttributeEditor), AsyncMountPlaceholder);
@@ -0,0 +1 @@
1
+ export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"@keyframes highlightAnimation" | "highlighted">;
@@ -0,0 +1,35 @@
1
+ var __assign = (this && this.__assign) || function () {
2
+ __assign = Object.assign || function(t) {
3
+ for (var s, i = 1, n = arguments.length; i < n; i++) {
4
+ s = arguments[i];
5
+ for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
6
+ t[p] = s[p];
7
+ }
8
+ return t;
9
+ };
10
+ return __assign.apply(this, arguments);
11
+ };
12
+ import { makeStyles } from '@material-ui/core/styles';
13
+ var highlightBeforeStyles = {
14
+ content: '""',
15
+ position: 'absolute',
16
+ left: '-1000px',
17
+ top: '-4px',
18
+ width: '5000px',
19
+ height: 'calc(100% + 8px)',
20
+ animationName: '$highlightAnimation',
21
+ animationDuration: '2s',
22
+ animationIterationCount: 1,
23
+ opacity: 0
24
+ };
25
+ export var useStyles = makeStyles(function () { return ({
26
+ '@keyframes highlightAnimation': {
27
+ '0%': { opacity: 0 },
28
+ '50%': { opacity: 1 },
29
+ '100%': { opacity: 0 }
30
+ },
31
+ highlighted: {
32
+ '&::before': __assign(__assign({}, highlightBeforeStyles), { background: 'rgba(228, 151, 0, 0.08)' }),
33
+ position: 'relative'
34
+ }
35
+ }); });
@@ -0,0 +1,8 @@
1
+ /// <reference types="react" />
2
+ export declare const useScrollToAttribute: (context: any) => {
3
+ ref: import("react").MutableRefObject<HTMLDivElement>;
4
+ highlightedClassName: string;
5
+ } | {
6
+ ref: import("react").MutableRefObject<HTMLDivElement>;
7
+ highlightedClassName?: undefined;
8
+ };
@@ -0,0 +1,13 @@
1
+ import { useEffect, useRef } from 'react';
2
+ import { useStyles } from './styles';
3
+ export var useScrollToAttribute = function (context) {
4
+ var styles = useStyles();
5
+ var ref = useRef(null);
6
+ var scrollIntoRef = (context || {}).scrollIntoRef;
7
+ useEffect(function () {
8
+ if (context) {
9
+ scrollIntoRef(ref);
10
+ }
11
+ }, [context, scrollIntoRef]);
12
+ return context ? { ref: ref, highlightedClassName: styles.highlighted } : { ref: ref };
13
+ };
@@ -1,2 +1,3 @@
1
- import { ApiError } from '@reltio/mdm-sdk';
2
- export declare const showWorkflowError: (error?: ApiError) => void;
1
+ import { ApiError, WorkflowApiError } from '@reltio/mdm-sdk';
2
+ export declare const showApiError: (error?: ApiError) => void;
3
+ export declare const showWorkflowError: (apiError?: WorkflowApiError) => void;
@@ -1,14 +1,19 @@
1
1
  import i18n from 'ui-i18n';
2
2
  import { ApiErrorCode } from '@reltio/mdm-sdk';
3
3
  import ErrorPopup from '../../ErrorPopup/ErrorPopup';
4
- export var showWorkflowError = function (error) {
4
+ export var showApiError = function (error) {
5
5
  if (error === void 0) { error = {}; }
6
- var errorMessage = error.errorMessage, errorCode = error.errorCode;
7
- if (errorCode !== ApiErrorCode.WORKFLOW_IS_NOT_REGISTERED_ERROR) {
8
- console.error(error); // eslint-disable-line
9
- ErrorPopup.addError({
10
- title: i18n.text('Error'),
11
- message: errorMessage || i18n.text('Something went wrong...')
12
- });
6
+ console.error(error); // eslint-disable-line
7
+ ErrorPopup.addError({
8
+ title: i18n.text('Error'),
9
+ message: error.errorMessage || i18n.text('Something went wrong...')
10
+ });
11
+ };
12
+ export var showWorkflowError = function (apiError) {
13
+ if (apiError === void 0) { apiError = {}; }
14
+ var error = apiError.error;
15
+ if ((error === null || error === void 0 ? void 0 : error.errorCode) === ApiErrorCode.WORKFLOW_IS_NOT_REGISTERED_ERROR) {
16
+ return;
13
17
  }
18
+ showApiError(error);
14
19
  };
@@ -14,7 +14,7 @@ import { flatten, has, isEmpty, map, partition, path, pipe, reduce, values } fro
14
14
  import { getDataChangeRequest, getEntitiesByUris } from '@reltio/mdm-sdk';
15
15
  import { useSafePromise } from '../../../hooks';
16
16
  import { concatEntityRelationsObjects, createEntityRelationsObjectByEntity, createEntityRelationsObjectByRelation, extractObjectsFromChangeRequest, getEntitiesObjects, getRelationsObjects } from '../helpers/dcrHelpers';
17
- import { showWorkflowError } from '../helpers/errors';
17
+ import { showApiError } from '../helpers/errors';
18
18
  export var useChangeRequest = function (dcrUri) {
19
19
  var _a = useState([]), groupedObjects = _a[0], setGroupedObjects = _a[1];
20
20
  var _b = useState(null), dcr = _b[0], setDcr = _b[1];
@@ -45,10 +45,10 @@ export var useChangeRequest = function (dcrUri) {
45
45
  relationsObjectsWithRequestedEntities
46
46
  ]);
47
47
  })
48
- .catch(showWorkflowError);
48
+ .catch(showApiError);
49
49
  setDcr(dcr);
50
50
  })
51
- .catch(showWorkflowError);
51
+ .catch(showApiError);
52
52
  }, [dcrUri, requestEntities]);
53
53
  return { dcr: dcr, groupedObjects: groupedObjects };
54
54
  };
@@ -0,0 +1,20 @@
1
+ import React from 'react';
2
+ export declare enum ScrollType {
3
+ Error = "Error",
4
+ NewAttribute = "NewAttribute"
5
+ }
6
+ declare type ScrollToElementContextProps = {
7
+ element: unknown;
8
+ type: ScrollType;
9
+ highlightError?: (element: unknown) => void;
10
+ highlightAttribute?: (element: unknown) => void;
11
+ scrollIntoRef: (ref: React.MutableRefObject<HTMLDivElement>) => void;
12
+ };
13
+ export declare const isHighlightedErrorType: (type: ScrollType) => boolean;
14
+ export declare const isHighlightedAttributeType: (type: ScrollType) => boolean;
15
+ export declare const ScrollToElementContext: React.Context<ScrollToElementContextProps>;
16
+ declare type Props = {
17
+ children: React.ReactNode;
18
+ };
19
+ export declare const ScrollToElementProvider: ({ children }: Props) => JSX.Element;
20
+ export {};
@@ -0,0 +1,44 @@
1
+ import React, { useCallback, useMemo, useRef, useState } from 'react';
2
+ import { noop } from '../../core';
3
+ export var ScrollType;
4
+ (function (ScrollType) {
5
+ ScrollType["Error"] = "Error";
6
+ ScrollType["NewAttribute"] = "NewAttribute";
7
+ })(ScrollType || (ScrollType = {}));
8
+ export var isHighlightedErrorType = function (type) { return type === ScrollType.Error; };
9
+ export var isHighlightedAttributeType = function (type) { return type === ScrollType.NewAttribute; };
10
+ export var ScrollToElementContext = React.createContext({
11
+ element: null,
12
+ type: null,
13
+ highlightError: noop,
14
+ highlightAttribute: noop,
15
+ scrollIntoRef: noop
16
+ });
17
+ export var ScrollToElementProvider = function (_a) {
18
+ var children = _a.children;
19
+ var _b = useState(null), element = _b[0], setElement = _b[1];
20
+ var highlightTimer = useRef(null);
21
+ var scrollIntoRef = useCallback(function (ref) {
22
+ ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
23
+ if (highlightTimer) {
24
+ clearTimeout(highlightTimer.current);
25
+ }
26
+ highlightTimer.current = setTimeout(function () {
27
+ setElement(null);
28
+ }, 2000);
29
+ }, []);
30
+ var handleHighlightError = useCallback(function (highlightedError) {
31
+ setElement({ value: highlightedError, type: ScrollType.Error });
32
+ }, []);
33
+ var handleHighlightAttribute = useCallback(function (highlightedAttribute) {
34
+ setTimeout(function () { return setElement({ value: highlightedAttribute, type: ScrollType.NewAttribute }); }, 300);
35
+ }, []);
36
+ var contextValue = useMemo(function () { return ({
37
+ element: element === null || element === void 0 ? void 0 : element.value,
38
+ highlightError: handleHighlightError,
39
+ highlightAttribute: handleHighlightAttribute,
40
+ scrollIntoRef: scrollIntoRef,
41
+ type: element === null || element === void 0 ? void 0 : element.type
42
+ }); }, [element, scrollIntoRef]);
43
+ return React.createElement(ScrollToElementContext.Provider, { value: contextValue }, children);
44
+ };
@@ -23,7 +23,7 @@ export { SnackbarContext } from './SnackbarContext';
23
23
  export { HighlightedValuesContext } from './HighlightedValuesContext';
24
24
  export { InterceptHandlersContext } from './InterceptHandlersContext';
25
25
  export { SearchValueContext } from './SearchValueContext';
26
- export { ScrollToErrorContext, ScrollToErrorProvider } from './ScrollToErrorContext';
26
+ export { ScrollToElementContext, ScrollToElementProvider, ScrollType, isHighlightedErrorType, isHighlightedAttributeType } from './ScrollToElementContext';
27
27
  export { UrlGeneratorsContext } from './UrlGeneratorsContext';
28
28
  export { LabelsContext } from './LabelsContext';
29
29
  export { FeaturesContext } from './FeaturesContext';
@@ -23,7 +23,7 @@ export { SnackbarContext } from './SnackbarContext';
23
23
  export { HighlightedValuesContext } from './HighlightedValuesContext';
24
24
  export { InterceptHandlersContext } from './InterceptHandlersContext';
25
25
  export { SearchValueContext } from './SearchValueContext';
26
- export { ScrollToErrorContext, ScrollToErrorProvider } from './ScrollToErrorContext';
26
+ export { ScrollToElementContext, ScrollToElementProvider, ScrollType, isHighlightedErrorType, isHighlightedAttributeType } from './ScrollToElementContext';
27
27
  export { UrlGeneratorsContext } from './UrlGeneratorsContext';
28
28
  export { LabelsContext } from './LabelsContext';
29
29
  export { FeaturesContext } from './FeaturesContext';
@@ -1,7 +1,7 @@
1
1
  import { ContextType } from 'react';
2
- import { ScrollToErrorContext } from '../../contexts';
2
+ import { ScrollToElementContext } from '../../contexts';
3
3
  declare type Props = {
4
- highlightedError: ContextType<typeof ScrollToErrorContext> | null;
4
+ highlightedError: ContextType<typeof ScrollToElementContext> | null;
5
5
  isSimple?: boolean;
6
6
  };
7
7
  export declare const useScrollToAttributeError: ({ highlightedError: context, isSimple }: Props) => {
@@ -8,8 +8,8 @@ export var useScrollToAttributeError = function (_a) {
8
8
  var context = _a.highlightedError, _c = _a.isSimple, isSimple = _c === void 0 ? false : _c;
9
9
  var styles = useStyles();
10
10
  var ref = useRef(null);
11
- var _d = context || {}, error = _d.error, scrollIntoRef = _d.scrollIntoRef;
12
- var severity = useMemo(function () { return propOr(ErrorSeverity.ERROR, 'severity')(error); }, [error]);
11
+ var _d = context || {}, element = _d.element, scrollIntoRef = _d.scrollIntoRef;
12
+ var severity = useMemo(function () { return propOr(ErrorSeverity.ERROR, 'severity')(element); }, [element]);
13
13
  var errorClassName = classnames((_b = {},
14
14
  _b[styles.highlightError] = severity === ErrorSeverity.ERROR,
15
15
  _b[styles.highlightWarning] = severity === ErrorSeverity.WARNING,
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1510",
3
+ "version": "1.4.1512",
4
4
  "license": "SEE LICENSE IN LICENSE FILE",
5
5
  "main": "./cjs/index.js",
6
6
  "module": "./esm/index.js",
7
7
  "dependencies": {
8
8
  "@date-io/moment": "^1.3.5",
9
9
  "@react-google-maps/api": "2.7.0",
10
- "@reltio/mdm-module": "^1.4.1510",
11
- "@reltio/mdm-sdk": "^1.4.1510",
10
+ "@reltio/mdm-module": "^1.4.1512",
11
+ "@reltio/mdm-sdk": "^1.4.1512",
12
12
  "classnames": "^2.2.5",
13
13
  "d3-cloud": "^1.2.5",
14
14
  "d3-geo": "^2.0.1",
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import { AttributeError } from '@reltio/mdm-sdk';
3
- declare type ScrollToErrorContextProps = {
4
- error: AttributeError | null;
5
- highlightError: (error: AttributeError) => void;
6
- scrollIntoRef: (ref: React.MutableRefObject<HTMLDivElement>) => void;
7
- };
8
- export declare const ScrollToErrorContext: React.Context<ScrollToErrorContextProps>;
9
- declare type Props = {
10
- children: React.ReactNode;
11
- };
12
- export declare const ScrollToErrorProvider: ({ children }: Props) => JSX.Element;
13
- export {};
@@ -1,48 +0,0 @@
1
- "use strict";
2
- var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
3
- if (k2 === undefined) k2 = k;
4
- var desc = Object.getOwnPropertyDescriptor(m, k);
5
- if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
6
- desc = { enumerable: true, get: function() { return m[k]; } };
7
- }
8
- Object.defineProperty(o, k2, desc);
9
- }) : (function(o, m, k, k2) {
10
- if (k2 === undefined) k2 = k;
11
- o[k2] = m[k];
12
- }));
13
- var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
14
- Object.defineProperty(o, "default", { enumerable: true, value: v });
15
- }) : function(o, v) {
16
- o["default"] = v;
17
- });
18
- var __importStar = (this && this.__importStar) || function (mod) {
19
- if (mod && mod.__esModule) return mod;
20
- var result = {};
21
- if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
22
- __setModuleDefault(result, mod);
23
- return result;
24
- };
25
- Object.defineProperty(exports, "__esModule", { value: true });
26
- exports.ScrollToErrorProvider = exports.ScrollToErrorContext = void 0;
27
- var react_1 = __importStar(require("react"));
28
- var core_1 = require("../../core");
29
- exports.ScrollToErrorContext = react_1.default.createContext({
30
- error: null,
31
- highlightError: core_1.noop,
32
- scrollIntoRef: core_1.noop
33
- });
34
- var ScrollToErrorProvider = function (_a) {
35
- var children = _a.children;
36
- var _b = (0, react_1.useState)(null), error = _b[0], setError = _b[1];
37
- var highlightTimer = (0, react_1.useRef)(null);
38
- var scrollIntoRef = (0, react_1.useCallback)(function (ref) {
39
- ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
40
- if (highlightTimer) {
41
- clearTimeout(highlightTimer.current);
42
- }
43
- highlightTimer.current = setTimeout(function () { return setError(null); }, 2000);
44
- }, []);
45
- var contextValue = (0, react_1.useMemo)(function () { return ({ error: error, highlightError: setError, scrollIntoRef: scrollIntoRef }); }, [error, scrollIntoRef]);
46
- return react_1.default.createElement(exports.ScrollToErrorContext.Provider, { value: contextValue }, children);
47
- };
48
- exports.ScrollToErrorProvider = ScrollToErrorProvider;
@@ -1,13 +0,0 @@
1
- import React from 'react';
2
- import { AttributeError } from '@reltio/mdm-sdk';
3
- declare type ScrollToErrorContextProps = {
4
- error: AttributeError | null;
5
- highlightError: (error: AttributeError) => void;
6
- scrollIntoRef: (ref: React.MutableRefObject<HTMLDivElement>) => void;
7
- };
8
- export declare const ScrollToErrorContext: React.Context<ScrollToErrorContextProps>;
9
- declare type Props = {
10
- children: React.ReactNode;
11
- };
12
- export declare const ScrollToErrorProvider: ({ children }: Props) => JSX.Element;
13
- export {};
@@ -1,21 +0,0 @@
1
- import React, { useCallback, useMemo, useRef, useState } from 'react';
2
- import { noop } from '../../core';
3
- export var ScrollToErrorContext = React.createContext({
4
- error: null,
5
- highlightError: noop,
6
- scrollIntoRef: noop
7
- });
8
- export var ScrollToErrorProvider = function (_a) {
9
- var children = _a.children;
10
- var _b = useState(null), error = _b[0], setError = _b[1];
11
- var highlightTimer = useRef(null);
12
- var scrollIntoRef = useCallback(function (ref) {
13
- ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
14
- if (highlightTimer) {
15
- clearTimeout(highlightTimer.current);
16
- }
17
- highlightTimer.current = setTimeout(function () { return setError(null); }, 2000);
18
- }, []);
19
- var contextValue = useMemo(function () { return ({ error: error, highlightError: setError, scrollIntoRef: scrollIntoRef }); }, [error, scrollIntoRef]);
20
- return React.createElement(ScrollToErrorContext.Provider, { value: contextValue }, children);
21
- };