206 lines
8.7 KiB
JavaScript
206 lines
8.7 KiB
JavaScript
'use client';
|
|
|
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/esm/objectWithoutPropertiesLoose";
|
|
const _excluded = ["className"],
|
|
_excluded2 = ["className"],
|
|
_excluded3 = ["showQuickFilter", "quickFilterProps", "csvOptions", "printOptions", "mainControls", "additionalExportMenuItems"];
|
|
import * as React from 'react';
|
|
import PropTypes from 'prop-types';
|
|
import useId from '@mui/utils/useId';
|
|
import { styled } from '@mui/material/styles';
|
|
import composeClasses from '@mui/utils/composeClasses';
|
|
import { GridMenu } from "../menu/GridMenu.mjs";
|
|
import { Toolbar } from "./Toolbar.mjs";
|
|
import { ToolbarButton } from "./ToolbarButton.mjs";
|
|
import { FilterPanelTrigger } from "../filterPanel/index.mjs";
|
|
import { ColumnsPanelTrigger } from "../columnsPanel/index.mjs";
|
|
import { ExportCsv, ExportPrint } from "../export/index.mjs";
|
|
import { GridToolbarQuickFilter } from "../toolbar/GridToolbarQuickFilter.mjs";
|
|
import { useGridRootProps } from "../../hooks/utils/useGridRootProps.mjs";
|
|
import { useGridApiContext } from "../../hooks/utils/useGridApiContext.mjs";
|
|
import { NotRendered } from "../../utils/assert.mjs";
|
|
import { vars } from "../../constants/cssVariables.mjs";
|
|
import { getDataGridUtilityClass } from "../../constants/gridClasses.mjs";
|
|
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
const useUtilityClasses = ownerState => {
|
|
const {
|
|
classes
|
|
} = ownerState;
|
|
const slots = {
|
|
divider: ['toolbarDivider'],
|
|
label: ['toolbarLabel']
|
|
};
|
|
return composeClasses(slots, getDataGridUtilityClass, classes);
|
|
};
|
|
const Divider = styled(NotRendered, {
|
|
name: 'MuiDataGrid',
|
|
slot: 'ToolbarDivider'
|
|
})({
|
|
height: '50%',
|
|
margin: vars.spacing(0, 0.5)
|
|
});
|
|
const Label = styled('span', {
|
|
name: 'MuiDataGrid',
|
|
slot: 'ToolbarLabel'
|
|
})({
|
|
flex: 1,
|
|
font: vars.typography.font.large,
|
|
fontWeight: vars.typography.fontWeight.medium,
|
|
margin: vars.spacing(0, 0.5),
|
|
textOverflow: 'ellipsis',
|
|
overflow: 'hidden',
|
|
whiteSpace: 'nowrap'
|
|
});
|
|
function GridToolbarDivider(props) {
|
|
const other = _objectWithoutPropertiesLoose(props, _excluded);
|
|
const rootProps = useGridRootProps();
|
|
const classes = useUtilityClasses(rootProps);
|
|
return /*#__PURE__*/_jsx(Divider, _extends({
|
|
as: rootProps.slots.baseDivider,
|
|
orientation: "vertical",
|
|
className: classes.divider
|
|
}, other));
|
|
}
|
|
process.env.NODE_ENV !== "production" ? GridToolbarDivider.propTypes /* remove-proptypes */ = {
|
|
// ----------------------------- Warning --------------------------------
|
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
// ----------------------------------------------------------------------
|
|
className: PropTypes.string,
|
|
orientation: PropTypes.oneOf(['horizontal', 'vertical'])
|
|
} : void 0;
|
|
function GridToolbarLabel(props) {
|
|
const other = _objectWithoutPropertiesLoose(props, _excluded2);
|
|
const rootProps = useGridRootProps();
|
|
const classes = useUtilityClasses(rootProps);
|
|
return /*#__PURE__*/_jsx(Label, _extends({
|
|
className: classes.label
|
|
}, other));
|
|
}
|
|
function GridToolbar(props) {
|
|
const {
|
|
showQuickFilter = true,
|
|
quickFilterProps,
|
|
csvOptions,
|
|
printOptions,
|
|
mainControls,
|
|
additionalExportMenuItems
|
|
} = props,
|
|
other = _objectWithoutPropertiesLoose(props, _excluded3);
|
|
const apiRef = useGridApiContext();
|
|
const rootProps = useGridRootProps();
|
|
const [exportMenuOpen, setExportMenuOpen] = React.useState(false);
|
|
const exportMenuTriggerRef = React.useRef(null);
|
|
const exportMenuId = useId();
|
|
const exportMenuTriggerId = useId();
|
|
const showExportMenu = !csvOptions?.disableToolbarButton || !printOptions?.disableToolbarButton || additionalExportMenuItems;
|
|
const closeExportMenu = () => setExportMenuOpen(false);
|
|
return /*#__PURE__*/_jsxs(Toolbar, _extends({}, other, {
|
|
children: [rootProps.label && /*#__PURE__*/_jsx(GridToolbarLabel, {
|
|
children: rootProps.label
|
|
}), mainControls || /*#__PURE__*/_jsxs(React.Fragment, {
|
|
children: [!rootProps.disableColumnSelector && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
|
|
title: apiRef.current.getLocaleText('toolbarColumns'),
|
|
children: /*#__PURE__*/_jsx(ColumnsPanelTrigger, {
|
|
render: /*#__PURE__*/_jsx(ToolbarButton, {}),
|
|
children: /*#__PURE__*/_jsx(rootProps.slots.columnSelectorIcon, {
|
|
fontSize: "small"
|
|
})
|
|
})
|
|
}), !rootProps.disableColumnFilter && /*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
|
|
title: apiRef.current.getLocaleText('toolbarFilters'),
|
|
children: /*#__PURE__*/_jsx(FilterPanelTrigger, {
|
|
render: (triggerProps, state) => /*#__PURE__*/_jsx(ToolbarButton, _extends({}, triggerProps, {
|
|
color: state.filterCount > 0 ? 'primary' : 'default',
|
|
children: /*#__PURE__*/_jsx(rootProps.slots.baseBadge, {
|
|
badgeContent: state.filterCount,
|
|
color: "primary",
|
|
variant: "dot",
|
|
children: /*#__PURE__*/_jsx(rootProps.slots.openFilterButtonIcon, {
|
|
fontSize: "small"
|
|
})
|
|
})
|
|
}))
|
|
})
|
|
})]
|
|
}), showExportMenu && (!rootProps.disableColumnFilter || !rootProps.disableColumnSelector) && /*#__PURE__*/_jsx(GridToolbarDivider, {}), showExportMenu && /*#__PURE__*/_jsxs(React.Fragment, {
|
|
children: [/*#__PURE__*/_jsx(rootProps.slots.baseTooltip, {
|
|
title: apiRef.current.getLocaleText('toolbarExport'),
|
|
disableInteractive: exportMenuOpen,
|
|
children: /*#__PURE__*/_jsx(ToolbarButton, {
|
|
ref: exportMenuTriggerRef,
|
|
id: exportMenuTriggerId,
|
|
"aria-controls": exportMenuId,
|
|
"aria-haspopup": "true",
|
|
"aria-expanded": exportMenuOpen ? 'true' : undefined,
|
|
onClick: () => setExportMenuOpen(!exportMenuOpen),
|
|
children: /*#__PURE__*/_jsx(rootProps.slots.exportIcon, {
|
|
fontSize: "small"
|
|
})
|
|
})
|
|
}), /*#__PURE__*/_jsx(GridMenu, {
|
|
target: exportMenuTriggerRef.current,
|
|
open: exportMenuOpen,
|
|
onClose: closeExportMenu,
|
|
position: "bottom-end",
|
|
children: /*#__PURE__*/_jsxs(rootProps.slots.baseMenuList, _extends({
|
|
id: exportMenuId,
|
|
"aria-labelledby": exportMenuTriggerId,
|
|
autoFocusItem: true
|
|
}, rootProps.slotProps?.baseMenuList, {
|
|
children: [!printOptions?.disableToolbarButton && /*#__PURE__*/_jsx(ExportPrint, {
|
|
render: /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({}, rootProps.slotProps?.baseMenuItem)),
|
|
options: printOptions,
|
|
onClick: closeExportMenu,
|
|
children: apiRef.current.getLocaleText('toolbarExportPrint')
|
|
}), !csvOptions?.disableToolbarButton && /*#__PURE__*/_jsx(ExportCsv, {
|
|
render: /*#__PURE__*/_jsx(rootProps.slots.baseMenuItem, _extends({}, rootProps.slotProps?.baseMenuItem)),
|
|
options: csvOptions,
|
|
onClick: closeExportMenu,
|
|
children: apiRef.current.getLocaleText('toolbarExportCSV')
|
|
}), additionalExportMenuItems?.(closeExportMenu)]
|
|
}))
|
|
})]
|
|
}), showQuickFilter && /*#__PURE__*/_jsxs(React.Fragment, {
|
|
children: [/*#__PURE__*/_jsx(GridToolbarDivider, {}), /*#__PURE__*/_jsx(GridToolbarQuickFilter, _extends({}, quickFilterProps))]
|
|
})]
|
|
}));
|
|
}
|
|
process.env.NODE_ENV !== "production" ? GridToolbar.propTypes /* remove-proptypes */ = {
|
|
// ----------------------------- Warning --------------------------------
|
|
// | These PropTypes are generated from the TypeScript type definitions |
|
|
// | To update them edit the TypeScript types and run "pnpm proptypes" |
|
|
// ----------------------------------------------------------------------
|
|
additionalExportMenuItems: PropTypes.func,
|
|
csvOptions: PropTypes.object,
|
|
mainControls: PropTypes.node,
|
|
printOptions: PropTypes.object,
|
|
/**
|
|
* Props passed to the quick filter component.
|
|
*/
|
|
quickFilterProps: PropTypes.shape({
|
|
className: PropTypes.string,
|
|
debounceMs: PropTypes.number,
|
|
quickFilterFormatter: PropTypes.func,
|
|
quickFilterParser: PropTypes.func,
|
|
slotProps: PropTypes.object
|
|
}),
|
|
/**
|
|
* Show the history controls (undo/redo buttons).
|
|
* @default true
|
|
*/
|
|
showHistoryControls: PropTypes.bool,
|
|
/**
|
|
* Show the quick filter component.
|
|
* @default true
|
|
*/
|
|
showQuickFilter: PropTypes.bool,
|
|
/**
|
|
* The props used for each slot inside.
|
|
* @default {}
|
|
*/
|
|
slotProps: PropTypes.object,
|
|
sx: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.func, PropTypes.object, PropTypes.bool])), PropTypes.func, PropTypes.object])
|
|
} : void 0;
|
|
export { GridToolbar, GridToolbarDivider, GridToolbarLabel }; |