ehscan-react-components 0.1.24 → 0.1.25
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/README.md +19 -0
- package/dist/TextAreaDropDown.d.ts +1 -0
- package/dist/TextAreaDropDown.js +2 -2
- package/dist/style/input-dropdown.css +4 -4
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -7,6 +7,25 @@
|
|
|
7
7
|
|
|
8
8
|
# Styling
|
|
9
9
|
|
|
10
|
+
- TextAreaDropDown
|
|
11
|
+
|
|
12
|
+
| Variable | Fallback / Default |
|
|
13
|
+
| ---------------------------------- | ----------------------------------- |
|
|
14
|
+
| `--ext-textarea-box-bck-clr` | `lightgray` |
|
|
15
|
+
| `--ext-textarea-box-border-radius` | `10px` |
|
|
16
|
+
| `--ext-dropdown-border-radius` | `20px` |
|
|
17
|
+
| `--input-txt-size` | *(not explicitly set, optional)* |
|
|
18
|
+
| `--d-font-weight` | *(not explicitly set, optional)* |
|
|
19
|
+
| `--input-clr` | `black` |
|
|
20
|
+
| `--textarea-tag-bck-clr` | `white` (some places `transparent`) |
|
|
21
|
+
| `--textarea-tag-clr` | `darkblue` (some places `white`) |
|
|
22
|
+
| `--d-input-placeholder-clr` | `black` |
|
|
23
|
+
| `--d-input-bck-clr` | `transparent` |
|
|
24
|
+
| `--dropdown-item-bck-clr` | `wheat` |
|
|
25
|
+
| `--dropdown-amount-row-bck-clr` | `yellow` |
|
|
26
|
+
| `--animate-s` | `.5s` |
|
|
27
|
+
|
|
28
|
+
|
|
10
29
|
## Base Button Variables
|
|
11
30
|
|
|
12
31
|
| Variable | Default/Fallback |
|
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, maxLength = 500, }) => {
|
|
14
|
+
export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true, required = false, dropdownValue, onChange, placeholder, maxLength = 500, addClass, }) => {
|
|
15
15
|
const childRef = useRef(null);
|
|
16
16
|
const textareaRef = useRef(null);
|
|
17
17
|
const searchInput = useRef(null);
|
|
@@ -132,6 +132,6 @@ export const TextAreaDropDown = ({ id, tabIndex, label, value, editable = true,
|
|
|
132
132
|
}, [searchTerm]);
|
|
133
133
|
if (!tags)
|
|
134
134
|
return null;
|
|
135
|
-
return (_jsxs("div", { className:
|
|
135
|
+
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", ref: searchInput, onFocus: () => setOpenDropDown(true), placeholder: "select or create new entry", 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, openDropDown: openDropDown, display: filterItems, addItem: addItem, maxDropDownEntries: maxDropDownEntries, searchTerm: searchTerm })] }));
|
|
136
136
|
};
|
|
137
137
|
export default TextAreaDropDown;
|
|
@@ -19,7 +19,7 @@
|
|
|
19
19
|
|
|
20
20
|
input,
|
|
21
21
|
textarea,
|
|
22
|
-
.ext-textarea-wrapper {
|
|
22
|
+
.ext-textarea-wrapper-dropdown {
|
|
23
23
|
height: 100%;
|
|
24
24
|
font-family: Arial, sans-serif;
|
|
25
25
|
font-family: Inter, sans-serif;
|
|
@@ -71,7 +71,7 @@ input:-webkit-autofill:active {
|
|
|
71
71
|
|
|
72
72
|
/* textarea */
|
|
73
73
|
/* Main Wrapper */
|
|
74
|
-
.ext-textarea-wrapper {
|
|
74
|
+
.ext-textarea-wrapper-dropdown {
|
|
75
75
|
position: relative;
|
|
76
76
|
display: flex;
|
|
77
77
|
flex-direction: column;
|
|
@@ -275,7 +275,7 @@ input:-webkit-autofill:active {
|
|
|
275
275
|
width: -webkit-fill-available;
|
|
276
276
|
font-weight: 300;
|
|
277
277
|
font-size: 90%;
|
|
278
|
-
background-color: wheat;
|
|
278
|
+
background-color: var(--dropdown-item-bck-clr, wheat);
|
|
279
279
|
position: relative;
|
|
280
280
|
display: block;
|
|
281
281
|
padding: 5px 10px;
|
|
@@ -289,7 +289,7 @@ input:-webkit-autofill:active {
|
|
|
289
289
|
|
|
290
290
|
.dropdown-amount-row {
|
|
291
291
|
width: -webkit-fill-available;
|
|
292
|
-
background-color: yellow;
|
|
292
|
+
background-color: var(--dropdown-amount-row-bck-clr, yellow);
|
|
293
293
|
color: #007aff;
|
|
294
294
|
padding: 5px 10px;
|
|
295
295
|
text-align: end;
|