@lobehub/ui
Version:
Lobe UI is an open-source UI component library for building AIGC web apps
56 lines • 1.79 kB
JavaScript
import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from 'lucide-react';
import { memo } from 'react';
import { Flexbox } from 'react-layout-kit';
import ActionIcon from "../../ActionIcon";
import { useStyles } from "../style";
import { jsx as _jsx } from "react/jsx-runtime";
import { jsxs as _jsxs } from "react/jsx-runtime";
var Toolbar = /*#__PURE__*/memo(function (_ref) {
var children = _ref.children,
info = _ref.info,
minScale = _ref.minScale,
maxScale = _ref.maxScale;
var _useStyles = useStyles(),
styles = _useStyles.styles;
var scale = info.transform.scale,
_info$actions = info.actions,
onFlipY = _info$actions.onFlipY,
onFlipX = _info$actions.onFlipX,
onRotateLeft = _info$actions.onRotateLeft,
onRotateRight = _info$actions.onRotateRight,
onZoomOut = _info$actions.onZoomOut,
onZoomIn = _info$actions.onZoomIn;
return /*#__PURE__*/_jsxs(Flexbox, {
className: styles.toolbar,
gap: 4,
horizontal: true,
children: [/*#__PURE__*/_jsx(ActionIcon, {
color: '#fff',
icon: FlipHorizontal,
onClick: onFlipX
}), /*#__PURE__*/_jsx(ActionIcon, {
color: '#fff',
icon: FlipVertical,
onClick: onFlipY
}), /*#__PURE__*/_jsx(ActionIcon, {
color: '#fff',
icon: RotateCcw,
onClick: onRotateLeft
}), /*#__PURE__*/_jsx(ActionIcon, {
color: '#fff',
icon: RotateCw,
onClick: onRotateRight
}), /*#__PURE__*/_jsx(ActionIcon, {
color: '#fff',
disabled: scale === minScale,
icon: ZoomOut,
onClick: onZoomOut
}), /*#__PURE__*/_jsx(ActionIcon, {
color: '#fff',
disabled: scale === maxScale,
icon: ZoomIn,
onClick: onZoomIn
}), children]
});
});
export default Toolbar;