@medway-ui/native 1.11.0 → 1.13.0

package/src/components/TextMarker.tsx

@@ -0,0 +1,696 @@
+import {
+  CloseSm,
+  MapPin,
+  Note,
+  Strikethrough,
+  Underline,
+} from "@medway-ui/icons/native";
+import { cva } from "class-variance-authority";
+import {
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  useSyncExternalStore,
+  type ComponentType,
+} from "react";
+import {
+  BackHandler,
+  Pressable,
+  StyleSheet,
+  View,
+  useWindowDimensions,
+  type LayoutChangeEvent,
+} from "react-native";
+import { SafeAreaInsetsContext } from "react-native-safe-area-context";
+import Svg, { Path } from "react-native-svg";
+
+import { Button } from "@/components/Button";
+import { Separator } from "@/components/Separator";
+import { ThemedIcon, type NativeIconProps } from "@/components/ThemedIcon";
+import { useThemeColor, type ThemeColorToken } from "@/hooks/useThemeColor";
+import { useOverlayHost, type HostOrigin } from "@/lib/overlay-host";
+import { getMinTouchHitSlop } from "@/lib/touch-target";
+import { cn } from "@/lib/utils";
+
+export type TextMarkerColor = "cm" | "go" | "cir" | "ped" | "prev";
+
+export type TextMarkerMode = "create" | "edit";
+
+/**
+ * Retângulo do trecho em coordenadas da janela, como o `measureInWindow`
+ * devolve (`x` → `left`, `y` → `top`).
+ */
+export type TextMarkerAnchor = {
+  top: number;
+  left: number;
+  width: number;
+  height: number;
+};
+
+export interface TextMarkerLabels {
+  toolbar: string;
+  color: string;
+  close: string;
+  strikethrough: string;
+  strikethroughHint: string;
+  underline: string;
+  underlineHint: string;
+  annotate: string;
+  annotateHint: string;
+  pin: string;
+  pinHint: string;
+  pinArmedHint: string;
+  unpinHint: string;
+  remove: string;
+  removeHint: string;
+  colorName: (color: TextMarkerColor) => string;
+}
+
+export interface TextMarkerProps {
+  /** Controla se a interface está visível. */
+  open?: boolean;
+  /**
+   * Retângulo do trecho na janela. A toolbar abre acima (ou abaixo, se não
+   * couber). Ao rolar, meça de novo e passe o retângulo novo, ou feche.
+   */
+  anchor?: TextMarkerAnchor | null;
+  /** `create` é seleção nova; `edit` é toque numa marcação existente. */
+  mode?: TextMarkerMode;
+  /** Trecho selecionado, passado em `onNote`. */
+  selectedText?: string;
+  /**
+   * Cor já aplicada. A amostra aparece selecionada, e tocar nela de novo
+   * chama `onRemove`.
+   */
+  color?: TextMarkerColor;
+  colors?: readonly TextMarkerColor[];
+  /**
+   * Se o trecho já está riscado. Riscar aparece selecionado, e tocar nele de
+   * novo chama `onRemove`.
+   */
+  strikethrough?: boolean;
+  /**
+   * Se o trecho já está sublinhado. Sublinhar aparece selecionado, e tocar
+   * nele de novo chama `onRemove`.
+   */
+  underline?: boolean;
+  /**
+   * Cor fixada. Com ela, o app marca as próximas seleções direto, sem abrir a
+   * toolbar. `null` ou ausente: nada fixado.
+   */
+  pinnedColor?: TextMarkerColor | null;
+  disabled?: boolean;
+  className?: string;
+  labels?: Partial<TextMarkerLabels>;
+  onHighlight?: (color: TextMarkerColor) => void;
+  /** Toque em Riscar num trecho que ainda não está riscado. */
+  onStrikethrough?: () => void;
+  /** Toque em Sublinhar num trecho que ainda não está sublinhado. */
+  onUnderline?: () => void;
+  /**
+   * Fixar ou desafixar. Recebe a cor escolhida depois de Fixar, ou `null` ao
+   * desafixar.
+   */
+  onPinnedColorChange?: (color: TextMarkerColor | null) => void;
+  /**
+   * Toque em Anotar. O app abre o Note Editor com este trecho. O TextMarker
+   * não monta o editor.
+   */
+  onNote?: (selectedText: string) => void;
+  onRemove?: () => void;
+  /** Toque fora da toolbar ou voltar do Android. */
+  onClose?: () => void;
+}
+
+const TEXT_MARKER_COLORS: readonly TextMarkerColor[] = Object.freeze([
+  "cm",
+  "go",
+  "cir",
+  "ped",
+  "prev",
+]);
+
+const COLOR_NAMES: Record<TextMarkerColor, string> = {
+  cm: "Azul",
+  go: "Rosa",
+  cir: "Verde",
+  ped: "Amarelo",
+  prev: "Roxo",
+};
+
+const DEFAULT_LABELS: TextMarkerLabels = {
+  toolbar: "Marcação da seleção",
+  color: "Cor",
+  close: "Fechar marcação",
+  strikethrough: "Riscar",
+  strikethroughHint:
+    "Riscar: passa um traço sobre o trecho para destacar o que não importa",
+  underline: "Sublinhar",
+  underlineHint:
+    "Sublinhar: passa um traço sob o trecho para destacar o que importa",
+  annotate: "Anotar",
+  annotateHint: "Anotar: abre a nota com o trecho selecionado",
+  pin: "Fixar",
+  pinHint:
+    "Fixar: escolha uma cor e as próximas seleções já saem marcadas com ela",
+  pinArmedHint: "Escolha a cor que vai ficar fixada",
+  unpinHint: "Desafixar: as próximas seleções voltam a abrir esta ferramenta",
+  remove: "Remover marcação",
+  removeHint: "Remover a marcação deste trecho",
+  colorName: (color) => COLOR_NAMES[color],
+};
+
+const SWATCH_CLASS: Record<TextMarkerColor, string> = {
+  cm: "bg-cm-background-fill",
+  go: "bg-go-background-fill",
+  cir: "bg-cir-background-fill",
+  ped: "bg-ped-background-fill",
+  prev: "bg-prev-background-fill",
+};
+
+const SWATCH_SELECTED_CLASS: Record<TextMarkerColor, string> = {
+  cm: "border-cm-background-fill",
+  go: "border-go-background-fill",
+  cir: "border-cir-background-fill",
+  ped: "border-ped-background-fill",
+  prev: "border-prev-background-fill",
+};
+
+const MARK_COLOR_CLASS: Record<TextMarkerColor, string> = {
+  cm: "bg-cm-16 dark:bg-cm-48",
+  go: "bg-go-16 dark:bg-go-48",
+  cir: "bg-cir-16 dark:bg-cir-24",
+  ped: "bg-ped-24 dark:bg-ped-48",
+  prev: "bg-prev-16 dark:bg-prev-48",
+};
+
+const textMarkerMarkVariants = cva("", {
+  variants: {
+    color: { ...MARK_COLOR_CLASS, none: "bg-transparent" },
+    strikethrough: {
+      true: "text-gray-foreground-muted line-through",
+      false: "",
+    },
+    underline: {
+      true: "underline",
+      false: "",
+    },
+  },
+  defaultVariants: {
+    color: "none",
+    strikethrough: false,
+    underline: false,
+  },
+});
+
+const EDGE_GAP = 16;
+const SIDE_OFFSET = 4;
+const ARROW_WIDTH = 16;
+const ARROW_HEIGHT = 10;
+const ARROW_INSET = 24;
+const SWATCH_SIZE = 32;
+const NO_INSETS = { top: 0, right: 0, bottom: 0, left: 0 };
+
+type Insets = typeof NO_INSETS;
+
+type Size = { width: number; height: number };
+
+type Placement = {
+  top: number;
+  left: number;
+  arrowLeft: number;
+  side: "top" | "bottom" | "over";
+};
+
+function availableWidth(windowWidth: number, insets: Insets) {
+  return windowWidth - insets.left - insets.right - 2 * EDGE_GAP;
+}
+
+function computePlacement({
+  anchor,
+  hostOrigin,
+  window,
+  insets,
+  size,
+}: {
+  anchor: TextMarkerAnchor;
+  hostOrigin: HostOrigin;
+  window: Size;
+  insets: Insets;
+  size: Size;
+}): Placement {
+  const gap = SIDE_OFFSET + ARROW_HEIGHT;
+  const anchorTop = anchor.top - hostOrigin.y;
+  const anchorBottom = anchorTop + anchor.height;
+  const anchorCenter = anchor.left + anchor.width / 2 - hostOrigin.x;
+
+  const minTop = Math.max(insets.top - hostOrigin.y, 0) + EDGE_GAP;
+  const maxBottom =
+    Math.min(hostOrigin.height, window.height - insets.bottom - hostOrigin.y) -
+    EDGE_GAP;
+  const above = anchorTop - gap - size.height;
+  const below = anchorBottom + gap;
+
+  const side =
+    above >= minTop
+      ? "top"
+      : below + size.height <= maxBottom
+        ? "bottom"
+        : "over";
+  const top =
+    side === "top"
+      ? above
+      : side === "bottom"
+        ? below
+        : Math.max(minTop, Math.min(below, maxBottom - size.height));
+
+  const minLeft = Math.max(insets.left - hostOrigin.x, 0) + EDGE_GAP;
+  const maxLeft =
+    window.width - hostOrigin.x - insets.right - EDGE_GAP - size.width;
+  const left = Math.max(
+    minLeft,
+    Math.min(anchorCenter - size.width / 2, maxLeft)
+  );
+  const arrowLeft = Math.max(
+    ARROW_INSET - ARROW_WIDTH / 2,
+    Math.min(
+      anchorCenter - left - ARROW_WIDTH / 2,
+      size.width - ARROW_INSET - ARROW_WIDTH / 2
+    )
+  );
+
+  return { side, top, left, arrowLeft };
+}
+
+type PropsStore = {
+  get: () => TextMarkerProps;
+  set: (props: TextMarkerProps) => void;
+  subscribe: (listener: () => void) => () => void;
+};
+
+function createPropsStore(initial: TextMarkerProps): PropsStore {
+  let current = initial;
+  const listeners = new Set<() => void>();
+  return {
+    get: () => current,
+    set: (props) => {
+      if (props === current) return;
+      current = props;
+      listeners.forEach((listener) => listener());
+    },
+    subscribe: (listener) => {
+      listeners.add(listener);
+      return () => {
+        listeners.delete(listener);
+      };
+    },
+  };
+}
+
+function Arrow({ side, left }: { side: "top" | "bottom"; left: number }) {
+  const fill = useThemeColor("surface-elevated");
+  const stroke = useThemeColor("gray-stroke-muted");
+  const pointsDown = side === "top";
+
+  return (
+    <View
+      pointerEvents="none"
+      style={[
+        styles.arrow,
+        { left },
+        pointsDown
+          ? { bottom: -ARROW_HEIGHT + 1 }
+          : { top: -ARROW_HEIGHT + 1, transform: [{ rotate: "180deg" }] },
+      ]}
+    >
+      <Svg width={ARROW_WIDTH} height={ARROW_HEIGHT}>
+        <Path
+          d={`M0 0 L${ARROW_WIDTH / 2} ${ARROW_HEIGHT} L${ARROW_WIDTH} 0 Z`}
+          fill={fill}
+        />
+        <Path
+          d={`M0 0 L${ARROW_WIDTH / 2} ${ARROW_HEIGHT} L${ARROW_WIDTH} 0`}
+          fill="none"
+          stroke={stroke}
+          strokeWidth={1}
+        />
+      </Svg>
+    </View>
+  );
+}
+
+function ColorSwatch({
+  color,
+  selected,
+  name,
+  hint,
+  disabled,
+  onSelect,
+}: {
+  color: TextMarkerColor;
+  selected: boolean;
+  name: string;
+  hint?: string;
+  disabled: boolean;
+  onSelect: (color: TextMarkerColor) => void;
+}) {
+  return (
+    <Pressable
+      accessibilityRole="button"
+      accessibilityLabel={name}
+      accessibilityHint={hint}
+      accessibilityState={{ selected, disabled }}
+      disabled={disabled}
+      hitSlop={getMinTouchHitSlop(SWATCH_SIZE)}
+      onPress={() => onSelect(color)}
+      className={cn(
+        "size-8 shrink-0 items-center justify-center rounded-circular border border-transparent p-1",
+        selected && SWATCH_SELECTED_CLASS[color],
+        disabled && "opacity-50"
+      )}
+    >
+      <View
+        pointerEvents="none"
+        className={cn("size-6 shrink-0 rounded-circular", SWATCH_CLASS[color])}
+      />
+    </Pressable>
+  );
+}
+
+function ActionButton({
+  icon,
+  label,
+  hint,
+  selected,
+  selectedClassName,
+  selectedIconToken,
+  iconToken = "primary-foreground",
+  variant = "regular-basic",
+  disabled,
+  onPress,
+}: {
+  icon: ComponentType<NativeIconProps>;
+  label: string;
+  hint: string;
+  selected?: boolean;
+  selectedClassName?: string;
+  selectedIconToken?: ThemeColorToken;
+  iconToken?: ThemeColorToken;
+  variant?: "regular-basic" | "error-soft";
+  disabled: boolean;
+  onPress: () => void;
+}) {
+  const token = disabled
+    ? "gray-foreground-muted"
+    : selected && selectedIconToken
+      ? selectedIconToken
+      : iconToken;
+
+  return (
+    <Button
+      variant={variant}
+      size="sm"
+      accessibilityLabel={label}
+      accessibilityHint={hint}
+      accessibilityState={
+        selected === undefined ? { disabled } : { selected, disabled }
+      }
+      disabled={disabled}
+      hitSlop={getMinTouchHitSlop(SWATCH_SIZE)}
+      className={cn(selected && selectedClassName)}
+      iconLeft={<ThemedIcon icon={icon} size={16} colorToken={token} />}
+      onPress={onPress}
+    />
+  );
+}
+
+function ChromeSeparator() {
+  return <Separator orientation="vertical" className="h-7 self-center" />;
+}
+
+function TextMarkerLayer({ store }: { store: PropsStore }) {
+  const {
+    anchor = null,
+    mode = "create",
+    selectedText,
+    color,
+    colors = TEXT_MARKER_COLORS,
+    strikethrough = false,
+    underline = false,
+    pinnedColor = null,
+    disabled = false,
+    className,
+    labels: labelsProp,
+    onHighlight,
+    onStrikethrough,
+    onUnderline,
+    onPinnedColorChange,
+    onNote,
+    onRemove,
+    onClose,
+  } = useSyncExternalStore(store.subscribe, store.get, store.get);
+  const overlay = useOverlayHost();
+  const window = useWindowDimensions();
+  const insets = useContext(SafeAreaInsetsContext) ?? NO_INSETS;
+  const layerA = useThemeColor("drop-shadow-layer-a");
+  const layerB = useThemeColor("drop-shadow-layer-b");
+  const labels = { ...DEFAULT_LABELS, ...labelsProp };
+
+  const [hostOrigin, setHostOrigin] = useState<HostOrigin | null>(null);
+  const [size, setSize] = useState<Size | null>(null);
+  const [rowCheck, setRowCheck] = useState<{
+    width: number;
+    compact: boolean;
+  } | null>(null);
+  const rowY = useRef<{ width?: number; colors?: number; actions?: number }>(
+    {}
+  );
+  const [pinArmed, setPinArmed] = useState(false);
+
+  const maxWidth = availableWidth(window.width, insets);
+  const compact = rowCheck?.width === maxWidth ? rowCheck.compact : null;
+  const pinSelected = Boolean(pinnedColor) || pinArmed;
+  const pinHint = pinnedColor
+    ? labels.unpinHint
+    : pinArmed
+      ? labels.pinArmedHint
+      : labels.pinHint;
+  const placement =
+    anchor && hostOrigin && size && compact !== null
+      ? computePlacement({ anchor, hostOrigin, window, insets, size })
+      : null;
+
+  const selectColor = (next: TextMarkerColor) => {
+    if (next === color && !pinArmed) {
+      onRemove?.();
+      return;
+    }
+    if (pinArmed) {
+      setPinArmed(false);
+      onPinnedColorChange?.(next);
+    }
+    onHighlight?.(next);
+  };
+
+  const togglePin = () => {
+    if (pinnedColor) {
+      onPinnedColorChange?.(null);
+      return;
+    }
+    setPinArmed(!pinArmed);
+  };
+
+  const measureRow =
+    (key: "colors" | "actions") => (event: LayoutChangeEvent) => {
+      if (compact !== null) return;
+      if (rowY.current.width !== maxWidth) rowY.current = { width: maxWidth };
+      const { y, height } = event.nativeEvent.layout;
+      rowY.current[key] = key === "colors" ? y + height : y;
+      const { colors: colorsBottom, actions: actionsTop } = rowY.current;
+      if (colorsBottom === undefined || actionsTop === undefined) return;
+      setRowCheck({ width: maxWidth, compact: actionsTop >= colorsBottom });
+    };
+
+  const colorGroup = (
+    <View
+      className="flex-row items-center gap-2"
+      onLayout={measureRow("colors")}
+    >
+      {colors.map((item) => (
+        <ColorSwatch
+          key={item}
+          color={item}
+          name={`${labels.color} ${labels.colorName(item)}`}
+          hint={pinArmed ? labels.pinArmedHint : undefined}
+          selected={color === item}
+          disabled={disabled}
+          onSelect={selectColor}
+        />
+      ))}
+    </View>
+  );
+
+  const actionGroup = (
+    <View
+      className="flex-row items-center gap-2"
+      onLayout={measureRow("actions")}
+    >
+      <ActionButton
+        icon={Strikethrough}
+        label={labels.strikethrough}
+        hint={labels.strikethroughHint}
+        selected={strikethrough}
+        selectedClassName="bg-primary-background-soft-emphasis"
+        selectedIconToken="primary-foreground-emphasis"
+        disabled={disabled}
+        onPress={() => (strikethrough ? onRemove?.() : onStrikethrough?.())}
+      />
+      <ActionButton
+        icon={Underline}
+        label={labels.underline}
+        hint={labels.underlineHint}
+        selected={underline}
+        selectedClassName="bg-primary-background-soft-emphasis"
+        selectedIconToken="primary-foreground-emphasis"
+        disabled={disabled}
+        onPress={() => (underline ? onRemove?.() : onUnderline?.())}
+      />
+      <ActionButton
+        icon={Note}
+        label={labels.annotate}
+        hint={labels.annotateHint}
+        disabled={disabled}
+        onPress={() => onNote?.(selectedText ?? "")}
+      />
+      <ChromeSeparator />
+      <ActionButton
+        icon={MapPin}
+        label={labels.pin}
+        hint={pinHint}
+        selected={pinSelected}
+        selectedClassName="bg-primary-background-fill active:bg-primary-background-fill-emphasis"
+        selectedIconToken="primary-foreground-onfill"
+        disabled={disabled}
+        onPress={togglePin}
+      />
+      {mode === "edit" ? (
+        <ActionButton
+          icon={CloseSm}
+          label={labels.remove}
+          hint={labels.removeHint}
+          variant="error-soft"
+          iconToken="feedback-error-foreground"
+          disabled={disabled}
+          onPress={() => onRemove?.()}
+        />
+      ) : null}
+    </View>
+  );
+
+  useEffect(() => {
+    let cancelled = false;
+    overlay.measureHostOrigin((origin) => {
+      if (!cancelled) setHostOrigin(origin);
+    });
+    return () => {
+      cancelled = true;
+    };
+  }, [overlay, window.width, window.height]);
+
+  useEffect(() => {
+    const subscription = BackHandler.addEventListener(
+      "hardwareBackPress",
+      () => {
+        const close = store.get().onClose;
+        close?.();
+        return Boolean(close);
+      }
+    );
+    return () => subscription.remove();
+  }, [store]);
+
+  if (!anchor || !hostOrigin) return null;
+
+  return (
+    <View style={StyleSheet.absoluteFill} pointerEvents="box-none">
+      <Pressable
+        accessibilityLabel={labels.close}
+        style={StyleSheet.absoluteFill}
+        onPress={() => onClose?.()}
+      />
+      <View
+        key={maxWidth}
+        accessibilityRole="toolbar"
+        accessibilityLabel={labels.toolbar}
+        pointerEvents={placement ? "auto" : "none"}
+        className={cn(
+          "border border-gray-stroke-muted bg-surface-elevated",
+          compact
+            ? "items-center gap-2 rounded-lg p-2"
+            : "flex-row flex-wrap items-center gap-2 rounded-pill py-2 pl-3 pr-2",
+          className
+        )}
+        style={[
+          styles.toolbar,
+          {
+            maxWidth,
+            top: placement?.top ?? 0,
+            left: placement?.left ?? 0,
+            opacity: placement ? 1 : 0,
+            boxShadow: `0 0 2px 0 ${layerA}, 0 2px 4px 0 ${layerB}`,
+          },
+        ]}
+        onLayout={(event) => {
+          const { width, height } = event.nativeEvent.layout;
+          setSize((current) =>
+            current?.width === width && current.height === height
+              ? current
+              : { width, height }
+          );
+        }}
+      >
+        {colorGroup}
+        {compact ? null : <ChromeSeparator />}
+        {actionGroup}
+        {placement && placement.side !== "over" ? (
+          <Arrow side={placement.side} left={placement.arrowLeft} />
+        ) : null}
+      </View>
+    </View>
+  );
+}
+
+function TextMarker(props: TextMarkerProps) {
+  const id = useId();
+  const overlay = useOverlayHost();
+  const [store] = useState(() => createPropsStore(props));
+  const visible = Boolean(props.open && props.anchor);
+
+  useEffect(() => {
+    store.set(props);
+  });
+
+  useEffect(() => {
+    if (!visible) return;
+    overlay.mount(id, <TextMarkerLayer store={store} />);
+    return () => overlay.unmount(id);
+  }, [id, overlay, store, visible]);
+
+  return null;
+}
+
+const styles = StyleSheet.create({
+  toolbar: {
+    position: "absolute",
+    zIndex: 2,
+  },
+  arrow: {
+    position: "absolute",
+    width: ARROW_WIDTH,
+    height: ARROW_HEIGHT,
+  },
+});
+
+export { TEXT_MARKER_COLORS, TextMarker, textMarkerMarkVariants };