@primer/react
Version:
An implementation of GitHub's Primer Design System using React
367 lines (366 loc) • 8.41 kB
JavaScript
import { useFeatureFlag } from "../FeatureFlags/useFeatureFlag.js";
import Timeline_module_css_default from "./Timeline.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { jsx } from "react/jsx-runtime";
import React from "react";
//#region src/Timeline/Timeline.tsx
function resolveClipSidebar(clipSidebar) {
if (clipSidebar === true || clipSidebar === "both") return "both";
if (clipSidebar === "start" || clipSidebar === "end") return clipSidebar;
}
const Timeline = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
const $ = c(20);
let className;
let clipSidebar;
let props;
if ($[0] !== t0) {
({clipSidebar, className, ...props} = t0);
$[0] = t0;
$[1] = className;
$[2] = clipSidebar;
$[3] = props;
} else {
className = $[1];
clipSidebar = $[2];
props = $[3];
}
const useListSemantics = useFeatureFlag("primer_react_timeline_list_semantics");
let t1;
if ($[4] !== clipSidebar) {
t1 = resolveClipSidebar(clipSidebar);
$[4] = clipSidebar;
$[5] = t1;
} else t1 = $[5];
const resolvedClipSidebar = t1;
if (useListSemantics) {
let t2;
if ($[6] !== className) {
t2 = clsx(className, Timeline_module_css_default.Timeline);
$[6] = className;
$[7] = t2;
} else t2 = $[7];
const t3 = forwardRef;
let t4;
if ($[8] !== props || $[9] !== resolvedClipSidebar || $[10] !== t2 || $[11] !== t3) {
t4 = /*#__PURE__*/ jsx("ol", {
...props,
role: "list",
className: t2,
ref: t3,
"data-clip-sidebar": resolvedClipSidebar
});
$[8] = props;
$[9] = resolvedClipSidebar;
$[10] = t2;
$[11] = t3;
$[12] = t4;
} else t4 = $[12];
return t4;
}
const t2 = props;
let t3;
if ($[13] !== className) {
t3 = clsx(className, Timeline_module_css_default.Timeline);
$[13] = className;
$[14] = t3;
} else t3 = $[14];
const t4 = forwardRef;
let t5;
if ($[15] !== resolvedClipSidebar || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
t5 = /*#__PURE__*/ jsx("div", {
...t2,
className: t3,
ref: t4,
"data-clip-sidebar": resolvedClipSidebar
});
$[15] = resolvedClipSidebar;
$[16] = t2;
$[17] = t3;
$[18] = t4;
$[19] = t5;
} else t5 = $[19];
return t5;
});
Timeline.displayName = "Timeline";
/**
* @deprecated Use the `TimelineItemProps` type instead
*/
const TimelineItem = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
const $ = c(18);
let className;
let condensed;
let props;
if ($[0] !== t0) {
({condensed, className, ...props} = t0);
$[0] = t0;
$[1] = className;
$[2] = condensed;
$[3] = props;
} else {
className = $[1];
condensed = $[2];
props = $[3];
}
if (useFeatureFlag("primer_react_timeline_list_semantics")) {
let t1;
if ($[4] !== className) {
t1 = clsx(className, "Timeline-Item", Timeline_module_css_default.TimelineItem);
$[4] = className;
$[5] = t1;
} else t1 = $[5];
const t2 = forwardRef;
const t3 = condensed ? "" : void 0;
let t4;
if ($[6] !== props || $[7] !== t1 || $[8] !== t2 || $[9] !== t3) {
t4 = /*#__PURE__*/ jsx("li", {
...props,
className: t1,
ref: t2,
"data-condensed": t3
});
$[6] = props;
$[7] = t1;
$[8] = t2;
$[9] = t3;
$[10] = t4;
} else t4 = $[10];
return t4;
}
const t1 = props;
let t2;
if ($[11] !== className) {
t2 = clsx(className, "Timeline-Item", Timeline_module_css_default.TimelineItem);
$[11] = className;
$[12] = t2;
} else t2 = $[12];
const t3 = forwardRef;
const t4 = condensed ? "" : void 0;
let t5;
if ($[13] !== t1 || $[14] !== t2 || $[15] !== t3 || $[16] !== t4) {
t5 = /*#__PURE__*/ jsx("div", {
...t1,
className: t2,
ref: t3,
"data-condensed": t4
});
$[13] = t1;
$[14] = t2;
$[15] = t3;
$[16] = t4;
$[17] = t5;
} else t5 = $[17];
return t5;
});
TimelineItem.displayName = "TimelineItem";
const TimelineBadge = (t0) => {
const $ = c(10);
let className;
let props;
let variant;
if ($[0] !== t0) {
({className, variant, ...props} = t0);
$[0] = t0;
$[1] = className;
$[2] = props;
$[3] = variant;
} else {
className = $[1];
props = $[2];
variant = $[3];
}
let t1;
if ($[4] !== className) {
t1 = clsx(className, Timeline_module_css_default.TimelineBadge);
$[4] = className;
$[5] = t1;
} else t1 = $[5];
let t2;
if ($[6] !== props || $[7] !== t1 || $[8] !== variant) {
t2 = /*#__PURE__*/ jsx("div", {
className: Timeline_module_css_default.TimelineBadgeWrapper,
children: /*#__PURE__*/ jsx("div", {
...props,
className: t1,
"data-variant": variant
})
});
$[6] = props;
$[7] = t1;
$[8] = variant;
$[9] = t2;
} else t2 = $[9];
return t2;
};
TimelineBadge.displayName = "Timeline.Badge";
const TimelineBody = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
const $ = c(9);
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, Timeline_module_css_default.TimelineBody);
$[3] = className;
$[4] = t1;
} else t1 = $[4];
let t2;
if ($[5] !== forwardRef || $[6] !== props || $[7] !== t1) {
t2 = /*#__PURE__*/ jsx("div", {
...props,
className: t1,
ref: forwardRef
});
$[5] = forwardRef;
$[6] = props;
$[7] = t1;
$[8] = t2;
} else t2 = $[8];
return t2;
});
TimelineBody.displayName = "TimelineBody";
const TimelineBreak = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
const $ = c(15);
let className;
let props;
if ($[0] !== t0) {
({className, ...props} = t0);
$[0] = t0;
$[1] = className;
$[2] = props;
} else {
className = $[1];
props = $[2];
}
if (useFeatureFlag("primer_react_timeline_list_semantics")) {
let t1;
if ($[3] !== className) {
t1 = clsx(className, Timeline_module_css_default.TimelineBreak);
$[3] = className;
$[4] = t1;
} else t1 = $[4];
const t2 = forwardRef;
let t3;
if ($[5] !== props || $[6] !== t1 || $[7] !== t2) {
t3 = /*#__PURE__*/ jsx("li", {
...props,
className: t1,
ref: t2,
role: "presentation"
});
$[5] = props;
$[6] = t1;
$[7] = t2;
$[8] = t3;
} else t3 = $[8];
return t3;
}
const t1 = props;
let t2;
if ($[9] !== className) {
t2 = clsx(className, Timeline_module_css_default.TimelineBreak);
$[9] = className;
$[10] = t2;
} else t2 = $[10];
const t3 = forwardRef;
let t4;
if ($[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
t4 = /*#__PURE__*/ jsx("div", {
...t1,
className: t2,
ref: t3
});
$[11] = t1;
$[12] = t2;
$[13] = t3;
$[14] = t4;
} else t4 = $[14];
return t4;
});
TimelineBreak.displayName = "TimelineBreak";
const TimelineActions = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
const $ = c(9);
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, Timeline_module_css_default.TimelineItemActions);
$[3] = className;
$[4] = t1;
} else t1 = $[4];
let t2;
if ($[5] !== forwardRef || $[6] !== props || $[7] !== t1) {
t2 = /*#__PURE__*/ jsx("div", {
...props,
className: t1,
ref: forwardRef
});
$[5] = forwardRef;
$[6] = props;
$[7] = t1;
$[8] = t2;
} else t2 = $[8];
return t2;
});
TimelineActions.displayName = "Timeline.Actions";
const TimelineAvatar = /*#__PURE__*/ React.forwardRef((t0, forwardRef) => {
const $ = c(9);
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, Timeline_module_css_default.TimelineItemAvatar);
$[3] = className;
$[4] = t1;
} else t1 = $[4];
let t2;
if ($[5] !== forwardRef || $[6] !== props || $[7] !== t1) {
t2 = /*#__PURE__*/ jsx("div", {
...props,
className: t1,
ref: forwardRef
});
$[5] = forwardRef;
$[6] = props;
$[7] = t1;
$[8] = t2;
} else t2 = $[8];
return t2;
});
TimelineAvatar.displayName = "Timeline.Avatar";
var Timeline_default = Object.assign(Timeline, {
Item: TimelineItem,
Avatar: TimelineAvatar,
Badge: TimelineBadge,
Body: TimelineBody,
Break: TimelineBreak,
Actions: TimelineActions
});
//#endregion
export { Timeline_default as default };