tuya-panel-kit/lib/components/button-brick/button.js

a functional component library for developing tuya device panels!

Object.defineProperty(exports, "__esModule", {
  value: true
});
var _jsxFileName = 'src/components/button-brick/button.js';

var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };

var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();

var _react = require('react');

var _react2 = _interopRequireDefault(_react);

var _reactNative = require('react-native');

var _color = require('color');

var _color2 = _interopRequireDefault(_color);

var _propTypes = require('prop-types');

var _propTypes2 = _interopRequireDefault(_propTypes);

var _reactNativeSvg = require('react-native-svg');

var _reactNativeSvg2 = _interopRequireDefault(_reactNativeSvg);

var _config = require('./config');

var _TYText = require('../TYText');

var _TYText2 = _interopRequireDefault(_TYText);

var _loading = require('./loading');

var _loading2 = _interopRequireDefault(_loading);

var _linearGradient = require('../gradient/linear-gradient');

var _linearGradient2 = _interopRequireDefault(_linearGradient);

var _utils = require('../../utils');

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }

function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }

var cx = _utils.RatioUtils.convertX;


var styles = _reactNative.StyleSheet.create({
  wrapper: {
    justifyContent: 'center',
    alignItems: 'center',
    flexDirection: 'row'
  },

  loading: {
    marginRight: cx(8)
  }
});

var BrickButton = function (_React$PureComponent) {
  _inherits(BrickButton, _React$PureComponent);

  function BrickButton(props) {
    _classCallCheck(this, BrickButton);

    var _this = _possibleConstructorReturn(this, (BrickButton.__proto__ || Object.getPrototypeOf(BrickButton)).call(this, props));

    _this.onPress = function () {
      var onPress = _this.props.onPress;

      onPress && onPress.apply(undefined, arguments);
    };

    _this.onChange = function () {
      for (var _len = arguments.length, args = Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
        args[_key - 1] = arguments[_key];
      }

      var eventName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
      var onChange = _this.props.onChange;

      switch (eventName) {
        case 'onShowUnderlay':
          _this.setState({ showUnderlay: true });
          break;
        case 'onHideUnderlay':
          _this.setState({ showUnderlay: false });
          break;
        default:
          break;
      }
      onChange && onChange.apply(undefined, [eventName].concat(args));
    };

    _this.onLayout = function (_ref) {
      var _ref$nativeEvent$layo = _ref.nativeEvent.layout,
          width = _ref$nativeEvent$layo.width,
          height = _ref$nativeEvent$layo.height;

      _this.setState({
        layout: _extends({}, _this.state.layout, { width: width, height: height }),
        init: true
      });
    };

    _this.getLayoutStyle = function () {
      var _this$props = _this.props,
          type = _this$props.type,
          wrapperStyle = _this$props.wrapperStyle,
          disabled = _this$props.disabled,
          textStyle = _this$props.textStyle;

      var wrapper = _reactNative.StyleSheet.flatten([styles.wrapper, _config.STYLES['' + type].style, wrapperStyle, disabled && { backgroundColor: _config.STYLES['' + type].backgroundColorDisabled }]);
      var contentTextStyle = _reactNative.StyleSheet.flatten([_config.STYLES['' + type].textStyle, textStyle, disabled && { color: _config.STYLES['' + type].textDisabledColor }]);

      var _StyleSheet$flatten = _reactNative.StyleSheet.flatten([wrapper, type === 'primaryBorder' && disabled && {
        borderColor: _config.STYLES['' + type].borderColorDisabled
      }]),
          borderColor = _StyleSheet$flatten.borderColor;

      var textColor = contentTextStyle.color;
      var backgroundColor = type === 'primaryGradient' && !disabled ? 'transparent' : wrapper.backgroundColor;
      return { wrapper: wrapper, contentTextStyle: contentTextStyle, borderColor: borderColor, textColor: textColor, backgroundColor: backgroundColor };
    };

    _this.measureIsTextSizeToSmall = function () {
      var w = _this.state.layout.width;

      var minWidth = _config.STYLES.small.style.width;
      return w <= minWidth;
    };

    _this.renderLinearGradient = function (radius) {
      var _this$state = _this.state,
          init = _this$state.init,
          layout = _this$state.layout;
      var background = _this.props.background;
      var width = layout.width,
          height = layout.height;

      if (!init) return;
      return _react2.default.createElement(
        _reactNative.View,
        {
          style: {
            width: width,
            height: height,
            position: 'absolute'
          },
          __source: {
            fileName: _jsxFileName,
            lineNumber: 235
          }
        },
        _react2.default.createElement(
          _linearGradient2.default,
          _extends({}, background, {
            __source: {
              fileName: _jsxFileName,
              lineNumber: 242
            }
          }),
          _react2.default.createElement(_reactNativeSvg.Rect, { x: '0', y: '0', rx: radius, ry: radius, width: width, height: height, __source: {
              fileName: _jsxFileName,
              lineNumber: 243
            }
          })
        )
      );
    };

    _this.renderMaskView = function (width, height, radius, fill) {
      if (!width && !height) return;
      return _react2.default.createElement(
        _reactNative.View,
        {
          style: {
            width: width,
            height: height,
            position: 'absolute'
          },
          __source: {
            fileName: _jsxFileName,
            lineNumber: 252
          }
        },
        _react2.default.createElement(
          _reactNativeSvg2.default,
          { width: width, height: height, __source: {
              fileName: _jsxFileName,
              lineNumber: 259
            }
          },
          _react2.default.createElement(_reactNativeSvg.Rect, { x: '0', y: '0', rx: radius, ry: radius, width: width, height: height, fill: fill, __source: {
              fileName: _jsxFileName,
              lineNumber: 260
            }
          })
        )
      );
    };

    _this.renderLoadingView = function () {
      var _this$props2 = _this.props,
          loadingColor = _this$props2.loadingColor,
          loadingStyle = _this$props2.loadingStyle,
          text = _this$props2.text,
          type = _this$props2.type,
          loadingSize = _this$props2.loadingSize,
          loading = _this$props2.loading,
          loadingBackground = _this$props2.loadingBackground,
          loadingStrokeWidth = _this$props2.loadingStrokeWidth;

      if (!loading) return;
      var isWrapperSmall = _this.measureIsTextSizeToSmall();
      var size = typeof loadingSize === 'string' ? _config.LOADINGSIZE[loadingSize] : loadingSize;
      return _react2.default.createElement(_loading2.default, {
        size: size,
        style: [text && type !== 'small' && !isWrapperSmall && styles.loading, loadingStyle],
        color: loadingColor,
        loading: loading,
        backgroundColor: loadingBackground,
        strokeWidth: loadingStrokeWidth,
        __source: {
          fileName: _jsxFileName,
          lineNumber: 281
        }
      });
    };

    _this.renderContentTextView = function () {
      var textStyle = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
      var _this$props3 = _this.props,
          text = _this$props3.text,
          loading = _this$props3.loading,
          type = _this$props3.type;

      var str = Array.isArray(text) ? text.join('') : text;
      var isWrapperSmall = _this.measureIsTextSizeToSmall();
      if (loading && (type === 'small' || isWrapperSmall)) return;
      return _react2.default.createElement(_TYText2.default, { ref: function ref(_ref2) {
          return _this._text = _ref2;
        }, text: str, style: textStyle, numberOfLines: 1, __source: {
          fileName: _jsxFileName,
          lineNumber: 298
        }
      });
    };

    _this.state = {
      init: false,
      showUnderlay: props.showUnderlay,
      layout: {
        width: 0,
        height: 0,
        textWidth: 0
      }
    };
    return _this;
  }

  _createClass(BrickButton, [{
    key: 'render',
    value: function render() {
      var _props = this.props,
          type = _props.type,
          style = _props.style,
          loading = _props.loading,
          disabled = _props.disabled,
          underlayColor = _props.underlayColor,
          activeOpacity = _props.activeOpacity;
      var _state = this.state,
          layout = _state.layout,
          showUnderlay = _state.showUnderlay;

      var _getLayoutStyle = this.getLayoutStyle(),
          wrapper = _getLayoutStyle.wrapper,
          contentTextStyle = _getLayoutStyle.contentTextStyle,
          borderColor = _getLayoutStyle.borderColor,
          textColor = _getLayoutStyle.textColor,
          backgroundColor = _getLayoutStyle.backgroundColor;

      var width = layout.width,
          height = layout.height;

      var radius = typeof wrapper.borderRadius !== 'undefined' ? wrapper.borderRadius : _config.BASERADIUS;
      var events = (0, _config.mergeActions)(_config.ACTIONS, this.onChange);
      var fill = type === 'primaryBorder' ? (0, _color2.default)(wrapper.borderColor).alpha(0.1).rgbString() : 'rgba(0,0,0,.1)';
      return _react2.default.createElement(
        _reactNative.TouchableHighlight,
        _extends({
          onPress: this.onPress,
          activeOpacity: activeOpacity || _config.ACTIVEOPACITY,
          disabled: disabled,
          underlayColor: underlayColor
        }, events, {
          style: [style, { width: layout.width, height: layout.height }],
          __source: {
            fileName: _jsxFileName,
            lineNumber: 322
          }
        }),
        _react2.default.createElement(
          _reactNative.View,
          { style: [wrapper, { backgroundColor: backgroundColor, borderColor: borderColor }], onLayout: this.onLayout, __source: {
              fileName: _jsxFileName,
              lineNumber: 330
            }
          },
          type === 'primaryGradient' && !disabled && this.renderLinearGradient(radius),
          this.renderLoadingView(),
          this.renderContentTextView([contentTextStyle, loading && {
            color: (0, _color2.default)(textColor).alpha(0.7).rgbString()
          }], wrapper),
          showUnderlay && this.renderMaskView(width, height, radius, fill)
        )
      );
    }
  }]);

  return BrickButton;
}(_react2.default.PureComponent);

BrickButton.propTypes = {
  style: _reactNative.ViewPropTypes.style,

  onPress: _propTypes2.default.func,

  onChange: _propTypes2.default.func,

  loading: _propTypes2.default.bool,

  text: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.array]),

  textStyle: _reactNative.Text.propTypes.style,

  type: _propTypes2.default.oneOf(['primary', 'primaryGradient', 'primaryBorder', 'normal', 'small']),

  wrapperStyle: _reactNative.ViewPropTypes.style,

  backgroundColorTouched: _reactNative.ColorPropType,

  disabled: _propTypes2.default.bool,

  underlayColor: _reactNative.ColorPropType,

  activeOpacity: _propTypes2.default.number,

  showUnderlay: _propTypes2.default.bool,

  loadingColor: _reactNative.ColorPropType,

  loadingBackground: _reactNative.ColorPropType,

  loadingSize: _propTypes2.default.oneOfType([_propTypes2.default.oneOf(['small', 'large']), _propTypes2.default.number]),

  loadingStyle: _reactNative.ViewPropTypes.style,

  loadingStrokeWidth: _propTypes2.default.number,

  background: _propTypes2.default.object
};
BrickButton.defaultProps = {
  style: {},
  onPress: function onPress() {},
  onChange: function onChange() {},
  loading: false,
  text: '',
  type: 'primary',
  wrapperStyle: {},
  textStyle: {},
  disabled: false,
  underlayColor: 'transparent',
  activeOpacity: 1,
  showUnderlay: false,
  backgroundColorTouched: null,
  loadingColor: '#fff',
  loadingBackground: 'rgba(0,0,0,.1)',
  loadingStyle: {},
  loadingSize: 'small',
  loadingStrokeWidth: cx(2),
  background: {
    x1: '0%',
    y1: '0%',
    x2: '0%',
    y2: '100%',
    stops: {
      '0%': 'red',
      '30%': 'blue',
      '100%': 'yellow'
    }
  }
};
exports.default = BrickButton;