@ray-js/components 1.7.79 → 1.7.80

package/lib/Textarea/props.d.ts

@@ -73,96 +73,20 @@ export interface TextareaLineChangeEvent extends BaseEvent {
  * @public
  * @alias Textarea
  * @since @ray-js/ray 0.5.10
- * @example 基础用法
- * ```tsx | sandbox previewTitle="基础用法"
- * import React from 'react';
- * import { Textarea, View } from '@ray-js/ray';
+ * @example 基础用法 ./demos/basic/index.tsx sandbox ide e2e
  *
- * export default function () {
- *   return (
- *     <View style={{ padding: '20px' }}>
- *       <Textarea placeholder="请输入内容..." />
- *     </View>
- *   );
- * }
- * ```
- *
- * @example 多行输入
- * ```tsx | sandbox previewTitle="多行输入"
- * import React, { useState } from 'react';
- * import { Textarea, Button, View, Text } from '@ray-js/ray';
- *
- * export default function () {
- *   const [value, setValue] = useState('');
- *
- *   return (
- *     <View style={{ padding: '20px' }}>
- *       <View style={{ marginBottom: '16px' }}>
- *         <Textarea
- *           value={value}
- *           placeholder="请输入..."
- *           maxLength={200}
- *           onInput={(e) => setValue(e.value)}
- *           style={{ marginTop: '8px', minHeight: '80px' }}
- *         />
- *         <Text style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>
- *           已输入 {value.length} / 200 字符
- *         </Text>
- *       </View>
- *       <View style={{ marginBottom: '16px' }}>
- *         <Text>自动增高:</Text>
- *         <Textarea
- *           autoHeight
- *           placeholder="输入内容会自动增高..."
- *           style={{ marginTop: '8px', minHeight: '40px' }}
- *         />
- *       </View>
- *     </View>
- *   );
- * }
- * ```
- * @example 禁用与事件
- * ```tsx | sandbox previewTitle="禁用与事件"
- * import React from 'react';
- * import { Textarea, View, Text } from '@ray-js/ray';
- *
- * export default function () {
- *   return (
- *     <View style={{ padding: '20px' }}>
- *       <View style={{ marginBottom: '16px' }}>
- *         <Text>禁用状态:</Text>
- *         <Textarea
- *           disabled
- *           value="不可编辑的内容"
- *           placeholderStyle={{ color: '#ccc' }}
- *           style={{ marginTop: '8px' }}
- *         />
- *       </View>
- *       <View style={{ marginBottom: '16px' }}>
- *         <Text>事件监听:</Text>
- *         <Textarea
- *           name="feedback"
- *           placeholder="输入反馈内容..."
- *           onFocus={(e) => console.log('聚焦:', e.detail.value)}
- *           onBlur={(e) => console.log('失焦:', e.detail.value)}
- *           onLinechange={(e) => console.log('行数变化:', e.detail.lineCount)}
- *           style={{ marginTop: '8px', minHeight: '80px' }}
- *         />
- *       </View>
- *     </View>
- *   );
- * }
- * ```
+ * @example 多行输入 ./demos/multiline/index.tsx sandbox ide e2e
+ * @example 禁用与事件 ./demos/disabled-events/index.tsx sandbox ide e2e
  */
 export interface TextareaProps extends BaseProps {
-    /** 表单名称 */
+    /** 表单控件名称，提交表单时作为键名 */
     name?: string;
     /** 输入框的内容 */
     value?: string;
     /** 输入框为空时占位符 */
     placeholder?: string;
     /** 指定 placeholder 的样式，目前仅支持 color、fontSize 和 fontWeight（对象或 CSS 声明字符串） */
-    placeholderStyle?: React.CSSProperties;
+    placeholderStyle?: string | React.CSSProperties;
     /** 是否禁用 */
     disabled?: boolean;
     /** 最大输入长度，设置为 -1 的时候不限制最大长度 */

package/lib/Textarea/props.js

@@ -24,86 +24,10 @@
  * @public
  * @alias Textarea
  * @since @ray-js/ray 0.5.10
- * @example 基础用法
- * ```tsx | sandbox previewTitle="基础用法"
- * import React from 'react';
- * import { Textarea, View } from '@ray-js/ray';
+ * @example 基础用法 ./demos/basic/index.tsx sandbox ide e2e
  *
- * export default function () {
- *   return (
- *     <View style={{ padding: '20px' }}>
- *       <Textarea placeholder="请输入内容..." />
- *     </View>
- *   );
- * }
- * ```
- *
- * @example 多行输入
- * ```tsx | sandbox previewTitle="多行输入"
- * import React, { useState } from 'react';
- * import { Textarea, Button, View, Text } from '@ray-js/ray';
- *
- * export default function () {
- *   const [value, setValue] = useState('');
- *
- *   return (
- *     <View style={{ padding: '20px' }}>
- *       <View style={{ marginBottom: '16px' }}>
- *         <Textarea
- *           value={value}
- *           placeholder="请输入..."
- *           maxLength={200}
- *           onInput={(e) => setValue(e.value)}
- *           style={{ marginTop: '8px', minHeight: '80px' }}
- *         />
- *         <Text style={{ marginTop: '8px', fontSize: '12px', color: '#999' }}>
- *           已输入 {value.length} / 200 字符
- *         </Text>
- *       </View>
- *       <View style={{ marginBottom: '16px' }}>
- *         <Text>自动增高:</Text>
- *         <Textarea
- *           autoHeight
- *           placeholder="输入内容会自动增高..."
- *           style={{ marginTop: '8px', minHeight: '40px' }}
- *         />
- *       </View>
- *     </View>
- *   );
- * }
- * ```
- * @example 禁用与事件
- * ```tsx | sandbox previewTitle="禁用与事件"
- * import React from 'react';
- * import { Textarea, View, Text } from '@ray-js/ray';
- *
- * export default function () {
- *   return (
- *     <View style={{ padding: '20px' }}>
- *       <View style={{ marginBottom: '16px' }}>
- *         <Text>禁用状态:</Text>
- *         <Textarea
- *           disabled
- *           value="不可编辑的内容"
- *           placeholderStyle={{ color: '#ccc' }}
- *           style={{ marginTop: '8px' }}
- *         />
- *       </View>
- *       <View style={{ marginBottom: '16px' }}>
- *         <Text>事件监听:</Text>
- *         <Textarea
- *           name="feedback"
- *           placeholder="输入反馈内容..."
- *           onFocus={(e) => console.log('聚焦:', e.detail.value)}
- *           onBlur={(e) => console.log('失焦:', e.detail.value)}
- *           onLinechange={(e) => console.log('行数变化:', e.detail.lineCount)}
- *           style={{ marginTop: '8px', minHeight: '80px' }}
- *         />
- *       </View>
- *     </View>
- *   );
- * }
- * ```
+ * @example 多行输入 ./demos/multiline/index.tsx sandbox ide e2e
+ * @example 禁用与事件 ./demos/disabled-events/index.tsx sandbox ide e2e
  */
 
 /**

package/lib/View/props.d.ts

@@ -1,23 +1,35 @@
 import { BaseProps } from '../types';
+/**
+ * 用于页面布局的容器组件，支持 flex 布局、自定义样式等，是构建页面的基础块级元素。
+ *
+ * @public
+ * @alias View
+ * @since @ray-js/ray 0.5.10
+ * @example 基础用法 ./demos/basic/index.tsx sandbox ide e2e
+ * @example Flex 布局 ./demos/flex-layout/index.tsx sandbox ide e2e
+ * @example Hover 点击态 ./demos/hover/index.tsx sandbox ide e2e
+ */
 export interface ViewProps extends BaseProps {
-    /**
-     * @description.en hoverClassName
-     * @description.zh hover 样式
-     * @default undefined
-     */
+    /** 指定按下去的样式类；为 `none` 时没有点击态效果 */
     hoverClassName?: string;
-    /**
-     * @description.en How long after the click appears in ms
-     * @description.zh 按住后多久出现点击态 单位 ms
-     * @default 20
-     */
+    /** 按住后多久出现点击态，单位毫秒 */
     hoverStartTime?: number;
-    /**
-     * @description.en Click retention time ms after finger release
-     * @description.zh 手指松开后点击态保留时间 ms
-     * @default 70
-     */
+    /** 手指松开后点击态保留时间，单位毫秒 */
     hoverStayTime?: number;
+    /** 是否启用可触摸响应的 hover 样式 */
     hoverable?: boolean;
 }
+/**
+ * View 组件文档用默认值（与运行时 defaultProps 分离）
+ *
+ * @belong View
+ * @defaults
+ */
+export declare const viewDefaultProps: {
+    hoverClassName: string;
+    hoverStartTime: number;
+    hoverStayTime: number;
+    hoverable: boolean;
+};
+/** 运行时 defaultProps */
 export declare const defaultViewProps: Partial<ViewProps>;

package/lib/View/props.js

@@ -1,3 +1,28 @@
+/**
+ * 用于页面布局的容器组件，支持 flex 布局、自定义样式等，是构建页面的基础块级元素。
+ *
+ * @public
+ * @alias View
+ * @since @ray-js/ray 0.5.10
+ * @example 基础用法 ./demos/basic/index.tsx sandbox ide e2e
+ * @example Flex 布局 ./demos/flex-layout/index.tsx sandbox ide e2e
+ * @example Hover 点击态 ./demos/hover/index.tsx sandbox ide e2e
+ */
+
+/**
+ * View 组件文档用默认值（与运行时 defaultProps 分离）
+ *
+ * @belong View
+ * @defaults
+ */
+export const viewDefaultProps = {
+  hoverClassName: 'none',
+  hoverStartTime: 20,
+  hoverStayTime: 70,
+  hoverable: true
+};
+
+/** 运行时 defaultProps */
 export const defaultViewProps = {
   hoverStartTime: 20,
   hoverStayTime: 70

package/lib/types/index.d.ts

@@ -1,4 +1,8 @@
 import * as React from 'react';
+/**
+ * 基础属性
+ * @internal
+ */
 export interface BaseProps extends TouchEventHandler {
     /**
      * @description.en id
@@ -31,6 +35,49 @@ export interface BaseProps extends TouchEventHandler {
      * @deprecated 该属性仅在小程序基础组件中使用, 不建议在 React DSL 中使用
      */
     slot?: string;
+    /**
+     * @description.en onClick
+     * @description.zh 点击回调
+     * @default undefined
+     */
+    onClick?: (e: TouchEvent) => any;
+    /**
+     * @description.en Long press the trigger
+     * @description.zh 长按触发
+     * @default undefined
+     */
+    onLongClick?: (e: TouchEvent) => any;
+    /**
+     * @description.en onLongPress event callback, no longer trigger click event
+     * @description.zh 长按事件回调, 不再触发点击事件
+     * @default undefined
+     * @param e
+     */
+    onLongPress?: (e: TouchEvent) => any;
+    /**
+     * @description.en onTouchStart
+     * @description.zh 开始触摸事件回调
+     * @default undefined
+     */
+    onTouchStart?: (e: TouchEvent) => any;
+    /**
+     * @description.en onTouchMove
+     * @description.zh 触摸移动事件回调
+     * @default undefined
+     */
+    onTouchMove?: (e: TouchEvent) => any;
+    /**
+     * @description.en onTouchEnd
+     * @description.zh 触摸结束事件回调
+     * @default undefined
+     */
+    onTouchEnd?: (e: TouchEvent) => any;
+    /**
+     * @description.en onTouchCancel
+     * @description.zh 触摸取消事件回调
+     * @default undefined
+     */
+    onTouchCancel?: (e: TouchEvent) => any;
 }
 export interface HoverableProps {
     /**

package/lib/types/index.js

@@ -1,3 +1,8 @@
+/**
+ * 基础属性
+ * @internal
+ */
+
 /**
  * 多端通用事件
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ray-js/components",
-  "version": "1.7.79",
+  "version": "1.7.80",
   "description": "Ray basic components",
   "keywords": [
     "ray"
@@ -29,8 +29,8 @@
   "dependencies": {
     "@ray-core/macro": "^0.4.9",
     "@ray-core/wechat": "^0.4.9",
-    "@ray-js/adapter": "1.7.79",
-    "@ray-js/framework-shared": "1.7.79",
+    "@ray-js/adapter": "1.7.80",
+    "@ray-js/framework-shared": "1.7.80",
     "ahooks": "^3.8.5",
     "clsx": "^1.2.1",
     "core-js": "^3.43.0",
@@ -40,11 +40,11 @@
     "style-to-object": "^0.3.0"
   },
   "devDependencies": {
-    "@ray-js/cli": "1.7.79"
+    "@ray-js/cli": "1.7.80"
   },
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "gitHead": "0cfb3c5735eee2d1ab5d705d6cbd033e37c3ca0c"
+  "gitHead": "5d4ad7b9ccd4016df3075f438c5dd8743bc1766b"
 }