@ttdk-design-system/library-react 0.0.0-stage → 1.0.1

package/src/webview/bottomsheet/bottomsheet.tsx

@@ -0,0 +1,603 @@
+"use client";
+import * as React from "react";
+import { useState, useRef, useEffect } from "react";
+import { createPortal } from "react-dom";
+
+export type BottomSheetHeight = "auto" | "sm" | "md" | "lg" | "full";
+export type BottomSheetMode = "auto" | "ios" | "material";
+export type BottomSheetUiProps = UiProps;
+export interface BottomSheetProps {
+  /**
+   * Status visibilitas bottom sheet (mode controlled).
+   * Mendukung `v-model:open` / `v-model` pada Vue dan controlled prop `open` pada React.
+   */
+  open?: boolean;
+
+  /**
+   * Status visibilitas awal bottom sheet saat pertama kali dimuat (uncontrolled initial state).
+   * @default false
+   */
+  defaultOpen?: boolean;
+
+  /**
+   * Judul teks di bagian header bottom sheet.
+   */
+  title?: string;
+
+  /**
+   * Deskripsi penjelasan di bagian header di bawah judul.
+   */
+  description?: string;
+
+  /**
+   * Skala ukuran tinggi bottom sheet:
+   * - `'auto'`: Menyesuaikan tinggi isi konten (maksimal 90vh).
+   * - `'sm'`: Lembar ringkas (~35% tinggi layar).
+   * - `'md'`: Lembar proporsional standar (~55% tinggi layar).
+   * - `'lg'`: Lembar luas (~85% tinggi layar).
+   * - `'full'`: Tampilan penuh (100% tinggi layar).
+   * @default 'auto'
+   */
+  height?: BottomSheetHeight;
+
+  /**
+   * Batas tinggi maksimum lembar sheet (contoh: '90vh', '600px').
+   */
+  maxHeight?: string;
+
+  /**
+   * Cita rasa / gaya platform mobile:
+   * - `'auto'`: Desain netral adaptif khas TTDK Design System.
+   * - `'ios'`: Cita rasa Apple Human Interface (frosted glass, sudut kurva halus 20px).
+   * - `'material'`: Cita rasa Material Design 3 (sudut 28px, elevated shadow).
+   * @default 'auto'
+   */
+  mode?: BottomSheetMode;
+
+  /**
+   * Menampilkan bilah pegangan geser (drag handle indicator) di bagian atas lembar.
+   * @default true
+   */
+  handle?: boolean;
+
+  /**
+   * Mengaktifkan gestur sentuh geser ke bawah (swipe-down) untuk menutup lembar.
+   * @default true
+   */
+  swipeable?: boolean;
+
+  /**
+   * Menampilkan tombol tutup 'X' di pojok kanan atas header.
+   * @default false
+   */
+  close?: boolean;
+
+  /**
+   * Ikon kustom untuk tombol tutup.
+   */
+  closeIcon?: any;
+
+  /**
+   * Mengizinkan lembar ditutup saat pengguna mengeklik backdrop overlay atau menekan tombol Escape.
+   * @default true
+   */
+  dismissible?: boolean;
+
+  /**
+   * Mencegah lembar ditutup saat klik di luar atau saat digeser (prevent close).
+   * Jika bernilai `true`, lembar hanya dapat ditutup via aksi eksplisit.
+   * @default false
+   */
+  preventClose?: boolean;
+
+  /**
+   * Menampilkan lapisan latar belakang redup (backdrop overlay).
+   * @default true
+   */
+  overlay?: boolean;
+
+  /**
+   * Mengunci scrolling pada halaman web di latar belakang saat lembar terbuka (body scroll lock).
+   * @default true
+   */
+  preventScroll?: boolean;
+
+  /**
+   * Konten kustom untuk bagian header lembar.
+   */
+  header?: any;
+
+  /**
+   * Konten kustom untuk bagian isi utama (body) lembar.
+   */
+  body?: any;
+
+  /**
+   * Konten kustom untuk bagian footer aksi di bawah lembar (misal: tombol konfirmasi / CTA).
+   */
+  footer?: any;
+
+  /**
+   * Penggantian seluruh konten lembar (mengabaikan layout header, body, footer bawaan).
+   */
+  content?: any;
+
+  /**
+   * Konten utama lembar bottom sheet (body content).
+   */
+  children?: any;
+
+  /**
+   * Callback event saat status terbuka/tertutup berubah (standar React).
+   */
+  onOpenChange?: (open: boolean) => void;
+
+  /**
+   * Callback event saat status terbuka/tertutup berubah untuk two-way binding `v-model:open` (Vue).
+   */
+  onUpdateOpen?: (open: boolean) => void;
+
+  /**
+   * Callback event saat lembar bottom sheet terbuka.
+   */
+  onOpen?: () => void;
+
+  /**
+   * Callback event saat lembar bottom sheet ditutup.
+   */
+  onClose?: () => void;
+
+  /**
+   * Callback event saat pengguna mencoba menutup lembar tetapi dicegah karena `preventClose={true}`.
+   */
+  onClosePrevent?: () => void;
+
+  /**
+   * Kustomisasi visual granular pada elemen root melalui style-like object.
+   */
+  ui?: BottomSheetUiProps;
+  className?: string;
+  overlayClass?: string;
+  overlayStyle?: any;
+  contentClass?: string;
+  contentStyle?: any;
+  headerClass?: string;
+  headerStyle?: any;
+  bodyClass?: string;
+  bodyStyle?: any;
+  footerClass?: string;
+  footerStyle?: any;
+  handleClass?: string;
+  handleStyle?: any;
+}
+
+/**
+ * BottomSheet — Komponen lembar geser bawah ramah sentuhan (touch-friendly) untuk in-app webview & mobile.
+ * Mendukung safe-area-inset perangkat mobile, gesture swipe-down to dismiss, header, footer, dan mode iOS / Material.
+ */
+
+import { buildUiVars, UiProps } from "../../core/types";
+
+let lockCount = 0;
+let originalOverflow = "";
+let originalPaddingRight = "";
+
+function lockBodyScroll() {
+  if (typeof document === "undefined") return;
+  if (lockCount === 0) {
+    originalOverflow = document.body.style.overflow;
+    originalPaddingRight = document.body.style.paddingRight;
+    const scrollBarWidth = window.innerWidth - document.documentElement.clientWidth;
+    document.body.style.overflow = "hidden";
+    if (scrollBarWidth > 0) {
+      document.body.style.paddingRight = scrollBarWidth + "px";
+    }
+  }
+  lockCount++;
+}
+
+function unlockBodyScroll() {
+  if (typeof document === "undefined") return;
+  lockCount = Math.max(0, lockCount - 1);
+  if (lockCount === 0) {
+    document.body.style.overflow = originalOverflow;
+    document.body.style.paddingRight = originalPaddingRight;
+  }
+}
+
+function BottomSheet(props: BottomSheetProps) {
+  const [mounted, setMounted] = useState(() => false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+  const sheetRef = useRef<HTMLDivElement>(null);
+  const [isOpen, setIsOpen] = useState(() =>
+    props.open !== undefined ? props.open : Boolean(props.defaultOpen)
+  );
+
+  const [isDragging, setIsDragging] = useState(() => false);
+
+  const [dragOffset, setDragOffset] = useState(() => 0);
+
+  const [touchStartY, setTouchStartY] = useState(() => 0);
+
+  const [isClosing, setIsClosing] = useState(() => false);
+
+  const [isAnimDone, setIsAnimDone] = useState(() => false);
+
+  const [isShaking, setIsShaking] = useState(() => false);
+
+  const [shakeTimer, setShakeTimer] = useState(() => null);
+
+  const [animTimer, setAnimTimer] = useState(() => null);
+
+  function isDismissible() {
+    if (props.preventClose === true) return false;
+    return props.dismissible !== false;
+  }
+
+  function triggerShake() {
+    if (shakeTimer) {
+      clearTimeout(shakeTimer);
+    }
+    setIsShaking(true);
+    setShakeTimer(
+      setTimeout(() => {
+        setIsShaking(false);
+        setShakeTimer(null);
+      }, 400)
+    );
+  }
+
+  function lockScroll() {
+    if (typeof document !== "undefined" && props.preventScroll !== false) {
+      document.body.style.overflow = "hidden";
+    }
+  }
+
+  function unlockScroll() {
+    if (typeof document !== "undefined") {
+      document.body.style.overflow = "";
+    }
+  }
+
+  function openSheet() {
+    setIsOpen(true);
+    setIsAnimDone(false);
+    lockScroll();
+    if (animTimer) clearTimeout(animTimer);
+    setAnimTimer(
+      setTimeout(() => {
+        setIsAnimDone(true);
+      }, 300)
+    );
+    if (props.onOpen) props.onOpen();
+    if (props.onUpdateOpen) props.onUpdateOpen(true);
+    if (props.onOpenChange) props.onOpenChange(true);
+  }
+
+  function closeSheet(force?: boolean) {
+    if (!isDismissible() && !force) {
+      triggerShake();
+      if (props.onClosePrevent) {
+        props.onClosePrevent();
+      }
+      return;
+    }
+    setIsOpen(false);
+    setIsAnimDone(false);
+    unlockScroll();
+    if (props.onClose) props.onClose();
+    if (props.onUpdateOpen) props.onUpdateOpen(false);
+    if (props.onOpenChange) props.onOpenChange(false);
+  }
+
+  function handleOverlayClick() {
+    closeSheet();
+  }
+
+  function handleKeyDown(event: any) {
+    if (!isOpen) return;
+    if (event.key === "Escape") {
+      closeSheet();
+    }
+  }
+
+  function handleDragStart(event: any) {
+    if (props.swipeable === false) return;
+    if (event.button !== undefined && event.button !== 0) return;
+    if (
+      event.target &&
+      event.target.closest &&
+      event.target.closest("button, a, input, select, textarea")
+    ) {
+      return;
+    }
+    setTouchStartY(
+      event.clientY ||
+        (event.touches && event.touches[0] ? event.touches[0].clientY : 0)
+    );
+    setIsDragging(true);
+    setDragOffset(0);
+    if (
+      event.currentTarget &&
+      typeof event.currentTarget.setPointerCapture === "function" &&
+      event.pointerId !== undefined
+    ) {
+      try {
+        event.currentTarget.setPointerCapture(event.pointerId);
+      } catch (_) {}
+    }
+  }
+
+  function handleDragMove(event: any) {
+    if (!isDragging) return;
+    const currentY =
+      event.clientY ||
+      (event.touches && event.touches[0] ? event.touches[0].clientY : 0);
+    const delta = currentY - touchStartY;
+    if (delta > 0) {
+      setDragOffset(delta);
+    } else {
+      setDragOffset(delta * 0.2);
+    }
+  }
+
+  function handleDragEnd(event: any) {
+    if (!isDragging) return;
+    setIsDragging(false);
+    const offset = dragOffset;
+    if (
+      event &&
+      event.currentTarget &&
+      typeof event.currentTarget.releasePointerCapture === "function" &&
+      event.pointerId !== undefined
+    ) {
+      try {
+        event.currentTarget.releasePointerCapture(event.pointerId);
+      } catch (_) {}
+    }
+    if (offset > 70) {
+      setIsClosing(true);
+      setTimeout(() => {
+        setIsClosing(false);
+        setDragOffset(0);
+        closeSheet(true);
+      }, 220);
+    } else {
+      setDragOffset(0);
+    }
+  }
+
+  function renderHeaderContent() {
+    if (props.header) {
+      return typeof props.header === "function"
+        ? props.header({
+            close: () => closeSheet(true),
+          })
+        : props.header;
+    }
+    return null;
+  }
+
+  function renderBodyContent() {
+    if (props.body) {
+      return typeof props.body === "function"
+        ? props.body({
+            close: () => closeSheet(true),
+          })
+        : props.body;
+    }
+    return null;
+  }
+
+  function renderFooterContent() {
+    if (props.footer) {
+      return typeof props.footer === "function"
+        ? props.footer({
+            close: () => closeSheet(true),
+          })
+        : props.footer;
+    }
+    return null;
+  }
+
+  function renderCustomContent() {
+    if (props.content) {
+      return typeof props.content === "function"
+        ? props.content({
+            close: () => closeSheet(true),
+          })
+        : props.content;
+    }
+    return null;
+  }
+
+  useEffect(() => {
+    if (props.open !== undefined) {
+      setIsOpen(props.open);
+    }
+  }, [props.open]);
+
+  useEffect(() => {
+    if (isOpen) {
+      setIsAnimDone(false);
+      setIsClosing(false);
+      const timer = setTimeout(() => setIsAnimDone(true), 300);
+      return () => clearTimeout(timer);
+    } else {
+      setIsAnimDone(false);
+    }
+  }, [isOpen]);
+
+  useEffect(() => {
+    if (!isDragging) return;
+    const onMove = (e: any) => handleDragMove(e);
+    const onUp = (e: any) => handleDragEnd(e);
+    window.addEventListener("pointermove", onMove);
+    window.addEventListener("pointerup", onUp);
+    window.addEventListener("touchmove", onMove);
+    window.addEventListener("touchend", onUp);
+    return () => {
+      window.removeEventListener("pointermove", onMove);
+      window.removeEventListener("pointerup", onUp);
+      window.removeEventListener("touchmove", onMove);
+      window.removeEventListener("touchend", onUp);
+    };
+  }, [isDragging, touchStartY, dragOffset]);
+
+  useEffect(() => {
+    const shouldLockScroll = Boolean(props.preventScroll !== false);
+    if (isOpen) {
+      if (shouldLockScroll) {
+        lockBodyScroll();
+      }
+      const handleEscape = (event: any) => {
+        if (event.key === "Escape") {
+          closeSheet();
+        }
+      };
+      document.addEventListener("keydown", handleEscape, true);
+      return () => {
+        if (shouldLockScroll) {
+          unlockBodyScroll();
+        }
+        document.removeEventListener("keydown", handleEscape, true);
+      };
+    }
+  }, [isOpen, props.preventClose, props.dismissible, props.preventScroll]);
+
+  if (!isOpen && !isClosing) return null;
+
+  const sheetNode = (
+    <div
+      role="dialog"
+      aria-modal="true"
+      className={["ttdk-bottomsheet-portal", isClosing ? "ttdk-bottomsheet-closing" : "", props.className || ""].filter(Boolean).join(" ").trim()}
+      data-mode={props.mode || "auto"}
+      tabIndex={-1}
+      style={{
+        ...buildUiVars(props.ui),
+        ...((props as any)["style"] || {}),
+        ...props.style,
+      }}
+    >
+      {props.overlay !== false ? (
+        <div
+          className={["ttdk-bottomsheet-overlay", props.overlayClass || ""].filter(Boolean).join(" ").trim()}
+          style={{
+            opacity: isDragging && dragOffset > 0 ? Math.max(0.15, 1 - dragOffset / 350) : undefined,
+            ...buildUiVars(props.overlayStyle),
+          }}
+          onClick={(event) => handleOverlayClick()}
+        />
+      ) : null}
+      <div
+        ref={sheetRef}
+        className={["ttdk-bottomsheet-sheet", isAnimDone ? "ttdk-bottomsheet-anim-done" : "", isClosing ? "ttdk-bottomsheet-closing" : "", isShaking ? "ttdk-bottomsheet-shake" : "", props.contentClass || ""].filter(Boolean).join(" ").trim()}
+        data-height={props.height || "auto"}
+        data-mode={props.mode || "auto"}
+        data-dragging={isDragging ? "true" : undefined}
+        style={{
+          maxHeight: props.maxHeight || undefined,
+          transform: isClosing
+            ? "translateY(100%)"
+            : isDragging && dragOffset !== 0
+            ? "translateY(" + Math.max(0, dragOffset) + "px)"
+            : undefined,
+          ...buildUiVars(props.contentStyle),
+        }}
+      >
+        {props.handle !== false ? (
+          <div
+            className={["ttdk-bottomsheet-handle-wrapper", props.handleClass || ""].filter(Boolean).join(" ").trim()}
+            style={{
+              ...buildUiVars(props.handleStyle),
+            }}
+            onPointerDown={(e: any) => handleDragStart(e)}
+            onPointerMove={(e: any) => handleDragMove(e)}
+            onPointerUp={(e: any) => handleDragEnd(e)}
+            onTouchStart={(e: any) => handleDragStart(e)}
+            onTouchMove={(e: any) => handleDragMove(e)}
+            onTouchEnd={(e: any) => handleDragEnd(e)}
+          >
+            <div className="ttdk-bottomsheet-handle" aria-hidden="true" />
+          </div>
+        ) : null}
+        {Boolean(props.content) ? <>{renderCustomContent()}</> : null}
+        {!props.content ? (
+          <>
+            {Boolean(props.header || props.title || props.close) ? (
+              <div
+                className={["ttdk-bottomsheet-header", props.headerClass || ""].filter(Boolean).join(" ").trim()}
+                style={{
+                  ...buildUiVars(props.headerStyle),
+                }}
+                onPointerDown={(e: any) => handleDragStart(e)}
+                onPointerMove={(e: any) => handleDragMove(e)}
+                onPointerUp={(e: any) => handleDragEnd(e)}
+                onTouchStart={(e: any) => handleDragStart(e)}
+                onTouchMove={(e: any) => handleDragMove(e)}
+                onTouchEnd={(e: any) => handleDragEnd(e)}
+              >
+                {Boolean(props.header) ? <>{renderHeaderContent()}</> : null}
+                {!props.header ? (
+                  <>
+                    <div className="ttdk-bottomsheet-header-info">
+                      {Boolean(props.title) ? <h3 className="ttdk-bottomsheet-title">{props.title}</h3> : null}
+                      {Boolean(props.description) ? <p className="ttdk-bottomsheet-description">{props.description}</p> : null}
+                    </div>
+                    {props.close ? (
+                      <button
+                        type="button"
+                        className="ttdk-bottomsheet-close"
+                        aria-label="Tutup lembar"
+                        onClick={(event) => closeSheet(true)}
+                      >
+                        {Boolean(props.closeIcon) ? (
+                          <>{props.closeIcon}</>
+                        ) : (
+                          <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                            <line x1="18" y1="6" x2="6" y2="18" />
+                            <line x1="6" y1="6" x2="18" y2="18" />
+                          </svg>
+                        )}
+                      </button>
+                    ) : null}
+                  </>
+                ) : null}
+              </div>
+            ) : null}
+            <div
+              className={["ttdk-bottomsheet-body", props.bodyClass || ""].filter(Boolean).join(" ").trim()}
+              style={{
+                ...buildUiVars(props.bodyStyle),
+              }}
+            >
+              {Boolean(props.body) ? <>{renderBodyContent()}</> : null}
+              {!props.body && props.children ? <>{props.children}</> : null}
+            </div>
+            {Boolean(props.footer) ? (
+              <div
+                className={["ttdk-bottomsheet-footer", props.footerClass || ""].filter(Boolean).join(" ").trim()}
+                style={{
+                  ...buildUiVars(props.footerStyle),
+                }}
+              >
+                {renderFooterContent()}
+              </div>
+            ) : null}
+          </>
+        ) : null}
+      </div>
+    </div>
+  );
+
+  if (mounted && typeof document !== "undefined") {
+    return createPortal(sheetNode, document.body);
+  }
+
+  return sheetNode;
+}
+
+export default BottomSheet;

package/src/webview/bottomsheet/index.ts

@@ -0,0 +1,4 @@
+export { default as BottomSheet } from './bottomsheet';
+export { default } from './bottomsheet';
+export type { BottomSheetProps, BottomSheetUiProps, BottomSheetHeight, BottomSheetMode } from './bottomsheet';
+export * from './bottomsheet';