ehscan-react-components 0.1.37 → 0.1.39

package/README.md

@@ -4,6 +4,9 @@
 - Window
 - TextArea
 - TextAreaDropDown
+- AddBox
+    - useChangeAddBox.tsx
+    - css changes on vars can be done in parent class
 
 # Styling
 

package/dist/AddBox.d.ts

@@ -0,0 +1,12 @@
+import React from "react";
+import './style/addbox.css';
+interface Entry {
+    id: number;
+    title: string;
+}
+interface Props {
+    value: Entry[];
+    onChange: (value: string | Entry[], id?: number) => void;
+}
+export declare const AddBox: React.FC<Props>;
+export {};

package/dist/AddBox.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import './style/addbox.css';
+export const AddBox = ({ value, onChange }) => {
+    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" })] }));
+    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" })] }));
+    const addRow = () => onChange([...value, { id: Date.now(), title: "" }]);
+    const removeRow = (id) => onChange(value.filter((entry) => entry.id !== id));
+    const changeTxt = (id, newTitle) => onChange(newTitle, id);
+    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));
+    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)) })] }));
+};

package/dist/Components.d.ts

@@ -2,3 +2,5 @@ export { Button } from './Button';
 export { Window } from './Window';
 export { TextArea } from './TextArea';
 export { TextAreaDropDown } from './TextAreaDropDown';
+export { AddBox } from './AddBox';
+export { useChangeAddBox } from './tools/useChangeAddBox';

package/dist/Components.js

@@ -3,3 +3,5 @@ export { Button } from './Button';
 export { Window } from './Window';
 export { TextArea } from './TextArea';
 export { TextAreaDropDown } from './TextAreaDropDown';
+export { AddBox } from './AddBox';
+export { useChangeAddBox } from './tools/useChangeAddBox';

package/dist/style/addbox.css

@@ -0,0 +1,112 @@
+.ext-add-inputbox{
+    background-color: transparent;
+    position: relative;
+    border-radius: var(--ext-add-inputbox-border-radius, 10px);
+    user-select: none;
+    border: var(--ext-add-inputbox-border, 2px solid white);
+}
+
+.ext-add-inputbox-title{
+    display: grid;
+    grid-template-columns: 1fr auto;
+    position: absolute;
+    top: var(--ext-add-inputbox-title-top, -15px);
+    width: 100%;
+    align-items: center;
+}
+
+.ext-add-inputbox-plus-svg > line{
+    stroke: var(--ext-add-inputbox-plus-svg-stroke, white);
+    stroke-width: var(--ext-add-inputbox-plus-svg-strokeWidth, 3);
+}
+
+.ext-add-inputbox-title-plus-wrapper{
+    background-color: var(--ext-add-inputbox-plus-bck-clr, lightblue);
+    padding: 0 var(--ext-add-inputbox-plus-padding, 7px);
+    display: flex;
+    margin-right: var(--ext-add-inputbox-title-plus-margin-right, 15px);
+}
+
+.ext-add-inputbox-title-plus{
+    display: flex;
+    background-color: var(--ext-add-inputbox-title-plus-bck-clr, transparent);
+    border-radius: var(--ext-add-inputbox-title-plus-border-radius, 50px);
+
+    align-items: center;
+    justify-content: center;
+    height: var(--ext-add-inputbox-title-plus-h, 25px);
+    width: var(--ext-add-inputbox-title-plus-w, 25px);
+    cursor: pointer;
+    border: var(--ext-add-inputbox-title-plus-border, 2px solid white);
+}
+
+.ext-add-inputbox-title-plus:hover{
+    background-color: var(--ext-add-inputbox-title-plus-bck-clr-hvr, lightgray);
+    border: var(--ext-add-inputbox-title-plus-border, 2px solid lightgrey);
+}
+
+.ext-add-inputbox-title-txt{
+    display: flex;
+    align-items: center;
+    border-radius: 4px;
+    margin-left: var(--ext-add-inputbox-txt-margin-left, 10px);
+    padding: 0 7px;
+    background-color: var(--ext-add-inputbox-txt-bck-clr, lightblue);
+    color: var(--ext-add-inputbox-txt-clr, black);
+    width: fit-content;
+    height: var(--ext-add-inputbox-txt-plus-h, 20px);
+}
+
+.ext-add-inputbox-body{
+    padding: 20px 10px 10px 10px;
+    display: flex;
+    flex-direction: column;
+    gap: 7px;
+}
+
+.ext-add-content-row {
+    height: var(--ext-add-content-row-height, 30px);
+    background-color: var(--ext-add-content-row-bck-clr, white);
+    padding: 0 5px 0 15px;
+    border-radius: var(--ext-add-content-row-border-radius, 50px);
+    display: grid;
+    grid-template-columns: auto 1fr auto;
+    align-items: center;
+    gap: 5px;
+    overflow: hidden;
+}
+
+.ext-add-content-row:hover{
+    filter: brightness(1.1);
+    cursor: pointer;
+}
+
+.ext-add-content-row-bullet{
+    padding: 2px 0 0 0;
+}
+
+.ext-addbox-textarea-tag-erase {
+    width: var(--tag-erase-w, 25px);
+    height: var(--tag-erase-h, 25px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50px;
+}
+
+.ext-addbox-textarea-tag-erase:hover{
+    background-color: var(--ext-addbox-textarea-tag-erase-hover-bck-clr, darkgray);
+    cursor: pointer;
+}
+
+.ext-addbox-input {
+  border-radius: 10px;
+  padding: 0 5px 0 10px;
+  border: 1px solid transparent;
+  height: 75%;
+}
+
+.ext-addbox-input:focus {
+  background: #f0f4ff; 
+  border: var(--ext-addbox-input-focus-border, 1px dashed darkgrey);
+}

package/dist/tools/useChangeAddBox.d.ts

@@ -0,0 +1,7 @@
+type Entry = {
+    id: number;
+    title: string;
+};
+type InValue = Record<string, Entry[]>;
+export declare const useChangeAddBox: (inValue: InValue, setInValue: React.Dispatch<React.SetStateAction<InValue>>, tag: string) => (value: Entry[] | string, id?: number) => void;
+export {};

package/dist/tools/useChangeAddBox.js

@@ -0,0 +1,13 @@
+import { useCallback } from "react";
+export const useChangeAddBox = (inValue, setInValue, tag) => {
+    const changeTag = useCallback((value, id) => {
+        if (!(tag in inValue))
+            return;
+        if (id !== undefined) { // change single row
+            setInValue(prev => (Object.assign(Object.assign({}, prev), { [tag]: prev[tag].map(item => item.id === id ? Object.assign(Object.assign({}, item), { title: value }) : item) })));
+            return;
+        }
+        setInValue(prev => (Object.assign(Object.assign({}, prev), { [tag]: value })));
+    }, [inValue, setInValue, tag]);
+    return changeTag;
+};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "ehscan-react-components",
-  "version": "0.1.37",
+  "version": "0.1.39",
   "description": "components",
   "main": "dist/Components.js",
   "types": "dist/Components.d.ts",