@primer/react
Version:
An implementation of GitHub's Primer Design System using React
151 lines (150 loc) • 4.15 kB
JavaScript
import Spinner from "../Spinner/Spinner.js";
import { Tooltip } from "../TooltipV2/Tooltip.js";
import { ItemContext } from "./shared.js";
import ActionList_module_css_default from "./ActionList.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { jsx } from "react/jsx-runtime";
import React from "react";
import { AlertIcon } from "@primer/octicons-react";
//#region src/ActionList/Visuals.tsx
const VisualContainer = (t0) => {
const $ = c(8);
let className;
let props;
if ($[0] !== t0) {
({className, ...props} = t0);
$[0] = t0;
$[1] = className;
$[2] = props;
} else {
className = $[1];
props = $[2];
}
let t1;
if ($[3] !== className) {
t1 = clsx(className, ActionList_module_css_default.VisualWrap);
$[3] = className;
$[4] = t1;
} else t1 = $[4];
let t2;
if ($[5] !== props || $[6] !== t1) {
t2 = /*#__PURE__*/ jsx("span", {
className: t1,
...props
});
$[5] = props;
$[6] = t1;
$[7] = t2;
} else t2 = $[7];
return t2;
};
const LeadingVisual = (t0) => {
const $ = c(8);
let className;
let props;
if ($[0] !== t0) {
({className, ...props} = t0);
$[0] = t0;
$[1] = className;
$[2] = props;
} else {
className = $[1];
props = $[2];
}
let t1;
if ($[3] !== className) {
t1 = clsx(className, ActionList_module_css_default.LeadingVisual);
$[3] = className;
$[4] = t1;
} else t1 = $[4];
let t2;
if ($[5] !== props || $[6] !== t1) {
t2 = /*#__PURE__*/ jsx(VisualContainer, {
className: t1,
"data-component": "ActionList.LeadingVisual",
...props,
children: props.children
});
$[5] = props;
$[6] = t1;
$[7] = t2;
} else t2 = $[7];
return t2;
};
const TrailingVisual = (t0) => {
const $ = c(9);
let className;
let props;
if ($[0] !== t0) {
({className, ...props} = t0);
$[0] = t0;
$[1] = className;
$[2] = props;
} else {
className = $[1];
props = $[2];
}
const { trailingVisualId } = React.useContext(ItemContext);
let t1;
if ($[3] !== className) {
t1 = clsx(className, ActionList_module_css_default.TrailingVisual);
$[3] = className;
$[4] = t1;
} else t1 = $[4];
let t2;
if ($[5] !== props || $[6] !== t1 || $[7] !== trailingVisualId) {
t2 = /*#__PURE__*/ jsx(VisualContainer, {
className: t1,
"data-component": "ActionList.TrailingVisual",
id: trailingVisualId,
...props,
children: props.children
});
$[5] = props;
$[6] = t1;
$[7] = trailingVisualId;
$[8] = t2;
} else t2 = $[8];
return t2;
};
const VisualOrIndicator = (t0) => {
const $ = c(6);
const { children, labelId, loading, inactiveText, itemHasLeadingVisual, position, className } = t0;
const VisualComponent = position === "leading" ? LeadingVisual : TrailingVisual;
if (!loading && !inactiveText) return children;
if (itemHasLeadingVisual && position === "trailing" || !itemHasLeadingVisual && position === "leading") return children;
let t1;
if ($[0] !== VisualComponent || $[1] !== className || $[2] !== inactiveText || $[3] !== labelId || $[4] !== position) {
t1 = inactiveText ? /*#__PURE__*/ jsx("span", {
className: ActionList_module_css_default.InactiveButtonWrap,
"data-position": position,
children: /*#__PURE__*/ jsx(Tooltip, {
text: inactiveText,
type: "description",
children: /*#__PURE__*/ jsx("button", {
type: "button",
className: ActionList_module_css_default.InactiveButtonReset,
"aria-labelledby": labelId,
children: /*#__PURE__*/ jsx(VisualComponent, { children: /*#__PURE__*/ jsx(AlertIcon, {}) })
})
})
}) : /*#__PURE__*/ jsx(VisualComponent, {
className,
children: /*#__PURE__*/ jsx(Spinner, { size: "small" })
});
$[0] = VisualComponent;
$[1] = className;
$[2] = inactiveText;
$[3] = labelId;
$[4] = position;
$[5] = t1;
} else t1 = $[5];
return t1;
};
LeadingVisual.displayName = "ActionList.LeadingVisual";
TrailingVisual.displayName = "ActionList.TrailingVisual";
LeadingVisual.__SLOT__ = Symbol("ActionList.LeadingVisual");
TrailingVisual.__SLOT__ = Symbol("ActionList.TrailingVisual");
//#endregion
export { LeadingVisual, TrailingVisual, VisualContainer, VisualOrIndicator };