@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
86 lines (82 loc) • 3.04 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_utils_index = require('../../utils/index.cjs');
const require_use_inject_vars = require('../../core/css/use-inject-vars.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_factory = require('../motion/factory.cjs');
const require_hooks_use_controllable_state_index = require('../../hooks/use-controllable-state/index.cjs');
const require_rotate_style = require('./rotate.style.cjs');
let react = require("react");
react = require_rolldown_runtime.__toESM(react);
let react_jsx_runtime = require("react/jsx-runtime");
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
let motion_react = require("motion/react");
motion_react = require_rolldown_runtime.__toESM(motion_react);
//#region src/components/rotate/rotate.tsx
const { PropsContext: RotatePropsContext, usePropsContext: useRotatePropsContext, withContext } = require_create_component.createComponent("rotate", require_rotate_style.rotateStyle);
/**
* `Rotate` is an animation component that alternately rotates two elements as they switch.
*
* @see https://yamada-ui.com/docs/components/rotate
*/
const Rotate = withContext(({ defaultValue = "from", delay = 0, disabled, duration = .4, from, readOnly, rotate = 45, to, value: valueProp, onChange, onClick: onClickProp,...rest }) => {
const opacity = "var(--opacity)";
const animate = (0, motion_react.useAnimation)();
const [value, setValue] = require_hooks_use_controllable_state_index.useControllableState({
defaultValue,
value: valueProp,
onChange
});
const onClick = (0, react.useCallback)(async () => {
if (readOnly) return;
await animate.start({
opacity: 0,
rotate: `${rotate}deg`,
transition: {
delay,
duration
}
});
setValue((prev) => prev === "from" ? "to" : "from");
await animate.start({
opacity: "var(--opacity)",
rotate: "0deg",
transition: { duration }
});
}, [
readOnly,
animate,
rotate,
duration,
delay,
setValue
]);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.motion.button, {
type: "button",
"data-disabled": (0, require_utils_index.utils_exports.dataAttr)(disabled),
"data-readonly": (0, require_utils_index.utils_exports.dataAttr)(readOnly),
"data-value": value,
animate,
custom: { rotate },
disabled,
initial: {
opacity,
rotate: "0deg"
},
onClick: (0, require_utils_index.utils_exports.handlerAll)(onClickProp, onClick),
...rest,
children: value === "from" ? from : to
});
})(void 0, (props) => {
const css = require_use_inject_vars.useInjectVarsIntoCss(props.css, { opacity: "opacity" });
return {
...require_use_inject_vars.useInjectVarsIntoProps(props, { opacity: "opacity" }),
css,
opacity: "{opacity}"
};
});
//#endregion
exports.Rotate = Rotate;
exports.RotatePropsContext = RotatePropsContext;
exports.useRotatePropsContext = useRotatePropsContext;
//# sourceMappingURL=rotate.cjs.map