module-package-comp 1.0.0
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/component/ComponentDisplayer.d.ts +9 -0
- package/dist/component/ComponentDisplayer.js +59 -0
- package/dist/component/ComponentDisplayer.js.map +1 -0
- package/dist/component/PrimaryBtn.d.ts +8 -0
- package/dist/component/PrimaryBtn.js +7 -0
- package/dist/component/PrimaryBtn.js.map +1 -0
- package/dist/component/ShowAttr.d.ts +9 -0
- package/dist/component/ShowAttr.js +38 -0
- package/dist/component/ShowAttr.js.map +1 -0
- package/dist/component/inputs/Input.d.ts +13 -0
- package/dist/component/inputs/Input.js +7 -0
- package/dist/component/inputs/Input.js.map +1 -0
- package/dist/component/inputs/LabeledMutliSelect.d.ts +6 -0
- package/dist/component/inputs/LabeledMutliSelect.js +18 -0
- package/dist/component/inputs/LabeledMutliSelect.js.map +1 -0
- package/dist/component/inputs/LableledInput.d.ts +6 -0
- package/dist/component/inputs/LableledInput.js +18 -0
- package/dist/component/inputs/LableledInput.js.map +1 -0
- package/dist/component/inputs/LableledSelect.d.ts +6 -0
- package/dist/component/inputs/LableledSelect.js +18 -0
- package/dist/component/inputs/LableledSelect.js.map +1 -0
- package/dist/component/inputs/MultiSelect.d.ts +8 -0
- package/dist/component/inputs/MultiSelect.js +23 -0
- package/dist/component/inputs/MultiSelect.js.map +1 -0
- package/dist/component/inputs/Select.d.ts +7 -0
- package/dist/component/inputs/Select.js +5 -0
- package/dist/component/inputs/Select.js.map +1 -0
- package/dist/index.css +783 -0
- package/dist/index.d.ts +4 -0
- package/dist/index.js +5 -0
- package/dist/index.js.map +1 -0
- package/dist/util/type.d.ts +92 -0
- package/dist/util/type.js +39 -0
- package/dist/util/type.js.map +1 -0
- package/package.json +23 -0
- package/postcss.config.js +6 -0
- package/src/component/ComponentDisplayer.tsx +107 -0
- package/src/component/PrimaryBtn.tsx +30 -0
- package/src/component/ShowAttr.tsx +120 -0
- package/src/component/inputs/Input.tsx +43 -0
- package/src/component/inputs/LabeledMutliSelect.tsx +15 -0
- package/src/component/inputs/LableledInput.tsx +14 -0
- package/src/component/inputs/LableledSelect.tsx +14 -0
- package/src/component/inputs/MultiSelect.tsx +86 -0
- package/src/component/inputs/Select.tsx +28 -0
- package/src/index.css +3 -0
- package/src/index.tsx +6 -0
- package/src/util/type.ts +107 -0
- package/tailwind.config.js +12 -0
- package/tsconfig.json +113 -0
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Component, DataJSON } from "../util/type";
|
|
2
|
+
type ComponentDisplayerProps = {
|
|
3
|
+
components: Component[];
|
|
4
|
+
data: DataJSON;
|
|
5
|
+
setData: (data: DataJSON) => void;
|
|
6
|
+
onSubmit: () => void;
|
|
7
|
+
};
|
|
8
|
+
export declare function ComponentDisplayer({ components, data, setData, onSubmit, }: ComponentDisplayerProps): import("react/jsx-runtime").JSX.Element;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
import { ShowAttr } from "./ShowAttr";
|
|
4
|
+
import PrimaryBtn from "./PrimaryBtn";
|
|
5
|
+
export function ComponentDisplayer({ components, data, setData, onSubmit, }) {
|
|
6
|
+
const [page, setPage] = useState(0);
|
|
7
|
+
return (_jsxs("form", { onSubmit: onSubmit, className: "min-w-72", children: [_jsx("h1", { className: "font-bold text-center text-blue-800 text-4xl mb-8", children: components[page].label }), _jsx("div", { className: "space-y-3", children: components[page].attributes.map((attr) => {
|
|
8
|
+
if (canShow(attr, data, components[page].conditions || [])) {
|
|
9
|
+
return (_jsx(ShowAttr, { attribute: attr, value: data[attr.name] ? String(data[attr.name]) : "", setValue: (s) => {
|
|
10
|
+
const temp = Object.assign({}, data);
|
|
11
|
+
temp[attr.name] = s;
|
|
12
|
+
setData(temp);
|
|
13
|
+
} }, attr.name));
|
|
14
|
+
}
|
|
15
|
+
else {
|
|
16
|
+
if (data[attr.name]) {
|
|
17
|
+
const temp = Object.assign({}, data);
|
|
18
|
+
temp[attr.name] = "";
|
|
19
|
+
setData(temp);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
}) }), _jsx("div", { className: "flex justify-center my-8", children: _jsx(PrimaryBtn, { clickFn: onSubmit, text: "Submit" }) })] }));
|
|
23
|
+
}
|
|
24
|
+
function canShow(attr, data, conds) {
|
|
25
|
+
const conditions = conds.filter((c) => c[c.length - 1].delimiter === attr.name);
|
|
26
|
+
if (!conditions || conditions.length === 0) {
|
|
27
|
+
return true;
|
|
28
|
+
}
|
|
29
|
+
return conditions.some((conditionSet) => {
|
|
30
|
+
let lastDelimiter = "ou"; // Default to OR
|
|
31
|
+
return conditionSet.every((condition, index) => {
|
|
32
|
+
const result = evaluateCondition(condition, data);
|
|
33
|
+
if (index < conditionSet.length - 1) {
|
|
34
|
+
lastDelimiter = condition.delimiter;
|
|
35
|
+
}
|
|
36
|
+
if (lastDelimiter === "et") {
|
|
37
|
+
return result;
|
|
38
|
+
}
|
|
39
|
+
else {
|
|
40
|
+
return result || index === conditionSet.length - 1;
|
|
41
|
+
}
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
}
|
|
45
|
+
function evaluateCondition(condition, data) {
|
|
46
|
+
const { attribute, cond, value } = condition;
|
|
47
|
+
const dataValue = data[attribute];
|
|
48
|
+
switch (cond) {
|
|
49
|
+
case "EQ":
|
|
50
|
+
return value === dataValue;
|
|
51
|
+
case "INF":
|
|
52
|
+
return value < dataValue;
|
|
53
|
+
case "SUP":
|
|
54
|
+
return value > dataValue;
|
|
55
|
+
default:
|
|
56
|
+
return false;
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
//# sourceMappingURL=ComponentDisplayer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ComponentDisplayer.js","sourceRoot":"","sources":["../../src/component/ComponentDisplayer.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useRef } from "react";
|
|
3
|
+
export default function PrimaryBtn({ text, clickFn, className, disabled, }) {
|
|
4
|
+
const btn = useRef(null);
|
|
5
|
+
return (_jsx("button", { type: "submit", ref: btn, onClick: clickFn, className: "rounded-2xl bg-secondary-blue bg-opacity-85 px-8 py-2 font-bold text-white-shade hover:bg-opacity-100", disabled: disabled, children: text }));
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=PrimaryBtn.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"PrimaryBtn.js","sourceRoot":"","sources":["../../src/component/PrimaryBtn.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAS/B,MAAM,CAAC,OAAO,UAAU,UAAU,CAAC,EACjC,IAAI,EACJ,OAAO,EACP,SAAS,EACT,QAAQ,GACF;IACN,MAAM,GAAG,GAAG,MAAM,CAAoB,IAAI,CAAC,CAAC;IAC5C,OAAO,CACL,iBACE,IAAI,EAAC,QAAQ,EACb,GAAG,EAAE,GAAG,EACR,OAAO,EAAE,OAAO,EAChB,SAAS,EACP,uGAAuG,EAEzG,QAAQ,EAAE,QAAQ,YAEjB,IAAI,GACE,CACV,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { Attribute } from "../util/type";
|
|
2
|
+
type ShowAttrProps = {
|
|
3
|
+
attribute: Attribute;
|
|
4
|
+
value: string;
|
|
5
|
+
setValue: (s: string) => void;
|
|
6
|
+
showLabel?: boolean;
|
|
7
|
+
};
|
|
8
|
+
export declare function ShowAttr({ attribute, value, setValue, showLabel, }: ShowAttrProps): import("react/jsx-runtime").JSX.Element | undefined;
|
|
9
|
+
export {};
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { AttributeTypeEnum } from "../util/type";
|
|
3
|
+
import LabeledSelect from "./inputs/LableledSelect";
|
|
4
|
+
import LabeledInput from "./inputs/LableledInput";
|
|
5
|
+
import LabeledMutliSelect from "./inputs/LabeledMutliSelect";
|
|
6
|
+
import { useMemo } from "react";
|
|
7
|
+
export function ShowAttr({ attribute, value, setValue, showLabel = true, }) {
|
|
8
|
+
const label = useMemo(() => (showLabel ? attribute.label || "" : ""), [attribute.label]);
|
|
9
|
+
const type = useMemo(() => {
|
|
10
|
+
if (attribute.type)
|
|
11
|
+
return AttributeTypeEnum[attribute.type];
|
|
12
|
+
}, [attribute.type]);
|
|
13
|
+
switch (type) {
|
|
14
|
+
case AttributeTypeEnum.NUMBER:
|
|
15
|
+
return (_jsx(LabeledInput, { label: label, value: value, setValue: setValue, type: "number" }));
|
|
16
|
+
case AttributeTypeEnum.TEXT:
|
|
17
|
+
return (_jsx(LabeledInput, { label: label, value: value, setValue: setValue, type: "text" }));
|
|
18
|
+
case AttributeTypeEnum.LIST:
|
|
19
|
+
return (_jsx(LabeledSelect, { label: label, selected: value, setSelected: setValue, options: attribute.content || [] }));
|
|
20
|
+
case AttributeTypeEnum.BOOLEAN:
|
|
21
|
+
return (_jsx(LabeledInput, { type: "checkbox", label: label, checked: value === "true", setValue: (s) => setValue(s) }));
|
|
22
|
+
case AttributeTypeEnum.DATE:
|
|
23
|
+
return (_jsx(LabeledInput, { type: "date", label: label, value: value, setValue: (date) => setValue(date) }));
|
|
24
|
+
case AttributeTypeEnum.LINK:
|
|
25
|
+
return (_jsxs("div", { className: "w-full", children: [_jsx("label", { className: "block text-sm font-bold mb-1", children: label }), _jsx("a", { href: attribute.content, children: attribute.content })] }));
|
|
26
|
+
case AttributeTypeEnum.MULTIPLE:
|
|
27
|
+
return (_jsx(LabeledMutliSelect, { label: label, selectedOptions: value !== "" ? value.split(",") : [], onChange: (selected) => setValue(selected.join(",")), options: attribute.content || [] }));
|
|
28
|
+
case AttributeTypeEnum.FILE:
|
|
29
|
+
return (_jsx(LabeledInput, { label: label, type: "file", value: value, setValue: setValue }));
|
|
30
|
+
case AttributeTypeEnum.IMAGE_OUTPUT:
|
|
31
|
+
return (_jsxs("div", { className: "w-full", children: [_jsx("label", { className: "block text-sm font-bold mb-1", children: label }), _jsx("img", { className: "w-64", src: attribute.content })] }));
|
|
32
|
+
case AttributeTypeEnum.TEXT_OUTPUT:
|
|
33
|
+
return (_jsxs("div", { className: "w-full", children: [_jsx("label", { className: "block text-sm font-bold mb-1", children: label }), _jsx("p", { children: attribute.content })] }));
|
|
34
|
+
case AttributeTypeEnum.TITRE:
|
|
35
|
+
return (_jsx("div", { className: "w-full", children: _jsx("h2", { className: "text-3xl font-semibold", children: attribute.label }) }));
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
//# sourceMappingURL=ShowAttr.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"ShowAttr.js","sourceRoot":"","sources":["../../src/component/ShowAttr.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import { HTMLInputTypeAttribute } from "react";
|
|
2
|
+
export type InputProps = {
|
|
3
|
+
value?: string;
|
|
4
|
+
setValue: (s: string) => void;
|
|
5
|
+
type: HTMLInputTypeAttribute;
|
|
6
|
+
className?: string;
|
|
7
|
+
onBlur?: () => void;
|
|
8
|
+
maxLength?: number;
|
|
9
|
+
placeholder?: string;
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
checked?: boolean;
|
|
12
|
+
};
|
|
13
|
+
export default function Input({ value, setValue, className, type, onBlur, maxLength, placeholder, disabled, checked, }: InputProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
export default function Input({ value, setValue, className, type, onBlur, maxLength, placeholder, disabled, checked, }) {
|
|
3
|
+
return (_jsx("input", { type: type, className: "py-2 px-3 block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none", value: value, onChange: (e) => type === "checkbox"
|
|
4
|
+
? setValue(String(e.target.checked))
|
|
5
|
+
: setValue(e.target.value), disabled: disabled, onBlur: onBlur, maxLength: maxLength, placeholder: placeholder, checked: checked }));
|
|
6
|
+
}
|
|
7
|
+
//# sourceMappingURL=Input.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Input.js","sourceRoot":"","sources":["../../../src/component/inputs/Input.tsx"],"names":[],"mappings":";AAcA,MAAM,CAAC,OAAO,UAAU,KAAK,CAAC,EAC5B,KAAK,EACL,QAAQ,EACR,SAAS,EACT,IAAI,EACJ,MAAM,EACN,SAAS,EACT,WAAW,EACX,QAAQ,EACR,OAAO,GACI;IACX,OAAO,CACL,gBACE,IAAI,EAAE,IAAI,EACV,SAAS,EAAC,+JAA+J,EACzK,KAAK,EAAE,KAAK,EACZ,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CACd,IAAI,KAAK,UAAU;YACjB,CAAC,CAAC,QAAQ,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM,CAAC,OAAO,CAAC,CAAC;YACpC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAE9B,QAAQ,EAAE,QAAQ,EAClB,MAAM,EAAE,MAAM,EACd,SAAS,EAAE,SAAS,EACpB,WAAW,EAAE,WAAW,EACxB,OAAO,EAAE,OAAO,GAChB,CACH,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import MultiSelect from "./MultiSelect";
|
|
14
|
+
export default function LabeledMutliSelect(_a) {
|
|
15
|
+
var { label } = _a, inputprops = __rest(_a, ["label"]);
|
|
16
|
+
return (_jsxs("div", { className: "w-full", children: [_jsx("label", { className: "block text-sm font-bold mb-1", children: label }), _jsx(MultiSelect, Object.assign({}, inputprops))] }));
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=LabeledMutliSelect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LabeledMutliSelect.js","sourceRoot":"","sources":["../../../src/component/inputs/LabeledMutliSelect.tsx"],"names":[],"mappings":";;;;;;;;;;;;AACA,OAAO,WAAiC,MAAM,eAAe,CAAC;AAM9D,MAAM,CAAC,OAAO,UAAU,kBAAkB,CAAC,EAA+B;QAA/B,EAAE,KAAK,OAAwB,EAAnB,UAAU,cAAtB,SAAwB,CAAF;IAC/D,OAAO,CACL,eAAK,SAAS,EAAC,QAAQ,aACrB,gBAAO,SAAS,EAAC,8BAA8B,YAAE,KAAK,GAAS,EAC/D,KAAC,WAAW,oBAAK,UAAU,EAAI,IAC3B,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import Input from "./Input";
|
|
14
|
+
export default function LabeledInput(_a) {
|
|
15
|
+
var { label } = _a, inputProps = __rest(_a, ["label"]);
|
|
16
|
+
return (_jsxs("div", { className: "w-full", children: [_jsx("label", { className: "block text-sm font-bold mb-1", children: label }), _jsx(Input, Object.assign({}, inputProps))] }));
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=LableledInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LableledInput.js","sourceRoot":"","sources":["../../../src/component/inputs/LableledInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,KAAqB,MAAM,SAAS,CAAC;AAM5C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAA+B;QAA/B,EAAE,KAAK,OAAwB,EAAnB,UAAU,cAAtB,SAAwB,CAAF;IACzD,OAAO,CACL,eAAK,SAAS,EAAC,QAAQ,aACrB,gBAAO,SAAS,EAAC,8BAA8B,YAAE,KAAK,GAAS,EAC/D,KAAC,KAAK,oBAAK,UAAU,EAAI,IACrB,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
2
|
+
var t = {};
|
|
3
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
4
|
+
t[p] = s[p];
|
|
5
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
6
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
7
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
8
|
+
t[p[i]] = s[p[i]];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
13
|
+
import Select from "./Select";
|
|
14
|
+
export default function LabeledSelect(_a) {
|
|
15
|
+
var { label } = _a, inputProps = __rest(_a, ["label"]);
|
|
16
|
+
return (_jsxs("div", { className: "w-full", children: [_jsx("label", { className: "block text-sm font-bold mb-1", children: label }), _jsx(Select, Object.assign({}, inputProps))] }));
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=LableledSelect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LableledSelect.js","sourceRoot":"","sources":["../../../src/component/inputs/LableledSelect.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,MAAuB,MAAM,UAAU,CAAC;AAM/C,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAA+B;QAA/B,EAAE,KAAK,OAAwB,EAAnB,UAAU,cAAtB,SAAwB,CAAF;IAC1D,OAAO,CACL,eAAK,SAAS,EAAC,QAAQ,aACrB,gBAAO,SAAS,EAAC,8BAA8B,YAAE,KAAK,GAAS,EAC/D,KAAC,MAAM,oBAAK,UAAU,EAAI,IACtB,CACP,CAAC;AACJ,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
import { useState } from "react";
|
|
3
|
+
const MultiSelect = ({ options, selectedOptions, onChange, }) => {
|
|
4
|
+
const [isOpen, setIsOpen] = useState(false);
|
|
5
|
+
const [filter, setFilter] = useState("");
|
|
6
|
+
const toggleDropdown = () => setIsOpen(!isOpen);
|
|
7
|
+
const handleOptionClick = (option) => {
|
|
8
|
+
if (selectedOptions.includes(option)) {
|
|
9
|
+
onChange(selectedOptions.filter((selected) => selected !== option));
|
|
10
|
+
}
|
|
11
|
+
else {
|
|
12
|
+
onChange([...selectedOptions, option]);
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
console.log(selectedOptions);
|
|
16
|
+
const handleFilterChange = (e) => {
|
|
17
|
+
setFilter(e.target.value);
|
|
18
|
+
};
|
|
19
|
+
const filteredOptions = options.filter((option) => option.toLowerCase().includes(filter.toLowerCase()));
|
|
20
|
+
return (_jsxs("div", { className: "relative inline-block w-full", children: [_jsx("div", { className: "py-2 px-3 bg-white block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none", onClick: toggleDropdown, children: Array.isArray(selectedOptions) && selectedOptions.length > 0 ? (selectedOptions.map((option) => (_jsx("span", { className: "mr-1 inline-block rounded-full bg-secondary-blue px-2 py-1 text-sm text-white-shade", children: option }, option)))) : (_jsx("span", { className: "text-placeholder-gray", children: "Select options" })) }), isOpen && (_jsxs("div", { className: "absolute left-0 right-0 z-10 mt-2 rounded-md border border-secondary-gray bg-white-shade", children: [_jsx("input", { type: "text", className: "w-full border-b border-secondary-gray p-2", placeholder: "Filter options...", value: filter, onChange: handleFilterChange }), _jsx("div", { className: "max-h-60 overflow-y-auto", children: filteredOptions.map((option) => (_jsxs("div", { className: "cursor-pointer p-2 hover:bg-primary-gray", onClick: () => handleOptionClick(option), children: [_jsx("input", { type: "checkbox", checked: selectedOptions.includes(option), readOnly: true, className: "mr-2" }), _jsx("span", { className: "ml-2", children: option })] }, option))) })] }))] }));
|
|
21
|
+
};
|
|
22
|
+
export default MultiSelect;
|
|
23
|
+
//# sourceMappingURL=MultiSelect.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"MultiSelect.js","sourceRoot":"","sources":["../../../src/component/inputs/MultiSelect.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAQxC,MAAM,WAAW,GAA+B,CAAC,EAC/C,OAAO,EACP,eAAe,EACf,QAAQ,GACT,EAAE,EAAE;IACH,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAC5C,MAAM,CAAC,MAAM,EAAE,SAAS,CAAC,GAAG,QAAQ,CAAC,EAAE,CAAC,CAAC;IAEzC,MAAM,cAAc,GAAG,GAAG,EAAE,CAAC,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;IAEhD,MAAM,iBAAiB,GAAG,CAAC,MAAc,EAAE,EAAE;QAC3C,IAAI,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,EAAE,CAAC;YACrC,QAAQ,CAAC,eAAe,CAAC,MAAM,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,QAAQ,KAAK,MAAM,CAAC,CAAC,CAAC;QACtE,CAAC;aAAM,CAAC;YACN,QAAQ,CAAC,CAAC,GAAG,eAAe,EAAE,MAAM,CAAC,CAAC,CAAC;QACzC,CAAC;IACH,CAAC,CAAC;IACF,OAAO,CAAC,GAAG,CAAC,eAAe,CAAC,CAAC;IAC7B,MAAM,kBAAkB,GAAG,CAAC,CAAsC,EAAE,EAAE;QACpE,SAAS,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC,CAAC;IAEF,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,MAAM,EAAE,EAAE,CAChD,MAAM,CAAC,WAAW,EAAE,CAAC,QAAQ,CAAC,MAAM,CAAC,WAAW,EAAE,CAAC,CACpD,CAAC;IAEF,OAAO,CACL,eAAK,SAAS,EAAC,8BAA8B,aAC3C,cACE,SAAS,EAAC,wKAAwK,EAClL,OAAO,EAAE,cAAc,YAEtB,KAAK,CAAC,OAAO,CAAC,eAAe,CAAC,IAAI,eAAe,CAAC,MAAM,GAAG,CAAC,CAAC,CAAC,CAAC,CAC9D,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC9B,eAEE,SAAS,EAAC,qFAAqF,YAE9F,MAAM,IAHF,MAAM,CAIN,CACR,CAAC,CACH,CAAC,CAAC,CAAC,CACF,eAAM,SAAS,EAAC,uBAAuB,+BAAsB,CAC9D,GACG,EACL,MAAM,IAAI,CACT,eAAK,SAAS,EAAC,0FAA0F,aACvG,gBACE,IAAI,EAAC,MAAM,EACX,SAAS,EAAC,2CAA2C,EACrD,WAAW,EAAC,mBAAmB,EAC/B,KAAK,EAAE,MAAM,EACb,QAAQ,EAAE,kBAAkB,GAC5B,EACF,cAAK,SAAS,EAAC,0BAA0B,YACtC,eAAe,CAAC,GAAG,CAAC,CAAC,MAAM,EAAE,EAAE,CAAC,CAC/B,eAEE,SAAS,EAAC,0CAA0C,EACpD,OAAO,EAAE,GAAG,EAAE,CAAC,iBAAiB,CAAC,MAAM,CAAC,aAExC,gBACE,IAAI,EAAC,UAAU,EACf,OAAO,EAAE,eAAe,CAAC,QAAQ,CAAC,MAAM,CAAC,EACzC,QAAQ,QACR,SAAS,EAAC,MAAM,GAChB,EACF,eAAM,SAAS,EAAC,MAAM,YAAE,MAAM,GAAQ,KAVjC,MAAM,CAWP,CACP,CAAC,GACE,IACF,CACP,IACG,CACP,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,WAAW,CAAC"}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
export type SelectProps = {
|
|
2
|
+
options: string[];
|
|
3
|
+
selected: string;
|
|
4
|
+
setSelected: (s: string) => void;
|
|
5
|
+
canDefault?: boolean;
|
|
6
|
+
};
|
|
7
|
+
export default function Select({ options, selected, setSelected, canDefault, }: SelectProps): import("react/jsx-runtime").JSX.Element;
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export default function Select({ options, selected, setSelected, canDefault, }) {
|
|
3
|
+
return (_jsxs("select", { value: selected || "", onChange: (e) => setSelected(e.target.value), className: "py-2 px-3 bg-white block w-full border-2 border-gray-200 rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none", children: [_jsx("option", { value: "", disabled: !canDefault, hidden: !canDefault, children: "selection" }), options.map((opt) => (_jsx("option", { value: opt, children: opt })))] }));
|
|
4
|
+
}
|
|
5
|
+
//# sourceMappingURL=Select.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Select.js","sourceRoot":"","sources":["../../../src/component/inputs/Select.tsx"],"names":[],"mappings":";AAOA,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,OAAO,EACP,QAAQ,EACR,WAAW,EACX,UAAU,GACE;IACZ,OAAO,CACL,kBACE,KAAK,EAAE,QAAQ,IAAI,EAAE,EACrB,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE,CAAC,WAAW,CAAC,CAAC,CAAC,MAAM,CAAC,KAAK,CAAC,EAC5C,SAAS,EAAC,wKAAwK,aAElL,iBAAQ,KAAK,EAAC,EAAE,EAAC,QAAQ,EAAE,CAAC,UAAU,EAAE,MAAM,EAAE,CAAC,UAAU,0BAElD,EACR,OAAO,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,EAAE,CAAC,CACpB,iBAAQ,KAAK,EAAE,GAAG,YAAG,GAAG,GAAU,CACnC,CAAC,IACK,CACV,CAAC;AACJ,CAAC"}
|