@pdftron/webviewer-react-toolkit
Version:
A React component library for integrating with PDFTron WebViewer API.
46 lines (45 loc) • 4.08 kB
JavaScript
import { __assign, __rest } from "tslib";
import classnames from 'classnames';
import React from 'react';
import { useAccessibleFocus, useFileSubscribe, useFocus } from '../../hooks';
import { ClickableDiv } from '../ClickableDiv';
import { EditableText } from '../EditableText';
import { FilePlaceholder } from '../FilePlaceholder';
import { FileSkeleton } from '../FileSkeleton';
import { Image } from '../Image';
import { ToolButton } from '../ToolButton';
import { thumbnailFocusObservable } from './thumbnailFocusObservable';
export function Thumbnail(_a) {
var file = _a.file, label = _a.label, selected = _a.selected, dragging = _a.dragging, otherDragging = _a.otherDragging, buttonProps = _a.buttonProps, selectedIcon = _a.selectedIcon, onRename = _a.onRename, onEditingChange = _a.onEditingChange, imageClassName = _a.imageClassName, className = _a.className, disabled = _a.disabled, onFocus = _a.onFocus, onBlur = _a.onBlur, divProps = __rest(_a, ["file", "label", "selected", "dragging", "otherDragging", "buttonProps", "selectedIcon", "onRename", "onEditingChange", "imageClassName", "className", "disabled", "onFocus", "onBlur"]);
var isUserTabbing = useAccessibleFocus(thumbnailFocusObservable);
var _b = useFocus(onFocus, onBlur), focused = _b.focused, handleOnFocus = _b.handleOnFocus, handleOnBlur = _b.handleOnBlur;
var _c = useFileSubscribe(file, function (f) { return f.thumbnail; }, 'onthumbnailchange'), thumbnail = _c[0], thumbnailErr = _c[1];
var name = useFileSubscribe(file, function (f) { return f.name; }, 'onnamechange')[0];
var handleOnSave = function (newName) {
onRename === null || onRename === void 0 ? void 0 : onRename(newName, file);
onEditingChange === null || onEditingChange === void 0 ? void 0 : onEditingChange(false, file);
};
var handleOnCancel = function () {
onEditingChange === null || onEditingChange === void 0 ? void 0 : onEditingChange(false, file);
};
var handleOnEdit = function () {
onEditingChange === null || onEditingChange === void 0 ? void 0 : onEditingChange(true, file);
};
var thumbnailClass = classnames('ui__base ui__thumbnail', {
'ui__thumbnail--tabbing': isUserTabbing,
'ui__thumbnail--selected': selected,
'ui__thumbnail--focused': focused,
'ui__thumbnail--disabled': disabled,
'ui__thumbnail--dragging': dragging,
'ui__thumbnail--otherDragging': otherDragging,
}, className);
return (React.createElement(ClickableDiv, __assign({}, divProps, { className: thumbnailClass, noFocusStyle: true, disabled: disabled, onFocus: handleOnFocus, onBlur: handleOnBlur }),
React.createElement("div", { className: "ui__thumbnail__image" },
React.createElement(Image, { src: thumbnail, alt: name, pending: !thumbnail && !thumbnailErr, onRenderLoading: function () { return React.createElement(FileSkeleton, { className: "ui__thumbnail__image__skeleton" }); }, onRenderFallback: function () { return (React.createElement(FilePlaceholder, { className: "ui__thumbnail__image__placeholder", extension: file.extension })); }, className: imageClassName })),
React.createElement("div", { className: "ui__thumbnail__controls" }, buttonProps === null || buttonProps === void 0 ? void 0 : buttonProps.map(function (_a) {
var key = _a.key, buttonPropObject = __rest(_a, ["key"]);
return (React.createElement(ToolButton, { key: key, disabled: disabled, onClick: function (e) { return buttonPropObject.onClick(e, file); } }, buttonPropObject.children));
})),
selectedIcon ? React.createElement("div", { className: "ui__thumbnail__selectedIcon" }, selectedIcon) : undefined,
(label !== null && label !== void 0 ? label : name) || onRename ? (React.createElement(EditableText, { className: "ui__thumbnail__label", value: label !== null && label !== void 0 ? label : name, centerText: true, disabled: disabled, locked: !onRename || otherDragging, onSave: handleOnSave, onCancel: handleOnCancel, onEdit: handleOnEdit })) : undefined));
}