@primer/react
Version:
An implementation of GitHub's Primer Design System using React
408 lines (407 loc) • 11.3 kB
JavaScript
import { useProvidedStateOrCreate } from "../hooks/useProvidedStateOrCreate.js";
import { useId as useId$1 } from "../hooks/useId.js";
import Spinner from "../Spinner/Spinner.js";
import { AriaStatus } from "../live-region/AriaStatus.js";
import VisuallyHidden from "../_VisuallyHidden.js";
import useSafeTimeout from "../hooks/useSafeTimeout.js";
import ToggleSwitch_module_css_default from "./ToggleSwitch.module.css.js";
import { c } from "react-compiler-runtime";
import { clsx } from "clsx";
import { jsx, jsxs } from "react/jsx-runtime";
import React, { useEffect } from "react";
//#region src/ToggleSwitch/ToggleSwitch.tsx
const CircleIcon = (t0) => {
const $ = c(4);
const { size } = t0;
const t1 = size === "small" ? "12" : "16";
const t2 = size === "small" ? "12" : "16";
let t3;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t3 = /*#__PURE__*/ jsx("path", {
fillRule: "evenodd",
d: "M8 12.5a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM8 14A6 6 0 1 0 8 2a6 6 0 0 0 0 12Z"
});
$[0] = t3;
} else t3 = $[0];
let t4;
if ($[1] !== t1 || $[2] !== t2) {
t4 = /*#__PURE__*/ jsx("svg", {
"aria-hidden": "true",
width: t1,
height: t2,
viewBox: "0 0 16 16",
fill: "currentColor",
xmlns: "http://www.w3.org/2000/svg",
children: t3
});
$[1] = t1;
$[2] = t2;
$[3] = t4;
} else t4 = $[3];
return t4;
};
const LineIcon = (t0) => {
const $ = c(4);
const { size } = t0;
const t1 = size === "small" ? "12" : "16";
const t2 = size === "small" ? "12" : "16";
let t3;
if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
t3 = /*#__PURE__*/ jsx("path", {
fillRule: "evenodd",
d: "M8 2a.75.75 0 0 1 .75.75v11.5a.75.75 0 0 1-1.5 0V2.75A.75.75 0 0 1 8 2Z"
});
$[0] = t3;
} else t3 = $[0];
let t4;
if ($[1] !== t1 || $[2] !== t2) {
t4 = /*#__PURE__*/ jsx("svg", {
"aria-hidden": "true",
width: t1,
height: t2,
viewBox: "0 0 16 16",
fill: "currentColor",
xmlns: "http://www.w3.org/2000/svg",
children: t3
});
$[1] = t1;
$[2] = t2;
$[3] = t4;
} else t4 = $[3];
return t4;
};
const ToggleSwitch = /*#__PURE__*/ React.forwardRef(function ToggleSwitch(props, ref) {
var _buttonLabelOn, _buttonLabelOff;
const $ = c(95);
let ariaDescribedby;
let ariaLabelledby;
let buttonLabelOff;
let buttonLabelOn;
let checked;
let className;
let defaultChecked;
let disabled;
let loading;
let onChange;
let onClick;
let rest;
let t0;
let t1;
let t2;
let t3;
let t4;
if ($[0] !== props) {
({"aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, defaultChecked, disabled, loading, checked, onChange, onClick, buttonType: t0, size: t1, statusLabelPosition: t2, loadingLabelDelay: t3, loadingLabel: t4, className, buttonLabelOn, buttonLabelOff, ...rest} = props);
$[0] = props;
$[1] = ariaDescribedby;
$[2] = ariaLabelledby;
$[3] = buttonLabelOff;
$[4] = buttonLabelOn;
$[5] = checked;
$[6] = className;
$[7] = defaultChecked;
$[8] = disabled;
$[9] = loading;
$[10] = onChange;
$[11] = onClick;
$[12] = rest;
$[13] = t0;
$[14] = t1;
$[15] = t2;
$[16] = t3;
$[17] = t4;
} else {
ariaDescribedby = $[1];
ariaLabelledby = $[2];
buttonLabelOff = $[3];
buttonLabelOn = $[4];
checked = $[5];
className = $[6];
defaultChecked = $[7];
disabled = $[8];
loading = $[9];
onChange = $[10];
onClick = $[11];
rest = $[12];
t0 = $[13];
t1 = $[14];
t2 = $[15];
t3 = $[16];
t4 = $[17];
}
const buttonType = t0 === void 0 ? "button" : t0;
const size = t1 === void 0 ? "medium" : t1;
const statusLabelPosition = t2 === void 0 ? "start" : t2;
const loadingLabelDelay = t3 === void 0 ? 2e3 : t3;
const loadingLabel = t4 === void 0 ? "Loading" : t4;
const isControlled = typeof checked !== "undefined";
const [isOn, setIsOn] = useProvidedStateOrCreate(checked, onChange, Boolean(defaultChecked));
const acceptsInteraction = !disabled && !loading;
const [isLoadingLabelVisible, setIsLoadingLabelVisible] = React.useState(false);
const loadingLabelId = useId$1("loadingLabel");
const { safeSetTimeout } = useSafeTimeout();
let t5;
if ($[18] !== disabled || $[19] !== isControlled || $[20] !== isOn || $[21] !== loading || $[22] !== onClick || $[23] !== setIsOn) {
t5 = (e) => {
if (disabled || loading) return;
if (!isControlled) setIsOn(!isOn);
onClick && onClick(e);
};
$[18] = disabled;
$[19] = isControlled;
$[20] = isOn;
$[21] = loading;
$[22] = onClick;
$[23] = setIsOn;
$[24] = t5;
} else t5 = $[24];
const handleToggleClick = t5;
let t6;
let t7;
if ($[25] !== checked || $[26] !== disabled || $[27] !== isControlled || $[28] !== onChange) {
t6 = () => {
if (onChange && isControlled && !disabled) onChange(Boolean(checked));
};
t7 = [
onChange,
checked,
isControlled,
disabled
];
$[25] = checked;
$[26] = disabled;
$[27] = isControlled;
$[28] = onChange;
$[29] = t6;
$[30] = t7;
} else {
t6 = $[29];
t7 = $[30];
}
useEffect(t6, t7);
let t8;
let t9;
if ($[31] !== isLoadingLabelVisible || $[32] !== loading || $[33] !== loadingLabelDelay || $[34] !== safeSetTimeout) {
t8 = () => {
if (!loading && isLoadingLabelVisible) setIsLoadingLabelVisible(false);
else if (loading && !isLoadingLabelVisible) safeSetTimeout(() => {
setIsLoadingLabelVisible(true);
}, loadingLabelDelay);
};
t9 = [
loading,
isLoadingLabelVisible,
loadingLabelDelay,
safeSetTimeout
];
$[31] = isLoadingLabelVisible;
$[32] = loading;
$[33] = loadingLabelDelay;
$[34] = safeSetTimeout;
$[35] = t8;
$[36] = t9;
} else {
t8 = $[35];
t9 = $[36];
}
useEffect(t8, t9);
let switchButtonDescribedBy = loadingLabelId;
if (ariaDescribedby) switchButtonDescribedBy = `${switchButtonDescribedBy} ${ariaDescribedby}`;
let t10;
if ($[37] !== className) {
t10 = clsx(ToggleSwitch_module_css_default.ToggleSwitch, className);
$[37] = className;
$[38] = t10;
} else t10 = $[38];
const t11 = isLoadingLabelVisible && loadingLabel;
let t12;
if ($[39] !== loadingLabelId || $[40] !== t11) {
t12 = /*#__PURE__*/ jsx(VisuallyHidden, { children: /*#__PURE__*/ jsx(AriaStatus, {
announceOnShow: true,
id: loadingLabelId,
children: t11
}) });
$[39] = loadingLabelId;
$[40] = t11;
$[41] = t12;
} else t12 = $[41];
let t13;
if ($[42] !== loading || $[43] !== statusLabelPosition) {
t13 = loading ? /*#__PURE__*/ jsx("div", {
className: ToggleSwitch_module_css_default.LoadingSpinner,
"data-status-label-position": statusLabelPosition,
children: /*#__PURE__*/ jsx(Spinner, {
size: "small",
srText: null
})
}) : null;
$[42] = loading;
$[43] = statusLabelPosition;
$[44] = t13;
} else t13 = $[44];
const t14 = !acceptsInteraction;
const t15 = !isOn;
const t16 = (_buttonLabelOn = buttonLabelOn) !== null && _buttonLabelOn !== void 0 ? _buttonLabelOn : "On";
let t17;
if ($[45] !== t15 || $[46] !== t16) {
t17 = /*#__PURE__*/ jsx("span", {
className: ToggleSwitch_module_css_default.StatusTextItem,
"data-hidden": t15,
children: t16
});
$[45] = t15;
$[46] = t16;
$[47] = t17;
} else t17 = $[47];
const t18 = (_buttonLabelOff = buttonLabelOff) !== null && _buttonLabelOff !== void 0 ? _buttonLabelOff : "Off";
let t19;
if ($[48] !== isOn || $[49] !== t18) {
t19 = /*#__PURE__*/ jsx("span", {
className: ToggleSwitch_module_css_default.StatusTextItem,
"data-hidden": isOn,
children: t18
});
$[48] = isOn;
$[49] = t18;
$[50] = t19;
} else t19 = $[50];
let t20;
if ($[51] !== handleToggleClick || $[52] !== size || $[53] !== t14 || $[54] !== t17 || $[55] !== t19) {
t20 = /*#__PURE__*/ jsxs("span", {
className: ToggleSwitch_module_css_default.StatusText,
"data-size": size,
"data-disabled": t14,
"aria-hidden": "true",
onClick: handleToggleClick,
children: [t17, t19]
});
$[51] = handleToggleClick;
$[52] = size;
$[53] = t14;
$[54] = t17;
$[55] = t19;
$[56] = t20;
} else t20 = $[56];
const t21 = !acceptsInteraction;
const t22 = isLoadingLabelVisible || ariaDescribedby ? switchButtonDescribedBy : void 0;
const t23 = !acceptsInteraction;
const t24 = !acceptsInteraction;
let t25;
if ($[57] !== size) {
t25 = /*#__PURE__*/ jsx(LineIcon, { size });
$[57] = size;
$[58] = t25;
} else t25 = $[58];
let t26;
if ($[59] !== isOn || $[60] !== t24 || $[61] !== t25) {
t26 = /*#__PURE__*/ jsx("div", {
className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.LineIconContainer}`,
"data-checked": isOn,
"data-disabled": t24,
children: t25
});
$[59] = isOn;
$[60] = t24;
$[61] = t25;
$[62] = t26;
} else t26 = $[62];
const t27 = !acceptsInteraction;
let t28;
if ($[63] !== size) {
t28 = /*#__PURE__*/ jsx(CircleIcon, { size });
$[63] = size;
$[64] = t28;
} else t28 = $[64];
let t29;
if ($[65] !== isOn || $[66] !== t27 || $[67] !== t28) {
t29 = /*#__PURE__*/ jsx("div", {
className: `${ToggleSwitch_module_css_default.IconContainer} ${ToggleSwitch_module_css_default.CircleIconContainer}`,
"data-checked": isOn,
"data-disabled": t27,
children: t28
});
$[65] = isOn;
$[66] = t27;
$[67] = t28;
$[68] = t29;
} else t29 = $[68];
let t30;
if ($[69] !== t26 || $[70] !== t29) {
t30 = /*#__PURE__*/ jsxs("div", {
className: ToggleSwitch_module_css_default.SwitchButtonContent,
"aria-hidden": "true",
children: [t26, t29]
});
$[69] = t26;
$[70] = t29;
$[71] = t30;
} else t30 = $[71];
const t31 = !acceptsInteraction;
let t32;
if ($[72] !== isOn || $[73] !== t31) {
t32 = /*#__PURE__*/ jsx("div", {
className: ToggleSwitch_module_css_default.ToggleKnob,
"data-checked": isOn,
"data-disabled": t31,
"aria-hidden": "true"
});
$[72] = isOn;
$[73] = t31;
$[74] = t32;
} else t32 = $[74];
let t33;
if ($[75] !== ariaLabelledby || $[76] !== buttonType || $[77] !== handleToggleClick || $[78] !== isOn || $[79] !== ref || $[80] !== size || $[81] !== t21 || $[82] !== t22 || $[83] !== t23 || $[84] !== t30 || $[85] !== t32) {
t33 = /*#__PURE__*/ jsxs("button", {
ref,
type: buttonType,
className: ToggleSwitch_module_css_default.SwitchButton,
"data-size": size,
"data-checked": isOn,
"data-disabled": t21,
onClick: handleToggleClick,
"aria-labelledby": ariaLabelledby,
"aria-describedby": t22,
"aria-pressed": isOn,
"aria-disabled": t23,
children: [t30, t32]
});
$[75] = ariaLabelledby;
$[76] = buttonType;
$[77] = handleToggleClick;
$[78] = isOn;
$[79] = ref;
$[80] = size;
$[81] = t21;
$[82] = t22;
$[83] = t23;
$[84] = t30;
$[85] = t32;
$[86] = t33;
} else t33 = $[86];
let t34;
if ($[87] !== rest || $[88] !== statusLabelPosition || $[89] !== t10 || $[90] !== t12 || $[91] !== t13 || $[92] !== t20 || $[93] !== t33) {
t34 = /*#__PURE__*/ jsxs("div", {
className: t10,
"data-status-label-position": statusLabelPosition,
...rest,
children: [
t12,
t13,
t20,
t33
]
});
$[87] = rest;
$[88] = statusLabelPosition;
$[89] = t10;
$[90] = t12;
$[91] = t13;
$[92] = t20;
$[93] = t33;
$[94] = t34;
} else t34 = $[94];
return t34;
});
ToggleSwitch.displayName = "ToggleSwitch";
//#endregion
export { ToggleSwitch as default };