Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add ChangeSelection action, update Jest config
- Loading branch information
Showing
16 changed files
with
2,067 additions
and
1,363 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
Large diffs are not rendered by default.
Oops, something went wrong.
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
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -16,4 +16,4 @@ export default { | |
| }, | ||
| }; | ||
|
|
||
| export const DragNDropExample = () => null; | ||
| export const CustomStyling = () => null; | ||
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,25 @@ | ||
| ## Listening to selection changes | ||
|
|
||
| Every time user changes the file selection, Chonky dispatches the | ||
| `ChonkyActions.ChangeSelection` action. The data for this action contains an | ||
| array of `FileData` objects corresponding to selected files. For example, to print | ||
| the names of all files in the selection, you can put the following code in your file | ||
| action handler: | ||
|
|
||
| ```tsx | ||
| // Define the action handler | ||
| const handleFileAction = (action: FileAction, data: FileActionData) => { | ||
| if (action.id === ChonkyActions.ChangeSelection.id) { | ||
| const selectedFiles = data.files!; | ||
| const selectedFileNames = selectedFiles.map(f => f.name); | ||
| console.log('Selected file names:', selectedFileNames) | ||
| } | ||
| }; | ||
|
|
||
| // Pass the action handler to Chonky | ||
| <FileBrowser files={[]} onFileAction={handleFileAction}> | ||
| // ... | ||
| </FileBrowser> | ||
| ``` | ||
|
|
||
| See *Using file actions* section for more details about file actions. |
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,68 @@ | ||
| import 'chonky/style/main.css'; | ||
|
|
||
| import { | ||
| ChonkyActions, | ||
| FileAction, | ||
| FileActionData, | ||
| FileArray, | ||
| FileBrowser, | ||
| FileData, | ||
| FileList, | ||
| FileSearch, | ||
| FileToolbar, | ||
| } from 'chonky'; | ||
| import React from 'react'; | ||
|
|
||
| import { createDocsObject, StoryCategories } from '../story-helpers'; | ||
| // @ts-ignore | ||
| // eslint-disable-next-line | ||
| import markdown from './10-Selections.md'; | ||
|
|
||
| const category = StoryCategories.FileBrowserBasics; | ||
| const title = 'Managing file selections'; | ||
|
|
||
| // eslint-disable-next-line import/no-default-export | ||
| export default { | ||
| title: `${category}/${title}`, | ||
| parameters: { | ||
| docs: createDocsObject({ category, title, markdown }), | ||
| }, | ||
| }; | ||
|
|
||
| export const SelectionsExample = () => { | ||
| const files = React.useMemo<FileArray>( | ||
| () => [ | ||
| { id: 'AswQ', name: '01.psd' }, | ||
| { id: 'SdaW', name: '02.jpg' }, | ||
| { id: 'VsWq', name: '03.pdf' }, | ||
| { id: 'MsdR', name: '04.pub' }, | ||
| ], | ||
| [] | ||
| ); | ||
| const [selectedFiles, setSelectedFiles] = React.useState<FileData[]>([]); | ||
| const handleFileAction = (action: FileAction, data: FileActionData) => { | ||
| if (action.id === ChonkyActions.ChangeSelection.id) { | ||
| setSelectedFiles(data.files!); | ||
| } | ||
| }; | ||
|
|
||
| const selectedFilesString = | ||
| selectedFiles.length === 0 | ||
| ? 'None' | ||
| : selectedFiles.map((f) => f.name).join(', '); | ||
| return ( | ||
| <div style={{ height: 500 }}> | ||
| <div style={{ fontSize: 20 }}>Selected files: {selectedFilesString}</div> | ||
| <br /> | ||
| <FileBrowser | ||
| files={files} | ||
| onFileAction={handleFileAction} | ||
| enableDragAndDrop={true} | ||
| > | ||
| <FileToolbar /> | ||
| <FileSearch /> | ||
| <FileList /> | ||
| </FileBrowser> | ||
| </div> | ||
| ); | ||
| }; |
Oops, something went wrong.