doly/lib/icon/index.js

doly ui components

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

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

var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));

var _common = require("../_style/common");

var _createTag = _interopRequireDefault(require("../_utils/createTag"));

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

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

var _styledComponents = _interopRequireWildcard(require("styled-components"));

var _loadSprite = _interopRequireDefault(require("./loadSprite"));

function _templateObject3() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-block;\n    fill: currentColor;\n    background-size: cover;\n    vertical-align: middle;\n\n    width: ", ";\n    height: ", ";\n\n    ", "\n"]);

  _templateObject3 = function _templateObject3() {
    return data;
  };

  return data;
}

function _templateObject2() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n    animation: ", " 1s steps(12,end) infinite;\n"]);

  _templateObject2 = function _templateObject2() {
    return data;
  };

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n    to {\n        transform: rotate(1turn);\n    }\n"]);

  _templateObject = function _templateObject() {
    return data;
  };

  return data;
}

var sizeMap = {
  xxs: '15px',
  xs: '18px',
  sm: '21px',
  md: '22px',
  lg: '36px'
};
var svgTag = (0, _createTag.default)({
  tag: 'svg',
  propsToOmit: ['type', 'size', 'color']
});
var rotate360 = (0, _styledComponents.keyframes)(_templateObject());
var rotateCss = (0, _styledComponents.css)(_templateObject2(), rotate360);
var StyledIcon = (0, _styledComponents.default)(svgTag)(_templateObject3(), function (props) {
  return sizeMap[props.size];
}, function (props) {
  return sizeMap[props.size];
}, function (props) {
  return props.type === 'loading' ? rotateCss : '';
});

var Icon =
/*#__PURE__*/
function (_React$Component) {
  (0, _inherits2.default)(Icon, _React$Component);

  function Icon() {
    (0, _classCallCheck2.default)(this, Icon);
    return (0, _possibleConstructorReturn2.default)(this, (0, _getPrototypeOf2.default)(Icon).apply(this, arguments));
  }

  (0, _createClass2.default)(Icon, [{
    key: "componentWillMount",
    value: function componentWillMount() {
      (0, _loadSprite.default)();
    }
  }, {
    key: "render",
    value: function render() {
      var _this$props = this.props,
          type = _this$props.type,
          color = _this$props.color,
          style = _this$props.style,
          rest = (0, _objectWithoutProperties2.default)(_this$props, ["type", "color", "style"]);
      var colorStyle = color ? {
        color: color
      } : {};
      var styles = style ? (0, _objectSpread2.default)({}, colorStyle, style) : colorStyle;
      return _react.default.createElement(StyledIcon, (0, _extends2.default)({}, this.props, {
        style: styles
      }), _react.default.createElement(_common.GlobalStyle, null), _react.default.createElement("use", {
        xlinkHref: "#".concat(type)
      }));
    }
  }]);
  return Icon;
}(_react.default.Component);

exports.default = Icon;
(0, _defineProperty2.default)(Icon, "propTypes", {
  type: _propTypes.default.string.isRequired,
  color: _propTypes.default.string,
  size: _propTypes.default.oneOf(['xxs', 'xs', 'sm', 'md', 'lg']),
  style: _propTypes.default.object
});
(0, _defineProperty2.default)(Icon, "defaultProps", {
  size: 'md' // color: '#000'

});