@yamada-ui/toggle
Version:
Yamada UI toggle component
232 lines (229 loc) • 7.28 kB
JavaScript
"use client"
;
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
// src/toggle.tsx
var toggle_exports = {};
__export(toggle_exports, {
Toggle: () => Toggle
});
module.exports = __toCommonJS(toggle_exports);
var import_core2 = require("@yamada-ui/core");
var import_ripple = require("@yamada-ui/ripple");
var import_use_controllable_state2 = require("@yamada-ui/use-controllable-state");
var import_utils2 = require("@yamada-ui/utils");
var import_react2 = require("react");
// src/toggle-group.tsx
var import_core = require("@yamada-ui/core");
var import_use_controllable_state = require("@yamada-ui/use-controllable-state");
var import_utils = require("@yamada-ui/utils");
var import_react = require("react");
var import_jsx_runtime = require("react/jsx-runtime");
var [ToggleGroupProvider, useToggleGroup] = (0, import_utils.createContext)(
{
name: "ToggleGroupContext",
strict: false
}
);
var ToggleGroup = (0, import_core.forwardRef)(
({
className,
size,
variant,
defaultValue,
direction,
isDisabled,
disabled = isDisabled,
flexDirection = direction,
isReadOnly,
readOnly = isReadOnly,
value: valueProp,
onChange: onChangeProp,
...rest
}, ref) => {
const [value, setValue] = (0, import_use_controllable_state.useControllableState)({
defaultValue,
value: valueProp,
onChange: onChangeProp
});
const controlledRef = (0, import_react.useRef)(!(0, import_utils.isUndefined)(value));
const onChange = (0, import_react.useCallback)(
(value2) => {
if ((0, import_utils.isUndefined)(value2)) return;
setValue((prev) => {
if ((0, import_utils.isArray)(prev)) {
const isIncluded = prev.includes(value2);
if (isIncluded) {
return prev.filter((prevValue) => prevValue !== value2);
} else {
return [...prev, value2];
}
} else {
if (value2 === prev) {
return void 0;
} else {
return value2;
}
}
});
},
[setValue]
);
const css = {
display: "inline-flex",
flexDirection,
gap: "0.5rem"
};
const values = (0, import_react.useMemo)(
() => ({
size,
variant,
controlled: controlledRef.current,
disabled,
readOnly,
value,
onChange
}),
[value, size, variant, disabled, readOnly, onChange]
);
(0, import_utils.useUpdateEffect)(() => {
if ((0, import_utils.isUndefined)(value)) return;
controlledRef.current = true;
}, [valueProp]);
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToggleGroupProvider, { value: values, children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
import_core.ui.div,
{
ref,
className: (0, import_utils.cx)("ui-toggle-group", className),
role: "group",
__css: css,
...rest
}
) });
}
);
ToggleGroup.displayName = "ToggleGroup";
ToggleGroup.__ui__ = "ToggleGroup";
// src/toggle.tsx
var import_jsx_runtime2 = require("react/jsx-runtime");
var Toggle = (0, import_core2.forwardRef)(
(props, ref) => {
var _a;
const {
controlled,
disabled: groupDisabled,
readOnly: groupReadOnly,
value: groupValue,
onChange: onChangeGroup,
...group
} = (_a = useToggleGroup()) != null ? _a : {};
const [styles, mergedProps] = (0, import_core2.useComponentMultiStyle)("Toggle", {
...group,
isDisabled: groupDisabled,
isReadOnly: groupReadOnly,
...props
});
const {
className,
isActive,
active = isActive,
children,
defaultIsSelected = false,
defaultSelected = defaultIsSelected,
isDisabled = groupDisabled,
disabled = isDisabled,
disableRipple,
isRounded,
fullRounded = isRounded,
icon,
isReadOnly = groupReadOnly,
isSelected,
readOnly = isReadOnly,
selected: selectedProp = isSelected,
value,
onChange,
...rest
} = (0, import_core2.omitThemeProps)(mergedProps);
const [selected, setSelected] = (0, import_use_controllable_state2.useControllableState)({
defaultValue: defaultSelected,
value: selectedProp,
onChange
});
if (controlled && (0, import_utils2.isUndefined)(value)) {
console.warn(`Toggle: value is required. Please set the value.`);
}
const multi = (0, import_utils2.isArray)(groupValue);
const included = multi ? groupValue.includes(value != null ? value : "") : value === groupValue;
const trulySelected = controlled ? included : selected;
const { onPointerDown, ...rippleProps } = (0, import_ripple.useRipple)({
...rest,
disabled: disableRipple || disabled
});
const onClick = () => {
setSelected((prev) => !prev);
onChangeGroup == null ? void 0 : onChangeGroup(value);
};
const css = (0, import_react2.useMemo)(
() => ({
alignItems: "center",
appearance: "none",
display: "inline-flex",
gap: "fallback(2, 0.5rem)",
justifyContent: "center",
outline: "none",
overflow: "hidden",
pointerEvents: readOnly ? "none" : "auto",
position: "relative",
userSelect: "none",
verticalAlign: "middle",
...styles,
...fullRounded ? { borderRadius: "fallback(full, 9999px)" } : {}
}),
[fullRounded, styles, readOnly]
);
return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
import_core2.ui.button,
{
ref,
type: "button",
className: (0, import_utils2.cx)("ui-toggle", className),
"aria-pressed": trulySelected,
"data-active": (0, import_utils2.dataAttr)(active),
"data-readonly": (0, import_utils2.dataAttr)(readOnly),
"data-selected": (0, import_utils2.dataAttr)(trulySelected),
disabled,
tabIndex: readOnly ? -1 : 0,
__css: css,
...rest,
onClick: (0, import_utils2.handlerAll)(rest.onClick, onClick),
onPointerDown,
children: [
children || icon,
/* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_ripple.Ripple, { ...rippleProps })
]
}
);
}
);
Toggle.displayName = "Toggle";
Toggle.__ui__ = "Toggle";
// Annotate the CommonJS export names for ESM import in node:
0 && (module.exports = {
Toggle
});
//# sourceMappingURL=toggle.js.map