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

An implementation of GitHub's Primer Design System using React

import React from 'react';
import { AlertIcon } from '@primer/octicons-react';
import { ItemContext } from './shared.js';
import { clsx } from 'clsx';
import classes from './ActionList.module.css.js';
import { BoxWithFallback } from '../internal/components/BoxWithFallback.js';
import { jsx } from 'react/jsx-runtime';
import { Tooltip } from '../TooltipV2/Tooltip.js';
import StyledSpinner from '../Spinner/Spinner.js';

const VisualContainer = ({
  className,
  ...props
}) => {
  return /*#__PURE__*/jsx(BoxWithFallback, {
    as: "span",
    className: clsx(className, classes.VisualWrap),
    ...props
  });
};
VisualContainer.displayName = "VisualContainer";
const LeadingVisual = ({
  className,
  ...props
}) => {
  return /*#__PURE__*/jsx(VisualContainer, {
    className: clsx(className, classes.LeadingVisual),
    ...props,
    children: props.children
  });
};
LeadingVisual.displayName = "LeadingVisual";
const TrailingVisual = ({
  className,
  ...props
}) => {
  const {
    trailingVisualId
  } = React.useContext(ItemContext);
  return /*#__PURE__*/jsx(VisualContainer, {
    className: clsx(className, classes.TrailingVisual),
    id: trailingVisualId,
    ...props,
    children: 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__*/jsx("span", {
    className: classes.InactiveButtonWrap,
    children: /*#__PURE__*/jsx(Tooltip, {
      text: inactiveText,
      type: "description",
      children: /*#__PURE__*/jsx("button", {
        type: "button",
        className: classes.InactiveButtonReset,
        "aria-labelledby": labelId,
        children: /*#__PURE__*/jsx(VisualComponent, {
          children: /*#__PURE__*/jsx(AlertIcon, {})
        })
      })
    })
  }) : /*#__PURE__*/jsx(VisualComponent, {
    className: className,
    children: /*#__PURE__*/jsx(StyledSpinner, {
      size: "small"
    })
  });
};
LeadingVisual.displayName = 'ActionList.LeadingVisual';
TrailingVisual.displayName = 'ActionList.TrailingVisual';

export { LeadingVisual, TrailingVisual, VisualContainer, VisualOrIndicator };