react-ipdf-viewer-lite
Version:
A lightweight, dependency-free media viewer for PDFs and other media types with advanced controls
64 lines (63 loc) • 6.01 kB
JavaScript
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { DownloadOutlined, PrinterOutlined, RotateRightOutlined, RotateLeftOutlined, MoonOutlined, SunOutlined, FullscreenOutlined, FullscreenExitOutlined, PlusOutlined, MinusOutlined, } from "@ant-design/icons";
var toolbarButtonStyle = {
background: "none",
border: "1px solid",
borderRadius: "4px",
padding: "6px 8px",
cursor: "pointer",
display: "flex",
alignItems: "center",
justifyContent: "center",
transition: "all 0.2s ease",
margin: "0 2px",
};
export var Toolbar = function (_a) {
var controls = _a.controls, _b = _a.allowDownload, allowDownload = _b === void 0 ? true : _b, _c = _a.allowPrint, allowPrint = _c === void 0 ? true : _c, _d = _a.allowRotate, allowRotate = _d === void 0 ? true : _d, _e = _a.allowFullScreen, allowFullScreen = _e === void 0 ? true : _e;
var themeStyles = {
light: {
backgroundColor: "#F5F5F5",
borderColor: "#dddddd",
color: "#333333",
hoverBackground: "#f0f0f0",
},
dark: {
backgroundColor: "#333333",
borderColor: "#555555",
color: "#ffffff",
hoverBackground: "#444444",
},
};
var currentTheme = themeStyles[controls.currentTheme];
var rotateValue = 0;
var buttonStyle = __assign(__assign({}, toolbarButtonStyle), { backgroundColor: currentTheme.backgroundColor, borderColor: currentTheme.borderColor, color: currentTheme.color, ":hover": {
backgroundColor: currentTheme.hoverBackground,
} });
return (_jsxs("div", __assign({ style: {
display: "flex",
gap: "8px",
padding: "8px",
backgroundColor: currentTheme.backgroundColor,
borderBottom: "1px solid ".concat(currentTheme.borderColor),
alignItems: "center",
flexWrap: "wrap",
justifyContent: "space-between",
} }, { children: [_jsx("div", __assign({ style: { display: "flex", alignItems: "center", paddingLeft: "5px" } }, { children: _jsx("button", __assign({ onClick: controls.toggleTheme, title: "Switch to ".concat(controls.currentTheme === "dark" ? "light" : "dark", " theme"), style: buttonStyle }, { children: _jsx("span", __assign({ role: "img", "aria-label": "theme-toggle" }, { children: controls.currentTheme === "dark" ? (_jsx(SunOutlined, { style: { fontSize: "16px", color: currentTheme.color } })) : (_jsx(MoonOutlined, { style: { fontSize: "16px", color: currentTheme.color } })) })) })) })), _jsxs("div", __assign({ style: { display: "flex", alignItems: "center", gap: "8px" } }, { children: [_jsx("button", __assign({ onClick: controls.zoomOut, title: "Zoom Out", style: buttonStyle, disabled: controls.zoom <= 0.5 }, { children: _jsx("span", __assign({ role: "img", "aria-label": "zoom-out" }, { children: _jsx(MinusOutlined, { style: { fontSize: "16px", color: currentTheme.color } }) })) })), _jsxs("span", __assign({ style: {
minWidth: "40px",
textAlign: "center",
color: currentTheme.color,
} }, { children: [Math.round(controls.zoom * 100), "%"] })), _jsx("button", __assign({ onClick: controls.zoomIn, title: "Zoom In", style: buttonStyle, disabled: controls.zoom >= 3 }, { children: _jsx("span", __assign({ role: "img", "aria-label": "zoom-in" }, { children: _jsx(PlusOutlined, { style: { fontSize: "16px", color: currentTheme.color } }) })) }))] })), _jsxs("div", __assign({ style: { display: "flex", alignItems: "center", gap: "3px", paddingRight: "5px" } }, { children: [allowDownload && (_jsx("button", __assign({ onClick: controls.download, title: "Download", style: buttonStyle }, { children: _jsx("span", __assign({ role: "img", "aria-label": "download" }, { children: _jsx(DownloadOutlined, { style: { fontSize: "16px", color: currentTheme.color } }) })) }))), allowPrint && (_jsx("button", __assign({ onClick: controls.print, title: "Print", style: buttonStyle }, { children: _jsx("span", __assign({ role: "img", "aria-label": "print" }, { children: _jsx(PrinterOutlined, { style: { fontSize: "16px", color: currentTheme.color } }) })) }))), allowRotate && (_jsxs(_Fragment, { children: [_jsx("button", __assign({ onClick: function () { return controls.rotateLeft(-90); }, title: "Rotate Left", style: buttonStyle }, { children: _jsx("span", __assign({ role: "img", "aria-label": "rotate-left" }, { children: _jsx(RotateLeftOutlined, { style: { fontSize: "16px", color: currentTheme.color } }) })) })), _jsx("button", __assign({ onClick: function () { return controls.rotateRight(90); }, title: "Rotate Right", style: buttonStyle }, { children: _jsx("span", __assign({ role: "img", "aria-label": "rotate-right" }, { children: _jsx(RotateRightOutlined, { style: { fontSize: "16px", color: currentTheme.color } }) })) }))] })), allowFullScreen && (_jsx("button", __assign({ onClick: controls.isFullscreen
? controls.exitFullscreen
: controls.enterFullscreen, title: controls.isFullscreen ? "Exit Fullscreen" : "Fullscreen", style: buttonStyle }, { children: _jsx("span", __assign({ role: "img", "aria-label": "fullscreen" }, { children: controls.isFullscreen ? (_jsx(FullscreenExitOutlined, { style: { fontSize: "16px", color: currentTheme.color } })) : (_jsx(FullscreenOutlined, { style: { fontSize: "16px", color: currentTheme.color } })) })) })))] }))] })));
};