@mailstep/design-system 0.7.79-beta.8 → 0.7.79-beta.9
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/package.json
CHANGED
|
@@ -44,13 +44,13 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
44
44
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
45
45
|
};
|
|
46
46
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
47
|
-
import { useCallback, useState } from 'react';
|
|
47
|
+
import { useCallback, useState, useMemo } from 'react';
|
|
48
48
|
import Select from '../../../../../Elements/Select';
|
|
49
49
|
import SingleSelect from '../../../../../Elements/SingleSelect';
|
|
50
50
|
import { i18n } from '@lingui/core';
|
|
51
51
|
import isArray from 'lodash/isArray';
|
|
52
|
-
import { isOptionArray } from './guards';
|
|
53
52
|
import uniqBy from 'lodash/uniqBy';
|
|
53
|
+
import { isOptionArray } from './guards';
|
|
54
54
|
var SelectFilter = function (_a) {
|
|
55
55
|
var onChange = _a.onChange, isMulti = _a.isMulti, value = _a.value, options = _a.options, checkAllButton = _a.checkAllButton, asyncLoadKey = _a.asyncLoadKey, onAsyncLoadFilterOptions = _a.onAsyncLoadFilterOptions;
|
|
56
56
|
var _b = useState([]), loadedOptions = _b[0], setLoadedOptions = _b[1];
|
|
@@ -74,9 +74,9 @@ var SelectFilter = function (_a) {
|
|
|
74
74
|
return [2 /*return*/, data];
|
|
75
75
|
}
|
|
76
76
|
});
|
|
77
|
-
}); }, [
|
|
77
|
+
}); }, [asyncLoadKey, onAsyncLoadFilterOptions]);
|
|
78
|
+
var defaultOptions = useMemo(function () { return (isMulti && isAsync && isOptionArray(value) ? uniqBy(__spreadArray(__spreadArray([], loadedOptions, true), value, true), 'value') : undefined); }, [isAsync, value, loadedOptions]);
|
|
78
79
|
if (isMulti) {
|
|
79
|
-
var defaultOptions = isAsync && isOptionArray(value) ? uniqBy(__spreadArray(__spreadArray([], loadedOptions, true), value, true), 'value') : undefined;
|
|
80
80
|
return (_jsx(Select, { maxMenuHeight: 250, onChange: handleOnMultiChange, value: isOptionArray(value) ? value.map(function (option) { return String(option.value); }) : value, options: defaultOptions || options, showSelectAllButton: checkAllButton, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, defaultOptions: defaultOptions, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, noOptionsMessage: function () { return null; }, containerVariant: isAsync ? 'search' : undefined, optionVariant: "checkbox", multiLabelVariant: "count", isMulti: true }));
|
|
81
81
|
}
|
|
82
82
|
return (_jsx(SingleSelect, { maxMenuHeight: 250, onChange: onChange, value: value, options: options, style: "gridFilter", loadOptions: isAsync ? handleLoadOptions : undefined, placeholder: isAsync ? i18n._({ id: 'dataGrid.filterCell', message: 'Type to filter' }) : undefined, isClearable: true }));
|
|
@@ -10,12 +10,19 @@ var __assign = (this && this.__assign) || function () {
|
|
|
10
10
|
return __assign.apply(this, arguments);
|
|
11
11
|
};
|
|
12
12
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import { useMemo } from 'react';
|
|
13
14
|
import { components as selectComponents } from 'react-select';
|
|
14
|
-
import SelectAll from '../components/SelectAll';
|
|
15
15
|
import ResetAll from '../components/ResetAll';
|
|
16
|
+
import SelectAll from '../components/SelectAll';
|
|
16
17
|
var ConnectedMenu = function (props) {
|
|
17
18
|
var theme = props.theme;
|
|
18
|
-
var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value,
|
|
19
|
-
|
|
19
|
+
var _a = props.selectProps, resetGrid = _a.resetGrid, onCustomSelectAll = _a.onCustomSelectAll, onCustomDeselectAll = _a.onCustomDeselectAll, value = _a.value, resetGridButton = _a.resetGridButton, selectAllButton = _a.selectAllButton, maxMenuHeight = _a.maxMenuHeight, isLoading = _a.isLoading;
|
|
20
|
+
// because the filterd options (filterd by the search input) are not passed to the menu list (there are all options),
|
|
21
|
+
// we need to specify them here by children
|
|
22
|
+
var filteredOptions = useMemo(function () { var _a, _b; return (_b = (_a = props.children) === null || _a === void 0 ? void 0 : _a.map) === null || _b === void 0 ? void 0 : _b.call(_a, function (_a) {
|
|
23
|
+
var _b = _a.props, value = _b.value, label = _b.label;
|
|
24
|
+
return ({ label: label, value: value });
|
|
25
|
+
}); }, [props.children]);
|
|
26
|
+
return (_jsxs(selectComponents.MenuList, __assign({}, props, { children: [selectAllButton && !isLoading && (_jsx(SelectAll, { theme: theme, onCustomSelectAll: onCustomSelectAll, onCustomDeselectAll: onCustomDeselectAll, value: value, options: filteredOptions, maxMenuHeight: maxMenuHeight })), props.children, resetGridButton && _jsx(ResetAll, { onReset: resetGrid })] })));
|
|
20
27
|
};
|
|
21
28
|
export default ConnectedMenu;
|
|
@@ -38,7 +38,7 @@ var SelectAll = function (_a) {
|
|
|
38
38
|
setIsSelected(false);
|
|
39
39
|
onCustomDeselectAll();
|
|
40
40
|
}
|
|
41
|
-
}, [isSelected, onCustomDeselectAll, onCustomSelectAll]);
|
|
41
|
+
}, [isSelected, onCustomDeselectAll, onCustomSelectAll, options]);
|
|
42
42
|
useEffect(function () {
|
|
43
43
|
var _a;
|
|
44
44
|
// if the height of all options is higher than maxMenuHeight and the slider is displayed => the indentation needs to be increased
|