@ray-js/components 0.3.31 → 0.4.2

package/lib/Icon/iconfont-rn/iconfont.json

@@ -186,4 +186,4 @@
   "icon-a-cloudmoonboltfill": "M822.162286 525.714286c99.657143-19.931429 159.122286-101.558857 159.122285-155.574857 0-12.873143-5.778286-22.198857-16.384-22.198858-16.384 0-40.521143 20.260571-85.504 20.260572-77.458286 0-126.317714-46.921143-126.317714-118.272 0-43.739429 21.540571-74.898286 21.540572-92.891429 0-10.276571-7.094857-17.042286-19.931429-16.713143-58.514286 2.230857-136.301714 67.803429-154.294857 155.245715 10.934857 10.276571 21.211429 23.771429 29.586286 41.472 105.728 7.387429 187.684571 87.734857 192.182857 188.672zM257.462857 697.344h357.741714c91.611429 0 162.340571-69.741714 162.340572-160.694857 0-91.611429-72.96-160.073143-171.008-160.402286-36.315429-69.449143-102.217143-114.432-186.112-114.432-107.044571 0-197.046857 82.285714-206.665143 189.952-55.954286 16.091429-91.611429 63.341714-91.611429 121.197714 0 73.910857 54.966857 124.379429 135.314286 124.379429z m275.456 117.028571h-66.523428l28.598857-54.674285c3.876571-6.729143 0.950857-12.214857-6.107429-12.214857h-72.96c-8.996571 0-11.885714 3.547429-14.774857 9.984l-42.130286 95.122285c-3.181714 7.716571 0 12.873143 8.374857 12.873143h55.296l-41.801142 101.229714c-1.938286 4.205714-0.950857 7.716571 1.938285 9.033143 3.218286 0.950857 6.436571 0.292571 9.947429-3.218285l144.969143-142.409143c6.765714-6.729143 4.169143-15.725714-4.827429-15.725715z",
   "icon-a-arrowtriangleleftfillandlineverticalandarro": "M512 840.411429c15.104 0 28.269714-11.264 28.269714-26.697143V185.965714c0-15.433143-13.165714-26.989714-28.269714-26.989714-14.774857 0-28.269714 11.556571-28.269714 26.989714V813.714286c0 15.433143 13.165714 26.697143 28.269714 26.697143z m227.254857-147.236572l247.186286-151.04c34.706286-21.211429 35.035429-63.341714 0-84.553143l-247.222857-151.076571c-36.608-22.198857-72.923429-4.169143-72.923429 38.253714v310.162286c0 43.081143 36.937143 59.794286 72.96 38.253714z m-701.696-151.04l246.857143 151.04c36.022857 21.540571 72.96 4.827429 72.96-38.253714V344.758857c0-42.422857-36.315429-60.452571-72.96-38.253714l-246.857143 151.04c-35.328 21.211429-34.706286 63.341714 0 84.553143z",
   "icon-a-checkmarkicloudfill": "M743.424 755.2c100.278857 0 179.346286-73.581714 179.346286-165.522286 0-68.132571-38.875429-128.877714-102.838857-155.574857 0.329143-145.590857-104.484571-250.404571-239.177143-250.404571-85.467429 0-149.76 44.361143-189.952 102.546285C309.174857 264.411429 223.378286 325.156571 220.16 415.817143c-73.618286 13.165714-118.930286 79.396571-118.930286 159.744 0 98.048 85.467429 179.675429 197.997715 179.675428h444.196571z m-254.902857-131.766857c-11.556571 0-20.845714-5.12-28.891429-15.433143l-72.045714-89.051429a33.060571 33.060571 0 0 1-8.045714-21.211428c0-16.384 12.873143-28.598857 28.635428-28.598857 9.984 0 18.322286 4.498286 24.429715 12.873143l54.637714 69.741714 107.702857-178.724572c6.107429-10.276571 15.396571-16.091429 25.380571-16.091428 16.091429 0 29.549714 11.922286 29.549715 27.355428 0 7.387429-3.84 15.104-7.387429 20.882286l-126.317714 202.166857c-6.436571 10.313143-16.384 16.091429-27.648 16.091429z"
-}
+}

package/lib/Icon/props.d.ts

@@ -1,8 +1,23 @@
 import { BaseProps } from '../types';
 import { TouchEventHandler } from '@ray-js/framework-shared';
 export interface IconProps extends BaseProps, TouchEventHandler {
+    /**
+     * @description.en type
+     * @description.zh 图标类型，类型名
+     * @default undefined
+     */
     type: IconFontName;
+    /**
+     * @description.en icon size (px)
+     * @description.zh 图标大小，单位 px
+     * @default 16
+     */
     size?: number;
+    /**
+     * @description.en icon color
+     * @description.zh 图标颜色
+     * @default #333333
+     */
     color?: string;
 }
 export declare const defaultIconProps: IconProps;

package/lib/Image/props.d.ts

@@ -3,17 +3,43 @@ import { TouchEventHandler } from '@ray-js/framework-shared';
 import { GenericEvent as WxEvent } from '@remax/wechat';
 import { ImageLoadEventData as RnLoadEvent } from 'react-native';
 export interface ImageProps extends BaseProps, TouchEventHandler {
-    /** 文本是否可选 */
+    /**
+     * @description.en image source uri
+     * @description.zh 图片地址
+     * @default undefined
+     */
     src: string;
+    /**
+     * @description.en mode
+     * @description.zh 图片裁剪、缩放的模式，RN 支持部分模式
+     * @default 'scaleToFill'
+     */
     mode?: 'scaleToFill' | 'aspectFit' | 'aspectFill' | 'widthFix' | 'heightFix' | 'top' | 'bottom' | 'center' | 'left' | 'right' | 'top left' | 'top right' | 'bottom right' | 'bottom left';
-    /** 当图片载入完毕时触发 */
+    /**
+     * @description.en Triggered when the image has finished loading
+     * @description.zh 当图片载入完毕时触发
+     * @default undefined
+     */
     onLoad?: (e: {
-        type: 'load' | 'error';
+        /**
+         * @description.en width
+         * @description.zh 宽度
+         * @default undefined
+         */
         width: number;
+        /**
+         * @description.en height
+         * @description.zh 高度
+         * @default undefined
+         */
         height: number;
         origin: RnLoadEvent | WxEvent;
     }) => any;
-    /** 当错误发生时触发 */
+    /**
+     * @description.en Triggered when an error occurs
+     * @description.zh 当错误发生时触发
+     * @default undefined
+     */
     onError?: (e: {
         errMsg: string;
         origin: null | WxEvent;

package/lib/Input/props.d.ts

@@ -3,32 +3,135 @@ import { TextInputChangeEventData as RnInputChangeEvent, NativeSyntheticEvent, T
 import { GenericEvent as WxEvent } from '@remax/wechat';
 export declare type InputType = 'text' | 'number' | 'digit' | 'idcard';
 export interface InputProps extends BaseProps {
+    /**
+     * @description.en content
+     * @description.zh 内容
+     * @default undefined
+     */
     value?: string;
+    /**
+     * @description.en type
+     * @description.zh 类型
+     * @default text
+     */
     type?: InputType;
+    /**
+     * @description.en is password
+     * @description.zh 是否为密码
+     * @default false
+     */
     password?: boolean;
+    /**
+     * @description.en placeholder
+     * @description.zh 占位内容
+     * @default undefined
+     */
     placeholder?: string;
+    /**
+     * @description.en disabled
+     * @description.zh 是否禁用
+     * @default false
+     */
     disabled?: boolean;
-    /** 最大输入长度，设置为 -1 的时候不限制最大长度 */
+    /**
+     * @description.en Maximum input length. When the value is set to -1, the maximum input length is not limited
+     * @description.zh 最大输入长度，设置为 -1 的时候不限制最大长度
+     * @default undefined
+     */
     maxLength?: number;
+    /**
+     * @description.en 获Get focus取焦点
+     * @description.zh 获取焦点
+     * @default false
+     */
     focus?: boolean;
-    /** 设置键盘右下角按钮的文字，仅在type='text'时生效 */
+    /**
+     * @description.en Set the text of the button in the lower right corner of the keyboard, effective only when type='text'
+     * @description.zh 设置键盘右下角按钮的文字，仅在type='text'时生效
+     * @default done
+     */
     confirmType?: 'send' | 'search' | 'next' | 'go' | 'done';
+    /**
+     * @description.en Start position of the cursor. This parameter is valid for automatic clustering and must be used with Selection End
+     * @description.zh 光标起始位置，自动聚集时有效，需与 selectionEnd 搭配使用
+     * @default -1
+     */
     selectionStart?: number;
+    /**
+     * @description.en End cursor position. This parameter is valid for automatic clustering and must be used with Selection Start
+     * @description.zh 光标结束位置，自动聚集时有效，需与 selectionStart 搭配使用
+     * @default -1
+     */
     selectionEnd?: number;
+    /**
+     * @description.en Specifies the cursor position for focus
+     * @description.zh 指定 focus 时的光标位置
+     * @default false
+     */
     cursor?: number;
+    /**
+     * @description.en Input events
+     * @description.zh 输入事件
+     * @default undefined
+     */
     onInput?: (event: {
+        /**
+         * @description.en type
+         * @description.zh 类型
+         * @default undefined
+         */
         type: string;
+        /**
+         * @description.en value
+         * @description.zh 价值
+         * @default undefined
+         */
         value: string;
         origin: RnInputChangeEvent | WxEvent | Event;
     }) => void;
+    /**
+     * @description.en onConfirm
+     * @description.zh 确认事件
+     * @default undefined
+     */
     onConfirm?: (event: any) => void;
+    /**
+     * @description.en onFocus
+     * @description.zh 焦点事件
+     * @default undefined
+     */
     onFocus?: (event: {
+        /**
+         * @description.en type
+         * @description.zh 类型
+         * @default undefined
+         */
         type: string;
+        /**
+         * @description.en value
+         * @description.zh 价值
+         * @default undefined
+         */
         value: string;
         origin: NativeSyntheticEvent<TextInputFocusEventData> | WxEvent | FocusEvent;
     }) => void;
+    /**
+     * @description.en onBlur
+     * @description.zh 丢焦事件
+     * @default undefined
+     */
     onBlur?: (event: {
+        /**
+         * @description.en type
+         * @description.zh 类型
+         * @default undefined
+         */
         type: string;
+        /**
+         * @description.en value
+         * @description.zh 价值
+         * @default undefined
+         */
         value: string;
         origin: NativeSyntheticEvent<TextInputFocusEventData> | WxEvent | FocusEvent;
     }) => void;

package/lib/Label/props.d.ts

@@ -1,11 +1,9 @@
-/// <reference types="react" />
 import { BaseProps } from '../types';
 export interface LabelProps extends BaseProps {
     /**
-     * @description.en id bound to a control
-     * @description.zh 绑定控件的 id
-     * @default null
+     * @description.en htmlFor
+     * @description.zh htmlfor
+     * @default undefined
      */
     htmlFor?: string;
-    children?: React.ReactNode;
 }

package/lib/LinearGradient/index.md

@@ -4,6 +4,7 @@ nav:
   path: /components
 group:
   title: 视图容器
+hide: true
 ---
 
 # LinearGradient
@@ -13,7 +14,7 @@ LinearGradient 主要是给子节点提供一个线性渐变的效果。
 ## 导入
 
 ```js
-import { LinearGradient } from '@ray-js/components';
+import { LinearGradient } from '@ray-js/components'
 ```
 
 ## 示例代码

package/lib/LinearGradient/props.d.ts

@@ -1,7 +1,17 @@
 /// <reference types="react" />
 import { BaseProps } from '../types';
 export interface LinearGradientProps extends BaseProps {
+    /**
+     * @description.en width
+     * @description.zh 宽度
+     * @default 300
+     */
     width: number;
+    /**
+     * @description.en height
+     * @description.zh 高度
+     * @default 300
+     */
     height: number;
     /**
      * @description.zh 起始点的x轴坐标

package/lib/Modal/index.md

@@ -4,6 +4,7 @@ nav:
   path: /components
 group:
   title: 视图容器
+hide: true
 ---
 
 # Modal
@@ -13,7 +14,7 @@ group:
 ## 导入
 
 ```js
-import { Modal } from '@ray-js/components';
+import { Modal } from '@ray-js/components'
 ```
 
 ## 示例代码

package/lib/Modal/props.d.ts

@@ -5,12 +5,47 @@ export interface ITYModalProps extends IModalProps {
     children: JSX.Element[];
 }
 export interface IModalProps extends BaseProps {
+    /**
+     * @description.en Whether to display the dialog box
+     * @description.zh 是否显示弹框
+     * @default false
+     */
     show: boolean;
+    /**
+     * @description.en Whether a mask is displayed
+     * @description.zh 是否显示遮罩
+     * @default true
+     */
     overlay?: boolean;
+    /**
+     * @description.en Click on the mask to trigger the event
+     * @description.zh 点击蒙层触发事件
+     * @default undefined
+     */
     onClickOverlay?: (event: {
+        /**
+         * @description.en type
+         * @description.zh 类型
+         * @default undefined
+         */
         type: 'clickoverlay';
     }) => void;
+    /**
+     * @description.en Custom mask layer styles
+     * @description.zh 自定义遮罩层样式
+     * @default undefined
+     */
     overlayStyle?: React.CSSProperties;
+    /**
+     * @description.en Custom pop-up layer styles
+     * @description.zh 自定义弹出层样式
+     * @default undefined
+     */
     customStyle?: React.CSSProperties;
+    /**
+     * @description.en Pop-up layer pop-up position
+     * @description.zh 弹出层弹出位置
+     * @default center
+     */
     position?: 'top' | 'center' | 'bottom';
 }

package/lib/Motion/index.md

@@ -4,6 +4,7 @@ nav:
   path: /components
 group:
   title: 视图容器
+hide: true
 ---
 
 # Motion
@@ -13,7 +14,7 @@ group:
 ## 导入
 
 ```js
-import { Motion } from '@ray-js/components';
+import { Motion } from '@ray-js/components'
 ```
 
 ## 示例代码

package/lib/Motion/props.d.ts

@@ -30,6 +30,11 @@ export interface MotionProps extends BaseProps {
      * @default () => {}
      */
     onHide?: () => void;
+    /**
+     * @description.en delay
+     * @description.zh 延迟
+     * @default undefined
+     */
     delay: number;
     children: any;
 }

package/lib/Picker/index.md

@@ -18,6 +18,8 @@ import { Picker } from '@ray-js/components'
 
 ## 示例代码
 
+> picker 相关组件效果请使用手机模式下查看
+
 <code src="./demos/basic.tsx" title="单选" background="#f2f4f6"  />
 <code src="./demos/multiSelector.tsx" title="多选" background="#f2f4f6"  />
 

package/lib/Picker/props.d.ts

@@ -1,31 +1,94 @@
-/// <reference types="react" />
 import { BaseProps } from '../types';
 import { TouchEventHandler } from '@ray-js/framework-shared';
 declare type ChangeEvent = (e: {
+    /**
+     * @description.en type
+     * @description.zh 类型
+     * @default undefined
+     */
     type: 'change';
+    /**
+     * @description.en value
+     * @description.zh value
+     * @default undefined
+     */
     value: number | number[];
     origin?: any;
 }) => void;
 declare type CancelEvent = (e: {
+    /**
+     * @description.en type
+     * @description.zh 类型
+     * @default undefined
+     */
     type: 'cancel';
     origin: any;
 }) => void;
 declare type ColumnChangeEvent = (e: {
+    /**
+     * @description.en type
+     * @description.zh 类型
+     * @default undefined
+     */
     type: 'columnchange';
+    /**
+     * @description.en value
+     * @description.zh value
+     * @default undefined
+     */
     value: number;
     column: number;
     origin: any;
 }) => void;
 export interface PickerProps extends BaseProps, TouchEventHandler {
+    /**
+     * @description.en disabled
+     * @description.zh 是否禁用
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * @description.en Option data source
+     * @description.zh 选择项数据源
+     * @default undefined
+     */
     range: string[] | string[][];
+    /**
+     * @description.en Indicates the number in the range selected (subscripts start at 0)
+     * @description.zh 表示选择了 range 中的第几个（下标从 0 开始）
+     * @default 0
+     */
     value?: number[] | number;
+    /**
+     * @description.en onChange
+     * @description.zh 点击触发
+     * @default undefined
+     */
     onChange?: ChangeEvent;
+    /**
+     * @description.en onCancel
+     * @description.zh 取消选择时触发
+     * @default undefined
+     */
     onCancel?: CancelEvent;
+    /**
+     * @description.en onColumnChange
+     * @description.zh 列改变时触发
+     * @default undefined
+     */
     onColumnChange?: ColumnChangeEvent;
+    /**
+     * @description.en confirmText
+     * @description.zh 确认文本
+     * @default 确认
+     */
     confirmText?: string;
+    /**
+     * @description.en cancelText
+     * @description.zh 取消文本
+     * @default 取消
+     */
     cancelText?: string;
-    children?: React.ReactNode | string;
 }
 export declare const IDefaultPickerProps: {
     cancelText: string;

package/lib/PickerView/props.d.ts

@@ -1,13 +1,40 @@
-/// <reference types="react" />
 import { BaseProps } from '../types';
 export interface PickerViewProps extends BaseProps {
+    /**
+     * @description.en Indicates the number in the range selected (subscripts start at 0)
+     * @description.zh 表示选择了 range 中的第几个（下标从 0 开始）
+     * @default 0
+     */
     value?: number | number[];
+    /**
+     * @description.en Selector font size
+     * @description.zh 选择器字体大小
+     * @default undefined
+     */
     fontSize?: number;
+    /**
+     * @description.en Option data source
+     * @description.zh 选择项数据源
+     * @default undefined
+     */
     range?: string[] | string[][];
+    /**
+     * @description.en onChange
+     * @description.zh 选择时触发
+     * @default undefined
+     */
     onChange?: (e: {
+        /**
+         * @description.en type
+         * @description.zh 类型
+         * @default undefined
+         */
         type: 'change';
+        /**
+         * @description.en value
+         * @description.zh 价值
+         * @default undefined
+         */
         value: number | number[];
-        origin?: any;
     }) => void;
-    children?: React.ReactNode;
 }

package/lib/RadialGradient/index.md

@@ -4,6 +4,7 @@ nav:
   path: /components
 group:
   title: 视图容器
+hide: true
 ---
 
 # RadialGradient
@@ -13,7 +14,7 @@ RadialGradient 为径向渐变，与线性渐变相似，只是它是从一个
 ## 导入
 
 ```js
-import { RadialGradient } from '@ray-js/components';
+import { RadialGradient } from '@ray-js/components'
 ```
 
 ## 示例代码

package/lib/RadialGradient/props.d.ts

@@ -5,7 +5,17 @@ interface StopsProps {
     stopColor: string;
 }
 export interface RadialGradientProps extends BaseProps {
+    /**
+     * @description.en width
+     * @description.zh 宽度
+     * @default undefined
+     */
     width: number;
+    /**
+     * @description.en height
+     * @description.zh 高度
+     * @default undefined
+     */
     height: number;
     /**
      * @description.zh 最外侧圆的x轴坐标点

package/lib/Radio/props.d.ts

@@ -1,7 +1,27 @@
 import { BaseProps, TouchEventHandler } from '../types';
 export interface RadioProps extends BaseProps, TouchEventHandler {
+    /**
+     * @description.en Radio id. When the radio is selected, the radio.group change event carries the value of the radio
+     * @description.zh radio 标识。当该 radio 选中时，Radio.Group 的 change 事件会携带 radio 的 value
+     * @default undefined
+     */
     value?: string;
+    /**
+     * @description.en Whether it is currently selected can be set to default
+     * @description.zh 当前是否选中，可用来设置默认选中
+     * @default false
+     */
     checked?: boolean;
+    /**
+     * @description.en disabled
+     * @description.zh 是否禁用
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * @description.en color
+     * @description.zh 颜色
+     * @default '#007AFF'
+     */
     color?: string;
 }

package/lib/RadioGroup/props.d.ts

@@ -1,16 +1,44 @@
-/// <reference types="react" />
 import { BaseProps, TouchEventHandler } from '../types';
 import { RadioProps } from '../Radio/props';
 export declare type RadioGroupOption = RadioProps & {
     label: string;
 };
 export interface RadioGroupProps extends BaseProps, TouchEventHandler {
-    options?: RadioGroupOption[];
+    /**
+     * @description.en options
+     * @description.zh 组项
+     * @default undefined
+     */
+    options: RadioGroupOption[];
+    /**
+     * @description.en name
+     * @description.zh 姓名
+     * @default undefined
+     */
     name?: string;
+    /**
+     * @description.en disabled
+     * @description.zh 是否禁用
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * @description.en onChange
+     * @description.zh 选中项发生改变时触发 change 事件
+     * @default undefined
+     */
     onChange?: (event: {
+        /**
+         * @description.en type
+         * @description.zh 类型
+         * @default undefined
+         */
         type: 'change';
+        /**
+         * @description.en value
+         * @description.zh 价值
+         * @default undefined
+         */
         value: string[];
     }) => void;
-    children?: React.ReactNode;
 }