convention

packages/grid/_modules_/grid/components/toolbar/GridToolbarExport.tsx

@@ -7,31 +7,44 @@ import MenuItem from '@material-ui/core/MenuItem';
 import { isHideMenuKey, isTabKey } from '../../utils/keyboardUtils';
 import { GridApiContext } from '../GridApiContext';
 import { GridMenu } from '../menu/GridMenu';
-import { GridExportOption, GridExportFormat, GridExportConfiguration } from '../../models';
+import { GridExportCsvOptions } from '../../models/gridExport';
 
-type GridToolbarExportProps = ButtonProps & { exportConfiguration?: GridExportConfiguration };
+interface GridExportFormatCsv {
+ format: 'csv';
+ formatOptions?: GridExportCsvOptions;
+}
+
+type GridExportFormatOption = GridExportFormatCsv;
+
+type GridExportOption = GridExportFormatOption & {
+ label: React.ReactNode;
+};
+
+export interface GridToolbarExportProps extends ButtonProps {
+ csvOptions?: GridExportCsvOptions;
+}
 
 export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbarExportProps>(
- function GridToolbarExport({ exportConfiguration, ...other }, ref) {
+ function GridToolbarExport(props, ref) {
+ const { csvOptions, ...other } = props;
  const apiRef = React.useContext(GridApiContext);
- const exportButtonId = useId();
- const exportMenuId = useId();
+ const buttonId = useId();
+ const menuId = useId();
  const [anchorEl, setAnchorEl] = React.useState(null);
  const ExportIcon = apiRef!.current.components!.ExportIcon!;
 
- const ExportOptions: Array<GridExportOption> = [];
-
- ExportOptions.push({
+ const exportOptions: Array<GridExportOption> = [];
+ exportOptions.push({
  label: apiRef!.current.getLocaleText('toolbarExportCSV'),
  format: 'csv',
- options: exportConfiguration?.csv,
+ formatOptions: csvOptions,
  });
 
- const handleExportSelectorOpen = (event) => setAnchorEl(event.currentTarget);
- const handleExportSelectorClose = () => setAnchorEl(null);
- const handleExport = (option: GridExportFormat, fileName?: string) => {
+ const handleMenuOpen = (event) => setAnchorEl(event.currentTarget);
+ const handleMenuClose = () => setAnchorEl(null);
+ const handleExport = (option: GridExportFormatOption) => () => {
  if (option.format === 'csv') {
- apiRef!.current.exportDataAsCsv(option.options, fileName);
+ apiRef!.current.exportDataAsCsv(option.formatOptions);
  }
 
  setAnchorEl(null);
@@ -42,46 +55,44 @@ export const GridToolbarExport = React.forwardRef<HTMLButtonElement, GridToolbar
  event.preventDefault();
  }
  if (isHideMenuKey(event.key)) {
- handleExportSelectorClose();
+ handleMenuClose();
  }
  };
 
- const renderExportOptions: Array<React.ReactElement> = ExportOptions.map((option, index) => (
- <MenuItem key={index} onClick={() => handleExport(option, exportConfiguration?.fileName)}>
- {option.label}
- </MenuItem>
- ));
-
  return (
  <React.Fragment>
  <Button
  ref={ref}
  color="primary"
  size="small"
  startIcon={<ExportIcon />}
- onClick={handleExportSelectorOpen}
+ onClick={handleMenuOpen}
  aria-expanded={anchorEl ? 'true' : undefined}
  aria-haspopup="menu"
- aria-labelledby={exportMenuId}
- id={exportButtonId}
+ aria-labelledby={menuId}
+ id={buttonId}
  {...other}
  >
  {apiRef!.current.getLocaleText('toolbarExport')}
  </Button>
  <GridMenu
  open={Boolean(anchorEl)}
  target={anchorEl}
- onClickAway={handleExportSelectorClose}
+ onClickAway={handleMenuClose}
  position="bottom-start"
  >
  <MenuList
- id={exportMenuId}
+ id={menuId}
  className="MuiDataGrid-gridMenuList"
- aria-labelledby={exportButtonId}
+ aria-labelledby={buttonId}
  onKeyDown={handleListKeyDown}
  autoFocusItem={Boolean(anchorEl)}
  >
- {renderExportOptions}
+ {exportOptions.map((option, index) => (
+ <MenuItem key={index} onClick={handleExport(option)}>
+ {option.label}
+ </MenuItem>
+ ))}
  </MenuList>
  </GridMenu>
  </React.Fragment>

packages/grid/_modules_/grid/hooks/features/export/useGridCsvExport.tsx

@@ -5,7 +5,8 @@ import { useGridSelector } from '../core/useGridSelector';
 import { visibleGridColumnsSelector } from '../columns';
 import { visibleSortedGridRowsSelector } from '../filter';
 import { gridSelectionStateSelector } from '../selection';
-import { GridCsvExportApi, GridExportCsvOptions } from '../../../models';
+import { GridCsvExportApi } from '../../../models/api/gridCsvExportApi';
+import { GridExportCsvOptions } from '../../../models/gridExport';
 import { useLogger } from '../../utils/useLogger';
 import { exportAs } from '../../../utils';
 import { buildCSV } from './seralizers/csvSeraliser';
@@ -16,22 +17,24 @@ export const useGridCsvExport = (apiRef: GridApiRef): void => {
  const visibleSortedRows = useGridSelector(apiRef, visibleSortedGridRowsSelector);
  const selection = useGridSelector(apiRef, gridSelectionStateSelector);
 
- const getDataAsCsv = React.useCallback((): string => {
+ // TODO remove once we use the options
+ // eslint-disable-next-line @typescript-eslint/no-unused-vars
+ const getDataAsCsv = React.useCallback((options?: GridExportCsvOptions): string => {
  logger.debug(`Get data as CSV`);
 
  return buildCSV(visibleColumns, visibleSortedRows, selection, apiRef.current.getCellValue);
  }, [logger, visibleColumns, visibleSortedRows, selection, apiRef]);
 
  const exportDataAsCsv = React.useCallback(
- (options?: GridExportCsvOptions, fileName?: string): void => {
+ (options?: GridExportCsvOptions): void => {
  logger.debug(`Export data as CSV`);
- const csv = getDataAsCsv();
+ const csv = getDataAsCsv(options);
 
  const blob = new Blob([options?.utf8WithBom ? new Uint8Array([0xef, 0xbb, 0xbf]) : '', csv], {
  type: 'text/csv',
  });
 
- exportAs(blob, 'csv', fileName?.length ? fileName : undefined);
+ exportAs(blob, 'csv', options?.fileName?.length ? options.fileName : undefined);
  },
  [logger, getDataAsCsv],
  );

packages/grid/_modules_/grid/models/api/gridCsvExportApi.ts

@@ -1,16 +1,20 @@
 import { GridExportCsvOptions } from '../gridExport';
 
 /**
- * The csv export API interface that is available in the grid [[apiRef]].
+ * The CSV export API interface that is available in the grid [[apiRef]].
  */
 export interface GridCsvExportApi {
  /**
- * Returns the grid data formatted as CSV.
- * @returns {string} The data as CSV.
+ * Returns the grid data as a CSV string.
+ * This method is used internally by `exportDataAsCsv`.
+ * @params GridExportCsvOptions The options to apply on the export.
+ * @returns string
  */
- getDataAsCsv: () => string;
+ getDataAsCsv: (options?: GridExportCsvOptions) => string;
  /**
- * Exports the grid data as CSV and sends it to the user.
+ * Downloads and exports a CSV of the grid's data.
+ * @params GridExportCsvOptions The options to apply on the export.
+ * @returns void
  */
- exportDataAsCsv: (options?: GridExportCsvOptions, fileName?: string) => void;
+ exportDataAsCsv: (options?: GridExportCsvOptions) => void;
 }

packages/grid/_modules_/grid/models/gridExport.ts

@@ -1,24 +1,12 @@
-export interface GridExportCsvOptions {
- utf8WithBom?: boolean;
-}
-export interface GridExportFormatCsv {
- format: 'csv';
- options?: GridExportCsvOptions;
-}
-
 /**
- * Available export formats. To be extended in future.
+ * The options to apply on the CSV export.
  */
-export type GridExportFormatExtension = 'csv';
-export type GridExportFormat = GridExportFormatCsv;
-export interface GridExportConfiguration {
+export interface GridExportCsvOptions {
  fileName?: string;
- csv?: GridExportCsvOptions;
+ utf8WithBom?: boolean;
 }
 
 /**
- * Export option interface
+ * Available export formats.
  */
-export type GridExportOption = GridExportFormat & {
- label: React.ReactNode;
-};
+export type GridExportFormat = 'csv';

packages/grid/_modules_/grid/utils/exportAs.ts

@@ -1,4 +1,4 @@
-import { GridExportFormatExtension } from '../models/gridExport';
+import { GridExportFormat } from '../models/gridExport';
 
 /**
  * I have hesitate to use https://github.com/eligrey/FileSaver.js.
@@ -12,7 +12,7 @@ import { GridExportFormatExtension } from '../models/gridExport';
  */
 export function exportAs(
  blob: Blob,
- extension: GridExportFormatExtension = 'csv',
+ extension: GridExportFormat = 'csv',
  filename: string = document.title,
 ): void {
  const fullName = `${filename}.${extension}`;