@primer/react
Version:
An implementation of GitHub's Primer Design System using React
239 lines (238 loc) • 6.11 kB
JavaScript
import VisuallyHidden from "../_VisuallyHidden.js";
import { defaultTokenSize } from "./constants.js";
import { isTokenInteractive } from "./utils.js";
import TokenBase from "./TokenBase.js";
import RemoveTokenButton from "./_RemoveTokenButton.js";
import TokenTextContainer from "./_TokenTextContainer.js";
import Token_module_css_default from "./Token.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
import { forwardRef } from "react";
//#region src/Token/Token.tsx
const tokenBorderWidthPx = 1;
const LeadingVisualContainer = (t0) => {
const $ = c(7);
const { children, size } = t0;
let t1;
if ($[0] !== size) {
t1 = size && ["large", "xlarge"].includes(size);
$[0] = size;
$[1] = t1;
} else t1 = $[1];
let t2;
if ($[2] !== t1) {
t2 = clsx(Token_module_css_default.LeadingVisualContainer, { [Token_module_css_default.LargeLeadingVisual]: t1 });
$[2] = t1;
$[3] = t2;
} else t2 = $[3];
let t3;
if ($[4] !== children || $[5] !== t2) {
t3 = /*#__PURE__*/ jsx("div", {
className: t2,
children
});
$[4] = children;
$[5] = t2;
$[6] = t3;
} else t3 = $[6];
return t3;
};
const Token = /*#__PURE__*/ forwardRef((props, forwardedRef) => {
const $ = c(66);
let LeadingVisual;
let as;
let className;
let hideRemoveButton;
let href;
let id;
let onClick;
let onRemove;
let rest;
let style;
let t0;
let text;
if ($[0] !== props) {
({as, onRemove, id, leadingVisual: LeadingVisual, text, size: t0, hideRemoveButton, href, onClick, className, style, ...rest} = props);
$[0] = props;
$[1] = LeadingVisual;
$[2] = as;
$[3] = className;
$[4] = hideRemoveButton;
$[5] = href;
$[6] = id;
$[7] = onClick;
$[8] = onRemove;
$[9] = rest;
$[10] = style;
$[11] = t0;
$[12] = text;
} else {
LeadingVisual = $[1];
as = $[2];
className = $[3];
hideRemoveButton = $[4];
href = $[5];
id = $[6];
onClick = $[7];
onRemove = $[8];
rest = $[9];
style = $[10];
t0 = $[11];
text = $[12];
}
const size = t0 === void 0 ? defaultTokenSize : t0;
let t1;
if ($[13] !== hideRemoveButton || $[14] !== onRemove || $[15] !== props) {
t1 = isTokenInteractive(props) && Boolean(onRemove) && !hideRemoveButton;
$[13] = hideRemoveButton;
$[14] = onRemove;
$[15] = props;
$[16] = t1;
} else t1 = $[16];
const hasMultipleActionTargets = t1;
let t2;
if ($[17] !== onRemove) {
t2 = (e) => {
e.stopPropagation();
onRemove && onRemove();
};
$[17] = onRemove;
$[18] = t2;
} else t2 = $[18];
const onRemoveClick = t2;
let t3;
if ($[19] !== as || $[20] !== href || $[21] !== onClick) {
t3 = {
as,
href,
onClick
};
$[19] = as;
$[20] = href;
$[21] = onClick;
$[22] = t3;
} else t3 = $[22];
const interactiveTokenProps = t3;
let t4;
if ($[23] !== id) {
var _id;
t4 = (_id = id) === null || _id === void 0 ? void 0 : _id.toString();
$[23] = id;
$[24] = t4;
} else t4 = $[24];
let t5;
if ($[25] !== className) {
t5 = clsx(className, Token_module_css_default.Token);
$[25] = className;
$[26] = t5;
} else t5 = $[26];
const t6 = !(hideRemoveButton || !onRemove);
let t7;
if ($[27] !== hasMultipleActionTargets || $[28] !== interactiveTokenProps) {
t7 = !hasMultipleActionTargets ? interactiveTokenProps : {};
$[27] = hasMultipleActionTargets;
$[28] = interactiveTokenProps;
$[29] = t7;
} else t7 = $[29];
let t8;
if ($[30] !== style) {
t8 = {
borderWidth: `${tokenBorderWidthPx}px`,
...style
};
$[30] = style;
$[31] = t8;
} else t8 = $[31];
let t9;
if ($[32] !== LeadingVisual || $[33] !== size) {
t9 = LeadingVisual && size !== "small" ? /*#__PURE__*/ jsx(LeadingVisualContainer, {
size,
children: /*#__PURE__*/ jsx(LeadingVisual, {})
}) : null;
$[32] = LeadingVisual;
$[33] = size;
$[34] = t9;
} else t9 = $[34];
let t10;
if ($[35] !== hasMultipleActionTargets || $[36] !== interactiveTokenProps) {
t10 = hasMultipleActionTargets ? interactiveTokenProps : {};
$[35] = hasMultipleActionTargets;
$[36] = interactiveTokenProps;
$[37] = t10;
} else t10 = $[37];
let t11;
if ($[38] !== onRemove) {
t11 = onRemove && /*#__PURE__*/ jsx(VisuallyHidden, { children: " (press backspace or delete to remove)" });
$[38] = onRemove;
$[39] = t11;
} else t11 = $[39];
let t12;
if ($[40] !== t10 || $[41] !== t11 || $[42] !== text) {
t12 = /*#__PURE__*/ jsxs(TokenTextContainer, {
...t10,
children: [text, t11]
});
$[40] = t10;
$[41] = t11;
$[42] = text;
$[43] = t12;
} else t12 = $[43];
let t13;
if ($[44] !== hasMultipleActionTargets || $[45] !== hideRemoveButton || $[46] !== onRemove || $[47] !== onRemoveClick || $[48] !== props || $[49] !== size) {
t13 = !hideRemoveButton && onRemove ? /*#__PURE__*/ jsx(RemoveTokenButton, {
borderOffset: tokenBorderWidthPx,
onClick: onRemoveClick,
size,
isParentInteractive: isTokenInteractive(props),
"aria-hidden": hasMultipleActionTargets ? "true" : "false"
}) : null;
$[44] = hasMultipleActionTargets;
$[45] = hideRemoveButton;
$[46] = onRemove;
$[47] = onRemoveClick;
$[48] = props;
$[49] = size;
$[50] = t13;
} else t13 = $[50];
let t14;
if ($[51] !== forwardedRef || $[52] !== onRemove || $[53] !== props.isSelected || $[54] !== rest || $[55] !== size || $[56] !== t12 || $[57] !== t13 || $[58] !== t4 || $[59] !== t5 || $[60] !== t6 || $[61] !== t7 || $[62] !== t8 || $[63] !== t9 || $[64] !== text) {
t14 = /*#__PURE__*/ jsxs(TokenBase, {
onRemove,
id: t4,
className: t5,
text,
size,
"data-is-selected": props.isSelected,
"data-is-remove-btn": t6,
...t7,
...rest,
ref: forwardedRef,
style: t8,
children: [
t9,
t12,
t13
]
});
$[51] = forwardedRef;
$[52] = onRemove;
$[53] = props.isSelected;
$[54] = rest;
$[55] = size;
$[56] = t12;
$[57] = t13;
$[58] = t4;
$[59] = t5;
$[60] = t6;
$[61] = t7;
$[62] = t8;
$[63] = t9;
$[64] = text;
$[65] = t14;
} else t14 = $[65];
return t14;
});
Token.displayName = "Token";
//#endregion
export { Token as default };