@nodeject/ui-components
Version:
UI library for non-trivial components
60 lines (59 loc) • 2.53 kB
JavaScript
import { Button, Typography } from 'antd';
import * as React from 'react';
import { useCallback, useEffect, useState } from 'react';
import { EditableLabel } from '../../../editable-label';
import { CloseIcon } from '../../../icons';
import * as itemStyles from '../Item.module.less';
import * as styles from './NewItem.module.less';
var Text = Typography.Text;
export var NewItemDefault = function (props) {
var onCancelNewItem = props.onCancelNewItem, onSaveNewItem = props.onSaveNewItem, saveButtonTitle = props.saveButtonTitle;
var initialValue = 'New item';
var _a = useState(initialValue), data = _a[0], setData = _a[1];
var _b = useState(false), isDataValidated = _b[0], setIsDataValidated = _b[1];
var _c = useState(function () { return Math.random(); }), key = _c[0], setKey = _c[1];
var keyDown = useCallback(function (event) {
if (event.keyCode === 27) {
// On Escape
if (onCancelNewItem) {
onCancelNewItem();
}
}
else if (event.keyCode === 13) {
// On Enter
// saveNewItem()
}
}, []);
useEffect(function () {
document.addEventListener('keydown', keyDown, false);
return function () {
document.removeEventListener('keydown', keyDown, false);
};
}, []);
var validateData = function () {
setIsDataValidated(data !== undefined);
};
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(EditableLabel, { canEdit: true, initialValue: data, focusOnMount: true, onSave: onSaveTitle, htmlTag: "span", editOnClick: true, setCursorOnFocus: "selectAll" })),
React.createElement(Button, { type: "primary", onClick: saveNewItem }, saveButtonTitle || 'Save'),
React.createElement(Button, { type: "link", onClick: onCancelNewItem },
React.createElement(Text, { type: "secondary" },
React.createElement(CloseIcon, null)))));
};