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

update the svg icon #3

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

update the svg icon #3

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7ad4784
update the svg icon
SamuelGHill Jul 19, 2023
ecda9d1
prettify
SamuelGHill Jul 19, 2023
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
58 changes: 41 additions & 17 deletions src/useExporterPlugin.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import {useMemo, useRef} from 'react'
import type {ComponentType} from 'react'
import CodeExporter from './CodeExporter'
import {useMemo, useRef} from 'react';
import type {ComponentType} from 'react';
import CodeExporter from './CodeExporter';

// Copied from `@graphiql/react` to avoid adding a dependency for a single type definition
type GraphiQLPlugin = {
Expand All @@ -21,23 +21,47 @@ type GraphiQLPlugin = {
};

function useExporterPlugin(props: any) {
const propsRef = useRef(props)
propsRef.current = props
const propsRef = useRef(props);
propsRef.current = props;
return useMemo<GraphiQLPlugin>(
() => ({
title: 'Connect',
icon: () => (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
>
<svg viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9 8.25H7.5a2.25 2.25 0 00-2.25 2.25v9a2.25 2.25 0 002.25 2.25h9a2.25 2.25 0 002.25-2.25v-9a2.25 2.25 0 00-2.25-2.25H15m0-3l-3-3m0 0l-3 3m3-3V15"
d="M19.0107 43V26.2137"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M37.1064 30.77C38.2138 30.4927 39.2468 29.9754 40.1322 29.2549C41.0177 28.5343 41.734 27.628 42.2306 26.6001C42.7272 25.5722 42.9919 24.4477 43.0061 23.3062C43.0202 22.1647 42.7833 21.034 42.3123 19.9941C41.8413 18.9542 41.1475 18.0305 40.2802 17.2883C39.4128 16.5461 38.3929 16.0035 37.2927 15.6988C36.1926 15.3942 35.0389 15.335 33.9133 15.5254C32.7876 15.7157 31.7176 16.1511 30.7788 16.8006C30.4344 14.9463 29.6574 13.1994 28.5109 11.7018C27.3644 10.2042 25.8809 8.99815 24.1807 8.1817C22.4805 7.36524 20.6118 6.96137 18.7262 7.00291C16.8406 7.04444 14.9914 7.5302 13.3288 8.42073C11.6663 9.31126 10.2372 10.5814 9.15782 12.128C8.07842 13.6747 7.37908 15.4541 7.11665 17.3218C6.85421 19.1895 7.03607 21.0928 7.64745 22.877C8.25883 24.6612 9.28248 26.276 10.6352 27.5902"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M23.8069 31.0098L19.0108 26.2137L14.2147 31.0098"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M31.001 26.2137V43"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
<path
d="M26.205 38.2039L31.001 42.9999L35.7971 38.2039"
stroke="currentColor"
stroke-width="2"
stroke-linecap="round"
stroke-linejoin="round"
/>
</svg>
),
Expand All @@ -46,7 +70,7 @@ function useExporterPlugin(props: any) {
),
}),
[],
)
);
}

export {useExporterPlugin}
export {useExporterPlugin};