@6thquake/react-material/Tag/Tag.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 _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

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

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

var _Chip = _interopRequireDefault(require("../Chip"));

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

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

var styles = function styles(theme) {
  return {
    color: {
      primaryLight: {
        background: theme.palette.primary.light,
        border: '0',
        color: theme.palette.primary.contrastText,
        '&:hover, &:focus': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.primary.light, 0.08)
        },
        '&:active': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.primary.light, 0.12)
        }
      },
      primaryMain: {
        background: theme.palette.primary.main,
        border: '0',
        color: theme.palette.primary.contrastText,
        '&:hover, &:focus': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.primary.main, 0.08)
        },
        '&:active': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.primary.main, 0.12)
        }
      },
      primaryDark: {
        background: theme.palette.primary.dark,
        border: '0',
        color: theme.palette.primary.contrastText,
        '&:hover, &:focus': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.primary.dark, 0.08)
        },
        '&:active': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.primary.dark, 0.12)
        }
      },
      secondaryLight: {
        background: theme.palette.secondary.light,
        border: '0',
        color: theme.palette.secondary.contrastText,
        '&:hover, &:focus': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.secondary.light, 0.08)
        },
        '&:active': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.secondary.light, 0.12)
        }
      },
      secondaryMain: {
        background: theme.palette.secondary.main,
        border: '0',
        color: theme.palette.secondary.contrastText,
        '&:hover, &:focus': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.secondary.main, 0.08)
        },
        '&:active': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.secondary.main, 0.12)
        }
      },
      secondaryDark: {
        background: theme.palette.secondary.dark,
        border: '0',
        color: theme.palette.secondary.contrastText,
        '&:hover, &:focus': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.secondary.dark, 0.08)
        },
        '&:active': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.secondary.dark, 0.12)
        }
      },
      errorLight: {
        background: theme.palette.error.light,
        border: '0',
        color: theme.palette.error.contrastText,
        '&:hover, &:focus': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.error.light, 0.08)
        },
        '&:active': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.error.light, 0.12)
        }
      },
      errorMain: {
        background: theme.palette.error.main,
        border: '0',
        color: theme.palette.error.contrastText,
        '&:hover, &:focus': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.error.main, 0.08)
        },
        '&:active': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.error.main, 0.12)
        }
      },
      errorDark: {
        background: theme.palette.error.dark,
        border: '0',
        color: theme.palette.error.contrastText,
        '&:hover, &:focus': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.error.dark, 0.08)
        },
        '&:active': {
          backgroundColor: (0, _colorManipulator.emphasize)(theme.palette.error.dark, 0.12)
        }
      }
    },
    size: {
      small: {
        minHeight: '28px',
        fontSize: '0.8125rem'
      },
      medium: {
        minHeight: '32px',
        fontSize: '0.875rem'
      },
      large: {
        minHeight: '36px',
        fontSize: '0.9375rem'
      }
    },
    mixin: {}
  };
};

for (var color in styles.color) {
  for (var size in styles.size) {
    var _key = color + size;

    styles.mixin[_key] = (0, _extends2.default)({}, styles.color[color], styles.size[size]);
  }
}

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

  function Tag(props) {
    var _this;

    (0, _classCallCheck2.default)(this, Tag);
    _this = (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Tag).call(this, props));

    _this.handleDelete = function (e) {
      _this.setState({
        close: true
      });

      _this.props.onClose(e);

      e.nativeEvent.stopImmediatePropagation();
      e.stopPropagation();
      e.preventDefault();
    };

    _this.state = {
      close: false,
      onClose: props.onClose,
      color: props.color,
      size: props.size,
      closable: props.closable
    };
    return _this;
  }

  (0, _createClass2.default)(Tag, [{
    key: "componentDidMount",
    value: function componentDidMount() {}
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          label = _this$props.label,
          classes = _this$props.classes,
          props = (0, _objectWithoutProperties2.default)(_this$props, ["label", "classes"]);
      props.color = this.state.color;
      props.size = this.state.size;
      props.closable = this.state.closable;
      var close = this.state.close;
      var color = props.color,
          size = props.size,
          closable = props.closable;
      var ChipShow = closable ? _react.default.createElement(_Chip.default, {
        classes: {
          root: classes[color + size]
        },
        onDelete: this.handleDelete.bind(this),
        label: label
      }) : _react.default.createElement(_Chip.default, {
        classes: {
          root: classes[color + size]
        },
        label: label
      });
      return !close ? ChipShow : null;
    }
  }]);
  return Tag;
}(_react.Component);

Tag.propTypes = {
  /**
   * Whether the Tag can be closed
   */
  closable: _propTypes.default.bool,

  /**
   * Color of the tag, support for: 'primaryLight, primaryMain, primaryDark, secondaryLight, secondaryMain, secondaryDark, errorLight, errorMain, errorDark', defalut is primaryMain.
   */
  color: _propTypes.default.string,

  /**
   * The content of the tag
   */
  label: _propTypes.default.string,

  /**
   * Callback executed when tag is closed
   */
  onClose: _propTypes.default.func,

  /**
   *  Size of the tag, support for three sizes: 'small，medium, large', defalut value is medium.
   */
  size: _propTypes.default.string
};
Tag.defaultProps = {
  size: 'medium',
  closable: false,
  color: 'primaryMain'
};

var _default = (0, _withStyles.default)(styles, {
  name: 'RMTag',
  withTheme: true
})(Tag);

exports.default = _default;