@blueprintjs/table
Version:
Scalable interactive table component
61 lines • 3.11 kB
JavaScript
;
/*
* Copyright 2016 Palantir Technologies, Inc. All rights reserved.
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
Object.defineProperty(exports, "__esModule", { value: true });
exports.EditableName = void 0;
var tslib_1 = require("tslib");
var classnames_1 = tslib_1.__importDefault(require("classnames"));
var React = tslib_1.__importStar(require("react"));
var core_1 = require("@blueprintjs/core");
var Classes = tslib_1.__importStar(require("../common/classes"));
/**
* Editable name component.
*
* @see https://blueprintjs.com/docs/#table/api.editablename
*/
exports.EditableName = React.forwardRef(function (props, ref) {
var className = props.className, name = props.name, index = props.index, intent = props.intent, onCancel = props.onCancel, onChange = props.onChange, onConfirm = props.onConfirm;
var _a = React.useState(name), dirtyName = _a[0], setDirtyName = _a[1];
var _b = React.useState(false), isEditing = _b[0], setIsEditing = _b[1];
var _c = React.useState(name), savedName = _c[0], setSavedName = _c[1];
React.useEffect(function () {
setDirtyName(name);
setSavedName(name);
}, [name]);
var handleEdit = React.useCallback(function () {
setIsEditing(true);
setDirtyName(savedName);
}, [savedName]);
var handleCancel = React.useCallback(function (value) {
// don't strictly need to clear the dirtyName, but it's better hygiene
setIsEditing(false);
setDirtyName(undefined);
onCancel === null || onCancel === void 0 ? void 0 : onCancel(value, index);
}, [onCancel, index]);
var handleChange = React.useCallback(function (value) {
setDirtyName(value);
onChange === null || onChange === void 0 ? void 0 : onChange(value, index);
}, [onChange, index]);
var handleConfirm = React.useCallback(function (value) {
setIsEditing(false);
setSavedName(value);
setDirtyName(undefined);
onConfirm === null || onConfirm === void 0 ? void 0 : onConfirm(value, index);
}, [onConfirm, index]);
return (React.createElement(core_1.EditableText, { className: (0, classnames_1.default)(className, Classes.TABLE_EDITABLE_NAME), defaultValue: name, elementRef: ref, intent: intent, minWidth: 0, onCancel: handleCancel, onChange: handleChange, onConfirm: handleConfirm, onEdit: handleEdit, placeholder: "", selectAllOnFocus: true, value: isEditing ? dirtyName : savedName }));
});
exports.EditableName.displayName = "".concat(core_1.DISPLAYNAME_PREFIX, ".EditableName");
//# sourceMappingURL=editableName.js.map