@reltio/components 1.4.1380 → 1.4.1382

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 (7) hide show
  1. package/cjs/components/editors/DependentLookupEditor/DependentLookupEditor.js +59 -14
  2. package/cjs/components/editors/DependentLookupEditor/helpers.d.ts +1 -4
  3. package/cjs/components/editors/DependentLookupEditor/helpers.js +4 -2
  4. package/esm/components/editors/DependentLookupEditor/DependentLookupEditor.js +61 -16
  5. package/esm/components/editors/DependentLookupEditor/helpers.d.ts +1 -4
  6. package/esm/components/editors/DependentLookupEditor/helpers.js +4 -2
  7. package/package.json +3 -3
package/cjs/components/editors/DependentLookupEditor/DependentLookupEditor.js CHANGED
@@ -50,6 +50,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
50
50
  Object.defineProperty(exports, "__esModule", { value: true });
51
51
  exports.DEBOUNCE_INTERVAL = void 0;
52
52
  var react_1 = __importStar(require("react"));
53
+ var react_select_1 = require("react-select");
53
54
  var prop_types_1 = __importDefault(require("prop-types"));
54
55
  var mdm_sdk_1 = require("@reltio/mdm-sdk");
55
56
  var Select_1 = __importDefault(require("../../ReactSelect/Select"));
@@ -69,6 +70,7 @@ var useAutopopulation_1 = __importDefault(require("./useAutopopulation"));
69
70
  var useSavingFocus_1 = __importDefault(require("./useSavingFocus"));
70
71
  var LoadMoreButton_1 = __importDefault(require("../../commonReactSelectComponents/LoadMoreButton"));
71
72
  var hooks_1 = require("../../../hooks");
73
+ var Input = function (props) { return react_1.default.createElement(react_select_1.components.Input, __assign({}, props, { isHidden: false })); };
72
74
  var SelectComponents = {
73
75
  IndicatorSeparator: utils_1.EmptyStub,
74
76
  LoadingIndicator: utils_1.EmptyStub,
@@ -76,7 +78,8 @@ var SelectComponents = {
76
78
  DropdownIndicator: DropdownIndicator_1.default,
77
79
  Menu: MenuWithPopper_1.default,
78
80
  MenuList: MenuList_1.default,
79
- MultiValue: MultiValueChip_1.default
81
+ MultiValue: MultiValueChip_1.default,
82
+ Input: Input
80
83
  };
81
84
  exports.DEBOUNCE_INTERVAL = 400;
82
85
  var MAX_DEPENDENT_LOOKUP_VALUES = 50;
@@ -85,6 +88,10 @@ var DependentLookupEditor = function (_a) {
85
88
  var inputRef = (0, react_1.useRef)(null);
86
89
  var selectRef = (0, react_1.useRef)(null);
87
90
  var styles = (0, styles_1.useStyles)();
91
+ var _d = (0, react_1.useState)(''), inputValue = _d[0], setInputValue = _d[1];
92
+ var _e = (0, react_1.useState)([]), options = _e[0], setOptions = _e[1];
93
+ var _f = (0, react_1.useState)(1), pageNumber = _f[0], setPageNumber = _f[1];
94
+ var _g = (0, react_1.useState)(false), optionsAreLoading = _g[0], setOptionsAreLoading = _g[1];
88
95
  (0, useLookupsResolver_1.default)({
89
96
  lookups: value,
90
97
  resolvedValues: lookups[lookupTypeCode],
@@ -92,15 +99,55 @@ var DependentLookupEditor = function (_a) {
92
99
  onLookupsResolve: function (lookups) { return onChange(multiple ? lookups : lookups[0]); }
93
100
  });
94
101
  (0, useSavingFocus_1.default)(selectRef, inputRef, disabled);
95
- var _d = (0, react_1.useState)(''), inputValue = _d[0], setInputValue = _d[1];
96
- var _e = (0, react_1.useState)([]), options = _e[0], setOptions = _e[1];
97
- var _f = (0, react_1.useState)(1), pageNumber = _f[0], setPageNumber = _f[1];
98
- var _g = (0, react_1.useState)(false), optionsAreLoading = _g[0], setOptionsAreLoading = _g[1];
99
- var handleInputChange = function (value) {
100
- if (value !== inputValue) {
101
- setInputValue(value);
102
+ (0, react_1.useEffect)(function () {
103
+ if (!multiple) {
104
+ setInputValue((0, helpers_1.getOptionLabel)(value));
105
+ setOptions(defaultOptions);
102
106
  setPageNumber(1);
103
- debouncedLoadOptions(value, setOptions);
107
+ }
108
+ }, [value]);
109
+ var handleChange = function (value) {
110
+ markAsTouched();
111
+ onChange(value);
112
+ };
113
+ var handleFocus = function () {
114
+ value && selectRef.current.select.inputRef.select();
115
+ };
116
+ var resetOptions = function () {
117
+ setPageNumber(1);
118
+ debouncedLoadOptions('', setOptions);
119
+ };
120
+ var restoreSelectedOption = function () {
121
+ if (!multiple && inputValue && inputValue !== (0, helpers_1.getOptionLabel)(value)) {
122
+ setInputValue((0, helpers_1.getOptionLabel)(value));
123
+ resetOptions();
124
+ }
125
+ };
126
+ var handleInputChange = function (newValue, _a) {
127
+ var action = _a.action;
128
+ switch (action) {
129
+ case 'menu-close': {
130
+ restoreSelectedOption();
131
+ break;
132
+ }
133
+ case 'input-blur': {
134
+ if (multiple && inputValue) {
135
+ setInputValue('');
136
+ resetOptions();
137
+ break;
138
+ }
139
+ restoreSelectedOption();
140
+ break;
141
+ }
142
+ case 'input-change': {
143
+ setInputValue(newValue);
144
+ setPageNumber(1);
145
+ debouncedLoadOptions(newValue, setOptions);
146
+ if (!multiple && newValue === '') {
147
+ handleChange('');
148
+ }
149
+ break;
150
+ }
104
151
  }
105
152
  };
106
153
  var loadOptions = (0, react_1.useCallback)(function (value, pageNumber) {
@@ -120,7 +167,8 @@ var DependentLookupEditor = function (_a) {
120
167
  .finally(function () { return setOptionsAreLoading(false); });
121
168
  }, [max, lookupTypeCode, parents]);
122
169
  var loadMoreOptions = (0, react_1.useCallback)(function () {
123
- loadOptions(inputValue, pageNumber + 1).then(function (buildOptions) {
170
+ var filterValue = inputValue !== (0, helpers_1.getOptionLabel)(value) ? inputValue : '';
171
+ loadOptions(multiple ? inputValue : filterValue, pageNumber + 1).then(function (buildOptions) {
124
172
  setOptions(function (options) { return (0, ramda_1.concat)(options.slice(0, pageNumber * max), buildOptions); });
125
173
  setPageNumber(function (page) { return page + 1; });
126
174
  });
@@ -150,10 +198,7 @@ var DependentLookupEditor = function (_a) {
150
198
  container: function (base) { return (__assign(__assign({}, base), (fullWidth ? { width: '100%' } : {}))); }
151
199
  }, noOptionsMessage: function () {
152
200
  return optionsAreLoading && !showMoreButton ? ui_i18n_1.default.text('Loading...') : ui_i18n_1.default.text('No results found');
153
- }, components: SelectComponents, isClearable: true, isSearchable: true, inputValue: inputValue, onInputChange: handleInputChange, loadingMessage: function () { return ui_i18n_1.default.text('Loading...'); }, isLoading: !inputValue && isLoadingDefaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, options: displayedOptions, getOptionValue: (0, ramda_1.either)((0, ramda_1.prop)('value'), (0, ramda_1.prop)('lookupCode')), getOptionLabel: helpers_1.getOptionLabel, onChange: function (value) {
154
- markAsTouched();
155
- onChange(value);
156
- }, value: (0, ramda_1.defaultTo)(multiple ? [] : null, value), menuListFooter: showMoreButton && react_1.default.createElement(LoadMoreButton_1.default, { loading: optionsAreLoading, onClick: loadMoreOptions }) })));
201
+ }, components: SelectComponents, isClearable: true, isSearchable: true, controlShouldRenderValue: multiple, inputValue: inputValue, filterOption: multiple ? undefined : ramda_1.T, onInputChange: handleInputChange, loadingMessage: function () { return ui_i18n_1.default.text('Loading...'); }, isLoading: !inputValue && isLoadingDefaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, options: displayedOptions, getOptionValue: (0, ramda_1.either)((0, ramda_1.prop)('value'), (0, ramda_1.prop)('lookupCode')), getOptionLabel: helpers_1.getOptionLabel, onChange: handleChange, onFocus: multiple ? undefined : handleFocus, value: (0, ramda_1.defaultTo)(multiple ? [] : null, value), menuListFooter: showMoreButton && react_1.default.createElement(LoadMoreButton_1.default, { loading: optionsAreLoading, onClick: loadMoreOptions }) })));
157
202
  };
158
203
  DependentLookupEditor.propTypes = {
159
204
  multiple: prop_types_1.default.bool,
package/cjs/components/editors/DependentLookupEditor/helpers.d.ts CHANGED
@@ -1,7 +1,4 @@
1
- export function getOptionLabel({ lookupCode, value }: {
2
- lookupCode: any;
3
- value: any;
4
- }): any;
1
+ export function getOptionLabel(obj: any): any;
5
2
  export function buildLookupOptions(lookups: any): {
6
3
  lookupCode: string;
7
4
  value: any;
package/cjs/components/editors/DependentLookupEditor/helpers.js CHANGED
@@ -2,8 +2,10 @@
2
2
  Object.defineProperty(exports, "__esModule", { value: true });
3
3
  exports.buildLookupOptions = exports.getOptionLabel = void 0;
4
4
  var mdm_sdk_1 = require("@reltio/mdm-sdk");
5
- var getOptionLabel = function (_a) {
6
- var lookupCode = _a.lookupCode, value = _a.value;
5
+ var getOptionLabel = function (obj) {
6
+ if (!obj)
7
+ return '';
8
+ var lookupCode = obj.lookupCode, value = obj.value;
7
9
  return (0, mdm_sdk_1.getLookupLabel)(lookupCode, value);
8
10
  };
9
11
  exports.getOptionLabel = getOptionLabel;
package/esm/components/editors/DependentLookupEditor/DependentLookupEditor.js CHANGED
@@ -20,11 +20,12 @@ var __rest = (this && this.__rest) || function (s, e) {
20
20
  }
21
21
  return t;
22
22
  };
23
- import React, { useCallback, useRef, useState, useEffect, useMemo } from 'react';
23
+ import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
24
+ import { components } from 'react-select';
24
25
  import PropTypes from 'prop-types';
25
26
  import { debounce, LookupValueType } from '@reltio/mdm-sdk';
26
27
  import Select from '../../ReactSelect/Select';
27
- import { concat, defaultTo, either, isEmpty, prop } from 'ramda';
28
+ import { concat, defaultTo, either, isEmpty, prop, T } from 'ramda';
28
29
  import { buildLookupOptions, getOptionLabel } from './helpers';
29
30
  import i18n from 'ui-i18n';
30
31
  import { EmptyStub } from '../../../core/utils';
@@ -40,6 +41,7 @@ import useAutopopulation from './useAutopopulation';
40
41
  import useSavingFocus from './useSavingFocus';
41
42
  import LoadMoreButton from '../../commonReactSelectComponents/LoadMoreButton';
42
43
  import { useDidUpdateEffect } from '../../../hooks';
44
+ var Input = function (props) { return React.createElement(components.Input, __assign({}, props, { isHidden: false })); };
43
45
  var SelectComponents = {
44
46
  IndicatorSeparator: EmptyStub,
45
47
  LoadingIndicator: EmptyStub,
@@ -47,7 +49,8 @@ var SelectComponents = {
47
49
  DropdownIndicator: DropdownIndicator,
48
50
  Menu: MenuWithPopper,
49
51
  MenuList: MenuList,
50
- MultiValue: MultiValueChip
52
+ MultiValue: MultiValueChip,
53
+ Input: Input
51
54
  };
52
55
  export var DEBOUNCE_INTERVAL = 400;
53
56
  var MAX_DEPENDENT_LOOKUP_VALUES = 50;
@@ -56,6 +59,10 @@ var DependentLookupEditor = function (_a) {
56
59
  var inputRef = useRef(null);
57
60
  var selectRef = useRef(null);
58
61
  var styles = useStyles();
62
+ var _d = useState(''), inputValue = _d[0], setInputValue = _d[1];
63
+ var _e = useState([]), options = _e[0], setOptions = _e[1];
64
+ var _f = useState(1), pageNumber = _f[0], setPageNumber = _f[1];
65
+ var _g = useState(false), optionsAreLoading = _g[0], setOptionsAreLoading = _g[1];
59
66
  useLookupsResolver({
60
67
  lookups: value,
61
68
  resolvedValues: lookups[lookupTypeCode],
@@ -63,15 +70,55 @@ var DependentLookupEditor = function (_a) {
63
70
  onLookupsResolve: function (lookups) { return onChange(multiple ? lookups : lookups[0]); }
64
71
  });
65
72
  useSavingFocus(selectRef, inputRef, disabled);
66
- var _d = useState(''), inputValue = _d[0], setInputValue = _d[1];
67
- var _e = useState([]), options = _e[0], setOptions = _e[1];
68
- var _f = useState(1), pageNumber = _f[0], setPageNumber = _f[1];
69
- var _g = useState(false), optionsAreLoading = _g[0], setOptionsAreLoading = _g[1];
70
- var handleInputChange = function (value) {
71
- if (value !== inputValue) {
72
- setInputValue(value);
73
+ useEffect(function () {
74
+ if (!multiple) {
75
+ setInputValue(getOptionLabel(value));
76
+ setOptions(defaultOptions);
73
77
  setPageNumber(1);
74
- debouncedLoadOptions(value, setOptions);
78
+ }
79
+ }, [value]);
80
+ var handleChange = function (value) {
81
+ markAsTouched();
82
+ onChange(value);
83
+ };
84
+ var handleFocus = function () {
85
+ value && selectRef.current.select.inputRef.select();
86
+ };
87
+ var resetOptions = function () {
88
+ setPageNumber(1);
89
+ debouncedLoadOptions('', setOptions);
90
+ };
91
+ var restoreSelectedOption = function () {
92
+ if (!multiple && inputValue && inputValue !== getOptionLabel(value)) {
93
+ setInputValue(getOptionLabel(value));
94
+ resetOptions();
95
+ }
96
+ };
97
+ var handleInputChange = function (newValue, _a) {
98
+ var action = _a.action;
99
+ switch (action) {
100
+ case 'menu-close': {
101
+ restoreSelectedOption();
102
+ break;
103
+ }
104
+ case 'input-blur': {
105
+ if (multiple && inputValue) {
106
+ setInputValue('');
107
+ resetOptions();
108
+ break;
109
+ }
110
+ restoreSelectedOption();
111
+ break;
112
+ }
113
+ case 'input-change': {
114
+ setInputValue(newValue);
115
+ setPageNumber(1);
116
+ debouncedLoadOptions(newValue, setOptions);
117
+ if (!multiple && newValue === '') {
118
+ handleChange('');
119
+ }
120
+ break;
121
+ }
75
122
  }
76
123
  };
77
124
  var loadOptions = useCallback(function (value, pageNumber) {
@@ -91,7 +138,8 @@ var DependentLookupEditor = function (_a) {
91
138
  .finally(function () { return setOptionsAreLoading(false); });
92
139
  }, [max, lookupTypeCode, parents]);
93
140
  var loadMoreOptions = useCallback(function () {
94
- loadOptions(inputValue, pageNumber + 1).then(function (buildOptions) {
141
+ var filterValue = inputValue !== getOptionLabel(value) ? inputValue : '';
142
+ loadOptions(multiple ? inputValue : filterValue, pageNumber + 1).then(function (buildOptions) {
95
143
  setOptions(function (options) { return concat(options.slice(0, pageNumber * max), buildOptions); });
96
144
  setPageNumber(function (page) { return page + 1; });
97
145
  });
@@ -121,10 +169,7 @@ var DependentLookupEditor = function (_a) {
121
169
  container: function (base) { return (__assign(__assign({}, base), (fullWidth ? { width: '100%' } : {}))); }
122
170
  }, noOptionsMessage: function () {
123
171
  return optionsAreLoading && !showMoreButton ? i18n.text('Loading...') : i18n.text('No results found');
124
- }, components: SelectComponents, isClearable: true, isSearchable: true, inputValue: inputValue, onInputChange: handleInputChange, loadingMessage: function () { return i18n.text('Loading...'); }, isLoading: !inputValue && isLoadingDefaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, options: displayedOptions, getOptionValue: either(prop('value'), prop('lookupCode')), getOptionLabel: getOptionLabel, onChange: function (value) {
125
- markAsTouched();
126
- onChange(value);
127
- }, value: defaultTo(multiple ? [] : null, value), menuListFooter: showMoreButton && React.createElement(LoadMoreButton, { loading: optionsAreLoading, onClick: loadMoreOptions }) })));
172
+ }, components: SelectComponents, isClearable: true, isSearchable: true, controlShouldRenderValue: multiple, inputValue: inputValue, filterOption: multiple ? undefined : T, onInputChange: handleInputChange, loadingMessage: function () { return i18n.text('Loading...'); }, isLoading: !inputValue && isLoadingDefaultOptions, hideSelectedOptions: false, placeholder: placeholder || '', isDisabled: disabled, options: displayedOptions, getOptionValue: either(prop('value'), prop('lookupCode')), getOptionLabel: getOptionLabel, onChange: handleChange, onFocus: multiple ? undefined : handleFocus, value: defaultTo(multiple ? [] : null, value), menuListFooter: showMoreButton && React.createElement(LoadMoreButton, { loading: optionsAreLoading, onClick: loadMoreOptions }) })));
128
173
  };
129
174
  DependentLookupEditor.propTypes = {
130
175
  multiple: PropTypes.bool,
package/esm/components/editors/DependentLookupEditor/helpers.d.ts CHANGED
@@ -1,7 +1,4 @@
1
- export function getOptionLabel({ lookupCode, value }: {
2
- lookupCode: any;
3
- value: any;
4
- }): any;
1
+ export function getOptionLabel(obj: any): any;
5
2
  export function buildLookupOptions(lookups: any): {
6
3
  lookupCode: string;
7
4
  value: any;
package/esm/components/editors/DependentLookupEditor/helpers.js CHANGED
@@ -1,6 +1,8 @@
1
1
  import { getLookupLabel, utils } from '@reltio/mdm-sdk';
2
- var getOptionLabel = function (_a) {
3
- var lookupCode = _a.lookupCode, value = _a.value;
2
+ var getOptionLabel = function (obj) {
3
+ if (!obj)
4
+ return '';
5
+ var lookupCode = obj.lookupCode, value = obj.value;
4
6
  return getLookupLabel(lookupCode, value);
5
7
  };
6
8
  var buildLookupOptions = function (lookups) {
package/package.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@reltio/components",
3
- "version": "1.4.1380",
3
+ "version": "1.4.1382",
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.1380",
11
- "@reltio/mdm-sdk": "^1.4.1380",
10
+ "@reltio/mdm-module": "^1.4.1382",
11
+ "@reltio/mdm-sdk": "^1.4.1382",
12
12
  "classnames": "^2.2.5",
13
13
  "d3-cloud": "^1.2.5",
14
14
  "d3-geo": "^2.0.1",