krl-alfred 1.76.19 → 1.76.20
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.
|
@@ -24,12 +24,13 @@ var Loader_1 = __importDefault(require("../Loader"));
|
|
|
24
24
|
var useOnClickOutside_1 = __importDefault(require("../../hooks/useOnClickOutside"));
|
|
25
25
|
var AutocompleteInput = function (props) {
|
|
26
26
|
var _a;
|
|
27
|
-
var hasError = props.hasError, disabled = props.disabled, label = props.label, customLinkText = props.customLinkText, customLinkHref = props.customLinkHref, onCustomLinkClick = props.onCustomLinkClick, onChange = props.onChange, errorMessage = props.errorMessage, name = props.name, width = props.width, placeholder = props.placeholder, readonly = props.readonly, autofocus = props.autofocus, value = props.value, dropdownList = props.dropdownList, hasLoading = props.hasLoading, hasClear = props.hasClear, isShowDropdown = props.isShowDropdown, dropdownMaxHeight = props.dropdownMaxHeight, onClear = props.onClear, onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, noResultTemplate = props.noResultTemplate;
|
|
27
|
+
var hasError = props.hasError, disabled = props.disabled, label = props.label, customLinkText = props.customLinkText, customLinkHref = props.customLinkHref, onCustomLinkClick = props.onCustomLinkClick, onChange = props.onChange, errorMessage = props.errorMessage, name = props.name, width = props.width, placeholder = props.placeholder, readonly = props.readonly, autofocus = props.autofocus, value = props.value, dropdownList = props.dropdownList, hasLoading = props.hasLoading, hasClear = props.hasClear, isShowDropdown = props.isShowDropdown, dropdownMaxHeight = props.dropdownMaxHeight, onClear = props.onClear, onKeyUp = props.onKeyUp, onBlur = props.onBlur, onFocus = props.onFocus, onKeyDown = props.onKeyDown, noResultTemplate = props.noResultTemplate;
|
|
28
28
|
var _b = (0, react_1.useState)(isShowDropdown), showDropdown = _b[0], setShowDropdown = _b[1];
|
|
29
29
|
var _c = (0, react_1.useState)(value), inputValue = _c[0], setInputValue = _c[1];
|
|
30
30
|
var inputRef = (0, react_1.useRef)(null);
|
|
31
31
|
var realInputRef = (0, react_1.useRef)(null);
|
|
32
|
-
var containerRef = (0, react_1.useRef)();
|
|
32
|
+
var containerRef = (0, react_1.useRef)(null);
|
|
33
|
+
var dropdownRef = (0, react_1.useRef)(null);
|
|
33
34
|
(0, useOnClickOutside_1.default)(containerRef, function () { return setShowDropdown(false); }, true);
|
|
34
35
|
(0, react_1.useEffect)(function () {
|
|
35
36
|
setShowDropdown(isShowDropdown);
|
|
@@ -42,12 +43,17 @@ var AutocompleteInput = function (props) {
|
|
|
42
43
|
}, [value]);
|
|
43
44
|
(0, react_1.useEffect)(function () {
|
|
44
45
|
if ((inputValue === null || inputValue === void 0 ? void 0 : inputValue.value) || (inputValue === null || inputValue === void 0 ? void 0 : inputValue.value) === null) {
|
|
45
|
-
inputRef.current.value = inputValue === null || inputValue === void 0 ? void 0 : inputValue.label;
|
|
46
46
|
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
|
|
47
47
|
nativeInputValueSetter.call(realInputRef.current, JSON.stringify(inputValue));
|
|
48
48
|
var event_1 = new Event('input', { bubbles: true });
|
|
49
49
|
realInputRef.current.dispatchEvent(event_1);
|
|
50
50
|
}
|
|
51
|
+
else {
|
|
52
|
+
var nativeInputValueSetter = Object.getOwnPropertyDescriptor(window.HTMLInputElement.prototype, 'value').set;
|
|
53
|
+
nativeInputValueSetter.call(realInputRef.current, null);
|
|
54
|
+
var event_2 = new Event('input', { bubbles: true });
|
|
55
|
+
realInputRef.current.dispatchEvent(event_2);
|
|
56
|
+
}
|
|
51
57
|
}, [inputValue]);
|
|
52
58
|
var handleClear = function (e) {
|
|
53
59
|
onClear();
|
|
@@ -59,15 +65,29 @@ var AutocompleteInput = function (props) {
|
|
|
59
65
|
setInputValue({ value: value, label: label });
|
|
60
66
|
setShowDropdown(false);
|
|
61
67
|
};
|
|
62
|
-
var
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
68
|
+
var handleKeyUp = function (e) {
|
|
69
|
+
onKeyUp(e);
|
|
70
|
+
setInputValue(null);
|
|
71
|
+
};
|
|
72
|
+
var handleKeyDown = function (e) {
|
|
73
|
+
var _a;
|
|
74
|
+
onKeyDown(e);
|
|
75
|
+
e = e || window.event;
|
|
76
|
+
var charCode = e.keyCode || e.which;
|
|
77
|
+
if (charCode == 13) {
|
|
78
|
+
e.preventDefault();
|
|
79
|
+
(_a = dropdownRef === null || dropdownRef === void 0 ? void 0 : dropdownRef.current) === null || _a === void 0 ? void 0 : _a.children[0].click();
|
|
80
|
+
inputRef.current.blur();
|
|
67
81
|
}
|
|
68
|
-
onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e.target), { value: value }) }));
|
|
69
82
|
};
|
|
70
|
-
|
|
83
|
+
var handleBlur = function (e) {
|
|
84
|
+
onBlur(e);
|
|
85
|
+
};
|
|
86
|
+
var handleChange = function (e) {
|
|
87
|
+
if (e === void 0) { e = null; }
|
|
88
|
+
onChange(__assign(__assign({}, e), { target: __assign(__assign({}, e === null || e === void 0 ? void 0 : e.target), { value: inputValue }) }));
|
|
89
|
+
};
|
|
90
|
+
return ((0, jsx_runtime_1.jsxs)(AutocompleteInput_styled_1.Container, __assign({ width: width, ref: containerRef }, { children: [label && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: (0, classnames_1.default)("top", (_a = {}, _a["justify-between"] = customLinkText, _a)) }, { children: [(0, jsx_runtime_1.jsx)("p", { children: label }), customLinkText && (0, jsx_runtime_1.jsx)(TextLink_1.default, __assign({}, (customLinkHref && { href: customLinkHref }), { onClick: onCustomLinkClick }, { children: customLinkText }))] }))), (0, jsx_runtime_1.jsxs)("div", __assign({ className: "input" }, { children: [(0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.InputStyled, { ref: inputRef, placeholder: placeholder, autofocus: autofocus, readonly: readonly, type: "text", disabled: disabled, hasError: hasError, isShowDropdown: showDropdown, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: onFocus, onKeyDown: handleKeyDown }), (0, jsx_runtime_1.jsx)("input", { ref: realInputRef, type: "text", name: name, onChange: handleChange, className: "hiddenInput" }), hasLoading && (0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon" }, { children: (0, jsx_runtime_1.jsx)(Loader_1.default, { variant: "primary", width: "16px", height: "16px" }) })), hasClear && ((0, jsx_runtime_1.jsx)("div", __assign({ className: "inputIcon", onClick: handleClear }, { children: (0, jsx_runtime_1.jsx)(Icon_1.default, { name: "Close", color: "var(--dark)", strokeWidth: "3px", width: "16px", height: "16px" }) }))), showDropdown && ((0, jsx_runtime_1.jsx)(AutocompleteInput_styled_1.DropdownStyled, __assign({ ref: dropdownRef, dropdownMaxHeight: dropdownMaxHeight }, { children: dropdownList.length > 0 ? (dropdownList.map(function (item, key) {
|
|
71
91
|
return (0, jsx_runtime_1.jsx)("li", __assign({ className: (0, classnames_1.default)({ "isFixedBottom": item.isFixedBottom }), onClick: function () { return handleSelectValue(item.value, item.label); } }, { children: item.label }));
|
|
72
92
|
})) : (0, jsx_runtime_1.jsx)("li", __assign({ className: "isFixedBottom hasNoResult" }, { children: noResultTemplate() })) })))] })), hasError && ((0, jsx_runtime_1.jsxs)("div", __assign({ className: "error" }, { children: [(0, jsx_runtime_1.jsx)(Icon_1.default, { name: "ErrorIcon" }), (0, jsx_runtime_1.jsx)("p", { children: errorMessage })] })))] })));
|
|
73
93
|
};
|
|
@@ -80,5 +100,8 @@ AutocompleteInput.defaultValues = {
|
|
|
80
100
|
mask: "_",
|
|
81
101
|
value: null,
|
|
82
102
|
noResultTemplate: function () { return (0, jsx_runtime_1.jsx)("div", { children: "No Result" }); },
|
|
103
|
+
onBlur: function (e) { },
|
|
104
|
+
onKeyUp: function (e) { },
|
|
105
|
+
onKeyDown: function (e) { },
|
|
83
106
|
};
|
|
84
107
|
exports.default = AutocompleteInput;
|
|
@@ -9,7 +9,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
9
9
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
10
10
|
exports.DropdownStyled = exports.InputStyled = exports.Container = void 0;
|
|
11
11
|
var styled_components_1 = __importDefault(require("styled-components"));
|
|
12
|
-
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n .hiddenInput{\n opacity: 0;\n user-select: none;\n pointer-events: none;\n position: absolute;\n left: 0;\n width: 0;\n }\n .inputIcon {\n position: absolute;\n top: 50%;\n right:
|
|
13
|
-
exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: ", ";\n border: ", ";\n padding: ", ";\n color: ", ";\n font : var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px !important;\n border: 2px solid
|
|
12
|
+
exports.Container = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n .hiddenInput{\n opacity: 0;\n user-select: none;\n pointer-events: none;\n position: absolute;\n left: 0;\n width: 0;\n }\n .inputIcon {\n position: absolute;\n top: 50%;\n right: 24px;\n transform: translateY(-50%);\n cursor: pointer;\n div{\n display: block;\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n"], ["\n display: flex;\n flex-direction: column;\n width: ", ";\n\n .top {\n display: flex;\n margin-bottom: 16px;\n font:var(--caption-bold-12-15);\n &.justify-between {\n justify-content: space-between;\n }\n\n p {\n margin: 0;\n color: var(--dark-opacity-50);\n }\n\n /*a {\n margin: 0;\n color: var(--primary);\n text-decoration: none;\n cursor: pointer;\n &:hover,:focus,:active{\n color: var(--primary-hover) !important;\n }\n }*/\n }\n\n .input {\n position: relative;\n .hiddenInput{\n opacity: 0;\n user-select: none;\n pointer-events: none;\n position: absolute;\n left: 0;\n width: 0;\n }\n .inputIcon {\n position: absolute;\n top: 50%;\n right: 24px;\n transform: translateY(-50%);\n cursor: pointer;\n div{\n display: block;\n }\n }\n }\n\n .error {\n display: flex;\n align-items: center;\n margin-top: 8px;\n color: var(--red);\n svg {\n margin-right: 8px;\n }\n\n p {\n margin: 0;\n font:var(--caption-semi-bold-11-13);\n }\n }\n"])), function (props) { return props.width || '370px'; });
|
|
13
|
+
exports.InputStyled = styled_components_1.default.input(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: ", ";\n border: ", ";\n padding: ", ";\n color: ", ";\n font : var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px !important;\n border: 2px solid var(--primary) !important;\n color: var(--dark) !important;\n background: white !important;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"], ["\n box-sizing: border-box;\n width: 100%;\n height: 56px;\n background: ", ";\n border-radius: ", ";\n border: ", ";\n padding: ", ";\n color: ", ";\n font : var(--body-semi-bold-14-17);\n outline: none;\n user-select: ", ";\n pointer-events: ", ";\n\n &::placeholder {\n color: ", ";\n }\n\n &:focus {\n padding: 18.5px 23px !important;\n border: 2px solid var(--primary) !important;\n color: var(--dark) !important;\n background: white !important;\n &::placeholder {\n color: var(--dark-opacity-50);\n }\n }\n &:is([disabled]){\n color: var(--dark-opacity-25);\n }\n\n"])), function (props) { return props.disabled ? 'var(--dark-opacity-5)' : (props.hasError ? 'white' : 'var(--dark-opacity-3)'); }, function (props) { return props.isShowDropdown ? '8px 8px 0 0' : '8px 8px 8px 8px'; }, function (props) { return props.hasError ? '2px solid var(--red)' : '1px solid var(--dark-opacity-10)'; }, function (props) { return props.hasError ? '18.5px 23px' : '19.5px 24px'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark)'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.readonly ? 'none' : 'initial'; }, function (props) { return props.hasError ? 'var(--red)' : 'var(--dark-opacity-50)'; });
|
|
14
14
|
exports.DropdownStyled = styled_components_1.default.ul(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: auto;\n max-height: ", ";\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n margin: 0;\n > li {\n height: 51px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n font : var(--title-bold-16-19);\n &:not(.hasNoResult):hover{\n background-color: var(--dark-opacity-3);\n }\n &.isFixedBottom{\n color: var(--dark-opacity-50);\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n }\n &.hasNoResult{\n cursor: initial;\n height: auto;\n }\n }\n"], ["\n border-radius: 0 0 8px 8px;\n box-shadow: none;\n border: 1px solid var(--dark-opacity-10);\n overflow: auto;\n max-height: ", ";\n border-top: 0;\n position: absolute;\n top: 100%;\n left: 0;\n right: 0;\n z-index: 10;\n padding: 0;\n margin: 0;\n > li {\n height: 51px;\n padding: 0 1.5rem;\n display: flex;\n align-items: center;\n justify-content: space-between;\n background-color: #fff;\n position: relative;\n color: var(--dark);\n cursor: pointer;\n box-sizing: border-box;\n font : var(--title-bold-16-19);\n &:not(.hasNoResult):hover{\n background-color: var(--dark-opacity-3);\n }\n &.isFixedBottom{\n color: var(--dark-opacity-50);\n position: sticky;\n bottom: 0;\n left: 0;\n right: 0;\n z-index: 4;\n }\n &.hasNoResult{\n cursor: initial;\n height: auto;\n }\n }\n"])), function (props) { return props.dropdownMaxHeight && props.dropdownMaxHeight; });
|
|
15
15
|
var templateObject_1, templateObject_2, templateObject_3;
|
|
@@ -40,6 +40,12 @@ exports.Default = {
|
|
|
40
40
|
onFocus: function () {
|
|
41
41
|
console.log("prop onFocus");
|
|
42
42
|
},
|
|
43
|
+
onBlur: function () {
|
|
44
|
+
console.log("prop onBlur");
|
|
45
|
+
},
|
|
46
|
+
onKeyDown: function () {
|
|
47
|
+
console.log("prop onKeyDown");
|
|
48
|
+
},
|
|
43
49
|
value: null,
|
|
44
50
|
noResultTemplate: function () { return (0, jsx_runtime_1.jsx)("div", { children: "No Result" }); },
|
|
45
51
|
dropdownList: [
|