@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
63 lines (59 loc) • 2.82 kB
JavaScript
"use client";
const require_rolldown_runtime = require('../../_virtual/rolldown_runtime.cjs');
const require_factory = require('../../core/system/factory.cjs');
const require_create_component = require('../../core/components/create-component.cjs');
const require_grip_vertical_icon = require('../icon/icons/grip-vertical-icon.cjs');
const require_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
const require_reorder_style = require('./reorder.style.cjs');
const require_use_reorder = require('./use-reorder.cjs');
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/reorder/reorder.tsx
const { PropsContext: ReorderPropsContext, usePropsContext: useReorderPropsContext, withContext, withProvider } = require_create_component.createSlotComponent("reorder", require_reorder_style.reorderStyle);
/**
* `Reorder` is a component that allows you to change the order of items using drag and drop.
*
* @see https://yamada-ui.com/docs/components/reorder
*/
const ReorderRoot = withProvider(({ orientation: orientationProp,...rest }) => {
const orientation = require_hooks_use_value_index.useValue(orientationProp);
const { children, getRootProps } = require_use_reorder.useReorder({
...rest,
item: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ReorderItem, {}),
orientation
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_reorder.ReorderContext, {
value: { orientation },
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.ul, {
as: motion_react.Reorder.Group,
...getRootProps(),
children
})
});
}, "root", { transferProps: ["orientation"] })();
const ReorderItem = withContext((props) => {
const { getItemProps, getTriggerProps } = require_use_reorder.useReorderItem(props);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_reorder.ReorderItemContext, {
value: { getTriggerProps },
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.li, {
as: motion_react.Reorder.Item,
...getItemProps()
})
});
}, "item")();
const ReorderTrigger = withContext("div", "trigger")(void 0, (props) => {
const { getTriggerProps } = require_use_reorder.useReorderItemContext();
return {
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_grip_vertical_icon.GripVerticalIcon, {}),
...getTriggerProps(props)
};
});
//#endregion
exports.ReorderItem = ReorderItem;
exports.ReorderPropsContext = ReorderPropsContext;
exports.ReorderRoot = ReorderRoot;
exports.ReorderTrigger = ReorderTrigger;
exports.useReorderPropsContext = useReorderPropsContext;
//# sourceMappingURL=reorder.cjs.map