@hrobarikt/box-ui-elements/es/components/pill-selector-dropdown/RoundPill.js

Box UI Elements

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; }

import React from 'react';
import noop from 'lodash/noop';
import classNames from 'classnames';
import X from '../../icon/fill/X16'; // $FlowFixMe this imports from a typescript file

import LabelPill from '../label-pill';
import Avatar from '../avatar';
import './RoundPill.scss';

var RemoveButton = function RemoveButton(_ref) {
  var onClick = _ref.onClick,
      rest = _objectWithoutProperties(_ref, ["onClick"]);

  return React.createElement(X, _extends({}, rest, {
    "aria-hidden": "true",
    onClick: onClick
  }));
};

var RoundPill = function RoundPill(_ref2) {
  var getPillImageUrl = _ref2.getPillImageUrl,
      _ref2$isDisabled = _ref2.isDisabled,
      isDisabled = _ref2$isDisabled === void 0 ? false : _ref2$isDisabled,
      _ref2$isSelected = _ref2.isSelected,
      isSelected = _ref2$isSelected === void 0 ? false : _ref2$isSelected,
      _ref2$hasWarning = _ref2.hasWarning,
      hasWarning = _ref2$hasWarning === void 0 ? false : _ref2$hasWarning,
      isExternal = _ref2.isExternal,
      _ref2$isValid = _ref2.isValid,
      isValid = _ref2$isValid === void 0 ? true : _ref2$isValid,
      onRemove = _ref2.onRemove,
      text = _ref2.text,
      className = _ref2.className,
      _ref2$showAvatar = _ref2.showAvatar,
      showAvatar = _ref2$showAvatar === void 0 ? false : _ref2$showAvatar,
      id = _ref2.id;
  var styles = classNames('bdl-RoundPill', className, {
    'bdl-RoundPill--selected': isSelected && !isDisabled,
    'bdl-RoundPill--disabled': isDisabled,
    'bdl-RoundPill--warning': hasWarning,
    'bdl-RoundPill--error': !isValid
  });
  var pillType;

  if (hasWarning) {
    pillType = 'warning';
  }

  if (!isValid) {
    pillType = 'error';
  }

  var handleClickRemove = isDisabled ? noop : onRemove;
  var avatar = showAvatar ? React.createElement(LabelPill.Icon, {
    Component: Avatar,
    avatarUrl: getPillImageUrl && id ? getPillImageUrl({
      id: id
    }) : undefined,
    id: id,
    isExternal: isExternal,
    name: text,
    size: "small",
    shouldShowExternal: true
  }) : null;
  return React.createElement(LabelPill.Pill, {
    size: "large",
    className: styles,
    type: pillType
  }, avatar, React.createElement(LabelPill.Text, {
    className: "bdl-RoundPill-text"
  }, text), React.createElement(LabelPill.Icon, {
    className: "bdl-RoundPill-closeBtn",
    Component: RemoveButton,
    onClick: handleClickRemove
  }));
};

export default RoundPill;
//# sourceMappingURL=RoundPill.js.map