@ray-js/components 0.3.0-beta.1c347991

package/lib/Button/Button.android.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _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 _icons=require("../assets/icons");var _props=require("./props");var _utils=require("../utils");var _this=this,_jsxFileName="/drone/src/packages/components/src/Button/Button.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 Loading=function(props){var rotate=_react.default.useRef(new _reactNative.Animated.Value(0)).current;var tintColor=props.tintColor;_react.default.useEffect(function(){var animation=_reactNative.Animated.loop(_reactNative.Animated.timing(rotate,{toValue:1,duration:1000,easing:_reactNative.Easing.linear,useNativeDriver:true,isInteraction:false}));animation.start();return function(){animation.stop();};},[]);var rotateDeg=rotate.interpolate({inputRange:[0,1],outputRange:['0deg','360deg']});return _react.default.createElement(_reactNative.Animated.View,{style:[styles.loading,{transform:[{rotate:rotateDeg}]}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:37,columnNumber:10}},_react.default.createElement(_reactNative.Image,{source:_icons.iconList.loading,style:[styles.loadingImg,{tintColor:tintColor}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:42,columnNumber:7}}));};var Button=function(_React$Component){(0,_inherits2.default)(Button,_React$Component);var _super=_createSuper(Button);function Button(){var _this2;(0,_classCallCheck2.default)(this,Button);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_super.call.apply(_super,[this].concat(args));_this2.$touchable=_react.default.createRef();_this2.isTouchEnd=false;_this2.pressInTimer=null;_this2.pressOutTimer=null;_this2.state={isHover:false};_this2.onPress=function(){var _this2$props=_this2.props,disabled=_this2$props.disabled,onClick=_this2$props.onClick;!disabled&&typeof onClick==='function'&&onClick({type:'click'});};_this2.onPressIn=function(){var _this2$props2=_this2.props,hoverStartTime=_this2$props2.hoverStartTime,hoverStyle=_this2$props2.hoverStyle;_this2.isTouchEnd=false;if(hoverStyle){_this2.pressInTimer=setTimeout(function(){_this2.setState({isHover:true},function(){if(_this2.isTouchEnd){_this2.stopHover();}});clearTimeout(_this2.pressInTimer);},hoverStartTime);}};_this2.stopHover=function(){var hoverStayTime=_this2.props.hoverStayTime;_this2.pressOutTimer=setTimeout(function(){_this2.setState({isHover:false});clearTimeout(_this2.pressOutTimer);},hoverStayTime);};_this2.onPressOut=function(){var hoverStyle=_this2.props.hoverStyle;var isHover=_this2.state.isHover;_this2.isTouchEnd=true;if(hoverStyle&&isHover){_this2.stopHover();}};_this2._simulateNativePress=function(evt){var node=_this2.$touchable.current;node&&node.props.onPress&&node.props.onPress(evt);};return _this2;}(0,_createClass2.default)(Button,[{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this.pressOutTimer);clearTimeout(this.pressInTimer);}},{key:"render",value:function render(){var _this3=this;var _this$props=this.props,loading=_this$props.loading,style=_this$props.style,size=_this$props.size,children=_this$props.children,disabled=_this$props.disabled,type=_this$props.type,plain=_this$props.plain,hoverStyle=_this$props.hoverStyle;var isDefaultSize=size==='default';var isDefaultType=type==='default';var isPrimaryType=type==='primary';var borderColor=isPrimaryType?'#007AFF':isDefaultType?'rgba(0, 0, 0, 0.2)':'#FF4444';var backgroundColor=disabled?'rgba(0, 0, 0, 0.2)':plain?'transparent':isPrimaryType?'#007AFF':'#FFF';var textColor=disabled?'#FFF':plain?borderColor:isDefaultType?'#007AFF':type==='warn'?'#FF4444':'#FFFFFF';var textHoverStyle=this.state.isHover?(0,_utils.extracteTextStyle)(hoverStyle):{};return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this.onPress,onLongPress:this.onPress,onPressIn:this.onPressIn,onPressOut:this.onPressOut,ref:this.$touchable,disabled:disabled,__self:this,__source:{fileName:_jsxFileName,lineNumber:147,columnNumber:12}},_react.default.createElement(_reactNative.View,{style:[styles.btn,!isDefaultSize&&styles.btnMini,{backgroundColor:backgroundColor},plain&&{borderWidth:1,borderColor:borderColor},style,this.state.isHover&&hoverStyle],__self:this,__source:{fileName:_jsxFileName,lineNumber:148,columnNumber:9}},loading&&_react.default.createElement(Loading,{tintColor:textColor,__self:this,__source:{fileName:_jsxFileName,lineNumber:151,columnNumber:23}}),Array.isArray(children)?children.map(function(c,i){return _react.default.createElement(_reactNative.Text,{key:i,style:[styles.btnText,!isDefaultSize&&styles.btnTextMini,{color:textColor},textHoverStyle],__self:_this3,__source:{fileName:_jsxFileName,lineNumber:152,columnNumber:76}},c);}):['string','number'].indexOf(typeof children)>-1?_react.default.createElement(_reactNative.Text,{style:[styles.btnText,!isDefaultSize&&styles.btnTextMini,{color:textColor},textHoverStyle],__self:this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:79}},children):children));}}]);return Button;}(_react.default.Component);Button.displayName='_Button';Button.defaultProps=_props.defaultButtonProps;var _default=Button;exports.default=_default;var styles=_reactNative.StyleSheet.create({btn:{flexDirection:'row',justifyContent:'center',alignItems:'center',paddingHorizontal:14,height:46,backgroundColor:'#F8F8F8',borderRadius:5},loading:{marginRight:5},loadingImg:{width:20,height:20},btnMini:{height:30},btnText:{fontSize:18,color:'#000'},btnTextMini:{fontSize:13}});

package/lib/Button/Button.d.ts

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

package/lib/Button/Button.ios.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _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 _icons=require("../assets/icons");var _props=require("./props");var _utils=require("../utils");var _this=this,_jsxFileName="/drone/src/packages/components/src/Button/Button.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 Loading=function(props){var rotate=_react.default.useRef(new _reactNative.Animated.Value(0)).current;var tintColor=props.tintColor;_react.default.useEffect(function(){var animation=_reactNative.Animated.loop(_reactNative.Animated.timing(rotate,{toValue:1,duration:1000,easing:_reactNative.Easing.linear,useNativeDriver:true,isInteraction:false}));animation.start();return function(){animation.stop();};},[]);var rotateDeg=rotate.interpolate({inputRange:[0,1],outputRange:['0deg','360deg']});return _react.default.createElement(_reactNative.Animated.View,{style:[styles.loading,{transform:[{rotate:rotateDeg}]}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:37,columnNumber:10}},_react.default.createElement(_reactNative.Image,{source:_icons.iconList.loading,style:[styles.loadingImg,{tintColor:tintColor}],__self:_this,__source:{fileName:_jsxFileName,lineNumber:42,columnNumber:7}}));};var Button=function(_React$Component){(0,_inherits2.default)(Button,_React$Component);var _super=_createSuper(Button);function Button(){var _this2;(0,_classCallCheck2.default)(this,Button);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this2=_super.call.apply(_super,[this].concat(args));_this2.$touchable=_react.default.createRef();_this2.isTouchEnd=false;_this2.pressInTimer=null;_this2.pressOutTimer=null;_this2.state={isHover:false};_this2.onPress=function(){var _this2$props=_this2.props,disabled=_this2$props.disabled,onClick=_this2$props.onClick;!disabled&&typeof onClick==='function'&&onClick({type:'click'});};_this2.onPressIn=function(){var _this2$props2=_this2.props,hoverStartTime=_this2$props2.hoverStartTime,hoverStyle=_this2$props2.hoverStyle;_this2.isTouchEnd=false;if(hoverStyle){_this2.pressInTimer=setTimeout(function(){_this2.setState({isHover:true},function(){if(_this2.isTouchEnd){_this2.stopHover();}});clearTimeout(_this2.pressInTimer);},hoverStartTime);}};_this2.stopHover=function(){var hoverStayTime=_this2.props.hoverStayTime;_this2.pressOutTimer=setTimeout(function(){_this2.setState({isHover:false});clearTimeout(_this2.pressOutTimer);},hoverStayTime);};_this2.onPressOut=function(){var hoverStyle=_this2.props.hoverStyle;var isHover=_this2.state.isHover;_this2.isTouchEnd=true;if(hoverStyle&&isHover){_this2.stopHover();}};_this2._simulateNativePress=function(evt){var node=_this2.$touchable.current;node&&node.props.onPress&&node.props.onPress(evt);};return _this2;}(0,_createClass2.default)(Button,[{key:"componentWillUnmount",value:function componentWillUnmount(){clearTimeout(this.pressOutTimer);clearTimeout(this.pressInTimer);}},{key:"render",value:function render(){var _this3=this;var _this$props=this.props,loading=_this$props.loading,style=_this$props.style,size=_this$props.size,children=_this$props.children,disabled=_this$props.disabled,type=_this$props.type,plain=_this$props.plain,hoverStyle=_this$props.hoverStyle;var isDefaultSize=size==='default';var isDefaultType=type==='default';var isPrimaryType=type==='primary';var borderColor=isPrimaryType?'#007AFF':isDefaultType?'rgba(0, 0, 0, 0.2)':'#FF4444';var backgroundColor=disabled?'rgba(0, 0, 0, 0.2)':plain?'transparent':isPrimaryType?'#007AFF':'#FFF';var textColor=disabled?'#FFF':plain?borderColor:isDefaultType?'#007AFF':type==='warn'?'#FF4444':'#FFFFFF';var textHoverStyle=this.state.isHover?(0,_utils.extracteTextStyle)(hoverStyle):{};return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this.onPress,onLongPress:this.onPress,onPressIn:this.onPressIn,onPressOut:this.onPressOut,ref:this.$touchable,disabled:disabled,__self:this,__source:{fileName:_jsxFileName,lineNumber:147,columnNumber:12}},_react.default.createElement(_reactNative.View,{style:[styles.btn,!isDefaultSize&&styles.btnMini,{backgroundColor:backgroundColor},plain&&{borderWidth:1,borderColor:borderColor},style,this.state.isHover&&hoverStyle],__self:this,__source:{fileName:_jsxFileName,lineNumber:148,columnNumber:9}},loading&&_react.default.createElement(Loading,{tintColor:textColor,__self:this,__source:{fileName:_jsxFileName,lineNumber:151,columnNumber:23}}),Array.isArray(children)?children.map(function(c,i){return _react.default.createElement(_reactNative.Text,{key:i,style:[styles.btnText,!isDefaultSize&&styles.btnTextMini,{color:textColor},textHoverStyle],__self:_this3,__source:{fileName:_jsxFileName,lineNumber:152,columnNumber:76}},c);}):['string','number'].indexOf(typeof children)>-1?_react.default.createElement(_reactNative.Text,{style:[styles.btnText,!isDefaultSize&&styles.btnTextMini,{color:textColor},textHoverStyle],__self:this,__source:{fileName:_jsxFileName,lineNumber:156,columnNumber:79}},children):children));}}]);return Button;}(_react.default.Component);Button.displayName='_Button';Button.defaultProps=_props.defaultButtonProps;var _default=Button;exports.default=_default;var styles=_reactNative.StyleSheet.create({btn:{flexDirection:'row',justifyContent:'center',alignItems:'center',paddingHorizontal:14,height:46,backgroundColor:'#F8F8F8',borderRadius:5},loading:{marginRight:5},loadingImg:{width:20,height:20},btnMini:{height:30},btnText:{fontSize:18,color:'#000'},btnTextMini:{fontSize:13}});

package/lib/Button/Button.js

@@ -0,0 +1,57 @@
+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';
+
+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));
+};
+
+Button.defaultProps = defaultButtonProps;
+Button.displayName = 'Button';
+export default Button;

package/lib/Button/Button.native.d.ts

@@ -0,0 +1,29 @@
+/// <reference types="node" />
+import React from 'react';
+import { GestureResponderEvent, TouchableWithoutFeedback } from 'react-native';
+import { ButtonProps } from './props';
+export interface IEvent {
+    timeStamp: number;
+    pageX: number;
+    pageY: number;
+    origin: GestureResponderEvent;
+}
+declare class Button extends React.Component<ButtonProps> {
+    static displayName: string;
+    static defaultProps: ButtonProps;
+    $touchable: React.RefObject<TouchableWithoutFeedback>;
+    isTouchEnd: boolean;
+    pressInTimer: NodeJS.Timeout | null;
+    pressOutTimer: NodeJS.Timeout | null;
+    state: {
+        isHover: boolean;
+    };
+    componentWillUnmount(): void;
+    onPress: () => void;
+    onPressIn: () => void;
+    stopHover: () => void;
+    onPressOut: () => void;
+    _simulateNativePress: (evt: GestureResponderEvent) => void;
+    render(): JSX.Element;
+}
+export default Button;

package/lib/Button/Button.tuya.d.ts

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

package/lib/Button/Button.tuya.js

@@ -0,0 +1,43 @@
+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"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { inlineStyle } from '@ray-js/framework-shared';
+import { Button as RemaxButton } from '@ray-js/remax-tuya';
+import { defaultButtonProps } from './props';
+
+var Button = function (props) {
+  var style = props.style,
+      id = props.id,
+      className = props.className,
+      disabled = props.disabled,
+      loading = props.loading,
+      onClick = props.onClick,
+      hoverClassName = props.hoverClassName,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size,
+      children = props.children,
+      htmlType = props.htmlType,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(RemaxButton, _extends({
+    id: id,
+    style: inlineStyle(style),
+    className: clsx(className),
+    hoverClassName: hoverClassName,
+    onClick: function handleTap(event) {
+      if (disabled) return;
+      if (loading) return;
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    },
+    disabled: disabled,
+    size: size,
+    loading: loading,
+    formType: htmlType
+  }, restProps), children);
+};
+
+Button.defaultProps = defaultButtonProps;
+Button.displayName = 'Button';
+export default Button;

package/lib/Button/Button.web.js

@@ -0,0 +1,57 @@
+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';
+
+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));
+};
+
+Button.defaultProps = defaultButtonProps;
+Button.displayName = 'Button';
+export default Button;

package/lib/Button/Button.wechat.d.ts

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

package/lib/Button/Button.wechat.js

@@ -0,0 +1,44 @@
+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"];
+import * as React from 'react';
+import clsx from 'clsx';
+import { inlineStyle } from '@ray-js/framework-shared';
+import { defaultButtonProps } from './props';
+import styles from './index.module.less';
+
+var Button = function (props) {
+  var style = props.style,
+      id = props.id,
+      className = props.className,
+      disabled = props.disabled,
+      loading = props.loading,
+      onClick = props.onClick,
+      hoverClassName = props.hoverClassName,
+      _props$size = props.size,
+      size = _props$size === void 0 ? 'default' : _props$size,
+      children = props.children,
+      htmlType = props.htmlType,
+      restProps = _objectWithoutProperties(props, _excluded);
+
+  return /*#__PURE__*/React.createElement(_Button, _extends({
+    id: id,
+    style: inlineStyle(style),
+    className: clsx('ray-button', styles.button, className),
+    hoverClassName: clsx(styles['button-hover'], hoverClassName),
+    onClick: function handleTap(event) {
+      if (disabled) return;
+      if (loading) return;
+      onClick === null || onClick === void 0 ? void 0 : onClick(event);
+    },
+    disabled: disabled,
+    formType: htmlType,
+    loading: loading,
+    size: size
+  }, restProps), children);
+};
+
+Button.defaultProps = defaultButtonProps;
+Button.displayName = 'Button';
+export default Button;

package/lib/Button/index.android.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});var _exportNames={};exports.default=void 0;var _Button=_interopRequireDefault(require("./Button"));var _props=require("./props");Object.keys(_props).forEach(function(key){if(key==="default"||key==="__esModule")return;if(Object.prototype.hasOwnProperty.call(_exportNames,key))return;if(key in exports&&exports[key]===_props[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _props[key];}});});var _default=_Button.default;exports.default=_default;

package/lib/Button/index.d.ts

@@ -0,0 +1,3 @@
+import Button from './Button';
+export * from './props';
+export default Button;

package/lib/Button/index.ios.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});var _exportNames={};exports.default=void 0;var _Button=_interopRequireDefault(require("./Button"));var _props=require("./props");Object.keys(_props).forEach(function(key){if(key==="default"||key==="__esModule")return;if(Object.prototype.hasOwnProperty.call(_exportNames,key))return;if(key in exports&&exports[key]===_props[key])return;Object.defineProperty(exports,key,{enumerable:true,get:function get(){return _props[key];}});});var _default=_Button.default;exports.default=_default;

package/lib/Button/index.js

@@ -0,0 +1,3 @@
+import Button from './Button';
+export * from './props';
+export default Button;

package/lib/Button/index.md

@@ -0,0 +1,41 @@
+---
+nav:
+  title: 组件
+  path: /components
+group:
+  title: 表单组件
+---
+
+# Button
+
+多端按钮基础组件，可用于进行强交互的操作。
+
+## 导入
+
+```js
+import { Button } from '@ray-js/components';
+```
+
+## 示例代码
+
+<code src="./demos/basic.tsx" title="基本使用" background="#f2f4f6"/>
+<code src="./demos/plain.tsx" title="镂空" background="#f2f4f6"/>
+<code src="./demos/size.tsx" title="尺寸" background="#f2f4f6"/>
+<code src="./demos/type.tsx" title="类型" background="#f2f4f6"/>
+
+## Props
+
+| 属性 | 类型 | 默认值 | 必填 | 说明 | 支持平台 |
+| --- | --- | --- | --- | --- | --- |
+| 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 事件 | 涂鸦、微信 |
+| openType | OpenType |  | 否 | 微信开放能力 | 微信 |
+| hoverClassName | string | button-hover | 否 | 指定按下去的样式类。当 hover-class="none" 时，没有点击态效果 | 涂鸦、微信、RN |
+| hoverStyle | StyleProp ViewStyle | none | 否 | 由于 RN 不支持 Class，故 RN 端的 Button 组件实现了 hoverStyle 属性，写法和 style 类似，只不过 hoverStyle 的样式是指定按下去的样式。 | RN |
+| hoverStopPropagation | boolean | false | 否 | 指定是否阻止本节点的祖先节点出现点击态 | 微信 |
+| hoverStartTime | number | 20 | 否 | 按住后多久出现点击态，单位毫秒 | RN、涂鸦、微信 |
+| hoverStayTime | number | 70 | 否 | 手指松开后点击态保留时间，单位毫秒 | RN、涂鸦、微信 |

package/lib/Button/index.module.less

@@ -0,0 +1,129 @@
+@import (reference) '../style/var.less';
+.button {
+  --ty-native-btn-color: #007aff;
+  --ty-native-btn-bg-color: #ffffff;
+  --ty-native-btn-default-border-color: rgba(0, 0, 0, 0.2);
+  --ty-native-btn-default-color: rgba(0, 0, 0, 0.5);
+  --ty-native-warn-color: #ff4444;
+  --ty-native-primary-color: #007aff;
+}
+.button,
+.button[type='default'] {
+  border: none;
+  display: block;
+  box-sizing: border-box;
+  border-radius: 10px;
+  font-size: 16px;
+  font-weight: 590;
+  color: var(--ty-native-btn-color);
+  position: relative;
+  cursor: pointer;
+  background-color: var(--ty-native-btn-bg-color);
+  text-align: center;
+  overflow: hidden;
+  -webkit-tap-highlight-color: transparent;
+  user-select: none;
+  white-space: normal;
+  padding: 10px 24px;
+  line-height: 1.41176471;
+  flex-shrink: 0;
+  &::after {
+    display: none;
+  }
+}
+
+.button[hidden] {
+  display: none;
+}
+
+.button[loading]::before {
+  display: inline-block;
+  content: ' ';
+  height: 18px;
+  width: 18px;
+  margin: 0 5px 0 0;
+  vertical-align: middle;
+  animation: load 2s linear 0s infinite;
+  background: var(--ty-native-primary-color);
+  -webkit-mask-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACIAAAAiCAYAAAA6RwvCAAAACXBIWXMAABYlAAAWJQFJUiTwAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAGJSURBVHgBxVfBccIwEFzCJ0+e+aEO4hKulJRAKkAlpAPSAZMKTH75ARXgVAD55Ud0I2s42YotD7a0MzsctmytbiWfNMc40IaF4ZPhr+EFmXBt8GS4MVRIjGsHowTNMQ5mhkdYWxaGj+IeW7aq408kBhm+o52dLazQ5FCw80WK2ecSw9DwxZTNBmPNkT7sYOcR1f+V4Y/hFzJBw8+MQkaU6LAoJQh+VggZIbPyhowg+OUgK84Qk/YB+XAQcZFTyLeIs2akEvGChWjcvNLIBBYid1NLpIMsfBcWUokLCunwLOLKde6sOSMdvOXrLso9A2F6EBofNLdqPkSjNabHi4h38gYhXSFS6NkKpCrPchpsQg0UfKVTWLRG5MZoNaGYpgjd90A5gZimiG3MQ/zF26N9hFQYDkJ7YAcMOE5wwy3Cx0eKeJ4CAtwiCIqY9bxQI2wN1yce2RG3WrWEzVrxT2evuHNbqBA+PsayxMg1TNWCThGdcxsePUW+u9eaLlFF/etsYIsqWMsqDMQfYUyw07Tf+LgAAAAASUVORK5CYII=');
+  -webkit-mask-size: cover;
+  -webkit-mask-repeat: no-repeat;
+}
+
+.button[loading][type='primary']::before,
+.button[loading][type='warn']::before {
+  background: #ffffff;
+}
+
+.button[loading][type='default']::before {
+  background: var(--ty-native-primary-color);
+}
+
+.button[loading][type='default'][plain]::before {
+  background: var(--ty-native-btn-default-color);
+}
+
+.button[loading][type='primary'][plain]::before {
+  background: var(--ty-native-primary-color);
+}
+
+.button[loading][type='warn']::before {
+  background: var(--ty-native-warn-color);
+}
+
+.button[size='mini'] {
+  display: inline-block;
+  font-size: 13px;
+  padding: 5px 17px;
+}
+
+.button[type='primary'] {
+  background-color: var(--ty-native-primary-color);
+  color: #fff;
+}
+
+.button[type='warn'] {
+  color: var(--ty-native-warn-color);
+  background-color: #ffffff;
+}
+
+.button[plain][type='warn']:not([disabled]) {
+  background-color: transparent;
+  border: 1px solid var(--ty-native-warn-color);
+  color: var(--ty-native-warn-color);
+}
+
+.button[plain][type='primary']:not([disabled]) {
+  background-color: transparent;
+  border: 1px solid var(--ty-native-primary-color);
+  color: var(--ty-native-primary-color);
+}
+
+.button[plain][type='default']:not([disabled]) {
+  background-color: transparent;
+  border: 1px solid var(--ty-native-btn-default-border-color);
+  color: var(--ty-native-btn-default-color);
+}
+
+.ty-.button-hover {
+  opacity: 0.8;
+}
+
+.button[disabled][type='default'],
+.button[disabled][type='primary'],
+.button[disabled][type='warn'] {
+  background-color: var(--ty-native-btn-default-border-color);
+  cursor: not-allowed;
+  pointer-events: none;
+  color: #ffffff;
+}
+
+@keyframes load {
+  from {
+    transform: rotate(0deg);
+  }
+
+  to {
+    transform: rotate(360deg);
+  }
+}

package/lib/Button/index.tuya.js

@@ -0,0 +1,3 @@
+import Button from './Button';
+export * from './props';
+export default Button;

package/lib/Button/index.web.js

@@ -0,0 +1,3 @@
+import Button from './Button';
+export * from './props';
+export default Button;

package/lib/Button/index.wechat.js

@@ -0,0 +1,3 @@
+import Button from './Button';
+export * from './props';
+export default Button;

package/lib/Button/props.android.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.defaultButtonProps=void 0;var defaultButtonProps={size:'default',type:'default',hoverStyle:{opacity:0.8},hoverStartTime:20,hoverStayTime:70,disabled:false};exports.defaultButtonProps=defaultButtonProps;

package/lib/Button/props.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { BaseProps } from '../types';
+export interface ButtonProps extends BaseProps {
+    disabled?: boolean;
+    loading?: boolean;
+    size?: 'default' | 'mini';
+    type?: 'default' | 'primary' | 'warn';
+    plain?: boolean;
+    hoverStyle?: any;
+    hoverClassName?: string;
+    hoverStartTime?: number;
+    hoverStayTime?: number;
+    onClick?: (params: {
+        type: 'click';
+    }) => void;
+    children?: React.ReactNode;
+}
+export declare const defaultButtonProps: ButtonProps;

package/lib/Button/props.ios.js

@@ -0,0 +1 @@
+Object.defineProperty(exports,"__esModule",{value:true});exports.defaultButtonProps=void 0;var defaultButtonProps={size:'default',type:'default',hoverStyle:{opacity:0.8},hoverStartTime:20,hoverStayTime:70,disabled:false};exports.defaultButtonProps=defaultButtonProps;

package/lib/Button/props.js

@@ -0,0 +1,10 @@
+export var defaultButtonProps = {
+  size: 'default',
+  type: 'default',
+  hoverStyle: {
+    opacity: 0.8
+  },
+  hoverStartTime: 20,
+  hoverStayTime: 70,
+  disabled: false
+};

package/lib/Button/props.tuya.js

@@ -0,0 +1,10 @@
+export var defaultButtonProps = {
+  size: 'default',
+  type: 'default',
+  hoverStyle: {
+    opacity: 0.8
+  },
+  hoverStartTime: 20,
+  hoverStayTime: 70,
+  disabled: false
+};

package/lib/Button/props.web.js

@@ -0,0 +1,10 @@
+export var defaultButtonProps = {
+  size: 'default',
+  type: 'default',
+  hoverStyle: {
+    opacity: 0.8
+  },
+  hoverStartTime: 20,
+  hoverStayTime: 70,
+  disabled: false
+};

package/lib/Button/props.wechat.js

@@ -0,0 +1,10 @@
+export var defaultButtonProps = {
+  size: 'default',
+  type: 'default',
+  hoverStyle: {
+    opacity: 0.8
+  },
+  hoverStartTime: 20,
+  hoverStayTime: 70,
+  disabled: false
+};

package/lib/Checkbox/Checkbox.android.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _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 _Icon=_interopRequireDefault(require("../Icon"));var _jsxFileName="/drone/src/packages/components/src/Checkbox/Checkbox.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(props){var _this;(0,_classCallCheck2.default)(this,Checkbox);_this=_super.call(this,props);_this.$touchable=_react.default.createRef();_this._simulateNativePress=function(evt){var node=_this.$touchable.current;node&&node.props.onPress&&node.props.onPress(evt);};_this.onPress=function(){var _this$props=_this.props,disabled=_this$props.disabled,onChange=_this$props.onChange,value=_this$props.value;if(disabled)return;var checked=!_this.state.checked;typeof onChange==='function'&&onChange({value:value,checked:checked,type:'change'});_this.setState({checked:checked});};_this.state={checked:props.checked};return _this;}(0,_createClass2.default)(Checkbox,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.checked!==this.props.checked){this.setState({checked:!!this.props.checked});}}},{key:"render",value:function render(){var _this$props2=this.props,style=_this$props2.style,color=_this$props2.color,disabled=_this$props2.disabled;var checked=this.state.checked;return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this.onPress,ref:this.$touchable,__self:this,__source:{fileName:_jsxFileName,lineNumber:71,columnNumber:12}},_react.default.createElement(_reactNative.View,{style:[styles.wrapper,{backgroundColor:disabled?'rgba(0,0,0,0.2)':checked?'#007AFF':'#FFF',borderColor:disabled?'rgba(0,0,0,0.2)':checked?'#007AFF':'rgba(0,0,0,0.2)'},style],__self:this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:9}},_react.default.createElement(_Icon.default,{type:"success_no_circle",size:12,color:color,style:[styles.wrapperIcon,checked&&styles.wrapperCheckedIcon],__self:this,__source:{fileName:_jsxFileName,lineNumber:76,columnNumber:11}}),_react.default.createElement(_reactNative.View,{style:[{flexGrow:0}],__self:this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:11}},this.props.children)));}}]);return Checkbox;}(_react.default.Component);Checkbox.displayName='_Checkbox';Checkbox.defaultProps={value:'',color:'#FFF'};var _default=Checkbox;exports.default=_default;var styles=_reactNative.StyleSheet.create({wrapper:{alignItems:'center',justifyContent:'center',width:18,height:18,borderWidth:1,borderRadius:4},wrapperIcon:{opacity:0},wrapperCheckedIcon:{opacity:1}});

package/lib/Checkbox/Checkbox.d.ts

@@ -0,0 +1,5 @@
+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.ios.js

@@ -0,0 +1 @@
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _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 _Icon=_interopRequireDefault(require("../Icon"));var _jsxFileName="/drone/src/packages/components/src/Checkbox/Checkbox.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(props){var _this;(0,_classCallCheck2.default)(this,Checkbox);_this=_super.call(this,props);_this.$touchable=_react.default.createRef();_this._simulateNativePress=function(evt){var node=_this.$touchable.current;node&&node.props.onPress&&node.props.onPress(evt);};_this.onPress=function(){var _this$props=_this.props,disabled=_this$props.disabled,onChange=_this$props.onChange,value=_this$props.value;if(disabled)return;var checked=!_this.state.checked;typeof onChange==='function'&&onChange({value:value,checked:checked,type:'change'});_this.setState({checked:checked});};_this.state={checked:props.checked};return _this;}(0,_createClass2.default)(Checkbox,[{key:"componentDidUpdate",value:function componentDidUpdate(prevProps){if(prevProps.checked!==this.props.checked){this.setState({checked:!!this.props.checked});}}},{key:"render",value:function render(){var _this$props2=this.props,style=_this$props2.style,color=_this$props2.color,disabled=_this$props2.disabled;var checked=this.state.checked;return _react.default.createElement(_reactNative.TouchableWithoutFeedback,{onPress:this.onPress,ref:this.$touchable,__self:this,__source:{fileName:_jsxFileName,lineNumber:71,columnNumber:12}},_react.default.createElement(_reactNative.View,{style:[styles.wrapper,{backgroundColor:disabled?'rgba(0,0,0,0.2)':checked?'#007AFF':'#FFF',borderColor:disabled?'rgba(0,0,0,0.2)':checked?'#007AFF':'rgba(0,0,0,0.2)'},style],__self:this,__source:{fileName:_jsxFileName,lineNumber:72,columnNumber:9}},_react.default.createElement(_Icon.default,{type:"success_no_circle",size:12,color:color,style:[styles.wrapperIcon,checked&&styles.wrapperCheckedIcon],__self:this,__source:{fileName:_jsxFileName,lineNumber:76,columnNumber:11}}),_react.default.createElement(_reactNative.View,{style:[{flexGrow:0}],__self:this,__source:{fileName:_jsxFileName,lineNumber:77,columnNumber:11}},this.props.children)));}}]);return Checkbox;}(_react.default.Component);Checkbox.displayName='_Checkbox';Checkbox.defaultProps={value:'',color:'#FFF'};var _default=Checkbox;exports.default=_default;var styles=_reactNative.StyleSheet.create({wrapper:{alignItems:'center',justifyContent:'center',width:18,height:18,borderWidth:1,borderRadius:4},wrapperIcon:{opacity:0},wrapperCheckedIcon:{opacity:1}});

package/lib/Checkbox/Checkbox.js

@@ -0,0 +1,36 @@
+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';
+
+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'
+        }
+      });
+    }
+  });
+};
+
+Checkbox.displayName = 'Checkbox';
+export default Checkbox;