optimizely-oui/dist/js/components/Token/index.js

Optimizely's Component Library.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

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

var _reactOuiIcons = _interopRequireDefault(require("react-oui-icons"));

var _DismissButton = _interopRequireDefault(require("./DismissButton"));

var _classnames = _interopRequireDefault(require("classnames"));

var _accessibility = require("../../utils/accessibility");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }

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

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

var LIGHT_BACKGROUND_STYLES = ["tertiary"]; // Light backgrounds require a dark font and dismiss Icon color.

var getStylingInfo = function getStylingInfo(style, backgroundColor) {
  return LIGHT_BACKGROUND_STYLES.includes(style) || backgroundColor ? {
    fontClass: "oui-token--font-dark",
    dismissFillColor: "black"
  } : {
    fontClass: "oui-token--font-light",
    dismissFillColor: "white"
  };
};
/**
 * Token to be used to make token lists.
 * @param {Object} props - Properties passed to component
 * @returns {ReactElement}
 */


var Token = function Token(_ref) {
  var _classNames;

  var className = _ref.className,
      description = _ref.description,
      dragHandleProps = _ref.dragHandleProps,
      backgroundColor = _ref.backgroundColor,
      hasSnugWrap = _ref.hasSnugWrap,
      hasWrap = _ref.hasWrap,
      isDismissible = _ref.isDismissible,
      isDraggable = _ref.isDraggable,
      isFullWidth = _ref.isFullWidth,
      name = _ref.name,
      onDismiss = _ref.onDismiss,
      order = _ref.order,
      style = _ref.style,
      showWell = _ref.showWell,
      testSection = _ref.testSection,
      usesDragHandle = _ref.usesDragHandle,
      props = _objectWithoutProperties(_ref, ["className", "description", "dragHandleProps", "backgroundColor", "hasSnugWrap", "hasWrap", "isDismissible", "isDraggable", "isFullWidth", "name", "onDismiss", "order", "style", "showWell", "testSection", "usesDragHandle"]);

  var tokenContainerClasses = (0, _classnames["default"])({
    "oui-token-wrap": hasWrap && !hasSnugWrap,
    "oui-token-wrap--snug": hasSnugWrap,
    "oui-token-wrap--well": showWell,
    "oui-token--full-width": isFullWidth
  }, className);
  var tokenClasses = (0, _classnames["default"])((_classNames = {
    "oui-token": true
  }, _defineProperty(_classNames, "oui-token--".concat(style), style), _defineProperty(_classNames, "flex-align--center", !description), _classNames));
  var tokenToolsClasses = (0, _classnames["default"])({
    "oui-token-tool": isDraggable || order,
    "cursor--grab": isDraggable
  });

  var _getStylingInfo = getStylingInfo(style, backgroundColor),
      fontClass = _getStylingInfo.fontClass,
      dismissFillColor = _getStylingInfo.dismissFillColor; // ensure valid backgroundColor name
  // (in the case that propType errors are ignored)


  var tokenFillColor = backgroundColor && Object.keys(_accessibility.FILL_COLOR_MAP_LIGHT).includes(backgroundColor) ? _accessibility.FILL_COLOR_MAP_LIGHT[backgroundColor] : null;

  if (usesDragHandle) {
    return (
      /* eslint-disable react/jsx-boolean-value */
      _react["default"].createElement("div", _extends({
        "data-oui-component": true,
        className: tokenContainerClasses,
        "data-test-section": testSection
      }, props), _react["default"].createElement("div", {
        className: tokenClasses,
        style: {
          backgroundColor: tokenFillColor
        }
      }, _react["default"].createElement("div", {
        className: "flex flex-align--center"
      }, _react["default"].createElement("div", {
        className: tokenToolsClasses,
        "data-token-handle": true
      }, order && _react["default"].createElement("span", {
        className: "oui-token__number push--right"
      }, order), isDraggable && _react["default"].createElement("div", _extends({
        className: "oui-icon oui-token__move push--right oui-token__move--drag-handle"
      }, dragHandleProps), _react["default"].createElement(_reactOuiIcons["default"], {
        name: "hamburger",
        fill: "#ffffff"
      }))), _react["default"].createElement("div", {
        className: fontClass
      }, name, description && _react["default"].createElement("div", {
        className: "oui-token__description"
      }, description))), isDismissible && onDismiss && _react["default"].createElement(_DismissButton["default"], {
        onClick: onDismiss,
        fill: dismissFillColor,
        testSection: testSection,
        backgroundColor: backgroundColor
      })))
      /* eslint-enable */

    );
  }

  return (
    /* eslint-disable react/jsx-boolean-value */
    _react["default"].createElement("div", _extends({
      "data-oui-component": true,
      className: tokenContainerClasses,
      "data-test-section": testSection
    }, props), _react["default"].createElement("div", {
      className: tokenToolsClasses,
      "data-token-handle": true
    }, order && _react["default"].createElement("span", {
      className: "oui-token__number push--right"
    }, order), isDraggable && _react["default"].createElement("div", {
      className: "oui-icon oui-token__move"
    }, _react["default"].createElement(_reactOuiIcons["default"], {
      name: "ellipsis",
      fill: "#c7c7c7"
    }))), _react["default"].createElement("div", {
      className: tokenClasses,
      style: {
        backgroundColor: tokenFillColor
      }
    }, _react["default"].createElement("div", {
      className: fontClass
    }, name, description && _react["default"].createElement("div", {
      className: "oui-token__description"
    }, description)), isDismissible && onDismiss && _react["default"].createElement(_DismissButton["default"], {
      onClick: onDismiss,
      fill: dismissFillColor,
      testSection: testSection
    })))
    /* eslint-enable */

  );
};

Token.propTypes = {
  /**
   *  Color to use for the background of the token
   */
  backgroundColor: _propTypes["default"].oneOf(["aqua", "yellow", "blue", "green", "orange", "pink", "red", "magenta", "purple"]),

  /** CSS class names. */
  className: _propTypes["default"].string,

  /** Description explaining the token */
  description: _propTypes["default"].string,

  /**
   * Set of props provided by react-beautiful-dnd to configure
   * this token's drag handle
   */
  dragHandleProps: _propTypes["default"].object,

  /** Whether or not the token should have a tighter wrap */
  hasSnugWrap: _propTypes["default"].bool,

  /** Whether or not the token should have a wrap */
  hasWrap: _propTypes["default"].bool,

  /**
   * Determines if token has dismissible feature or not. If true, `onDismiss`
   * is required.
   */
  isDismissible: _propTypes["default"].bool,

  /** Shows an icon indicating that the token is draggable */
  isDraggable: _propTypes["default"].bool,

  /** Makes the component full width of container */
  isFullWidth: _propTypes["default"].bool,

  /** Name label on token */
  name: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,

  /**
   * Function to call that dismisses the token. Required if the token is
   * dismissible.
   */
  onDismiss: _propTypes["default"].func,

  /** Show a number indicating the token's order */
  order: _propTypes["default"].number,

  /** Whether or not a well is presented around the token. */
  showWell: _propTypes["default"].bool,

  /** Determines style of token depending on priority level or error */
  style: _propTypes["default"].oneOf(["primary", "secondary", "tertiary", "error"]),

  /** Hook for automated JavaScript tests */
  testSection: _propTypes["default"].string,

  /** Used to switch drag handle */
  usesDragHandle: _propTypes["default"].bool
};
Token.defaultProps = {
  dragHandleProps: {},
  hasWrap: true,
  isDismissible: false,
  style: "secondary",
  showWell: true,
  usesDragHandle: true
};
var _default = Token;
exports["default"] = _default;