@42shadow42/react-editable-title
Version:
An editable title implementation for the react.
130 lines (119 loc) • 9.29 kB
JavaScript
'use strict';
function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var reactstrap = require('reactstrap');
var ai = require('react-icons/ai');
var cn = _interopDefault(require('classnames/bind'));
function styleInject(css, ref) {
if ( ref === void 0 ) ref = {};
var insertAt = ref.insertAt;
if (!css || typeof document === 'undefined') { return; }
var head = document.head || document.getElementsByTagName('head')[0];
var style = document.createElement('style');
style.type = 'text/css';
if (insertAt === 'top') {
if (head.firstChild) {
head.insertBefore(style, head.firstChild);
} else {
head.appendChild(style);
}
} else {
head.appendChild(style);
}
if (style.styleSheet) {
style.styleSheet.cssText = css;
} else {
style.appendChild(document.createTextNode(css));
}
}
var css_248z = ".index-module_custom-title-input__1zudc {\r\n -webkit-box-sizing: border-box;\r\n box-sizing: border-box;\r\n -webkit-font-feature-settings: 'tnum';\r\n font-feature-settings: 'tnum';\r\n display: inline-block;\r\n border-radius: 1em;\r\n border-top-right-radius: unset;\r\n border-bottom-right-radius: unset;\r\n padding: 0px 5px;\r\n}\r\n\r\n.index-module_title-wrapper__1YsJu {\r\n display: -webkit-inline-box;\r\n border-radius: 1em;\r\n padding: 0px 5px;\r\n}\r\n\r\n.index-module_control__1RcRm {\r\n font-size: inherit !important;\r\n}\r\n\r\n.index-module_control__1RcRm:not(.index-module_edit-control__29TBa) {\r\n border-radius: unset !important;\r\n}\r\n\r\n.index-module_control__1RcRm:focus {\r\n outline-color: transparent;\r\n}\r\n\r\n.index-module_control-button__2ln6s {\r\n vertical-align: unset !important; /* Bootstrap protection */\r\n border-color: transparent;\r\n display: inline-block;\r\n padding: 0em .2em !important; /* Bootstrap protection */\r\n line-height: unset !important; /* Bootstrap protection */\r\n}\r\n\r\n.index-module_control-icon__2sSv0 {\r\n font-size: .8em;\r\n vertical-align: unset;\r\n}\r\n\r\n.index-module_control__1RcRm.index-module_cancel-control__3Kn4n {\r\n border-top-right-radius: inherit !important; /* Bootstrap protection */\r\n border-bottom-right-radius: inherit !important; /* Bootstrap protection */\r\n}\r\n\r\n.index-module_edit-control__29TBa {\r\n vertical-align: middle;\r\n margin-left: .25em;\r\n border-radius: .5em; \r\n}\r\n\r\n.index-module_display-text__2NIZx {\r\n padding: 2px;\r\n cursor: pointer;\r\n}\r\n\r\n.index-module_seamless-input__ngJIL {\r\n outline: none;\r\n border: 0;\r\n width: inherit;\r\n}\r\n\r\n.index-module_popover__32uHc.index-module_editable-title__3uluG {\r\n position: absolute;\r\n margin-top: -0.15em;\r\n display: block;\r\n}";
var styles = {"custom-title-input":"index-module_custom-title-input__1zudc","title-wrapper":"index-module_title-wrapper__1YsJu","control":"index-module_control__1RcRm","edit-control":"index-module_edit-control__29TBa","control-button":"index-module_control-button__2ln6s","control-icon":"index-module_control-icon__2sSv0","cancel-control":"index-module_cancel-control__3Kn4n","display-text":"index-module_display-text__2NIZx","seamless-input":"index-module_seamless-input__ngJIL","popover":"index-module_popover__32uHc","editable-title":"index-module_editable-title__3uluG"};
styleInject(css_248z);
var cx = cn.bind(styles);
var Key;
(function (Key) {
Key[Key["Enter"] = 13] = "Enter";
Key[Key["ESC"] = 27] = "ESC";
})(Key || (Key = {}));
var Editable = function (_a) {
var text = _a.text, _b = _a.seamlessInput, seamlessInput = _b === void 0 ? false : _b, _c = _a.saveOnBlur, saveOnBlur = _c === void 0 ? true : _c, _d = _a.placeholder, placeholder = _d === void 0 ? 'Type Here' : _d, inputPattern = _a.inputPattern, _e = _a.inputErrorMessage, inputErrorMessage = _e === void 0 ? 'Input does not match the pattern' : _e, inputMinLength = _a.inputMinLength, inputMaxLength = _a.inputMaxLength, cb = _a.cb, onEditCancel = _a.onEditCancel, onValidationFail = _a.onValidationFail;
var _f = React.useState(false), editing = _f[0], setEditing = _f[1];
var _g = React.useState(false), popupVisible = _g[0], setPopupVisible = _g[1];
var _h = React.useState(''), displayText = _h[0], setDisplayText = _h[1];
var inputRef = React.useRef(null);
React.useEffect(function () {
setDisplayText(text);
}, [text, setDisplayText]);
var handleClickOnText = React.useCallback(function () {
setEditing(!editing);
setDisplayText(text);
setTimeout(function () {
var _a;
(_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.focus();
}, 0);
}, [editing, setEditing, text, setDisplayText, inputRef]);
var updateDisplayText = React.useCallback(function () {
setDisplayText(inputRef.current.value);
if (popupVisible) {
setPopupVisible(false);
}
}, [popupVisible, setDisplayText, setPopupVisible, inputRef]);
var terminateEditing = React.useCallback(function () {
setEditing(false);
setPopupVisible(false);
onEditCancel ? onEditCancel() : undefined;
}, [onEditCancel, setEditing, setPopupVisible]);
var saveText = React.useCallback(function () {
terminateEditing();
cb(inputRef.current.value);
}, [cb, terminateEditing, inputRef]);
var handleSaveText = React.useCallback(function () {
if (inputRef.current && inputRef.current.value.trim() !== '') {
if (inputPattern) {
if (inputRef.current.value.match(new RegExp(inputPattern))) {
saveText();
}
else {
setPopupVisible(true);
onValidationFail ? onValidationFail() : undefined;
}
}
else {
saveText();
}
}
}, [onValidationFail, inputPattern, saveText, setPopupVisible, inputRef]);
var handleKeyDown = React.useCallback(function (event) {
var _a;
var stroke = event.keyCode || event.which;
if (stroke === Key.Enter && text !== ((_a = inputRef.current) === null || _a === void 0 ? void 0 : _a.value)) {
handleSaveText();
}
else if (stroke === Key.ESC) {
terminateEditing();
}
}, [text, handleSaveText, terminateEditing, inputRef]);
return React.useMemo(function () {
return (React__default.createElement(React__default.Fragment, null,
React__default.createElement("span", { className: "react-editable-title-wrapper " + cx(styles['title-wrapper']) },
editing &&
React__default.createElement("input", { className: "react-editable-title-input " + cx(styles['control']) + " " + (seamlessInput ? cx(styles['seamless-input']) : cx(styles['custom-title-input'])), style: { minWidth: placeholder.length * 8 + "px" }, ref: inputRef, placeholder: placeholder, value: displayText, onChange: updateDisplayText, onKeyDown: handleKeyDown, minLength: inputMinLength, maxLength: inputMaxLength, onBlur: saveOnBlur ? handleSaveText : undefined }),
inputPattern && popupVisible &&
React__default.createElement("span", { className: "react-editable-title-error " + cx(styles['popover']) + " " + cx(styles['editable-title']) }, inputErrorMessage),
!editing &&
React__default.createElement("span", { className: "react-editable-title-text " + cx(styles['display-text']), onClick: handleClickOnText },
text,
!seamlessInput &&
React__default.createElement(reactstrap.Button, { onClick: handleSaveText, className: "react-editable-title-edit-button " + cx(styles['control-button']) + " " + cx(styles['control']) + " " + cx(styles['edit-control']) },
React__default.createElement(ai.AiOutlineEdit, { className: cx(styles['control-icon']) }))),
!seamlessInput && editing &&
React__default.createElement(React__default.Fragment, null,
React__default.createElement(reactstrap.Button, { onClick: handleSaveText, className: "react-editable-title-save-button " + cx(styles['control-button']) + " " + cx(styles['control']) },
React__default.createElement(ai.AiOutlineCheck, { className: cx(styles['control-icon']) })),
React__default.createElement(reactstrap.Button, { onClick: terminateEditing, className: "react-editable-title-cancel-button " + cx(styles['control-button']) + " " + cx(styles['control']) + " " + cx(styles['cancel-control']) },
React__default.createElement(ai.AiOutlineClose, { className: cx(styles['control-icon']) }))))));
}, [displayText, editing, popupVisible, inputMaxLength, inputMinLength, inputErrorMessage, inputPattern, placeholder, seamlessInput, saveOnBlur]);
};
module.exports = Editable;
//# sourceMappingURL=index.js.map