ehscan-react-components 0.1.39 → 0.1.41
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 +82 -0
- package/dist/AddBox.d.ts +1 -0
- package/dist/AddBox.js +2 -2
- package/dist/style/addbox.css +2 -2
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -8,6 +8,88 @@
|
|
|
8
8
|
- useChangeAddBox.tsx
|
|
9
9
|
- css changes on vars can be done in parent class
|
|
10
10
|
|
|
11
|
+
# Usage
|
|
12
|
+
## AddBox
|
|
13
|
+
|
|
14
|
+
AddBox is a React component for managing a list of entries. It allows users to add, edit, and remove rows dynamically. Each row has an id and a title.
|
|
15
|
+
|
|
16
|
+
The component is fully controlled — the parent manages the state and receives updates via the onChange callback.
|
|
17
|
+
|
|
18
|
+
|
|
19
|
+
|
|
20
|
+
### Implementation
|
|
21
|
+
|
|
22
|
+
```tsx
|
|
23
|
+
import { useEffect, useState } from "react";
|
|
24
|
+
import { AddBox, useChangeAddBox } from "ehscan-react-components";
|
|
25
|
+
|
|
26
|
+
const Elements = () => {
|
|
27
|
+
|
|
28
|
+
const [inValue, setInValue] = useState({
|
|
29
|
+
add: [
|
|
30
|
+
{ id: 0, title: "first Entry" },
|
|
31
|
+
{ id: 1, title: "second Entry" },
|
|
32
|
+
{ id: 2, title: "last Entry" }
|
|
33
|
+
]
|
|
34
|
+
});
|
|
35
|
+
|
|
36
|
+
// Log changes whenever entries are updated
|
|
37
|
+
useEffect(() => {
|
|
38
|
+
console.log(inValue);
|
|
39
|
+
}, [inValue]);
|
|
40
|
+
|
|
41
|
+
// Scoped change function for the "add" key
|
|
42
|
+
const changeAddBox = useChangeAddBox(inValue, setInValue, "add");
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<div className="element-wrapper">
|
|
46
|
+
<AddBox
|
|
47
|
+
value={inValue.add}
|
|
48
|
+
onChange={(value, id) => changeAddBox(value, id)}
|
|
49
|
+
/>
|
|
50
|
+
</div>
|
|
51
|
+
);
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
export default Elements;
|
|
55
|
+
```
|
|
56
|
+
|
|
57
|
+
### Styling
|
|
58
|
+
|
|
59
|
+
CSS Variables for AddBox
|
|
60
|
+
|
|
61
|
+
| Variable | Default | Applies To / Description |
|
|
62
|
+
| ----------------------------------------------- | --------------------- | ---------------------------------------------- |
|
|
63
|
+
| `--ext-add-inputbox-border-radius` | `10px` | Border radius of the outer AddBox container |
|
|
64
|
+
| `--ext-add-inputbox-border` | `2px solid white` | Border of the AddBox container |
|
|
65
|
+
| `--ext-add-inputbox-title-top` | `-15px` | Top position of the title row |
|
|
66
|
+
| `--ext-add-inputbox-plus-svg-stroke` | `white` | Stroke color of the “plus” SVG lines |
|
|
67
|
+
| `--ext-add-inputbox-plus-svg-strokeWidth` | `3` | Stroke width of the “plus” SVG lines |
|
|
68
|
+
| `--ext-add-inputbox-plus-bck-clr` | `lightblue` | Background color of the plus-wrapper container |
|
|
69
|
+
| `--ext-add-inputbox-plus-padding` | `7px` | Horizontal padding inside plus-wrapper |
|
|
70
|
+
| `--ext-add-inputbox-title-plus-margin-right` | `15px` | Margin-right of the plus wrapper |
|
|
71
|
+
| `--ext-add-inputbox-title-plus-bck-clr` | `transparent` | Background color of the plus button |
|
|
72
|
+
| `--ext-add-inputbox-title-plus-border-radius` | `50px` | Border radius of the plus button |
|
|
73
|
+
| `--ext-add-inputbox-title-plus-h` | `25px` | Height of the plus button |
|
|
74
|
+
| `--ext-add-inputbox-title-plus-w` | `25px` | Width of the plus button |
|
|
75
|
+
| `--ext-add-inputbox-title-plus-border` | `2px solid white` | Border of the plus button |
|
|
76
|
+
| `--ext-add-inputbox-title-plus-bck-clr-hvr` | `lightgray` | Background color of plus button on hover |
|
|
77
|
+
| `--ext-add-inputbox-txt-margin-left` | `10px` | Margin-left of the title text |
|
|
78
|
+
| `--ext-add-inputbox-txt-bck-clr` | `lightblue` | Background color of the title text |
|
|
79
|
+
| `--ext-add-inputbox-txt-clr` | `black` | Text color of the title text |
|
|
80
|
+
| `--ext-add-inputbox-txt-plus-h` | `20px` | Height of the title text container |
|
|
81
|
+
| `--ext-add-inputbox-body-padding` | `20px 10px 10px 10px` | Padding for the AddBox body |
|
|
82
|
+
| `--ext-add-content-row-height` | `30px` | Height of each row in the AddBox |
|
|
83
|
+
| `--ext-add-content-row-bck-clr` | `white` | Background color of each row |
|
|
84
|
+
| `--ext-add-content-row-border-radius` | `50px` | Border radius of each row |
|
|
85
|
+
| `--ext-add-content-row-hover-bck-clr` | `whitesmoke` | Background color of row on hover |
|
|
86
|
+
| `--tag-erase-w` | `25px` | Width of the row delete button |
|
|
87
|
+
| `--tag-erase-h` | `25px` | Height of the row delete button |
|
|
88
|
+
| `--ext-addbox-textarea-tag-erase-hover-bck-clr` | `darkgray` | Background color of the delete button on hover |
|
|
89
|
+
| `--ext-addbox-input-focus-border` | `1px dashed darkgrey` | Border of the input on focus |
|
|
90
|
+
|
|
91
|
+
|
|
92
|
+
|
|
11
93
|
# Styling
|
|
12
94
|
|
|
13
95
|
- TextAreaDropDown
|
package/dist/AddBox.d.ts
CHANGED
package/dist/AddBox.js
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
2
|
import './style/addbox.css';
|
|
3
|
-
export const AddBox = ({ value, onChange }) => {
|
|
3
|
+
export const AddBox = ({ title, value, onChange }) => {
|
|
4
4
|
const closeBtn = () => (_jsxs("svg", { width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", 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" })] }));
|
|
5
5
|
const plusBtn = () => (_jsxs("svg", { className: "ext-add-inputbox-plus-svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none", children: [_jsx("line", { x1: "12", y1: "5", x2: "12", y2: "19", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" }), _jsx("line", { x1: "5", y1: "12", x2: "19", y2: "12", stroke: "#333", strokeWidth: "1", strokeLinecap: "round" })] }));
|
|
6
6
|
const addRow = () => onChange([...value, { id: Date.now(), title: "" }]);
|
|
7
7
|
const removeRow = (id) => onChange(value.filter((entry) => entry.id !== id));
|
|
8
8
|
const changeTxt = (id, newTitle) => onChange(newTitle, id);
|
|
9
9
|
const btnRow = (item) => (_jsxs("div", { className: "ext-add-content-row", children: [_jsx("div", { className: "ext-add-content-row-bullet", children: "\u2022" }), _jsx("input", { id: `inputAddBox-${item.id}`, className: "ext-addbox-input", type: "text", placeholder: "...", value: item.title, onChange: (e) => changeTxt(item.id, e.target.value), spellCheck: false }), _jsx("div", { className: "ext-addbox-textarea-tag-erase", onClick: () => removeRow(item.id), children: closeBtn() })] }, item.id));
|
|
10
|
-
return (_jsxs("div", { className: "ext-add-inputbox", children: [_jsxs("div", { className: "ext-add-inputbox-title", children: [_jsx("div", { className: "ext-add-inputbox-title-txt", children:
|
|
10
|
+
return (_jsxs("div", { className: "ext-add-inputbox", children: [_jsxs("div", { className: "ext-add-inputbox-title", children: [_jsx("div", { className: "ext-add-inputbox-title-txt", children: title }), _jsx("div", { className: "ext-add-inputbox-title-plus-wrapper", children: _jsx("div", { className: "ext-add-inputbox-title-plus", onClick: addRow, children: plusBtn() }) })] }), _jsx("div", { className: "ext-add-inputbox-body", children: value.map((item) => btnRow(item)) })] }));
|
|
11
11
|
};
|
package/dist/style/addbox.css
CHANGED
|
@@ -58,7 +58,7 @@
|
|
|
58
58
|
}
|
|
59
59
|
|
|
60
60
|
.ext-add-inputbox-body{
|
|
61
|
-
padding: 20px 10px 10px 10px;
|
|
61
|
+
padding: var(--ext-add-inputbox-body-padding, 20px 10px 10px 10px);
|
|
62
62
|
display: flex;
|
|
63
63
|
flex-direction: column;
|
|
64
64
|
gap: 7px;
|
|
@@ -77,7 +77,7 @@
|
|
|
77
77
|
}
|
|
78
78
|
|
|
79
79
|
.ext-add-content-row:hover{
|
|
80
|
-
|
|
80
|
+
background-color: var(--ext-add-content-row-hover-bck-clr, whitesmoke);
|
|
81
81
|
cursor: pointer;
|
|
82
82
|
}
|
|
83
83
|
|