@nodeject/ui-components
Version:
UI library for non-trivial components
64 lines (63 loc) • 2.73 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
exports.NewItemDefault = void 0;
var antd_1 = require("antd");
var React = require("react");
var react_1 = require("react");
var editable_label_1 = require("../../../editable-label");
var icons_1 = require("../../../icons");
var itemStyles = require("../Item.module.less");
var styles = require("./NewItem.module.less");
var Text = antd_1.Typography.Text;
var NewItemDefault = function (props) {
var onCancelNewItem = props.onCancelNewItem, onSaveNewItem = props.onSaveNewItem, saveButtonTitle = props.saveButtonTitle;
var initialValue = 'New item';
var _a = react_1.useState(initialValue), data = _a[0], setData = _a[1];
var _b = react_1.useState(false), isDataValidated = _b[0], setIsDataValidated = _b[1];
var _c = react_1.useState(function () { return Math.random(); }), key = _c[0], setKey = _c[1];
var keyDown = react_1.useCallback(function (event) {
if (event.keyCode === 27) {
// On Escape
if (onCancelNewItem) {
onCancelNewItem();
}
}
else if (event.keyCode === 13) {
// On Enter
// saveNewItem()
}
}, []);
react_1.useEffect(function () {
document.addEventListener('keydown', keyDown, false);
return function () {
document.removeEventListener('keydown', keyDown, false);
};
}, []);
var validateData = function () {
setIsDataValidated(data !== undefined);
};
react_1.useEffect(function () {
validateData();
}, [data]);
var reset = function () {
setKey(Math.random());
setData(initialValue);
};
var saveNewItem = function () {
if (isDataValidated) {
onSaveNewItem(data);
reset();
}
};
var onSaveTitle = function (savedValue) {
setData(savedValue);
};
return (React.createElement("div", { key: key, className: itemStyles.item },
React.createElement("div", { className: styles.newItem },
React.createElement(editable_label_1.EditableLabel, { canEdit: true, initialValue: data, focusOnMount: true, onSave: onSaveTitle, htmlTag: "span", editOnClick: true, setCursorOnFocus: "selectAll" })),
React.createElement(antd_1.Button, { type: "primary", onClick: saveNewItem }, saveButtonTitle || 'Save'),
React.createElement(antd_1.Button, { type: "link", onClick: onCancelNewItem },
React.createElement(Text, { type: "secondary" },
React.createElement(icons_1.CloseIcon, null)))));
};
exports.NewItemDefault = NewItemDefault;