ehscan-react-components 0.1.29 → 0.1.31
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/dist/TextAreaDropDown.js
CHANGED
|
@@ -11,7 +11,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
11
11
|
import { useRef, useState, useId, useEffect } from "react";
|
|
12
12
|
import { DropDown } from "./DropDown";
|
|
13
13
|
import './style/input-dropdown.css';
|
|
14
|
-
export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true, required = false, dropdownValue, onChange, placeholder = 'select or create new entry', maxLength = 500, addClass, maxDropDownHeight = 200 }) => {
|
|
14
|
+
export const TextAreaDropDown = ({ id, tabIndex, closeCommand, label, value, editable = true, required = false, dropdownValue, onChange, placeholder = 'select or create new entry', maxLength = 500, addClass, maxDropDownHeight = 200 }) => {
|
|
15
15
|
const childRef = useRef(null);
|
|
16
16
|
const textareaRef = useRef(null);
|
|
17
17
|
const searchInput = useRef(null);
|
|
@@ -21,31 +21,8 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
|
|
|
21
21
|
const [openDropDown, setOpenDropDown] = useState(false);
|
|
22
22
|
const [maxDropDownEntries, setMaxDropDownEntries] = useState(undefined);
|
|
23
23
|
const [tags, setTags] = useState(undefined);
|
|
24
|
-
const [width, setWidth] = useState(0);
|
|
25
24
|
const [searchTerm, setSearchTerm] = useState('');
|
|
26
25
|
const [filterItems, setFilterItem] = useState([]);
|
|
27
|
-
useEffect(() => {
|
|
28
|
-
if (!width || width === 0)
|
|
29
|
-
return;
|
|
30
|
-
console.log('handleResize in TextAreaDropDown vai width');
|
|
31
|
-
setOpenDropDown(false);
|
|
32
|
-
setWidth(width);
|
|
33
|
-
}, [width]);
|
|
34
|
-
useEffect(() => {
|
|
35
|
-
if (!textareaRef.current)
|
|
36
|
-
return;
|
|
37
|
-
const handleResize = () => {
|
|
38
|
-
var _a;
|
|
39
|
-
const newWidth = (_a = textareaRef === null || textareaRef === void 0 ? void 0 : textareaRef.current) === null || _a === void 0 ? void 0 : _a.offsetWidth;
|
|
40
|
-
if (newWidth !== width)
|
|
41
|
-
setWidth(newWidth);
|
|
42
|
-
};
|
|
43
|
-
handleResize();
|
|
44
|
-
window.addEventListener('resize', handleResize);
|
|
45
|
-
return () => {
|
|
46
|
-
window.removeEventListener('resize', handleResize);
|
|
47
|
-
};
|
|
48
|
-
}, [maxDropDownEntries]);
|
|
49
26
|
useEffect(() => {
|
|
50
27
|
setTags(value);
|
|
51
28
|
setCharCount(value.length);
|
|
@@ -129,6 +106,11 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
|
|
|
129
106
|
setNewBtn(true);
|
|
130
107
|
}
|
|
131
108
|
}, [searchTerm]);
|
|
109
|
+
useEffect(() => {
|
|
110
|
+
if (!closeCommand)
|
|
111
|
+
return;
|
|
112
|
+
setOpenDropDown(false);
|
|
113
|
+
}, [closeCommand]);
|
|
132
114
|
if (!tags)
|
|
133
115
|
return null;
|
|
134
116
|
return (_jsxs("div", { className: `ext-textarea-wrapper-dropdown ${addClass}`, ref: textareaRef, children: [label && (_jsxs("div", { className: "ext-textarea-label", children: [_jsxs("label", { className: "ext-textarea-label-title", htmlFor: textareaId, children: [label, " ", required && _jsx("span", { className: "required", children: "*" })] }), _jsxs("div", { className: "ext-textarea-label-btns", children: [editable && charCount > 0 && (_jsxs("div", { className: "form-container-count", children: [charCount, " / ", maxLength] })), editable && charCount > 0 && (_jsx("div", { className: "ext-textarea-svg-close", "aria-label": `Clear ${label !== null && label !== void 0 ? label : "text area"}` }))] })] })), _jsx("div", { className: `ext-textarea-box-dropdown${openDropDown ? ' open' : ''}`, onClick: () => setOpenDropDown(true), children: _jsxs("div", { className: "ext-textarea-dropdown-inner", children: [tags.map((item, index) => (_jsxs("div", { className: "textarea-tag loop", children: [_jsx("div", { children: item }), _jsx("div", { className: "textarea-tag-erase", onClick: () => removeTag(tags[index]), children: _jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("line", { x1: "8", y1: "8", x2: "16", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "16", y1: "8", x2: "8", y2: "16", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" })] }) })] }, index))), _jsx("div", { className: "search-x-wrapper", children: _jsxs("div", { className: "search-x", children: [_jsx("div", { className: "search-x-input", children: _jsx("input", { type: "text", tabIndex: tabIndex, ref: searchInput, onFocus: () => setOpenDropDown(true), placeholder: placeholder, value: searchTerm, onChange: (e) => setSearchTerm(e.target.value), onKeyDown: handleKeyDown }) }), _jsx("div", { className: `search-x-btn${newBtn ? ' show' : ''}`, onClick: () => createItem(), children: newBtn && 'create new one' })] }) })] }) }), _jsx(DropDown, { ref: childRef, maxDropDownHeight: maxDropDownHeight, openDropDown: openDropDown, display: filterItems, addItem: addItem, maxDropDownEntries: maxDropDownEntries, searchTerm: searchTerm })] }));
|