@ray-js/components 0.3.28 → 0.3.31

package/lib/Button/Button.js

@@ -1,55 +1,13 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "className", "hoverClassName", "hoverStartTime", "hoverStayTime", "htmlType", "onClick", "onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart", "size", "loading", "disabled"];
 import * as React from 'react';
-import clsx from 'clsx';
-import { inlineStyle, useTouch } from '@ray-js/framework-shared';
 import { defaultButtonProps } from './props';
-import styles from './index.module.less';
+import handleProps from '../utils/handleProps';
 
 var Button = function (props) {
-  var style = props.style,
-      className = props.className,
-      _props$hoverClassName = props.hoverClassName,
-      hoverClassName = _props$hoverClassName === void 0 ? styles["button-hover"] : _props$hoverClassName,
-      hoverStartTime = props.hoverStartTime,
-      hoverStayTime = props.hoverStayTime,
-      htmlType = props.htmlType,
-      onClick = props.onClick,
-      onTouchCancel = props.onTouchCancel,
-      onTouchEnd = props.onTouchEnd,
-      onTouchMove = props.onTouchMove,
-      onTouchStart = props.onTouchStart,
-      size = props.size,
-      loading = props.loading,
-      disabled = props.disabled,
-      restProps = _objectWithoutProperties(props, _excluded);
-
-  var _useTouch = useTouch({
-    hoverDelay: hoverStartTime,
-    hoverDuration: hoverStayTime,
-    onTouchStart: onTouchStart,
-    onTouchMove: onTouchMove,
-    onTouchEnd: onTouchEnd,
-    onTouchCancel: onTouchCancel
-  }),
-      _useTouch2 = _slicedToArray(_useTouch, 2),
-      touching = _useTouch2[0],
-      handlers = _useTouch2[1];
-
-  return /*#__PURE__*/React.createElement("button", _extends({
-    disabled: disabled,
-    style: inlineStyle(style),
-    className: clsx('ray-button', styles.button, styles["button-".concat(size)], _defineProperty({}, styles['button-loading'], loading), touching && hoverClassName, className),
-    onClick: function (e) {
-      if (disabled) return;
-      if (loading) return;
-      onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    },
-    type: htmlType
-  }, handlers, restProps));
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-button", handleProps(props), props.children)
+  );
 };
 
 Button.defaultProps = defaultButtonProps;

package/lib/Button/Button.tuya.js

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "id", "className", "disabled", "loading", "onClick", "hoverClassName", "size", "children", "htmlType"];
+var _excluded = ["style", "id", "className", "disabled", "loading", "onClick", "hoverClassName", "size", "formType"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { inlineStyle } from '@ray-js/framework-shared';
@@ -17,8 +17,7 @@ var Button = function (props) {
       hoverClassName = props.hoverClassName,
       _props$size = props.size,
       size = _props$size === void 0 ? 'default' : _props$size,
-      children = props.children,
-      htmlType = props.htmlType,
+      formType = props.formType,
       restProps = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/React.createElement(RemaxButton, _extends({
@@ -34,8 +33,8 @@ var Button = function (props) {
     disabled: disabled,
     size: size,
     loading: loading,
-    formType: htmlType
-  }, restProps), children);
+    formType: formType
+  }, restProps));
 };
 
 Button.defaultProps = defaultButtonProps;

package/lib/Button/Button.web.js

@@ -1,55 +1,13 @@
-import _extends from "@babel/runtime/helpers/esm/extends";
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
-import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "className", "hoverClassName", "hoverStartTime", "hoverStayTime", "htmlType", "onClick", "onTouchCancel", "onTouchEnd", "onTouchMove", "onTouchStart", "size", "loading", "disabled"];
 import * as React from 'react';
-import clsx from 'clsx';
-import { inlineStyle, useTouch } from '@ray-js/framework-shared';
 import { defaultButtonProps } from './props';
-import styles from './index.module.less';
+import handleProps from '../utils/handleProps';
 
 var Button = function (props) {
-  var style = props.style,
-      className = props.className,
-      _props$hoverClassName = props.hoverClassName,
-      hoverClassName = _props$hoverClassName === void 0 ? styles["button-hover"] : _props$hoverClassName,
-      hoverStartTime = props.hoverStartTime,
-      hoverStayTime = props.hoverStayTime,
-      htmlType = props.htmlType,
-      onClick = props.onClick,
-      onTouchCancel = props.onTouchCancel,
-      onTouchEnd = props.onTouchEnd,
-      onTouchMove = props.onTouchMove,
-      onTouchStart = props.onTouchStart,
-      size = props.size,
-      loading = props.loading,
-      disabled = props.disabled,
-      restProps = _objectWithoutProperties(props, _excluded);
-
-  var _useTouch = useTouch({
-    hoverDelay: hoverStartTime,
-    hoverDuration: hoverStayTime,
-    onTouchStart: onTouchStart,
-    onTouchMove: onTouchMove,
-    onTouchEnd: onTouchEnd,
-    onTouchCancel: onTouchCancel
-  }),
-      _useTouch2 = _slicedToArray(_useTouch, 2),
-      touching = _useTouch2[0],
-      handlers = _useTouch2[1];
-
-  return /*#__PURE__*/React.createElement("button", _extends({
-    disabled: disabled,
-    style: inlineStyle(style),
-    className: clsx('ray-button', styles.button, styles["button-".concat(size)], _defineProperty({}, styles['button-loading'], loading), touching && hoverClassName, className),
-    onClick: function (e) {
-      if (disabled) return;
-      if (loading) return;
-      onClick === null || onClick === void 0 ? void 0 : onClick(e);
-    },
-    type: htmlType
-  }, handlers, restProps));
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-button", handleProps(props), props.children)
+  );
 };
 
 Button.defaultProps = defaultButtonProps;

package/lib/Button/Button.wechat.js

@@ -1,7 +1,7 @@
 import { Button as _Button } from "@remax/wechat/esm/hostComponents/Button/index";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["style", "id", "className", "disabled", "loading", "onClick", "hoverClassName", "size", "children", "htmlType"];
+var _excluded = ["style", "id", "className", "disabled", "loading", "onClick", "hoverClassName", "size", "formType"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { inlineStyle } from '@ray-js/framework-shared';
@@ -18,8 +18,7 @@ var Button = function (props) {
       hoverClassName = props.hoverClassName,
       _props$size = props.size,
       size = _props$size === void 0 ? 'default' : _props$size,
-      children = props.children,
-      htmlType = props.htmlType,
+      formType = props.formType,
       restProps = _objectWithoutProperties(props, _excluded);
 
   return /*#__PURE__*/React.createElement(_Button, _extends({
@@ -33,10 +32,10 @@ var Button = function (props) {
       onClick === null || onClick === void 0 ? void 0 : onClick(event);
     },
     disabled: disabled,
-    formType: htmlType,
+    formType: formType,
     loading: loading,
     size: size
-  }, restProps), children);
+  }, restProps));
 };
 
 Button.defaultProps = defaultButtonProps;

package/lib/Button/index.md

@@ -13,7 +13,7 @@ group:
 ## 导入
 
 ```js
-import { Button } from '@ray-js/components';
+import { Button } from '@ray-js/components'
 ```
 
 ## 示例代码
@@ -27,15 +27,15 @@ import { Button } from '@ray-js/components';
 
 | 属性 | 类型 | 默认值 | 必填 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- | --- |
-| size | keyof Size | default | 否 | 按钮的大小 | RN、涂鸦、微信 |
-| type | keyof Type | default | 否 | 按钮的样式类型 | RN、涂鸦、微信 |
-| plain | boolean | false | 否 | 按钮是否镂空，背景色透明 | RN、涂鸦、微信 |
-| disabled | boolean | false | 否 | 是否禁用 | RN、涂鸦、微信 |
-| loading | boolean | false | 否 | 名称前是否带 loading 图标 | RN、涂鸦、微信 |
-| formType | keyof FormType |  | 否 | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 | 涂鸦、微信 |
+| size | keyof Size | default | 否 | 按钮的大小 | RN、涂鸦、微信、Web |
+| type | keyof Type | default | 否 | 按钮的样式类型 | RN、涂鸦、微信、Web |
+| plain | boolean | false | 否 | 按钮是否镂空，背景色透明 | RN、涂鸦、微信、Web |
+| disabled | boolean | false | 否 | 是否禁用 | RN、涂鸦、微信、Web |
+| loading | boolean | false | 否 | 名称前是否带 loading 图标 | RN、涂鸦、微信、Web |
+| formType | keyof FormType |  | 否 | 用于 form 组件，点击分别会触发 form 组件的 submit/reset 事件 | 涂鸦、微信、Web |
 | openType | OpenType |  | 否 | 微信开放能力 | 微信 |
-| hoverClassName | string | button-hover | 否 | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 | 涂鸦、微信、RN |
+| hoverClassName | string | button-hover | 否 | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 | 涂鸦、微信、RN、Web |
 | hoverStyle | StyleProp ViewStyle | none | 否 | 由于 RN 不支持 Class，故 RN 端的 Button 组件实现了 hoverStyle 属性，写法和 style 类似，只不过 hoverStyle 的样式是指定按下去的样式。 | RN |
 | hoverStopPropagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 微信 |
-| hoverStartTime | number | 20 | 否 | 按住后多久出现点击态，单位毫秒 | RN、涂鸦、微信 |
-| hoverStayTime | number | 70 | 否 | 手指松开后点击态保留时间，单位毫秒 | RN、涂鸦、微信 |
+| hoverStartTime | number | 20 | 否 | 按住后多久出现点击态，单位毫秒 | RN、涂鸦、微信、Web |
+| hoverStayTime | number | 70 | 否 | 手指松开后点击态保留时间，单位毫秒 | RN、涂鸦、微信、Web |

package/lib/Button/props.d.ts

@@ -14,5 +14,6 @@ export interface ButtonProps extends BaseProps {
         type: 'click';
     }) => void;
     children?: React.ReactNode;
+    formType?: 'submit' | 'reset';
 }
 export declare const defaultButtonProps: ButtonProps;

package/lib/Checkbox/Checkbox.d.ts

@@ -1,5 +1,4 @@
 import * as React from 'react';
-import 'antd-mobile/es/components/checkbox/checkbox.css';
 import { CheckboxProps } from './props';
 declare const Checkbox: React.FC<CheckboxProps>;
 export default Checkbox;

package/lib/Checkbox/Checkbox.js

@@ -1,35 +1,9 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
-import clsx from 'clsx';
-import AntdCheckbox from 'antd-mobile/es/components/checkbox';
-import CheckOutline from 'antd-mobile-icons/es/CheckOutline';
-import 'antd-mobile/es/components/checkbox/checkbox.css';
-import { inlineStyle } from '@ray-js/framework-shared';
-import styles from './index.module.less';
+import handleProps from '../utils/handleProps';
 
 var Checkbox = function (props) {
-  var checked = props.checked,
-      disabled = props.disabled,
-      color = props.color,
-      className = props.className,
-      style = props.style;
-  return /*#__PURE__*/React.createElement(AntdCheckbox, {
-    style: inlineStyle(_objectSpread({
-      backgroundColor: disabled ? '#dadada' : '#ffffff'
-    }, style)),
-    disabled: disabled,
-    defaultChecked: checked,
-    className: clsx(styles.checkboxWrapper, className),
-    icon: function icon(checked) {
-      return /*#__PURE__*/React.createElement(CheckOutline, {
-        className: styles.icon,
-        color: color || (disabled ? '#9d9d9d' : '#76c6b8'),
-        style: {
-          visibility: checked ? 'visible' : 'hidden'
-        }
-      });
-    }
-  });
+  // @ts-ignore
+  return /*#__PURE__*/React.createElement("ty-checkbox", handleProps(props));
 };
 
 Checkbox.displayName = 'Checkbox';

package/lib/Checkbox/Checkbox.web.js

@@ -1,35 +1,9 @@
-import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
 import * as React from 'react';
-import clsx from 'clsx';
-import AntdCheckbox from 'antd-mobile/es/components/checkbox';
-import CheckOutline from 'antd-mobile-icons/es/CheckOutline';
-import 'antd-mobile/es/components/checkbox/checkbox.css';
-import { inlineStyle } from '@ray-js/framework-shared';
-import styles from './index.module.less';
+import handleProps from '../utils/handleProps';
 
 var Checkbox = function (props) {
-  var checked = props.checked,
-      disabled = props.disabled,
-      color = props.color,
-      className = props.className,
-      style = props.style;
-  return /*#__PURE__*/React.createElement(AntdCheckbox, {
-    style: inlineStyle(_objectSpread({
-      backgroundColor: disabled ? '#dadada' : '#ffffff'
-    }, style)),
-    disabled: disabled,
-    defaultChecked: checked,
-    className: clsx(styles.checkboxWrapper, className),
-    icon: function icon(checked) {
-      return /*#__PURE__*/React.createElement(CheckOutline, {
-        className: styles.icon,
-        color: color || (disabled ? '#9d9d9d' : '#76c6b8'),
-        style: {
-          visibility: checked ? 'visible' : 'hidden'
-        }
-      });
-    }
-  });
+  // @ts-ignore
+  return /*#__PURE__*/React.createElement("ty-checkbox", handleProps(props));
 };
 
 Checkbox.displayName = 'Checkbox';

package/lib/Checkbox/index.md

@@ -13,13 +13,14 @@ group:
 ## 导入
 
 ```js
-import { Checkbox } from '@ray-js/components';
+import { Checkbox } from '@ray-js/components'
 ```
 
 ## 示例代码
 
 <code src="./demos/basic.tsx" title="基本使用" background="#f2f4f6"/>
-<code src="./demos/checkboxGroup.tsx" title="checkboxGroup" background="#f2f4f6"/>
+<code src="./demos/checkboxGroup.tsx" title="多项选择器组 - 选项" background="#f2f4f6"/>
+<code src="./demos/checkboxGroupChildren.tsx" title="多项选择器组 - 子节点 (仅 Web 端)" background="#f2f4f6"/>
 <code src="./demos/checked.tsx" title="默认选中" background="#f2f4f6"/>
 <code src="./demos/disabled.tsx" title="disabled" background="#f2f4f6"/>
 
@@ -27,7 +28,7 @@ import { Checkbox } from '@ray-js/components';
 
 | 属性 | 类型 | 默认值 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- |
-| value | string |  | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value | RN、微信、涂鸦 |
-| disabled | boolean | false | 是否禁用 | RN、微信、涂鸦 |
-| checked | boolean | false | 当前是否选中，可用来设置默认选中 | RN、微信、涂鸦 |
-| color | string | '#007AFF' | checkbox 的颜色，同 css 的 color | RN、微信、涂鸦 |
+| value | string |  | checkbox 标识，选中时触发 checkbox-group 的 change 事件，并携带 checkbox 的 value | RN、微信、涂鸦、Web |
+| disabled | boolean | false | 是否禁用 | RN、微信、涂鸦、Web |
+| checked | boolean | false | 当前是否选中，可用来设置默认选中 | RN、微信、涂鸦、Web |
+| color | string | '#007AFF' | checkbox 的颜色，同 css 的 color | RN、微信、涂鸦、Web |

package/lib/CheckboxGroup/CheckboxGroup.js

@@ -1,8 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.map.js";
 import * as React from 'react';
+import handleProps from '../utils/handleProps';
+import Label from '../Label';
+import CheckBox from '../Checkbox';
+import { useEventListener } from 'ahooks';
 
 var CheckboxGroup = function (props) {
-  props.onChange;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B0");
+  var options = props.options,
+      name = props.name,
+      disabled = props.disabled,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      children = props.children;
+  var currentNode = React.useRef(null);
+  useEventListener('clickoverlay', function (e) {
+    var _props$onChange2;
+
+    (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 ? void 0 : _props$onChange2.call(props, {
+      type: e.type,
+      value: e.detail.value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-checkbox-group", _extends({
+      ref: currentNode
+    }, handleProps(props)), children || function renderOptions() {
+      return options.map(function (item, index) {
+        var _item$checked;
+
+        return /*#__PURE__*/React.createElement(Label, {
+          key: index + '_' + item.value
+        }, /*#__PURE__*/React.createElement(CheckBox, {
+          value: item.value,
+          checked: (_item$checked = item.checked) !== null && _item$checked !== void 0 ? _item$checked : false,
+          disabled: disabled || item.disabled || false,
+          color: item.color
+        }), item.label);
+      });
+    }())
+  );
 };
 
 CheckboxGroup.displayName = 'CheckboxGroup';

package/lib/CheckboxGroup/CheckboxGroup.web.js

@@ -1,8 +1,51 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import "core-js/modules/es.function.name.js";
+import "core-js/modules/es.array.map.js";
 import * as React from 'react';
+import handleProps from '../utils/handleProps';
+import Label from '../Label';
+import CheckBox from '../Checkbox';
+import { useEventListener } from 'ahooks';
 
 var CheckboxGroup = function (props) {
-  props.onChange;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B0");
+  var options = props.options,
+      name = props.name,
+      disabled = props.disabled,
+      _props$onChange = props.onChange,
+      onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
+      children = props.children;
+  var currentNode = React.useRef(null);
+  useEventListener('clickoverlay', function (e) {
+    var _props$onChange2;
+
+    (_props$onChange2 = props.onChange) === null || _props$onChange2 === void 0 ? void 0 : _props$onChange2.call(props, {
+      type: e.type,
+      value: e.detail.value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-checkbox-group", _extends({
+      ref: currentNode
+    }, handleProps(props)), children || function renderOptions() {
+      return options.map(function (item, index) {
+        var _item$checked;
+
+        return /*#__PURE__*/React.createElement(Label, {
+          key: index + '_' + item.value
+        }, /*#__PURE__*/React.createElement(CheckBox, {
+          value: item.value,
+          checked: (_item$checked = item.checked) !== null && _item$checked !== void 0 ? _item$checked : false,
+          disabled: disabled || item.disabled || false,
+          color: item.color
+        }), item.label);
+      });
+    }())
+  );
 };
 
 CheckboxGroup.displayName = 'CheckboxGroup';

package/lib/CheckboxGroup/index.md

@@ -13,16 +13,16 @@ group:
 ## 导入
 
 ```js
-import { CheckboxGroup } from '@ray-js/components';
+import { CheckboxGroup } from '@ray-js/components'
 ```
 
 ## Props
 
 | 属性 | 类型 | 是否必填 | 默认值 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- | --- |
-| options | CheckboxOption[] | 是 |  | 群组项 | 涂鸦、微信、RN |
-| disabled | boolean | 否 | false | 是否禁用 | 涂鸦、微信、RN |
-| onChange | (event: { type: 'change'; value: string[] }) => void | 否 |  | 选中项发生改变时触发 change 事件 | 涂鸦、微信、RN |
+| options | CheckboxOption[] | 是 |  | 群组项 (Web 端非必填) | 涂鸦、微信、RN、Web |
+| disabled | boolean | 否 | false | 是否禁用 | 涂鸦、微信、RN、Web |
+| onChange | (event: { type: 'change'; value: string[] }) => void | 否 |  | 选中项发生改变时触发 change 事件 | 涂鸦、微信、RN、Web |
 
 ### CheckboxOption
 

package/lib/CheckboxGroup/props.d.ts

@@ -4,10 +4,11 @@ export declare type CheckboxGroupOption = CheckboxProps & {
     label: string;
 };
 export interface CheckboxGroupProps extends BaseProps, TouchEventHandler {
-    options: CheckboxGroupOption[];
+    options?: CheckboxGroupOption[];
     disabled?: boolean;
     onChange?: (event: {
-        type: 'change';
+        type: string;
         value: string[];
+        origin: any;
     }) => void;
 }

package/lib/DatePicker/DatePicker.js

@@ -1,9 +1,60 @@
+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';
 
-// import styles from './index.module.less';
-var DatePicker = function () {
-  // const { disabled, className, style } = props;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B011");
+var DatePicker = function (props) {
+  var children = props.children,
+      onLongClick = props.onLongClick,
+      onTouchStart = props.onTouchStart,
+      onTouchMove = props.onTouchMove,
+      onTouchEnd = props.onTouchEnd,
+      onTouchCancel = props.onTouchCancel,
+      onClick = props.onClick;
+  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
+  });
+
+  var _useTouch = useTouch({
+    onLongClick: onLongClick,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    onTouchCancel: onTouchCancel,
+    onClick: onClick
+  }),
+      _useTouch2 = _slicedToArray(_useTouch, 2),
+      handlers = _useTouch2[1];
+
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-picker", _extends({}, handleProps(props), handlers, {
+      ref: currentNode,
+      mode: "date"
+    }), children)
+  );
 };
 
 DatePicker.displayName = 'DatePicker';

package/lib/DatePicker/DatePicker.web.js

@@ -1,9 +1,60 @@
+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';
 
-// import styles from './index.module.less';
-var DatePicker = function () {
-  // const { disabled, className, style } = props;
-  return /*#__PURE__*/React.createElement("div", null, "\u6682\u672A\u5B9E\u73B011");
+var DatePicker = function (props) {
+  var children = props.children,
+      onLongClick = props.onLongClick,
+      onTouchStart = props.onTouchStart,
+      onTouchMove = props.onTouchMove,
+      onTouchEnd = props.onTouchEnd,
+      onTouchCancel = props.onTouchCancel,
+      onClick = props.onClick;
+  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
+  });
+
+  var _useTouch = useTouch({
+    onLongClick: onLongClick,
+    onTouchStart: onTouchStart,
+    onTouchMove: onTouchMove,
+    onTouchEnd: onTouchEnd,
+    onTouchCancel: onTouchCancel,
+    onClick: onClick
+  }),
+      _useTouch2 = _slicedToArray(_useTouch, 2),
+      handlers = _useTouch2[1];
+
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-picker", _extends({}, handleProps(props), handlers, {
+      ref: currentNode,
+      mode: "date"
+    }), children)
+  );
 };
 
 DatePicker.displayName = 'DatePicker';

package/lib/DatePicker/index.md

@@ -13,7 +13,7 @@ group:
 ## 导入
 
 ```js
-import { DatePicker } from '@ray-js/components';
+import { DatePicker } from '@ray-js/components'
 ```
 
 ## 示例代码
@@ -27,10 +27,10 @@ import { DatePicker } from '@ray-js/components';
 
 | 属性 | 类型 | 默认值 | 必填 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- | --- |
-| disabled | boolean | false | 否 | 是否禁用 | RN、涂鸦、微信 |
-| value | string |  | 否 | 当前选择的日期 | RN、涂鸦、微信 |
-| onChange | func(event) |  | 否 | 选择时触发 | RN、涂鸦、微信 |
-| onCancel | func(event) |  | 否 | 取消选择时触发 | RN、涂鸦、微信 |
-| start | string |  | 否 | 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" | RN、涂鸦、微信 |
-| end | string |  | 否 | 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" | RN、涂鸦、微信 |
-| fields | string | day | 否 | 有效值 year,month,day，表示选择器的粒度 | RN、涂鸦、微信 |
+| disabled | boolean | false | 否 | 是否禁用 | RN、涂鸦、微信、Web |
+| value | string |  | 否 | 当前选择的日期 | RN、涂鸦、微信、Web |
+| onChange | func(event) |  | 否 | 选择时触发 | RN、涂鸦、微信、Web |
+| onCancel | func(event) |  | 否 | 取消选择时触发 | RN、涂鸦、微信、Web |
+| start | string |  | 否 | 表示有效日期范围的开始，字符串格式为"YYYY-MM-DD" | RN、涂鸦、微信、Web |
+| end | string |  | 否 | 表示有效日期范围的结束，字符串格式为"YYYY-MM-DD" | RN、涂鸦、微信、Web |
+| fields | string | day | 否 | 有效值 year,month,day，表示选择器的粒度 | RN、涂鸦、微信、Web |