fix
This commit is contained in:
rizky
parent
e61b8980b2
commit
fa6ceae3af
|
|
@ -3,10 +3,10 @@ import { ReactElement } from "react";
|
|||
|
||||
export const ThumbPreview = ({
|
||||
url,
|
||||
del,
|
||||
options,
|
||||
}: {
|
||||
url: string;
|
||||
del: ReactElement;
|
||||
options: ReactElement;
|
||||
}) => {
|
||||
const file = getFileName(url);
|
||||
if (typeof file === "string") return;
|
||||
|
|
@ -25,16 +25,23 @@ export const ThumbPreview = ({
|
|||
font-size: 14px;
|
||||
font-weight: black;
|
||||
padding: 3px 7px;
|
||||
height: 26px;
|
||||
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
||||
&:hover {
|
||||
border: 1px solid #1c4ed8;
|
||||
outline: 1px solid #1c4ed8;
|
||||
}
|
||||
`,
|
||||
"c-flex c-items-center"
|
||||
"c-flex c-justify-center c-items-center"
|
||||
)}
|
||||
onClick={() => {
|
||||
let _url = siteurl(url || "");
|
||||
window.open(_url, "_blank");
|
||||
}}
|
||||
>
|
||||
{file.extension}
|
||||
|
||||
<div className="c-ml-1">
|
||||
<ExternalLink size="12px" />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
|
|
@ -44,8 +51,17 @@ export const ThumbPreview = ({
|
|||
is_image = true;
|
||||
content = (
|
||||
<img
|
||||
onClick={() => {
|
||||
let _url = siteurl(url || "");
|
||||
window.open(_url, "_blank");
|
||||
}}
|
||||
className={cx(
|
||||
"c-rounded-md",
|
||||
css`
|
||||
&:hover {
|
||||
outline: 2px solid #1c4ed8;
|
||||
}
|
||||
`,
|
||||
css`
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
|
|
@ -75,21 +91,11 @@ export const ThumbPreview = ({
|
|||
<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"
|
||||
"c-space-x-1 c-py-1 thumb-preview"
|
||||
)}
|
||||
onClick={() => {
|
||||
let _url = siteurl(url || "");
|
||||
window.open(_url, "_blank");
|
||||
}}
|
||||
>
|
||||
{content}
|
||||
{del}
|
||||
{options}
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
|
|
|
|||
|
|
@ -1,11 +1,12 @@
|
|||
import { useLocal } from "@/utils/use-local";
|
||||
import { Spinner } from "lib/comps/ui/field-loading";
|
||||
import { Tooltip } from "lib/comps/ui/tooltip";
|
||||
import get from "lodash.get";
|
||||
import { Trash2, Upload } from "lucide-react";
|
||||
import { Check, Trash2, Upload } from "lucide-react";
|
||||
import { ChangeEvent, FC } from "react";
|
||||
import { FMLocal, FieldLocal, FieldProp } from "../../typings";
|
||||
import { ThumbPreview } from "./FilePreview";
|
||||
import { PropTypeInput } from "./TypeInput";
|
||||
import { FilePreview, ThumbPreview } from "./FilePreview";
|
||||
import { Spinner } from "lib/comps/ui/field-loading";
|
||||
const w = window as unknown as {
|
||||
serverurl: string;
|
||||
};
|
||||
|
|
@ -30,6 +31,11 @@ export const FieldUploadMulti: FC<{
|
|||
style: "inline" as "inline" | "full",
|
||||
});
|
||||
|
||||
const cover = {
|
||||
field: field.prop.upload?.cover_field || "",
|
||||
text: field.prop.upload?.cover_text,
|
||||
};
|
||||
|
||||
const parse_list = () => {
|
||||
let list: string[] = [];
|
||||
if (value.startsWith("[")) {
|
||||
|
|
@ -114,46 +120,118 @@ export const FieldUploadMulti: FC<{
|
|||
`
|
||||
)}
|
||||
>
|
||||
{list.map((value, idx) => {
|
||||
return (
|
||||
<div
|
||||
className="c-py-1 c-pr-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<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();
|
||||
{!isEditor &&
|
||||
list.map((value, idx) => {
|
||||
return (
|
||||
<div
|
||||
className="c-py-1 c-pr-2"
|
||||
onClick={(e) => {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
}}
|
||||
>
|
||||
<div
|
||||
className={cx(
|
||||
"c-relative",
|
||||
fm.data[cover.field] === value &&
|
||||
css`
|
||||
.thumb-preview {
|
||||
border: 1px solid #1c4ed8;
|
||||
outline: 1px solid #1c4ed8;
|
||||
}
|
||||
}}
|
||||
|
||||
&:hover {
|
||||
.cover-field {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
`
|
||||
)}
|
||||
>
|
||||
{fm.data[cover.field] === value && (
|
||||
<div
|
||||
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",
|
||||
"absolute cover-field c-transition-all",
|
||||
css`
|
||||
border: 1px solid red;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
bottom: 0px;
|
||||
font-size: 9px;
|
||||
z-index: 99;
|
||||
padding: 0px 7px;
|
||||
border-radius: 5px;
|
||||
border-top-left-radius: 0px;
|
||||
border-bottom-right-radius: 0px;
|
||||
background: #1c4ed8;
|
||||
color: white;
|
||||
`
|
||||
)}
|
||||
>
|
||||
<Trash2 className="c-text-red-500 c-h-4 c-w-4 " />
|
||||
{cover.text}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
)}
|
||||
<ThumbPreview
|
||||
url={value || ""}
|
||||
options={
|
||||
<div className={cx("c-flex c-flex-col c-space-y-1")}>
|
||||
<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>
|
||||
|
||||
{cover.field && (
|
||||
<Tooltip content={`Mark as ${cover.text}`} placement="right">
|
||||
<div
|
||||
onClick={(e) => {
|
||||
e.preventDefault();
|
||||
e.stopPropagation();
|
||||
|
||||
if (fm.data[cover.field] === value) {
|
||||
fm.data[cover.field] = "";
|
||||
} else {
|
||||
fm.data[cover.field] = value;
|
||||
}
|
||||
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-blue-100 transition-all",
|
||||
css`
|
||||
border: 1px solid black;
|
||||
width: 25px;
|
||||
height: 25px;
|
||||
`
|
||||
)}
|
||||
>
|
||||
{value === fm.data[cover.field] && (
|
||||
<>
|
||||
<Check />
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</Tooltip>
|
||||
)}
|
||||
</div>
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
})}
|
||||
);
|
||||
})}
|
||||
{input.uploading.size > 0 && (
|
||||
<div
|
||||
className={cx(
|
||||
|
|
|
|||
|
|
@ -48,7 +48,12 @@ export type FieldProp = {
|
|||
label: string;
|
||||
desc?: string;
|
||||
props?: any;
|
||||
upload?: { mode: "single-file" | "multi-file"; accept: string };
|
||||
upload?: {
|
||||
mode: "single-file" | "multi-file";
|
||||
accept: string;
|
||||
cover_text: string;
|
||||
cover_field: string;
|
||||
};
|
||||
link: {
|
||||
text:
|
||||
| string
|
||||
|
|
|
|||
|
|
@ -0,0 +1,251 @@
|
|||
import type { Placement } from "@floating-ui/react";
|
||||
import {
|
||||
FloatingPortal,
|
||||
arrow,
|
||||
autoUpdate,
|
||||
flip,
|
||||
offset,
|
||||
shift,
|
||||
useDismiss,
|
||||
useFloating,
|
||||
useFocus,
|
||||
useHover,
|
||||
useInteractions,
|
||||
useMergeRefs,
|
||||
useRole,
|
||||
} from "@floating-ui/react";
|
||||
import * as React from "react";
|
||||
|
||||
interface TooltipOptions {
|
||||
initialOpen?: boolean;
|
||||
placement?: Placement;
|
||||
open?: boolean;
|
||||
offset?: number;
|
||||
onOpenChange?: (open: boolean) => void;
|
||||
delay?: number;
|
||||
asChild?: boolean;
|
||||
}
|
||||
|
||||
export function useTooltip({
|
||||
initialOpen = false,
|
||||
placement = "top",
|
||||
open: controlledOpen,
|
||||
onOpenChange: setControlledOpen,
|
||||
delay = 1000,
|
||||
offset: tooltipOffset,
|
||||
}: TooltipOptions = {}) {
|
||||
const [uncontrolledOpen, setUncontrolledOpen] = React.useState(initialOpen);
|
||||
|
||||
const arrowRef = React.useRef(null);
|
||||
const open = controlledOpen ?? uncontrolledOpen;
|
||||
const setOpen = setControlledOpen ?? setUncontrolledOpen;
|
||||
|
||||
const data = useFloating({
|
||||
placement,
|
||||
open,
|
||||
onOpenChange: setOpen,
|
||||
whileElementsMounted: autoUpdate,
|
||||
middleware: [
|
||||
offset(typeof tooltipOffset === "undefined" ? 5 : tooltipOffset),
|
||||
flip({
|
||||
fallbackAxisSideDirection: "start",
|
||||
padding: 5,
|
||||
}),
|
||||
shift({ padding: 5 }),
|
||||
arrow({ element: arrowRef }),
|
||||
],
|
||||
});
|
||||
|
||||
const context = data.context;
|
||||
|
||||
const hover = useHover(context, {
|
||||
move: false,
|
||||
delay,
|
||||
enabled: controlledOpen == null,
|
||||
});
|
||||
const focus = useFocus(context, {
|
||||
enabled: controlledOpen == null,
|
||||
});
|
||||
const dismiss = useDismiss(context);
|
||||
const role = useRole(context, { role: "tooltip" });
|
||||
|
||||
const interactions = useInteractions([hover, focus, dismiss, role]);
|
||||
|
||||
return React.useMemo(
|
||||
() => ({
|
||||
open,
|
||||
setOpen,
|
||||
arrowRef,
|
||||
...interactions,
|
||||
...data,
|
||||
}),
|
||||
[open, setOpen, arrowRef, interactions, data]
|
||||
);
|
||||
}
|
||||
|
||||
type ContextType = ReturnType<typeof useTooltip> | null;
|
||||
|
||||
const TooltipContext = React.createContext<ContextType>(null);
|
||||
|
||||
export const useTooltipContext = () => {
|
||||
const context = React.useContext(TooltipContext);
|
||||
|
||||
if (context == null) {
|
||||
throw new Error("Tooltip components must be wrapped in <Tooltip />");
|
||||
}
|
||||
|
||||
return context;
|
||||
};
|
||||
|
||||
export function Tooltip({
|
||||
children,
|
||||
content,
|
||||
className,
|
||||
onClick,
|
||||
onPointerEnter,
|
||||
onPointerLeave,
|
||||
asChild,
|
||||
...options
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
content: React.ReactNode;
|
||||
className?: string;
|
||||
onClick?: (e: React.MouseEvent) => void;
|
||||
onPointerEnter?: (e: React.MouseEvent) => void;
|
||||
onPointerLeave?: (e: React.MouseEvent) => void;
|
||||
} & TooltipOptions) {
|
||||
// This can accept any props as options, e.g. `placement`,
|
||||
// or other positioning options.
|
||||
const tooltip = useTooltip(options);
|
||||
|
||||
if (!content)
|
||||
return (
|
||||
<div className={className} onClick={onClick}>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
|
||||
return (
|
||||
<TooltipContext.Provider value={tooltip}>
|
||||
<TooltipTrigger
|
||||
onClickCapture={onClick}
|
||||
{...{ onPointerEnter, onPointerLeave }}
|
||||
className={className}
|
||||
asChild={asChild}
|
||||
>
|
||||
{children}
|
||||
</TooltipTrigger>
|
||||
<TooltipContent
|
||||
className={cx(
|
||||
css`
|
||||
pointer-events: none;
|
||||
position: relative;
|
||||
background: white;
|
||||
padding: 3px 8px;
|
||||
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.15);
|
||||
font-size: 12px;
|
||||
`
|
||||
)}
|
||||
>
|
||||
{content}
|
||||
<TooltipArrow />
|
||||
</TooltipContent>
|
||||
</TooltipContext.Provider>
|
||||
);
|
||||
}
|
||||
|
||||
function TooltipArrow() {
|
||||
const context = useTooltipContext();
|
||||
const { x: arrowX, y: arrowY } = context.middlewareData.arrow || {
|
||||
x: 0,
|
||||
y: 0,
|
||||
};
|
||||
const staticSide = mapPlacementSideToCSSProperty(context.placement) as string;
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={context.arrowRef}
|
||||
style={{
|
||||
left: arrowX != null ? `${arrowX}px` : "",
|
||||
top: arrowY != null ? `${arrowY}px` : "",
|
||||
[staticSide]: "-4px",
|
||||
transform: "rotate(45deg)",
|
||||
}}
|
||||
className={cx(
|
||||
css`
|
||||
pointer-events: none;
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
background: white;
|
||||
`
|
||||
)}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
function mapPlacementSideToCSSProperty(placement: Placement) {
|
||||
const staticPosition = placement.split("-")[0];
|
||||
|
||||
const staticSide = {
|
||||
top: "bottom",
|
||||
right: "left",
|
||||
bottom: "top",
|
||||
left: "right",
|
||||
}[staticPosition];
|
||||
|
||||
return staticSide;
|
||||
}
|
||||
|
||||
export const TooltipTrigger = React.forwardRef<
|
||||
HTMLElement,
|
||||
React.HTMLProps<HTMLElement> & { asChild?: boolean }
|
||||
>(function TooltipTrigger({ children, asChild = false, ...props }, propRef) {
|
||||
const context = useTooltipContext();
|
||||
const childrenRef = (children as any).ref;
|
||||
const ref = useMergeRefs([context.refs.setReference, propRef, childrenRef]);
|
||||
|
||||
// `asChild` allows the user to pass any element as the anchor
|
||||
if (asChild && React.isValidElement(children)) {
|
||||
return React.cloneElement(
|
||||
children,
|
||||
context.getReferenceProps({
|
||||
ref,
|
||||
...props,
|
||||
...children.props,
|
||||
"data-state": context.open ? "open" : "closed",
|
||||
})
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<div
|
||||
ref={ref}
|
||||
// The user can style the trigger based on the state
|
||||
data-state={context.open ? "open" : "closed"}
|
||||
{...context.getReferenceProps(props as any)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
);
|
||||
});
|
||||
|
||||
export const TooltipContent = React.forwardRef<
|
||||
HTMLDivElement,
|
||||
React.HTMLProps<HTMLDivElement>
|
||||
>(function TooltipContent(props, propRef) {
|
||||
const context = useTooltipContext();
|
||||
const ref = useMergeRefs([context.refs.setFloating, propRef]);
|
||||
|
||||
if (!context.open) return null;
|
||||
|
||||
return (
|
||||
<FloatingPortal>
|
||||
<div
|
||||
ref={ref}
|
||||
style={context.floatingStyles}
|
||||
{...context.getFloatingProps(props as any)}
|
||||
/>
|
||||
</FloatingPortal>
|
||||
);
|
||||
});
|
||||
|
|
@ -67,6 +67,7 @@ const get_layer = async (
|
|||
table: string
|
||||
) => {
|
||||
const { cols, rels } = await loadSingle(id_site, table);
|
||||
|
||||
const options = [];
|
||||
if (cols) {
|
||||
for (const [k, v] of Object.entries(cols)) {
|
||||
|
|
@ -125,6 +126,7 @@ const loadSingle = async (id_site: string, table: string) => {
|
|||
const idb_key = `${id_site}-${table}`;
|
||||
let cached_raw = localStorage.getItem(ls_key);
|
||||
let cached_keys: string[] = [];
|
||||
|
||||
if (cached_raw) {
|
||||
try {
|
||||
let res = JSON.parse(cached_raw);
|
||||
|
|
|
|||
Loading…
Reference in New Issue