fuse-importer 0.26.4 → 0.26.6
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.
|
@@ -1,24 +1,24 @@
|
|
|
1
1
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
-
import { useState } from "react";
|
|
3
2
|
import * as S from "./FilterByErrors.styles";
|
|
4
3
|
import { useSpreadsheetContext } from "../../../../Importer";
|
|
5
4
|
import { formatErrors, getUniqueErrors } from "./functions";
|
|
6
5
|
import { useTranslation } from "react-i18next";
|
|
7
6
|
import { addToast } from "../../../../common/Toast";
|
|
8
7
|
export var FilterByErrors = function () {
|
|
9
|
-
var _a
|
|
10
|
-
var _b =
|
|
8
|
+
var _a;
|
|
9
|
+
var _b = useSpreadsheetContext(), errors = _b.errors, fields = _b.fields, selectedErrorToFilter = _b.selectedErrorToFilter, setSelectedErrorToFilter = _b.setSelectedErrorToFilter;
|
|
11
10
|
var t = useTranslation("review").t;
|
|
12
|
-
var prefix = "
|
|
13
|
-
var
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
11
|
+
var prefix = "".concat(t("table_actions.filter_by_errors.filter_by_errors"), ": ");
|
|
12
|
+
var search_or_select = t("table_actions.filter_by_errors.search_or_select");
|
|
13
|
+
var getSelectedErrorLabel = function (selectedFieldName) {
|
|
14
|
+
var _a;
|
|
15
|
+
var selectedField = fields.filter(function (field) { return (field === null || field === void 0 ? void 0 : field.name) === selectedFieldName; });
|
|
16
|
+
var label = ((_a = selectedField === null || selectedField === void 0 ? void 0 : selectedField[0]) === null || _a === void 0 ? void 0 : _a.label) || selectedFieldName;
|
|
17
|
+
return label;
|
|
17
18
|
};
|
|
18
19
|
var onChange = function (selected) {
|
|
19
20
|
if (selected) {
|
|
20
|
-
var
|
|
21
|
-
var label = selectedField[0].label || selected;
|
|
21
|
+
var label = getSelectedErrorLabel(selected);
|
|
22
22
|
addToast("Showing only the rows with error on the ".concat(label, " column"), "success");
|
|
23
23
|
}
|
|
24
24
|
setSelectedErrorToFilter(selected || "");
|
|
@@ -27,11 +27,10 @@ export var FilterByErrors = function () {
|
|
|
27
27
|
var errorArray = formatErrors(fields, uniqueErrors);
|
|
28
28
|
// the average size of each character in the input (in px)
|
|
29
29
|
var widthPerCharacter = 5.3;
|
|
30
|
-
var amountOfCharacters = prefix.length + (selectedErrorToFilter === null ||
|
|
31
|
-
// 24
|
|
32
|
-
var totalWidth = widthPerCharacter * amountOfCharacters + 24 +
|
|
30
|
+
var amountOfCharacters = prefix.length + ((_a = getSelectedErrorLabel(selectedErrorToFilter)) === null || _a === void 0 ? void 0 : _a.length) || 0;
|
|
31
|
+
// 24 -> padding + 64px of the X icon area
|
|
32
|
+
var totalWidth = widthPerCharacter * amountOfCharacters + 24 + 64;
|
|
33
33
|
var inputWidth = selectedErrorToFilter ? "".concat(totalWidth, "px") : "fit-content";
|
|
34
|
-
var
|
|
35
|
-
|
|
36
|
-
return (_jsx(S.StyledAutocomplete, { placement: "bottom", placeholder: isMenuOpened ? search_or_select : filter_by_errors, onChange: onChange, value: selectedErrorToFilter, options: errorArray, isDisabled: errorArray.length === 0, isInputDisabled: errorArray.length === 0, onToggle: onToggle, inputWidth: inputWidth, "data-testid": "ta-filter-by-errors", prefix: prefix }));
|
|
34
|
+
var inputText = selectedErrorToFilter ? prefix : search_or_select;
|
|
35
|
+
return (_jsx(S.StyledAutocomplete, { placement: "bottom", placeholder: inputText, onChange: onChange, value: selectedErrorToFilter, options: errorArray, isDisabled: errorArray.length === 0, isInputDisabled: errorArray.length === 0, inputWidth: inputWidth, "data-testid": "ta-filter-by-errors", prefix: inputText }));
|
|
37
36
|
};
|
|
@@ -53,6 +53,7 @@ var Autocomplete = function (_a) {
|
|
|
53
53
|
var _g = useState(selectedLabel), text = _g[0], setText = _g[1];
|
|
54
54
|
var _h = useState(false), isMenuOpen = _h[0], setIsMenuOpen = _h[1];
|
|
55
55
|
var _j = useState(null), referenceElement = _j[0], setReferenceElement = _j[1];
|
|
56
|
+
var _k = useState(false), isTyping = _k[0], setIsTyping = _k[1];
|
|
56
57
|
var t = useTranslation().t;
|
|
57
58
|
useEffect(function () {
|
|
58
59
|
if (value)
|
|
@@ -87,12 +88,21 @@ var Autocomplete = function (_a) {
|
|
|
87
88
|
evt.stopPropagation();
|
|
88
89
|
onChange(undefined);
|
|
89
90
|
} }, { children: clearIcon }))) : (_jsx(Div, __assign({ centered: true, dim: 24 }, { children: icon || chevronDownIcon })));
|
|
91
|
+
var textWithPrefix = "".concat(prefix).concat(text);
|
|
92
|
+
var shouldShowPrefix = prefix && !isTyping && !isMenuOpen;
|
|
93
|
+
var inputValue = shouldShowPrefix ? textWithPrefix : text;
|
|
90
94
|
return (_jsxs(Div, __assign({ w100: true }, props, { children: [_jsx(ClickableArea, __assign({ isInputDisabled: isDisabled || isInputDisabled, onClick: function () { return setIsMenuOpen(true); } }, { children: _jsx(TextInput, { setInputRef: setReferenceElement, id: id, onBlur: function () {
|
|
95
|
+
if (isTyping && prefix)
|
|
96
|
+
setIsTyping(false);
|
|
91
97
|
if (filteredOptions.length === 0) {
|
|
92
98
|
setText(selectedLabel);
|
|
93
99
|
setIsMenuOpen(false);
|
|
94
100
|
}
|
|
95
|
-
}, label: label, isDisabled: isDisabled || isInputDisabled, placeholder: t(placeholder), value:
|
|
101
|
+
}, label: label, isDisabled: isDisabled || isInputDisabled, placeholder: t(placeholder), value: inputValue, onChange: function (v) {
|
|
102
|
+
if (!isTyping && prefix)
|
|
103
|
+
setIsTyping(true);
|
|
104
|
+
setText(v);
|
|
105
|
+
}, icon: isDisabled ? null : inputIconUI, labelTooltip: labelTooltip }) })), !isDisabled && filteredOptions.length > 0 && (_jsx(SelectMenu, __assign({ referenceElement: referenceElement, placement: placement, isOpen: isMenuOpen, onClose: function () { return setIsMenuOpen(false); } }, { children: filteredOptions.map(function (o, index) { return (_jsx(Div, { children: _jsx(MenuItem, __assign({ id: id ? "".concat(id, "-option-").concat(o.label) : null, isSelected: value === (o === null || o === void 0 ? void 0 : o.value), onClick: function () { return onSelect(o === null || o === void 0 ? void 0 : o.value); } }, { children: o.label })) }, index)); }) })))] })));
|
|
96
106
|
};
|
|
97
107
|
var chevronDownIcon = (_jsx("svg", __assign({ width: "16", height: "9", viewBox: "0 0 16 9", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: _jsx("path", { d: "M14.9263 1L7.9631 7.96317L0.999928 1", stroke: "black", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }) })));
|
|
98
108
|
var clearIcon = (_jsxs("svg", __assign({ width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, { children: [_jsx("path", { d: "M4 4L12.5161 12.5161", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }), _jsx("path", { d: "M4 12.5161L12.5161 3.99998", stroke: "#333333", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" })] })));
|