@pdftron/webviewer-react-toolkit
Version:
A React component library for integrating with PDFTron WebViewer API.
36 lines (35 loc) • 2.3 kB
JavaScript
import { __assign, __rest } from "tslib";
import classnames from 'classnames';
import React, { forwardRef, useMemo } from 'react';
import { useFocus } from '../../hooks';
import { Icon } from '../Icon';
export var Input = forwardRef(function (_a, ref) {
var _b = _a.message, message = _b === void 0 ? 'default' : _b, messageText = _a.messageText, fillWidth = _a.fillWidth, wrapperClassName = _a.wrapperClassName, padMessageText = _a.padMessageText, className = _a.className, onFocus = _a.onFocus, onBlur = _a.onBlur, rightElement = _a.rightElement, leftElement = _a.leftElement, _c = _a.type, type = _c === void 0 ? 'text' : _c, props = __rest(_a, ["message", "messageText", "fillWidth", "wrapperClassName", "padMessageText", "className", "onFocus", "onBlur", "rightElement", "leftElement", "type"]);
var _d = useFocus(onFocus, onBlur), focused = _d.focused, handleOnFocus = _d.handleOnFocus, handleOnBlur = _d.handleOnBlur;
var rightIcon = useMemo(function () {
if (rightElement)
return rightElement;
var icon = undefined;
switch (message) {
case 'warning':
icon = 'Warning';
break;
case 'error':
icon = 'Error';
break;
}
return icon ? React.createElement(Icon, { className: "ui__input__icon", icon: icon }) : undefined;
}, [message, rightElement]);
var wrapperClass = classnames('ui__base ui__input__wrapper', {
'ui__input__wrapper--fill': fillWidth,
'ui__input__wrapper--pad': padMessageText && !messageText,
}, wrapperClassName);
var mainClass = classnames('ui__input', "ui__input--message-" + message, { 'ui__input--focused': focused });
var inputClass = classnames('ui__input__input', { 'ui__input__input--disabled': props.disabled }, className);
return (React.createElement("div", { className: wrapperClass },
React.createElement("div", { className: mainClass },
leftElement,
React.createElement("input", __assign({}, props, { type: type, onFocus: handleOnFocus, onBlur: handleOnBlur, className: inputClass, ref: ref })),
rightIcon),
messageText ? React.createElement("div", { className: "ui__input__messageText" }, messageText) : undefined));
});