@primer/react
Version:
An implementation of GitHub's Primer Design System using React
68 lines (67 loc) • 1.93 kB
JavaScript
import Text_default from "../../Text/Text.js";
import { Key } from "./Key.js";
import Chord_module_css_default from "./Chord.module.css.js";
import { splitChord } from "./utils.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
import { Fragment as Fragment$1 } from "react";
//#region src/KeybindingHint/components/Chord.tsx
const Chord = (t0) => {
const $ = c(13);
const { keys, format: t1, variant: t2, size: t3 } = t0;
const format = t1 === void 0 ? "condensed" : t1;
const variant = t2 === void 0 ? "normal" : t2;
const size = t3 === void 0 ? "normal" : t3;
const t4 = variant === "normal";
const t5 = variant === "onEmphasis";
const t6 = variant === "onPrimary";
const t7 = size === "small";
let t8;
if ($[0] !== t4 || $[1] !== t5 || $[2] !== t6 || $[3] !== t7) {
t8 = clsx(Chord_module_css_default.Chord, {
[Chord_module_css_default.ChordNormal]: t4,
[Chord_module_css_default.ChordOnEmphasis]: t5,
[Chord_module_css_default.ChordOnPrimary]: t6,
[Chord_module_css_default.ChordSmall]: t7
});
$[0] = t4;
$[1] = t5;
$[2] = t6;
$[3] = t7;
$[4] = t8;
} else t8 = $[4];
let t9;
if ($[5] !== format || $[6] !== keys) {
let t10;
if ($[8] !== format) {
t10 = (k, i) => /*#__PURE__*/ jsxs(Fragment$1, { children: [i > 0 && format === "full" ? /*#__PURE__*/ jsx("span", {
"aria-hidden": true,
children: " + "
}) : " ", /*#__PURE__*/ jsx(Key, {
name: k,
format
})] }, i);
$[8] = format;
$[9] = t10;
} else t10 = $[9];
t9 = splitChord(keys).map(t10);
$[5] = format;
$[6] = keys;
$[7] = t9;
} else t9 = $[7];
let t10;
if ($[10] !== t8 || $[11] !== t9) {
t10 = /*#__PURE__*/ jsx(Text_default, {
"data-kbd-chord": true,
className: t8,
children: t9
});
$[10] = t8;
$[11] = t9;
$[12] = t10;
} else t10 = $[12];
return t10;
};
//#endregion
export { Chord };