@lingxia/page-runtime 0.5.0

package/src/react/LxPicker.tsx

@@ -0,0 +1,205 @@
+import React, { forwardRef, useCallback, useId, useRef, useState } from 'react';
+import { registerPickerComponent } from '@lingxia/elements';
+import {
+  buildPickerNativeAttrs,
+  getPickerDisplayText,
+  getPickerValueFromIndex,
+} from '@lingxia/elements';
+import {
+  assignForwardedRef,
+  bindElementEvents,
+  getCustomEventDetail,
+  unbindElementEvents,
+} from './text_component_shared.js';
+
+export interface LxPickerProps extends Omit<React.HTMLAttributes<HTMLElement>, 'onChange' | 'onScroll'> {
+  // For selector/multiSelector/cascading mode
+  columns?: string[][] | [string[], Record<string, string[]>];
+
+  // For date/time mode
+  mode?: 'date' | 'time';
+  start?: string;   // Valid date range start: 'YYYY-MM-DD'
+  end?: string;     // Valid date range end: 'YYYY-MM-DD'
+  fields?: 'year' | 'month' | 'day' | 'range';
+
+  // Value (type depends on mode)
+  value?: string | string[];
+
+  // Callbacks
+  onConfirm?: (value: string | string[]) => void;
+  onCancel?: () => void;
+  onScroll?: (value: string | string[]) => void;
+  onChange?: (event: CustomEvent) => void;
+  onNativeScroll?: (event: CustomEvent) => void;
+
+  // Logic bindings (CLI-generated)
+  pageBindings?: Record<string, string>;
+
+  // UI
+  placeholder?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  disabled?: boolean;
+
+  // Button customization
+  cancelText?: string;
+  cancelTextColor?: string;
+  cancelButtonColor?: string;
+  confirmText?: string;
+  confirmTextColor?: string;
+  confirmButtonColor?: string;
+
+  children?: React.ReactNode;
+}
+
+if (typeof window !== "undefined") {
+  registerPickerComponent();
+}
+
+export const LxPicker = forwardRef<HTMLElement, LxPickerProps>(({
+  id,
+  columns, mode, start, end, fields, value, onConfirm, onCancel, onScroll, placeholder = 'Please select',
+  onChange, onNativeScroll, pageBindings,
+  className, style, disabled, cancelText, cancelTextColor, cancelButtonColor,
+  confirmText, confirmTextColor, confirmButtonColor, children,
+  ...rest
+}, ref) => {
+  const [visible, setVisible] = useState(false);
+  const reactId = useId();
+  const pickerId = id ?? `lx-picker-${reactId.replace(/[:]/g, "")}`;
+  const elementRef = useRef<HTMLElement | null>(null);
+  const boundElementRef = useRef<HTMLElement | null>(null);
+  const handlerRef = useRef({
+    columns,
+    mode,
+    onConfirm,
+    onCancel,
+    onScroll,
+    onChange,
+    onNativeScroll,
+  });
+  handlerRef.current = {
+    columns,
+    mode,
+    onConfirm,
+    onCancel,
+    onScroll,
+    onChange,
+    onNativeScroll,
+  };
+  const listenerMapRef = useRef<Record<string, EventListenerObject>>({
+    change: {
+      handleEvent: (event: Event) => {
+        const detail = getCustomEventDetail<{
+          confirmed?: boolean;
+          cancelled?: boolean;
+          value?: string | string[];
+          index?: number | number[];
+        }>(event);
+        handlerRef.current.onChange?.(event as CustomEvent);
+        if (detail.confirmed) {
+          const nextValue =
+            handlerRef.current.mode === 'date' || handlerRef.current.mode === 'time'
+              ? (detail.value ?? '')
+              : detail.index !== undefined
+                ? getPickerValueFromIndex(handlerRef.current.columns, detail.index)
+                : '';
+          handlerRef.current.onConfirm?.(nextValue);
+          setVisible(false);
+          return;
+        }
+        if (detail.cancelled) {
+          handlerRef.current.onCancel?.();
+          setVisible(false);
+        }
+      },
+    },
+    scroll: {
+      handleEvent: (event: Event) => {
+        const detail = getCustomEventDetail<{
+          value?: string | string[];
+          index?: number | number[];
+        }>(event);
+        handlerRef.current.onNativeScroll?.(event as CustomEvent);
+        if (detail.value !== undefined) {
+          handlerRef.current.onScroll?.(detail.value);
+          return;
+        }
+        if (detail.index !== undefined) {
+          handlerRef.current.onScroll?.(getPickerValueFromIndex(handlerRef.current.columns, detail.index));
+        }
+      },
+    },
+  });
+  const elementRefCallback = useCallback((element: HTMLElement | null) => {
+    boundElementRef.current = bindElementEvents(boundElementRef.current, element, listenerMapRef.current);
+    elementRef.current = element;
+    assignForwardedRef(ref, element);
+
+    // Set pageBindings on custom element
+    if (element && pageBindings) {
+      (element as any).pageBindings = pageBindings;
+    }
+  }, [ref, pageBindings]);
+  React.useEffect(() => () => {
+    unbindElementEvents(boundElementRef.current, listenerMapRef.current);
+    boundElementRef.current = null;
+    elementRef.current = null;
+  }, []);
+
+  const handleClick = () => !disabled && setVisible(true);
+  const pickerProps = buildPickerNativeAttrs({
+    id: pickerId,
+    columns,
+    mode,
+    start,
+    end,
+    fields,
+    value,
+    cancelText,
+    cancelTextColor,
+    cancelButtonColor,
+    confirmText,
+    confirmTextColor,
+    confirmButtonColor,
+  }, rest as Record<string, unknown>);
+  const displayText = getPickerDisplayText(value, fields);
+
+  return (
+    <>
+      {children ? (
+        <div
+          onClick={handleClick}
+          className={className}
+          style={{
+            cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.5 : 1,
+            ...style,
+          }}
+        >
+          {children}
+        </div>
+      ) : (
+        <div
+          onClick={handleClick}
+          className={className}
+          style={{
+            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
+            padding: '12px 14px', backgroundColor: '#fff', border: '1px solid #e5e7eb',
+            borderRadius: '8px', cursor: disabled ? 'not-allowed' : 'pointer',
+            opacity: disabled ? 0.5 : 1, width: '100%', boxSizing: 'border-box',
+            ...style,
+          }}
+        >
+          <span style={{ color: value ? '#111' : '#9ca3af' }}>{displayText || placeholder}</span>
+          <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#9ca3af" strokeWidth="2">
+            <path d="M6 9l6 6 6-6" />
+          </svg>
+        </div>
+      )}
+      {visible && React.createElement('lx-picker', { ref: elementRefCallback, ...pickerProps })}
+    </>
+  );
+});
+
+LxPicker.displayName = 'LxPicker';

package/src/react/LxTextarea.tsx

@@ -0,0 +1,216 @@
+import React, { forwardRef, useCallback, useEffect, useRef } from "react";
+import { registerTextareaComponent } from "@lingxia/elements";
+import { buildTextareaNativeAttrs } from "@lingxia/elements";
+import {
+  assignForwardedRef,
+  bindElementEvents,
+  getCustomEventDetail,
+  unbindElementEvents,
+} from "./text_component_shared.js";
+
+export interface LxTextareaEventDetail {
+  value?: string;
+  cursor?: number;
+  lineCount?: number;
+  height?: number;
+  duration?: number;
+  selectionStart?: number;
+  selectionEnd?: number;
+  heightRpx?: number;
+}
+
+export interface LxTextareaProps {
+  id?: string;
+  value?: string;
+  defaultValue?: string;
+  placeholder?: string;
+  placeholderStyle?: string;
+  placeholderClass?: string;
+  maxlength?: number;
+  disabled?: boolean;
+  autoFocus?: boolean;
+  focus?: boolean;
+  autoHeight?: boolean;
+  cursorSpacing?: number;
+  showConfirmBar?: boolean;
+  adjustPosition?: boolean;
+  holdKeyboard?: boolean;
+  disableDefaultPadding?: boolean;
+  confirmType?: "send" | "search" | "next" | "go" | "done" | "return";
+  confirmHold?: boolean;
+  fixed?: boolean;
+  adjustKeyboardTo?: "cursor" | "bottom";
+  cursor?: number;
+  selectionStart?: number;
+  selectionEnd?: number;
+
+  onInput?: (detail: LxTextareaEventDetail) => void;
+  onChange?: (detail: LxTextareaEventDetail) => void;
+  onFocus?: (detail: LxTextareaEventDetail) => void;
+  onBlur?: (detail: LxTextareaEventDetail) => void;
+  onConfirm?: (detail: LxTextareaEventDetail) => void;
+  onLineChange?: (detail: LxTextareaEventDetail) => void;
+  onKeyboardHeightChange?: (detail: LxTextareaEventDetail) => void;
+
+  // Logic bindings (CLI-generated)
+  pageBindings?: Record<string, string>;
+
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+if (typeof window !== "undefined") {
+  registerTextareaComponent();
+}
+
+export const LxTextarea = forwardRef<HTMLElement, LxTextareaProps>(({
+  value,
+  defaultValue,
+  placeholder,
+  placeholderStyle,
+  placeholderClass,
+  maxlength,
+  disabled,
+  autoFocus,
+  focus,
+  autoHeight,
+  cursorSpacing,
+  showConfirmBar,
+  adjustPosition,
+  holdKeyboard,
+  disableDefaultPadding,
+  confirmType,
+  confirmHold,
+  fixed,
+  adjustKeyboardTo,
+  cursor,
+  selectionStart,
+  selectionEnd,
+  onInput,
+  onChange,
+  onFocus,
+  onBlur,
+  onConfirm,
+  onLineChange,
+  onKeyboardHeightChange,
+  pageBindings,
+  className,
+  style,
+  id,
+  ...rest
+}, ref) => {
+  const elementRef = useRef<HTMLElement | null>(null);
+  const boundElementRef = useRef<HTMLElement | null>(null);
+  const handlerRef = useRef({
+    onInput,
+    onChange,
+    onFocus,
+    onBlur,
+    onConfirm,
+    onLineChange,
+    onKeyboardHeightChange,
+  });
+  handlerRef.current = {
+    onInput,
+    onChange,
+    onFocus,
+    onBlur,
+    onConfirm,
+    onLineChange,
+    onKeyboardHeightChange,
+  };
+  const listenerMapRef = useRef<Record<string, EventListenerObject>>({
+    input: {
+      handleEvent: (event: Event) => handlerRef.current.onInput?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
+    },
+    change: {
+      handleEvent: (event: Event) => handlerRef.current.onChange?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
+    },
+    focus: {
+      handleEvent: (event: Event) => handlerRef.current.onFocus?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
+    },
+    blur: {
+      handleEvent: (event: Event) => handlerRef.current.onBlur?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
+    },
+    confirm: {
+      handleEvent: (event: Event) => handlerRef.current.onConfirm?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
+    },
+    linechange: {
+      handleEvent: (event: Event) => handlerRef.current.onLineChange?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
+    },
+    keyboardheightchange: {
+      handleEvent: (event: Event) => handlerRef.current.onKeyboardHeightChange?.(getCustomEventDetail<LxTextareaEventDetail>(event)),
+    },
+  });
+  const elementRefCallback = useCallback((element: HTMLElement | null) => {
+    boundElementRef.current = bindElementEvents(boundElementRef.current, element, listenerMapRef.current);
+    elementRef.current = element;
+    assignForwardedRef(ref, element);
+  }, [ref]);
+
+  useEffect(() => () => {
+    unbindElementEvents(boundElementRef.current, listenerMapRef.current);
+    boundElementRef.current = null;
+    elementRef.current = null;
+  }, []);
+
+  React.useEffect(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    const setAttr = (name: string, next: string | null) => {
+      if (next === null) {
+        el.removeAttribute(name);
+        return;
+      }
+      el.setAttribute(name, next);
+    };
+    setAttr("value", value !== undefined ? String(value) : null);
+    setAttr("focus", focus !== undefined ? (focus ? "true" : "false") : null);
+    setAttr("maxlength", maxlength !== undefined ? String(maxlength) : null);
+    setAttr("placeholder-style", placeholderStyle ? String(placeholderStyle) : null);
+    setAttr("auto-height", autoHeight ? "true" : null);
+  }, [value, focus, maxlength, placeholderStyle, autoHeight]);
+
+  // Set pageBindings property on custom element
+  useEffect(() => {
+    const el = elementRef.current as any;
+    if (el && pageBindings) {
+      el.pageBindings = pageBindings;
+    }
+  }, [pageBindings]);
+
+  const textareaProps = buildTextareaNativeAttrs({
+    id,
+    value,
+    defaultValue,
+    placeholder,
+    placeholderStyle,
+    placeholderClass,
+    maxlength,
+    disabled,
+    autoFocus,
+    focus,
+    autoHeight,
+    cursorSpacing,
+    showConfirmBar,
+    adjustPosition,
+    holdKeyboard,
+    disableDefaultPadding,
+    confirmType,
+    confirmHold,
+    fixed,
+    adjustKeyboardTo,
+    cursor,
+    selectionStart,
+    selectionEnd,
+  }, rest as Record<string, unknown>, boundElementRef.current !== null);
+
+  return React.createElement("lx-textarea", {
+    ref: elementRefCallback,
+    className,
+    style,
+    ...textareaProps,
+  });
+});
+
+LxTextarea.displayName = "LxTextarea";

package/src/react/LxVideo.tsx

@@ -0,0 +1,166 @@
+import React, { forwardRef, useCallback, useEffect, useId, useMemo, useRef } from 'react';
+import { registerVideoComponent, type LxVideoAttributes } from '@lingxia/elements';
+import {
+  buildVideoNativeAttrs,
+  VIDEO_DOM_EVENT_MAP,
+} from '@lingxia/elements';
+import {
+  assignForwardedRef,
+  bindElementEvents,
+  unbindElementEvents,
+} from './text_component_shared.js';
+
+export interface LxVideoProps
+  extends LxVideoAttributes,
+    Omit<
+      React.HTMLAttributes<HTMLElement>,
+      keyof LxVideoAttributes | "children" | "dangerouslySetInnerHTML" | "ref" | "onPlaying"
+    > {}
+
+if (typeof window !== "undefined") {
+  registerVideoComponent();
+}
+export const LxVideo = forwardRef<HTMLElement, LxVideoProps>(({
+  id,
+  src,
+  poster,
+  objectFit,
+  rotate,
+  autoplay,
+  loop,
+  muted,
+  controls,
+  progressBar,
+  live,
+  volume,
+  qualities,
+  playbackRates,
+  onPlayRequest,
+  onPlay,
+  onPlaying,
+  onPause,
+  onStop,
+  onEnded,
+  onTimeUpdate,
+  onError,
+  onLoadedMetadata,
+  onFullscreenChange,
+  onWaiting,
+  onQualityChange,
+  onRateChange,
+  pageBindings,
+  className,
+  style,
+  ...rest
+}, ref) => {
+  const elementRef = useRef<HTMLElement | null>(null);
+  const boundElementRef = useRef<HTMLElement | null>(null);
+  const reactId = useId();
+  const resolvedId = useMemo(() => {
+    if (id) return id;
+    return `lx-video-${reactId.replace(/[:]/g, "")}`;
+  }, [id, reactId]);
+  const handlerRef = useRef({
+    onPlayRequest,
+    onPlay,
+    onPlaying,
+    onPause,
+    onStop,
+    onEnded,
+    onTimeUpdate,
+    onError,
+    onLoadedMetadata,
+    onFullscreenChange,
+    onWaiting,
+    onQualityChange,
+    onRateChange,
+  });
+  handlerRef.current = {
+    onPlayRequest,
+    onPlay,
+    onPlaying,
+    onPause,
+    onStop,
+    onEnded,
+    onTimeUpdate,
+    onError,
+    onLoadedMetadata,
+    onFullscreenChange,
+    onWaiting,
+    onQualityChange,
+    onRateChange,
+  };
+  const listenerMapRef = useRef<Record<string, EventListenerObject>>(
+    Object.fromEntries(
+      Object.entries(VIDEO_DOM_EVENT_MAP).map(([propKey, eventName]) => [
+        eventName,
+        {
+          handleEvent: (event: Event) => {
+            const handler = handlerRef.current[propKey as keyof typeof handlerRef.current];
+            if (typeof handler === "function") {
+              handler(event);
+            }
+          },
+        } satisfies EventListenerObject,
+      ])
+    )
+  );
+  const elementRefCallback = useCallback((element: HTMLElement | null) => {
+    boundElementRef.current = bindElementEvents(boundElementRef.current, element, listenerMapRef.current);
+    elementRef.current = element;
+    assignForwardedRef(ref, element);
+  }, [ref]);
+
+  useEffect(() => () => {
+    unbindElementEvents(boundElementRef.current, listenerMapRef.current);
+    boundElementRef.current = null;
+    elementRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    const el = elementRef.current;
+    if (!el) return;
+    if (rotate === undefined || rotate === null) {
+      el.removeAttribute("rotate");
+    } else {
+      el.setAttribute("rotate", String(rotate).trim());
+    }
+    if (objectFit === undefined || objectFit === null) {
+      el.removeAttribute("object-fit");
+    } else {
+      el.setAttribute("object-fit", String(objectFit).trim().toLowerCase());
+    }
+  }, [rotate, objectFit]);
+
+  // Set pageBindings property on custom element
+  useEffect(() => {
+    const el = elementRef.current as any;
+    if (el && pageBindings) {
+      el.pageBindings = pageBindings;
+    }
+  }, [pageBindings]);
+
+  const domProps = buildVideoNativeAttrs({
+    id: resolvedId,
+    src,
+    poster,
+    autoplay,
+    loop,
+    muted,
+    controls,
+    progressBar,
+    live,
+    volume,
+    qualities,
+    playbackRates,
+  }, rest as Record<string, unknown>);
+
+  return React.createElement('lx-video', {
+    ref: elementRefCallback,
+    className,
+    style,
+    ...domProps
+  });
+});
+
+LxVideo.displayName = 'LxVideo';