module-package-comp 1.2.5 → 1.3.2
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/ShowAttr.js +4 -10
- package/dist/component/ShowAttr.js.map +1 -1
- package/dist/component/inputs/FileInput.d.ts +5 -0
- package/dist/component/inputs/FileInput.js +14 -0
- package/dist/component/inputs/FileInput.js.map +1 -0
- package/dist/component/inputs/LableledFileInput.d.ts +6 -0
- package/dist/component/inputs/LableledFileInput.js +18 -0
- package/dist/component/inputs/LableledFileInput.js.map +1 -0
- package/dist/index.css +5 -0
- package/package.json +1 -1
- package/src/component/ShowAttr.tsx +15 -21
- package/src/component/inputs/FileInput.tsx +30 -0
- package/src/component/inputs/LableledFileInput.tsx +14 -0
|
@@ -3,8 +3,9 @@ import { AttributeTypeEnum } from "../util/type";
|
|
|
3
3
|
import LabeledSelect from "./inputs/LableledSelect";
|
|
4
4
|
import LabeledInput from "./inputs/LableledInput";
|
|
5
5
|
import LabeledMutliSelect from "./inputs/LabeledMutliSelect";
|
|
6
|
-
import {
|
|
6
|
+
import { useMemo } from "react";
|
|
7
7
|
import { Parser } from "expr-eval";
|
|
8
|
+
import LabeledFileInput from "./inputs/LableledFileInput";
|
|
8
9
|
export function ShowAttr({ attribute, value, setValue, showLabel = true, data, }) {
|
|
9
10
|
var _a, _b, _c, _d;
|
|
10
11
|
const label = useMemo(() => (showLabel ? attribute.label || "" : ""), [attribute.label]);
|
|
@@ -28,7 +29,7 @@ export function ShowAttr({ attribute, value, setValue, showLabel = true, data, }
|
|
|
28
29
|
case AttributeTypeEnum.MULTIPLE:
|
|
29
30
|
return (_jsx(LabeledMutliSelect, { label: label, selectedOptions: value !== "" ? value.split(",") : [], onChange: (selected) => setValue(selected.join(",")), options: attribute.content || [] }));
|
|
30
31
|
case AttributeTypeEnum.FILE:
|
|
31
|
-
return (_jsx(
|
|
32
|
+
return (_jsx(LabeledFileInput, { label: label, fileUrl: value.includes("http") ? value : undefined, setFileData: setValue }));
|
|
32
33
|
case AttributeTypeEnum.IMAGE_OUTPUT:
|
|
33
34
|
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 })] }));
|
|
34
35
|
case AttributeTypeEnum.VIDEO_OUTPUT:
|
|
@@ -57,13 +58,6 @@ function calculateContent(content, data) {
|
|
|
57
58
|
}
|
|
58
59
|
}
|
|
59
60
|
function ShowVideo({ url }) {
|
|
60
|
-
|
|
61
|
-
useEffect(() => {
|
|
62
|
-
fetch(`https://www.youtube.com/oembed?url=${url}&format=json`)
|
|
63
|
-
.then((res) => res.json())
|
|
64
|
-
.then((json) => setHtml(json.html.replace(/width="\d{3}" height="\d{3}"/, "width='854' height='480'")))
|
|
65
|
-
.catch((error) => console.error("Error fetching video data:", error));
|
|
66
|
-
}, [url]);
|
|
67
|
-
return _jsx("div", { dangerouslySetInnerHTML: { __html: html } });
|
|
61
|
+
return (_jsx("div", { children: _jsx("iframe", { width: "560", height: "315", src: "https://www.youtube.com/embed/" + url, title: "YouTube video player", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" }) }));
|
|
68
62
|
}
|
|
69
63
|
//# sourceMappingURL=ShowAttr.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ShowAttr.js","sourceRoot":"","sources":["../../src/component/ShowAttr.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAa,iBAAiB,EAAqB,MAAM,cAAc,CAAC;AAC/E,OAAO,aAAa,MAAM,yBAAyB,CAAC;AACpD,OAAO,YAAY,MAAM,wBAAwB,CAAC;AAClD,OAAO,kBAAkB,MAAM,6BAA6B,CAAC;AAC7D,OAAO,
|
|
1
|
+
{"version":3,"file":"ShowAttr.js","sourceRoot":"","sources":["../../src/component/ShowAttr.tsx"],"names":[],"mappings":"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"}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
+
export default function FileInput({ fileUrl, setFileData }) {
|
|
3
|
+
function handleChange(event) {
|
|
4
|
+
if (event.target.files && event.target.files[0] && setFileData) {
|
|
5
|
+
const reader = new FileReader();
|
|
6
|
+
reader.onloadend = () => {
|
|
7
|
+
setFileData(`${event.target.files[0].name}&&${reader.result}`);
|
|
8
|
+
};
|
|
9
|
+
reader.readAsDataURL(event.target.files[0]);
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
return (_jsxs("div", { children: [fileUrl && (_jsx("a", { href: fileUrl, target: "_blank", className: "text-blue-500 block", children: fileUrl.substring(fileUrl.lastIndexOf("/") + 1) })), setFileData && _jsx("input", { type: "file", onChange: handleChange })] }));
|
|
13
|
+
}
|
|
14
|
+
//# sourceMappingURL=FileInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"FileInput.js","sourceRoot":"","sources":["../../../src/component/inputs/FileInput.tsx"],"names":[],"mappings":";AAOA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,EAAE,OAAO,EAAE,WAAW,EAAkB;IACxE,SAAS,YAAY,CAAC,KAAoC;QACxD,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,IAAI,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,WAAW,EAAE,CAAC;YAC/D,MAAM,MAAM,GAAG,IAAI,UAAU,EAAE,CAAC;YAChC,MAAM,CAAC,SAAS,GAAG,GAAG,EAAE;gBACtB,WAAW,CACT,GAAG,KAAK,CAAC,MAAM,CAAC,KAAM,CAAC,CAAC,CAAC,CAAC,IAAI,KAAK,MAAM,CAAC,MAAgB,EAAE,CAC7D,CAAC;YACJ,CAAC,CAAC;YACF,MAAM,CAAC,aAAa,CAAC,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,CAAC;QAC9C,CAAC;IACH,CAAC;IACD,OAAO,CACL,0BACG,OAAO,IAAI,CACV,YAAG,IAAI,EAAE,OAAO,EAAE,MAAM,EAAC,QAAQ,EAAC,SAAS,EAAC,qBAAqB,YAC9D,OAAO,CAAC,SAAS,CAAC,OAAO,CAAC,WAAW,CAAC,GAAG,CAAC,GAAG,CAAC,CAAC,GAC9C,CACL,EACA,WAAW,IAAI,gBAAO,IAAI,EAAC,MAAM,EAAC,QAAQ,EAAE,YAAY,GAAI,IACzD,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 FileInput from "./FileInput";
|
|
14
|
+
export default function LabeledFileInput(_a) {
|
|
15
|
+
var { label } = _a, inputProps = __rest(_a, ["label"]);
|
|
16
|
+
return (_jsxs("div", { className: "w-full flex gap-2 items-center", children: [_jsx("label", { className: "block text-base font-bold mb-1", children: label }), _jsx(FileInput, Object.assign({}, inputProps))] }));
|
|
17
|
+
}
|
|
18
|
+
//# sourceMappingURL=LableledFileInput.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"LableledFileInput.js","sourceRoot":"","sources":["../../../src/component/inputs/LableledFileInput.tsx"],"names":[],"mappings":";;;;;;;;;;;;AAAA,OAAO,SAA6B,MAAM,aAAa,CAAC;AAMxD,MAAM,CAAC,OAAO,UAAU,gBAAgB,CAAC,EAA+B;QAA/B,EAAE,KAAK,OAAwB,EAAnB,UAAU,cAAtB,SAAwB,CAAF;IAC7D,OAAO,CACL,eAAK,SAAS,EAAC,gCAAgC,aAC7C,gBAAO,SAAS,EAAC,gCAAgC,YAAE,KAAK,GAAS,EACjE,KAAC,SAAS,oBAAK,UAAU,EAAI,IACzB,CACP,CAAC;AACJ,CAAC"}
|
package/dist/index.css
CHANGED
|
@@ -815,6 +815,11 @@ video {
|
|
|
815
815
|
font-weight: 600;
|
|
816
816
|
}
|
|
817
817
|
|
|
818
|
+
.text-blue-500 {
|
|
819
|
+
--tw-text-opacity: 1;
|
|
820
|
+
color: rgb(59 130 246 / var(--tw-text-opacity));
|
|
821
|
+
}
|
|
822
|
+
|
|
818
823
|
.text-blue-800 {
|
|
819
824
|
--tw-text-opacity: 1;
|
|
820
825
|
color: rgb(30 64 175 / var(--tw-text-opacity));
|
package/package.json
CHANGED
|
@@ -4,6 +4,7 @@ import LabeledInput from "./inputs/LableledInput";
|
|
|
4
4
|
import LabeledMutliSelect from "./inputs/LabeledMutliSelect";
|
|
5
5
|
import { useEffect, useMemo, useState } from "react";
|
|
6
6
|
import { Parser } from "expr-eval";
|
|
7
|
+
import LabeledFileInput from "./inputs/LableledFileInput";
|
|
7
8
|
|
|
8
9
|
type ShowAttrProps = {
|
|
9
10
|
attribute: Attribute;
|
|
@@ -95,11 +96,10 @@ export function ShowAttr({
|
|
|
95
96
|
);
|
|
96
97
|
case AttributeTypeEnum.FILE:
|
|
97
98
|
return (
|
|
98
|
-
<
|
|
99
|
+
<LabeledFileInput
|
|
99
100
|
label={label}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
setValue={setValue}
|
|
101
|
+
fileUrl={value.includes("http") ? value : undefined}
|
|
102
|
+
setFileData={setValue}
|
|
103
103
|
/>
|
|
104
104
|
);
|
|
105
105
|
case AttributeTypeEnum.IMAGE_OUTPUT:
|
|
@@ -145,21 +145,15 @@ function calculateContent(content: string, data: DataJSON): number {
|
|
|
145
145
|
}
|
|
146
146
|
|
|
147
147
|
function ShowVideo({ url }: { url: string }) {
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
|
|
157
|
-
|
|
158
|
-
|
|
159
|
-
),
|
|
160
|
-
)
|
|
161
|
-
.catch((error) => console.error("Error fetching video data:", error));
|
|
162
|
-
}, [url]);
|
|
163
|
-
|
|
164
|
-
return <div dangerouslySetInnerHTML={{ __html: html }}></div>;
|
|
148
|
+
return (
|
|
149
|
+
<div>
|
|
150
|
+
<iframe
|
|
151
|
+
width="560"
|
|
152
|
+
height="315"
|
|
153
|
+
src={"https://www.youtube.com/embed/" + url}
|
|
154
|
+
title="YouTube video player"
|
|
155
|
+
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
|
|
156
|
+
></iframe>
|
|
157
|
+
</div>
|
|
158
|
+
);
|
|
165
159
|
}
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import { ChangeEvent } from "react";
|
|
2
|
+
|
|
3
|
+
export type FileInputProps = {
|
|
4
|
+
fileUrl?: string;
|
|
5
|
+
setFileData?: (fileData: string) => void;
|
|
6
|
+
};
|
|
7
|
+
|
|
8
|
+
export default function FileInput({ fileUrl, setFileData }: FileInputProps) {
|
|
9
|
+
function handleChange(event: ChangeEvent<HTMLInputElement>) {
|
|
10
|
+
if (event.target.files && event.target.files[0] && setFileData) {
|
|
11
|
+
const reader = new FileReader();
|
|
12
|
+
reader.onloadend = () => {
|
|
13
|
+
setFileData(
|
|
14
|
+
`${event.target.files![0].name}&&${reader.result as string}`,
|
|
15
|
+
);
|
|
16
|
+
};
|
|
17
|
+
reader.readAsDataURL(event.target.files[0]);
|
|
18
|
+
}
|
|
19
|
+
}
|
|
20
|
+
return (
|
|
21
|
+
<div>
|
|
22
|
+
{fileUrl && (
|
|
23
|
+
<a href={fileUrl} target="_blank" className="text-blue-500 block">
|
|
24
|
+
{fileUrl.substring(fileUrl.lastIndexOf("/") + 1)}
|
|
25
|
+
</a>
|
|
26
|
+
)}
|
|
27
|
+
{setFileData && <input type="file" onChange={handleChange} />}
|
|
28
|
+
</div>
|
|
29
|
+
);
|
|
30
|
+
}
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import FileInput, { FileInputProps } from "./FileInput";
|
|
2
|
+
|
|
3
|
+
type Props = {
|
|
4
|
+
label: string;
|
|
5
|
+
} & FileInputProps;
|
|
6
|
+
|
|
7
|
+
export default function LabeledFileInput({ label, ...inputProps }: Props) {
|
|
8
|
+
return (
|
|
9
|
+
<div className="w-full flex gap-2 items-center">
|
|
10
|
+
<label className="block text-base font-bold mb-1">{label}</label>
|
|
11
|
+
<FileInput {...inputProps} />
|
|
12
|
+
</div>
|
|
13
|
+
);
|
|
14
|
+
}
|