react-url-table
Version:
Smart and flexible table component built with React and for React projects. based on React16 hooks and mobx-react-lite
35 lines • 1.74 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
const tslib_1 = require("tslib");
const classnames_1 = tslib_1.__importDefault(require("classnames"));
const mobx_react_1 = require("mobx-react");
const react_1 = tslib_1.__importStar(require("react"));
const context_1 = require("../../store/context");
const editable_1 = require("../../helper/editable");
function EditableCell(props) {
const store = react_1.useContext(context_1.TableContext);
const cellRef = react_1.useRef(null);
const onFocus = react_1.useCallback(() => {
store.setFocus(props.field.index, props.rowIndex);
}, [props.field.index, props.rowIndex]);
const onEdit = react_1.useCallback(() => {
if (cellRef.current) {
store.editCell(cellRef.current.textContent, props.record, props.field);
}
}, [cellRef.current, props.record, props.field]);
const isInFocus = Boolean(store.focusCell &&
store.focusCell.rowIndex === props.rowIndex &&
store.focusCell.cellIndex === props.field.index);
const events = {
onEdit: onEdit,
onFocus,
onMoveFocus: store.moveFocus
};
const editEnabled = editable_1.useFocusAndEditable(cellRef, isInFocus, events);
return (react_1.default.createElement("td", { className: classnames_1.default('url_table__row__cell', 'url_table__row__cell--editable', {
'url_table__row__cell--edit': editEnabled,
'url_table__row__cell--focus': isInFocus
}), ref: cellRef, contentEditable: editEnabled, suppressContentEditableWarning: true, tabIndex: 0 }, props.field.render(props.record)));
}
exports.default = mobx_react_1.observer(EditableCell);
//# sourceMappingURL=editable-cell.js.map