fix file preview
This commit is contained in:
rizky
parent
b802de4505
commit
e61b8980b2
|
|
@ -1,12 +1,102 @@
|
|||
import { ExternalLink } from "lucide-react";
|
||||
import { ReactElement } from "react";
|
||||
|
||||
export const FilePreview = ({
|
||||
export const ThumbPreview = ({
|
||||
url,
|
||||
variant,
|
||||
del,
|
||||
}: {
|
||||
url: string;
|
||||
variant?: "thumb";
|
||||
del: ReactElement;
|
||||
}) => {
|
||||
const file = getFileName(url);
|
||||
if (typeof file === "string") return;
|
||||
|
||||
const color = darkenColor(generateRandomColor(file.extension));
|
||||
let content = (
|
||||
<div
|
||||
className={cx(
|
||||
css`
|
||||
background: white;
|
||||
color: ${color};
|
||||
border: 1px solid ${color};
|
||||
color: ${color};
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
font-size: 14px;
|
||||
font-weight: black;
|
||||
padding: 3px 7px;
|
||||
height: 26px;
|
||||
`,
|
||||
"c-flex c-items-center"
|
||||
)}
|
||||
>
|
||||
{file.extension}
|
||||
|
||||
<div className="c-ml-1">
|
||||
<ExternalLink size="12px" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
let is_image = false;
|
||||
if (url.startsWith("_file/")) {
|
||||
if ([".png", ".jpeg", ".jpg", ".webp"].find((e) => url.endsWith(e))) {
|
||||
is_image = true;
|
||||
content = (
|
||||
<img
|
||||
className={cx(
|
||||
"c-rounded-md",
|
||||
css`
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
#ccc 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(135deg, #ccc 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #ccc 75%),
|
||||
linear-gradient(135deg, transparent 75%, #ccc 75%);
|
||||
background-size: 25px 25px; /* Must be a square */
|
||||
background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
|
||||
`
|
||||
)}
|
||||
src={siteurl(
|
||||
`/_img/${url.substring("_file/".length)}?${"w=60&h=60&fit=cover"}`
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{file.extension && (
|
||||
<div
|
||||
className={cx(
|
||||
"c-flex c-border c-rounded c-items-start c-px-1 c-relative c-bg-white c-cursor-pointer",
|
||||
css`
|
||||
&:hover {
|
||||
border: 1px solid #1c4ed8;
|
||||
outline: 1px solid #1c4ed8;
|
||||
}
|
||||
`,
|
||||
"c-space-x-1 c-py-1"
|
||||
)}
|
||||
onClick={() => {
|
||||
let _url = siteurl(url || "");
|
||||
window.open(_url, "_blank");
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
{del}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export const FilePreview = ({ url }: { url: string }) => {
|
||||
const file = getFileName(url);
|
||||
if (typeof file === "string")
|
||||
return (
|
||||
|
|
@ -49,62 +139,40 @@ export const FilePreview = ({
|
|||
</div>
|
||||
);
|
||||
|
||||
if (variant === "thumb") {
|
||||
content = (
|
||||
<div
|
||||
className={cx(
|
||||
css`
|
||||
background: white;
|
||||
color: ${color};
|
||||
border: 1px solid ${color};
|
||||
color: ${color};
|
||||
border-radius: 3px;
|
||||
text-transform: uppercase;
|
||||
font-size: 16px;
|
||||
font-weight: black;
|
||||
padding: 3px 7px;
|
||||
margin-left: 5px;
|
||||
height: 30px;
|
||||
`,
|
||||
"c-flex c-items-center"
|
||||
)}
|
||||
>
|
||||
{file.extension}
|
||||
|
||||
<div className="c-ml-1">
|
||||
<ExternalLink size="12px" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
if (url.startsWith("_file/")) {
|
||||
if ([".png", ".jpeg", ".jpg", ".webp"].find((e) => url.endsWith(e))) {
|
||||
content = (
|
||||
<img
|
||||
className="c-py-1 c-rounded-md"
|
||||
className={cx(
|
||||
"c-my-1 c-rounded-md",
|
||||
css`
|
||||
background-image: linear-gradient(
|
||||
45deg,
|
||||
#ccc 25%,
|
||||
transparent 25%
|
||||
),
|
||||
linear-gradient(135deg, #ccc 25%, transparent 25%),
|
||||
linear-gradient(45deg, transparent 75%, #ccc 75%),
|
||||
linear-gradient(135deg, transparent 75%, #ccc 75%);
|
||||
background-size: 25px 25px; /* Must be a square */
|
||||
background-position: 0 0, 12.5px 0, 12.5px -12.5px, 0px 12.5px; /* Must be half of one side of the square */
|
||||
`
|
||||
)}
|
||||
src={siteurl(
|
||||
`/_img/${url.substring("_file/".length)}?${
|
||||
variant === "thumb" ? "w=95&h=95" : "w=100&h=20"
|
||||
}`
|
||||
`/_img/${url.substring("_file/".length)}?${"w=100&h=20"}`
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
{file.extension && (
|
||||
<div
|
||||
className={cx(
|
||||
"c-flex c-border c-rounded c-items-center c-px-1 c-bg-white c-cursor-pointer",
|
||||
variant !== "thumb"
|
||||
? "c-pr-2"
|
||||
: css`
|
||||
width: 95px;
|
||||
max-height: 95px;
|
||||
min-height: 50px;
|
||||
`,
|
||||
"c-pr-2",
|
||||
css`
|
||||
&:hover {
|
||||
border: 1px solid #1c4ed8;
|
||||
|
|
@ -118,11 +186,9 @@ export const FilePreview = ({
|
|||
}}
|
||||
>
|
||||
{content}
|
||||
{variant !== "thumb" && (
|
||||
<div className="c-ml-2">
|
||||
<ExternalLink size="12px" />
|
||||
</div>
|
||||
)}
|
||||
<div className="c-ml-2">
|
||||
<ExternalLink size="12px" />
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ import { Trash2, Upload } from "lucide-react";
|
|||
import { ChangeEvent, FC } from "react";
|
||||
import { FMLocal, FieldLocal, FieldProp } from "../../typings";
|
||||
import { PropTypeInput } from "./TypeInput";
|
||||
import { FilePreview } from "./FilePreview";
|
||||
import { FilePreview, ThumbPreview } from "./FilePreview";
|
||||
import { Spinner } from "lib/comps/ui/field-loading";
|
||||
const w = window as unknown as {
|
||||
serverurl: string;
|
||||
|
|
@ -123,50 +123,46 @@ export const FieldUploadMulti: FC<{
|
|||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cx(
|
||||
"c-relative",
|
||||
css`
|
||||
.del {
|
||||
opacity: 0;
|
||||
}
|
||||
&:hover {
|
||||
.del {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
`
|
||||
)}
|
||||
>
|
||||
<FilePreview url={value || ""} variant="thumb" />
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (confirm("Remove this file ?")) {
|
||||
list.splice(idx, 1);
|
||||
fm.data[field.name] = JSON.stringify(list);
|
||||
fm.render();
|
||||
}
|
||||
}}
|
||||
className={cx(
|
||||
"c-flex c-flex-row c-items-center c-px-1 c-rounded c-bg-white c-cursor-pointer hover:c-bg-red-100 c-absolute c-top-0 c-right-0 del transition-all",
|
||||
css`
|
||||
border: 1px solid red;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
margin: 5px;
|
||||
`
|
||||
)}
|
||||
>
|
||||
<Trash2 className="c-text-red-500 c-h-4 c-w-4 " />
|
||||
</div>
|
||||
<div className={cx("c-relative")}>
|
||||
<ThumbPreview
|
||||
url={value || ""}
|
||||
del={
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
if (confirm("Remove this file ?")) {
|
||||
list.splice(idx, 1);
|
||||
fm.data[field.name] = JSON.stringify(list);
|
||||
fm.render();
|
||||
}
|
||||
}}
|
||||
className={cx(
|
||||
"c-flex c-flex-row c-items-center c-px-1 c-rounded c-bg-white c-cursor-pointer hover:c-bg-red-100 transition-all",
|
||||
css`
|
||||
border: 1px solid red;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
`
|
||||
)}
|
||||
>
|
||||
<Trash2 className="c-text-red-500 c-h-4 c-w-4 " />
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
{input.uploading.size > 0 && (
|
||||
<div className="c-flex c-space-x-1 c-p-2 c-border">
|
||||
<div
|
||||
className={cx(
|
||||
"c-flex c-space-x-1 c-p-2 c-border",
|
||||
css`
|
||||
height: 30px;
|
||||
`
|
||||
)}
|
||||
>
|
||||
<Spinner /> <div>Uploading</div>
|
||||
</div>
|
||||
)}
|
||||
|
|
@ -175,8 +171,10 @@ export const FieldUploadMulti: FC<{
|
|||
<div className={cx("c-flex c-border c-rounded ")}>
|
||||
<div
|
||||
className={cx(
|
||||
"c-flex c-flex-row c-relative c-py-1 c-flex-grow c-pr-2 c-items-center c-cursor-pointer hover:c-bg-blue-50",
|
||||
"c-flex c-flex-row c-relative c-flex-grow c-pr-2 c-items-center c-cursor-pointer hover:c-bg-blue-50",
|
||||
css`
|
||||
padding-top: 3px;
|
||||
padding-bottom: 2px;
|
||||
input[type="file"],
|
||||
input[type="file"]::-webkit-file-upload-button {
|
||||
cursor: pointer;
|
||||
|
|
@ -200,12 +198,12 @@ export const FieldUploadMulti: FC<{
|
|||
)}
|
||||
/>
|
||||
)}
|
||||
<div className="c-items-center c-flex c-text-base c-px-1 c-outline-none c-rounded c-cursor-pointer ">
|
||||
<div className="c-items-center c-flex c-text-base c-px-1 c-outline-none c-rounded c-cursor-pointer">
|
||||
<div className="c-flex c-flex-row c-items-center c-px-2">
|
||||
<Upload className="c-h-4 c-w-4" />
|
||||
</div>
|
||||
<div className="c-flex c-flex-row c-items-center c-text-sm">
|
||||
Upload File
|
||||
Upload Multiple Files
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -81,6 +81,8 @@ export const formInit = (fm: FMLocal, props: FMProps) => {
|
|||
className={cx(
|
||||
css`
|
||||
color: green;
|
||||
border: 1px solid green !important;
|
||||
background: #f1fff6 !important;
|
||||
`,
|
||||
"c-cursor-pointer"
|
||||
)}
|
||||
|
|
|
|||
Loading…
Reference in New Issue