@pdftron/webviewer-react-toolkit
Version:
A React component library for integrating with PDFTron WebViewer API.
91 lines (90 loc) • 5.03 kB
JavaScript
import { __assign, __rest } from "tslib";
import classnames from 'classnames';
import React, { forwardRef, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';
import { useAccessibleFocus } from '../../hooks';
import { ClickableDiv } from '../ClickableDiv';
export var EditableText = forwardRef(function (_a, ref) {
var controlledValue = _a.value, controlledEditMode = _a.editMode, onEdit = _a.onEdit, onSave = _a.onSave, onCancel = _a.onCancel, className = _a.className, disabled = _a.disabled, locked = _a.locked, onRenderText = _a.onRenderText, placeholder = _a.placeholder, centerText = _a.centerText, bordered = _a.bordered, clickableDivProps = __rest(_a, ["value", "editMode", "onEdit", "onSave", "onCancel", "className", "disabled", "locked", "onRenderText", "placeholder", "centerText", "bordered"]);
var inputRef = useRef(null);
var buttonRef = useRef(null);
useImperativeHandle(ref, function () { return buttonRef.current; });
// Use state if controlled edit mode not provided.
var _b = useState(false), stateEditMode = _b[0], setStateEditMode = _b[1];
var editMode = controlledEditMode !== null && controlledEditMode !== void 0 ? controlledEditMode : stateEditMode;
// Use state if controlled value not provided.
var _c = useState(''), stateValue = _c[0], setStateValue = _c[1];
var value = controlledValue !== null && controlledValue !== void 0 ? controlledValue : stateValue;
// Keep edit value in sync with value (controlled or state) and reset when
// edit mode is cancelled.
var _d = useState(value), editValue = _d[0], setEditValue = _d[1];
useEffect(function () { return setEditValue(value); }, [editMode, value]);
var _e = useState(false), noFocusTransition = _e[0], setNoFocusTransition = _e[1];
// Focus input whenever edit mode is enabled, and button when disabled.
var firstRender = useRef(true);
useEffect(function () {
var _a, _b;
if (firstRender.current) {
firstRender.current = false;
}
else if (editMode) {
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
setNoFocusTransition(true);
}
else {
(_b = buttonRef.current) === null || _b === void 0 ? void 0 : _b.focus();
setNoFocusTransition(false);
}
}, [editMode]);
var handleOnEdit = function () {
if (controlledEditMode === undefined)
setStateEditMode(true);
onEdit === null || onEdit === void 0 ? void 0 : onEdit();
};
var handleOnCancel = function () {
if (controlledEditMode === undefined)
setStateEditMode(false);
setEditValue(value);
onCancel === null || onCancel === void 0 ? void 0 : onCancel(value);
};
var handleOnSave = function () {
if (controlledValue === undefined)
setStateValue(editValue);
if (controlledEditMode === undefined)
setStateEditMode(false);
onSave === null || onSave === void 0 ? void 0 : onSave(editValue);
};
var handleOnKeyPress = function (event) {
if (event.key === 'Enter') {
handleOnSave();
event.stopPropagation();
}
};
var handleOnKeyDown = function (event) {
if (event.key === 'Escape') {
handleOnCancel();
}
event.stopPropagation();
};
var _f = useMemo(function () {
var renderedValue = onRenderText ? onRenderText(value) : value;
if (placeholder && !renderedValue)
return [placeholder, true];
return [renderedValue, false];
}, [onRenderText, placeholder, value]), valueToDisplay = _f[0], isPlaceholder = _f[1];
var isUserTabbing = useAccessibleFocus();
var editableTextClass = classnames('ui__base ui__editableText', {
'ui__editableText--disabled': disabled,
'ui__editableText--locked': locked,
'ui__editableText--centerText': centerText,
'ui__editableText--bordered': bordered,
}, className);
var buttonClass = classnames('ui__editableText__button', {
'ui__editableText__button--placeholder': isPlaceholder,
'ui__editableText__button--noFocusTransition': noFocusTransition,
});
var fieldClass = classnames('ui__editableText__field', {
'ui__editableText__field--tabbing': isUserTabbing,
});
return (React.createElement("div", { className: editableTextClass }, editMode ? (React.createElement("input", { className: fieldClass, value: editValue, onChange: function (e) { return setEditValue(e.target.value); }, onKeyPress: handleOnKeyPress, onKeyDown: handleOnKeyDown, ref: inputRef, onBlur: handleOnSave, onClick: function (e) { return e.stopPropagation(); } })) : (React.createElement(ClickableDiv, __assign({}, clickableDivProps, { className: buttonClass, disabled: disabled || locked, onClick: handleOnEdit, ref: buttonRef, usePointer: true }),
React.createElement("span", null, valueToDisplay)))));
});