@mui/x-data-grid-premium
Version:
The Premium plan edition of the MUI X Data Grid Components.
351 lines (350 loc) • 12.2 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.GridPivotPanelField = GridPivotPanelField;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var React = _interopRequireWildcard(require("react"));
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 _useId = _interopRequireDefault(require("@mui/utils/useId"));
var _useGridRootProps = require("../../hooks/utils/useGridRootProps");
var _gridAggregationUtils = require("../../hooks/features/aggregation/gridAggregationUtils");
var _GridPivotPanelFieldMenu = require("./GridPivotPanelFieldMenu");
var _useGridApiContext = require("../../hooks/utils/useGridApiContext");
var _gridPivotingSelectors = require("../../hooks/features/pivoting/gridPivotingSelectors");
var _useGridPrivateApiContext = require("../../hooks/utils/useGridPrivateApiContext");
var _jsxRuntime = require("react/jsx-runtime");
const useUtilityClasses = ownerState => {
const {
classes,
modelKey
} = ownerState;
const sorted = modelKey === 'columns' && ownerState.modelValue.sort;
const slots = {
root: ['pivotPanelField', sorted && 'pivotPanelField--sorted'],
name: ['pivotPanelFieldName'],
actionContainer: ['pivotPanelFieldActionContainer'],
dragIcon: ['pivotPanelFieldDragIcon'],
checkbox: ['pivotPanelFieldCheckbox']
};
return (0, _composeClasses.default)(slots, _xDataGridPro.getDataGridUtilityClass, classes);
};
const GridPivotPanelFieldRoot = (0, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'PivotPanelField',
overridesResolver: (props, styles) => [{
[`&.${_xDataGridPro.gridClasses['pivotPanelField--sorted']}`]: styles['pivotPanelField--sorted']
}, styles.pivotPanelField]
})({
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: 'grab',
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 GridPivotPanelFieldName = (0, _styles.styled)('span', {
name: 'MuiDataGrid',
slot: 'PivotPanelFieldName'
})({
flex: 1,
overflow: 'hidden',
textOverflow: 'ellipsis',
whiteSpace: 'nowrap'
});
const GridPivotPanelFieldActionContainer = (0, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'PivotPanelFieldActionContainer'
})({
display: 'flex',
alignItems: 'center'
});
const GridPivotPanelFieldDragIcon = (0, _styles.styled)('div', {
name: 'MuiDataGrid',
slot: 'PivotPanelFieldDragIcon'
})({
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 GridPivotPanelFieldCheckbox = (0, _styles.styled)(_internals.NotRendered, {
name: 'MuiDataGrid',
slot: 'PivotPanelFieldCheckbox'
})({
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 initialColumns = (0, _xDataGridPro.useGridSelector)(apiRef, _gridPivotingSelectors.gridPivotInitialColumnsSelector);
const colDef = initialColumns.get(field);
const availableAggregationFunctions = React.useMemo(() => (0, _gridAggregationUtils.getAvailableAggregationFunctions)({
aggregationFunctions: rootProps.aggregationFunctions,
colDef,
isDataSource: !!rootProps.dataSource
}), [colDef, rootProps.aggregationFunctions, rootProps.dataSource]);
const handleClick = func => {
apiRef.current.setPivotModel(prev => {
return (0, _extends2.default)({}, prev, {
values: prev.values.map(col => {
if (col.field === field) {
return (0, _extends2.default)({}, col, {
aggFunc: func
});
}
return col;
})
});
});
setAggregationMenuOpen(false);
};
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 GridPivotPanelField(props) {
const {
children,
field,
onDragStart,
onDragEnd
} = props;
const rootProps = (0, _useGridRootProps.useGridRootProps)();
const [dropPosition, setDropPosition] = React.useState(null);
const section = props.modelKey;
const ownerState = (0, _extends2.default)({}, props, {
classes: rootProps.classes,
dropPosition,
section
});
const classes = useUtilityClasses(ownerState);
const apiRef = (0, _useGridPrivateApiContext.useGridPrivateApiContext)();
const handleDragStart = React.useCallback(event => {
const data = {
field,
modelKey: section
};
event.dataTransfer.setData('text/plain', JSON.stringify(data));
event.dataTransfer.dropEffect = 'move';
onDragStart(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 (!event.currentTarget.contains(event.relatedTarget)) {
setDropPosition(getDropPosition(event));
}
}, [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,
modelKey: originSection
} = JSON.parse(event.dataTransfer.getData('text/plain'));
apiRef.current.updatePivotModel({
field: droppedField,
targetField: field,
targetFieldPosition: position,
originSection,
targetSection: section
});
}
}, [getDropPosition, apiRef, field, section]);
const handleSort = () => {
const currentSort = section === 'columns' ? props.modelValue.sort : null;
let newValue;
if (currentSort === 'asc') {
newValue = 'desc';
} else if (currentSort === 'desc') {
newValue = undefined;
} else {
newValue = 'asc';
}
apiRef.current.setPivotModel(prev => {
return (0, _extends2.default)({}, prev, {
columns: prev.columns.map(col => {
if (col.field === field) {
return (0, _extends2.default)({}, col, {
sort: newValue
});
}
return col;
})
});
});
};
const handleVisibilityChange = event => {
if (section) {
apiRef.current.setPivotModel(prev => {
return (0, _extends2.default)({}, prev, {
[section]: prev[section].map(col => {
if (col.field === field) {
return (0, _extends2.default)({}, col, {
hidden: !event.target.checked
});
}
return col;
})
});
});
}
};
const hideable = section !== null;
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelFieldRoot, {
ownerState: ownerState,
className: classes.root,
onDragOver: handleDragOver,
onDragLeave: handleDragLeave,
onDrop: handleDrop,
onDragStart: handleDragStart,
onDragEnd: onDragEnd,
draggable: "true",
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldDragIcon, {
ownerState: ownerState,
className: classes.dragIcon,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(rootProps.slots.columnReorderIcon, {
fontSize: "small"
})
}), hideable ? /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldCheckbox, (0, _extends2.default)({
ownerState: ownerState,
className: classes.checkbox,
as: rootProps.slots.baseCheckbox,
size: "small",
density: "compact"
}, rootProps.slotProps?.baseCheckbox, {
checked: !props.modelValue.hidden || false,
onChange: handleVisibilityChange,
label: children
})) : /*#__PURE__*/(0, _jsxRuntime.jsx)(GridPivotPanelFieldName, {
ownerState: ownerState,
className: classes.name,
children: children
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(GridPivotPanelFieldActionContainer, {
ownerState: ownerState,
className: classes.actionContainer,
children: [section === 'columns' && /*#__PURE__*/(0, _jsxRuntime.jsx)(_internals.GridColumnSortButton, {
field: field,
direction: props.modelValue.sort,
sortingOrder: rootProps.sortingOrder,
onClick: handleSort
}), section === 'values' && /*#__PURE__*/(0, _jsxRuntime.jsx)(AggregationSelect, {
aggFunc: props.modelValue.aggFunc,
field: field
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_GridPivotPanelFieldMenu.GridPivotPanelFieldMenu, {
field: field,
modelKey: section
})]
})]
});
}