@reltio/components 1.4.1836-hf → 1.4.1837

package/esm/DependentLookupEditor/DependentLookupEditor.js

@@ -0,0 +1,198 @@
+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);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import classnames from 'classnames';
+import { components } from 'react-select';
+import PropTypes from 'prop-types';
+import { debounce, LookupValueType } from '@reltio/mdm-sdk';
+import { concat, defaultTo, either, isEmpty, prop, T } from 'ramda';
+import i18n from 'ui-i18n';
+import { EmptyStub } from '../core/utils';
+import { useDidUpdateEffect } from '../hooks/useDidUpdateEffect';
+import { ReactSelectDropdownIndicator } from '../ReactSelectDropdownIndicator';
+import { ReactSelectMenuWithPopper } from '../ReactSelectMenuWithPopper';
+import { ReactSelectMenuList } from '../ReactSelectMenuList';
+import { ReactSelectOptionWithCheckIcon } from '../ReactSelectOptionWithCheckIcon';
+import { ReactSelectLoadMoreButton } from '../ReactSelectLoadMoreButton';
+import Select from '../components/ReactSelect/Select';
+import { MultiValueChip } from '../MultiValueChip';
+import { useLookupsResolver } from './useLookupsResolver';
+import { useDefaultOptions } from './useDefaultOptions';
+import { useAutopopulation } from './useAutopopulation';
+import { useSavingFocus } from './useSavingFocus';
+import { buildLookupOptions, getOptionLabel } from './helpers';
+import { useStyles } from './styles';
+var Input = function (props) {
+    var _a;
+    var styles = useStyles();
+    var isCrossedOut = props.selectProps.isCrossedOut;
+    return (React.createElement(components.Input, __assign({}, props, { inputClassName: classnames((_a = {}, _a[styles.isCrossedOut] = isCrossedOut, _a)), isHidden: false })));
+};
+var SelectComponents = {
+    IndicatorSeparator: EmptyStub,
+    LoadingIndicator: EmptyStub,
+    Option: ReactSelectOptionWithCheckIcon,
+    DropdownIndicator: ReactSelectDropdownIndicator,
+    Menu: ReactSelectMenuWithPopper,
+    MenuList: ReactSelectMenuList,
+    MultiValue: MultiValueChip,
+    Input: Input
+};
+export var DEBOUNCE_INTERVAL = 400;
+var MAX_DEPENDENT_LOOKUP_VALUES = 50;
+export var DependentLookupEditor = function (_a) {
+    var multiple = _a.multiple, value = _a.value, lookupTypeCode = _a.lookupCode, TextFieldProps = _a.TextFieldProps, parents = _a.parents, onChange = _a.onChange, getLookups = _a.getLookups, _b = _a.lookups, lookups = _b === void 0 ? {} : _b, resolveLookups = _a.resolveLookups, fullWidth = _a.fullWidth, disabled = _a.disabled, placeholder = _a.placeholder, _c = _a.max, max = _c === void 0 ? MAX_DEPENDENT_LOOKUP_VALUES : _c, otherProps = __rest(_a, ["multiple", "value", "lookupCode", "TextFieldProps", "parents", "onChange", "getLookups", "lookups", "resolveLookups", "fullWidth", "disabled", "placeholder", "max"]);
+    var inputRef = useRef(null);
+    var selectRef = useRef(null);
+    var styles = useStyles();
+    var _d = useState(''), inputValue = _d[0], setInputValue = _d[1];
+    var _e = useState([]), options = _e[0], setOptions = _e[1];
+    var _f = useState(1), pageNumber = _f[0], setPageNumber = _f[1];
+    var _g = useState(false), optionsAreLoading = _g[0], setOptionsAreLoading = _g[1];
+    useLookupsResolver({
+        lookups: value,
+        resolvedValues: lookups[lookupTypeCode],
+        resolveLookups: function (codeValues) { return resolveLookups(lookupTypeCode, codeValues); },
+        onLookupsResolve: function (lookups) { return onChange(multiple ? lookups : lookups[0]); }
+    });
+    useSavingFocus(selectRef, inputRef, disabled);
+    useEffect(function () {
+        if (!multiple) {
+            setInputValue(getOptionLabel(value));
+            setOptions(defaultOptions);
+            setPageNumber(1);
+        }
+    }, [value]);
+    var handleChange = function (value) {
+        markAsTouched();
+        onChange(value);
+    };
+    var handleFocus = function () {
+        var _a, _b, _c;
+        value && ((_c = (_b = (_a = selectRef.current) === null || _a === void 0 ? void 0 : _a.select) === null || _b === void 0 ? void 0 : _b.inputRef) === null || _c === void 0 ? void 0 : _c.select());
+    };
+    var resetOptions = function () {
+        setPageNumber(1);
+        debouncedLoadOptions('', setOptions);
+    };
+    var restoreSelectedOption = function () {
+        if (!multiple && inputValue && inputValue !== getOptionLabel(value)) {
+            setInputValue(getOptionLabel(value));
+            resetOptions();
+        }
+    };
+    var handleInputChange = function (newValue, _a) {
+        var action = _a.action;
+        switch (action) {
+            case 'menu-close': {
+                restoreSelectedOption();
+                break;
+            }
+            case 'input-blur': {
+                if (multiple && inputValue) {
+                    setInputValue('');
+                    resetOptions();
+                    break;
+                }
+                restoreSelectedOption();
+                break;
+            }
+            case 'input-change': {
+                setInputValue(newValue);
+                setPageNumber(1);
+                debouncedLoadOptions(newValue, setOptions);
+                if (!multiple && newValue === '') {
+                    handleChange('');
+                }
+                break;
+            }
+        }
+    };
+    var loadOptions = useCallback(function (value, pageNumber) {
+        if (pageNumber === void 0) { pageNumber = 1; }
+        setOptionsAreLoading(true);
+        return (parents === null
+            ? Promise.resolve([])
+            : getLookups({
+                type: lookupTypeCode,
+                parents: parents,
+                displayNamePrefix: value,
+                max: max + 1,
+                offset: (pageNumber - 1) * max
+            }))
+            .then(function (buildOptions) { return buildLookupOptions(buildOptions); })
+            .catch(function () { return []; })
+            .finally(function () { return setOptionsAreLoading(false); });
+    }, [max, lookupTypeCode, parents]);
+    var loadMoreOptions = useCallback(function () {
+        var filterValue = inputValue !== getOptionLabel(value) ? inputValue : '';
+        loadOptions(multiple ? inputValue : filterValue, pageNumber + 1).then(function (buildOptions) {
+            setOptions(function (options) { return concat(options.slice(0, pageNumber * max), buildOptions); });
+            setPageNumber(function (page) { return page + 1; });
+        });
+    }, [max, loadOptions, inputValue, pageNumber]);
+    var debouncedLoadOptions = useCallback(debounce(function (value, callback) {
+        loadOptions(value).then(function (options) { return callback(options); });
+    }, DEBOUNCE_INTERVAL), [loadOptions]);
+    var _h = useDefaultOptions(loadOptions), defaultOptions = _h.defaultOptions, initialDefaultOptions = _h.initialDefaultOptions, isLoadingDefaultOptions = _h.isLoading;
+    useEffect(function () {
+        setOptions(defaultOptions);
+    }, [defaultOptions]);
+    useDidUpdateEffect(function () {
+        setPageNumber(1);
+    }, [lookupTypeCode]);
+    var displayedOptions = useMemo(function () { return options.slice(0, pageNumber * max); }, [max, options, pageNumber]);
+    var showMoreButton = options.length > displayedOptions.length;
+    var isEmptyValue = multiple ? isEmpty(value) : !(value === null || value === void 0 ? void 0 : value.lookupCode) && !(value === null || value === void 0 ? void 0 : value.value);
+    var markAsTouched = useAutopopulation({
+        initialDefaultOptions: initialDefaultOptions,
+        isEmptyValue: isEmptyValue,
+        multiple: multiple,
+        onChange: onChange
+    }).markAsTouched;
+    return (React.createElement(Select, __assign({}, otherProps, { isMulti: multiple, classes: styles, menuPortalTarget: document.body, menuPlacement: "auto", TextFieldProps: __assign(__assign({}, TextFieldProps), { ref: inputRef, disabled: (TextFieldProps === null || TextFieldProps === void 0 ? void 0 : TextFieldProps.disabled) || disabled }), inputRef: inputRef, innerRef: selectRef, styles: {
+            menuPortal: function (base) { return (__assign(__assign({}, base), { zIndex: 1300 })); },
+            container: function (base) { return (__assign(__assign({}, base), (fullWidth ? { width: '100%' } : {}))); }
+        }, noOptionsMessage: function () {
+            return optionsAreLoading && !showMoreButton ? i18n.text('Loading...') : i18n.text('No results found');
+        }, 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(ReactSelectLoadMoreButton, { loading: optionsAreLoading, onClick: loadMoreOptions }) })));
+};
+DependentLookupEditor.propTypes = {
+    multiple: PropTypes.bool,
+    value: PropTypes.oneOfType([LookupValueType, PropTypes.arrayOf(LookupValueType)]),
+    TextFieldProps: PropTypes.shape({
+        variant: PropTypes.string,
+        margin: PropTypes.string,
+        hiddenLabel: PropTypes.bool
+    }),
+    lookupCode: PropTypes.string.isRequired,
+    parents: PropTypes.array,
+    getLookups: PropTypes.func,
+    onChange: PropTypes.func,
+    lookups: PropTypes.object,
+    resolveLookups: PropTypes.func,
+    fullWidth: PropTypes.bool,
+    placeholder: PropTypes.string,
+    disabled: PropTypes.bool,
+    max: PropTypes.number
+};

package/esm/DependentLookupEditor/DependentLookupEditor.test.d.ts

@@ -0,0 +1 @@
+export {};