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

Optimizely's Component Library.

import _pt from "prop-types";

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 classNames from "classnames";
import Icon from "react-oui-icons";
import Button from "../Button";
import OverlayWrapper from "../OverlayWrapper";
import Popover from "../Popover";
import Poptip from "../Poptip";
import Dropdown from "../Dropdown";
import ButtonIcon from "../ButtonIcon";
import Link from "../Link";
import { greyDark, redBase } from "../../tokens/forimport/index.es";

var renderDropdownActivator = function renderDropdownActivator(_ref // eslint-disable-line
) {
  var onClick = _ref.onClick,
      buttonRef = _ref.buttonRef;
  return React.createElement(ButtonIcon, {
    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.createElement("div", null, React.createElement("p", {
    className: classNames("oui-tile__name text--left flush", {
      monospace: usesMonospaceName
    })
  }, name), React.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.createElement("div", _extends({
    className: classNames("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: redBase
    } : {}
  }, props), order && React.createElement("span", {
    className: "oui-tile__order-number milli text--right push--right"
  }, order), isDraggable && React.createElement("div", _extends({
    className: "oui-tile__drag-handle push--right"
  }, dragHandleProps), React.createElement(Icon, {
    name: "hamburger",
    fill: greyDark
  })), unsavedChangesText && !hasWarning && React.createElement("div", {
    className: "push--right display--inline-block",
    "data-test-section": "".concat(testSection, "-unsaved-changes-indicator")
  }, React.createElement(Poptip, {
    content: unsavedChangesText,
    isAnimated: false,
    position: "bottom",
    trigger: "mouseenter"
  }, React.createElement("span", {
    style: {
      height: "10px",
      width: "10px",
      backgroundColor: "hsla(227, 100%, 50%, 1)",
      borderRadius: "50%",
      display: "inline-block"
    }
  }))), hasWarning && React.createElement("div", {
    className: "push--right push-half--top display--inline-block"
  }, React.createElement(OverlayWrapper, {
    behavior: "hover",
    horizontalAttachment: "center",
    overlay: React.createElement(Popover, {
      title: warningTitleAndBodyContent[0] || "",
      testSection: "".concat(testSection, "-warning-popover")
    }, warningTitleAndBodyContent[1] || React.createElement(React.Fragment, null)),
    shouldHideOnClick: true,
    verticalAttachment: "bottom"
  }, React.createElement(Icon, {
    name: "exclamation",
    color: "red"
  }))), onTileClick ? React.createElement("div", {
    className: "width--1-1"
  }, React.createElement(Button, {
    testSection: "".concat(testSection, "-main-tile-button"),
    style: "unstyled",
    width: "full",
    onClick: onTileClick
  }, tileContent)) : React.createElement("div", {
    className: "width--1-1 line--1 soft--ends"
  }, tileContent), hasExtraContent && React.createElement("div", {
    className: "flex flex-justified--between flex-align--center push--left"
  }, status && React.createElement("p", {
    className: "muted micro flush--bottom weight--bold push-half--sides"
  }, status), onCopy && React.createElement(ButtonIcon, {
    iconName: "clipboard",
    size: "medium",
    style: "plain",
    iconFill: "default",
    onClick: onCopy
  }), onEdit && React.createElement(ButtonIcon, {
    iconName: "pencil",
    size: "medium",
    style: "plain",
    iconFill: "default",
    onClick: onEdit
  }), onDismiss && React.createElement(ButtonIcon, {
    iconName: "trash",
    size: "medium",
    style: "plain",
    iconFill: "default",
    onClick: onDismiss
  }), resultsLink && React.createElement(Link, {
    href: resultsLink
  }, React.createElement(ButtonIcon, {
    iconName: "winner",
    size: "medium",
    style: "plain",
    iconFill: "default",
    title: "View Results"
  })), dropdownItems && React.createElement(Dropdown, {
    renderActivator: renderDropdownActivator,
    placement: "bottom-end",
    key: "dropdown",
    testSection: "".concat(testSection, "-action-overflow-button")
  }, React.createElement(Dropdown.Contents, {
    direction: "right"
  }, dropdownItems))));
};

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