@arronqzy/react-view 1.0.22 → 1.0.24

package/src/panel/icons.tsx

@@ -0,0 +1,160 @@
+import React from "react";
+
+export function IconPlus() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M12 5v14M5 12h14" />
+    </svg>
+  );
+}
+
+export function IconMerge() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M7 7h4a4 4 0 0 1 4 4v6" />
+      <path d="m12 14 3 3 3-3" />
+      <path d="M7 17h2" />
+    </svg>
+  );
+}
+
+export function IconLock({ locked }: { locked: boolean }) {
+  return locked ? (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="4" y="11" width="16" height="9" rx="2" />
+      <path d="M8 11V8a4 4 0 0 1 8 0v3" />
+    </svg>
+  ) : (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="4" y="11" width="16" height="9" rx="2" />
+      <path d="M16 11V8a4 4 0 0 0-7-2.5" />
+    </svg>
+  );
+}
+
+export function IconEdit() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M12 20h9" />
+      <path d="m16.5 3.5 4 4L8 20l-5 1 1-5Z" />
+    </svg>
+  );
+}
+
+export function IconTrash() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M3 6h18" />
+      <path d="M8 6V4h8v2" />
+      <path d="M19 6l-1 14H6L5 6" />
+    </svg>
+  );
+}
+
+export function IconCheck() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="m5 12 5 5L20 7" />
+    </svg>
+  );
+}
+
+export function IconClose() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M6 6l12 12M18 6 6 18" />
+    </svg>
+  );
+}
+
+export function IconChevron({ expanded }: { expanded: boolean }) {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      {expanded ? <path d="m6 14 6-6 6 6" /> : <path d="m6 10 6 6 6-6" />}
+    </svg>
+  );
+}
+
+export function IconUndo() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M9 14 4 9l5-5" />
+      <path d="M20 20a9 9 0 0 0-9-9H4" />
+    </svg>
+  );
+}
+
+export function IconRedo() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="m15 14 5-5-5-5" />
+      <path d="M4 20a9 9 0 0 1 9-9h7" />
+    </svg>
+  );
+}
+
+export function IconHistory() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M3 12a9 9 0 1 0 3-6.7" />
+      <path d="M3 4v4h4" />
+      <path d="M12 7v5l3 2" />
+    </svg>
+  );
+}
+
+export function IconBringFront() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M7 17h10M12 17V7" />
+      <path d="m8.5 9 3.5-3.5L15.5 9" />
+    </svg>
+  );
+}
+
+export function IconSendBack() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M7 7h10M12 17V7" />
+      <path d="m15.5 15-3.5 3.5L8.5 15" />
+    </svg>
+  );
+}
+
+export function IconForward() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M12 18V6" />
+      <path d="m8.5 9 3.5-3.5L15.5 9" />
+    </svg>
+  );
+}
+
+export function IconBackward() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="M12 6v12" />
+      <path d="m15.5 15-3.5 3.5L8.5 15" />
+    </svg>
+  );
+}
+
+export function IconLayers() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <path d="m12 4 8 4-8 4-8-4 8-4Z" />
+      <path d="m4 12 8 4 8-4" />
+      <path d="m4 16 8 4 8-4" />
+    </svg>
+  );
+}
+
+export function IconImage() {
+  return (
+    <svg viewBox="0 0 24 24" className="h-3.5 w-3.5" fill="none" stroke="currentColor" strokeWidth="2">
+      <rect x="3" y="5" width="18" height="14" rx="2" />
+      <circle cx="9" cy="10" r="1.5" />
+      <path d="m21 16-5.5-5.5L7 19" />
+    </svg>
+  );
+}

package/src/panel/utils/panelSelection.ts

@@ -0,0 +1,57 @@
+export function formatRelativeTime(
+  timestamp: number,
+  now: number,
+  t: (key: string, params?: Record<string, string | number>) => string
+): string {
+  const diff = Math.max(0, now - timestamp);
+  const sec = Math.floor(diff / 1000);
+  if (sec < 60) return t("common.secondsAgo", { sec });
+  const min = Math.floor(sec / 60);
+  if (min < 60) return t("common.minutesAgo", { min });
+  const hour = Math.floor(min / 60);
+  if (hour < 24) return t("common.hoursAgo", { hour });
+  const day = Math.floor(hour / 24);
+  return t("common.daysAgo", { day });
+}
+
+export function getSelectedTargetsFromIds(
+  container: HTMLElement | null,
+  ids: string[],
+) {
+  if (!container) return [];
+  const targets: HTMLElement[] = [];
+  for (const id of ids) {
+    const el = container.querySelector<HTMLElement>(
+      `[data-element-id="${id}"]`,
+    );
+    if (el) targets.push(el);
+  }
+  return targets;
+}
+
+export function shouldClearSelectionOnBlank(target: HTMLElement | null) {
+  if (!target) return false;
+  if (
+    target.closest(".rv-selectable") ||
+    target.closest(".moveable-control-box") ||
+    target.closest(".moveable-group") ||
+    target.closest(".moveable-line") ||
+    target.closest(".moveable-control") ||
+    target.closest(".moveable-direction")
+  ) {
+    return false;
+  }
+  if (
+    target.closest("button") ||
+    target.closest("input") ||
+    target.closest("select") ||
+    target.closest("textarea") ||
+    target.closest("label") ||
+    target.closest("a") ||
+    target.closest("[role='menuitem']") ||
+    target.closest("[data-radix-popper-content-wrapper]")
+  ) {
+    return false;
+  }
+  return true;
+}