@ray-js/adapter 1.7.79 → 1.7.81

package/esm/hostComponents/Camera/index.js

@@ -1,5 +1,20 @@
 import createHostComponent from '../createHostComponent.js';
 export const Camera = createHostComponent('camera');
+/**
+ * @belong Camera
+ * @defaults
+ */
+export const cameraDefaultProps = {
+    mode: 'normal',
+    resolution: 'medium',
+    devicePosition: 'back',
+    flash: 'auto',
+    borderWidth: 0,
+    borderStyle: 'solid',
+    borderColor: '#ffffff',
+    borderRadius: 0,
+    backgroundColor: '#ffffff',
+};
 Camera.defaultProps = {
     mode: 'normal',
     resolution: 'medium',

package/esm/hostComponents/Canvas/index.d.ts

@@ -1,19 +1,201 @@
 import * as React from 'react';
-import { GenericEvent } from '../../types/index.js';
-export interface CanvasProps {
-    readonly dataset?: DOMStringMap;
-    id?: string;
-    style?: React.CSSProperties;
-    className?: string;
-    onTap?: (e: any) => void;
-    type?: string;
+import { BaseEvent, BaseProps, TouchEvent } from '../../types/component';
+/** Canvas 触摸点信息（与标准 DOM Touch 不同，仅包含 identifier/x/y） */
+export interface CanvasTouchInfo {
+    /** 触摸点标识符 */
+    identifier: number;
+    /** 触摸点相对于 canvas 左上角的 x 坐标 */
+    x: number;
+    /** 触摸点相对于 canvas 左上角的 y 坐标 */
+    y: number;
+}
+/** Canvas 触摸事件类型 */
+export type CanvasTouchEvent = TouchEvent<CanvasTouchInfo>;
+/** canvas 错误事件详情 */
+export interface CanvasErrorEventDetail {
+    /** 错误信息 */
+    errMsg: string;
+}
+/** canvas 错误事件对象 */
+export interface CanvasErrorEvent extends BaseEvent {
+    /** 事件类型 */
+    type: 'error';
+    /** 事件详情 */
+    detail: CanvasErrorEventDetail;
+}
+/**
+ * 画布组件。
+ *
+ * @alias Canvas
+ * @since @ray-js/ray 0.5.10
+ * @example 使用 RJS 进行绘制（推荐）
+ * ```tsx
+ * // index.tsx
+ * import React, { useRef, useEffect } from 'react';
+ * import { Canvas, View, Text, usePageEvent } from '@ray-js/ray';
+ * import Render from './render.rjs';
+ *
+ * export default function () {
+ *   const canvasRef = useRef(null);
+ *
+ *   usePageEvent('onShow', () => {
+ *     if (canvasRef.current) {
+ *       const canvas = canvasRef.current;
+ *       const render = new Render(canvas, canvas.width, canvas.height);
+ *       render.start();
+ *     }
+ *   });
+ *
+ *   return (
+ *     <View style={{ padding: '20px' }}>
+ *       <Text style={{ marginBottom: '10px', fontSize: '16px' }}>Canvas RJS 绘制示例</Text>
+ *       <Canvas
+ *         ref={canvasRef}
+ *         type="2d"
+ *         canvasId="rjsCanvas"
+ *         style={{ width: '100%', height: '300px', backgroundColor: '#f5f5f5' }}
+ *       />
+ *     </View>
+ *   );
+ * }
+ * ```
+ * ```javascript
+ * // render.rjs
+ * export default class Render {
+ *   constructor(canvas, width, height) {
+ *     this.canvas = canvas;
+ *     this.width = width;
+ *     this.height = height;
+ *     this.ctx = canvas.getContext('2d');
+ *   }
+ *
+ *   start() {
+ *     this.drawBackground();
+ *     this.drawCircle();
+ *     this.drawRect();
+ *     this.drawText();
+ *   }
+ *
+ *   drawBackground() {
+ *     this.ctx.fillStyle = '#ffffff';
+ *     this.ctx.fillRect(0, 0, this.width, this.height);
+ *   }
+ *
+ *   drawCircle() {
+ *     this.ctx.beginPath();
+ *     this.ctx.arc(100, 100, 50, 0, 2 * Math.PI);
+ *     this.ctx.fillStyle = '#ff6b6b';
+ *     this.ctx.fill();
+ *     this.ctx.strokeStyle = '#c92a2a';
+ *     this.ctx.lineWidth = 3;
+ *     this.ctx.stroke();
+ *   }
+ *
+ *   drawRect() {
+ *     this.ctx.fillStyle = '#4dabf7';
+ *     this.ctx.fillRect(200, 50, 100, 100);
+ *     this.ctx.strokeStyle = '#1971c2';
+ *     this.ctx.lineWidth = 3;
+ *     this.ctx.strokeRect(200, 50, 100, 100);
+ *   }
+ *
+ *   drawText() {
+ *     this.ctx.font = '20px sans-serif';
+ *     this.ctx.fillStyle = '#333';
+ *     this.ctx.fillText('RJS Canvas', 120, 200);
+ *   }
+ * }
+ * ```
+ * @example 使用 createCanvasContext API 绘制
+ * ```tsx | sandbox previewTitle="使用 API 绘制" ide
+ * import React, { useEffect } from 'react';
+ * import { Canvas, View, Button, createCanvasContext } from '@ray-js/ray';
+ *
+ * export default function () {
+ *   const drawSmile = () => {
+ *     const context = createCanvasContext('apiCanvas');
+ *     context.setStrokeStyle('#ff0000');
+ *     context.setLineWidth(2);
+ *     context.arc(100, 100, 60, 0, 2 * Math.PI, true);
+ *     context.stroke();
+ *     context.beginPath();
+ *     context.arc(100, 100, 40, 0, Math.PI, false);
+ *     context.stroke();
+ *     context.beginPath();
+ *     context.arc(80, 80, 5, 0, 2 * Math.PI, true);
+ *     context.fill();
+ *     context.beginPath();
+ *     context.arc(120, 80, 5, 0, 2 * Math.PI, true);
+ *     context.fill();
+ *     context.draw();
+ *   };
+ *
+ *   const drawRect = () => {
+ *     const context = createCanvasContext('apiCanvas');
+ *     context.setFillStyle('rgb(200, 0, 0)');
+ *     context.fillRect(10, 10, 55, 50);
+ *     context.setFillStyle('rgba(0, 0, 200, 0.5)');
+ *     context.fillRect(30, 30, 55, 50);
+ *     context.draw();
+ *   };
+ *
+ *   const clearCanvas = () => {
+ *     const context = createCanvasContext('apiCanvas');
+ *     context.clearRect(0, 0, 300, 200);
+ *     context.draw();
+ *   };
+ *
+ *   useEffect(() => {
+ *     drawSmile();
+ *   }, []);
+ *
+ *   return (
+ *     <View style={{ padding: '20px' }}>
+ *       <Canvas
+ *         canvasId="apiCanvas"
+ *         type="2d"
+ *         style={{ width: '100%', height: '200px', border: '1px solid #eee' }}
+ *         onTouchStart={(e) => console.log('触摸开始:', e.touches[0]?.x, e.touches[0]?.y)}
+ *       />
+ *       <View style={{ marginTop: '10px', display: 'flex', flexDirection: 'row', gap: '8px', flexWrap: 'wrap' }}>
+ *         <Button size="mini" onClick={drawSmile}>绘制笑脸</Button>
+ *         <Button size="mini" onClick={drawRect}>绘制矩形</Button>
+ *         <Button size="mini" onClick={clearCanvas}>清空画布</Button>
+ *       </View>
+ *     </View>
+ *   );
+ * }
+ * ```
+ */
+export interface CanvasProps extends Omit<BaseProps, 'onTouchStart' | 'onTouchMove' | 'onTouchEnd' | 'onTouchCancel' | 'onLongTap'> {
+    /** 指定 canvas 类型，有效值为 2d、webgl */
+    type?: '2d' | 'webgl' | string;
+    /** canvas 组件的唯一标识符；若指定了 type 为 2d/webgl 可不再指定 */
     canvasId?: string;
-    disableScroll?: string;
-    onTouchStart?: (event: GenericEvent) => void;
-    onTouchMove?: (event: GenericEvent) => void;
-    onTouchEnd?: (event: GenericEvent) => void;
-    onTouchCancel?: (event: GenericEvent) => void;
-    onLongTap?: (event: GenericEvent) => void;
-    onError?: (event: GenericEvent) => void;
+    /** 在 canvas 中移动且绑定了手势事件时，是否禁止页面滚动与下拉刷新 */
+    disableScroll?: boolean;
+    /** 手指触摸动作开始 */
+    onTouchStart?: (event: CanvasTouchEvent) => void;
+    /** 手指触摸后移动 */
+    onTouchMove?: (event: CanvasTouchEvent) => void;
+    /** 手指触摸动作结束 */
+    onTouchEnd?: (event: CanvasTouchEvent) => void;
+    /** 手指触摸动作被打断，如来电提醒、弹窗 */
+    onTouchCancel?: (event: CanvasTouchEvent) => void;
+    /** 手指长按约 500ms 后触发；触发后移动不会引起页面滚动 */
+    onLongTap?: (event: CanvasTouchEvent) => void;
+    /** 当发生错误时触发，detail 含 errMsg */
+    onError?: (event: CanvasErrorEvent) => void;
 }
 export declare const Canvas: React.ComponentType<CanvasProps>;
+/**
+ * Canvas 组件文档用默认值（与运行时 defaultProps 分离；当前运行时未设置 defaultProps）
+ *
+ * @belong Canvas
+ * @defaults
+ */
+export declare const canvasDefaultProps: {
+    type: string;
+    canvasId: string;
+    disableScroll: boolean;
+};

package/esm/hostComponents/Canvas/index.js

@@ -1,2 +1,13 @@
 import createHostComponent from '../createHostComponent.js';
 export const Canvas = createHostComponent('canvas');
+/**
+ * Canvas 组件文档用默认值（与运行时 defaultProps 分离；当前运行时未设置 defaultProps）
+ *
+ * @belong Canvas
+ * @defaults
+ */
+export const canvasDefaultProps = {
+    type: '2d',
+    canvasId: '',
+    disableScroll: false,
+};

package/esm/hostComponents/CoverView/index.d.ts

@@ -1,6 +1,13 @@
 import * as React from 'react';
 import { BaseProps } from '../../types/component.js';
+/**
+ * 覆盖在原生组件之上的视图容器，可覆盖 Map、Video 等原生组件。
+ *
+ * @public
+ * @alias CoverView
+ * @since @ray-js/ray 0.5.10
+ * @example 基础用法 ./demos/basic/index.tsx sandbox ide e2e
+ */
 export interface CoverViewProps extends BaseProps {
-    children?: any;
 }
 export declare const CoverView: React.ComponentType<CoverViewProps>;

package/esm/hostComponents/Iframe/index.d.ts

@@ -1,25 +1,65 @@
 import * as React from 'react';
-import { BaseProps, DiffLayer, GenericEvent } from '../../types/component.js';
+import type { BaseEvent, BaseProps, DiffLayer } from '../../types/component';
+/** iframe 网页加载失败事件数据 */
+export interface IframeErrorDetail {
+    /** 加载失败的地址 */
+    url: string;
+    /** 加载失败时的完整 URL */
+    fullUrl: string;
+}
+/** 网页加载失败时触发 */
+export interface IframeErrorEvent extends BaseEvent {
+    /** 事件类型 */
+    type: 'error';
+    /** 事件数据 */
+    detail: IframeErrorDetail;
+}
+/** iframe 网页加载成功事件数据 */
+export interface IframeLoadDetail {
+    /** 已加载网页地址 */
+    src: string;
+}
+/** 网页加载成功时触发 */
+export interface IframeLoadEvent extends BaseEvent {
+    /** 事件类型 */
+    type: 'load';
+    /** 事件数据 */
+    detail: IframeLoadDetail;
+}
+/** iframe 网页向小程序 postMessage 事件数据 */
+export interface IframeMessageDetail {
+    /** 多次 `postMessage` 入参组成的数组 */
+    data: unknown[];
+}
+/** 在特定时机收到网页 `postMessage` 时触发 */
+export interface IframeMessageEvent extends BaseEvent {
+    /** 事件类型 */
+    type: 'message';
+    /** 事件数据 */
+    detail: IframeMessageDetail;
+}
+/**
+ * 内嵌网页（iframe）
+ *
+ * @internal
+ */
 export interface IframeProps extends BaseProps, DiffLayer {
-    /**
-     * webview 指向网页的链接，网页需登录小程序管理后台配置业务域名。
-     */
+    /** 网页链接（需在小程序后台配置业务域名） */
     src?: string;
-    /**
-     * 是否向 iframe 中注入 TTT SDK
-     */
+    /** 是否向 iframe 中注入 TTT SDK */
     injectTTT?: boolean;
-    /**
-     * 网页加载失败的时候触发此事件。e.detail = { url, fullUrl }，其中 fullUrl 为加载失败时的完整 url
-     */
-    onError?: (event: GenericEvent) => any;
-    /**
-     * 网页加载成功时候触发此事件。e.detail = { src }
-     */
-    onLoad?: (event: GenericEvent) => any;
-    /**
-     * 网页向小程序 postMessage 时，会在特定时机（小程序后退、组件销毁、分享）触发并收到消息。e.detail = { data }，data是多次 postMessage 的参数组成的数组
-     */
-    onMessage?: (event: GenericEvent) => any;
+    /** 网页加载失败时触发 */
+    onError?: (event: IframeErrorEvent) => void;
+    /** 网页加载成功时触发 */
+    onLoad?: (event: IframeLoadEvent) => void;
+    /** 网页向小程序 postMessage 时，在特定时机触发并收到消息 */
+    onMessage?: (event: IframeMessageEvent) => void;
 }
 export declare const Iframe: React.ComponentType<IframeProps>;
+/**
+ * Iframe 组件默认值
+ *
+ * @belong Iframe
+ * @defaults
+ */
+export declare const iframeDefaultProps: {};

package/esm/hostComponents/Iframe/index.js

@@ -1,3 +1,10 @@
 import createHostComponent from '../createHostComponent.js';
 export const Iframe = createHostComponent('iframe');
+/**
+ * Iframe 组件默认值
+ *
+ * @belong Iframe
+ * @defaults
+ */
+export const iframeDefaultProps = {};
 Iframe.defaultProps = {};

package/esm/hostComponents/Iframe/node.d.ts

@@ -1,6 +1,7 @@
 export declare const alias: {
     src: string;
     injectTTT: string;
+    updateLayout: string;
     onError: string;
     onLoad: string;
     onMessage: string;

package/esm/hostComponents/Iframe/node.js

@@ -1,3 +1,3 @@
 import { universalAlias } from '../universal.js';
-export const alias = Object.assign(Object.assign({}, universalAlias), { src: 'src', injectTTT: 'inject-ttt', onError: 'bind:error', onLoad: 'bind:load', onMessage: 'bind:message' });
+export const alias = Object.assign(Object.assign({}, universalAlias), { src: 'src', injectTTT: 'inject-ttt', updateLayout: 'update-layout', onError: 'bind:error', onLoad: 'bind:load', onMessage: 'bind:message' });
 export const props = Object.values(alias);

package/esm/hostComponents/Input/index.d.ts

@@ -2,7 +2,7 @@ import * as React from 'react';
 import { BaseProps, GenericEvent } from '../../types/component.js';
 export interface InputProps extends BaseProps {
     value?: string;
-    type?: 'text' | 'number';
+    type?: 'text' | 'number' | 'digit';
     password?: boolean;
     placeholder?: string;
     placeholderStyle?: string;