@ray-js/components 0.3.27 → 0.3.30

package/lib/Input/Input.js

@@ -1,100 +1,76 @@
 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 = ["name", "id", "className", "style", "disabled", "type", "confirmType", "value", "focus", "maxLength", "onBlur", "onConfirm", "onFocus", "onInput", "password", "placeholder", "placeholderStyle"];
-import "core-js/modules/es.function.name.js";
+var _excluded = ["placeholderStyle", "className", "maxLength", "onBlur", "onFocus", "onConfirm"];
 import * as React from 'react';
 import clsx from 'clsx';
+import { useEventListener } from 'ahooks';
 import { inlineStyle, useStylesheet } from '@ray-js/framework-shared';
 import { defaultInputProps } from './props';
-import { generateId } from '../core';
 import styles from './index.module.less';
-var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var name = props.name,
-      _props$id = props.id,
-      id = _props$id === void 0 ? generateId() : _props$id,
+import handleProps from '../utils/handleProps';
+var Input = /*#__PURE__*/React.forwardRef(function (props) {
+  var placeholderStyle = props.placeholderStyle,
       className = props.className,
-      style = props.style,
-      disabled = props.disabled,
-      type = props.type,
-      _props$confirmType = props.confirmType,
-      confirmType = _props$confirmType === void 0 ? 'done' : _props$confirmType,
-      _props$value = props.value,
-      value = _props$value === void 0 ? '' : _props$value,
-      focus = props.focus,
       maxLength = props.maxLength,
       onBlur = props.onBlur,
-      onConfirm = props.onConfirm,
       onFocus = props.onFocus,
-      onInput = props.onInput,
-      password = props.password,
-      placeholder = props.placeholder,
-      placeholderStyle = props.placeholderStyle,
+      onConfirm = props.onConfirm,
       restProps = _objectWithoutProperties(props, _excluded);
 
   var _useStylesheet = useStylesheet(inlineStyle(placeholderStyle)),
       _useStylesheet2 = _slicedToArray(_useStylesheet, 1),
       placeholderStyleClassName = _useStylesheet2[0];
 
-  var _React$useState = React.useState(value),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      internalValue = _React$useState2[0],
-      setValue = _React$useState2[1];
-
-  var inputType = function () {
-    if (password) {
-      return 'password';
-    } else if (confirmType === 'search') {
-      return 'search';
-    }
-
-    return type;
-  }();
-
-  React.useEffect(function () {
-    var inputDOM = document.getElementById(id);
+  var currentNode = React.useRef(null);
+  useEventListener('focus', function (e) {
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+      type: 'focus',
+      value: e.detail.value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('blur', function (e) {
+    var value = e.target.value;
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+      type: 'blur',
+      value: value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('confirm', function (e) {
+    var value = e.target.value;
+    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
+      type: 'confirm',
+      value: value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-input", _extends({}, handleProps(restProps), {
+      maxlength: maxLength,
+      onInput: function (e) {
+        var _props$onInput;
 
-    if (focus) {
-      inputDOM.focus();
-    } else {
-      inputDOM.blur();
-    }
-  }, [focus]);
-  React.useEffect(function () {
-    setValue(value);
-  }, [value]);
-  return /*#__PURE__*/React.createElement("input", _extends({
-    ref: ref,
-    id: id,
-    name: name,
-    type: inputType,
-    onKeyPress: function (e) {
-      if (e.key === 'Enter' && typeof onConfirm === 'function') {
-        onConfirm(e);
-      }
-    },
-    style: inlineStyle(style),
-    disabled: disabled,
-    placeholder: placeholder,
-    value: internalValue,
-    maxLength: maxLength,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onChange: function (event) {
-      var value = event.target.value;
-      event.detail = {
-        value: value
-      };
-      event.value = value;
-      setValue(value);
-      onInput === null || onInput === void 0 ? void 0 : onInput({
-        value: value,
-        origin: event
-      });
-    },
-    autoFocus: focus,
-    className: clsx('ray-input', styles.input, className, placeholderStyleClassName)
-  }, restProps));
+        var value = e.target.value;
+        (_props$onInput = props.onInput) === null || _props$onInput === void 0 ? void 0 : _props$onInput.call(props, {
+          type: 'input',
+          value: value,
+          origin: e
+        });
+      },
+      class: clsx('ray-input', styles.input, className, placeholderStyleClassName),
+      ref: currentNode
+    }))
+  );
 });
 Input.defaultProps = defaultInputProps;
 export default Input;

package/lib/Input/Input.web.js

@@ -1,100 +1,76 @@
 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 = ["name", "id", "className", "style", "disabled", "type", "confirmType", "value", "focus", "maxLength", "onBlur", "onConfirm", "onFocus", "onInput", "password", "placeholder", "placeholderStyle"];
-import "core-js/modules/es.function.name.js";
+var _excluded = ["placeholderStyle", "className", "maxLength", "onBlur", "onFocus", "onConfirm"];
 import * as React from 'react';
 import clsx from 'clsx';
+import { useEventListener } from 'ahooks';
 import { inlineStyle, useStylesheet } from '@ray-js/framework-shared';
 import { defaultInputProps } from './props';
-import { generateId } from '../core';
 import styles from './index.module.less';
-var Input = /*#__PURE__*/React.forwardRef(function (props, ref) {
-  var name = props.name,
-      _props$id = props.id,
-      id = _props$id === void 0 ? generateId() : _props$id,
+import handleProps from '../utils/handleProps';
+var Input = /*#__PURE__*/React.forwardRef(function (props) {
+  var placeholderStyle = props.placeholderStyle,
       className = props.className,
-      style = props.style,
-      disabled = props.disabled,
-      type = props.type,
-      _props$confirmType = props.confirmType,
-      confirmType = _props$confirmType === void 0 ? 'done' : _props$confirmType,
-      _props$value = props.value,
-      value = _props$value === void 0 ? '' : _props$value,
-      focus = props.focus,
       maxLength = props.maxLength,
       onBlur = props.onBlur,
-      onConfirm = props.onConfirm,
       onFocus = props.onFocus,
-      onInput = props.onInput,
-      password = props.password,
-      placeholder = props.placeholder,
-      placeholderStyle = props.placeholderStyle,
+      onConfirm = props.onConfirm,
       restProps = _objectWithoutProperties(props, _excluded);
 
   var _useStylesheet = useStylesheet(inlineStyle(placeholderStyle)),
       _useStylesheet2 = _slicedToArray(_useStylesheet, 1),
       placeholderStyleClassName = _useStylesheet2[0];
 
-  var _React$useState = React.useState(value),
-      _React$useState2 = _slicedToArray(_React$useState, 2),
-      internalValue = _React$useState2[0],
-      setValue = _React$useState2[1];
-
-  var inputType = function () {
-    if (password) {
-      return 'password';
-    } else if (confirmType === 'search') {
-      return 'search';
-    }
-
-    return type;
-  }();
-
-  React.useEffect(function () {
-    var inputDOM = document.getElementById(id);
+  var currentNode = React.useRef(null);
+  useEventListener('focus', function (e) {
+    onFocus === null || onFocus === void 0 ? void 0 : onFocus({
+      type: 'focus',
+      value: e.detail.value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('blur', function (e) {
+    var value = e.target.value;
+    onBlur === null || onBlur === void 0 ? void 0 : onBlur({
+      type: 'blur',
+      value: value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  useEventListener('confirm', function (e) {
+    var value = e.target.value;
+    onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm({
+      type: 'confirm',
+      value: value,
+      origin: e
+    });
+  }, {
+    target: currentNode
+  });
+  return (
+    /*#__PURE__*/
+    // @ts-ignore
+    React.createElement("ty-input", _extends({}, handleProps(restProps), {
+      maxlength: maxLength,
+      onInput: function (e) {
+        var _props$onInput;
 
-    if (focus) {
-      inputDOM.focus();
-    } else {
-      inputDOM.blur();
-    }
-  }, [focus]);
-  React.useEffect(function () {
-    setValue(value);
-  }, [value]);
-  return /*#__PURE__*/React.createElement("input", _extends({
-    ref: ref,
-    id: id,
-    name: name,
-    type: inputType,
-    onKeyPress: function (e) {
-      if (e.key === 'Enter' && typeof onConfirm === 'function') {
-        onConfirm(e);
-      }
-    },
-    style: inlineStyle(style),
-    disabled: disabled,
-    placeholder: placeholder,
-    value: internalValue,
-    maxLength: maxLength,
-    onFocus: onFocus,
-    onBlur: onBlur,
-    onChange: function (event) {
-      var value = event.target.value;
-      event.detail = {
-        value: value
-      };
-      event.value = value;
-      setValue(value);
-      onInput === null || onInput === void 0 ? void 0 : onInput({
-        value: value,
-        origin: event
-      });
-    },
-    autoFocus: focus,
-    className: clsx('ray-input', styles.input, className, placeholderStyleClassName)
-  }, restProps));
+        var value = e.target.value;
+        (_props$onInput = props.onInput) === null || _props$onInput === void 0 ? void 0 : _props$onInput.call(props, {
+          type: 'input',
+          value: value,
+          origin: e
+        });
+      },
+      class: clsx('ray-input', styles.input, className, placeholderStyleClassName),
+      ref: currentNode
+    }))
+  );
 });
 Input.defaultProps = defaultInputProps;
 export default Input;

package/lib/Input/index.md

@@ -13,7 +13,7 @@ group:
 ## 导入
 
 ```js
-import { Input } from '@ray-js/components';
+import { Input } from '@ray-js/components'
 ```
 
 ## 示例代码
@@ -26,18 +26,18 @@ import { Input } from '@ray-js/components';
 
 | 属性 | 类型 | 默认值 | 说明 | 支持平台 |
 | --- | --- | --- | --- | --- |
-| className | string |  | 样式名 | RN、涂鸦、微信 |
-| value | string |  | 内容 | RN、涂鸦、微信 |
-| type | string | text | 类型 text/number/idcard/digit | RN、涂鸦、微信 |
-| password | boolean | false | 是否为密码 | RN、涂鸦、微信 |
-| placeholder | string |  | 占位内容 | RN、涂鸦、微信 |
-| disabled | boolean | false | 是否禁用 | RN、涂鸦、微信 |
-| maxLength | number |  | 内容最大长度 | RN、涂鸦、微信 |
-| confirmType | "send" or "search" or "next" or "go" or "done" | done | 设置键盘右下角按钮的文字 | 微信、RN |
+| className | string |  | 样式名 | RN、涂鸦、微信、Web |
+| value | string |  | 内容 | RN、涂鸦、微信、Web |
+| type | string | text | 类型 text/number/idcard/digit | RN、涂鸦、微信、Web |
+| password | boolean | false | 是否为密码 | RN、涂鸦、微信、Web |
+| placeholder | string |  | 占位内容 | RN、涂鸦、微信、Web |
+| disabled | boolean | false | 是否禁用 | RN、涂鸦、微信、Web |
+| maxLength | number |  | 内容最大长度 | RN、涂鸦、微信、Web |
+| confirmType | "send" or "search" or "next" or "go" or "done" | done | 设置键盘右下角按钮的文字 | 微信、RN、Web |
 | selectionStart | number | -1 | 光标起始位置，自动聚集时有效，需与 selectionEnd 搭配使用 | 微信 |
 | selectionEnd | number | -1 | 光标结束位置，自动聚集时有效，需与 selectionStart 搭配使用 | 微信 |
-| cursor | number | false | 指定 focus 时的光标位置 | RN、微信 |
-| focus | boolean | false | 获取焦点 | RN、涂鸦、微信 |
-| onInput | func(event: any) |  | 输入事件 | RN、涂鸦、微信 |
-| onConfirm | func(event: any) |  | 确认事件 | RN、涂鸦、微信 |
-| onBlur | func(event: any) |  | 丢焦事件 | RN、涂鸦、微信 |
+| cursor | number | false | 指定 focus 时的光标位置 | RN、微信、Web |
+| focus | boolean | false | 获取焦点 | RN、涂鸦、微信、Web |
+| onInput | func(event: any) |  | 输入事件 | RN、涂鸦、微信、Web |
+| onConfirm | func(event: any) |  | 确认事件 | RN、涂鸦、微信、Web |
+| onBlur | func(event: any) |  | 丢焦事件 | RN、涂鸦、微信、Web |

package/lib/Label/Label.android.js

@@ -1 +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 _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=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _jsxFileName="/drone/src/packages/components/src/Label/Label.native.tsx";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 Checkbox=function(_React$Component){(0,_inherits2.default)(Checkbox,_React$Component);var _super=_createSuper(Checkbox);function Checkbox(){(0,_classCallCheck2.default)(this,Checkbox);return _super.apply(this,arguments);}(0,_createClass2.default)(Checkbox,[{key:"render",value:function render(){return _react.default.createElement(_reactNative.View,{__self:this,__source:{fileName:_jsxFileName,lineNumber:5,columnNumber:12}},_react.default.createElement(_reactNative.Text,{__self:this,__source:{fileName:_jsxFileName,lineNumber:6,columnNumber:9}},"\u672A\u5B9E\u73B0"));}}]);return Checkbox;}(_react.default.Component);exports.default=Checkbox;
+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 _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=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _jsxFileName="/drone/src/packages/components/src/Label/Label.native.tsx";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 Checkbox=function(_React$Component){(0,_inherits2.default)(Checkbox,_React$Component);var _super=_createSuper(Checkbox);function Checkbox(){(0,_classCallCheck2.default)(this,Checkbox);return _super.apply(this,arguments);}(0,_createClass2.default)(Checkbox,[{key:"render",value:function render(){return _react.default.createElement(_reactNative.View,{__self:this,__source:{fileName:_jsxFileName,lineNumber:5,columnNumber:12}},_react.default.createElement("span",{__self:this,__source:{fileName:_jsxFileName,lineNumber:6,columnNumber:9}},"\u672A\u5B9E\u73B0"));}}]);return Checkbox;}(_react.default.Component);exports.default=Checkbox;

package/lib/Label/Label.ios.js

@@ -1 +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 _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=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _jsxFileName="/drone/src/packages/components/src/Label/Label.native.tsx";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 Checkbox=function(_React$Component){(0,_inherits2.default)(Checkbox,_React$Component);var _super=_createSuper(Checkbox);function Checkbox(){(0,_classCallCheck2.default)(this,Checkbox);return _super.apply(this,arguments);}(0,_createClass2.default)(Checkbox,[{key:"render",value:function render(){return _react.default.createElement(_reactNative.View,{__self:this,__source:{fileName:_jsxFileName,lineNumber:5,columnNumber:12}},_react.default.createElement(_reactNative.Text,{__self:this,__source:{fileName:_jsxFileName,lineNumber:6,columnNumber:9}},"\u672A\u5B9E\u73B0"));}}]);return Checkbox;}(_react.default.Component);exports.default=Checkbox;
+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 _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=_interopRequireDefault(require("react"));var _reactNative=require("react-native");var _jsxFileName="/drone/src/packages/components/src/Label/Label.native.tsx";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 Checkbox=function(_React$Component){(0,_inherits2.default)(Checkbox,_React$Component);var _super=_createSuper(Checkbox);function Checkbox(){(0,_classCallCheck2.default)(this,Checkbox);return _super.apply(this,arguments);}(0,_createClass2.default)(Checkbox,[{key:"render",value:function render(){return _react.default.createElement(_reactNative.View,{__self:this,__source:{fileName:_jsxFileName,lineNumber:5,columnNumber:12}},_react.default.createElement("span",{__self:this,__source:{fileName:_jsxFileName,lineNumber:6,columnNumber:9}},"\u672A\u5B9E\u73B0"));}}]);return Checkbox;}(_react.default.Component);exports.default=Checkbox;

package/lib/Label/Label.js

@@ -1,24 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "style", "className", "htmlFor", "children"];
+var _excluded = ["htmlFor"];
 import * as React from 'react';
-import clsx from 'clsx';
-import styles from './index.module.less';
+import handleProps from '../utils/handleProps';
 
 var Label = function (props) {
-  var id = props.id,
-      style = props.style,
-      className = props.className,
-      htmlFor = props.htmlFor,
-      children = props.children,
-      restProps = _objectWithoutProperties(props, _excluded);
+  var htmlFor = props.htmlFor,
+      restProps = _objectWithoutProperties(props, _excluded); // @ts-ignore
 
-  return /*#__PURE__*/React.createElement("label", _extends({
-    id: id,
-    style: style,
-    className: clsx('ray-label', styles.label, className),
-    htmlFor: htmlFor
-  }, restProps), children);
+
+  return /*#__PURE__*/React.createElement("ty-label", _extends({
+    for: htmlFor
+  }, handleProps(restProps)));
 };
 
 export default Label;

package/lib/Label/Label.web.js

@@ -1,24 +1,17 @@
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["id", "style", "className", "htmlFor", "children"];
+var _excluded = ["htmlFor"];
 import * as React from 'react';
-import clsx from 'clsx';
-import styles from './index.module.less';
+import handleProps from '../utils/handleProps';
 
 var Label = function (props) {
-  var id = props.id,
-      style = props.style,
-      className = props.className,
-      htmlFor = props.htmlFor,
-      children = props.children,
-      restProps = _objectWithoutProperties(props, _excluded);
+  var htmlFor = props.htmlFor,
+      restProps = _objectWithoutProperties(props, _excluded); // @ts-ignore
 
-  return /*#__PURE__*/React.createElement("label", _extends({
-    id: id,
-    style: style,
-    className: clsx('ray-label', styles.label, className),
-    htmlFor: htmlFor
-  }, restProps), children);
+
+  return /*#__PURE__*/React.createElement("ty-label", _extends({
+    for: htmlFor
+  }, handleProps(restProps)));
 };
 
 export default Label;

package/lib/Label/index.md

@@ -0,0 +1,31 @@
+---
+nav:
+  title: 组件
+  path: /components
+group:
+  title: 表单组件
+---
+
+# Label
+
+用来改进表单组件的可用性。
+
+使用 for 属性找到对应的 id，或者将控件放在该标签下，当点击时，就会触发对应的控件。 for 优先级高于内部控件，内部有多个控件的时候默认触发第一个控件。 checkbox, radio, switch。
+
+标签文本不仅与其相应的文本输入元素在视觉上相关联，程序中也是如此。 这意味着，当用户聚焦到这个表单输入元素时，屏幕阅读器可以读出标签，让使用辅助技术的用户更容易理解应输入什么数据。 你可以点击关联的标签来聚焦或者激活这个输入元素，就像直接点击输入元素一样。这扩大了元素的可点击区域，让包括使用触屏设备在内的用户更容易激活这个元素。 将一个 `<label>` 和一个 `<input>` 元素匹配在一起，你需要给 `<input>` 一个 id 属性。而 `<label>` 需要一个 for 属性，其值和 `<input>` 的 id 一样。 另外，你也可以将 `<input>` 直接放在 `<label>` 里，此时则不需要 for 和 id 属性，联系已隐含存在。
+
+## 导入
+
+```js
+import { Label } from '@ray-js/components'
+```
+
+## 示例代码
+
+<code src="./demos/basic.tsx" title="Label" background="#f2f4f6" height="500px" />
+
+## 属性说明
+
+| 属性名  | 类型   | 默认值 | 必填 | 说明          | 支持平台        |
+| ------- | ------ | ------ | ---- | ------------- | --------------- |
+| htmlFor | string |        | 否   | 绑定控件的 id | Web、涂鸦、微信 |

package/lib/Label/props.d.ts

@@ -1,4 +1,11 @@
+/// <reference types="react" />
 import { BaseProps } from '../types';
 export interface LabelProps extends BaseProps {
+    /**
+     * @description.en id bound to a control
+     * @description.zh 绑定控件的 id
+     * @default null
+     */
     htmlFor?: string;
+    children?: React.ReactNode;
 }

package/lib/Motion/Fade/index.js

@@ -18,7 +18,7 @@ var Fade = /*#__PURE__*/function (_React$Component) {
   _createClass(Fade, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("text", null, "\u672A\u5B9E\u73B0"));
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
     }
   }]);
 

package/lib/Motion/Fade/index.web.js

@@ -18,7 +18,7 @@ var Fade = /*#__PURE__*/function (_React$Component) {
   _createClass(Fade, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("text", null, "\u672A\u5B9E\u73B0"));
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
     }
   }]);
 

package/lib/Motion/PullUp/index.js

@@ -18,7 +18,7 @@ var Fade = /*#__PURE__*/function (_React$Component) {
   _createClass(Fade, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("text", null, "\u672A\u5B9E\u73B0"));
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
     }
   }]);
 

package/lib/Motion/PullUp/index.web.js

@@ -18,7 +18,7 @@ var Fade = /*#__PURE__*/function (_React$Component) {
   _createClass(Fade, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("text", null, "\u672A\u5B9E\u73B0"));
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
     }
   }]);
 

package/lib/Motion/PushDown/index.js

@@ -18,7 +18,7 @@ var Fade = /*#__PURE__*/function (_React$Component) {
   _createClass(Fade, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("text", null, "\u672A\u5B9E\u73B0"));
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
     }
   }]);
 

package/lib/Motion/PushDown/index.web.js

@@ -18,7 +18,7 @@ var Fade = /*#__PURE__*/function (_React$Component) {
   _createClass(Fade, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("text", null, "\u672A\u5B9E\u73B0"));
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
     }
   }]);
 

package/lib/Motion/ScaleFadeIn/index.js

@@ -18,7 +18,7 @@ var Fade = /*#__PURE__*/function (_React$Component) {
   _createClass(Fade, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("text", null, "\u672A\u5B9E\u73B0"));
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
     }
   }]);
 

package/lib/Motion/ScaleFadeIn/index.web.js

@@ -18,7 +18,7 @@ var Fade = /*#__PURE__*/function (_React$Component) {
   _createClass(Fade, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("text", null, "\u672A\u5B9E\u73B0"));
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
     }
   }]);
 

package/lib/Motion/ScalePullDown/index.js

@@ -18,7 +18,7 @@ var Fade = /*#__PURE__*/function (_React$Component) {
   _createClass(Fade, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("text", null, "\u672A\u5B9E\u73B0"));
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
     }
   }]);
 

package/lib/Motion/ScalePullDown/index.web.js

@@ -18,7 +18,7 @@ var Fade = /*#__PURE__*/function (_React$Component) {
   _createClass(Fade, [{
     key: "render",
     value: function render() {
-      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("text", null, "\u672A\u5B9E\u73B0"));
+      return /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement("span", null, "\u672A\u5B9E\u73B0"));
     }
   }]);
 

package/lib/PageContainer/PageContainer.android.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:6,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.d.ts

@@ -1,6 +1,4 @@
+import { FC } from 'react';
 import { PageContainerProps } from './props';
-declare function PageContainer(props: PageContainerProps): JSX.Element;
-declare namespace PageContainer {
-    var defaultProps: Partial<PageContainerProps>;
-}
+declare const PageContainer: FC<PageContainerProps>;
 export default PageContainer;

package/lib/PageContainer/PageContainer.ios.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:6,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;