react-konva-grid
Version:
Canvas grid to render large set of tabular data with virtualization.
110 lines • 4.33 kB
JavaScript
"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
const react_1 = __importStar(require("react"));
/**
* Default cell editor
* @param props
*/
const DefaultEditor = (props) => {
const { rowIndex, columnIndex, onChange, onSubmit, scrollPosition, position, onHide, ...rest } = props;
const inputRef = react_1.useRef(null);
react_1.useEffect(() => {
if (!inputRef.current)
return;
inputRef.current.focus();
inputRef.current.select();
}, []);
return (react_1.default.createElement("input", Object.assign({ type: "text", ref: inputRef, style: {
position: "absolute",
top: position.y,
left: position.x,
transform: `translate3d(-${scrollPosition.scrollLeft}px, -${scrollPosition.scrollTop}px, 0)`,
width: position.width,
height: position.height,
padding: "0 3px",
margin: 0,
boxSizing: "border-box",
border: "1px rgba(66, 133, 244, 1) solid",
outline: "none",
}, onChange: (e) => onChange(e.target.value), onKeyDown: (e) => {
// Enter key
if (e.which === 13) {
onSubmit && onSubmit();
}
}, onBlur: () => onHide() }, rest)));
};
const getDefaultEditor = (cell) => DefaultEditor;
/**
* Hook to make grid editable
* @param param
*/
const useEditable = ({ getEditor = getDefaultEditor, gridRef, getValue, onChange, }) => {
const [activeCell, setActiveCell] = react_1.useState(null);
const [value, setValue] = react_1.useState("");
const getValueRef = react_1.useRef(getValue);
const [position, setPosition] = react_1.useState({
x: 0,
y: 0,
width: 0,
height: 0,
});
const [scrollPosition, setScrollPosition] = react_1.useState({
scrollLeft: 0,
scrollTop: 0,
});
/* Update the valueref when dependencies change */
getValueRef.current = getValue;
/* Activate edit mode */
const handleDoubleClick = react_1.useCallback((e) => {
const { rowIndex, columnIndex } = gridRef.current.getCellCoordsFromOffsets(e.clientX, e.clientY);
const activeCell = { rowIndex, columnIndex };
if (!gridRef.current)
return;
const pos = gridRef.current.getCellOffsetFromCoords(activeCell);
setActiveCell(activeCell);
setValue(getValueRef.current(activeCell) || "");
setPosition(pos);
}, []);
/* Save scroll position to align the input */
const handleScroll = react_1.useCallback(setScrollPosition, []);
/* Save the value */
const handleSubmit = react_1.useCallback(() => {
if (!activeCell)
return;
onChange && onChange(value, activeCell);
setActiveCell(null);
}, [value, activeCell]);
/* When the input is blurred out */
const handleHide = react_1.useCallback(() => {
setActiveCell(null);
}, []);
/* Editor */
const Editor = react_1.useMemo(() => getEditor(activeCell), [activeCell]);
const editorComponent = activeCell ? (react_1.default.createElement(Editor, { value: value, onChange: setValue, onSubmit: handleSubmit, position: position, scrollPosition: scrollPosition, onHide: handleHide })) : null;
return {
editorComponent,
onDoubleClick: handleDoubleClick,
onScroll: handleScroll,
};
};
exports.default = useEditable;
//# sourceMappingURL=useEditable.js.map