@guardian/threads
Version:
65 lines • 3.6 kB
JavaScript
import React, { useState } from 'react';
import styles from './EditableText.module.css';
import { parseDate } from '../../utils/parseDate';
import _ from 'lodash';
import AutosizeInput from 'react-input-autosize';
export var EditableText = function (_a) {
var text = _a.text, placeholder = _a.placeholder, onChange = _a.onChange, mode = _a.mode;
var _b = useState(!!parseDate(text, 'from_start')), isValidDate = _b[0], setIsValidDate = _b[1];
var _c = useState(false), editingBody = _c[0], setEditingBody = _c[1];
var _d = useState(text), editText = _d[0], setEditText = _d[1];
var _e = useState(''), textareaHeight = _e[0], setTextAreaHeight = _e[1];
var usedMode = mode ? mode : 'single';
var startEdit = function (e) {
e.stopPropagation();
setEditText(text);
setEditingBody(true);
};
var onKeyDown = function (e) {
e.stopPropagation();
if (e.keyCode === 27) {
setEditingBody(false);
}
if (usedMode !== 'multiline' && e.keyCode === 13) {
onSaveEdit();
}
if (usedMode === 'multiline' && e.metaKey && e.keyCode === 13) {
onSaveEdit();
}
};
var onKeyUp = function (e) {
// There seems to be some slightly weird behaviour where a key up
// can cause a click in a parent button
e.preventDefault();
};
var onSaveEdit = function () {
onChange(editText);
setEditingBody(false);
};
var checkDateValid = function () {
var date = parseDate(editText, 'from_start');
setIsValidDate(!!date);
};
var debouncedCheckDateValid = _.debounce(checkDateValid, 500);
var renderEditable = function () {
switch (usedMode) {
case 'single':
return (React.createElement(AutosizeInput, { autoFocus: true, placeholder: placeholder, onFocus: function (e) { return e.target.select(); }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onSaveEdit, onChange: function (e) { return setEditText(e.target.value); }, value: editText }));
case 'multiline':
return (React.createElement("textarea", { style: { height: textareaHeight ? textareaHeight : undefined }, autoFocus: true, placeholder: placeholder, onFocus: function (e) {
e.target.select();
setTextAreaHeight(e.target.scrollHeight + 'px');
}, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onSaveEdit, onChange: function (e) {
setEditText(e.target.value);
setTextAreaHeight(e.target.scrollHeight + 'px');
}, value: editText }));
case 'date':
return (React.createElement(AutosizeInput, { autoFocus: true, placeholder: placeholder, onFocus: function (e) { return e.target.select(); }, onKeyDown: onKeyDown, onKeyUp: onKeyUp, onBlur: onSaveEdit, onChange: function (e) {
debouncedCheckDateValid();
setEditText(e.target.value);
}, value: editText }));
}
};
return (React.createElement("div", { className: styles.editableText, onClick: startEdit, "data-editing": editingBody ? true : null, "data-mode": usedMode, "data-invalid-date": usedMode === 'date' && !isValidDate ? true : null }, editingBody ? (renderEditable()) : (React.createElement("span", { className: styles.previewText }, text ? (text) : (React.createElement("span", { className: styles.placeholder }, placeholder))))));
};
//# sourceMappingURL=EditableText.js.map