@primer/react/lib/ActionList/Visuals.js

An implementation of GitHub's Primer Design System using React

'use strict';

var React = require('react');
var octiconsReact = require('@primer/octicons-react');
var Box = require('../Box/Box.js');
var Spinner = require('../Spinner/Spinner.js');
require('@styled-system/css');
var merge = require('deepmerge');
var shared = require('./shared.js');
var Tooltip = require('../TooltipV2/Tooltip.js');
var clsx = require('clsx');
require('../FeatureFlags/FeatureFlags.js');
var useFeatureFlag = require('../FeatureFlags/useFeatureFlag.js');
require('../FeatureFlags/DefaultFeatureFlags.js');
var ActionList_module = require('./ActionList.module.css.js');
var defaultSxProp = require('../utils/defaultSxProp.js');
var featureflag = require('./featureflag.js');

function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }

var React__default = /*#__PURE__*/_interopDefault(React);
var merge__default = /*#__PURE__*/_interopDefault(merge);

function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
const VisualContainer = ({
  sx = defaultSxProp.defaultSxProp,
  className,
  ...props
}) => {
  if (sx !== defaultSxProp.defaultSxProp) {
    return /*#__PURE__*/React__default.default.createElement(Box, _extends({
      as: "span",
      className: clsx.clsx(className, ActionList_module.VisualWrap),
      sx: sx
    }, props));
  }
  return /*#__PURE__*/React__default.default.createElement("span", _extends({
    className: clsx.clsx(className, ActionList_module.VisualWrap)
  }, props));
};
VisualContainer.displayName = "VisualContainer";
// remove when primer_react_css_modules_X is shipped
const LeadingVisualContainer = ({
  sx = defaultSxProp.defaultSxProp,
  ...props
}) => {
  return /*#__PURE__*/React__default.default.createElement(Box, _extends({
    as: "span",
    sx: merge__default.default({
      height: '20px',
      // match height of text row
      maxWidth: '20px',
      // square (same as height)
      display: 'flex',
      justifyContent: 'center',
      alignItems: 'center',
      flexShrink: 0,
      marginRight: 2,
      color: 'fg.muted'
    }, sx)
  }, props));
};
LeadingVisualContainer.displayName = "LeadingVisualContainer";
const LeadingVisual = ({
  sx = defaultSxProp.defaultSxProp,
  className,
  ...props
}) => {
  const {
    variant,
    disabled,
    inactive
  } = React__default.default.useContext(shared.ItemContext);
  const enabled = useFeatureFlag.useFeatureFlag(featureflag.actionListCssModulesFlag);
  if (enabled) {
    return /*#__PURE__*/React__default.default.createElement(VisualContainer, _extends({
      className: clsx.clsx(className, ActionList_module.LeadingVisual),
      sx: sx
    }, props), props.children);
  }
  return /*#__PURE__*/React__default.default.createElement(LeadingVisualContainer, _extends({
    className: className,
    sx: merge__default.default({
      color: shared.getVariantStyles(variant, disabled, inactive).iconColor,
      svg: {
        fontSize: 0
      },
      '[data-variant="danger"]:not([aria-disabled]):not([data-inactive]):hover &, [data-variant="danger"]:active &': {
        color: shared.getVariantStyles(variant, disabled, inactive).hoverColor
      }
    }, sx)
  }, props), props.children);
};
LeadingVisual.displayName = "LeadingVisual";
const TrailingVisual = ({
  sx = defaultSxProp.defaultSxProp,
  className,
  ...props
}) => {
  const {
    variant,
    disabled,
    inactive,
    trailingVisualId
  } = React__default.default.useContext(shared.ItemContext);
  const enabled = useFeatureFlag.useFeatureFlag(featureflag.actionListCssModulesFlag);
  if (enabled) {
    if (sx !== defaultSxProp.defaultSxProp) {
      return /*#__PURE__*/React__default.default.createElement(VisualContainer, _extends({
        className: clsx.clsx(className, ActionList_module.TrailingVisual),
        sx: sx,
        id: trailingVisualId
      }, props), props.children);
    }
    return /*#__PURE__*/React__default.default.createElement(VisualContainer, _extends({
      className: clsx.clsx(className, ActionList_module.TrailingVisual),
      id: trailingVisualId
    }, props), props.children);
  }
  return /*#__PURE__*/React__default.default.createElement(Box, _extends({
    id: trailingVisualId,
    as: "span",
    className: className,
    sx: merge__default.default({
      height: '20px',
      // match height of text row
      flexShrink: 0,
      color: shared.getVariantStyles(variant, disabled, inactive).annotationColor,
      marginLeft: 2,
      fontWeight: 'initial',
      display: 'grid',
      alignContent: 'center',
      '[data-variant="danger"]:hover &, [data-variant="danger"]:active &': {
        color: shared.getVariantStyles(variant, disabled, inactive).hoverColor
      }
    }, sx)
  }, props), props.children);
};
TrailingVisual.displayName = "TrailingVisual";
// VisualOrIndicator handles the positioning of indicators and determines whether to show a visual or an indicator.
//
// If we're showing an *inactive* or *loading* indicator and a leading visual has NOT been passed,
// replace the trailing visual with the inactive indicator.
//
// This preserves the left alignment of item text.
const VisualOrIndicator = ({
  children,
  labelId,
  loading,
  inactiveText,
  itemHasLeadingVisual,
  position,
  className
}) => {
  const VisualComponent = position === 'leading' ? LeadingVisual : TrailingVisual;
  if (!loading && !inactiveText) return children;
  if (itemHasLeadingVisual && position === 'trailing' ||
  // has a leading visual, and it's in the trailing position, or
  !itemHasLeadingVisual && position === 'leading' // it doesn't have a leading visual, and it's in the leading position
  ) {
    // => so we don't render the indicator here
    return children;
  }
  return inactiveText ? /*#__PURE__*/React__default.default.createElement("span", {
    className: ActionList_module.InactiveButtonWrap
  }, /*#__PURE__*/React__default.default.createElement(Tooltip.Tooltip, {
    text: inactiveText,
    type: "label"
  }, /*#__PURE__*/React__default.default.createElement("button", {
    type: "button",
    className: ActionList_module.InactiveButtonReset,
    "aria-describedby": labelId
  }, /*#__PURE__*/React__default.default.createElement(VisualComponent, null, /*#__PURE__*/React__default.default.createElement(octiconsReact.AlertIcon, null))))) : /*#__PURE__*/React__default.default.createElement(VisualComponent, {
    className: className
  }, /*#__PURE__*/React__default.default.createElement(Spinner, {
    size: "small"
  }));
};

exports.LeadingVisual = LeadingVisual;
exports.LeadingVisualContainer = LeadingVisualContainer;
exports.TrailingVisual = TrailingVisual;
exports.VisualContainer = VisualContainer;
exports.VisualOrIndicator = VisualOrIndicator;