@mui/x-data-grid-premium
Version:
The Premium plan edition of the MUI X Data Grid Components.
335 lines (334 loc) • 13 kB
JavaScript
"use strict";
'use client';
var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.AggregationSelect = AggregationSelect;
exports.GridChartsPanelDataField = GridChartsPanelDataField;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
var _useId = _interopRequireDefault(require("@mui/utils/useId"));
var _styles = require("@mui/material/styles");
var _xDataGridPro = require("@mui/x-data-grid-pro");
var _composeClasses = _interopRequireDefault(require("@mui/utils/composeClasses"));
var _internals = require("@mui/x-data-grid-pro/internals");
var _useGridApiContext = require("../../../hooks/utils/useGridApiContext");
var _useGridRootProps = require("../../../hooks/utils/useGridRootProps");
var _useGridPrivateApiContext = require("../../../hooks/utils/useGridPrivateApiContext");
var _GridChartsPanelDataFieldMenu = require("./GridChartsPanelDataFieldMenu");
var _aggregation = require("../../../hooks/features/aggregation");
var _gridRowGroupingSelector = require("../../../hooks/features/rowGrouping/gridRowGroupingSelector");
var _gridAggregationUtils = require("../../../hooks/features/aggregation/gridAggregationUtils");
var _columnGroups = require("../../../constants/columnGroups");
var _jsxRuntime = require("react/jsx-runtime");
const AGGREGATION_FUNCTION_NONE = 'none';
const useUtilityClasses = ownerState => {
const {
classes
} = ownerState;
const slots = {
root: ['chartsPanelDataField'],
name: ['chartsPanelDataFieldName'],
actionContainer: ['chartsPanelDataFieldActionContainer'],
dragIcon: ['chartsPanelDataFieldDragIcon'],
checkbox: ['chartsPanelDataFieldCheckbox']
};
return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
};
const GridChartsPanelDataFieldRoot = (0, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'ChartsPanelDataField'
})(({
disabled
}) => ({
flexShrink: 0,
position: 'relative',
padding: _internals.vars.spacing(0, 1, 0, 2),
height: 32,
display: 'flex',
alignItems: 'center',
gap: _internals.vars.spacing(0.5),
borderWidth: 0,
borderTopWidth: 2,
borderBottomWidth: 2,
borderStyle: 'solid',
borderColor: 'transparent',
margin: '-1px 0',
// collapse vertical borders
cursor: disabled ? 'not-allowed' : 'grab',
opacity: disabled ? 0.5 : 1,
variants: [{
props: {
dropPosition: 'top'
},
style: {
borderTopColor: _internals.vars.colors.interactive.selected
}
}, {
props: {
dropPosition: 'bottom'
},
style: {
borderBottomColor: _internals.vars.colors.interactive.selected
}
}, {
props: {
section: null
},
style: {
borderTopColor: 'transparent',
borderBottomColor: 'transparent'
}
}],
'&:hover': {
backgroundColor: _internals.vars.colors.interactive.hover
}
}));
const GridChartsPanelDataFieldName = (0, _styles.styled)('span', {
name: 'MuiDataGrid',
slot: 'ChartsPanelDataFieldName'
})({
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
});
const GridChartsPanelDataFieldActionContainer = (0, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'ChartsPanelDataFieldActionContainer'
})({
display: 'flex',
alignItems: 'center'
});
const GridChartsPanelDataFieldDragIcon = (0, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'ChartsPanelDataFieldDragIcon'
})({
position: 'absolute',
left: -1,
width: 16,
display: 'flex',
justifyContent: 'center',
color: _internals.vars.colors.foreground.base,
opacity: 0,
'[draggable="true"]:hover > &': {
opacity: 0.3
}
});
const GridChartsPanelDataFieldCheckbox = (0, _styles.styled)(_internals.NotRendered, {
name: 'MuiDataGrid',
slot: 'ChartsPanelDataFieldCheckbox'
})({
flex: 1,
position: 'relative',
margin: _internals.vars.spacing(0, 0, 0, -1),
cursor: 'grab'
});
function AggregationSelect({
aggFunc,
field
}) {
const rootProps = (0, _useGridRootProps.useGridRootProps)();
const [aggregationMenuOpen, setAggregationMenuOpen] = React.useState(false);
const aggregationMenuTriggerRef = React.useRef(null);
const aggregationMenuTriggerId = (0, _useId.default)();
const aggregationMenuId = (0, _useId.default)();
const apiRef = (0, _useGridApiContext.useGridApiContext)();
const aggregationModel = (0, _aggregation.gridAggregationModelSelector)(apiRef);
const pivotActive = (0, _internals.gridPivotActiveSelector)(apiRef);
const getActualFieldName = React.useCallback(fieldName => pivotActive ? fieldName.split(_columnGroups.COLUMN_GROUP_ID_SEPARATOR).slice(-1)[0] : fieldName, [pivotActive]);
const colDef = React.useCallback(fieldName => apiRef.current.getColumn(getActualFieldName(fieldName)), [apiRef, getActualFieldName]);
const availableAggregationFunctions = React.useMemo(() => [...(pivotActive ? [] : [AGGREGATION_FUNCTION_NONE]), ...(0, _gridAggregationUtils.getAvailableAggregationFunctions)({
aggregationFunctions: rootProps.aggregationFunctions,
colDef: colDef(field),
isDataSource: !!rootProps.dataSource
})], [colDef, field, pivotActive, rootProps.aggregationFunctions, rootProps.dataSource]);
const handleClick = React.useCallback(func => {
if (pivotActive) {
const fieldName = getActualFieldName(field);
apiRef.current.setPivotModel(prev => (0, _extends2.default)({}, prev, {
values: prev.values.map(col => {
if (col.field === fieldName) {
return (0, _extends2.default)({}, col, {
aggFunc: func
});
}
return col;
})
}));
} else if (func === AGGREGATION_FUNCTION_NONE) {
const updatedAggregationModel = (0, _extends2.default)({}, aggregationModel);
delete updatedAggregationModel[field];
apiRef.current.setAggregationModel(updatedAggregationModel);
} else {
apiRef.current.setAggregationModel((0, _extends2.default)({}, aggregationModel, {
[field]: func
}));
}
setAggregationMenuOpen(false);
}, [apiRef, field, getActualFieldName, pivotActive, aggregationModel, setAggregationMenuOpen]);
return availableAggregationFunctions.length > 0 ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(React.Fragment, {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseChip, {
label: (0, _gridAggregationUtils.getAggregationFunctionLabel)({
apiRef,
aggregationRule: {
aggregationFunctionName: aggFunc,
aggregationFunction: rootProps.aggregationFunctions[aggFunc] || {}
}
}),
size: "small",
variant: "outlined",
ref: aggregationMenuTriggerRef,
id: aggregationMenuTriggerId,
"aria-haspopup": "true",
"aria-controls": aggregationMenuOpen ? aggregationMenuId : undefined,
"aria-expanded": aggregationMenuOpen ? 'true' : undefined,
onClick: () => setAggregationMenuOpen(!aggregationMenuOpen)
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_xDataGridPro.GridMenu, {
open: aggregationMenuOpen,
onClose: () => setAggregationMenuOpen(false),
target: aggregationMenuTriggerRef.current,
position: "bottom-start",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuList, (0, _extends2.default)({
id: aggregationMenuId,
"aria-labelledby": aggregationMenuTriggerId,
autoFocusItem: true
}, rootProps.slotProps?.baseMenuList, {
children: availableAggregationFunctions.map(func => /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseMenuItem, (0, _extends2.default)({
selected: aggFunc === func,
onClick: () => handleClick(func)
}, rootProps.slotProps?.baseMenuItem, {
children: (0, _gridAggregationUtils.getAggregationFunctionLabel)({
apiRef,
aggregationRule: {
aggregationFunctionName: func,
aggregationFunction: rootProps.aggregationFunctions[func] || {}
}
})
}), func))
}))
})]
}) : null;
}
function GridChartsPanelDataField(props) {
const {
children,
field,
section,
blockedSections,
dimensionsLabel,
valuesLabel,
selected,
disabled,
onChange,
onDragStart,
onDragEnd
} = props;
const rootProps = (0, _useGridRootProps.useGridRootProps)();
const [dropPosition, setDropPosition] = React.useState(null);
const ownerState = (0, _extends2.default)({}, props, {
classes: rootProps.classes,
dropPosition,
section
});
const classes = useUtilityClasses(ownerState);
const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
const aggregationModel = (0, _xDataGridPro.useGridSelector)(apiRef, _aggregation.gridAggregationModelSelector);
const rowGroupingModel = (0, _xDataGridPro.useGridSelector)(apiRef, _gridRowGroupingSelector.gridRowGroupingSanitizedModelSelector);
const isRowGroupingEnabled = React.useMemo(() => rowGroupingModel.length > 0, [rowGroupingModel]);
const handleDragStart = React.useCallback(event => {
const data = {
field,
section
};
event.dataTransfer.setData('text/plain', JSON.stringify(data));
event.dataTransfer.dropEffect = 'move';
onDragStart(field, section);
}, [field, onDragStart, section]);
const getDropPosition = React.useCallback(event => {
const rect = event.target.getBoundingClientRect();
const y = event.clientY - rect.top;
if (y < rect.height / 2) {
return 'top';
}
return 'bottom';
}, []);
const handleDragOver = React.useCallback(event => {
if (disabled) {
return;
}
if (!event.currentTarget.contains(event.relatedTarget)) {
setDropPosition(getDropPosition(event));
}
}, [disabled, getDropPosition]);
const handleDragLeave = React.useCallback(event => {
if (!event.currentTarget.contains(event.relatedTarget)) {
setDropPosition(null);
}
}, []);
const handleDrop = React.useCallback(event => {
setDropPosition(null);
if (!event.currentTarget.contains(event.relatedTarget)) {
event.preventDefault();
const position = getDropPosition(event);
const {
field: droppedField,
section: originSection
} = JSON.parse(event.dataTransfer.getData('text/plain'));
apiRef.current.chartsIntegration.updateDataReference(droppedField, originSection, section, field, position || undefined);
}
}, [getDropPosition, apiRef, field, section]);
const hideable = section !== null;
return /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.baseTooltip, (0, _extends2.default)({
title: disabled ? apiRef.current.getLocaleText('chartsFieldBlocked') : undefined,
enterDelay: 1000
}, rootProps.slotProps?.baseTooltip, {
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataFieldRoot, {
ownerState: ownerState,
className: classes.root,
onDragOver: handleDragOver,
onDragLeave: handleDragLeave,
onDrop: handleDrop,
onDragStart: handleDragStart,
onDragEnd: onDragEnd,
draggable: !disabled,
disabled: !!disabled,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataFieldDragIcon, {
ownerState: ownerState,
className: classes.dragIcon,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnReorderIcon, {
fontSize: "small"
})
}), hideable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataFieldCheckbox, (0, _extends2.default)({
ownerState: ownerState,
className: classes.checkbox,
as: rootProps.slots.baseCheckbox,
size: "small",
density: "compact"
}, rootProps.slotProps?.baseCheckbox, {
checked: selected || false,
onChange: () => onChange && onChange(field, section),
label: children
})) : /*#__PURE__*/(0, _jsxRuntime.jsx)(GridChartsPanelDataFieldName, {
ownerState: ownerState,
className: classes.name,
children: children
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridChartsPanelDataFieldActionContainer, {
ownerState: ownerState,
className: classes.actionContainer,
children: [isRowGroupingEnabled && section === 'values' && /*#__PURE__*/(0, _jsxRuntime.jsx)(AggregationSelect, {
aggFunc: aggregationModel[field] ?? AGGREGATION_FUNCTION_NONE,
field: field
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridChartsPanelDataFieldMenu.GridChartsPanelDataFieldMenu, {
field: field,
section: section,
blockedSections: blockedSections,
dimensionsLabel: dimensionsLabel,
valuesLabel: valuesLabel
})]
})]
})
}));
}