@pdftron/webviewer-react-toolkit
Version:
A React component library for integrating with PDFTron WebViewer API.
32 lines (31 loc) • 2.13 kB
JavaScript
import { __assign, __rest } from "tslib";
import classnames from 'classnames';
import React, { forwardRef, useMemo } from 'react';
import { useAccessibleFocus, useOnClick } from '../../hooks';
import { Icon } from '../Icon';
import { IconButton } from '../IconButton';
export var ToolButton = forwardRef(function (_a, ref) {
var className = _a.className, expandProps = _a.expandProps, children = _a.children, onClick = _a.onClick, buttonProps = __rest(_a, ["className", "expandProps", "children", "onClick"]);
var handleOnClick = useOnClick(onClick, { stopPropagation: true });
var isUserTabbing = useAccessibleFocus();
var positionRight = (expandProps === null || expandProps === void 0 ? void 0 : expandProps.position) === 'right';
var expandClass = expandProps === null || expandProps === void 0 ? void 0 : expandProps.className;
var hasExpandProps = !!expandProps;
var classes = useMemo(function () {
var enabledObj = {
'ui__toolButton--disabled': buttonProps.disabled,
'ui__toolButton--tabbing': isUserTabbing,
'ui__toolButton--expanded': hasExpandProps,
'ui__toolButton--right': positionRight,
'ui__toolButton--bottom': !positionRight,
};
var wrapper = classnames('ui__base ui__toolButton', enabledObj);
var action = classnames('ui__toolButton__action', enabledObj, className);
var expand = classnames('ui__toolButton__expand', enabledObj, expandClass);
return { wrapper: wrapper, action: action, expand: expand };
}, [buttonProps.disabled, className, expandClass, hasExpandProps, isUserTabbing, positionRight]);
return (React.createElement("div", { className: classes.wrapper },
React.createElement(IconButton, __assign({ disabled: buttonProps.disabled }, buttonProps, { className: classes.action, onClick: handleOnClick, ref: ref }), children),
expandProps ? (React.createElement(IconButton, __assign({ disabled: buttonProps.disabled }, expandProps, { className: classes.expand }),
React.createElement(Icon, { icon: "ChevronDown" }))) : undefined));
});