doly/lib/badge/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 _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 _react = _interopRequireDefault(require("react"));

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

var _lodash = require("lodash");

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

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

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

function _templateObject6() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n\tposition: relative;\n\tdisplay: inline-block;\n\tvertical-align: middle;\n\n\t", ", ", "{\n\t\tposition: absolute;\n\t    transform: translateX(-50%);\n        left: 100%;\n\t    top: -4px;\n\t    z-index: 10;\n\t}\n\n\t", "{\n\t\ttop: -8px;\n\t}\n"]);

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

  return data;
}

function _templateObject5() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n    position: relative;\n    display: inline-block;\n    vertical-align: middle;\n    min-width: 44px;\n    min-height: 44px;\n    overflow: hidden;\n"]);

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

  return data;
}

function _templateObject4() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n    display: inline-block;\n    width: 36px;\n    padding: 0 13px;\n    font-size: 12px;\n    height: 18px;\n    line-height: 18px;\n    text-align: center;\n    color: #fff;\n    background: #ff3b30;\n    position: absolute;\n    top: 26px;\n    right: 0px;\n    transform: rotate(45deg);\n    transform-origin: right bottom;\n    text-overflow: ellipsis;\n    white-space: nowrap;\n    overflow: hidden;\n"]);

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

  return data;
}

function _templateObject3() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: inline-block;\n\tcolor: #fff;\n\tbackground: #ff3b30;\n\tbox-sizing: border-box;\n    text-align: center;\n    font-size: 10px;\n    line-height: 16px;\n    height: 16px;\n    border-radius: 16px;\n    padding: 0 4px;\n    min-width: 16px;\n    font-family: -apple-system,SF UI Text,Helvetica Neue,Helvetica,Arial,sans-serif;\n    -webkit-font-smoothing: antialiased;\n    white-space: nowrap;\n"]);

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

  return data;
}

function _templateObject2() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n    ", "\n"]);

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

  return data;
}

function _templateObject() {
  var data = (0, _taggedTemplateLiteral2.default)(["\n\tdisplay: inline-block;\n\tfont-size: 0;\n\tvertical-align: middle;\n\theight: 8px;\n    width: 8px;\n    border-radius: 100%;\n    background: #ff3b30;\n"]);

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

  return data;
}

var inlineTag = (0, _createTag.default)({
  tag: 'span',
  propsToOmit: ['dot', 'color', 'text', 'showZero', 'corner', 'overflowCount']
});
var dotCss = (0, _styledComponents.css)(_templateObject());

var StyledBadgeDot = _styledComponents.default.span(_templateObject2(), dotCss);

var StyledBadgeText = _styledComponents.default.span(_templateObject3());

var StyledCorner = _styledComponents.default.span(_templateObject4());

var StyledCornerWrapper = _styledComponents.default.span(_templateObject5());

var StyledPositionWrapper = _styledComponents.default.span(_templateObject6(), StyledBadgeText, StyledBadgeDot, StyledBadgeText);
/**
 * children是否为空
 * @param  {[type]}  children [description]
 * @return {Boolean}          [description]
 */


function hasChildren(children) {
  if (!children || typeof children === 'string' && !children.trim()) {
    return false;
  } else {
    return true;
  }
}

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

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

  (0, _createClass2.default)(Badge, [{
    key: "render",
    value: function render() {
      var _this$props = this.props,
          dot = _this$props.dot,
          color = _this$props.color,
          text = _this$props.text,
          showZero = _this$props.showZero,
          corner = _this$props.corner,
          overflowCount = _this$props.overflowCount,
          children = _this$props.children,
          rest = (0, _objectWithoutProperties2.default)(_this$props, ["dot", "color", "text", "showZero", "corner", "overflowCount", "children"]);

      var _hasChildren = hasChildren(children);

      var _view = null;
      var styles = color ? {
        background: color
      } : {};

      if (dot) {
        _view = _react.default.createElement(StyledBadgeDot, (0, _extends2.default)({
          style: styles
        }, rest));
      } else if (typeof text !== 'undefined') {
        var str = text;

        if ((0, _lodash.isNumber)(text)) {
          if (text > overflowCount) {
            str = "".concat(overflowCount, "+");
          } else if (text === 0 && !showZero) {
            str = null;
          }
        }

        if (typeof str === 'number' || str) {
          _view = corner ? _react.default.createElement(StyledCorner, (0, _extends2.default)({
            style: styles
          }, rest), str) : _react.default.createElement(StyledBadgeText, (0, _extends2.default)({
            style: styles
          }, rest), str);
        }
      }

      if (!_view) {
        return _react.default.createElement(_react.default.Fragment, null, children);
      }

      if (corner && !dot) {
        return _react.default.createElement(StyledCornerWrapper, null, children, _view);
      } else {
        if (_hasChildren) {
          return _react.default.createElement(StyledPositionWrapper, null, children, _view);
        } else {
          return _view;
        }
      }
    }
  }]);
  return Badge;
}(_react.default.Component);

exports.default = Badge;
(0, _defineProperty2.default)(Badge, "propTypes", {
  dot: _propTypes.default.bool,
  color: _propTypes.default.string,
  text: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
  showZero: _propTypes.default.bool,
  corner: _propTypes.default.bool,
  overflowCount: _propTypes.default.number
});
(0, _defineProperty2.default)(Badge, "defaultProps", {
  dot: false,
  // color: '#ff3b30',
  corner: false,
  overflowCount: 99
});