ehscan-react-components 0.1.24 → 0.1.26

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.
Files changed (6) hide show
  1. package/README.md +19 -0
  2. package/dist/DropDown.js +2 -8
  3. package/dist/TextAreaDropDown.d.ts +1 -0
  4. package/dist/TextAreaDropDown.js +2 -2
  5. package/dist/style/input-dropdown.css +5 -5
  6. 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/DropDown.js CHANGED
@@ -3,14 +3,12 @@ import { useEffect, useState, useRef, forwardRef, useImperativeHandle } from "re
3
3
  export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm, maxDropDownEntries }, ref) => {
4
4
  const [position, setPosition] = useState({ top: 0, left: 0, width: 0, maxHeight: 0 });
5
5
  const containerRef = useRef(null);
6
- // Expose functions to parent
7
6
  useImperativeHandle(ref, () => ({
8
7
  calc: () => {
9
8
  console.log("calc");
10
9
  setTimeout(() => {
11
10
  calcDropDown();
12
11
  }, 50);
13
- // parent will implement actual state change, this is just the hook
14
12
  },
15
13
  }));
16
14
  const HighlightedText = ({ text, searchTerm, maxLength = 150 }) => {
@@ -26,7 +24,6 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
26
24
  return _jsx("div", { children: text.slice(0, maxLength) });
27
25
  }
28
26
  const lowerText = text.toLowerCase();
29
- // Find first match position
30
27
  let firstMatchIndex = -1;
31
28
  for (let word of searchWords) {
32
29
  const index = lowerText.indexOf(word);
@@ -34,14 +31,12 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
34
31
  firstMatchIndex = index;
35
32
  }
36
33
  }
37
- // Determine slice window
38
34
  let sliceStart = 0;
39
35
  let sliceEnd = maxLength;
40
36
  if (firstMatchIndex > -1) {
41
37
  const foundWord = searchWords.find(w => lowerText.includes(w));
42
38
  if (firstMatchIndex > -1 && foundWord) {
43
39
  const matchEnd = firstMatchIndex + foundWord.length;
44
- // const matchEnd = firstMatchIndex + searchWords.find(w => lowerText.includes(w)).length;
45
40
  if (matchEnd > maxLength) {
46
41
  sliceEnd = Math.min(text.length, matchEnd);
47
42
  sliceStart = sliceEnd - maxLength;
@@ -49,7 +44,6 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
49
44
  }
50
45
  }
51
46
  const displayText = text.slice(sliceStart, sliceEnd);
52
- // Build a regex that matches all words
53
47
  const highlightRegex = new RegExp(`(${searchWords.join('|')})`, 'gi');
54
48
  const parts = displayText.split(highlightRegex);
55
49
  return (_jsxs(_Fragment, { children: [sliceStart > 0 && '…', parts.map((part, i) => searchWords.includes(part.toLowerCase()) ? (_jsx("span", { className: "highlight-words", children: part }, i)) : (_jsx("span", { children: part }, i))), sliceEnd < text.length && '…'] }));
@@ -60,7 +54,7 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
60
54
  const rect = containerRef.current.getBoundingClientRect();
61
55
  const distanceToBottom = window.innerHeight - rect.bottom;
62
56
  setPosition({
63
- top: rect.bottom - 5,
57
+ top: rect.bottom - 10,
64
58
  left: rect.left,
65
59
  width: rect.width,
66
60
  maxHeight: distanceToBottom - 50
@@ -78,7 +72,7 @@ export const DropDown = forwardRef(({ openDropDown, display, addItem, searchTerm
78
72
  calcDropDown();
79
73
  }, 50);
80
74
  };
81
- return (_jsxs(_Fragment, { children: [_jsx("div", { className: "ext-window-dropdown-edge", ref: containerRef }), openDropDown && (_jsxs("div", { className: "ext-window-dropdown", style: {
75
+ return (_jsxs(_Fragment, { children: [_jsx("div", { className: "ext-window-dropdown-edge", ref: containerRef }), openDropDown && display.length > 0 && (_jsxs("div", { className: "ext-window-dropdown", style: {
82
76
  top: position.top,
83
77
  left: position.left,
84
78
  width: position.width
package/dist/TextAreaDropDown.d.ts CHANGED
@@ -11,6 +11,7 @@ interface Props {
11
11
  onChange: (value: string, action: Action) => void;
12
12
  placeholder?: string;
13
13
  maxLength?: number;
14
+ addClass?: string;
14
15
  }
15
16
  export declare const TextAreaDropDown: React.FC<Props>;
16
17
  export default TextAreaDropDown;
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: "ext-textarea-wrapper", 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 })] }));
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;
package/dist/style/input-dropdown.css CHANGED
@@ -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,12 +289,13 @@ 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;
296
296
  font-size: 80%;
297
297
  font-weight: 600;
298
+ border-radius: var(--ext-dropdown-border-radius) var(--ext-dropdown-border-radius) 0 0;
298
299
  }
299
300
 
300
301
  .textarea-tag.input {
@@ -325,7 +326,6 @@ input:-webkit-autofill:active {
325
326
  grid-template-columns: 1fr auto;
326
327
  align-items: center;
327
328
  justify-content: center;
328
- gap: 10px;
329
329
  }
330
330
 
331
331
  .search-x-input {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "ehscan-react-components",
3
- "version": "0.1.24",
3
+ "version": "0.1.26",
4
4
  "description": "components",
5
5
  "main": "dist/Components.js",
6
6
  "types": "dist/Components.d.ts",