ehscan-react-components 0.1.33 → 0.1.35
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/DropDown.js
CHANGED
|
@@ -3,6 +3,40 @@ import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from "re
|
|
|
3
3
|
export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm, maxDropDownEntries, maxDropDownHeight }, ref) => {
|
|
4
4
|
const [position, setPosition] = useState({ top: 0, left: 0, width: 0, maxHeight: 0 });
|
|
5
5
|
const containerRef = useRef(null);
|
|
6
|
+
const [tabId, setTabId] = useState(undefined);
|
|
7
|
+
useEffect(() => {
|
|
8
|
+
if (!openDropDown || display.length === 0)
|
|
9
|
+
return;
|
|
10
|
+
const handleKeyDown = (e) => {
|
|
11
|
+
console.log(e.key);
|
|
12
|
+
if (e.key === 'ArrowDown') {
|
|
13
|
+
setTabId(prevTabId => {
|
|
14
|
+
if (prevTabId === undefined || prevTabId >= display.length - 1) {
|
|
15
|
+
return 0; // wrap to start
|
|
16
|
+
}
|
|
17
|
+
return prevTabId + 1; // move down
|
|
18
|
+
});
|
|
19
|
+
}
|
|
20
|
+
if (e.key === 'ArrowUp') {
|
|
21
|
+
setTabId(prevTabId => {
|
|
22
|
+
if (prevTabId === undefined || prevTabId <= 0) {
|
|
23
|
+
return display.length - 1; // wrap to end
|
|
24
|
+
}
|
|
25
|
+
return prevTabId - 1; // move up
|
|
26
|
+
});
|
|
27
|
+
}
|
|
28
|
+
if (e.key === "Enter" && tabId !== undefined) {
|
|
29
|
+
console.log('use', display[tabId]);
|
|
30
|
+
addItem(tabId);
|
|
31
|
+
setTabId(0);
|
|
32
|
+
}
|
|
33
|
+
// Add other keys here if needed
|
|
34
|
+
};
|
|
35
|
+
window.addEventListener('keydown', handleKeyDown);
|
|
36
|
+
return () => {
|
|
37
|
+
window.removeEventListener('keydown', handleKeyDown); // cleanup
|
|
38
|
+
};
|
|
39
|
+
}, [openDropDown, display, tabId]);
|
|
6
40
|
useImperativeHandle(ref, () => ({
|
|
7
41
|
calc: () => {
|
|
8
42
|
console.log("calc");
|
|
@@ -76,5 +110,5 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
|
|
|
76
110
|
top: position.top,
|
|
77
111
|
left: position.left,
|
|
78
112
|
width: position.width
|
|
79
|
-
}, children: [maxDropDownEntries !== undefined && (_jsxs("div", { className: "dropdown-amount-row", children: [display.length, " / ", maxDropDownEntries, " entries"] })), _jsx("div", { className: "ext-window-dropdown-wrapper _ewb", style: { maxHeight: `${position.maxHeight}px`, }, children: display.map((item, index) => (_jsx("div", { className:
|
|
113
|
+
}, children: [maxDropDownEntries !== undefined && (_jsxs("div", { className: "dropdown-amount-row", children: [display.length, " / ", maxDropDownEntries, " entries"] })), _jsx("div", { className: "ext-window-dropdown-wrapper _ewb", style: { maxHeight: `${position.maxHeight}px`, }, children: display.map((item, index) => (_jsx("div", { className: `dropdown-item ${index === tabId ? 'focused' : ''}`, tabIndex: 0, onClick: () => addDropDownItem(index), onFocus: () => setTabId(index), children: _jsx(HighlightedText, { text: item, searchTerm: searchTerm }) }, index))) })] }))] }));
|
|
80
114
|
});
|
package/dist/TextAreaDropDown.js
CHANGED
|
@@ -122,8 +122,13 @@ export const TextAreaDropDown = ({ id, tabIndex, alwaysOpenDropDown, closeComman
|
|
|
122
122
|
setOpenDropDown(true);
|
|
123
123
|
}
|
|
124
124
|
};
|
|
125
|
+
const blurInput = () => {
|
|
126
|
+
// setOpenDropDown(false)
|
|
127
|
+
// setNewBtn(false)
|
|
128
|
+
// setSearchTerm('')
|
|
129
|
+
};
|
|
125
130
|
if (!tags)
|
|
126
131
|
return null;
|
|
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: () =>
|
|
132
|
+
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: () => focusInput(), 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(), onBlur: () => blurInput(), 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 })] }));
|
|
128
133
|
};
|
|
129
134
|
export default TextAreaDropDown;
|
|
@@ -317,7 +317,7 @@ input:-webkit-autofill:active {
|
|
|
317
317
|
float: left;
|
|
318
318
|
margin: 3px;
|
|
319
319
|
margin: 3px;
|
|
320
|
-
background-color: var(--textarea-
|
|
320
|
+
background-color: var(--textarea-searchtag-bck-clr, transparent);
|
|
321
321
|
gap: 10px;
|
|
322
322
|
flex: 1 1 auto;
|
|
323
323
|
}
|
|
@@ -375,4 +375,8 @@ input:-webkit-autofill:active {
|
|
|
375
375
|
min-width: 0;
|
|
376
376
|
width: 100%;
|
|
377
377
|
box-sizing: border-box;
|
|
378
|
+
}
|
|
379
|
+
|
|
380
|
+
.dropdown-item.focused{
|
|
381
|
+
border: 1px solid red
|
|
378
382
|
}
|