@storybook/design-system/dist/components/tooltip/ListItem.js

Storybook design system

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

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

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));

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

var _theming = require("@storybook/theming");

var _weakMemoize = _interopRequireDefault(require("@emotion/weak-memoize"));

var _styles = require("../shared/styles");

var _animation = require("../shared/animation");

var _excluded = ["active", "activeColor", "isLoading"],
    _excluded2 = ["active", "isLoading", "activeColor"],
    _excluded3 = ["appearance", "left", "title", "center", "right", "onClick", "LinkWrapper"];
var Left = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
  target: "e1cw8g27"
} : {
  target: "e1cw8g27",
  label: "Left"
})();
var Title = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
  target: "e1cw8g26"
} : {
  target: "e1cw8g26",
  label: "Title"
})("font-weight:", _styles.typography.weight.bold, ";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;");
var Center = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
  target: "e1cw8g25"
} : {
  target: "e1cw8g25",
  label: "Center"
})();
var Right = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
  target: "e1cw8g24"
} : {
  target: "e1cw8g24",
  label: "Right"
})();
var ItemWrapper = (0, _theming.styled)("li", process.env.NODE_ENV === "production" ? {
  target: "e1cw8g23"
} : {
  target: "e1cw8g23",
  label: "ItemWrapper"
})("list-style:none;&:not(:first-child){border-top:1px solid ", _styles.color.border, ";}");
var ItemInner = (0, _theming.styled)("span", process.env.NODE_ENV === "production" ? {
  target: "e1cw8g22"
} : {
  target: "e1cw8g22",
  label: "ItemInner"
})("line-height:18px;padding:7px 15px;display:flex;align-items:center;justify-content:space-between;", Title, "{display:block;}", Left, ",", Center, ",", Right, "{display:inline-flex;}", Title, "{flex:0 1 auto;margin-right:auto;}", Center, "{flex:0 1 auto;margin-left:auto;margin-right:auto;}", Left, ",", Right, "{flex:0 1 auto;}", Right, "{flex:none;text-align:right;margin-left:10px;}");

var linkStyles = function linkStyles(props) {
  return /*#__PURE__*/(0, _theming.css)("font-size:", _styles.typography.size.s1, "px;transition:all 150ms ease-out;color:", _styles.color.mediumdark, ";text-decoration:none;display:block;", Title, "{color:", _styles.color.darker, ";}", Right, " svg{transition:all 200ms ease-out;opacity:0;height:12px;width:12px;margin:3px 0;vertical-align:top;path{fill:", _styles.color.mediumdark, ";}}&:hover{background:", _styles.background.calmBlue, ";cursor:pointer;", Right, " svg{opacity:1;}}", props.active && /*#__PURE__*/(0, _theming.css)(Title, "{font-weight:", _styles.typography.weight.bold, ";}", Title, ",", Center, "{color:", props.activeColor, ";}", Right, " svg{opacity:1;path{fill:", props.activeColor, ";}}" + (process.env.NODE_ENV === "production" ? "" : ";label:linkStyles;")), ";", props.isLoading && /*#__PURE__*/(0, _theming.css)(Title, "{", _animation.inlineGlow, ";flex:0 1 auto;display:inline-block;}" + (process.env.NODE_ENV === "production" ? "" : ";label:linkStyles;")), ";", props.disabled && /*#__PURE__*/(0, _theming.css)("cursor:not-allowed!important;", Title, ",", Center, "{color:", _styles.color.mediumdark, ";}" + (process.env.NODE_ENV === "production" ? "" : ";label:linkStyles;")), ";" + (process.env.NODE_ENV === "production" ? "" : ";label:linkStyles;"));
};

var Item = ( /*#__PURE__*/0, _theming.styled)(function (_ref) {
  var active = _ref.active,
      activeColor = _ref.activeColor,
      isLoading = _ref.isLoading,
      rest = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
  // eslint-disable-next-line jsx-a11y/anchor-has-content
  return /*#__PURE__*/_react["default"].createElement("a", rest);
}, process.env.NODE_ENV === "production" ? {
  target: "e1cw8g21"
} : {
  target: "e1cw8g21",
  label: "Item"
})(linkStyles, ";"); // `LinkWrapper` is an input prop that gets internally wrapped with this function here
// `weakMemoize` ensures that for any given `LinkWrapper` we always createa single "WrappedLinkWrapper"
// without this memoization the `LinkWrapper` gets *remounted* each render
// this happens because React can't reconcile it correctly, given that the component's type (a styled component) is recreated each render

var buildStyledLinkWrapper = (0, _weakMemoize["default"])(function (LinkWrapper) {
  return ( /*#__PURE__*/0, _theming.styled)(function (_ref2) {
    var active = _ref2.active,
        isLoading = _ref2.isLoading,
        activeColor = _ref2.activeColor,
        linkWrapperRest = (0, _objectWithoutProperties2["default"])(_ref2, _excluded2);
    return /*#__PURE__*/_react["default"].createElement(LinkWrapper, linkWrapperRest);
  }, process.env.NODE_ENV === "production" ? {
    target: "e1cw8g20"
  } : {
    target: "e1cw8g20",
    label: "buildStyledLinkWrapper"
  })(linkStyles, ";");
});

var ListItem = function ListItem(_ref3) {
  var _ref3$appearance = _ref3.appearance,
      appearance = _ref3$appearance === void 0 ? 'primary' : _ref3$appearance,
      left = _ref3.left,
      _ref3$title = _ref3.title,
      title = _ref3$title === void 0 ? /*#__PURE__*/_react["default"].createElement("span", null, "Loading") : _ref3$title,
      center = _ref3.center,
      right = _ref3.right,
      onClick = _ref3.onClick,
      LinkWrapper = _ref3.LinkWrapper,
      rest = (0, _objectWithoutProperties2["default"])(_ref3, _excluded3);
  var listItemActiveColor = _styles.color[appearance];

  var linkInner = /*#__PURE__*/_react["default"].createElement(ItemInner, {
    onClick: onClick,
    role: "presentation"
  }, left && /*#__PURE__*/_react["default"].createElement(Left, null, left), title && /*#__PURE__*/_react["default"].createElement(Title, null, title), center && /*#__PURE__*/_react["default"].createElement(Center, null, center), right && /*#__PURE__*/_react["default"].createElement(Right, null, right));

  if (LinkWrapper) {
    var StyledLinkWrapper = buildStyledLinkWrapper(LinkWrapper);
    return /*#__PURE__*/_react["default"].createElement(ItemWrapper, null, /*#__PURE__*/_react["default"].createElement(StyledLinkWrapper, (0, _extends2["default"])({
      activeColor: listItemActiveColor
    }, rest), linkInner));
  }

  return /*#__PURE__*/_react["default"].createElement(ItemWrapper, null, /*#__PURE__*/_react["default"].createElement(Item, (0, _extends2["default"])({
    activeColor: listItemActiveColor
  }, rest), linkInner));
};

exports.ListItem = ListItem;