@ray-js/components 0.3.27 → 0.3.30

package/lib/PageContainer/PageContainer.js

@@ -1 +1 @@
-Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var React=_interopRequireWildcard(require("react"));var _props=require("./props");var _jsxFileName="/drone/src/packages/components/src/PageContainer/PageContainer.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function PageContainer(){return React.createElement("div",{__self:this,__source:{fileName:_jsxFileName,lineNumber:7,columnNumber:10}},"\u6682\u672A\u5B9E\u73B0");}PageContainer.defaultProps=_props.defaultPageContainerProps;var _default=PageContainer;exports.default=_default;
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _react=_interopRequireWildcard(require("react"));var _ahooks=require("ahooks");var _props=require("./props");var _handleProps=_interopRequireDefault(require("../utils/handleProps"));var _this=this,_jsxFileName="/drone/src/packages/components/src/PageContainer/PageContainer.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}var PageContainer=function(props){var children=props.children;var currentNode=(0,_react.useRef)(null);(0,_ahooks.useEventListener)('clickoverlay',function(e){var _props$onClickOverlay;(_props$onClickOverlay=props.onClickOverlay)===null||_props$onClickOverlay===void 0?void 0:_props$onClickOverlay.call(props,{type:'clickoverlay',origin:e});},{target:currentNode});(0,_ahooks.useEventListener)('beforeenter',function(e){var _props$onBeforeEnter;(_props$onBeforeEnter=props.onBeforeEnter)===null||_props$onBeforeEnter===void 0?void 0:_props$onBeforeEnter.call(props,{type:'beforeenter',origin:e});},{target:currentNode});(0,_ahooks.useEventListener)('enter',function(e){var _props$onEnter;(_props$onEnter=props.onEnter)===null||_props$onEnter===void 0?void 0:_props$onEnter.call(props,{type:'enter',origin:e});},{target:currentNode});(0,_ahooks.useEventListener)('afterenter',function(e){var _props$onAfterEnter;(_props$onAfterEnter=props.onAfterEnter)===null||_props$onAfterEnter===void 0?void 0:_props$onAfterEnter.call(props,{type:'afterenter',origin:e});},{target:currentNode});(0,_ahooks.useEventListener)('beforeleave',function(e){var _props$onBeforeLeave;(_props$onBeforeLeave=props.onBeforeLeave)===null||_props$onBeforeLeave===void 0?void 0:_props$onBeforeLeave.call(props,{type:'beforeleave',origin:e});},{target:currentNode});(0,_ahooks.useEventListener)('leave',function(e){var _props$onLeave;(_props$onLeave=props.onLeave)===null||_props$onLeave===void 0?void 0:_props$onLeave.call(props,{type:'leave',origin:e});},{target:currentNode});(0,_ahooks.useEventListener)('afterleave',function(e){var _props$onAfterLeave;(_props$onAfterLeave=props.onAfterLeave)===null||_props$onAfterLeave===void 0?void 0:_props$onAfterLeave.call(props,{type:'afterleave',origin:e});},{target:currentNode});return _react.default.createElement("ty-page-container",(0,_extends2.default)({},(0,_handleProps.default)(props),{ref:currentNode,__self:_this,__source:{fileName:_jsxFileName,lineNumber:69,columnNumber:5}}),children);};PageContainer.defaultProps=_props.defaultPageContainerProps;var _default=PageContainer;exports.default=_default;

package/lib/PageContainer/PageContainer.web.js

@@ -1,10 +1,90 @@
-// import clsx from 'clsx';
-import * as React from 'react';
+import _extends from "@babel/runtime/helpers/esm/extends";
+import React, { useRef } from 'react';
+import { useEventListener } from 'ahooks';
 import { defaultPageContainerProps } from './props';
+import handleProps from '../utils/handleProps';
 
-function PageContainer() {
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B0");
-}
+var PageContainer = function (props) {
+  var children = props.children;
+  var currentNode = useRef(null);
+  useEventListener('clickoverlay', function (e) {
+    var _props$onClickOverlay;
+
+    (_props$onClickOverlay = props.onClickOverlay) === null || _props$onClickOverlay === void 0 ? void 0 : _props$onClickOverlay.call(props, {
+      type: 'clickoverlay',
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('beforeenter', function (e) {
+    var _props$onBeforeEnter;
+
+    (_props$onBeforeEnter = props.onBeforeEnter) === null || _props$onBeforeEnter === void 0 ? void 0 : _props$onBeforeEnter.call(props, {
+      type: 'beforeenter',
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('enter', function (e) {
+    var _props$onEnter;
+
+    (_props$onEnter = props.onEnter) === null || _props$onEnter === void 0 ? void 0 : _props$onEnter.call(props, {
+      type: 'enter',
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('afterenter', function (e) {
+    var _props$onAfterEnter;
+
+    (_props$onAfterEnter = props.onAfterEnter) === null || _props$onAfterEnter === void 0 ? void 0 : _props$onAfterEnter.call(props, {
+      type: 'afterenter',
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('beforeleave', function (e) {
+    var _props$onBeforeLeave;
+
+    (_props$onBeforeLeave = props.onBeforeLeave) === null || _props$onBeforeLeave === void 0 ? void 0 : _props$onBeforeLeave.call(props, {
+      type: 'beforeleave',
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('leave', function (e) {
+    var _props$onLeave;
+
+    (_props$onLeave = props.onLeave) === null || _props$onLeave === void 0 ? void 0 : _props$onLeave.call(props, {
+      type: 'leave',
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('afterleave', function (e) {
+    var _props$onAfterLeave;
+
+    (_props$onAfterLeave = props.onAfterLeave) === null || _props$onAfterLeave === void 0 ? void 0 : _props$onAfterLeave.call(props, {
+      type: 'afterleave',
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-page-container", _extends({}, handleProps(props), {
+      ref: currentNode
+    }), children)
+  );
+};
 
 PageContainer.defaultProps = defaultPageContainerProps;
 export default PageContainer;

package/lib/PageContainer/index.md

@@ -13,7 +13,7 @@ group:
 ## 导入
 
 ```js
-import { PageContainer } from '@ray-js/components';
+import { PageContainer } from '@ray-js/components'
 ```
 
 ## 代码演示
@@ -22,21 +22,21 @@ import { PageContainer } from '@ray-js/components';
 
 ## Props
 
-| 属性           | 类型        | 默认值 | 说明                                       | 支持平台   |
-| -------------- | ----------- | ------ | ------------------------------------------ | ---------- |
-| className      | string      |        | 样式名                                     | 涂鸦、微信 |
-| show           | boolean     | false  | 是否显示容器组件                           | 涂鸦、微信 |
-| duration       | number      | 300    | 动画时长，单位毫秒                         | 涂鸦、微信 |
-| zIndex         | number      | 100    | z-index 层级                               | 涂鸦、微信 |
-| overlay        | boolean     | true   | 是否显示遮罩层                             | 涂鸦、微信 |
-| position       | string      | bottom | 弹出位置，可选值为 top bottom right center | 涂鸦、微信 |
-| round          | boolean     | false  | 是否显示圆角                               | 涂鸦、微信 |
-| overlayStyle   | string      |        | 自定义遮罩层样式                           | 涂鸦、微信 |
-| customStyle    | string      |        | 自定义弹出层样式                           | 涂鸦、微信 |
-| onBeforeEnter  | eventhandle |        | 进入前触发                                 | 涂鸦、微信 |
-| onEnter        | eventhandle |        | 进入中触发                                 | 涂鸦、微信 |
-| onAfterEnter   | eventhandle |        | 进入后触发                                 | 涂鸦、微信 |
-| onBeforeLeave  | eventhandle |        | 离开前触发                                 | 涂鸦、微信 |
-| onLeave        | eventhandle |        | 离开中触发                                 | 涂鸦、微信 |
-| onAfterLeave   | eventhandle |        | 离开后触发                                 | 涂鸦、微信 |
-| onClickOverlay | eventhandle |        | 点击遮罩层时触发                           | 涂鸦、微信 |
+| 属性 | 类型 | 默认值 | 说明 | 支持平台 |
+| --- | --- | --- | --- | --- |
+| className | string |  | 样式名 | 涂鸦、微信、Web |
+| show | boolean | false | 是否显示容器组件 | 涂鸦、微信、Web |
+| duration | number | 300 | 动画时长，单位毫秒 | 涂鸦、微信、Web |
+| zIndex | number | 100 | z-index 层级 | 涂鸦、微信、Web |
+| overlay | boolean | true | 是否显示遮罩层 | 涂鸦、微信、Web |
+| position | string | bottom | 弹出位置，可选值为 top bottom right center | 涂鸦、微信、Web |
+| round | boolean | false | 是否显示圆角 | 涂鸦、微信、Web |
+| overlayStyle | string |  | 自定义遮罩层样式 | 涂鸦、微信、Web |
+| customStyle | string |  | 自定义弹出层样式 | 涂鸦、微信、Web |
+| onBeforeEnter | eventhandle |  | 进入前触发 | 涂鸦、微信、Web |
+| onEnter | eventhandle |  | 进入中触发 | 涂鸦、微信、Web |
+| onAfterEnter | eventhandle |  | 进入后触发 | 涂鸦、微信、Web |
+| onBeforeLeave | eventhandle |  | 离开前触发 | 涂鸦、微信、Web |
+| onLeave | eventhandle |  | 离开中触发 | 涂鸦、微信、Web |
+| onAfterLeave | eventhandle |  | 离开后触发 | 涂鸦、微信、Web |
+| onClickOverlay | eventhandle |  | 点击遮罩层时触发 | 涂鸦、微信、Web |

package/lib/PageContainer/props.d.ts

@@ -1,6 +1,11 @@
 import { BaseProps } from '../types';
 import * as React from 'react';
 import { BaseEvent } from '@ray-js/remax-tuya/src/types/component';
+export declare type PageContainerEventType = {
+    type: string;
+    value?: any;
+    origin: BaseEvent;
+};
 export declare type PageContainerProps = BaseProps & {
     /** 文本是否可选 */
     show?: boolean;
@@ -11,13 +16,13 @@ export declare type PageContainerProps = BaseProps & {
     round?: boolean;
     overlayStyle?: string;
     customStyle?: string;
-    onBeforeEnter?: (event: BaseEvent) => any;
-    onEnter?: (event: BaseEvent) => any;
-    onAfterEnter?: (event: BaseEvent) => any;
-    onBeforeLeave?: (event: BaseEvent) => any;
-    onLeave?: (event: BaseEvent) => any;
-    onAfterLeave?: (event: BaseEvent) => any;
-    onClickOverlay?: (event: BaseEvent) => any;
+    onBeforeEnter?: (event: PageContainerEventType) => void;
+    onEnter?: (event: PageContainerEventType) => void;
+    onAfterEnter?: (event: PageContainerEventType) => void;
+    onBeforeLeave?: (event: PageContainerEventType) => void;
+    onLeave?: (event: PageContainerEventType) => void;
+    onAfterLeave?: (event: PageContainerEventType) => void;
+    onClickOverlay?: (event: PageContainerEventType) => void;
     children?: React.ReactNode | string;
 };
 export declare const defaultPageContainerProps: Partial<PageContainerProps>;

package/lib/Picker/Picker.js

@@ -1,10 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
+import { useTouch } from '@ray-js/framework-shared';
+import { useEventListener } from 'ahooks';
+import handleProps from '../utils/handleProps';
+var countArr = 1;
 
 var Picker = function (props) {
-  var disabled = props.disabled,
-      className = props.className,
-      style = props.style;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B011");
+  var onLongClick = props.onLongClick,
+      onTouchStart = props.onTouchStart,
+      onTouchMove = props.onTouchMove,
+      onTouchEnd = props.onTouchEnd,
+      onTouchCancel = props.onTouchCancel,
+      onClick = props.onClick,
+      children = props.children;
+  var currentNode = React.useRef(null);
+  useEventListener('change', function (e) {
+    var _props$onChange;
+
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
+      type: 'change',
+      value: e.detail.value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('cancel', function (e) {
+    var _props$onCancel;
+
+    (_props$onCancel = props.onCancel) === null || _props$onCancel === void 0 ? void 0 : _props$onCancel.call(props, {
+      type: 'cancel',
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+
+  var _useTouch = useTouch({
+    onLongClick: onLongClick,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    onTouchCancel: onTouchCancel,
+    onClick: onClick
+  }),
+      _useTouch2 = _slicedToArray(_useTouch, 2),
+      handlers = _useTouch2[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 (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-picker", _extends({}, handleProps(props), handlers, {
+      ref: currentNode,
+      mode: multiarr(props.range) > 1 ? 'multiSelector' : 'selector'
+    }), children)
+  );
 };
 
 Picker.displayName = 'Picker';

package/lib/Picker/Picker.web.js

@@ -1,10 +1,73 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
 import * as React from 'react';
+import { useTouch } from '@ray-js/framework-shared';
+import { useEventListener } from 'ahooks';
+import handleProps from '../utils/handleProps';
+var countArr = 1;
 
 var Picker = function (props) {
-  var disabled = props.disabled,
-      className = props.className,
-      style = props.style;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B011");
+  var onLongClick = props.onLongClick,
+      onTouchStart = props.onTouchStart,
+      onTouchMove = props.onTouchMove,
+      onTouchEnd = props.onTouchEnd,
+      onTouchCancel = props.onTouchCancel,
+      onClick = props.onClick,
+      children = props.children;
+  var currentNode = React.useRef(null);
+  useEventListener('change', function (e) {
+    var _props$onChange;
+
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
+      type: 'change',
+      value: e.detail.value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('cancel', function (e) {
+    var _props$onCancel;
+
+    (_props$onCancel = props.onCancel) === null || _props$onCancel === void 0 ? void 0 : _props$onCancel.call(props, {
+      type: 'cancel',
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+
+  var _useTouch = useTouch({
+    onLongClick: onLongClick,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    onTouchCancel: onTouchCancel,
+    onClick: onClick
+  }),
+      _useTouch2 = _slicedToArray(_useTouch, 2),
+      handlers = _useTouch2[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 (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-picker", _extends({}, handleProps(props), handlers, {
+      ref: currentNode,
+      mode: multiarr(props.range) > 1 ? 'multiSelector' : 'selector'
+    }), children)
+  );
 };
 
 Picker.displayName = 'Picker';

package/lib/Picker/index.md

@@ -13,7 +13,7 @@ group:
 ## 导入
 
 ```js
-import { Picker } from '@ray-js/components';
+import { Picker } from '@ray-js/components'
 ```
 
 ## 示例代码
@@ -25,11 +25,11 @@ import { Picker } from '@ray-js/components';
 
 | 属性 | 类型 | 默认值 | 必填 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- | --- |
-| disabled | boolean | false | 否 | 是否禁用 | RN、涂鸦、微信 |
-| range | string[] or string[][] |  | 是 | 选择项数据源 | RN、涂鸦、微信 |
-| value | number or number[] | 0 | 否 | 表示选择了 range 中的第几个（下标从 0 开始） | RN、涂鸦、微信 |
-| cancelText | string | 取消 | 否 | 取消文案 | RN、涂鸦、微信 |
-| confirmText | string | 确认 | 否 | 确认文案 | RN、涂鸦、微信 |
-| onChange | func(type: 'change'; value:number or number[];), origin: any;}) |  | 否 | 点击触发 | RN、涂鸦、微信 |
-| onCancel | func({ type: 'cancel' }) |  | 否 | 取消选择时触发 | RN、涂鸦、微信 |
-| onColumnChange | func({type: 'columnchange'; value: number; column: number;}) |  | 否 | 列改变时触发 | RN、涂鸦、微信 |
+| disabled | boolean | false | 否 | 是否禁用 | RN、涂鸦、微信、Web |
+| range | string[] or string[][] |  | 是 | 选择项数据源 | RN、涂鸦、微信、Web |
+| value | number or number[] | 0 | 否 | 表示选择了 range 中的第几个（下标从 0 开始） | RN、涂鸦、微信、Web |
+| cancelText | string | 取消 | 否 | 取消文案 | RN、涂鸦、微信、Web |
+| confirmText | string | 确认 | 否 | 确认文案 | RN、涂鸦、微信、Web |
+| onChange | func(type: 'change'; value:number or number[];), origin: any;}) |  | 否 | 点击触发 | RN、涂鸦、微信、Web |
+| onCancel | func({ type: 'cancel' }) |  | 否 | 取消选择时触发 | RN、涂鸦、微信、Web |
+| onColumnChange | func({type: 'columnchange'; value: number; column: number;}) |  | 否 | 列改变时触发 | RN、涂鸦、微信、Web |

package/lib/Picker/props.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BaseProps } from '../types';
 import { TouchEventHandler } from '@ray-js/framework-shared';
 declare type ChangeEvent = (e: {
@@ -24,6 +25,7 @@ export interface PickerProps extends BaseProps, TouchEventHandler {
     onColumnChange?: ColumnChangeEvent;
     confirmText?: string;
     cancelText?: string;
+    children?: React.ReactNode | string;
 }
 export declare const IDefaultPickerProps: {
     cancelText: string;

package/lib/PickerView/PickerView.js

@@ -1,10 +1,75 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "core-js/modules/es.array.map.js";
 import * as React from 'react';
+import clsx from 'clsx';
+import { useEventListener } from 'ahooks';
+import PickerViewColumn from '../PickerViewColumn';
+import handleProps from '../utils/handleProps';
+import styles from './index.module.less';
 
 var PickerView = function (props) {
-  var disabled = props.disabled,
-      className = props.className,
-      style = props.style;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B011");
+  var className = props.className,
+      range = props.range,
+      children = props.children;
+  var currentNode = React.useRef(null);
+  useEventListener('change', function (e) {
+    var _props$onChange;
+
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
+      type: 'change',
+      value: e.detail.value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+
+  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__*/
+    // @ts-ignore
+    React.createElement("ty-picker-view", _extends({}, handleProps(props), {
+      ref: currentNode,
+      class: clsx(styles.pickerViewWrp, className)
+    }), children || 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("div", {
+              key: id,
+              className: styles.pcWrp
+            }, i);
+          }));
+        });
+      } else {
+        return /*#__PURE__*/React.createElement(PickerViewColumn, null, range.map(function (item, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: index,
+            className: styles.pcWrp
+          }, item);
+        }));
+      }
+    }())
+  );
 };
 
 PickerView.displayName = 'PickerView';

package/lib/PickerView/PickerView.web.js

@@ -1,10 +1,75 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "core-js/modules/es.array.map.js";
 import * as React from 'react';
+import clsx from 'clsx';
+import { useEventListener } from 'ahooks';
+import PickerViewColumn from '../PickerViewColumn';
+import handleProps from '../utils/handleProps';
+import styles from './index.module.less';
 
 var PickerView = function (props) {
-  var disabled = props.disabled,
-      className = props.className,
-      style = props.style;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B011");
+  var className = props.className,
+      range = props.range,
+      children = props.children;
+  var currentNode = React.useRef(null);
+  useEventListener('change', function (e) {
+    var _props$onChange;
+
+    (_props$onChange = props.onChange) === null || _props$onChange === void 0 ? void 0 : _props$onChange.call(props, {
+      type: 'change',
+      value: e.detail.value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+
+  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__*/
+    // @ts-ignore
+    React.createElement("ty-picker-view", _extends({}, handleProps(props), {
+      ref: currentNode,
+      class: clsx(styles.pickerViewWrp, className)
+    }), children || 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("div", {
+              key: id,
+              className: styles.pcWrp
+            }, i);
+          }));
+        });
+      } else {
+        return /*#__PURE__*/React.createElement(PickerViewColumn, null, range.map(function (item, index) {
+          return /*#__PURE__*/React.createElement("div", {
+            key: index,
+            className: styles.pcWrp
+          }, item);
+        }));
+      }
+    }())
+  );
 };
 
 PickerView.displayName = 'PickerView';

package/lib/PickerView/index.md

@@ -13,20 +13,21 @@ group:
 ## 导入
 
 ```js
-import { PickerView } from '@ray-js/components';
+import { PickerView } from '@ray-js/components'
 ```
 
 ## 示例代码
 
-<code src="./demos/basic.tsx" title="单选" background="#f2f4f6"  />
+<code src="./demos/basic.tsx" title="单选 - 选项" background="#f2f4f6"  />
+<code src="./demos/basicChildren.tsx" title="单选 - 子节点(仅支持web端)" background="#f2f4f6"  />
 <code src="./demos/multi.tsx" title="多选" background="#f2f4f6"  />
 
 ## Props
 
 | 属性 | 类型 | 默认值 | 必填 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- | --- |
-| className | React.CSSProperties |  | 否 | 选择器样式 | RN、涂鸦、微信 |
-| range | string[] or string[][] |  | 是 | 选择项数据源 | RN、涂鸦、微信 |
-| value | number or number[] | 0 | 否 | 表示选择了 range 中的第几个（下标从 0 开始） | RN、涂鸦、微信 |
-| fontSize | number |  | 否 | 选择器字体大小 | RN、涂鸦、微信 |
-| onChange | func(event: {type: 'change', value: (number or number[]) }) |  | 否 | 选择时触发 | RN、涂鸦、微信 |
+| className | React.CSSProperties |  | 否 | 选择器样式 | RN、涂鸦、微信、Web |
+| range | string[] or string[][] |  | 是 | 选择项数据源(Web 端非必填) | RN、涂鸦、微信、Web |
+| value | number or number[] | 0 | 否 | 表示选择了 range 中的第几个（下标从 0 开始） | RN、涂鸦、微信、Web |
+| fontSize | number |  | 否 | 选择器字体大小 | RN、涂鸦、微信、Web |
+| onChange | func(event: {type: 'change', value: (number or number[]) }) |  | 否 | 选择时触发 | RN、涂鸦、微信、Web |

package/lib/PickerView/props.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BaseProps } from '../types';
 export interface PickerViewProps extends BaseProps {
     value?: number | number[];
@@ -6,5 +7,7 @@ export interface PickerViewProps extends BaseProps {
     onChange?: (e: {
         type: 'change';
         value: number | number[];
+        origin?: any;
     }) => void;
+    children?: React.ReactNode;
 }

package/lib/PickerViewColumn/PickerViewColumn.android.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _rayPanelUtils=require("@ray-js/ray-panel-utils");var _utils=require("../utils");var _jsxFileName="/drone/src/packages/components/src/PickerViewColumn/PickerViewColumn.native.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var width=_rayPanelUtils.RatioUtils.width;var TYRCTPicker=(0,_reactNative.requireNativeComponent)('TYRCTPicker');var WheelPickerView=(0,_reactNative.requireNativeComponent)('TYRCTWheelViewManager');var _Picker=function(_React$Component){(0,_inherits2.default)(_Picker,_React$Component);var _super=_createSuper(_Picker);function _Picker(props){var _this;(0,_classCallCheck2.default)(this,_Picker);_this=_super.call(this,props);_this.getItem=function(){var range=_this.props.range;var isOnly=!(0,_utils.isTwoArray)(range);if(isOnly){return range.map(function(item){return{label:item,value:item};});}return range.map(function(item){return item.map(function(data){return{label:data,value:data};});});};_this.onItemSelected=function(event,isOnly,index){var newIndex=event.nativeEvent.newIndex;var onChange=_this.props.onChange;if(isOnly){_this.setState({selectIdx:newIndex});typeof onChange==='function'&&onChange({type:'change',value:newIndex});}else{var selectIdx=_this.state.selectIdx;var newSelectArr=selectIdx.concat([]);newSelectArr[index]=newIndex;typeof onChange==='function'&&onChange({type:'change',value:newSelectArr,column:index});_this.setState({selectIdx:newSelectArr});}};_this.renderPickerItem=function(item,selectIdx,isOnly,index){var _this$props=_this.props,style=_this$props.style,fontSize=_this$props.fontSize;var items=_this.getItem();var theme={dividerColor:'rgba(0, 0, 0, 0.05)',fontColor:'rgba(0,0,0,0.9)',fontSize:fontSize||isOnly?24:items.length<3?24:20};var length=isOnly?1:items.length;return _reactNative.Platform.OS==='android'?React.createElement(WheelPickerView,{key:index,style:[{width:width/length,height:216},style],items:item,itemTextColor:theme.fontColor,selectedItemTextColor:theme.fontColor,dividerColor:theme.dividerColor,visibleItemCount:5,itemAlign:'center',selectedIndex:selectIdx,textSize:theme.fontSize,loop:false,onChange:function onChange(e){return _this.onItemSelected(e,isOnly,index);},__self:(0,_assertThisInitialized2.default)(_this),__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:40}}):React.createElement(TYRCTPicker,{key:index,style:[{width:width/length,height:216},style],items:item,itemPadding:14,selectedIndex:selectIdx,separatorColor:(0,_reactNative.processColor)(theme.dividerColor),color:(0,_reactNative.processColor)(theme.fontColor),textAlign:1,fontSize:theme.fontSize,fontWeight:'normal',onChange:function onChange(e){return _this.onItemSelected(e,isOnly,index);},__self:(0,_assertThisInitialized2.default)(_this),__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:301}});};_this.state={selectIdx:props.value};return _this;}(0,_createClass2.default)(_Picker,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.value!==this.props.value){this.setState({selectIdx:this.props.value});}}},{key:"render",value:function render(){var _this2=this;var selectIdx=this.state.selectIdx;var items=this.getItem();var isOnly=!(0,_utils.isTwoArray)(items);return isOnly?this.renderPickerItem(items,selectIdx,isOnly,0):React.createElement(_reactNative.View,{style:[{flexDirection:'row',overflow:'hidden'}],__self:this,__source:{fileName:_jsxFileName,lineNumber:126,columnNumber:74}},items.map(function(item,idx){return _this2.renderPickerItem(item,selectIdx[idx],isOnly,idx);}));}}]);return _Picker;}(React.Component);exports.default=_Picker;_Picker.displayName='_PickerView';_Picker.defaultProps={value:0};

package/lib/PickerViewColumn/PickerViewColumn.d.ts

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

package/lib/PickerViewColumn/PickerViewColumn.ios.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2=_interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf2=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _rayPanelUtils=require("@ray-js/ray-panel-utils");var _utils=require("../utils");var _jsxFileName="/drone/src/packages/components/src/PickerViewColumn/PickerViewColumn.native.tsx";function _getRequireWildcardCache(nodeInterop){if(typeof WeakMap!=="function")return null;var cacheBabelInterop=new WeakMap();var cacheNodeInterop=new WeakMap();return(_getRequireWildcardCache=function _getRequireWildcardCache(nodeInterop){return nodeInterop?cacheNodeInterop:cacheBabelInterop;})(nodeInterop);}function _interopRequireWildcard(obj,nodeInterop){if(!nodeInterop&&obj&&obj.__esModule){return obj;}if(obj===null||typeof obj!=="object"&&typeof obj!=="function"){return{default:obj};}var cache=_getRequireWildcardCache(nodeInterop);if(cache&&cache.has(obj)){return cache.get(obj);}var newObj={};var hasPropertyDescriptor=Object.defineProperty&&Object.getOwnPropertyDescriptor;for(var key in obj){if(key!=="default"&&Object.prototype.hasOwnProperty.call(obj,key)){var desc=hasPropertyDescriptor?Object.getOwnPropertyDescriptor(obj,key):null;if(desc&&(desc.get||desc.set)){Object.defineProperty(newObj,key,desc);}else{newObj[key]=obj[key];}}}newObj.default=obj;if(cache){cache.set(obj,newObj);}return newObj;}function _createSuper(Derived){var hasNativeReflectConstruct=_isNativeReflectConstruct();return function(){var Super=(0,_getPrototypeOf2.default)(Derived),result;if(hasNativeReflectConstruct){var NewTarget=(0,_getPrototypeOf2.default)(this).constructor;result=Reflect.construct(Super,arguments,NewTarget);}else{result=Super.apply(this,arguments);}return(0,_possibleConstructorReturn2.default)(this,result);};}function _isNativeReflectConstruct(){if(typeof Reflect==="undefined"||!Reflect.construct)return false;if(Reflect.construct.sham)return false;if(typeof Proxy==="function")return true;try{Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],function(){}));return true;}catch(e){return false;}}var width=_rayPanelUtils.RatioUtils.width;var TYRCTPicker=(0,_reactNative.requireNativeComponent)('TYRCTPicker');var WheelPickerView=(0,_reactNative.requireNativeComponent)('TYRCTWheelViewManager');var _Picker=function(_React$Component){(0,_inherits2.default)(_Picker,_React$Component);var _super=_createSuper(_Picker);function _Picker(props){var _this;(0,_classCallCheck2.default)(this,_Picker);_this=_super.call(this,props);_this.getItem=function(){var range=_this.props.range;var isOnly=!(0,_utils.isTwoArray)(range);if(isOnly){return range.map(function(item){return{label:item,value:item};});}return range.map(function(item){return item.map(function(data){return{label:data,value:data};});});};_this.onItemSelected=function(event,isOnly,index){var newIndex=event.nativeEvent.newIndex;var onChange=_this.props.onChange;if(isOnly){_this.setState({selectIdx:newIndex});typeof onChange==='function'&&onChange({type:'change',value:newIndex});}else{var selectIdx=_this.state.selectIdx;var newSelectArr=selectIdx.concat([]);newSelectArr[index]=newIndex;typeof onChange==='function'&&onChange({type:'change',value:newSelectArr,column:index});_this.setState({selectIdx:newSelectArr});}};_this.renderPickerItem=function(item,selectIdx,isOnly,index){var _this$props=_this.props,style=_this$props.style,fontSize=_this$props.fontSize;var items=_this.getItem();var theme={dividerColor:'rgba(0, 0, 0, 0.05)',fontColor:'rgba(0,0,0,0.9)',fontSize:fontSize||isOnly?24:items.length<3?24:20};var length=isOnly?1:items.length;return _reactNative.Platform.OS==='android'?React.createElement(WheelPickerView,{key:index,style:[{width:width/length,height:216},style],items:item,itemTextColor:theme.fontColor,selectedItemTextColor:theme.fontColor,dividerColor:theme.dividerColor,visibleItemCount:5,itemAlign:'center',selectedIndex:selectIdx,textSize:theme.fontSize,loop:false,onChange:function onChange(e){return _this.onItemSelected(e,isOnly,index);},__self:(0,_assertThisInitialized2.default)(_this),__source:{fileName:_jsxFileName,lineNumber:111,columnNumber:40}}):React.createElement(TYRCTPicker,{key:index,style:[{width:width/length,height:216},style],items:item,itemPadding:14,selectedIndex:selectIdx,separatorColor:(0,_reactNative.processColor)(theme.dividerColor),color:(0,_reactNative.processColor)(theme.fontColor),textAlign:1,fontSize:theme.fontSize,fontWeight:'normal',onChange:function onChange(e){return _this.onItemSelected(e,isOnly,index);},__self:(0,_assertThisInitialized2.default)(_this),__source:{fileName:_jsxFileName,lineNumber:114,columnNumber:301}});};_this.state={selectIdx:props.value};return _this;}(0,_createClass2.default)(_Picker,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.value!==this.props.value){this.setState({selectIdx:this.props.value});}}},{key:"render",value:function render(){var _this2=this;var selectIdx=this.state.selectIdx;var items=this.getItem();var isOnly=!(0,_utils.isTwoArray)(items);return isOnly?this.renderPickerItem(items,selectIdx,isOnly,0):React.createElement(_reactNative.View,{style:[{flexDirection:'row',overflow:'hidden'}],__self:this,__source:{fileName:_jsxFileName,lineNumber:126,columnNumber:74}},items.map(function(item,idx){return _this2.renderPickerItem(item,selectIdx[idx],isOnly,idx);}));}}]);return _Picker;}(React.Component);exports.default=_Picker;_Picker.displayName='_PickerView';_Picker.defaultProps={value:0};

package/lib/PickerViewColumn/PickerViewColumn.js

@@ -0,0 +1,14 @@
+import * as React from 'react';
+import handleProps from '../utils/handleProps';
+
+var PickerViewColumn = function (props) {
+  var children = props.children;
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-picker-view-column", handleProps(props), children)
+  );
+};
+
+PickerViewColumn.displayName = 'PickerViewColumn';
+export default PickerViewColumn;