@mui/x-data-grid-premium
Version:
The Premium plan edition of the MUI X Data Grid Components.
132 lines (131 loc) • 6.07 kB
JavaScript
"use strict";
'use client';
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.GridColumnMenuAggregationItem = GridColumnMenuAggregationItem;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _toPropertyKey2 = _interopRequireDefault(require("@babel/runtime/helpers/toPropertyKey"));
var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
var _react = _interopRequireWildcard(require("react"));
var React = _react;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
var _gridAggregationUtils = require("../../../hooks/features/aggregation/gridAggregationUtils");
var _gridAggregationSelectors = require("../../../hooks/features/aggregation/gridAggregationSelectors");
var _jsxRuntime = require("react/jsx-runtime");
const _excluded = ["native"];
function GridColumnMenuAggregationItem(props) {
const {
colDef
} = props;
const apiRef = (0, _useGridApiContext.useGridApiContext)();
const inputRef = React.useRef(null);
const rootProps = (0, _useGridRootProps.useGridRootProps)();
const id = (0, _useId.default)();
const aggregationModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridAggregationSelectors.gridAggregationModelSelector);
const availableAggregationFunctions = React.useMemo(() => (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
aggregationFunctions: rootProps.aggregationFunctions,
colDef,
isDataSource: !!rootProps.dataSource
}), [colDef, rootProps.aggregationFunctions, rootProps.dataSource]);
const _ref = rootProps.slotProps?.baseSelect || {},
{
native: isBaseSelectNative = false
} = _ref,
baseSelectProps = (0, _objectWithoutPropertiesLoose2.default)(_ref, _excluded);
const baseSelectOptionProps = rootProps.slotProps?.baseSelectOption || {};
const selectedAggregationRule = React.useMemo(() => {
if (!colDef || !aggregationModel[colDef.field]) {
return '';
}
const aggregationFunctionName = aggregationModel[colDef.field];
if ((0, _gridAggregationUtils.canColumnHaveAggregationFunction)({
colDef,
aggregationFunctionName,
aggregationFunction: rootProps.aggregationFunctions[aggregationFunctionName],
isDataSource: !!rootProps.dataSource
})) {
return aggregationFunctionName;
}
return '';
}, [rootProps.aggregationFunctions, rootProps.dataSource, aggregationModel, colDef]);
const handleAggregationItemChange = event => {
const newAggregationItem = event.target?.value || undefined;
const currentModel = (0, _gridAggregationSelectors.gridAggregationModelSelector)(apiRef);
const _colDef$field = colDef.field,
otherColumnItems = (0, _objectWithoutPropertiesLoose2.default)(currentModel, [_colDef$field].map(_toPropertyKey2.default));
const newModel = newAggregationItem == null ? otherColumnItems : (0, _extends2.default)({}, otherColumnItems, {
[colDef?.field]: newAggregationItem
});
apiRef.current.setAggregationModel(newModel);
apiRef.current.hideColumnMenu();
};
const label = apiRef.current.getLocaleText('aggregationMenuItemHeader');
const handleMenuItemKeyDown = React.useCallback(event => {
if (event.key === 'Enter' || event.key === ' ') {
inputRef.current.focus();
}
}, []);
const handleSelectKeyDown = React.useCallback(event => {
if (event.key === 'ArrowDown' || event.key === 'ArrowUp' || event.key === ' ') {
event.stopPropagation();
}
}, []);
return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, {
inert: true,
iconStart: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnMenuAggregationIcon, {
fontSize: "small"
}),
onKeyDown: handleMenuItemKeyDown,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(rootProps.slots.baseSelect, (0, _extends2.default)({
labelId: `${id}-label`,
id: `${id}-input`,
value: selectedAggregationRule,
label: label,
onChange: handleAggregationItemChange,
onKeyDown: handleSelectKeyDown,
onBlur: event => event.stopPropagation(),
native: isBaseSelectNative,
fullWidth: true,
size: "small",
style: {
minWidth: 150
},
slotProps: {
htmlInput: {
ref: inputRef
}
}
}, baseSelectProps, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
native: isBaseSelectNative,
value: "",
children: "..."
})), availableAggregationFunctions.map(aggFunc => /*#__PURE__*/(0, _react.createElement)(rootProps.slots.baseSelectOption, (0, _extends2.default)({}, baseSelectOptionProps, {
key: aggFunc,
value: aggFunc,
native: isBaseSelectNative
}), (0, _gridAggregationUtils.getAggregationFunctionLabel)({
apiRef,
aggregationRule: {
aggregationFunctionName: aggFunc,
aggregationFunction: rootProps.aggregationFunctions[aggFunc]
}
})))]
}))
});
}
process.env.NODE_ENV !== "production" ? GridColumnMenuAggregationItem.propTypes = {
// ----------------------------- Warning --------------------------------
// | These PropTypes are generated from the TypeScript type definitions |
// | To update them edit the TypeScript types and run "pnpm proptypes" |
// ----------------------------------------------------------------------
colDef: _propTypes.default.object.isRequired,
onClick: _propTypes.default.func.isRequired
} : void 0;