3
3
*/
4
4
5
5
import * as React from 'react' ;
6
- import { FileTabs , useSandpack } from '@codesandbox/sandpack-react' ;
6
+ import {
7
+ FileTabs ,
8
+ useSandpack ,
9
+ useSandpackNavigation ,
10
+ } from '@codesandbox/sandpack-react' ;
7
11
import { OpenInCodeSandboxButton } from './OpenInCodeSandboxButton' ;
8
12
import { ResetButton } from './ResetButton' ;
9
13
import { DownloadButton } from './DownloadButton' ;
10
14
import { FilesDropdown } from './FilesDropdown' ;
11
15
12
- export function NavigationBar ( {
13
- showDownload,
14
- onReset,
15
- } : {
16
- showDownload : boolean ;
17
- onReset : ( ) => void ;
18
- } ) {
16
+ export function NavigationBar ( { showDownload} : { showDownload : boolean } ) {
19
17
const { sandpack} = useSandpack ( ) ;
20
18
const [ dropdownActive , setDropdownActive ] = React . useState ( false ) ;
21
- const { openPaths} = sandpack ;
19
+ const { openPaths, clients} = sandpack ;
20
+ const clientId = Object . keys ( clients ) [ 0 ] ;
21
+ const { refresh} = useSandpackNavigation ( clientId ) ;
22
22
23
23
const resizeHandler = React . useCallback ( ( ) => {
24
24
const width = window . innerWidth || document . documentElement . clientWidth ;
@@ -41,6 +41,11 @@ export function NavigationBar({
41
41
return ;
42
42
} , [ openPaths . length , resizeHandler ] ) ;
43
43
44
+ const handleReset = ( ) => {
45
+ sandpack . resetAllFiles ( ) ;
46
+ refresh ( ) ;
47
+ } ;
48
+
44
49
return (
45
50
< div className = "bg-wash dark:bg-card-dark flex justify-between items-center relative z-10 border-b border-border dark:border-border-dark rounded-t-lg rounded-b-none" >
46
51
< div className = "px-4 lg:px-6" >
@@ -50,8 +55,8 @@ export function NavigationBar({
50
55
className = "px-3 flex items-center justify-end flex-grow text-right"
51
56
translate = "yes" >
52
57
{ showDownload && < DownloadButton /> }
53
- < ResetButton onReset = { onReset } />
54
- < OpenInCodeSandboxButton className = "ml-2 md:ml-4" />
58
+ < ResetButton onReset = { handleReset } />
59
+ < OpenInCodeSandboxButton />
55
60
</ div >
56
61
</ div >
57
62
) ;
0 commit comments