@ray-js/components 0.5.3 → 0.5.5

package/lib/Button/Button.native.js

@@ -0,0 +1,229 @@
+import _typeof from "@babel/runtime/helpers/esm/typeof";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "core-js/modules/es.array.concat.js";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.index-of.js";
+import React from 'react';
+import { Animated, Image, Easing, StyleSheet, View, Text, TouchableWithoutFeedback } from 'react-native';
+import { iconList } from '../assets/icons';
+import { defaultButtonProps } from './props';
+import { extracteTextStyle } from '../utils';
+
+var Loading = function (props) {
+  var rotate = React.useRef(new Animated.Value(0)).current;
+  var tintColor = props.tintColor;
+  React.useEffect(function () {
+    var animation = Animated.loop(Animated.timing(rotate, {
+      toValue: 1,
+      duration: 1000,
+      easing: Easing.linear,
+      useNativeDriver: true,
+      isInteraction: false
+    }));
+    animation.start();
+    return function () {
+      animation.stop();
+    };
+  }, []);
+  var rotateDeg = rotate.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '360deg']
+  });
+  return /*#__PURE__*/React.createElement(Animated.View, {
+    style: [styles.loading, {
+      transform: [{
+        rotate: rotateDeg
+      }]
+    }]
+  }, /*#__PURE__*/React.createElement(Image, {
+    source: iconList.loading,
+    style: [styles.loadingImg, {
+      tintColor: tintColor
+    }]
+  }));
+};
+
+var Button = /*#__PURE__*/function (_React$Component) {
+  _inherits(Button, _React$Component);
+
+  var _super = _createSuper(Button);
+
+  function Button() {
+    var _this;
+
+    _classCallCheck(this, Button);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _defineProperty(_assertThisInitialized(_this), "$touchable", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "isTouchEnd", false);
+
+    _defineProperty(_assertThisInitialized(_this), "pressInTimer", null);
+
+    _defineProperty(_assertThisInitialized(_this), "pressOutTimer", null);
+
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      isHover: false
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onPress", function () {
+      var _this$props = _this.props,
+          disabled = _this$props.disabled,
+          onClick = _this$props.onClick;
+      !disabled && typeof onClick === 'function' && onClick({
+        type: 'click'
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onPressIn", function () {
+      var _this$props2 = _this.props,
+          hoverStartTime = _this$props2.hoverStartTime,
+          hoverStyle = _this$props2.hoverStyle;
+      _this.isTouchEnd = false;
+
+      if (hoverStyle) {
+        _this.pressInTimer = setTimeout(function () {
+          _this.setState({
+            isHover: true
+          }, function () {
+            if (_this.isTouchEnd) {
+              _this.stopHover();
+            }
+          });
+
+          clearTimeout(_this.pressInTimer);
+        }, hoverStartTime);
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "stopHover", function () {
+      var hoverStayTime = _this.props.hoverStayTime;
+      _this.pressOutTimer = setTimeout(function () {
+        _this.setState({
+          isHover: false
+        });
+
+        clearTimeout(_this.pressOutTimer);
+      }, hoverStayTime);
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "onPressOut", function () {
+      var hoverStyle = _this.props.hoverStyle;
+      var isHover = _this.state.isHover;
+      _this.isTouchEnd = true;
+
+      if (hoverStyle && isHover) {
+        _this.stopHover();
+      }
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_simulateNativePress", function (evt) {
+      var node = _this.$touchable.current;
+      node && node.props.onPress && node.props.onPress(evt);
+    });
+
+    return _this;
+  }
+
+  _createClass(Button, [{
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.pressOutTimer);
+      clearTimeout(this.pressInTimer);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this$props3 = this.props,
+          loading = _this$props3.loading,
+          style = _this$props3.style,
+          size = _this$props3.size,
+          children = _this$props3.children,
+          disabled = _this$props3.disabled,
+          type = _this$props3.type,
+          plain = _this$props3.plain,
+          hoverStyle = _this$props3.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 ? extracteTextStyle(hoverStyle) : {};
+      return /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+        onPress: this.onPress,
+        onLongPress: this.onPress,
+        onPressIn: this.onPressIn,
+        onPressOut: this.onPressOut,
+        ref: this.$touchable,
+        disabled: disabled
+      }, /*#__PURE__*/React.createElement(View, {
+        style: [styles.btn, !isDefaultSize && styles.btnMini, {
+          backgroundColor: backgroundColor
+        }, plain && {
+          borderWidth: 1,
+          borderColor: borderColor
+        }, style, this.state.isHover && hoverStyle]
+      }, loading && /*#__PURE__*/React.createElement(Loading, {
+        tintColor: textColor
+      }), Array.isArray(children) ? children.map(function (c, i) {
+        return /*#__PURE__*/React.createElement(Text, {
+          key: i,
+          style: [styles.btnText, !isDefaultSize && styles.btnTextMini, {
+            color: textColor
+          }, textHoverStyle]
+        }, c);
+      }) : ['string', 'number'].indexOf(_typeof(children)) > -1 ? /*#__PURE__*/React.createElement(Text, {
+        style: [styles.btnText, !isDefaultSize && styles.btnTextMini, {
+          color: textColor
+        }, textHoverStyle]
+      }, children) : children));
+    }
+  }]);
+
+  return Button;
+}(React.Component);
+
+_defineProperty(Button, "displayName", '_Button');
+
+_defineProperty(Button, "defaultProps", defaultButtonProps);
+
+export default Button;
+var styles = 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.wechat.js

@@ -1,10 +1,10 @@
-import { Button as _Button } from "@ray-core/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", "formType"];
 import * as React from 'react';
 import clsx from 'clsx';
 import { inlineStyle } from '@ray-js/framework-shared';
+import { Button as RemaxButton } from '@ray-core/wechat';
 import { defaultButtonProps } from './props';
 import styles from './index.module.less';
 
@@ -21,7 +21,7 @@ var Button = function (props) {
       formType = props.formType,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(_Button, _extends({
+  return /*#__PURE__*/React.createElement(RemaxButton, _extends({
     id: id,
     style: inlineStyle(style),
     className: clsx('ray-button', styles.button, className),

package/lib/Checkbox/Checkbox.native.js

@@ -0,0 +1,118 @@
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import React from 'react';
+import { TouchableWithoutFeedback, StyleSheet, View } from 'react-native';
+import Icon from '../Icon';
+
+var Checkbox = /*#__PURE__*/function (_React$Component) {
+  _inherits(Checkbox, _React$Component);
+
+  var _super = _createSuper(Checkbox);
+
+  function Checkbox(props) {
+    var _this;
+
+    _classCallCheck(this, Checkbox);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "$touchable", /*#__PURE__*/React.createRef());
+
+    _defineProperty(_assertThisInitialized(_this), "_simulateNativePress", function (evt) {
+      var node = _this.$touchable.current;
+      node && node.props.onPress && node.props.onPress(evt);
+    });
+
+    _defineProperty(_assertThisInitialized(_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;
+  }
+
+  _createClass(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 /*#__PURE__*/React.createElement(TouchableWithoutFeedback, {
+        onPress: this.onPress,
+        ref: this.$touchable
+      }, /*#__PURE__*/React.createElement(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]
+      }, /*#__PURE__*/React.createElement(Icon, {
+        type: "success_no_circle",
+        size: 12,
+        color: color,
+        style: [styles.wrapperIcon, checked && styles.wrapperCheckedIcon]
+      }), /*#__PURE__*/React.createElement(View, {
+        style: {
+          flexGrow: 0
+        }
+      }, this.props.children)));
+    }
+  }]);
+
+  return Checkbox;
+}(React.Component);
+
+_defineProperty(Checkbox, "displayName", '_Checkbox');
+
+_defineProperty(Checkbox, "defaultProps", {
+  value: '',
+  color: '#FFF'
+});
+
+export default Checkbox;
+var styles = 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.wechat.js

@@ -1,10 +1,10 @@
-import { Checkbox as _Checkbox } from "@ray-core/wechat/esm/hostComponents/Checkbox/index";
 import _extends from "@babel/runtime/helpers/esm/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
 var _excluded = ["className", "style", "id", "color"];
 import clsx from 'clsx';
 import * as React from 'react';
 import { inlineStyle } from '@ray-js/framework-shared';
+import { Checkbox as RemaxCheckbox } from '@ray-core/wechat';
 
 var Checkbox = function (props) {
   var className = props.className,
@@ -13,7 +13,7 @@ var Checkbox = function (props) {
       color = props.color,
       restProps = _objectWithoutProperties(props, _excluded);
 
-  return /*#__PURE__*/React.createElement(_Checkbox, _extends({
+  return /*#__PURE__*/React.createElement(RemaxCheckbox, _extends({
     id: id,
     style: inlineStyle(style),
     color: color || '#007aff',

package/lib/CheckboxGroup/CheckboxGroup.native.js

@@ -0,0 +1,99 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import "core-js/modules/es.array.map.js";
+import "core-js/modules/es.array.filter.js";
+import "core-js/modules/es.object.to-string.js";
+import "core-js/modules/es.array.concat.js";
+import React from 'react';
+import { View, Text } from 'react-native';
+import Checkbox from '../Checkbox';
+
+var CheckboxGroup = /*#__PURE__*/function (_React$Component) {
+  _inherits(CheckboxGroup, _React$Component);
+
+  var _super = _createSuper(CheckboxGroup);
+
+  function CheckboxGroup(props) {
+    var _this;
+
+    _classCallCheck(this, CheckboxGroup);
+
+    _this = _super.call(this, props);
+
+    _defineProperty(_assertThisInitialized(_this), "getValueData", function (options) {
+      return options.filter(function (item) {
+        return item.checked;
+      }).map(function (item) {
+        return item.value;
+      });
+    });
+
+    _defineProperty(_assertThisInitialized(_this), "_handleChange", function (event, index) {
+      var onChange = _this.props.onChange;
+      var options = _this.state.options;
+      var newOptions = options.concat([]);
+      newOptions[index] = _objectSpread(_objectSpread({}, newOptions[index]), event);
+
+      _this.setState({
+        options: newOptions
+      });
+
+      typeof onChange === 'function' && onChange({
+        type: 'change',
+        value: _this.getValueData(newOptions)
+      });
+    });
+
+    _this.state = {
+      options: props.options
+    };
+    return _this;
+  }
+
+  _createClass(CheckboxGroup, [{
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+
+      var _this$props = this.props,
+          style = _this$props.style,
+          disabled = _this$props.disabled;
+      var options = this.state.options;
+      return /*#__PURE__*/React.createElement(View, {
+        style: [{
+          flexDirection: 'row'
+        }, style]
+      }, options.length && options.map(function (item, index) {
+        var data = disabled ? _objectSpread(_objectSpread({}, item), {}, {
+          disabled: disabled
+        }) : item;
+        return /*#__PURE__*/React.createElement(View, {
+          style: {
+            flexDirection: 'row',
+            alignItems: 'center',
+            paddingLeft: index ? 5 : 0
+          },
+          key: Math.random()
+        }, /*#__PURE__*/React.createElement(Checkbox, _extends({}, data, {
+          onChange: function onChange(event) {
+            return _this2._handleChange(event, index);
+          }
+        })), item.label && /*#__PURE__*/React.createElement(Text, {
+          style: {
+            marginLeft: 5
+          }
+        }, item.label));
+      }));
+    }
+  }]);
+
+  return CheckboxGroup;
+}(React.Component);
+
+export { CheckboxGroup as default };

package/lib/CheckboxGroup/CheckboxGroup.wechat.js

@@ -1,7 +1,7 @@
-import { CheckboxGroup as _CheckboxGroup } from "@ray-core/wechat/esm/hostComponents/CheckboxGroup/index";
 import "core-js/modules/es.function.name.js";
 import "core-js/modules/es.array.map.js";
 import * as React from 'react';
+import { CheckboxGroup as RemaxCheckboxGroup } from '@ray-core/wechat';
 import Checkbox from '../Checkbox';
 import Label from '../Label';
 
@@ -12,7 +12,7 @@ var CheckboxGroup = function (props) {
       _props$onChange = props.onChange,
       onChange = _props$onChange === void 0 ? function () {} : _props$onChange,
       children = props.children;
-  return /*#__PURE__*/React.createElement(_CheckboxGroup, {
+  return /*#__PURE__*/React.createElement(RemaxCheckboxGroup, {
     name: name,
     onChange: function handleOnChange(e) {
       !disabled && onChange(e);

package/lib/ClickableSimplified/index.native.js

@@ -0,0 +1,166 @@
+import _extends from "@babel/runtime/helpers/esm/extends";
+import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
+import _createClass from "@babel/runtime/helpers/esm/createClass";
+import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
+import _inherits from "@babel/runtime/helpers/esm/inherits";
+import _createSuper from "@babel/runtime/helpers/esm/createSuper";
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+
+/**
+ * ✔ hoverStyle: Convert hoverClass to hoverStyle.
+ * ✔ hoverStartTime
+ * ✔ hoverStayTime
+ * ✔ onClick
+ * ✔ onLongClick
+ * ✔ onTouchStart
+ * ✔ onTouchEnd
+ */
+import React from 'react';
+import { PanResponder } from 'react-native';
+import { omit, getClickEvent, getTouchEvent } from '../utils';
+export default function ClickableSimplified(WrappedComponent) {
+  var _class;
+
+  return _class = /*#__PURE__*/function (_React$Component) {
+    _inherits(_Clickable, _React$Component);
+
+    var _super = _createSuper(_Clickable);
+
+    function _Clickable(props) {
+      var _this;
+
+      _classCallCheck(this, _Clickable);
+
+      _this = _super.call(this, props);
+
+      _defineProperty(_assertThisInitialized(_this), "startTimestamp", 0);
+
+      _defineProperty(_assertThisInitialized(_this), "setStartTimer", function () {
+        var _this$props = _this.props,
+            hoverStyle = _this$props.hoverStyle,
+            hoverStartTime = _this$props.hoverStartTime;
+
+        if (hoverStyle) {
+          _this.startTimer && clearTimeout(_this.startTimer);
+          _this.startTimer = setTimeout(function () {
+            _this.setState({
+              hoverable: true
+            });
+          }, hoverStartTime);
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "setStayTimer", function () {
+        var _this$props2 = _this.props,
+            hoverStyle = _this$props2.hoverStyle,
+            hoverStayTime = _this$props2.hoverStayTime;
+
+        if (hoverStyle) {
+          _this.stayTimer && clearTimeout(_this.stayTimer);
+          _this.stayTimer = setTimeout(function () {
+            _this.state.hoverable && _this.setState({
+              hoverable: false
+            });
+          }, hoverStayTime);
+        }
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handleStartShouldSetPanResponder", function () {
+        var _this$props3 = _this.props,
+            hoverStyle = _this$props3.hoverStyle,
+            onClick = _this$props3.onClick,
+            onLongClick = _this$props3.onLongClick,
+            onTouchStart = _this$props3.onTouchStart,
+            onTouchEnd = _this$props3.onTouchEnd;
+        return !!(hoverStyle || onClick || onLongClick || onTouchStart || onTouchEnd);
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handlePanResponderGrant", function (evt) {
+        var onTouchStart = _this.props.onTouchStart;
+        onTouchStart && onTouchStart(getTouchEvent(evt, 'touchstart'));
+        _this.startTimestamp = evt.nativeEvent.timestamp;
+
+        _this.setStartTimer();
+      });
+
+      _defineProperty(_assertThisInitialized(_this), "handlePanResponderRelease", function (evt, gestureState) {
+        var _this$props4 = _this.props,
+            onClick = _this$props4.onClick,
+            onLongClick = _this$props4.onLongClick,
+            onTouchEnd = _this$props4.onTouchEnd;
+        onTouchEnd && onTouchEnd(getTouchEvent(evt, 'touchend'));
+        var endTimestamp = evt.nativeEvent.timestamp;
+        var gapTime = endTimestamp - _this.startTimestamp;
+        var hasMove = Math.abs(gestureState.dx) >= 1 || Math.abs(gestureState.dy) >= 1;
+
+        if (!hasMove) {
+          if (gapTime <= 350) {
+            onClick && onClick(getClickEvent(evt, 'click'));
+          } else {
+            onLongClick && onLongClick(getClickEvent(evt, 'longclick'));
+          }
+        }
+
+        _this.setStayTimer();
+      });
+
+      _this.state = {
+        hoverable: false
+      };
+      _this.panResponder = PanResponder.create({
+        onStartShouldSetPanResponder: _this.handleStartShouldSetPanResponder,
+        onShouldBlockNativeResponder: function onShouldBlockNativeResponder() {
+          return false;
+        },
+        onPanResponderGrant: function onPanResponderGrant(evt) {
+          return _this.handlePanResponderGrant(evt);
+        },
+        onPanResponderTerminationRequest: function onPanResponderTerminationRequest() {
+          return true;
+        },
+        onPanResponderRelease: function onPanResponderRelease(evt, gestureState) {
+          return _this.handlePanResponderRelease(evt, gestureState);
+        },
+        onPanResponderTerminate: function onPanResponderTerminate() {
+          _this.setStayTimer();
+        }
+      });
+      return _this;
+    }
+
+    _createClass(_Clickable, [{
+      key: "componentWillUnmount",
+      value: function componentWillUnmount() {
+        this.startTimer && clearTimeout(this.startTimer);
+        this.stayTimer && clearTimeout(this.stayTimer);
+      }
+    }, {
+      key: "render",
+      value: function render() {
+        var _this$props5 = this.props,
+            style = _this$props5.style,
+            hoverStyle = _this$props5.hoverStyle,
+            onClick = _this$props5.onClick,
+            onLongClick = _this$props5.onLongClick,
+            onTouchStart = _this$props5.onTouchStart,
+            onTouchEnd = _this$props5.onTouchEnd;
+        var hoverable = this.state.hoverable;
+
+        if (!hoverStyle && !onClick && !onLongClick && !onTouchStart && !onTouchEnd) {
+          return /*#__PURE__*/React.createElement(WrappedComponent, this.props);
+        }
+
+        return /*#__PURE__*/React.createElement(WrappedComponent, _extends({}, omit(this.props, ['style', 'hoverStyle', 'hoverStartTime', 'hoverStayTime', 'onClick', 'onLongClick', 'onTouchStart', 'onTouchEnd']), this.panResponder.panHandlers, {
+          style: [{
+            backgroundColor: 'transparent'
+          }, style, hoverable && hoverStyle]
+        }));
+      }
+    }]);
+
+    return _Clickable;
+  }(React.Component), _defineProperty(_class, "defaultProps", {
+    hoverStartTime: 20,
+    hoverStayTime: 70
+  }), _class;
+}

package/lib/CoverView/CoverView.js

@@ -1 +1,7 @@
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _react=_interopRequireDefault(require("react"));var _this=this,_jsxFileName="/drone/src/packages/components/src/CoverView/CoverView.tsx";var CoverView=function(){return _react.default.createElement("div",{__self:_this,__source:{fileName:_jsxFileName,lineNumber:5,columnNumber:10}},"web\u7AEF\u6682\u672A\u5B9E\u73B0");};var _default=CoverView;exports.default=_default;
+import React from 'react';
+
+var CoverView = function () {
+  return /*#__PURE__*/React.createElement("div", null, "web\u7AEF\u6682\u672A\u5B9E\u73B0");
+};
+
+export default CoverView;