@reltio/components 1.4.2159 → 1.4.2161
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/AddressAutocompleteEditor/AddressAutocompleteEditor.d.ts +10 -0
- package/AddressAutocompleteEditor/AddressAutocompleteEditor.js +223 -0
- package/AddressAutocompleteEditor/AddressAutocompleteEditor.module.css.js +9 -0
- package/AddressAutocompleteEditor/AddressAutocompleteEditor.test.d.ts +1 -0
- package/AddressAutocompleteEditor/AddressAutocompleteEditor.test.js +522 -0
- package/AddressAutocompleteEditor/helpers.d.ts +10 -0
- package/AddressAutocompleteEditor/helpers.js +18 -0
- package/AddressAutocompleteEditor/index.d.ts +1 -0
- package/AddressAutocompleteEditor/index.js +1 -0
- package/BasicTable/index.d.ts +1 -0
- package/EditModeAttributesPager/components/AttributeRenderer/AttributeRenderer.js +1 -1
- package/EditorsFactory/EditorsFactory.js +4 -0
- package/ReferenceAttributeEditor/ReferenceAttributeEditor.js +5 -3
- package/RelationEditor/RelationEditor.js +6 -4
- package/SimpleAttributeEditor/SimpleAttributeEditor.d.ts +1 -0
- package/SimpleAttributeEditor/SimpleAttributeEditor.js +15 -4
- package/cjs/AddressAutocompleteEditor/AddressAutocompleteEditor.d.ts +10 -0
- package/cjs/AddressAutocompleteEditor/AddressAutocompleteEditor.js +253 -0
- package/cjs/AddressAutocompleteEditor/AddressAutocompleteEditor.module.css.js +9 -0
- package/cjs/AddressAutocompleteEditor/AddressAutocompleteEditor.test.d.ts +1 -0
- package/cjs/AddressAutocompleteEditor/AddressAutocompleteEditor.test.js +527 -0
- package/cjs/AddressAutocompleteEditor/helpers.d.ts +10 -0
- package/cjs/AddressAutocompleteEditor/helpers.js +24 -0
- package/cjs/AddressAutocompleteEditor/index.d.ts +1 -0
- package/cjs/AddressAutocompleteEditor/index.js +5 -0
- package/cjs/BasicTable/index.d.ts +1 -0
- package/cjs/EditModeAttributesPager/components/AttributeRenderer/AttributeRenderer.js +1 -1
- package/cjs/EditorsFactory/EditorsFactory.js +4 -0
- package/cjs/ReferenceAttributeEditor/ReferenceAttributeEditor.js +5 -3
- package/cjs/RelationEditor/RelationEditor.js +6 -4
- package/cjs/SimpleAttributeEditor/SimpleAttributeEditor.d.ts +1 -0
- package/cjs/SimpleAttributeEditor/SimpleAttributeEditor.js +14 -3
- package/cjs/contexts/AttributeValueContext/index.d.ts +3 -0
- package/cjs/contexts/AttributeValueContext/index.js +9 -0
- package/cjs/contexts/AutoCompleteContext/helpers.d.ts +24 -0
- package/cjs/contexts/AutoCompleteContext/helpers.js +165 -0
- package/cjs/contexts/AutoCompleteContext/index.d.ts +12 -0
- package/cjs/contexts/AutoCompleteContext/index.js +83 -0
- package/cjs/contexts/ProfileTablesContext/index.js +1 -0
- package/contexts/AttributeValueContext/index.d.ts +3 -0
- package/contexts/AttributeValueContext/index.js +3 -0
- package/contexts/AutoCompleteContext/helpers.d.ts +24 -0
- package/contexts/AutoCompleteContext/helpers.js +159 -0
- package/contexts/AutoCompleteContext/index.d.ts +12 -0
- package/contexts/AutoCompleteContext/index.js +56 -0
- package/contexts/ProfileTablesContext/index.js +1 -0
- package/package.json +2 -2
|
@@ -23,11 +23,12 @@ var __rest = (this && this.__rest) || function (s, e) {
|
|
|
23
23
|
import React, { useCallback, useContext, useEffect, useMemo } from 'react';
|
|
24
24
|
import classnames from 'classnames';
|
|
25
25
|
import { has, pipe } from 'ramda';
|
|
26
|
+
import { useContextSelector } from '@fluentui/react-context-selector';
|
|
26
27
|
import AddIcon from '@mui/icons-material/Add';
|
|
27
28
|
import DeleteIcon from '@mui/icons-material/Delete';
|
|
28
29
|
import Typography from '@mui/material/Typography';
|
|
29
30
|
import i18n from 'ui-i18n';
|
|
30
|
-
import { attributeUriToSearchUri, ErrorType, getAttributeValue, getAttrDataTypeDefinition, getErrorId, getErrorMessage, getErrorType, isDependentLookupAttrType, isEditableMode as checkIsEditableMode, Mode } from '@reltio/mdm-sdk';
|
|
31
|
+
import { attributeUriToSearchUri, ErrorType, getAttributeValue, getAttrDataTypeDefinition, getErrorId, getErrorMessage, getErrorType, isDependentLookupAttrType, isEditableMode as checkIsEditableMode, Mode, DataTypes } from '@reltio/mdm-sdk';
|
|
31
32
|
import { DataTypeValue } from '../DataTypeValue';
|
|
32
33
|
import { DataTypeValueEditor } from '../DataTypeValueEditor';
|
|
33
34
|
import { ErrorWrapper } from '../ErrorWrapper';
|
|
@@ -44,6 +45,8 @@ import { useAutopopulationContextValue } from './useAutopopulationContextValue';
|
|
|
44
45
|
import { useAttributeValuePermissions } from './useAttributeValuePermissions';
|
|
45
46
|
import { DependentLookupAutopopulationContext } from '../contexts/DependentLookupAutopopulationContext';
|
|
46
47
|
import { useStyles } from './styles';
|
|
48
|
+
import { AddressAutoCompleteContext } from '../contexts/AutoCompleteContext';
|
|
49
|
+
import { AttributeValueContext } from '../contexts/AttributeValueContext';
|
|
47
50
|
var AsyncMountPlaceholder = function () {
|
|
48
51
|
var styles = useStyles();
|
|
49
52
|
return React.createElement("div", { className: styles.placeholder });
|
|
@@ -51,7 +54,7 @@ var AsyncMountPlaceholder = function () {
|
|
|
51
54
|
var SimpleAttributeEditor = function (_a) {
|
|
52
55
|
var _b, _c;
|
|
53
56
|
var _d;
|
|
54
|
-
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, _e = _a.isEmptyEditor, isEmptyEditor = _e === void 0 ? false : _e, otherProps = __rest(_a, ["className", "attributeValue", "attributeType", "isReltioCrosswalk", "ownError", "mode", "onAddOneMore", "onDeleteAttribute", "onChangeAttribute", "onDeactivateError", "additionalControlsRenderer", "state", "highlightedError", "isEmptyEditor"]);
|
|
57
|
+
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, _e = _a.isEmptyEditor, isEmptyEditor = _e === void 0 ? false : _e, isFirstEditor = _a.isFirstEditor, otherProps = __rest(_a, ["className", "attributeValue", "attributeType", "isReltioCrosswalk", "ownError", "mode", "onAddOneMore", "onDeleteAttribute", "onChangeAttribute", "onDeactivateError", "additionalControlsRenderer", "state", "highlightedError", "isEmptyEditor", "isFirstEditor"]);
|
|
55
58
|
var styles = useStyles();
|
|
56
59
|
var deleted = state === 'deleted';
|
|
57
60
|
var edited = state === 'edited';
|
|
@@ -65,6 +68,7 @@ var SimpleAttributeEditor = function (_a) {
|
|
|
65
68
|
var showToEdit = canEdit && isEditableMode && !attributeValue.masked;
|
|
66
69
|
var errorMessage = getErrorMessage(ownError);
|
|
67
70
|
var dependentLookupEditorContext = useMdmDependentLookupEditorContext(attributeValue, attributeType);
|
|
71
|
+
var isAutocompleteTriggerAttribute = useContextSelector(AddressAutoCompleteContext, function (c) { return c === null || c === void 0 ? void 0 : c.isAutocompleteTriggerAttribute; });
|
|
68
72
|
var _g = useScrollToAttributeError({ highlightedError: highlightedError, isSimple: true }), ref = _g.ref, errorClassName = _g.errorClassName;
|
|
69
73
|
useEffect(function () {
|
|
70
74
|
// when editor is empty but has default lookup code, onChangeAttribute will be called by useLookupsResolver
|
|
@@ -77,7 +81,13 @@ var SimpleAttributeEditor = function (_a) {
|
|
|
77
81
|
});
|
|
78
82
|
}
|
|
79
83
|
}, [isEmptyEditor]);
|
|
80
|
-
var dataTypeDefinition = useMemo(function () {
|
|
84
|
+
var dataTypeDefinition = useMemo(function () {
|
|
85
|
+
var dataTypeDefinition = getAttrDataTypeDefinition(attributeType);
|
|
86
|
+
if (isFirstEditor && (isAutocompleteTriggerAttribute === null || isAutocompleteTriggerAttribute === void 0 ? void 0 : isAutocompleteTriggerAttribute(attributeType))) {
|
|
87
|
+
return __assign(__assign({}, dataTypeDefinition), { type: DataTypes.TYPE_ADDRESS_AUTOCOMPLETE });
|
|
88
|
+
}
|
|
89
|
+
return dataTypeDefinition;
|
|
90
|
+
}, [attributeType, isAutocompleteTriggerAttribute, isFirstEditor]);
|
|
81
91
|
var value = useMemo(function () { return attributeValueToEditorValue(attributeValue, dataTypeDefinition); }, [attributeValue, dataTypeDefinition]);
|
|
82
92
|
var deactivateError = useCallback(function () {
|
|
83
93
|
if (ownError) {
|
|
@@ -110,7 +120,8 @@ var SimpleAttributeEditor = function (_a) {
|
|
|
110
120
|
return (React.createElement("div", { ref: ref, "data-reltio-id": "simple-attribute-editor", className: classnames(styles.editor, className, errorClassName) },
|
|
111
121
|
React.createElement(ErrorWrapper, { errorMessage: errorMessage, className: styles.errorWrapper },
|
|
112
122
|
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(DependentLookupAutopopulationContext.Provider, { value: autopopulationContextValue },
|
|
113
|
-
React.createElement(
|
|
123
|
+
React.createElement(AttributeValueContext.Provider, { value: attributeValue },
|
|
124
|
+
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 })))),
|
|
114
125
|
React.createElement("div", { "data-reltio-id": "reltio-attribute-actions", className: styles['editor-actions'] },
|
|
115
126
|
edited && (React.createElement(Typography, { variant: "caption", className: styles.editedLabel },
|
|
116
127
|
"(",
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
import { TextFieldProps } from '@mui/material/TextField';
|
|
3
|
+
export declare const INPUT_DEBOUNCE_INTERVAL = 400;
|
|
4
|
+
type Props = Omit<TextFieldProps, 'onChange' | 'value'> & {
|
|
5
|
+
value?: string;
|
|
6
|
+
onChange?: (value: string) => void;
|
|
7
|
+
fullWidth?: boolean;
|
|
8
|
+
};
|
|
9
|
+
export declare const AddressAutocompleteEditor: ({ value, onChange, InputProps, fullWidth, ...otherProps }: Props) => React.JSX.Element;
|
|
10
|
+
export {};
|
|
@@ -0,0 +1,253 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __assign = (this && this.__assign) || function () {
|
|
3
|
+
__assign = Object.assign || function(t) {
|
|
4
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
+
s = arguments[i];
|
|
6
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
+
t[p] = s[p];
|
|
8
|
+
}
|
|
9
|
+
return t;
|
|
10
|
+
};
|
|
11
|
+
return __assign.apply(this, arguments);
|
|
12
|
+
};
|
|
13
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
14
|
+
if (k2 === undefined) k2 = k;
|
|
15
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
16
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
17
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
18
|
+
}
|
|
19
|
+
Object.defineProperty(o, k2, desc);
|
|
20
|
+
}) : (function(o, m, k, k2) {
|
|
21
|
+
if (k2 === undefined) k2 = k;
|
|
22
|
+
o[k2] = m[k];
|
|
23
|
+
}));
|
|
24
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
25
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
26
|
+
}) : function(o, v) {
|
|
27
|
+
o["default"] = v;
|
|
28
|
+
});
|
|
29
|
+
var __importStar = (this && this.__importStar) || function (mod) {
|
|
30
|
+
if (mod && mod.__esModule) return mod;
|
|
31
|
+
var result = {};
|
|
32
|
+
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
|
|
33
|
+
__setModuleDefault(result, mod);
|
|
34
|
+
return result;
|
|
35
|
+
};
|
|
36
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
37
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
38
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
39
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
40
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
41
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
42
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
46
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
47
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
48
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
49
|
+
function step(op) {
|
|
50
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
51
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
52
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
53
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
54
|
+
switch (op[0]) {
|
|
55
|
+
case 0: case 1: t = op; break;
|
|
56
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
57
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
58
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
59
|
+
default:
|
|
60
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
61
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
62
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
63
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
64
|
+
if (t[2]) _.ops.pop();
|
|
65
|
+
_.trys.pop(); continue;
|
|
66
|
+
}
|
|
67
|
+
op = body.call(thisArg, _);
|
|
68
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
69
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
73
|
+
var t = {};
|
|
74
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
75
|
+
t[p] = s[p];
|
|
76
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
77
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
78
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
79
|
+
t[p[i]] = s[p[i]];
|
|
80
|
+
}
|
|
81
|
+
return t;
|
|
82
|
+
};
|
|
83
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
84
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
85
|
+
};
|
|
86
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
87
|
+
exports.AddressAutocompleteEditor = exports.INPUT_DEBOUNCE_INTERVAL = void 0;
|
|
88
|
+
var react_1 = __importStar(require("react"));
|
|
89
|
+
var classnames_1 = __importDefault(require("classnames"));
|
|
90
|
+
var ramda_1 = require("ramda");
|
|
91
|
+
var react_context_selector_1 = require("@fluentui/react-context-selector");
|
|
92
|
+
var Autocomplete_1 = __importDefault(require("@mui/material/Autocomplete"));
|
|
93
|
+
var ListItem_1 = __importDefault(require("@mui/material/ListItem"));
|
|
94
|
+
var ListItemText_1 = __importDefault(require("@mui/material/ListItemText"));
|
|
95
|
+
var LinearProgress_1 = __importDefault(require("@mui/material/LinearProgress"));
|
|
96
|
+
var Typography_1 = __importDefault(require("@mui/material/Typography"));
|
|
97
|
+
var TextField_1 = __importDefault(require("@mui/material/TextField"));
|
|
98
|
+
var ArrowForwardIos_1 = __importDefault(require("@mui/icons-material/ArrowForwardIos"));
|
|
99
|
+
var ui_i18n_1 = __importDefault(require("ui-i18n"));
|
|
100
|
+
var mdm_sdk_1 = require("@reltio/mdm-sdk");
|
|
101
|
+
var AutoCompleteContext_1 = require("../contexts/AutoCompleteContext");
|
|
102
|
+
var AttributeValueContext_1 = require("../contexts/AttributeValueContext");
|
|
103
|
+
var helpers_1 = require("./helpers");
|
|
104
|
+
var useSafePromise_1 = require("../hooks/useSafePromise");
|
|
105
|
+
var AddressAutocompleteEditor_module_css_1 = __importDefault(require("./AddressAutocompleteEditor.module.css"));
|
|
106
|
+
exports.INPUT_DEBOUNCE_INTERVAL = 400;
|
|
107
|
+
var AddressAutocompleteEditor = function (_a) {
|
|
108
|
+
var _b = _a.value, value = _b === void 0 ? '' : _b, onChange = _a.onChange, InputProps = _a.InputProps, _c = _a.fullWidth, fullWidth = _c === void 0 ? true : _c, otherProps = __rest(_a, ["value", "onChange", "InputProps", "fullWidth"]);
|
|
109
|
+
var _d = (0, react_1.useState)(value), inputValue = _d[0], setInputValue = _d[1];
|
|
110
|
+
var _e = (0, react_1.useState)([]), options = _e[0], setOptions = _e[1];
|
|
111
|
+
var _f = (0, react_1.useState)(false), loading = _f[0], setLoading = _f[1];
|
|
112
|
+
var _g = (0, react_1.useState)(false), detailsLoading = _g[0], setDetailsLoading = _g[1];
|
|
113
|
+
var _h = (0, react_1.useState)(false), open = _h[0], setOpen = _h[1];
|
|
114
|
+
var searchSafePromise = (0, useSafePromise_1.useSafePromise)();
|
|
115
|
+
var detailsSafePromise = (0, useSafePromise_1.useSafePromise)();
|
|
116
|
+
var onPopulateAttributes = (0, react_context_selector_1.useContextSelector)(AutoCompleteContext_1.AddressAutoCompleteContext, function (c) { return c === null || c === void 0 ? void 0 : c.onPopulateAttributes; });
|
|
117
|
+
var getAutocompleteSettings = (0, react_context_selector_1.useContextSelector)(AutoCompleteContext_1.AddressAutoCompleteContext, function (c) { return c === null || c === void 0 ? void 0 : c.getAutocompleteSettings; });
|
|
118
|
+
var _j = (0, react_1.useContext)(AttributeValueContext_1.AttributeValueContext) || {}, valueUri = _j.uri, attributeTypeUri = _j.type;
|
|
119
|
+
var autocompleteSettings = (0, react_1.useMemo)(function () { return getAutocompleteSettings === null || getAutocompleteSettings === void 0 ? void 0 : getAutocompleteSettings(attributeTypeUri, valueUri); }, [getAutocompleteSettings, valueUri, attributeTypeUri]);
|
|
120
|
+
var countries = autocompleteSettings.countries, countryNames = autocompleteSettings.countryNames, limit = autocompleteSettings.limit, minSearchTextLen = autocompleteSettings.minSearchTextLen;
|
|
121
|
+
var countriesHash = countries.toString();
|
|
122
|
+
(0, react_1.useEffect)(function () {
|
|
123
|
+
setOptions([]);
|
|
124
|
+
}, [countriesHash]);
|
|
125
|
+
var fetchAddressSuggestions = (0, react_1.useCallback)(function (searchTerm) { return __awaiter(void 0, void 0, void 0, function () {
|
|
126
|
+
var results, convertedOptions, error_1;
|
|
127
|
+
return __generator(this, function (_a) {
|
|
128
|
+
switch (_a.label) {
|
|
129
|
+
case 0:
|
|
130
|
+
setLoading(true);
|
|
131
|
+
_a.label = 1;
|
|
132
|
+
case 1:
|
|
133
|
+
_a.trys.push([1, 3, 4, 5]);
|
|
134
|
+
return [4 /*yield*/, searchSafePromise((0, mdm_sdk_1.searchAddresses)({
|
|
135
|
+
text: searchTerm,
|
|
136
|
+
limit: limit,
|
|
137
|
+
countries: countries
|
|
138
|
+
}))];
|
|
139
|
+
case 2:
|
|
140
|
+
results = _a.sent();
|
|
141
|
+
convertedOptions = results.map(helpers_1.convertSearchResultToOption);
|
|
142
|
+
setOptions(convertedOptions);
|
|
143
|
+
return [3 /*break*/, 5];
|
|
144
|
+
case 3:
|
|
145
|
+
error_1 = _a.sent();
|
|
146
|
+
console.warn('Error fetching address suggestions:', error_1);
|
|
147
|
+
setOptions([]);
|
|
148
|
+
return [3 /*break*/, 5];
|
|
149
|
+
case 4:
|
|
150
|
+
setLoading(false);
|
|
151
|
+
return [7 /*endfinally*/];
|
|
152
|
+
case 5: return [2 /*return*/];
|
|
153
|
+
}
|
|
154
|
+
});
|
|
155
|
+
}); }, [countries, limit, searchSafePromise]);
|
|
156
|
+
var fetchAddressDetailsById = (0, react_1.useCallback)(function (addressId) { return __awaiter(void 0, void 0, void 0, function () {
|
|
157
|
+
var error_2;
|
|
158
|
+
return __generator(this, function (_a) {
|
|
159
|
+
switch (_a.label) {
|
|
160
|
+
case 0:
|
|
161
|
+
setDetailsLoading(true);
|
|
162
|
+
_a.label = 1;
|
|
163
|
+
case 1:
|
|
164
|
+
_a.trys.push([1, 3, 4, 5]);
|
|
165
|
+
return [4 /*yield*/, detailsSafePromise((0, mdm_sdk_1.fetchAddressDetails)(addressId))];
|
|
166
|
+
case 2: return [2 /*return*/, _a.sent()];
|
|
167
|
+
case 3:
|
|
168
|
+
error_2 = _a.sent();
|
|
169
|
+
console.warn('Error fetching address details:', error_2);
|
|
170
|
+
return [2 /*return*/, null];
|
|
171
|
+
case 4:
|
|
172
|
+
setDetailsLoading(false);
|
|
173
|
+
return [7 /*endfinally*/];
|
|
174
|
+
case 5: return [2 /*return*/];
|
|
175
|
+
}
|
|
176
|
+
});
|
|
177
|
+
}); }, [detailsSafePromise]);
|
|
178
|
+
var debouncedFetchAddressSuggestions = (0, react_1.useCallback)((0, mdm_sdk_1.debounce)(fetchAddressSuggestions, exports.INPUT_DEBOUNCE_INTERVAL), [
|
|
179
|
+
fetchAddressSuggestions
|
|
180
|
+
]);
|
|
181
|
+
var handleInputChange = (0, react_1.useCallback)(function (event, newInputValue) {
|
|
182
|
+
setInputValue(newInputValue);
|
|
183
|
+
if (newInputValue.trim().length >= minSearchTextLen) {
|
|
184
|
+
debouncedFetchAddressSuggestions(newInputValue);
|
|
185
|
+
}
|
|
186
|
+
else {
|
|
187
|
+
setOptions([]);
|
|
188
|
+
}
|
|
189
|
+
}, [debouncedFetchAddressSuggestions, minSearchTextLen]);
|
|
190
|
+
var handleOptionSelect = (0, react_1.useCallback)(function (event, selectedOption) { return __awaiter(void 0, void 0, void 0, function () {
|
|
191
|
+
var addressDetail;
|
|
192
|
+
return __generator(this, function (_a) {
|
|
193
|
+
switch (_a.label) {
|
|
194
|
+
case 0:
|
|
195
|
+
if (!selectedOption) return [3 /*break*/, 3];
|
|
196
|
+
if (selectedOption.type === mdm_sdk_1.AddressType.Container) {
|
|
197
|
+
return [2 /*return*/];
|
|
198
|
+
}
|
|
199
|
+
setInputValue(selectedOption.fullAddress);
|
|
200
|
+
if (onChange) {
|
|
201
|
+
onChange(selectedOption.fullAddress);
|
|
202
|
+
}
|
|
203
|
+
if (!onPopulateAttributes) return [3 /*break*/, 2];
|
|
204
|
+
return [4 /*yield*/, fetchAddressDetailsById(selectedOption.id)];
|
|
205
|
+
case 1:
|
|
206
|
+
addressDetail = _a.sent();
|
|
207
|
+
onPopulateAttributes(attributeTypeUri, valueUri, addressDetail === null || addressDetail === void 0 ? void 0 : addressDetail[0]);
|
|
208
|
+
_a.label = 2;
|
|
209
|
+
case 2:
|
|
210
|
+
setOpen(false);
|
|
211
|
+
return [3 /*break*/, 4];
|
|
212
|
+
case 3:
|
|
213
|
+
setInputValue('');
|
|
214
|
+
if (onChange) {
|
|
215
|
+
onChange('');
|
|
216
|
+
}
|
|
217
|
+
_a.label = 4;
|
|
218
|
+
case 4: return [2 /*return*/];
|
|
219
|
+
}
|
|
220
|
+
});
|
|
221
|
+
}); }, [fetchAddressDetailsById, onChange, onPopulateAttributes, attributeTypeUri, valueUri]);
|
|
222
|
+
var handleBlur = (0, react_1.useCallback)(function () {
|
|
223
|
+
setOpen(false);
|
|
224
|
+
}, []);
|
|
225
|
+
var renderOption = (0, react_1.useCallback)(function (props, option) {
|
|
226
|
+
var _a;
|
|
227
|
+
var isContainer = option.type === mdm_sdk_1.AddressType.Container;
|
|
228
|
+
return (react_1.default.createElement(ListItem_1.default, __assign({}, props, { className: (0, classnames_1.default)(AddressAutocompleteEditor_module_css_1.default.option, (_a = {}, _a[AddressAutocompleteEditor_module_css_1.default.containerOption] = isContainer, _a)) }),
|
|
229
|
+
react_1.default.createElement(ListItemText_1.default, { primary: option.fullAddress, primaryTypographyProps: { variant: 'body1' }, secondaryTypographyProps: { variant: 'body2', color: 'textSecondary' } }),
|
|
230
|
+
isContainer && (react_1.default.createElement("div", null,
|
|
231
|
+
react_1.default.createElement(ArrowForwardIos_1.default, null)))));
|
|
232
|
+
}, []);
|
|
233
|
+
var renderInput = (0, react_1.useCallback)(function (props) { return (react_1.default.createElement(TextField_1.default, __assign({}, otherProps, props, { placeholder: ui_i18n_1.default.text('Start typing to autocomplete'), fullWidth: fullWidth, onBlur: handleBlur, InputProps: __assign(__assign(__assign({}, InputProps), props.InputProps), { endAdornment: react_1.default.createElement(react_1.default.Fragment, null, props.InputProps.endAdornment) }) }))); }, [fullWidth, handleBlur, InputProps, otherProps]);
|
|
234
|
+
var renderListbox = (0, react_1.useCallback)(react_1.default.forwardRef(function ListboxComponent(props, ref) {
|
|
235
|
+
return (react_1.default.createElement(react_1.default.Fragment, null,
|
|
236
|
+
detailsLoading && react_1.default.createElement(LinearProgress_1.default, { color: "primary" }),
|
|
237
|
+
react_1.default.createElement("ul", __assign({ ref: ref }, props),
|
|
238
|
+
react_1.default.createElement("li", { className: AddressAutocompleteEditor_module_css_1.default.countryHeader },
|
|
239
|
+
react_1.default.createElement(Typography_1.default, { variant: "body2", fontWeight: 500 },
|
|
240
|
+
ui_i18n_1.default.text('Searching in'),
|
|
241
|
+
": ",
|
|
242
|
+
countryNames.join(', ')),
|
|
243
|
+
react_1.default.createElement(Typography_1.default, { variant: "caption", color: "textSecondary" }, ui_i18n_1.default.text('To search in a different country, update the Country field'))),
|
|
244
|
+
props.children)));
|
|
245
|
+
}), [detailsLoading, countryNames]);
|
|
246
|
+
var openOptionsList = (0, react_1.useCallback)(function (_event) {
|
|
247
|
+
setOpen(true);
|
|
248
|
+
}, []);
|
|
249
|
+
return (react_1.default.createElement(Autocomplete_1.default, { className: AddressAutocompleteEditor_module_css_1.default.root, open: open, onOpen: openOptionsList, value: inputValue, onChange: handleOptionSelect, inputValue: inputValue, onInputChange: handleInputChange, options: options, getOptionLabel: helpers_1.getOptionLabel, loading: loading, renderInput: renderInput, renderOption: renderOption, renderGroup: function (params) { return params.children; }, ListboxComponent: renderListbox, noOptionsText: inputValue.trim().length < minSearchTextLen
|
|
250
|
+
? ui_i18n_1.default.text('Please enter at least {{minSearchTextLen}} characters', { minSearchTextLen: minSearchTextLen })
|
|
251
|
+
: ui_i18n_1.default.text('No addresses found'), loadingText: ui_i18n_1.default.text('Searching addresses...'), filterOptions: ramda_1.identity, isOptionEqualToValue: helpers_1.isOptionEqualToValue, popupIcon: null, clearIcon: null, freeSolo: true, "data-reltio-id": "address-autocomplete-editor" }));
|
|
252
|
+
};
|
|
253
|
+
exports.AddressAutocompleteEditor = AddressAutocompleteEditor;
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
const styles = {"root":"AddressAutocompleteEditor-root--1FDrD","countryHeader":"AddressAutocompleteEditor-countryHeader--k5tRp","loadingContainer":"AddressAutocompleteEditor-loadingContainer--j-U45","option":"AddressAutocompleteEditor-option--3hah-","containerOption":"AddressAutocompleteEditor-containerOption--aLgUn","listbox":"AddressAutocompleteEditor-listbox--cZCpg"};
|
|
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 = `.AddressAutocompleteEditor-root--1FDrD{width:100%}.AddressAutocompleteEditor-countryHeader--k5tRp{background-color:rgba(0,0,0,.04);border-bottom:1px solid rgba(0,0,0,.12);font-weight:500;padding:8px 16px}.AddressAutocompleteEditor-loadingContainer--j-U45{align-items:center;display:flex;justify-content:center;padding:16px}.AddressAutocompleteEditor-option--3hah-{padding:8px 16px}.AddressAutocompleteEditor-containerOption--aLgUn:hover{background-color:rgba(0,0,0,.04)!important}.AddressAutocompleteEditor-listbox--cZCpg{padding:0}`;
|
|
7
|
+
head.appendChild(style);
|
|
8
|
+
}
|
|
9
|
+
module.exports = styles;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export {};
|