@ray-js/components 0.4.0 → 0.4.4-beta-1

package/lib/PickerViewColumn/PickerViewColumn.wechat.d.ts

@@ -1,4 +1,4 @@
 import * as React from 'react';
-import { PickerViewProps } from './props';
-declare const Picker: React.FC<PickerViewProps>;
-export default Picker;
+import { PickerViewColumnProps } from './props';
+declare const PickerViewColumn: React.FC<PickerViewColumnProps>;
+export default PickerViewColumn;

package/lib/PickerViewColumn/PickerViewColumn.wechat.js

@@ -1,72 +1,22 @@
-import { PickerView as _PickerView } from "@remax/wechat/esm/hostComponents/PickerView/index";
 import _extends from "@babel/runtime/helpers/esm/extends";
-import { PickerViewColumn as _PickerViewColumn } from "@remax/wechat/esm/hostComponents/PickerViewColumn/index";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "style", "id", "onChange", "range"];
-import "core-js/modules/es.array.map.js";
+var _excluded = ["className", "style", "id"];
 import clsx from 'clsx';
 import * as React from 'react';
 import { inlineStyle } from '@ray-js/framework-shared';
-import { View } from '@ray-js/components';
-import styles from './index.module.less';
+import { PickerViewColumn as RemaxPickerViewColumn } from '@ray-js/remax-tuya';
 
-var Picker = function (props) {
+var PickerViewColumn = function (props) {
   var className = props.className,
       style = props.style,
       id = props.id,
-      onChange = props.onChange,
-      range = props.range,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  var countArray = function (array) {
-    var countArr = 1;
-
-    var multiarr = function (arr) {
-      for (var i = 0; i < arr.length; i++) {
-        if (arr[i] instanceof Array) {
-          countArr++;
-          arr = arr[i];
-          multiarr(arr);
-        }
-      }
-
-      return countArr;
-    };
-
-    return multiarr(array);
-  };
-
-  return /*#__PURE__*/React.createElement(_PickerView, _extends({
-    onChange: function handleChange(e) {
-      onChange === null || onChange === void 0 ? void 0 : onChange({
-        type: 'change',
-        value: e.detail.value,
-        origin: e
-      });
-    },
+  return /*#__PURE__*/React.createElement(RemaxPickerViewColumn, _extends({
+    id: id,
     style: inlineStyle(style),
-    className: clsx(styles.pickerViewWrp, className)
-  }, restProps), function renderPickerColumn() {
-    if (countArray(props.range) > 1) {
-      return props.range.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(_PickerViewColumn, {
-          key: index
-        }, item.map(function (i, id) {
-          return /*#__PURE__*/React.createElement(View, {
-            key: id,
-            className: styles.pcWrp
-          }, i);
-        }));
-      });
-    } else {
-      return /*#__PURE__*/React.createElement(_PickerViewColumn, null, range.map(function (item, index) {
-        return /*#__PURE__*/React.createElement(View, {
-          key: index,
-          className: styles.pcWrp
-        }, item);
-      }));
-    }
-  }());
+    className: clsx('ray-picker-view-column', className)
+  }, restProps));
 };
 
-export default Picker;
+export default PickerViewColumn;

package/lib/PickerViewColumn/index.md

@@ -8,14 +8,16 @@ group:
 
 # PickerViewColumn
 
-滚动选择器子项。需要配合 `<PickerView />` 使用, 仅可放置于 PickerView 中，其高度会自动设置成与 PickerView 的选中框的高度一致（仅支持 web）
+滚动选择器子项。需要配合 `<PickerView />` 使用, 仅可放置于 PickerView 中，其高度会自动设置成与 PickerView 的选中框的高度一致。
 
 ## 示例代码
 
-请参考 PickerView 组件
-
 ## 导入
 
 ```js
 import { PickerViewColumn } from '@ray-js/components'
 ```
+
+## 代码演示
+
+<code src="./demos/basicChildren.tsx" title="单选 - 子节点" background="#f2f4f6"  />

package/lib/PickerViewColumn/props.d.ts

@@ -1,16 +1,5 @@
 /// <reference types="react" />
-import { BaseProps } from '../types';
-import { TouchEventHandler } from '@ray-js/framework-shared';
+import { BaseProps, TouchEventHandler } from '../types';
 export interface PickerViewColumnProps extends BaseProps, TouchEventHandler {
     children?: React.ReactNode | string;
 }
-export interface PickerViewProps extends BaseProps {
-    value?: number | number[];
-    fontSize?: number;
-    range?: string[] | string[][];
-    onChange?: (e: {
-        type: 'change';
-        value: number | number[];
-        origin?: any;
-    }) => void;
-}

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/RadioGroup.tuya.js

@@ -10,13 +10,16 @@ var RadioGroup = function (props) {
       name = props.name,
       disabled = props.disabled,
       _props$onChange = props.onChange,
-      onChange = _props$onChange === void 0 ? function () {} : _props$onChange;
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      children = props.children;
   return /*#__PURE__*/React.createElement(RemaxRadioGroup, {
     name: name,
     onChange: function handleOnChange(e) {
       !disabled && onChange(e);
     }
-  }, function renderOptions() {
+  }, function renderChildren() {
+    return children;
+  }() || function renderOptions() {
     return options.map(function (item, index) {
       var _item$checked;
 

package/lib/RadioGroup/RadioGroup.wechat.js

@@ -10,13 +10,16 @@ var RadioGroup = function (props) {
       name = props.name,
       disabled = props.disabled,
       _props$onChange = props.onChange,
-      onChange = _props$onChange === void 0 ? function () {} : _props$onChange;
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      children = props.children;
   return /*#__PURE__*/React.createElement(_RadioGroup, {
     name: name,
     onChange: function handleOnChange(e) {
       !disabled && onChange(e);
     }
-  }, function renderOptions() {
+  }, function renderChildren() {
+    return children;
+  }() || function renderOptions() {
     return options.map(function (item, index) {
       var _item$checked;
 

package/lib/RadioGroup/index.md

@@ -19,7 +19,7 @@ import { RadioGroup } from '@ray-js/components'
 ## 示例代码
 
 <code src="./demos/group.tsx" title="一组数据 - 选项" background="#f2f4f6" height="500px" />
-<code src="./demos/groupChildren.tsx" title="一组数据 - 子节点(仅支持web端)" background="#f2f4f6" height="500px" />
+<code src="./demos/groupChildren.tsx" title="一组数据 - 子节点" background="#f2f4f6" height="500px" />
 <code src="./demos/groupDisabled.tsx" title="全部禁止" background="#f2f4f6" height="500px" />
 
 ## Props

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;
 }

package/lib/ScrollView/props.d.ts

@@ -3,23 +3,78 @@ import { NativeScrollEvent, NativeSyntheticEvent } from 'react-native';
 import { GenericEvent as WxScrollEvent } from '@remax/wechat';
 export interface ScrollViewProps extends BaseProps {
     /** (default: false) 允许横向滚动 1.0.0 */
+    /**
+     * @description.en Allow horizontal scrolling
+     * @description.zh 允许横向滚动
+     * @default false
+     */
     scrollX?: boolean;
     /** (default: false) 允许纵向滚动 1.0.0 */
+    /**
+     * @description.en Allow longitudinal roll
+     * @description.zh 允许纵向滚动
+     * @default false
+     */
     scrollY?: boolean;
     /** 设置竖向滚动条位置 1.0.0 */
+    /**
+     * @description.en Sets the vertical scroll bar position
+     * @description.zh 设置竖向滚动条位置
+     * @default undefined
+     */
     scrollTop?: number;
     /** 设置横向滚动条位置 1.0.0 */
+    /**
+     * @description.en Sets the horizontal scroll bar position
+     * @description.zh 设置横向滚动条位置
+     * @default undefined
+     */
     scrollLeft?: number;
-    /** (default: 50) 距顶部/左边多远时，触发 onScrollToUpper 事件 1.0.0 */
+    /** (default: 50)  */
+    /**
+     * @description.en How far from the top/left is the on Scroll To Upper event 1.0.0 triggered
+     * @description.zh 距顶部/左边多远时，触发 onScrollToUpper 事件 1.0.0
+     * @default 50
+     */
     upperThreshold?: number;
     /** (default: 50) 距底部/右边多远时，触发 onScrollToLower 事件 1.0.0 */
+    /**
+     * @description.en The on Scroll To Lower event 1.0.0 is triggered when it is far from the bottom/right
+     * @description.zh 距底部/右边多远时，触发 onScrollToLower 事件 1.0.0
+     * @default 50
+     */
     lowerThreshold?: number;
     /** (default: false) 在设置滚动条位置时使用动画过渡 1.0.0 */
+    /**
+     * @description.en Animate transition 1.0.0 when setting the scrollbar position
+     * @description.zh 在设置滚动条位置时使用动画过渡 1.0.0
+     * @default false
+     */
     scrollWithAnimation?: boolean;
     /** 滚动时触发，event.detail = {scrollLeft, scrollTop, scrollHeight, scrollWidth, deltaX, deltaY} 1.0.0 */
+    /**
+     * @description.en onScroll
+     * @description.zh 滚动时触发
+     * @default undefined
+     */
     onScroll?: (event: {
+        /**
+         * @description.en type
+         * @description.zh 类型
+         * @default undefined
+         */
         type: 'scroll';
+        /**
+         * @description.en Horizontal scroll bar position
+         * @description.zh 横向滚动条位置
+         * @default undefined
+         */
         scrollLeft: number;
+        /**
+         * @description.en Vertical scroll bar position
+         * @description.zh 竖向滚动条位置
+         * @default undefined
+         */
         scrollTop: number;
         scrollHeight: number;
         scrollWidth: number;
@@ -27,14 +82,32 @@ export interface ScrollViewProps extends BaseProps {
         deltaY: number;
         origin: NativeSyntheticEvent<NativeScrollEvent> | WxScrollEvent;
     }) => any;
-    /** 滚动到顶部/左边时触发 1.0.0 */
+    /**
+     * @description.en Trigger 1.0.0 when scrolling to the top/left
+     * @description.zh 滚动到顶部/左边时触发 1.0.0
+     * @default undefined
+     */
     onScrollToUpper?: (event: {
+        /**
+         * @description.en type
+         * @description.zh 类型
+         * @default undefined
+         */
         type: 'scrolltoupper';
         direction: 'top' | 'left';
         origin: NativeSyntheticEvent<NativeScrollEvent> | WxScrollEvent | Event;
     }) => any;
-    /** 滚动到底部/右边时触发 1.0.0 */
+    /**
+     * @description.en Triggered when scrolling to the bottom/right
+     * @description.zh 滚动到底部/右边时触发
+     * @default undefined
+     */
     onScrollToLower?: (event: {
+        /**
+         * @description.en type
+         * @description.zh 类型
+         * @default undefined
+         */
         type: 'scrolltolower';
         direction: 'bottom' | 'right';
         origin: NativeSyntheticEvent<NativeScrollEvent> | WxScrollEvent | Event;

package/lib/Slider/props.d.ts

@@ -1,22 +1,102 @@
 import { BaseProps } from '../types';
 export interface SliderProps extends BaseProps {
+    /**
+     * @description.en min
+     * @description.zh 最小值
+     * @default 0
+     */
     min?: number;
+    /**
+     * @description.en max
+     * @description.zh 最大值
+     * @default 100
+     */
     max?: number;
+    /**
+     * @description.en The value must be greater than 0 and divisible by (max-min)
+     * @description.zh 步长，取值必须大于 0，并且可被(max - min)整除
+     * @default 1
+     */
     step?: number;
+    /**
+     * @description.en disabled
+     * @description.zh 是否禁用
+     * @default false
+     */
     disabled?: boolean;
+    /**
+     * @description.en value
+     * @description.zh 当前取值
+     * @default 0
+     */
     value?: number;
+    /**
+     * @description.en activeColor
+     * @description.zh 已选择的颜色
+     * @default #007aff
+     */
     activeColor?: string;
+    /**
+     * @description.en backgroundColor
+     * @description.zh 背景条的颜色
+     * @default rgba(0,0,0,.2)
+     */
     backgroundColor?: string;
+    /**
+     * @description.en blockSize
+     * @description.zh 滑块的大小，取值范围为 12 - 28
+     * @default 28
+     */
     blockSize?: number;
+    /**
+     * @description.en blockColor
+     * @description.zh 滑块的颜色
+     * @default #ffffff
+     */
     blockColor?: string;
+    /**
+     * @description.en showValue
+     * @description.zh 是否显示当前 value
+     * @default false
+     */
     showValue?: boolean;
+    /**
+     * @description.en onChange
+     * @description.zh 完成一次拖动后触发的事件，event.detail = {value}
+     * @default undefined
+     */
     onChange?: (event: {
+        /**
+         * @description.en type
+         * @description.zh 类型
+         * @default undefined
+         */
         type: string;
+        /**
+         * @description.en value
+         * @description.zh value
+         * @default undefined
+         */
         value: number;
         origin: any;
     }) => void;
+    /**
+     * @description.en onChanging
+     * @description.zh 拖动过程中触发的事件，event.detail = {value}
+     * @default undefined
+     */
     onChanging?: (event: {
+        /**
+         * @description.en type
+         * @description.zh 类型
+         * @default undefined
+         */
         type: string;
+        /**
+         * @description.en value
+         * @description.zh 价值
+         * @default undefined
+         */
         value: number;
         origin: any;
     }) => void;

package/lib/Swiper/Swiper.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "style", "className", "current", "dataSource", "onAfterChange", "onChange", "renderItem"];
+var _excluded = ["id", "style", "className", "current", "dataSource", "onAfterChange", "onChange", "renderItem", "children"];
 import "core-js/modules/es.array.map.js";
 // import clsx from 'clsx';
 import * as React from 'react';
@@ -18,6 +18,7 @@ function Swiper(props) {
       onAfterChange = props.onAfterChange,
       onChange = props.onChange,
       renderItem = props.renderItem,
+      children = props.children,
       restProps = _objectWithoutProperties(props, _excluded);
 
   var _React$useState = React.useState(current),
@@ -56,12 +57,16 @@ function Swiper(props) {
     // @ts-ignore
     React.createElement("ty-swiper", _extends({
       ref: currentNode
-    }, handleProps(restProps)), dataSource.map(function (item, index) {
-      // @ts-ignore
-      return /*#__PURE__*/React.createElement("ty-swiper-item", {
-        key: index
-      }, renderItem(item, index));
-    }))
+    }, handleProps(restProps)), function renderChildren() {
+      return children;
+    }() || function renderSwiperItem() {
+      return dataSource.map(function (item, index) {
+        // @ts-ignore
+        return /*#__PURE__*/React.createElement("ty-swiper-item", {
+          key: index
+        }, renderItem(item, index));
+      });
+    }())
   );
 }
 

package/lib/Swiper/Swiper.tuya.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "style", "className", "current", "dataSource", "onAfterChange", "onChange", "renderItem"];
+var _excluded = ["id", "style", "className", "current", "dataSource", "onAfterChange", "onChange", "renderItem", "children"];
 import "core-js/modules/es.array.map.js";
 import clsx from 'clsx';
 import * as React from 'react';
@@ -19,6 +19,7 @@ function Swiper(props) {
       onAfterChange = props.onAfterChange,
       onChange = props.onChange,
       renderItem = props.renderItem,
+      children = props.children,
       restProps = _objectWithoutProperties(props, _excluded);
 
   var _React$useState = React.useState(current),
@@ -44,11 +45,15 @@ function Swiper(props) {
       onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(event);
     },
     current: internalCurrent
-  }, propsAlias(restProps, SwiperPropsAlias)), dataSource.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(RemaxSwiperItem, {
-      key: index
-    }, renderItem(item, index));
-  }));
+  }, propsAlias(restProps, SwiperPropsAlias)), function () {
+    return children;
+  }() || function () {
+    return dataSource.map(function (item, index) {
+      return /*#__PURE__*/React.createElement(RemaxSwiperItem, {
+        key: index
+      }, renderItem(item, index));
+    });
+  }());
 }
 
 Swiper.defaultProps = defaultSwiperProps;

package/lib/Swiper/Swiper.web.js

@@ -1,7 +1,7 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "style", "className", "current", "dataSource", "onAfterChange", "onChange", "renderItem"];
+var _excluded = ["id", "style", "className", "current", "dataSource", "onAfterChange", "onChange", "renderItem", "children"];
 import "core-js/modules/es.array.map.js";
 // import clsx from 'clsx';
 import * as React from 'react';
@@ -18,6 +18,7 @@ function Swiper(props) {
       onAfterChange = props.onAfterChange,
       onChange = props.onChange,
       renderItem = props.renderItem,
+      children = props.children,
       restProps = _objectWithoutProperties(props, _excluded);
 
   var _React$useState = React.useState(current),
@@ -56,12 +57,16 @@ function Swiper(props) {
     // @ts-ignore
     React.createElement("ty-swiper", _extends({
       ref: currentNode
-    }, handleProps(restProps)), dataSource.map(function (item, index) {
-      // @ts-ignore
-      return /*#__PURE__*/React.createElement("ty-swiper-item", {
-        key: index
-      }, renderItem(item, index));
-    }))
+    }, handleProps(restProps)), function renderChildren() {
+      return children;
+    }() || function renderSwiperItem() {
+      return dataSource.map(function (item, index) {
+        // @ts-ignore
+        return /*#__PURE__*/React.createElement("ty-swiper-item", {
+          key: index
+        }, renderItem(item, index));
+      });
+    }())
   );
 }
 

package/lib/Swiper/Swiper.wechat.js

@@ -3,7 +3,7 @@ import _extends from "@babel/runtime/helpers/esm/extends";
 import { SwiperItem as _SwiperItem } from "@remax/wechat/esm/hostComponents/SwiperItem/index";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "style", "className", "current", "dataSource", "onAfterChange", "onChange", "renderItem"];
+var _excluded = ["id", "style", "className", "current", "dataSource", "onAfterChange", "onChange", "renderItem", "children"];
 import "core-js/modules/es.array.map.js";
 import clsx from 'clsx';
 import * as React from 'react';
@@ -20,6 +20,7 @@ function Swiper(props) {
       onAfterChange = props.onAfterChange,
       onChange = props.onChange,
       renderItem = props.renderItem,
+      children = props.children,
       restProps = _objectWithoutProperties(props, _excluded);
 
   var _React$useState = React.useState(current),
@@ -45,11 +46,15 @@ function Swiper(props) {
       onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(event);
     },
     current: internalCurrent
-  }, propsAlias(restProps, SwiperPropsAlias)), dataSource.map(function (item, index) {
-    return /*#__PURE__*/React.createElement(_SwiperItem, {
-      key: index
-    }, renderItem(item, index));
-  }));
+  }, propsAlias(restProps, SwiperPropsAlias)), function () {
+    return children;
+  }() || function () {
+    return dataSource.map(function (item, index) {
+      return /*#__PURE__*/React.createElement(_SwiperItem, {
+        key: index
+      }, renderItem(item, index));
+    });
+  }());
 }
 
 Swiper.defaultProps = defaultSwiperProps;