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

Optimizely's Component Library.

"use strict";

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

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

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

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

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

var _Button = _interopRequireDefault(require("../Button"));

var _OverlayWrapper = _interopRequireDefault(require("../OverlayWrapper"));

var _Popover = _interopRequireDefault(require("../Popover"));

var _Poptip = _interopRequireDefault(require("../Poptip"));

var _Dropdown = _interopRequireDefault(require("../Dropdown"));

var _ButtonIcon = _interopRequireDefault(require("../ButtonIcon"));

var _Link = _interopRequireDefault(require("../Link"));

var _index = require("../../tokens/forimport/index.es");

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 _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 renderDropdownActivator = function renderDropdownActivator(_ref // eslint-disable-line
) {
  var onClick = _ref.onClick,
      buttonRef = _ref.buttonRef;
  return _react["default"].createElement(_ButtonIcon["default"], {
    style: "plain",
    iconFill: "default",
    iconName: "ellipsis",
    buttonRef: buttonRef,
    onClick: onClick
  });
};

var Tile = function Tile(_ref2) {
  var className = _ref2.className,
      description = _ref2.description,
      dragHandleProps = _ref2.dragHandleProps,
      dropdownItems = _ref2.dropdownItems,
      _ref2$hasSpacing = _ref2.hasSpacing,
      hasSpacing = _ref2$hasSpacing === void 0 ? true : _ref2$hasSpacing,
      _ref2$isDraggable = _ref2.isDraggable,
      isDraggable = _ref2$isDraggable === void 0 ? false : _ref2$isDraggable,
      _ref2$isSelected = _ref2.isSelected,
      isSelected = _ref2$isSelected === void 0 ? false : _ref2$isSelected,
      name = _ref2.name,
      onCopy = _ref2.onCopy,
      onDismiss = _ref2.onDismiss,
      onEdit = _ref2.onEdit,
      onTileClick = _ref2.onTileClick,
      order = _ref2.order,
      resultsLink = _ref2.resultsLink,
      status = _ref2.status,
      testSection = _ref2.testSection,
      _ref2$usesMonospaceNa = _ref2.usesMonospaceName,
      usesMonospaceName = _ref2$usesMonospaceNa === void 0 ? false : _ref2$usesMonospaceNa,
      _ref2$unsavedChangesT = _ref2.unsavedChangesText,
      unsavedChangesText = _ref2$unsavedChangesT === void 0 ? "" : _ref2$unsavedChangesT,
      _ref2$warningTitleAnd = _ref2.warningTitleAndBodyContent,
      warningTitleAndBodyContent = _ref2$warningTitleAnd === void 0 ? [] : _ref2$warningTitleAnd,
      props = _objectWithoutProperties(_ref2, ["className", "description", "dragHandleProps", "dropdownItems", "hasSpacing", "isDraggable", "isSelected", "name", "onCopy", "onDismiss", "onEdit", "onTileClick", "order", "resultsLink", "status", "testSection", "usesMonospaceName", "unsavedChangesText", "warningTitleAndBodyContent"]);

  var tileContent = _react["default"].createElement("div", null, _react["default"].createElement("p", {
    className: (0, _classnames["default"])("oui-tile__name text--left flush", {
      monospace: usesMonospaceName
    })
  }, name), _react["default"].createElement("p", {
    className: "text--left muted flush--bottom push-half--top micro wrap-text"
  }, description));

  var hasExtraContent = status || onCopy || onEdit || onDismiss || resultsLink || dropdownItems;
  var hasWarning = !!warningTitleAndBodyContent.length;
  return _react["default"].createElement("div", _extends({
    className: (0, _classnames["default"])("oui-tile flex flex-align--center soft--sides", {
      "oui-button--danger-outline": hasWarning,
      "oui-tile--selected": isSelected,
      "push-half--ends": hasSpacing
    }, className),
    "data-test-section": testSection,
    style: hasWarning ? {
      borderColor: _index.redBase
    } : {}
  }, props), order && _react["default"].createElement("span", {
    className: "oui-tile__order-number milli text--right push--right"
  }, order), isDraggable && _react["default"].createElement("div", _extends({
    className: "oui-tile__drag-handle push--right"
  }, dragHandleProps), _react["default"].createElement(_reactOuiIcons["default"], {
    name: "hamburger",
    fill: _index.greyDark
  })), unsavedChangesText && !hasWarning && _react["default"].createElement("div", {
    className: "push--right display--inline-block",
    "data-test-section": "".concat(testSection, "-unsaved-changes-indicator")
  }, _react["default"].createElement(_Poptip["default"], {
    content: unsavedChangesText,
    isAnimated: false,
    position: "bottom",
    trigger: "mouseenter"
  }, _react["default"].createElement("span", {
    style: {
      height: "10px",
      width: "10px",
      backgroundColor: "hsla(227, 100%, 50%, 1)",
      borderRadius: "50%",
      display: "inline-block"
    }
  }))), hasWarning && _react["default"].createElement("div", {
    className: "push--right push-half--top display--inline-block"
  }, _react["default"].createElement(_OverlayWrapper["default"], {
    behavior: "hover",
    horizontalAttachment: "center",
    overlay: _react["default"].createElement(_Popover["default"], {
      title: warningTitleAndBodyContent[0] || "",
      testSection: "".concat(testSection, "-warning-popover")
    }, warningTitleAndBodyContent[1] || _react["default"].createElement(_react["default"].Fragment, null)),
    shouldHideOnClick: true,
    verticalAttachment: "bottom"
  }, _react["default"].createElement(_reactOuiIcons["default"], {
    name: "exclamation",
    color: "red"
  }))), onTileClick ? _react["default"].createElement("div", {
    className: "width--1-1"
  }, _react["default"].createElement(_Button["default"], {
    testSection: "".concat(testSection, "-main-tile-button"),
    style: "unstyled",
    width: "full",
    onClick: onTileClick
  }, tileContent)) : _react["default"].createElement("div", {
    className: "width--1-1 line--1 soft--ends"
  }, tileContent), hasExtraContent && _react["default"].createElement("div", {
    className: "flex flex-justified--between flex-align--center push--left"
  }, status && _react["default"].createElement("p", {
    className: "muted micro flush--bottom weight--bold push-half--sides"
  }, status), onCopy && _react["default"].createElement(_ButtonIcon["default"], {
    iconName: "clipboard",
    size: "medium",
    style: "plain",
    iconFill: "default",
    onClick: onCopy
  }), onEdit && _react["default"].createElement(_ButtonIcon["default"], {
    iconName: "pencil",
    size: "medium",
    style: "plain",
    iconFill: "default",
    onClick: onEdit
  }), onDismiss && _react["default"].createElement(_ButtonIcon["default"], {
    iconName: "trash",
    size: "medium",
    style: "plain",
    iconFill: "default",
    onClick: onDismiss
  }), resultsLink && _react["default"].createElement(_Link["default"], {
    href: resultsLink
  }, _react["default"].createElement(_ButtonIcon["default"], {
    iconName: "winner",
    size: "medium",
    style: "plain",
    iconFill: "default",
    title: "View Results"
  })), dropdownItems && _react["default"].createElement(_Dropdown["default"], {
    renderActivator: renderDropdownActivator,
    placement: "bottom-end",
    key: "dropdown",
    testSection: "".concat(testSection, "-action-overflow-button")
  }, _react["default"].createElement(_Dropdown["default"].Contents, {
    direction: "right"
  }, dropdownItems))));
};

Tile.propTypes = {
  className: _propTypes["default"].string,
  description: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]),
  dragHandleProps: _propTypes["default"].any,
  dropdownItems: _propTypes["default"].arrayOf(_propTypes["default"].node),
  hasSpacing: _propTypes["default"].bool,
  isDraggable: _propTypes["default"].bool,
  isSelected: _propTypes["default"].bool,
  onCopy: _propTypes["default"].func,
  onDismiss: _propTypes["default"].func,
  onEdit: _propTypes["default"].func,
  onTileClick: _propTypes["default"].func,
  order: _propTypes["default"].number,
  resultsLink: _propTypes["default"].string,
  status: _propTypes["default"].string,
  testSection: _propTypes["default"].string,
  name: _propTypes["default"].oneOfType([_propTypes["default"].string, _propTypes["default"].node]).isRequired,
  usesMonospaceName: _propTypes["default"].bool,
  unsavedChangesText: _propTypes["default"].string
};
var _default = Tile;
exports["default"] = _default;