@lobehub/editor
Version:
A powerful and extensible rich text editor built on Meta's Lexical framework, providing a modern editing experience with React integration.
79 lines (78 loc) • 2.22 kB
JavaScript
'use client';
import { ActionIcon, Flexbox } from '@lobehub/ui';
import { Popover } from 'antd';
import { CircleChevronLeftIcon, CircleChevronRightIcon, CircleChevronUpIcon } from 'lucide-react';
import { motion } from 'motion/react';
import { styles } from "../style";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var CollapsedActions = function CollapsedActions(_ref) {
var children = _ref.children,
_ref$groupCollapse = _ref.groupCollapse,
groupCollapse = _ref$groupCollapse === void 0 ? false : _ref$groupCollapse,
onGroupCollapseChange = _ref.onGroupCollapseChange,
gap = _ref.gap,
mode = _ref.mode;
if (mode === 'popup') {
return /*#__PURE__*/_jsx(Popover, {
arrow: false,
content: /*#__PURE__*/_jsx(Flexbox, {
align: 'center',
gap: gap,
horizontal: true,
children: children
}),
styles: {
content: {
padding: 4
}
},
children: /*#__PURE__*/_jsx(ActionIcon, {
icon: CircleChevronUpIcon,
size: {
blockSize: 36,
size: 20
}
})
});
}
return /*#__PURE__*/_jsxs(Flexbox, {
align: 'center',
flex: 'none',
gap: gap,
horizontal: true,
children: [/*#__PURE__*/_jsx(motion.div, {
animate: groupCollapse ? 'closed' : 'open',
className: styles.collapsedContainer,
initial: groupCollapse ? 'closed' : 'open',
style: {
gap: gap
},
transition: {
duration: 0.2
},
variants: {
closed: {
opacity: 0,
width: 0
},
open: {
opacity: 1,
width: 'auto'
}
},
children: children
}), /*#__PURE__*/_jsx(ActionIcon, {
icon: groupCollapse ? CircleChevronRightIcon : CircleChevronLeftIcon,
onClick: function onClick() {
return onGroupCollapseChange === null || onGroupCollapseChange === void 0 ? void 0 : onGroupCollapseChange(!groupCollapse);
},
size: {
blockSize: 36,
size: 20
}
})]
});
};
CollapsedActions.displayName = 'FloatActionsCollapse';
export default CollapsedActions;