@primer/react
Version:
An implementation of GitHub's Primer Design System using React
216 lines (215 loc) • 6.44 kB
JavaScript
import { isResponsiveValue } from "../hooks/useResponsiveValue.js";
import AvatarStack_module_css_default from "./AvatarStack.module.css.js";
import { hasInteractiveNodes } from "../internal/utils/hasInteractiveNodes.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
import React, { useEffect, useRef, useState } from "react";
//#region src/AvatarStack/AvatarStack.tsx
const transformChildren = (children, shape) => {
return React.Children.map(children, (child) => {
if (!/*#__PURE__*/ React.isValidElement(child)) return child;
return /*#__PURE__*/ React.cloneElement(child, {
...child.props,
square: (shape === "square" ? true : void 0) || child.props.square,
className: clsx(child.props.className, "pc-AvatarItem", AvatarStack_module_css_default.AvatarItem)
});
});
};
const AvatarStackBody = (t0) => {
const $ = c(8);
const { disableExpand, hasInteractiveChildren, stackContainer, children } = t0;
const t1 = disableExpand ? "" : void 0;
let t2;
if ($[0] !== disableExpand) {
t2 = clsx({ "pc-AvatarStack--disableExpand": disableExpand }, "pc-AvatarStackBody", AvatarStack_module_css_default.AvatarStackBody);
$[0] = disableExpand;
$[1] = t2;
} else t2 = $[1];
const t3 = !hasInteractiveChildren && !disableExpand ? 0 : void 0;
let t4;
if ($[2] !== children || $[3] !== stackContainer || $[4] !== t1 || $[5] !== t2 || $[6] !== t3) {
t4 = /*#__PURE__*/ jsx("div", {
"data-component": "AvatarStack.Body",
"data-disable-expand": t1,
className: t2,
tabIndex: t3,
ref: stackContainer,
children
});
$[2] = children;
$[3] = stackContainer;
$[4] = t1;
$[5] = t2;
$[6] = t3;
$[7] = t4;
} else t4 = $[7];
return t4;
};
const AvatarStack = (t0) => {
const $ = c(36);
const { children, variant: t1, shape: t2, alignRight, disableExpand, size, className, style } = t0;
const variant = t1 === void 0 ? "cascade" : t1;
const shape = t2 === void 0 ? "circle" : t2;
const [hasInteractiveChildren, setHasInteractiveChildren] = useState(false);
const stackContainer = useRef(null);
const count = React.Children.count(children);
let t3;
if ($[0] !== children) {
const getAvatarChildSizes = () => {
const avatarSizeMap = {
narrow: [],
regular: [],
wide: []
};
return React.Children.toArray(children).reduce((acc, child) => {
if (!/*#__PURE__*/ React.isValidElement(child)) return acc;
for (const responsiveKey of Object.keys(avatarSizeMap)) {
if (isResponsiveValue(child.props.size)) avatarSizeMap[responsiveKey].push(child.props.size[responsiveKey] || 20);
else avatarSizeMap[responsiveKey].push(child.props.size || 20);
acc[responsiveKey] = Math.min(...avatarSizeMap[responsiveKey]);
}
return acc;
}, {
narrow: 20,
regular: 20,
wide: 20
});
};
t3 = getAvatarChildSizes();
$[0] = children;
$[1] = t3;
} else t3 = $[1];
const childSizes = t3;
let t4;
let t5;
if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
t4 = () => {
if (stackContainer.current) {
const interactiveChildren = () => {
setHasInteractiveChildren(hasInteractiveNodes(stackContainer.current));
};
const observer = new MutationObserver(interactiveChildren);
observer.observe(stackContainer.current, { childList: true });
interactiveChildren();
return () => {
observer.disconnect();
};
}
};
t5 = [];
$[2] = t4;
$[3] = t5;
} else {
t4 = $[2];
t5 = $[3];
}
useEffect(t4, t5);
let t6;
if ($[4] !== childSizes || $[5] !== size) {
t6 = () => {
if (!size) return {
"--stackSize-narrow": `${childSizes.narrow}px`,
"--stackSize-regular": `${childSizes.regular}px`,
"--stackSize-wide": `${childSizes.wide}px`
};
if (isResponsiveValue(size)) return {
"--stackSize-narrow": `${size.narrow || 20}px`,
"--stackSize-regular": `${size.regular || 20}px`,
"--stackSize-wide": `${size.wide || 20}px`
};
return { "--avatar-stack-size": `${size}px` };
};
$[4] = childSizes;
$[5] = size;
$[6] = t6;
} else t6 = $[6];
const getResponsiveAvatarSizeStyles = t6;
const t7 = count > 3 ? "3+" : count;
const t8 = alignRight ? "" : void 0;
const t9 = !size || isResponsiveValue(size) ? "" : void 0;
const t10 = count === 2;
const t11 = count === 3;
const t12 = count > 3;
let t13;
if ($[7] !== alignRight || $[8] !== className || $[9] !== shape || $[10] !== t10 || $[11] !== t11 || $[12] !== t12 || $[13] !== variant) {
t13 = clsx({
"pc-AvatarStack--variant": variant,
"pc-AvatarStack--shape": shape,
"pc-AvatarStack--two": t10,
"pc-AvatarStack--three": t11,
"pc-AvatarStack--three-plus": t12,
"pc-AvatarStack--right": alignRight
}, className, AvatarStack_module_css_default.AvatarStack);
$[7] = alignRight;
$[8] = className;
$[9] = shape;
$[10] = t10;
$[11] = t11;
$[12] = t12;
$[13] = variant;
$[14] = t13;
} else t13 = $[14];
let t14;
if ($[15] !== getResponsiveAvatarSizeStyles) {
t14 = getResponsiveAvatarSizeStyles();
$[15] = getResponsiveAvatarSizeStyles;
$[16] = t14;
} else t14 = $[16];
let t15;
if ($[17] !== style || $[18] !== t14) {
t15 = {
...t14,
...style
};
$[17] = style;
$[18] = t14;
$[19] = t15;
} else t15 = $[19];
let t16;
if ($[20] !== children || $[21] !== shape) {
t16 = transformChildren(children, shape);
$[20] = children;
$[21] = shape;
$[22] = t16;
} else t16 = $[22];
let t17;
if ($[23] !== disableExpand || $[24] !== hasInteractiveChildren || $[25] !== t16) {
t17 = /*#__PURE__*/ jsxs(AvatarStackBody, {
disableExpand,
hasInteractiveChildren,
stackContainer,
children: [" ", t16]
});
$[23] = disableExpand;
$[24] = hasInteractiveChildren;
$[25] = t16;
$[26] = t17;
} else t17 = $[26];
let t18;
if ($[27] !== shape || $[28] !== t13 || $[29] !== t15 || $[30] !== t17 || $[31] !== t7 || $[32] !== t8 || $[33] !== t9 || $[34] !== variant) {
t18 = /*#__PURE__*/ jsx("span", {
"data-component": "AvatarStack",
"data-variant": variant,
"data-shape": shape,
"data-avatar-count": t7,
"data-align-right": t8,
"data-responsive": t9,
className: t13,
style: t15,
children: t17
});
$[27] = shape;
$[28] = t13;
$[29] = t15;
$[30] = t17;
$[31] = t7;
$[32] = t8;
$[33] = t9;
$[34] = variant;
$[35] = t18;
} else t18 = $[35];
return t18;
};
//#endregion
export { AvatarStack as default };