@lobehub/ui/es/Image/components/Toolbar.mjs.map

Lobe UI is an open-source UI component library for building AIGC web apps

{"version":3,"file":"Toolbar.mjs","names":["Flexbox","ActionIcon"],"sources":["../../../src/Image/components/Toolbar.tsx"],"sourcesContent":["import { FlipHorizontal, FlipVertical, RotateCcw, RotateCw, ZoomIn, ZoomOut } from 'lucide-react';\nimport type { ToolbarRenderInfoType } from 'rc-image/lib/Preview';\nimport { type ReactNode, memo } from 'react';\n\nimport ActionIcon from '@/ActionIcon';\nimport { Flexbox } from '@/Flex';\n\nimport { styles } from '../style';\n\nexport interface ToolbarProps {\n  children?: ReactNode;\n  info: Omit<ToolbarRenderInfoType, 'current' | 'total'>;\n  maxScale: number;\n  minScale: number;\n}\n\nconst Toolbar = memo<ToolbarProps>(({ children, info, minScale, maxScale }) => {\n  const {\n    transform: { scale },\n    actions: { onFlipY, onFlipX, onRotateLeft, onRotateRight, onZoomOut, onZoomIn },\n  } = info;\n\n  return (\n    <Flexbox className={styles.toolbar} gap={4} horizontal>\n      <ActionIcon icon={FlipHorizontal} onClick={onFlipX} />\n      <ActionIcon icon={FlipVertical} onClick={onFlipY} />\n      <ActionIcon icon={RotateCcw} onClick={onRotateLeft} />\n      <ActionIcon icon={RotateCw} onClick={onRotateRight} />\n      <ActionIcon disabled={scale === minScale} icon={ZoomOut} onClick={onZoomOut} />\n      <ActionIcon disabled={scale === maxScale} icon={ZoomIn} onClick={onZoomIn} />\n      {children}\n    </Flexbox>\n  );\n});\n\nexport default Toolbar;\n"],"mappings":";;;;;;;;AAgBA,MAAM,UAAU,MAAoB,EAAE,UAAU,MAAM,UAAU,eAAe;CAC7E,MAAM,EACJ,WAAW,EAAE,SACb,SAAS,EAAE,SAAS,SAAS,cAAc,eAAe,WAAW,eACnE;AAEJ,QACE,qBAACA;EAAQ,WAAW,OAAO;EAAS,KAAK;EAAG;;GAC1C,oBAACC;IAAW,MAAM;IAAgB,SAAS;KAAW;GACtD,oBAACA;IAAW,MAAM;IAAc,SAAS;KAAW;GACpD,oBAACA;IAAW,MAAM;IAAW,SAAS;KAAgB;GACtD,oBAACA;IAAW,MAAM;IAAU,SAAS;KAAiB;GACtD,oBAACA;IAAW,UAAU,UAAU;IAAU,MAAM;IAAS,SAAS;KAAa;GAC/E,oBAACA;IAAW,UAAU,UAAU;IAAU,MAAM;IAAQ,SAAS;KAAY;GAC5E;;GACO;EAEZ;AAEF,sBAAe"}