zarm-web/es/tag/index.js

基于 React 的桌面端UI库

function _extends() { _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; }; return _extends.apply(this, arguments); }

function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }

function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }

function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); if (enumerableOnly) symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; }); keys.push.apply(keys, symbols); } return keys; }

function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i] != null ? arguments[i] : {}; if (i % 2) { ownKeys(source, true).forEach(function (key) { _defineProperty(target, key, source[key]); }); } else if (Object.getOwnPropertyDescriptors) { Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)); } else { ownKeys(source).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } } return target; }

function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }

import React, { PureComponent } from 'react';
import classnames from 'classnames';
import Color from 'color';
import Icon from '../icon';
import CheckableTag from './CheckableTag';
const presetColors = ['green', 'blue', 'orange', 'red'];

class Tag extends PureComponent {
  constructor(...args) {
    super(...args);

    this.isPresetColor = () => {
      const {
        color
      } = this.props;
      return !!color && presetColors.indexOf(color) > -1;
    };

    this.getStyle = () => {
      const {
        style,
        color
      } = this.props;
      const customStyle = color && !this.isPresetColor() ? this.getColorStyle() : {};
      return _objectSpread({}, customStyle, {}, style);
    };
  }

  getColorStyle() {
    const {
      color,
      bordered
    } = this.props;
    return !bordered ? {
      backgroundColor: color,
      borderColor: color,
      color: '#fff'
    } : {
      color,
      borderColor: Color(color).alpha(0.3),
      backgroundColor: Color(color).alpha(0.05)
    };
  }

  render() {
    const _this$props = this.props,
          {
      prefixCls,
      color,
      size,
      shape,
      className,
      onClose,
      closable,
      children,
      bordered
    } = _this$props,
          other = _objectWithoutProperties(_this$props, ["prefixCls", "color", "size", "shape", "className", "onClose", "closable", "children", "bordered"]);

    const classes = classnames(prefixCls, className, {
      [`${prefixCls}--${color}`]: this.isPresetColor(),
      [`${prefixCls}--${size}`]: size,
      [`${prefixCls}--${shape}`]: shape,
      [`${prefixCls}--unborder`]: !bordered
    });
    const closeIcon = closable && React.createElement(Icon, {
      type: "wrong",
      onClick: e => {
        onClose && onClose(e);
      }
    });
    return React.createElement("div", _extends({}, other, {
      className: classes,
      style: this.getStyle()
    }), children, closeIcon);
  }

}

Tag.displayName = 'Tag';
Tag.CheckableTag = CheckableTag;
Tag.defaultProps = {
  prefixCls: 'zw-tag',
  bordered: true
};
export default Tag;