Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Add slot for additional buttons #412

Merged
merged 10 commits into from
Mar 16, 2022
+75 −9
Merged

feat: Add slot for additional buttons #412

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
80ea274
fix missing type
PeterDraex Mar 15, 2022
d0935dd
add additionalActions slot
PeterDraex Mar 15, 2022
5b45036
rename and change type
PeterDraex Mar 15, 2022
36fa5b3
add docs
PeterDraex Mar 15, 2022
feb8410
Update docs
PeterDraex Mar 15, 2022
5b0c532
rename additionalButtons to actionsChildren
PeterDraex Mar 15, 2022
407ccce
Update sandpack-react/src/components/Preview/index.tsx
PeterDraex Mar 15, 2022
246979b
Update Preview.stories.tsx
danilowoz Mar 16, 2022
dad89b6
Update PULL_REQUEST_TEMPLATE.md
danilowoz Mar 16, 2022
4987877
Update components.md
danilowoz Mar 16, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 6 additions & 2 deletions sandpack-react/src/components/Preview/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import { useClasser } from "@code-hike/classer";
import * as React from "react";

import type { SandpackMessage } from "../../../../sandpack-client";
PeterDraex marked this conversation as resolved.
Show resolved Hide resolved
import { ErrorOverlay } from "../../common/ErrorOverlay";
import { LoadingOverlay } from "../../common/LoadingOverlay";
import { OpenInCodeSandboxButton } from "../../common/OpenInCodeSandboxButton";
Expand Down Expand Up @@ -32,6 +33,7 @@ export interface PreviewProps {
showOpenInCodeSandbox?: boolean;
showRefreshButton?: boolean;
showSandpackErrorOverlay?: boolean;
additionalButtons?: JSX.Element;
PeterDraex marked this conversation as resolved.
Show resolved Hide resolved
}

export { RefreshButton };
Expand All @@ -45,6 +47,7 @@ export const SandpackPreview = ({
showRefreshButton = true,
showOpenInCodeSandbox = true,
showSandpackErrorOverlay = true,
additionalButtons = <></>,
viewportSize = "auto",
viewportOrientation = "portrait",
}: PreviewProps): JSX.Element => {
Expand All @@ -60,7 +63,7 @@ export const SandpackPreview = ({
openInCSBRegisteredRef,
loadingScreenRegisteredRef,
} = sandpack;

const c = useClasser("sp");
const clientId = React.useRef<string>(generateRandomId());
const iframeRef = React.useRef<HTMLIFrameElement | null>(null);
Expand All @@ -77,7 +80,7 @@ export const SandpackPreview = ({

registerBundler(iframeElement, clientIdValue);

const unsubscribe = listen((message) => {
const unsubscribe = listen((message: SandpackMessage) => {
if (message.type === "resize") {
setComputedAutoHeight(message.height);
}
Expand Down Expand Up @@ -129,6 +132,7 @@ export const SandpackPreview = ({
{showSandpackErrorOverlay ? <ErrorOverlay /> : null}

<div className={c("preview-actions")}>
{additionalButtons}
{!showNavigator && showRefreshButton && status === "running" ? (
<RefreshButton clientId={clientId.current} />
) : null}
Expand Down
37 changes: 37 additions & 0 deletions website/docs/docs/advanced-usage/components.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,6 +111,43 @@ There's nothing stopping you from rendering multiple previews in the same `Provi
</SandpackLayout>
</SandpackProvider>

## Additional buttons
PeterDraex marked this conversation as resolved.
Show resolved Hide resolved
The `<SandpackPreview />` component also allows you to add additional buttons to the preview area.

```jsx
<SandpackProvider template="react">
<SandpackLayout>
<SandpackPreview
additionalButtons={
<button
className="sp-button"
style={{ padding: 'var(--sp-space-1) var(--sp-space-3)' }}
onClick={() => window.alert('Bug reported!')}>
Report bug
</button>
}
/>
<SandpackCodeEditor />
</SandpackLayout>
</SandpackProvider>
```

<SandpackProvider template="react">
danilowoz marked this conversation as resolved.
Show resolved Hide resolved
<SandpackLayout>
<SandpackPreview
additionalButtons={
<button
className="sp-button"
style={{ padding: 'var(--sp-space-1) var(--sp-space-3)' }}
onClick={() => window.alert('Bug reported!')}>
Report bug
</button>
}
/>
<SandpackCodeEditor />
</SandpackLayout>
</SandpackProvider>

## Code Editor

The `SandpackCodeEditor` component renders a wrapper over [`codemirror`](https://github.com/codemirror/codemirror.next), a lightweight code editor we use inside `sandpack`.
Expand Down