@ag-grid-community/react
Version:
AG Grid React Component
274 lines (272 loc) • 16 kB
JavaScript
// @ag-grid-community/react v26.0.0
;
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
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)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@ag-grid-community/core");
var react_1 = __importStar(require("react"));
var utils_1 = require("../utils");
var popupEditorComp_1 = __importDefault(require("./popupEditorComp"));
var showJsRenderer_1 = __importDefault(require("./showJsRenderer"));
var beansContext_1 = require("../beansContext");
var jsComp_1 = require("../jsComp");
var CellCompState;
(function (CellCompState) {
CellCompState[CellCompState["ShowValue"] = 0] = "ShowValue";
CellCompState[CellCompState["EditValue"] = 1] = "EditValue";
})(CellCompState = exports.CellCompState || (exports.CellCompState = {}));
var checkCellEditorDeprecations = function (popup, cellEditor, cellCtrl) {
var col = cellCtrl.getColumn();
// cellEditor is written to be a popup editor, however colDef.cellEditorPopup is not set
if (!popup && cellEditor.isPopup && cellEditor.isPopup()) {
var msg_1 = "AG Grid: Found an issue in column " + col.getColId() + ". If using ReactUI, specify an editor is a popup using colDef.cellEditorPopup=true";
core_1._.doOnce(function () { return console.warn(msg_1); }, 'jsEditorComp-isPopup-' + cellCtrl.getColumn().getColId());
}
// cellEditor is a popup and is trying to position itself the deprecated way
if (popup && cellEditor.getPopupPosition && cellEditor.getPopupPosition() != null) {
var msg_2 = "AG Grid: AG Grid: Found an issue in column " + col.getColId() + ". If using ReactUI, specify an editor popup position using colDef.cellEditorPopupPosition=[value]";
core_1._.doOnce(function () { return console.warn(msg_2); }, 'jsEditorComp-getPopupPosition-' + cellCtrl.getColumn().getColId());
}
};
var jsxEditValue = function (editDetails, setInlineCellEditorRef, setPopupCellEditorRef, eGui, cellCtrl, jsEditorComp) {
var compDetails = editDetails.compDetails;
var CellEditorClass = compDetails.componentClass;
var reactInlineEditor = compDetails.componentFromFramework && !editDetails.popup;
var reactPopupEditor = compDetails.componentFromFramework && editDetails.popup;
var jsPopupEditor = !compDetails.componentFromFramework && editDetails.popup;
return (react_1.default.createElement(react_1.default.Fragment, null,
reactInlineEditor
&& react_1.default.createElement(CellEditorClass, __assign({}, editDetails.compDetails.params, { ref: setInlineCellEditorRef })),
reactPopupEditor
&& react_1.default.createElement(popupEditorComp_1.default, { editDetails: editDetails, cellCtrl: cellCtrl, eParentCell: eGui, wrappedContent: react_1.default.createElement(CellEditorClass, __assign({}, editDetails.compDetails.params, { ref: setPopupCellEditorRef })) }),
jsPopupEditor && jsEditorComp && react_1.default.createElement(popupEditorComp_1.default, { editDetails: editDetails, cellCtrl: cellCtrl, eParentCell: eGui, jsChildComp: jsEditorComp })));
};
var jsxShowValue = function (showDetails, parentId, cellRendererRef, showTools, unSelectable, reactCellRendererStateless, toolsRefCallback, toolsValueRefCallback) {
var compDetails = showDetails.compDetails, value = showDetails.value;
var noCellRenderer = !compDetails;
var reactCellRenderer = compDetails && compDetails.componentFromFramework;
var CellRendererClass = compDetails && compDetails.componentClass;
var bodyJsxFunc = function () { return (react_1.default.createElement(react_1.default.Fragment, null,
noCellRenderer && react_1.default.createElement(react_1.default.Fragment, null, value),
reactCellRenderer && !reactCellRendererStateless && react_1.default.createElement(CellRendererClass, __assign({}, compDetails.params, { ref: cellRendererRef })),
reactCellRenderer && reactCellRendererStateless && react_1.default.createElement(CellRendererClass, __assign({}, compDetails.params)))); };
return (react_1.default.createElement(react_1.default.Fragment, null, showTools ?
react_1.default.createElement("div", { className: "ag-cell-wrapper", role: "presentation", ref: toolsRefCallback },
react_1.default.createElement("span", { role: "presentation", id: "cell-" + parentId, className: "ag-cell-value", unselectable: unSelectable, ref: toolsValueRefCallback }, bodyJsxFunc())) :
bodyJsxFunc()));
};
var CellComp = function (props) {
var context = react_1.useContext(beansContext_1.BeansContext).context;
var cellCtrl = props.cellCtrl, printLayout = props.printLayout, editingRow = props.editingRow;
var _a = react_1.useState(), renderDetails = _a[0], setRenderDetails = _a[1];
var _b = react_1.useState(), editDetails = _b[0], setEditDetails = _b[1];
var _c = react_1.useState(new utils_1.CssClasses()), cssClasses = _c[0], setCssClasses = _c[1];
var _d = react_1.useState(), userStyles = _d[0], setUserStyles = _d[1];
var _e = react_1.useState('on'), unselectable = _e[0], setUnselectable = _e[1];
var _f = react_1.useState(), left = _f[0], setLeft = _f[1];
var _g = react_1.useState(), width = _g[0], setWidth = _g[1];
var _h = react_1.useState(), height = _h[0], setHeight = _h[1];
var _j = react_1.useState(), transition = _j[0], setTransition = _j[1];
var _k = react_1.useState(), tabIndex = _k[0], setTabIndex = _k[1];
var _l = react_1.useState(), ariaSelected = _l[0], setAriaSelected = _l[1];
var _m = react_1.useState(), ariaExpanded = _m[0], setAriaExpanded = _m[1];
var _o = react_1.useState(), ariaColIndex = _o[0], setAriaColIndex = _o[1];
var _p = react_1.useState(), ariaDescribedBy = _p[0], setAriaDescribedBy = _p[1];
var _q = react_1.useState(), zIndex = _q[0], setZIndex = _q[1];
var _r = react_1.useState(), role = _r[0], setRole = _r[1];
var _s = react_1.useState(), colId = _s[0], setColId = _s[1];
var _t = react_1.useState(), title = _t[0], setTitle = _t[1];
var _u = react_1.useState(false), includeSelection = _u[0], setIncludeSelection = _u[1];
var _v = react_1.useState(false), includeRowDrag = _v[0], setIncludeRowDrag = _v[1];
var _w = react_1.useState(false), includeDndSource = _w[0], setIncludeDndSource = _w[1];
var _x = react_1.useState(false), forceWrapper = _x[0], setForceWrapper = _x[1];
var _y = react_1.useState(), jsEditorComp = _y[0], setJsEditorComp = _y[1];
var eGui = react_1.useRef(null);
var cellRendererRef = react_1.useRef(null);
var jsCellRendererRef = react_1.useRef();
var cellEditorRef = react_1.useRef();
var _z = react_1.useState(), toolsSpan = _z[0], setToolsSpan = _z[1];
var _0 = react_1.useState(), toolsValueSpan = _0[0], setToolsValueSpan = _0[1];
var showTools = renderDetails != null && (includeSelection || includeDndSource || includeRowDrag || forceWrapper);
var setCellEditorRef = react_1.useCallback(function (popup, cellEditor) {
cellEditorRef.current = cellEditor;
if (cellEditor) {
checkCellEditorDeprecations(popup, cellEditor, cellCtrl);
var editingCancelledByUserComp = cellEditor.isCancelBeforeStart && cellEditor.isCancelBeforeStart();
if (editingCancelledByUserComp) {
// we cannot set state inside render, so hack is to do it in next VM turn
setTimeout(function () { return cellCtrl.stopEditing(); }, 0);
}
}
}, []);
var setPopupCellEditorRef = react_1.useCallback(function (cellRenderer) { return setCellEditorRef(true, cellRenderer); }, []);
var setInlineCellEditorRef = react_1.useCallback(function (cellRenderer) { return setCellEditorRef(false, cellRenderer); }, []);
showJsRenderer_1.default(renderDetails, showTools, toolsValueSpan, jsCellRendererRef, eGui);
react_1.useEffect(function () { return cellCtrl.setupAutoHeight(toolsValueSpan); }, [toolsValueSpan]);
react_1.useEffect(function () {
var doingJsEditor = editDetails && !editDetails.compDetails.componentFromFramework;
if (!doingJsEditor) {
return;
}
var compDetails = editDetails.compDetails;
var isPopup = editDetails.popup === true;
var cellEditor = jsComp_1.createJsComp(context, function (factory) { return factory.createCellEditor(compDetails); });
if (!cellEditor) {
return;
}
var compGui = cellEditor.getGui();
setCellEditorRef(isPopup, cellEditor);
if (!isPopup) {
eGui.current.appendChild(compGui);
cellEditor.afterGuiAttached && cellEditor.afterGuiAttached();
}
setJsEditorComp(cellEditor);
return function () {
context.destroyBean(cellEditor);
setCellEditorRef(isPopup, undefined);
setJsEditorComp(undefined);
if (compGui && compGui.parentElement) {
compGui.parentElement.removeChild(compGui);
}
};
}, [editDetails]);
// tool widgets effect
react_1.useEffect(function () {
if (!cellCtrl || !context) {
return;
}
setAriaDescribedBy(!!toolsSpan ? "cell-" + cellCtrl.getInstanceId() : undefined);
if (!toolsSpan) {
return;
}
var beansToDestroy = [];
var addComp = function (comp) {
if (comp) {
toolsSpan.insertAdjacentElement('afterbegin', comp.getGui());
beansToDestroy.push(comp);
}
return comp;
};
if (includeSelection) {
addComp(cellCtrl.createSelectionCheckbox());
}
if (includeDndSource) {
addComp(cellCtrl.createDndSource());
}
if (includeRowDrag) {
addComp(cellCtrl.createRowDragComp());
}
return function () {
context.destroyBeans(beansToDestroy);
};
}, [includeDndSource, includeRowDrag, includeSelection, toolsSpan]);
// attaching the ref to state makes sure we render again when state is set. this is
// how we make sure the tools are added, as it's not possible to have an effect depend
// on a reference, as reference is not state, it doesn't create another render cycle.
var toolsRefCallback = react_1.useCallback(function (ref) { return setToolsSpan(ref); }, []);
var toolsValueRefCallback = react_1.useCallback(function (ref) { return setToolsValueSpan(ref); }, []);
react_1.useEffect(function () {
if (!cellCtrl) {
return;
}
var compProxy = {
addOrRemoveCssClass: function (name, on) { return setCssClasses(function (prev) { return prev.setClass(name, on); }); },
setUserStyles: function (styles) { return setUserStyles(styles); },
setAriaSelected: function (value) { return setAriaSelected(value); },
setAriaExpanded: function (value) { return setAriaExpanded(value); },
getFocusableElement: function () { return eGui.current; },
setLeft: function (left) { return setLeft(left); },
setWidth: function (width) { return setWidth(width); },
setAriaColIndex: function (index) { return setAriaColIndex(index); },
setHeight: function (height) { return setHeight(height); },
setZIndex: function (zIndex) { return setZIndex(zIndex); },
setTabIndex: function (tabIndex) { return setTabIndex(tabIndex); },
setRole: function (role) { return setRole(role); },
setColId: function (colId) { return setColId(colId); },
setTitle: function (title) { return setTitle(title); },
setUnselectable: function (value) { return setUnselectable(value || undefined); },
setTransition: function (transition) { return setTransition(transition); },
setIncludeSelection: function (include) { return setIncludeSelection(include); },
setIncludeRowDrag: function (include) { return setIncludeRowDrag(include); },
setIncludeDndSource: function (include) { return setIncludeDndSource(include); },
setForceWrapper: function (force) { return setForceWrapper(force); },
getCellEditor: function () { return cellEditorRef.current || null; },
getCellRenderer: function () { return cellRendererRef.current ? cellRendererRef.current : jsCellRendererRef.current; },
getParentOfValue: function () { return toolsValueSpan ? toolsValueSpan : eGui.current; },
setRenderDetails: function (compDetails, value, force) {
setRenderDetails({
value: value,
compDetails: compDetails,
force: force
});
},
setEditDetails: function (compDetails, popup, popupPosition) {
if (compDetails) {
// start editing
setEditDetails({
compDetails: compDetails,
popup: popup,
popupPosition: popupPosition
});
if (!popup) {
setRenderDetails(undefined);
}
}
else {
// stop editing
setEditDetails(undefined);
}
}
};
cellCtrl.setComp(compProxy, null, eGui.current, printLayout, editingRow);
}, []);
var reactCellRendererStateless = react_1.useMemo(function () {
var res = renderDetails && renderDetails.compDetails
&& renderDetails.compDetails.componentFromFramework
&& utils_1.isComponentStateless(renderDetails.compDetails.componentClass);
return !!res;
}, [renderDetails]);
var className = react_1.useMemo(function () {
var res = cssClasses.toString();
if (!showTools) {
res += ' ag-cell-value';
}
return res;
}, [cssClasses, showTools]);
var cellStyles = react_1.useMemo(function () {
var res = {
left: left,
width: width,
height: height,
transition: transition,
zIndex: zIndex
};
core_1._.assign(res, userStyles);
return res;
}, [left, width, height, transition, zIndex, userStyles]);
var cellInstanceId = react_1.useMemo(function () { return cellCtrl.getInstanceId(); }, []);
return (react_1.default.createElement("div", { ref: eGui, className: className, style: cellStyles, tabIndex: tabIndex, "aria-selected": ariaSelected, "aria-colindex": ariaColIndex, role: role, "aria-expanded": ariaExpanded, "col-id": colId, title: title, unselectable: unselectable, "aria-describedby": ariaDescribedBy },
renderDetails != null && jsxShowValue(renderDetails, cellInstanceId, cellRendererRef, showTools, unselectable, reactCellRendererStateless, toolsRefCallback, toolsValueRefCallback),
editDetails != null && jsxEditValue(editDetails, setInlineCellEditorRef, setPopupCellEditorRef, eGui.current, cellCtrl, jsEditorComp)));
};
exports.default = react_1.memo(CellComp);
//# sourceMappingURL=cellComp.js.map