@6thquake/react-material/esm/Button/Button.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");

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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));

var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));

var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));

var _possibleConstructorReturn2 = _interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));

var _getPrototypeOf3 = _interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));

var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));

var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));

var _react = _interopRequireWildcard(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _withStyles = _interopRequireDefault(require("../styles/withStyles"));

var _colorManipulator = require("../styles/colorManipulator");

var _Button = _interopRequireDefault(require("@material-ui/core/Button/Button"));

var _classnames = _interopRequireDefault(require("classnames"));

var _Done = _interopRequireDefault(require("@material-ui/icons/Done"));

var _Replay = _interopRequireDefault(require("@material-ui/icons/Replay"));

var _CircularProgress = _interopRequireDefault(require("../CircularProgress"));

var _common = _interopRequireDefault(require("../colors/common"));

var styles = function styles(theme) {
  var defaultStyle = {
    flat: {
      warning: {
        color: theme.palette.warning.main,
        '&:hover': {
          backgroundColor: (0, _colorManipulator.fade)(theme.palette.warning.main, theme.palette.action.hoverOpacity),
          '@media (hover: none)': {
            backgroundColor: 'transparent'
          }
        }
      },
      error: {
        color: theme.palette.error.main,
        '&:hover': {
          backgroundColor: (0, _colorManipulator.fade)(theme.palette.error.main, theme.palette.action.hoverOpacity),
          '@media (hover: none)': {
            backgroundColor: 'transparent'
          }
        }
      },
      success: {
        color: theme.palette.success.main,
        '&:hover': {
          backgroundColor: (0, _colorManipulator.fade)(theme.palette.success.main, theme.palette.action.hoverOpacity),
          '@media (hover: none)': {
            backgroundColor: 'transparent'
          }
        }
      },
      progress: {
        color: theme.palette.progress.main,
        '&:hover': {
          backgroundColor: (0, _colorManipulator.fade)(theme.palette.progress.main, theme.palette.action.hoverOpacity),
          '@media (hover: none)': {
            backgroundColor: 'transparent'
          }
        }
      }
    },
    raised: {
      warning: {
        color: theme.palette.warning.contrastText,
        backgroundColor: theme.palette.warning.main,
        '&:hover': {
          backgroundColor: theme.palette.warning.dark,
          '@media (hover: none)': {
            backgroundColor: theme.palette.warning.main
          }
        }
      },
      success: {
        color: theme.palette.success.contrastText,
        backgroundColor: theme.palette.success.main,
        '&:hover': {
          backgroundColor: theme.palette.success.dark,
          '@media (hover: none)': {
            backgroundColor: theme.palette.success.main
          }
        }
      },
      error: {
        color: theme.palette.error.contrastText,
        backgroundColor: theme.palette.error.main,
        '&:hover': {
          backgroundColor: theme.palette.error.dark,
          '@media (hover: none)': {
            backgroundColor: theme.palette.error.main
          }
        }
      },
      progress: {
        color: theme.palette.progress.contrastText,
        backgroundColor: theme.palette.progress.main,
        '&:hover': {
          backgroundColor: theme.palette.progress.dark,
          '@media (hover: none)': {
            backgroundColor: theme.palette.progress.main
          }
        }
      }
    }
  };
  return {
    // todo remove
    root: {},
    label: {},
    flatPrimary: {},
    flatSecondary: {},
    colorInherit: {},
    raised: {},
    raisedPrimary: {},
    raisedSecondary: {},
    focusVisible: {},
    disabled: {},
    fab: {},
    mini: {},
    sizeSmall: {},
    sizeLarge: {},
    fullWidth: {},
    // ...styles(theme),
    flatWaring: defaultStyle.flat.warning,
    flatError: defaultStyle.flat.error,
    flatSuccess: defaultStyle.flat.success,
    flatProgress: defaultStyle.flat.progress,
    raisedWaring: defaultStyle.raised.warning,
    raisedError: defaultStyle.raised.error,
    raisedSuccess: defaultStyle.raised.success,
    raisedProgress: defaultStyle.raised.progress,
    icon: {
      fontSize: theme.typography.pxToRem(15),
      marginRight: theme.spacing(1)
    },
    fabStatus: {
      fontSize: theme.typography.pxToRem(24)
    },
    progress: {
      color: _common.default.white
    },
    fish: {
      transform: 'scale3d(1,1,1)',
      '-ms-transform': 'scale3d(1,1,1)'
      /* IE 9 */
      ,
      '-moz-transform': 'scale3d(1,1,1)'
      /* Firefox */
      ,
      '-webkit-transform': 'scale3d(1,1,1)'
      /* Safari 和 Chrome */
      ,
      '-o-transform': 'scale3d(1,1,1)',
      transition: 'all 86ms ease-out',
      '&:hover': {
        transform: 'scale3d(1.2, 1.2, 1.2)',
        '-ms-transform': 'scale3d(1.2, 1.2, 1.2)'
        /* IE 9 */
        ,
        '-moz-transform': 'scale3d(1.2, 1.2, 1.2)'
        /* Firefox */
        ,
        '-webkit-transform': 'scale3d(1.2, 1.2, 1.2)'
        /* Safari 和 Chrome */
        ,
        '-o-transform': 'scale3d(1.2, 1.2, 1.2)'
      }
    }
  };
};

var RMButton =
/*#__PURE__*/
function (_Component) {
  (0, _inherits2.default)(RMButton, _Component);

  function RMButton() {
    var _getPrototypeOf2;

    var _this;

    (0, _classCallCheck2.default)(this, RMButton);

    for (var _len = arguments.length, _args = new Array(_len), _key = 0; _key < _len; _key++) {
      _args[_key] = arguments[_key];
    }

    _this = (0, _possibleConstructorReturn2.default)(this, (_getPrototypeOf2 = (0, _getPrototypeOf3.default)(RMButton)).call.apply(_getPrototypeOf2, [this].concat(_args)));
    _this.firstRender = true;
    _this.state = {
      color: _this.props.color
    };
    _this.status = {
      status: '',
      text: ''
    };

    _this.onHandler = function () {
      var onClick = _this.props.onClick;
      var result;

      if (_this.status.status === 'progress') {
        return void 0;
      }

      if (typeof onClick === 'function') {
        for (var _len2 = arguments.length, args = new Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
          args[_key2] = arguments[_key2];
        }

        result = onClick.apply((0, _assertThisInitialized2.default)(_this), args);
      }

      if (result) {
        if (result instanceof Promise || typeof result.then === 'function') {
          _this.status.status = 'progress';

          _this.setState({
            color: 'progress'
          });

          result.then(function (r) {
            _this.status.status = 'success';

            _this.setState({
              color: 'success'
            });
          }).catch(function (r) {
            _this.status.status = 'false';

            _this.setState({
              color: 'error'
            });
          });
        }
      }
    };

    return _this;
  }

  (0, _createClass2.default)(RMButton, [{
    key: "getStatusIcon",
    value: function getStatusIcon(classes) {
      var _classNames;

      var variant = this.props.variant;
      var className = (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, classes.icon, variant !== 'fab'), (0, _defineProperty2.default)(_classNames, classes.fabStatus, variant === 'fab'), _classNames));

      switch (this.status.status) {
        case 'progress':
          // todo button loading styles
          return this.renderProgress(className);

        case 'success':
          return _react.default.createElement(_Done.default, {
            className: className
          });

        case 'false':
          return _react.default.createElement(_Replay.default, {
            className: className
          });

        default:
          return null;
      }
    }
  }, {
    key: "renderProgress",
    value: function renderProgress(className) {
      var _classNames2;

      var _this$props = this.props,
          variant = _this$props.variant,
          classes = _this$props.classes;
      var size = variant === 'fab' ? 24 : 15;
      var classesPro = (0, _classnames.default)((_classNames2 = {}, (0, _defineProperty2.default)(_classNames2, classes.progress, variant !== 'flat' && variant !== 'outlined'), (0, _defineProperty2.default)(_classNames2, classes.flatProgress, variant === 'flat' || variant === 'outlined'), _classNames2), className);
      return _react.default.createElement(_CircularProgress.default, {
        className: classesPro,
        size: size
      });
    }
  }, {
    key: "resetActive",
    value: function resetActive() {
      this.setState({
        active: false
      });
    }
  }, {
    key: "renderChildren",
    value: function renderChildren() {
      var _this$props2 = this.props,
          children = _this$props2.children,
          variant = _this$props2.variant;

      if (variant === 'fab') {
        if (this.status.status !== '') {
          return null;
        }
      }

      return children;
    }
  }, {
    key: "render",
    value: function render() {
      var _classNames3;

      var _this$props3 = this.props,
          children = _this$props3.children,
          classNamePro = _this$props3.className,
          classes = _this$props3.classes,
          onClick = _this$props3.onClick,
          props = (0, _objectWithoutProperties2.default)(_this$props3, ["children", "className", "classes", "onClick"]);
      var raisedProgress = classes.raisedProgress,
          raisedError = classes.raisedError,
          raisedSuccess = classes.raisedSuccess,
          raisedWaring = classes.raisedWaring,
          flatProgress = classes.flatProgress,
          flatError = classes.flatError,
          flatSuccess = classes.flatSuccess,
          flatWaring = classes.flatWaring,
          icon = classes.icon,
          fabStatus = classes.fabStatus,
          progress = classes.progress,
          fish = classes.fish,
          classesPro = (0, _objectWithoutProperties2.default)(classes, ["raisedProgress", "raisedError", "raisedSuccess", "raisedWaring", "flatProgress", "flatError", "flatSuccess", "flatWaring", "icon", "fabStatus", "progress", "fish"]);
      props.color = this.state.color;
      var color = props.color;
      var customColors = ['warning', 'error', 'success', 'progress'];

      if (customColors.indexOf(color) !== -1) {
        props.color = 'default';
      }

      this.firstRender = false;
      var flat = this.props.variant === 'flat';
      var className = (0, _classnames.default)((_classNames3 = {}, (0, _defineProperty2.default)(_classNames3, classes.raisedProgress, !flat && color === 'progress'), (0, _defineProperty2.default)(_classNames3, classes.raisedError, !flat && color === 'error'), (0, _defineProperty2.default)(_classNames3, classes.raisedSuccess, !flat && color === 'success'), (0, _defineProperty2.default)(_classNames3, classes.raisedWaring, !flat && color === 'warning'), (0, _defineProperty2.default)(_classNames3, classes.flatProgress, flat && color === 'progress'), (0, _defineProperty2.default)(_classNames3, classes.flatError, flat && color === 'error'), (0, _defineProperty2.default)(_classNames3, classes.flatSuccess, flat && color === 'success'), (0, _defineProperty2.default)(_classNames3, classes.flatWaring, flat && color === 'warning'), (0, _defineProperty2.default)(_classNames3, classes.fish, props.variant === 'fish'), _classNames3), classNamePro);

      if (props.variant === 'fish') {
        props.variant = 'fab';
      }

      return _react.default.createElement(_Button.default, (0, _extends2.default)({}, props, {
        classes: classesPro,
        className: className,
        onClick: this.onHandler
      }), this.getStatusIcon(classes), this.renderChildren());
    }
  }]);
  return RMButton;
}(_react.Component);

RMButton.propTypes = {
  /**
   * The content of the button.
   */
  children: _propTypes.default.node.isRequired,

  /**
   * Override or extend the styles applied to the component.
   * See [CSS API](#css-api) below for more details.
   */
  classes: _propTypes.default.object.isRequired,

  /**
   * @ignore
   */
  className: _propTypes.default.string,

  /**
   * The color of the component. It supports those theme colors that make sense for this component.
   */
  color: _propTypes.default.oneOf(['default', 'inherit', 'primary', 'secondary', 'error', 'success', 'warning', 'progress']),

  /**
   * The component used for the root node.
   * Either a string to use a DOM element or a component.
   */
  component: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.func, _propTypes.default.object]),

  /**
   * If `true`, the button will be disabled.
   */
  disabled: _propTypes.default.bool,

  /**
   * If `true`, the  keyboard focus ripple will be disabled.
   * `disableRipple` must also be true.
   */
  disableFocusRipple: _propTypes.default.bool,

  /**
   * If `true`, the ripple effect will be disabled.
   */
  disableRipple: _propTypes.default.bool,

  /**
   * @ignore
   */
  focusVisibleClassName: _propTypes.default.string,

  /**
   * If `true`, the button will take up the full width of its container.
   */
  fullWidth: _propTypes.default.bool,

  /**
   * The URL to link to when the button is clicked.
   * If defined, an `a` element will be used as the root node.
   */
  href: _propTypes.default.string,

  /**
   * If `true`, and `variant` is `'fab'`, will use mini floating action button styling.
   */
  mini: _propTypes.default.bool,

  /**
   * Button 的回掉函数，函数的返回值如果是Promise，Button变为带反馈的样子。
   */
  onClick: _propTypes.default.func,

  /**
   * The size of the button.
   * `small` is equivalent to the dense button styling.
   */
  size: _propTypes.default.oneOf(['small', 'medium', 'large']),

  /**
   * The type of button.
   */
  type: _propTypes.default.string,

  /**
   * The variant to use.
   */
  variant: _propTypes.default.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab', 'fish'])
};
RMButton.defaultProps = {
  color: 'default',
  component: 'button',
  disabled: false,
  disableFocusRipple: false,
  fullWidth: false,
  mini: false,
  size: 'medium',
  type: 'button',
  variant: 'text'
};
RMButton.contextTypes = {
  resetActive: _propTypes.default.func
};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMButton'
})(RMButton);

exports.default = _default;