@ray-js/components 0.3.29 → 0.3.30

package/lib/Slider/Slider.js

@@ -1,20 +1,39 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "style", "className", "children"];
 import * as React from 'react';
+import { useEventListener } from 'ahooks';
+import handleProps from '../utils/handleProps';
 
 var Slider = function (props) {
-  var id = props.id,
-      style = props.style,
-      className = props.className,
-      children = props.children,
-      restProps = _objectWithoutProperties(props, _excluded);
+  var currentNode = React.useRef(null);
+  useEventListener('change', function (e) {
+    var _props$onChange;
 
-  return /*#__PURE__*/React.createElement(Slider, _extends({
-    id: id,
-    style: style,
-    className: className
-  }, restProps), children);
+    (_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('changing', function (e) {
+    var _props$onChanging;
+
+    (_props$onChanging = props.onChanging) === null || _props$onChanging === void 0 ? void 0 : _props$onChanging.call(props, {
+      type: 'changing',
+      value: e.detail.value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-slider", _extends({}, handleProps(props), {
+      ref: currentNode
+    }))
+  );
 };
 
 export default Slider;

package/lib/Slider/Slider.web.js

@@ -1,20 +1,39 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "style", "className", "children"];
 import * as React from 'react';
+import { useEventListener } from 'ahooks';
+import handleProps from '../utils/handleProps';
 
 var Slider = function (props) {
-  var id = props.id,
-      style = props.style,
-      className = props.className,
-      children = props.children,
-      restProps = _objectWithoutProperties(props, _excluded);
+  var currentNode = React.useRef(null);
+  useEventListener('change', function (e) {
+    var _props$onChange;
 
-  return /*#__PURE__*/React.createElement(Slider, _extends({
-    id: id,
-    style: style,
-    className: className
-  }, restProps), children);
+    (_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('changing', function (e) {
+    var _props$onChanging;
+
+    (_props$onChanging = props.onChanging) === null || _props$onChanging === void 0 ? void 0 : _props$onChanging.call(props, {
+      type: 'changing',
+      value: e.detail.value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-slider", _extends({}, handleProps(props), {
+      ref: currentNode
+    }))
+  );
 };
 
 export default Slider;

package/lib/Slider/index.md

@@ -13,14 +13,14 @@ group:
 ## 导入
 
 ```js
-import { Slider } from '@ray-js/components';
+import { Slider } from '@ray-js/components'
 ```
 
 ## 代码演示
 
 ```js
-import React from 'react';
-import { Slider } from '@ray-js/components';
+import React from 'react'
+import { Slider } from '@ray-js/components'
 
 export default function HorizontalScroll() {
   return (
@@ -32,10 +32,10 @@ export default function HorizontalScroll() {
       step={5}
       showValue
       onChange={(e) => {
-        console.log('SliderChange', e);
+        console.log('SliderChange', e)
       }}
     />
-  );
+  )
 }
 ```
 
@@ -49,15 +49,15 @@ export default function HorizontalScroll() {
 
 | 属性名 | 类型 | 默认值 | 必填 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- | --- |
-| min | number | 0 | 否 | 最小值 | RN、涂鸦、微信 |
-| max | number | 100 | 否 | 最大值 | RN、涂鸦、微信 |
-| step | number | 1 | 否 | 步长，取值必须大于 0，并且可被(max - min)整除 | RN、涂鸦、微信 |
-| disabled | boolean | false | 否 | 是否禁用 | RN、涂鸦、微信 |
-| value | number | 0 | 否 | 当前取值 | RN、涂鸦、微信 |
-| activeColor | color | #007aff | 否 | 已选择的颜色 | RN、涂鸦、微信 |
-| backgroundColor | color | rgba(0,0,0,.2) | 否 | 背景条的颜色 | RN、涂鸦、微信 |
-| blockSize | number | 28 | 否 | 滑块的大小，取值范围为 12 - 28 | RN、涂鸦、微信 |
-| blockColor | color | #ffffff | 否 | 滑块的颜色 | RN、涂鸦、微信 |
-| showValue | boolean | false | 否 | 是否显示当前 value | RN、涂鸦、微信 |
-| onChange | eventhandle |  | 否 | 完成一次拖动后触发的事件，event.detail = {value} | RN、涂鸦、微信 |
-| onChanging | eventhandle |  | 否 | 拖动过程中触发的事件，event.detail = {value} | RN、涂鸦、微信 |
+| min | number | 0 | 否 | 最小值 | RN、涂鸦、微信、Web |
+| max | number | 100 | 否 | 最大值 | RN、涂鸦、微信、Web |
+| step | number | 1 | 否 | 步长，取值必须大于 0，并且可被(max - min)整除 | RN、涂鸦、微信、Web |
+| disabled | boolean | false | 否 | 是否禁用 | RN、涂鸦、微信、Web |
+| value | number | 0 | 否 | 当前取值 | RN、涂鸦、微信、Web |
+| activeColor | color | #007aff | 否 | 已选择的颜色 | RN、涂鸦、微信、Web |
+| backgroundColor | color | rgba(0,0,0,.2) | 否 | 背景条的颜色 | RN、涂鸦、微信、Web |
+| blockSize | number | 28 | 否 | 滑块的大小，取值范围为 12 - 28 | RN、涂鸦、微信、Web |
+| blockColor | color | #ffffff | 否 | 滑块的颜色 | RN、涂鸦、微信、Web |
+| showValue | boolean | false | 否 | 是否显示当前 value | RN、涂鸦、微信、Web |
+| onChange | eventhandle |  | 否 | 完成一次拖动后触发的事件，event.detail = {value} | RN、涂鸦、微信、Web |
+| onChanging | eventhandle |  | 否 | 拖动过程中触发的事件，event.detail = {value} | RN、涂鸦、微信、Web |

package/lib/Swiper/Swiper.js

@@ -1,9 +1,68 @@
+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"];
+import "core-js/modules/es.array.map.js";
 // import clsx from 'clsx';
 import * as React from 'react';
+import handleProps from '../utils/handleProps';
 import { defaultSwiperProps } from './props';
+import { useEventListener } from 'ahooks';
 
-function Swiper() {
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B0");
+function Swiper(props) {
+  var id = props.id,
+      style = props.style,
+      className = props.className,
+      current = props.current,
+      dataSource = props.dataSource,
+      onAfterChange = props.onAfterChange,
+      onChange = props.onChange,
+      renderItem = props.renderItem,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var _React$useState = React.useState(current),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      internalCurrent = _React$useState2[0],
+      setInternalCurrent = _React$useState2[1];
+
+  var bufferCurrent = React.useRef(current);
+  var currentNode = React.useRef(null);
+  React.useEffect(function () {
+    if (bufferCurrent.current !== current) {
+      setInternalCurrent(current);
+    }
+  }, [current]);
+
+  function handleChange(event) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(event === null || event === void 0 ? void 0 : event.detail);
+  }
+
+  function handleAfterChange(event) {
+    onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(event === null || event === void 0 ? void 0 : event.detail);
+  }
+
+  useEventListener('change', function (e) {
+    handleChange(e);
+  }, {
+    target: currentNode
+  });
+  useEventListener('onanimationend', function (e) {
+    handleAfterChange(e);
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @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));
+    }))
+  );
 }
 
 Swiper.defaultProps = defaultSwiperProps;

package/lib/Swiper/Swiper.web.js

@@ -1,9 +1,68 @@
+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"];
+import "core-js/modules/es.array.map.js";
 // import clsx from 'clsx';
 import * as React from 'react';
+import handleProps from '../utils/handleProps';
 import { defaultSwiperProps } from './props';
+import { useEventListener } from 'ahooks';
 
-function Swiper() {
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B0");
+function Swiper(props) {
+  var id = props.id,
+      style = props.style,
+      className = props.className,
+      current = props.current,
+      dataSource = props.dataSource,
+      onAfterChange = props.onAfterChange,
+      onChange = props.onChange,
+      renderItem = props.renderItem,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var _React$useState = React.useState(current),
+      _React$useState2 = _slicedToArray(_React$useState, 2),
+      internalCurrent = _React$useState2[0],
+      setInternalCurrent = _React$useState2[1];
+
+  var bufferCurrent = React.useRef(current);
+  var currentNode = React.useRef(null);
+  React.useEffect(function () {
+    if (bufferCurrent.current !== current) {
+      setInternalCurrent(current);
+    }
+  }, [current]);
+
+  function handleChange(event) {
+    onChange === null || onChange === void 0 ? void 0 : onChange(event === null || event === void 0 ? void 0 : event.detail);
+  }
+
+  function handleAfterChange(event) {
+    onAfterChange === null || onAfterChange === void 0 ? void 0 : onAfterChange(event === null || event === void 0 ? void 0 : event.detail);
+  }
+
+  useEventListener('change', function (e) {
+    handleChange(e);
+  }, {
+    target: currentNode
+  });
+  useEventListener('onanimationend', function (e) {
+    handleAfterChange(e);
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @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));
+    }))
+  );
 }
 
 Swiper.defaultProps = defaultSwiperProps;

package/lib/Swiper/index.md

@@ -15,7 +15,7 @@ group:
 ## 导入
 
 ```js
-import { Swiper } from '@ray-js/components';
+import { Swiper } from '@ray-js/components'
 ```
 
 ## 代码演示
@@ -29,16 +29,16 @@ import { Swiper } from '@ray-js/components';
 
 | 属性 | 类型 | 默认值 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- |
-| autoplay | boolean | false | 是否自动切换 | RN、涂鸦、微信 |
-| circular | boolean | false | 是否采用衔接滑动 | RN、涂鸦、微信 |
-| current | number | 0 | 当前所在滑块的 index | RN、涂鸦、微信 |
-| dotActiveColor | string | #666666 | 当前选中的指示点颜色 | RN、涂鸦、微信 |
-| dotColor | string | #333333 | 指示点颜色 | RN、涂鸦、微信 |
-| dots | boolean | false | 是否显示面板指示点 | RN、涂鸦、微信 |
-| duration | number | 500 | 滑动动画时长 | 涂鸦、微信 |
-| interval | number | 5000 | 自动切换时间间隔 | RN、涂鸦、微信 |
-| vertical | boolean | false | 滑动方向是否为纵向 | RN、涂鸦、微信 |
-| dataSource | P[] |  | 数据源 | RN、涂鸦、微信 |
-| renderItem | func(P) |  | 渲染数据成员 | RN、涂鸦、微信 |
-| onChange | func(event) |  | current 改变时, event.detail = {current, source} | RN、涂鸦、微信 |
-| onAfterChange | func(event) |  | 动画结束时触发，event.detail 同上 | RN、涂鸦、微信 |
+| autoplay | boolean | false | 是否自动切换 | RN、涂鸦、微信、Web |
+| circular | boolean | false | 是否采用衔接滑动 | RN、涂鸦、微信、Web |
+| current | number | 0 | 当前所在滑块的 index | RN、涂鸦、微信、Web |
+| dotActiveColor | string | #666666 | 当前选中的指示点颜色 | RN、涂鸦、微信、Web |
+| dotColor | string | #333333 | 指示点颜色 | RN、涂鸦、微信、Web |
+| dots | boolean | false | 是否显示面板指示点 | RN、涂鸦、微信、Web |
+| duration | number | 500 | 滑动动画时长 | 涂鸦、微信、Web |
+| interval | number | 5000 | 自动切换时间间隔 | RN、涂鸦、微信、Web |
+| vertical | boolean | false | 滑动方向是否为纵向 | RN、涂鸦、微信、Web |
+| dataSource | P[] |  | 数据源 | RN、涂鸦、微信、Web |
+| renderItem | func(P) |  | 渲染数据成员 | RN、涂鸦、微信、Web |
+| onChange | func(event) |  | current 改变时, event.detail = {current, source} | RN、涂鸦、微信、Web |
+| onAfterChange | func(event) |  | 动画结束时触发，event.detail 同上 | RN、涂鸦、微信、Web |

package/lib/Switch/Switch.js

@@ -1,12 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
+import { useEventListener } from 'ahooks';
+import handleProps from '../utils/handleProps';
 
 var Switch = function (props) {
-  var checked = props.checked,
-      disabled = props.disabled,
-      color = props.color,
-      className = props.className,
-      style = props.style;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B011");
+  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, _objectSpread(_objectSpread({
+      type: 'change'
+    }, e.detail), {}, {
+      origin: e
+    }));
+  }, {
+    target: currentNode
+  }); // @ts-ignore
+
+  return /*#__PURE__*/React.createElement("ty-switch", _extends({}, handleProps(props), {
+    ref: currentNode
+  }));
 };
 
 Switch.displayName = 'Switch';

package/lib/Switch/Switch.web.js

@@ -1,12 +1,26 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
+import { useEventListener } from 'ahooks';
+import handleProps from '../utils/handleProps';
 
 var Switch = function (props) {
-  var checked = props.checked,
-      disabled = props.disabled,
-      color = props.color,
-      className = props.className,
-      style = props.style;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B011");
+  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, _objectSpread(_objectSpread({
+      type: 'change'
+    }, e.detail), {}, {
+      origin: e
+    }));
+  }, {
+    target: currentNode
+  }); // @ts-ignore
+
+  return /*#__PURE__*/React.createElement("ty-switch", _extends({}, handleProps(props), {
+    ref: currentNode
+  }));
 };
 
 Switch.displayName = 'Switch';

package/lib/Switch/index.md

@@ -13,7 +13,7 @@ group:
 ## 导入
 
 ```js
-import { Switch } from '@ray-js/components';
+import { Switch } from '@ray-js/components'
 ```
 
 ## 代码演示
@@ -24,8 +24,8 @@ import { Switch } from '@ray-js/components';
 
 | 属性 | 类型 | 默认值 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- |
-| checked | boolean | false | 当前是否选中 | RN、涂鸦、微信 |
-| disabled | boolean | false | 是否禁用 | RN、涂鸦、微信 |
-| color | string | #007AFF | Switch 的颜色，同 css 的 color | RN、涂鸦、微信 |
-| type | string | switch | 可选值 `switch` `checkbox` | RN、涂鸦、微信 |
-| onChange | func(event) | 否 | checked 改变时触发 change 事件，event.detail={ value} | RN、涂鸦、微信 |
+| checked | boolean | false | 当前是否选中 | RN、涂鸦、微信、Web |
+| disabled | boolean | false | 是否禁用 | RN、涂鸦、微信、Web |
+| color | string | #007AFF | Switch 的颜色，同 css 的 color | RN、涂鸦、微信、Web |
+| type | string | switch | 可选值 `switch` `checkbox` | RN、涂鸦、微信、Web |
+| onChange | func(event) | 否 | checked 改变时触发 change 事件，event.detail={ value} | RN、涂鸦、微信、Web |

package/lib/Text/Text.js

@@ -1,40 +1,12 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
-import clsx from 'clsx';
-import { inlineStyle } from '@ray-js/framework-shared';
-import styles from './index.module.less';
+import handleProps from '../utils/handleProps';
 
 var Text = function (props) {
-  var onClick = props.onClick,
-      onTouchStart = props.onTouchStart,
-      onTouchMove = props.onTouchMove,
-      onTouchEnd = props.onTouchEnd,
-      onTouchCancel = props.onTouchCancel,
-      className = props.className,
-      selectable = props.selectable,
-      dataset = props.dataset,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  return /*#__PURE__*/React.createElement("span", _extends({}, dataset, {
-    id: id,
-    style: inlineStyle(style),
-    className: clsx('ray-text', className, _defineProperty({}, styles.selectable, selectable)),
-    onClick: onClick,
-    onTouchStart: function (e) {
-      return onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e);
-    },
-    onTouchMove: function (e) {
-      return onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(e);
-    },
-    onTouchEnd: function (e) {
-      return onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
-    },
-    onTouchCancel: function (e) {
-      return onTouchCancel === null || onTouchCancel === void 0 ? void 0 : onTouchCancel(e);
-    }
-  }), children);
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-text", handleProps(props))
+  );
 };
 
 Text.displayName = 'Text';

package/lib/Text/Text.web.js

@@ -1,40 +1,12 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import * as React from 'react';
-import clsx from 'clsx';
-import { inlineStyle } from '@ray-js/framework-shared';
-import styles from './index.module.less';
+import handleProps from '../utils/handleProps';
 
 var Text = function (props) {
-  var onClick = props.onClick,
-      onTouchStart = props.onTouchStart,
-      onTouchMove = props.onTouchMove,
-      onTouchEnd = props.onTouchEnd,
-      onTouchCancel = props.onTouchCancel,
-      className = props.className,
-      selectable = props.selectable,
-      dataset = props.dataset,
-      id = props.id,
-      style = props.style,
-      children = props.children;
-  return /*#__PURE__*/React.createElement("span", _extends({}, dataset, {
-    id: id,
-    style: inlineStyle(style),
-    className: clsx('ray-text', className, _defineProperty({}, styles.selectable, selectable)),
-    onClick: onClick,
-    onTouchStart: function (e) {
-      return onTouchStart === null || onTouchStart === void 0 ? void 0 : onTouchStart(e);
-    },
-    onTouchMove: function (e) {
-      return onTouchMove === null || onTouchMove === void 0 ? void 0 : onTouchMove(e);
-    },
-    onTouchEnd: function (e) {
-      return onTouchEnd === null || onTouchEnd === void 0 ? void 0 : onTouchEnd(e);
-    },
-    onTouchCancel: function (e) {
-      return onTouchCancel === null || onTouchCancel === void 0 ? void 0 : onTouchCancel(e);
-    }
-  }), children);
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-text", handleProps(props))
+  );
 };
 
 Text.displayName = 'Text';

package/lib/Text/index.md

@@ -13,7 +13,7 @@ group:
 ## 导入
 
 ```js
-import { Text } from '@ray-js/components';
+import { Text } from '@ray-js/components'
 ```
 
 ## 代码演示
@@ -22,8 +22,8 @@ import { Text } from '@ray-js/components';
 
 ## Props
 
-| 属性       | 类型                           | 默认值 | 说明         | 支持平台       |
-| ---------- | ------------------------------ | ------ | ------------ | -------------- |
-| className  | string                         |        | 样式名       | RN、涂鸦、微信 |
-| selectable | boolean                        | false  | 文本是否可选 | RN、涂鸦、微信 |
-| onClick    | (e: { type: 'click' }) => void | false  | 点击事件     | RN、涂鸦、微信 |
+| 属性       | 类型                           | 默认值 | 说明         | 支持平台            |
+| ---------- | ------------------------------ | ------ | ------------ | ------------------- |
+| className  | string                         |        | 样式名       | RN、涂鸦、微信、Web |
+| selectable | boolean                        | false  | 文本是否可选 | RN、涂鸦、微信、Web |
+| onClick    | (e: { type: 'click' }) => void | false  | 点击事件     | RN、涂鸦、微信、Web |

package/lib/TimePicker/TimePicker.js

@@ -1,9 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useEventListener } from 'ahooks';
+import handleProps from '../utils/handleProps';
 
-// import styles from './index.module.less';
-var TimePicker = function () {
-  // const { disabled, className, style } = props;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B011");
+var TimePicker = function (props) {
+  var 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: e.type,
+      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: e.type,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-picker", _extends({}, handleProps(props), {
+      ref: currentNode,
+      mode: "time"
+    }), children)
+  );
 };
 
 TimePicker.displayName = 'TimePicker';

package/lib/TimePicker/TimePicker.web.js

@@ -1,9 +1,40 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
 import * as React from 'react';
+import { useEventListener } from 'ahooks';
+import handleProps from '../utils/handleProps';
 
-// import styles from './index.module.less';
-var TimePicker = function () {
-  // const { disabled, className, style } = props;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B011");
+var TimePicker = function (props) {
+  var 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: e.type,
+      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: e.type,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-picker", _extends({}, handleProps(props), {
+      ref: currentNode,
+      mode: "time"
+    }), children)
+  );
 };
 
 TimePicker.displayName = 'TimePicker';