113 lines
2.7 KiB
TypeScript
113 lines
2.7 KiB
TypeScript
|
import React from "react";
|
||
|
|
||
|
import MediaZoomInIcon from "PUBLIC_DIR/images/media.zoomin.react.svg";
|
||
|
import MediaZoomOutIcon from "PUBLIC_DIR/images/media.zoomout.react.svg";
|
||
|
import MediaRotateLeftIcon from "PUBLIC_DIR/images/media.rotateleft.react.svg";
|
||
|
import MediaRotateRightIcon from "PUBLIC_DIR/images/media.rotateright.react.svg";
|
||
|
import MediaDeleteIcon from "PUBLIC_DIR/images/media.delete.react.svg";
|
||
|
import MediaDownloadIcon from "PUBLIC_DIR/images/download.react.svg";
|
||
|
import MediaFavoriteIcon from "PUBLIC_DIR/images/favorite.react.svg";
|
||
|
import ViewerSeparator from "PUBLIC_DIR/images/viewer.separator.react.svg";
|
||
|
|
||
|
export const getCustomToolbar = (
|
||
|
onDeleteClick: VoidFunction,
|
||
|
onDownloadClick: VoidFunction
|
||
|
) => {
|
||
|
return [
|
||
|
{
|
||
|
key: "zoomOut",
|
||
|
percent: true,
|
||
|
actionType: 2,
|
||
|
render: (
|
||
|
<div className="iconContainer zoomOut">
|
||
|
<MediaZoomOutIcon size="scale" />
|
||
|
</div>
|
||
|
),
|
||
|
},
|
||
|
{
|
||
|
key: "percent",
|
||
|
actionType: 999,
|
||
|
},
|
||
|
{
|
||
|
key: "zoomIn",
|
||
|
actionType: 1,
|
||
|
render: (
|
||
|
<div className="iconContainer zoomIn">
|
||
|
<MediaZoomInIcon size="scale" />
|
||
|
</div>
|
||
|
),
|
||
|
},
|
||
|
{
|
||
|
key: "rotateLeft",
|
||
|
actionType: 5,
|
||
|
render: (
|
||
|
<div className="iconContainer rotateLeft">
|
||
|
<MediaRotateLeftIcon size="scale" />
|
||
|
</div>
|
||
|
),
|
||
|
},
|
||
|
{
|
||
|
key: "rotateRight",
|
||
|
actionType: 6,
|
||
|
render: (
|
||
|
<div className="iconContainer rotateRight">
|
||
|
<MediaRotateRightIcon size="scale" />
|
||
|
</div>
|
||
|
),
|
||
|
},
|
||
|
{
|
||
|
key: "separator download-separator",
|
||
|
actionType: -1,
|
||
|
noHover: true,
|
||
|
render: (
|
||
|
<div className="separator" style={{ height: "16px" }}>
|
||
|
<ViewerSeparator size="scale" />
|
||
|
</div>
|
||
|
),
|
||
|
},
|
||
|
{
|
||
|
key: "download",
|
||
|
actionType: 102,
|
||
|
render: (
|
||
|
<div className="iconContainer download" style={{ height: "16px" }}>
|
||
|
<MediaDownloadIcon size="scale" />
|
||
|
</div>
|
||
|
),
|
||
|
onClick: onDownloadClick,
|
||
|
},
|
||
|
{
|
||
|
key: "context-separator",
|
||
|
actionType: -1,
|
||
|
noHover: true,
|
||
|
render: (
|
||
|
<div className="separator" style={{ height: "16px" }}>
|
||
|
<ViewerSeparator size="scale" />
|
||
|
</div>
|
||
|
),
|
||
|
},
|
||
|
{
|
||
|
key: "context-menu",
|
||
|
actionType: -1,
|
||
|
},
|
||
|
{
|
||
|
key: "delete",
|
||
|
actionType: 103,
|
||
|
render: (
|
||
|
<div className="iconContainer viewer-delete">
|
||
|
<MediaDeleteIcon size="scale" />
|
||
|
</div>
|
||
|
),
|
||
|
onClick: onDeleteClick,
|
||
|
},
|
||
|
{
|
||
|
key: "favorite",
|
||
|
actionType: 104,
|
||
|
render: (
|
||
|
<div className="iconContainer viewer-favorite">
|
||
|
<MediaFavoriteIcon size="scale" />
|
||
|
</div>
|
||
|
),
|
||
|
},
|
||
|
];
|
||
|
};
|