@reltio/components 1.4.1592 → 1.4.1594

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 (9) hide show
  1. package/cjs/components/attributes/inline/SimpleAttributeEditor/SimpleAttributeEditor.js +4 -2
  2. package/cjs/components/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.d.ts +1 -1
  3. package/cjs/components/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.js +14 -6
  4. package/cjs/components/editors/TimestampEditor/TimestampEditor.js +1 -1
  5. package/esm/components/attributes/inline/SimpleAttributeEditor/SimpleAttributeEditor.js +4 -2
  6. package/esm/components/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.d.ts +1 -1
  7. package/esm/components/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.js +15 -7
  8. package/esm/components/editors/TimestampEditor/TimestampEditor.js +2 -2
  9. package/package.json +3 -3
package/cjs/components/attributes/inline/SimpleAttributeEditor/SimpleAttributeEditor.js CHANGED
@@ -66,7 +66,9 @@ var SimpleAttributeEditor = function (_a) {
66
66
  root: styles.input,
67
67
  multiline: styles.inputMultiline
68
68
  }
69
- }
69
+ },
70
+ fullWidth: true,
71
+ autoFocus: true
70
72
  };
71
73
  var applyChangesAndClose = function () {
72
74
  var editedValue = !(0, ramda_1.isNil)(editorValue) && (0, utils_1.editorValueToAttributeValue)(attributeType, editorValue);
@@ -97,6 +99,6 @@ var SimpleAttributeEditor = function (_a) {
97
99
  _b)),
98
100
  root: styles.popoverRoot
99
101
  }, onKeyUp: onKeyUp, onBackdropClick: applyChangesAndClose },
100
- react_1.default.createElement(editors_1.DataTypeValueEditor, { autoFocus: true, dataTypeDefinition: dataTypeDefinition, fieldName: (0, mdm_sdk_1.attributeUriToSearchUri)(attributeType.uri), onChange: changeEditorValue, TextFieldProps: TextFieldProps, value: editorValue, fullWidth: true })));
102
+ react_1.default.createElement(editors_1.DataTypeValueEditor, { dataTypeDefinition: dataTypeDefinition, fieldName: (0, mdm_sdk_1.attributeUriToSearchUri)(attributeType.uri), onChange: changeEditorValue, TextFieldProps: TextFieldProps, value: editorValue })));
101
103
  };
102
104
  exports.SimpleAttributeEditor = SimpleAttributeEditor;
package/cjs/components/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.d.ts CHANGED
@@ -7,5 +7,5 @@ type Props = {
7
7
  disabled?: boolean;
8
8
  onChange: (value: number) => void;
9
9
  };
10
- declare const CrosswalkDateEditor: ({ value, classes, disabled, onChange }: Props) => JSX.Element;
10
+ declare const CrosswalkDateEditor: ({ value: currentValue, classes, disabled, onChange }: Props) => JSX.Element;
11
11
  export default CrosswalkDateEditor;
package/cjs/components/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.js CHANGED
@@ -27,15 +27,22 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
27
27
  };
28
28
  Object.defineProperty(exports, "__esModule", { value: true });
29
29
  var react_1 = __importStar(require("react"));
30
- var ramda_1 = require("ramda");
31
30
  var classnames_1 = __importDefault(require("classnames"));
32
31
  var TimestampEditor_1 = __importDefault(require("../../editors/TimestampEditor/TimestampEditor"));
33
32
  var styles_1 = require("./styles");
34
33
  var CrosswalkDateEditor = function (_a) {
35
- var value = _a.value, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange;
34
+ var currentValue = _a.value, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange;
36
35
  var styles = (0, styles_1.useStyles)();
37
- var _d = (0, react_1.useState)(false), isOpen = _d[0], setIsOpen = _d[1];
38
- var handleChange = function (date) { return onChange(date === null || date === void 0 ? void 0 : date.valueOf()); };
36
+ var _d = (0, react_1.useState)(currentValue), value = _d[0], setValue = _d[1];
37
+ (0, react_1.useEffect)(function () {
38
+ setValue(currentValue);
39
+ }, [currentValue]);
40
+ var handleChange = (0, react_1.useCallback)(function () {
41
+ var newValue = value === null || value === void 0 ? void 0 : value.valueOf();
42
+ if (currentValue !== newValue) {
43
+ onChange(newValue);
44
+ }
45
+ }, [onChange, value, currentValue]);
39
46
  return (react_1.default.createElement(TimestampEditor_1.default, { slotProps: {
40
47
  textField: {
41
48
  variant: 'filled',
@@ -44,9 +51,10 @@ var CrosswalkDateEditor = function (_a) {
44
51
  classes: {
45
52
  input: styles.timestampEditorInput,
46
53
  root: (0, classnames_1.default)(styles.timestampEditor, classes.root)
47
- }
54
+ },
55
+ onBlur: handleChange
48
56
  }
49
57
  }
50
- }, value: value || null, disabled: disabled, onChange: (0, ramda_1.unless)((0, ramda_1.always)(isOpen), handleChange), onAccept: handleChange, onOpen: function () { return setIsOpen(true); }, onClose: function () { return setIsOpen(false); } }));
58
+ }, value: value || null, disabled: disabled, onChange: setValue, onClose: handleChange }));
51
59
  };
52
60
  exports.default = CrosswalkDateEditor;
package/cjs/components/editors/TimestampEditor/TimestampEditor.js CHANGED
@@ -106,6 +106,6 @@ var TimestampEditor = function (_a) {
106
106
  hours: timeViewRenderers_1.renderTimeViewClock,
107
107
  minutes: timeViewRenderers_1.renderTimeViewClock,
108
108
  seconds: timeViewRenderers_1.renderTimeViewClock
109
- }, label: label, value: editorValue, minDate: editorMinDate, maxDate: editorMaxDate, onError: function (newError) { return setError(newError); }, onChange: (0, ramda_2.when)(mdm_sdk_1.utils.dates.isValidMomentDateOrNull, (0, ramda_2.pipe)(mdm_sdk_1.utils.dates.momentToDate, onChange)) }, otherProps)));
109
+ }, label: label, value: editorValue, minDate: editorMinDate, maxDate: editorMaxDate, onError: function (newError) { return setError(newError); }, onChange: (0, ramda_2.when)((0, ramda_2.both)(mdm_sdk_1.utils.dates.isValidMomentDateOrNull, mdm_sdk_1.utils.dates.isDateInRange(minDate, maxDate)), (0, ramda_2.pipe)(mdm_sdk_1.utils.dates.momentToDate, onChange)) }, otherProps)));
110
110
  };
111
111
  exports.default = TimestampEditor;
package/esm/components/attributes/inline/SimpleAttributeEditor/SimpleAttributeEditor.js CHANGED
@@ -37,7 +37,9 @@ export var SimpleAttributeEditor = function (_a) {
37
37
  root: styles.input,
38
38
  multiline: styles.inputMultiline
39
39
  }
40
- }
40
+ },
41
+ fullWidth: true,
42
+ autoFocus: true
41
43
  };
42
44
  var applyChangesAndClose = function () {
43
45
  var editedValue = !isNil(editorValue) && editorValueToAttributeValue(attributeType, editorValue);
@@ -68,5 +70,5 @@ export var SimpleAttributeEditor = function (_a) {
68
70
  _b)),
69
71
  root: styles.popoverRoot
70
72
  }, onKeyUp: onKeyUp, onBackdropClick: applyChangesAndClose },
71
- React.createElement(DataTypeValueEditor, { autoFocus: true, dataTypeDefinition: dataTypeDefinition, fieldName: attributeUriToSearchUri(attributeType.uri), onChange: changeEditorValue, TextFieldProps: TextFieldProps, value: editorValue, fullWidth: true })));
73
+ React.createElement(DataTypeValueEditor, { dataTypeDefinition: dataTypeDefinition, fieldName: attributeUriToSearchUri(attributeType.uri), onChange: changeEditorValue, TextFieldProps: TextFieldProps, value: editorValue })));
72
74
  };
package/esm/components/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.d.ts CHANGED
@@ -7,5 +7,5 @@ type Props = {
7
7
  disabled?: boolean;
8
8
  onChange: (value: number) => void;
9
9
  };
10
- declare const CrosswalkDateEditor: ({ value, classes, disabled, onChange }: Props) => JSX.Element;
10
+ declare const CrosswalkDateEditor: ({ value: currentValue, classes, disabled, onChange }: Props) => JSX.Element;
11
11
  export default CrosswalkDateEditor;
package/esm/components/crosswalks/CrosswalkDateEditor/CrosswalkDateEditor.js CHANGED
@@ -1,13 +1,20 @@
1
- import React, { useState } from 'react';
2
- import { always, unless } from 'ramda';
1
+ import React, { useCallback, useEffect, useState } from 'react';
3
2
  import classnames from 'classnames';
4
3
  import TimestampEditor from '../../editors/TimestampEditor/TimestampEditor';
5
4
  import { useStyles } from './styles';
6
5
  var CrosswalkDateEditor = function (_a) {
7
- var value = _a.value, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange;
6
+ var currentValue = _a.value, _b = _a.classes, classes = _b === void 0 ? {} : _b, _c = _a.disabled, disabled = _c === void 0 ? false : _c, onChange = _a.onChange;
8
7
  var styles = useStyles();
9
- var _d = useState(false), isOpen = _d[0], setIsOpen = _d[1];
10
- var handleChange = function (date) { return onChange(date === null || date === void 0 ? void 0 : date.valueOf()); };
8
+ var _d = useState(currentValue), value = _d[0], setValue = _d[1];
9
+ useEffect(function () {
10
+ setValue(currentValue);
11
+ }, [currentValue]);
12
+ var handleChange = useCallback(function () {
13
+ var newValue = value === null || value === void 0 ? void 0 : value.valueOf();
14
+ if (currentValue !== newValue) {
15
+ onChange(newValue);
16
+ }
17
+ }, [onChange, value, currentValue]);
11
18
  return (React.createElement(TimestampEditor, { slotProps: {
12
19
  textField: {
13
20
  variant: 'filled',
@@ -16,9 +23,10 @@ var CrosswalkDateEditor = function (_a) {
16
23
  classes: {
17
24
  input: styles.timestampEditorInput,
18
25
  root: classnames(styles.timestampEditor, classes.root)
19
- }
26
+ },
27
+ onBlur: handleChange
20
28
  }
21
29
  }
22
- }, value: value || null, disabled: disabled, onChange: unless(always(isOpen), handleChange), onAccept: handleChange, onOpen: function () { return setIsOpen(true); }, onClose: function () { return setIsOpen(false); } }));
30
+ }, value: value || null, disabled: disabled, onChange: setValue, onClose: handleChange }));
23
31
  };
24
32
  export default CrosswalkDateEditor;
package/esm/components/editors/TimestampEditor/TimestampEditor.js CHANGED
@@ -25,7 +25,7 @@ import i18n from 'ui-i18n';
25
25
  import { mergeDeepLeft } from 'ramda';
26
26
  import moment from 'moment';
27
27
  import { getLocaleFormat, utils } from '@reltio/mdm-sdk';
28
- import { isNil, pipe, when } from 'ramda';
28
+ import { both, isNil, pipe, when } from 'ramda';
29
29
  import { DateTimePicker } from '@mui/x-date-pickers/DateTimePicker';
30
30
  import { renderTimeViewClock } from '@mui/x-date-pickers/timeViewRenderers';
31
31
  import { DEFAULT_MAX_DATE, DEFAULT_MIN_DATE } from '../constants';
@@ -78,6 +78,6 @@ var TimestampEditor = function (_a) {
78
78
  hours: renderTimeViewClock,
79
79
  minutes: renderTimeViewClock,
80
80
  seconds: renderTimeViewClock
81
- }, label: label, value: editorValue, minDate: editorMinDate, maxDate: editorMaxDate, onError: function (newError) { return setError(newError); }, onChange: when(utils.dates.isValidMomentDateOrNull, pipe(utils.dates.momentToDate, onChange)) }, otherProps)));
81
+ }, label: label, value: editorValue, minDate: editorMinDate, maxDate: editorMaxDate, onError: function (newError) { return setError(newError); }, onChange: when(both(utils.dates.isValidMomentDateOrNull, utils.dates.isDateInRange(minDate, maxDate)), pipe(utils.dates.momentToDate, onChange)) }, otherProps)));
82
82
  };
83
83
  export default TimestampEditor;
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1592",
3
+ "version": "1.4.1594",
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.1592",
11
- "@reltio/mdm-sdk": "^1.4.1592",
10
+ "@reltio/mdm-module": "^1.4.1594",
11
+ "@reltio/mdm-sdk": "^1.4.1594",
12
12
  "classnames": "^2.2.5",
13
13
  "d3-cloud": "^1.2.5",
14
14
  "d3-geo": "^2.0.1",