-
-
Notifications
You must be signed in to change notification settings - Fork 1.2k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
12 changed files
with
212 additions
and
26 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export * from './useGridClipboard'; |
80 changes: 80 additions & 0 deletions
80
packages/grid/_modules_/grid/hooks/features/clipboard/useGridClipboard.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,80 @@ | ||
| import * as React from 'react'; | ||
| import { GridApiRef } from '../../../models/api/gridApiRef'; | ||
| import { useGridApiEventHandler } from '../../root/useGridApiEventHandler'; | ||
| import { GRID_KEYDOWN } from '../../../constants/eventsConstants'; | ||
| import { serialiseRow, serialiseCellValue } from '../export/serializers/csvSerializer'; | ||
| import { useGridSelector } from '../core/useGridSelector'; | ||
| import { visibleGridColumnsSelector } from '../columns/gridColumnsSelector'; | ||
| import { gridCheckboxSelectionColDef } from '../../../models/colDef'; | ||
| import { GridClipboardApi } from '../../../models/api'; | ||
| import { useGridApiMethod } from '../../root/useGridApiMethod'; | ||
|
|
||
| export const useGridClipboard = (apiRef: GridApiRef): void => { | ||
| const visibleColumns = useGridSelector(apiRef, visibleGridColumnsSelector); | ||
|
|
||
| const writeToClipboardPolyfill = React.useCallback( | ||
| (data: string) => { | ||
| const textarea = document.createElement('textarea'); | ||
| textarea.style.opacity = '0px'; | ||
| textarea.value = data; | ||
| apiRef.current.rootElementRef?.current?.appendChild(textarea); | ||
| textarea.select(); | ||
| document.execCommand('copy'); | ||
| apiRef.current.rootElementRef?.current?.removeChild(textarea); | ||
| }, | ||
| [apiRef], | ||
| ); | ||
|
|
||
| const copySelectedRowsToClipboard = React.useCallback( | ||
| (includeHeaders = false) => { | ||
| const selectedRows = apiRef.current.getSelectedRows(); | ||
| const filteredColumns = visibleColumns.filter( | ||
| (column) => column.field !== gridCheckboxSelectionColDef.field, | ||
| ); | ||
|
|
||
| if (selectedRows.size === 0 || filteredColumns.length === 0) { | ||
| return; | ||
| } | ||
|
|
||
| const headers = `${filteredColumns | ||
| .map((column) => serialiseCellValue(column.headerName || column.field, '\t')) | ||
| .join('\t')}\r\n`; | ||
|
|
||
| const data = [...selectedRows.keys()].reduce<string>( | ||
| (acc, id) => | ||
| `${acc}${serialiseRow(id, filteredColumns, apiRef.current.getCellParams, '\t').join( | ||
| '\t', | ||
| )}\r\n`, | ||
| includeHeaders ? headers : '', | ||
| ); | ||
|
|
||
| if (navigator.clipboard) { | ||
| navigator.clipboard.writeText(data).catch(() => { | ||
| writeToClipboardPolyfill(data); | ||
| }); | ||
| } else { | ||
| writeToClipboardPolyfill(data); | ||
| } | ||
| }, | ||
| [apiRef, visibleColumns, writeToClipboardPolyfill], | ||
| ); | ||
|
|
||
| const handleKeydown = React.useCallback( | ||
| (event: KeyboardEvent) => { | ||
| const isCtrlPressed = event.ctrlKey || event.metaKey; | ||
| if (event.key.toLowerCase() !== 'c' || !isCtrlPressed) { | ||
| return; | ||
| } | ||
| apiRef.current.copySelectedRowsToClipboard(event.shiftKey); | ||
| }, | ||
| [apiRef], | ||
| ); | ||
|
|
||
| useGridApiEventHandler(apiRef, GRID_KEYDOWN, handleKeydown); | ||
|
|
||
| const clipboardApi: GridClipboardApi = { | ||
| copySelectedRowsToClipboard, | ||
| }; | ||
|
|
||
| useGridApiMethod(apiRef, clipboardApi, 'GridClipboardApi'); | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
packages/grid/_modules_/grid/models/api/gridClipboardApi.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| /** | ||
| * The Clipboard API interface that is available in the grid [[apiRef]]. | ||
| */ | ||
| export interface GridClipboardApi { | ||
| /** | ||
| * Copies the selected rows to the clipboard. | ||
| * The fields will separated by the TAB character. | ||
| * @param {boolean} includeHeaders Whether to include the headers or not. Default is `false`. | ||
| */ | ||
| copySelectedRowsToClipboard: (includeHeaders?: boolean) => void; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
102 changes: 102 additions & 0 deletions
102
packages/grid/x-grid/src/tests/clipboard.XGrid.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import * as React from 'react'; | ||
| import { GridApiRef, useGridApiRef, XGrid } from '@material-ui/x-grid'; | ||
| import { expect } from 'chai'; | ||
| import { stub } from 'sinon'; | ||
| import { | ||
| createClientRenderStrictMode, | ||
| // @ts-expect-error need to migrate helpers to TypeScript | ||
| fireEvent, | ||
| } from 'test/utils'; | ||
| import { getCell } from 'test/utils/helperFn'; | ||
|
|
||
| const isJSDOM = /jsdom/.test(window.navigator.userAgent); | ||
|
|
||
| describe('<XGrid /> - Clipboard', () => { | ||
| // TODO v5: replace with createClientRender | ||
| const render = createClientRenderStrictMode(); | ||
|
|
||
| const baselineProps = { | ||
| autoHeight: isJSDOM, | ||
| }; | ||
|
|
||
| const columns = [{ field: 'id' }, { field: 'brand', headerName: 'Brand' }]; | ||
|
|
||
| let apiRef: GridApiRef; | ||
|
|
||
| function Test() { | ||
| apiRef = useGridApiRef(); | ||
| return ( | ||
| <div style={{ width: 300, height: 300 }}> | ||
| <XGrid | ||
| {...baselineProps} | ||
| apiRef={apiRef} | ||
| columns={columns} | ||
| rows={[ | ||
| { | ||
| id: 0, | ||
| brand: 'Nike', | ||
| }, | ||
| { | ||
| id: 1, | ||
| brand: 'Adidas', | ||
| }, | ||
| { | ||
| id: 2, | ||
| brand: 'Puma', | ||
| }, | ||
| ]} | ||
| /> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| describe('copySelectedRowsToClipboard', () => { | ||
| let writeText; | ||
|
|
||
| before(function beforeHook() { | ||
| if (!isJSDOM) { | ||
| // Needs permission to read the clipboard | ||
| this.skip(); | ||
| return; | ||
| } | ||
|
|
||
| writeText = stub().resolves(); | ||
|
|
||
| Object.defineProperty(navigator, 'clipboard', { | ||
| value: { writeText }, | ||
| writable: true, | ||
| }); | ||
| }); | ||
|
|
||
| after(function afterHook() { | ||
| Object.defineProperty(navigator, 'clipboard', { value: undefined }); | ||
| }); | ||
|
|
||
| it('should copy the selected rows to the clipboard', () => { | ||
| render(<Test />); | ||
| apiRef.current.selectRows([0, 1]); | ||
| apiRef.current.copySelectedRowsToClipboard(); | ||
| expect(writeText.firstCall.args[0]).to.equal(['0\tNike', '1\tAdidas', ''].join('\r\n')); | ||
| }); | ||
|
|
||
| it('should include the headers when includeHeaders=true', () => { | ||
| render(<Test />); | ||
| apiRef.current.selectRows([0, 1]); | ||
| apiRef.current.copySelectedRowsToClipboard(true); | ||
| expect(writeText.firstCall.args[0]).to.equal( | ||
| ['id\tBrand', '0\tNike', '1\tAdidas', ''].join('\r\n'), | ||
| ); | ||
| }); | ||
|
|
||
| ['ctrlKey', 'metaKey'].forEach((key) => { | ||
| it(`should copy the selected rows to the clipboard when ${key} + C is pressed`, () => { | ||
| render(<Test />); | ||
| apiRef.current.selectRows([0, 1]); | ||
| const cell = getCell(0, 0); | ||
| cell.focus(); | ||
| fireEvent.keyDown(cell, { key: 'c', [key]: true }); | ||
| expect(writeText.firstCall.args[0]).to.equal(['0\tNike', '1\tAdidas', ''].join('\r\n')); | ||
| }); | ||
| }); | ||
| }); | ||
| }); |