ehscan-react-components 0.1.30 → 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,32 +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
|
-
console.log(newWidth);
|
|
41
|
-
if (newWidth !== width)
|
|
42
|
-
setWidth(newWidth);
|
|
43
|
-
};
|
|
44
|
-
handleResize();
|
|
45
|
-
window.addEventListener('resize', handleResize);
|
|
46
|
-
return () => {
|
|
47
|
-
window.removeEventListener('resize', handleResize);
|
|
48
|
-
};
|
|
49
|
-
}, [maxDropDownEntries]);
|
|
50
26
|
useEffect(() => {
|
|
51
27
|
setTags(value);
|
|
52
28
|
setCharCount(value.length);
|
|
@@ -130,6 +106,11 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
|
|
|
130
106
|
setNewBtn(true);
|
|
131
107
|
}
|
|
132
108
|
}, [searchTerm]);
|
|
109
|
+
useEffect(() => {
|
|
110
|
+
if (!closeCommand)
|
|
111
|
+
return;
|
|
112
|
+
setOpenDropDown(false);
|
|
113
|
+
}, [closeCommand]);
|
|
133
114
|
if (!tags)
|
|
134
115
|
return null;
|
|
135
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 })] }));
|