@ray-js/components 0.3.29 → 0.4.0

package/lib/Button/Button.js

@@ -1,57 +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", "formType", "type", "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,
-      formType = props.formType,
-      type = props.type,
-      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);
-    } // TODO 原生表单类型type 和 按钮主题类型type重合了
-    ,
-    type: formType || type
-  }, handlers, restProps));
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-button", handleProps(props), props.children)
+  );
 };
 
 Button.defaultProps = defaultButtonProps;

package/lib/Button/Button.web.js

@@ -1,57 +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", "formType", "type", "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,
-      formType = props.formType,
-      type = props.type,
-      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);
-    } // TODO 原生表单类型type 和 按钮主题类型type重合了
-    ,
-    type: formType || type
-  }, handlers, restProps));
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-button", handleProps(props), props.children)
+  );
 };
 
 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/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 |

package/lib/DatePicker/props.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 import { BaseProps } from '../types';
 import { TouchEventHandler } from '@ray-js/framework-shared';
 declare type changeValue = (e: {
@@ -19,6 +20,7 @@ export interface DatePickerProps extends BaseProps, TouchEventHandler {
     onCancel?: CancelEvent;
     confirmText?: string;
     cancelText?: string;
+    children?: React.ReactNode | string;
 }
 export declare const defaultProps: DatePickerProps;
 export interface IState {

package/lib/Form/Form.android.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _this=this,_jsxFileName="/drone/src/packages/components/src/Form/Form.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;}var Form=function(){return React.createElement(_reactNative.Text,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:6,columnNumber:10}},"\u6682\u672A\u5B9E\u73B0");};var _default=Form;exports.default=_default;

package/lib/Form/Form.d.ts

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

package/lib/Form/Form.ios.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var React=_interopRequireWildcard(require("react"));var _reactNative=require("react-native");var _this=this,_jsxFileName="/drone/src/packages/components/src/Form/Form.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;}var Form=function(){return React.createElement(_reactNative.Text,{__self:_this,__source:{fileName:_jsxFileName,lineNumber:6,columnNumber:10}},"\u6682\u672A\u5B9E\u73B0");};var _default=Form;exports.default=_default;

package/lib/Form/Form.js

@@ -0,0 +1,37 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
+var _excluded = ["onSubmit", "onReset"];
+import * as React from 'react';
+import handleProps from '../utils/handleProps';
+import { useEventListener } from 'ahooks';
+
+var Form = function (props) {
+  var onSubmit = props.onSubmit,
+      onReset = props.onReset,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  var currentNode = React.useRef(null);
+  useEventListener('submit', function (e) {
+    onSubmit(_objectSpread(_objectSpread({}, e.detail || {}), {}, {
+      origin: e,
+      type: 'submit'
+    }));
+  }, {
+    target: currentNode
+  });
+  useEventListener('reset', function (e) {
+    onReset(_objectSpread(_objectSpread({}, e.detail || {}), {}, {
+      origin: e,
+      type: 'reset'
+    }));
+  }, {
+    target: currentNode
+  }); // @ts-ignore
+
+  return /*#__PURE__*/React.createElement("ty-form", _extends({
+    ref: currentNode
+  }, handleProps(restProps)));
+};
+
+export default Form;