@reltio/components 1.4.1372 → 1.4.1373

package/esm/components/attributes/editMode/SimpleAttributeEditor/SimpleAttributeEditor.js

@@ -20,7 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
-import React, { memo } from 'react';
+import React, { useCallback, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useSelector } from 'react-redux';
 import classnames from 'classnames';
@@ -37,6 +37,9 @@ import SmallIconButton from '../../../SmallIconButton/SmallIconButton';
 import { attributeValueToEditorValue, prepareChangeData } from './utils';
 import withAsyncMount from '../../../../HOCs/withAsyncMount/withAsyncMount';
 import { getDependentLookupEditorContext } from './selectors/getDependentLookupEditorContext';
+import { withContext } from '../../../../HOCs';
+import { ScrollToErrorContext } from '../../../../contexts';
+import { useScrollToAttributeError } from '../../../../hooks';
 import { useStyles } from './styles';
 var AsyncMountPlaceholder = function () {
     var styles = useStyles();
@@ -44,13 +47,11 @@ var AsyncMountPlaceholder = function () {
 };
 var SimpleAttributeEditor = function (_a) {
     var _b, _c;
-    var className = _a.className, attributeValue = _a.attributeValue, attributeType = _a.attributeType, isReltioCrosswalk = _a.isReltioCrosswalk, ownError = _a.ownError, mode = _a.mode, onAddOneMore = _a.onAddOneMore, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, state = _a.state, otherProps = __rest(_a, ["className", "attributeValue", "attributeType", "isReltioCrosswalk", "ownError", "mode", "onAddOneMore", "onDeleteAttribute", "onChangeAttribute", "onDeactivateError", "additionalControlsRenderer", "state"]);
+    var className = _a.className, attributeValue = _a.attributeValue, attributeType = _a.attributeType, isReltioCrosswalk = _a.isReltioCrosswalk, ownError = _a.ownError, mode = _a.mode, onAddOneMore = _a.onAddOneMore, onDeleteAttribute = _a.onDeleteAttribute, onChangeAttribute = _a.onChangeAttribute, onDeactivateError = _a.onDeactivateError, additionalControlsRenderer = _a.additionalControlsRenderer, state = _a.state, highlightedError = _a.highlightedError, otherProps = __rest(_a, ["className", "attributeValue", "attributeType", "isReltioCrosswalk", "ownError", "mode", "onAddOneMore", "onDeleteAttribute", "onChangeAttribute", "onDeactivateError", "additionalControlsRenderer", "state", "highlightedError"]);
     var styles = useStyles();
     var deleted = state === 'deleted';
     var edited = state === 'edited';
     var isEditableMode = checkIsEditableMode(mode);
-    var dataTypeDefinition = getAttrDataTypeDefinition(attributeType);
-    var value = attributeValueToEditorValue(attributeValue, dataTypeDefinition);
     var canCreate = checkCanCreateAttribute({ attributeType: attributeType, mode: mode });
     var canEdit = checkCanEditAttribute({ attributeType: attributeType, attributeValue: attributeValue, mode: mode, isReltioCrosswalk: isReltioCrosswalk });
     var canDelete = checkCanDeleteAttribute({ attributeType: attributeType, attributeValue: attributeValue, mode: mode, isReltioCrosswalk: isReltioCrosswalk });
@@ -61,24 +62,28 @@ var SimpleAttributeEditor = function (_a) {
             ? getDependentLookupEditorContext(state, attributeValue, attributeType === null || attributeType === void 0 ? void 0 : attributeType.uri)
             : null;
     });
+    var _d = useScrollToAttributeError({ highlightedError: highlightedError, isSimple: true }), ref = _d.ref, errorClassName = _d.errorClassName;
+    var dataTypeDefinition = useMemo(function () { return getAttrDataTypeDefinition(attributeType); }, [attributeType]);
+    var value = useMemo(function () { return attributeValueToEditorValue(attributeValue, dataTypeDefinition); }, [attributeValue, dataTypeDefinition]);
+    var deactivateError = useCallback(function () {
+        if (ownError) {
+            onDeactivateError(getErrorId(ownError));
+        }
+    }, [ownError, onDeactivateError]);
+    var onValueEditorChange = useCallback(pipe(prepareChangeData(attributeValue, attributeType), onChangeAttribute, deactivateError), [attributeValue, attributeType, onChangeAttribute, deactivateError]);
     var onDelete = function () {
         onDeleteAttribute({ uri: attributeValue.uri, attributeType: attributeType });
         if (getErrorType(ownError) !== ErrorType.missed) {
             deactivateError();
         }
     };
-    var deactivateError = function () {
-        if (ownError) {
-            onDeactivateError(getErrorId(ownError));
-        }
-    };
     var showAddButton = !!onAddOneMore && canCreate && !attributeType.singleValue;
     var showDeleteButton = !deleted && !!onDeleteAttribute && canDelete;
     var hasError = !!errorMessage;
     var deletedProps = deleted ? { disabled: true } : {};
-    return (React.createElement("div", { className: classnames(styles.editor, className) },
+    return (React.createElement("div", { ref: ref, className: classnames(styles.editor, className, errorClassName) },
         React.createElement(ErrorWrapper, { errorMessage: errorMessage, className: styles.errorWrapper },
-            React.createElement("div", { className: classnames(styles['editor-value'], (_b = {}, _b[styles.deleted] = deleted, _b), (_c = {}, _c[styles['editor-read-only-value']] = !showToEdit, _c)), "data-reltio-id": "reltio-attribute-value" }, showToEdit ? (React.createElement(DataTypeValueEditor, __assign({ fieldName: attributeUriToSearchUri(attributeType.uri), value: value, dataTypeDefinition: dataTypeDefinition, error: hasError, onChange: pipe(prepareChangeData(attributeValue, attributeType), onChangeAttribute, deactivateError), fullWidth: true }, dependentLookupEditorContext, otherProps, deletedProps))) : (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: dataTypeDefinition })))),
+            React.createElement("div", { className: classnames(styles['editor-value'], (_b = {}, _b[styles.deleted] = deleted, _b), (_c = {}, _c[styles['editor-read-only-value']] = !showToEdit, _c)), "data-reltio-id": "reltio-attribute-value" }, showToEdit ? (React.createElement(DataTypeValueEditor, __assign({ fieldName: attributeUriToSearchUri(attributeType.uri), value: value, dataTypeDefinition: dataTypeDefinition, error: hasError, onChange: onValueEditorChange, fullWidth: true }, dependentLookupEditorContext, otherProps, deletedProps))) : (React.createElement(DataTypeValue, { value: getAttributeValue(attributeValue), dataTypeDefinition: dataTypeDefinition })))),
         React.createElement("div", { className: styles['editor-actions'] },
             edited && (React.createElement(Typography, { variant: "caption", className: styles.editedLabel },
                 "(",
@@ -100,6 +105,12 @@ SimpleAttributeEditor.propTypes = {
     onDeleteAttribute: PropTypes.func,
     onChangeAttribute: PropTypes.func,
     onDeactivateError: PropTypes.func,
-    additionalControlsRenderer: PropTypes.func
+    additionalControlsRenderer: PropTypes.func,
+    highlightedError: PropTypes.object
 };
-export default memo(withAsyncMount(SimpleAttributeEditor, AsyncMountPlaceholder));
+export default withAsyncMount(withContext(ScrollToErrorContext, function (contextValue, _a) {
+    var attributeValue = _a.attributeValue;
+    var error = (contextValue || {}).error;
+    var isHighlighted = (error === null || error === void 0 ? void 0 : error.uri) === attributeValue.uri;
+    return { highlightedError: isHighlighted ? contextValue : null };
+}, SimpleAttributeEditor), AsyncMountPlaceholder);

package/esm/components/attributes/editMode/SimpleAttributeEditor/styles.d.ts

@@ -1 +1 @@
-export const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "placeholder" | "deleted" | "editor" | "wrapper" | "addButton" | "errorWrapper" | "editor-value" | "editor-read-only-value" | "editor-actions" | "editedLabel">;
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"button" | "placeholder" | "deleted" | "editor" | "wrapper" | "addButton" | "errorWrapper" | "editor-value" | "editor-read-only-value" | "editor-actions" | "editedLabel">;

package/esm/components/attributes/editMode/SimpleAttributeEditor/styles.js

@@ -11,7 +11,8 @@ export var useStyles = makeStyles(function (theme) { return ({
         display: 'flex',
         flex: 1,
         alignItems: 'flex-start',
-        marginBottom: "".concat(marginBottom, "px")
+        marginBottom: "".concat(marginBottom, "px"),
+        position: 'relative'
     },
     'editor-value': {
         flex: '1 1 auto'

package/esm/components/editors/DataTypeValueEditor/DataTypeValueEditor.d.ts

@@ -1,18 +1,19 @@
-export default DataTypeValueEditor;
-declare function DataTypeValueEditor({ fieldName, value, onChange, dataTypeDefinition, TextFieldProps, ...otherProps }: {
-    [x: string]: any;
-    fieldName: any;
-    value: any;
-    onChange: any;
-    dataTypeDefinition: any;
-    TextFieldProps?: {};
-}): JSX.Element;
-declare namespace DataTypeValueEditor {
-    namespace propTypes {
-        const fieldName: PropTypes.Requireable<string>;
-        const value: PropTypes.Requireable<any>;
-        const onChange: PropTypes.Requireable<(...args: any[]) => any>;
-        const dataTypeDefinition: PropTypes.Requireable<object>;
-    }
-}
+declare const _default: import("react").MemoExoticComponent<{
+    ({ fieldName, value, onChange, dataTypeDefinition, TextFieldProps, ...otherProps }: {
+        [x: string]: any;
+        fieldName: any;
+        value: any;
+        onChange: any;
+        dataTypeDefinition: any;
+        TextFieldProps?: {};
+    }): JSX.Element;
+    propTypes: {
+        fieldName: PropTypes.Requireable<string>;
+        value: PropTypes.Requireable<any>;
+        onChange: PropTypes.Requireable<(...args: any[]) => any>;
+        dataTypeDefinition: PropTypes.Requireable<object>;
+    };
+    displayName: string;
+}>;
+export default _default;
 import PropTypes from "prop-types";

package/esm/components/editors/DataTypeValueEditor/DataTypeValueEditor.js

@@ -20,6 +20,7 @@ var __rest = (this && this.__rest) || function (s, e) {
         }
     return t;
 };
+import { memo } from 'react';
 import { has, is, mergeDeepLeft } from 'ramda';
 import EditorsFactory from '../EditorsFactory';
 import PropTypes from 'prop-types';
@@ -44,4 +45,5 @@ DataTypeValueEditor.propTypes = {
     onChange: PropTypes.func,
     dataTypeDefinition: PropTypes.object
 };
-export default DataTypeValueEditor;
+DataTypeValueEditor.displayName = 'DataTypeValueEditor';
+export default memo(DataTypeValueEditor);

package/esm/contexts/ScrollToErrorContext/index.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { AttributeError } from '@reltio/mdm-sdk';
+declare type ScrollToErrorContextProps = {
+    error: AttributeError | null;
+    highlightError: (error: AttributeError) => void;
+    scrollIntoRef: (ref: React.MutableRefObject<HTMLDivElement>) => void;
+};
+export declare const ScrollToErrorContext: React.Context<ScrollToErrorContextProps>;
+declare type Props = {
+    children: React.ReactNode;
+};
+export declare const ScrollToErrorProvider: ({ children }: Props) => JSX.Element;
+export {};

package/esm/contexts/ScrollToErrorContext/index.js

@@ -0,0 +1,21 @@
+import React, { useCallback, useMemo, useRef, useState } from 'react';
+import { noop } from '../../core';
+export var ScrollToErrorContext = React.createContext({
+    error: null,
+    highlightError: noop,
+    scrollIntoRef: noop
+});
+export var ScrollToErrorProvider = function (_a) {
+    var children = _a.children;
+    var _b = useState(null), error = _b[0], setError = _b[1];
+    var highlightTimer = useRef(null);
+    var scrollIntoRef = useCallback(function (ref) {
+        ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
+        if (highlightTimer) {
+            clearTimeout(highlightTimer.current);
+        }
+        highlightTimer.current = setTimeout(function () { return setError(null); }, 2000);
+    }, []);
+    var contextValue = useMemo(function () { return ({ error: error, highlightError: setError, scrollIntoRef: scrollIntoRef }); }, [error, scrollIntoRef]);
+    return React.createElement(ScrollToErrorContext.Provider, { value: contextValue }, children);
+};

package/esm/contexts/index.d.ts

@@ -22,3 +22,4 @@ export { SnackbarContext } from './SnackbarContext';
 export { HighlightedValuesContext } from './HighlightedValuesContext';
 export { InterceptHandlersContext } from './InterceptHandlersContext';
 export { SearchValueContext } from './SearchValueContext';
+export { ScrollToErrorContext, ScrollToErrorProvider } from './ScrollToErrorContext';

package/esm/contexts/index.js

@@ -22,3 +22,4 @@ export { SnackbarContext } from './SnackbarContext';
 export { HighlightedValuesContext } from './HighlightedValuesContext';
 export { InterceptHandlersContext } from './InterceptHandlersContext';
 export { SearchValueContext } from './SearchValueContext';
+export { ScrollToErrorContext, ScrollToErrorProvider } from './ScrollToErrorContext';

package/esm/hooks/index.d.ts

@@ -1,3 +1,4 @@
+export { useScrollToAttributeError } from './useScrollToAttributeError/useScrollToAttributeError';
 export { useActions } from './useActions';
 export { useAPI } from './useAPI';
 export { useAsyncMount } from './useAsyncMount';

package/esm/hooks/index.js

@@ -1,3 +1,4 @@
+export { useScrollToAttributeError } from './useScrollToAttributeError/useScrollToAttributeError';
 export { useActions } from './useActions';
 export { useAPI } from './useAPI';
 export { useAsyncMount } from './useAsyncMount';

package/esm/hooks/useScrollToAttributeError/styles.d.ts

@@ -0,0 +1 @@
+export declare const useStyles: (props?: any) => import("@material-ui/core/styles/withStyles").ClassNameMap<"highlightError" | "@keyframes highlightAnimation" | "highlightWarning" | "simpleAttribute">;

package/esm/hooks/useScrollToAttributeError/styles.js

@@ -0,0 +1,46 @@
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+import { makeStyles } from '@material-ui/core/styles';
+var highlightBeforeStyles = {
+    content: '""',
+    position: 'absolute',
+    left: '-1000px',
+    top: '0px',
+    width: '5000px',
+    height: 'calc(100% - 10px)',
+    animationName: '$highlightAnimation',
+    animationDuration: '2s',
+    animationIterationCount: 1,
+    opacity: 0
+};
+var ERROR_COLOR = 'rgba(255, 0, 0, 0.06)';
+var WARNING_COLOR = 'rgba(228, 151, 0, 0.08)';
+export var useStyles = makeStyles(function () { return ({
+    '@keyframes highlightAnimation': {
+        '0%': { opacity: 0 },
+        '50%': { opacity: 1 },
+        '100%': { opacity: 0 }
+    },
+    highlightError: {
+        '&::before': __assign(__assign({}, highlightBeforeStyles), { background: ERROR_COLOR })
+    },
+    highlightWarning: {
+        '&::before': __assign(__assign({}, highlightBeforeStyles), { background: WARNING_COLOR })
+    },
+    simpleAttribute: {
+        position: 'relative',
+        '&::before': {
+            top: '-4px',
+            height: 'calc(100% + 8px)'
+        }
+    }
+}); });

package/esm/hooks/useScrollToAttributeError/useScrollToAttributeError.d.ts

@@ -0,0 +1,14 @@
+import { ContextType } from 'react';
+import { ScrollToErrorContext } from '../../contexts';
+declare type Props = {
+    highlightedError: ContextType<typeof ScrollToErrorContext> | null;
+    isSimple?: boolean;
+};
+export declare const useScrollToAttributeError: ({ highlightedError: context, isSimple }: Props) => {
+    ref: import("react").MutableRefObject<HTMLDivElement>;
+    errorClassName: string;
+} | {
+    ref: import("react").MutableRefObject<HTMLDivElement>;
+    errorClassName?: undefined;
+};
+export {};

package/esm/hooks/useScrollToAttributeError/useScrollToAttributeError.js

@@ -0,0 +1,24 @@
+import { useEffect, useMemo, useRef } from 'react';
+import { propOr } from 'ramda';
+import classnames from 'classnames';
+import { ErrorSeverity } from '@reltio/mdm-sdk';
+import { useStyles } from './styles';
+export var useScrollToAttributeError = function (_a) {
+    var _b;
+    var context = _a.highlightedError, _c = _a.isSimple, isSimple = _c === void 0 ? false : _c;
+    var styles = useStyles();
+    var ref = useRef(null);
+    var _d = context || {}, error = _d.error, scrollIntoRef = _d.scrollIntoRef;
+    var severity = useMemo(function () { return propOr(ErrorSeverity.ERROR, 'severity')(error); }, [error]);
+    var errorClassName = classnames((_b = {},
+        _b[styles.highlightError] = severity === ErrorSeverity.ERROR,
+        _b[styles.highlightWarning] = severity === ErrorSeverity.WARNING,
+        _b[styles.simpleAttribute] = isSimple,
+        _b));
+    useEffect(function () {
+        if (context) {
+            scrollIntoRef(ref);
+        }
+    }, [context, scrollIntoRef]);
+    return context ? { ref: ref, errorClassName: errorClassName } : { ref: ref };
+};

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@reltio/components",
-  "version": "1.4.1372",
+  "version": "1.4.1373",
   "license": "SEE LICENSE IN LICENSE FILE",
   "main": "./cjs/index.js",
   "module": "./esm/index.js",
   "dependencies": {
     "@date-io/moment": "^1.3.5",
     "@react-google-maps/api": "2.7.0",
-    "@reltio/mdm-module": "^1.4.1372",
-    "@reltio/mdm-sdk": "^1.4.1372",
+    "@reltio/mdm-module": "^1.4.1373",
+    "@reltio/mdm-sdk": "^1.4.1373",
     "classnames": "^2.2.5",
     "d3-cloud": "^1.2.5",
     "d3-geo": "^2.0.1",