ehscan-react-components 0.1.31 → 0.1.33
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, closeCommand, 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, alwaysOpenDropDown, 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);
|
|
@@ -98,21 +98,32 @@ export const TextAreaDropDown = ({ id, tabIndex, closeCommand, label, value, edi
|
|
|
98
98
|
useEffect(() => {
|
|
99
99
|
if (searchTerm === undefined)
|
|
100
100
|
return;
|
|
101
|
+
if (searchTerm !== "")
|
|
102
|
+
setOpenDropDown(true); //if closed on !alwaysOpenDropDown
|
|
101
103
|
if (dropdownValue.includes(searchTerm)) {
|
|
102
104
|
setNewBtn(false);
|
|
105
|
+
return;
|
|
103
106
|
}
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
setNewBtn(true);
|
|
107
|
-
}
|
|
107
|
+
if (searchTerm !== '')
|
|
108
|
+
setNewBtn(true);
|
|
108
109
|
}, [searchTerm]);
|
|
109
110
|
useEffect(() => {
|
|
110
111
|
if (!closeCommand)
|
|
111
112
|
return;
|
|
112
113
|
setOpenDropDown(false);
|
|
113
114
|
}, [closeCommand]);
|
|
115
|
+
const focusInput = () => {
|
|
116
|
+
if (alwaysOpenDropDown) {
|
|
117
|
+
setOpenDropDown(true);
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
console.log(searchTerm);
|
|
121
|
+
if (searchTerm) {
|
|
122
|
+
setOpenDropDown(true);
|
|
123
|
+
}
|
|
124
|
+
};
|
|
114
125
|
if (!tags)
|
|
115
126
|
return null;
|
|
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: () =>
|
|
127
|
+
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: () => focusInput(), 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 })] }));
|
|
117
128
|
};
|
|
118
129
|
export default TextAreaDropDown;
|
|
@@ -106,6 +106,8 @@ input:-webkit-autofill:active {
|
|
|
106
106
|
|
|
107
107
|
.ext-textarea-box-dropdown.open {
|
|
108
108
|
border-radius: var(--ext-textarea-box-border-radius) var(--ext-textarea-box-border-radius) var(--ext-dropdown-border-radius) var(--ext-dropdown-border-radius);
|
|
109
|
+
background-color: var(--ext-textarea-focus-bck-clr, lavender);
|
|
110
|
+
border-radius: var(--ext-textarea-border-radius, 20px);
|
|
109
111
|
}
|
|
110
112
|
|
|
111
113
|
.ext-textarea-wrapper {
|