@yamada-ui/react
Version:
React UI components of the Yamada, by the Yamada, for the Yamada built with React and Emotion
67 lines (63 loc) • 3.1 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_hooks_use_value_index = require('../../hooks/use-value/index.cjs');
const require_resizable_style = require('./resizable.style.cjs');
const require_use_resizable = require('./use-resizable.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 react_resizable_panels = require("react-resizable-panels");
react_resizable_panels = require_rolldown_runtime.__toESM(react_resizable_panels);
//#region src/components/resizable/resizable.tsx
const { PropsContext: ResizablePropsContext, usePropsContext: useResizablePropsContext, withContext, withProvider } = require_create_component.createSlotComponent("resizable", require_resizable_style.resizableStyle);
const ResizableRoot = withProvider(({ children, orientation: orientationProp, rootRef,...rest }) => {
const { controlRef, disabled, orientation, getGroupProps, getRootProps } = require_use_resizable.useResizable({
orientation: require_hooks_use_value_index.useValue(orientationProp),
...rest
});
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_use_resizable.ResizableContext, {
value: (0, react.useMemo)(() => ({
controlRef,
disabled,
orientation
}), [
disabled,
orientation,
controlRef
]),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_factory.styled.div, {
...getRootProps({ ref: rootRef }),
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(react_resizable_panels.PanelGroup, {
...getGroupProps(),
children
})
})
});
}, "root", { transferProps: ["orientation"] })();
const StyledPanel = require_factory.styled(react_resizable_panels.Panel, { forwardProps: ["order"] });
const ResizableItem = withContext((props) => {
const { getItemProps } = require_use_resizable.useResizableItem(props);
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledPanel, { ...getItemProps() });
}, "item")();
const ResizableTrigger = withContext(({ children, icon, iconProps,...rest }) => {
const { getIconProps, getTriggerProps } = require_use_resizable.useResizableTrigger(rest);
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_factory.styled.div, {
as: react_resizable_panels.PanelResizeHandle,
...getTriggerProps(),
children: [icon ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ResizableIcon, {
...getIconProps(iconProps),
children: icon
}) : null, children]
});
}, "trigger")();
const ResizableIcon = withContext("div", "icon")();
//#endregion
exports.ResizableItem = ResizableItem;
exports.ResizablePropsContext = ResizablePropsContext;
exports.ResizableRoot = ResizableRoot;
exports.ResizableTrigger = ResizableTrigger;
exports.useResizablePropsContext = useResizablePropsContext;
//# sourceMappingURL=resizable.cjs.map