-
Notifications
You must be signed in to change notification settings - Fork 26
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Refactor UI code so it does not fail when exporting (#137)
- Loading branch information
1 parent
7895daa
commit df30dfd
Showing
11 changed files
with
231 additions
and
156 deletions.
There are no files selected for viewing
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| import { Button } from '@create-figma-plugin/ui'; | ||
| import { FormProvider, useForm } from 'react-hook-form'; | ||
|
|
||
| import { Stack } from '@ui/components/Stack'; | ||
| import { useFigma } from '@ui/context'; | ||
|
|
||
| import { MissingFontsSection } from './MissingFontsSection'; | ||
|
|
||
| export type FormValues = Record<string, string>; | ||
|
|
||
| export const ExportForm = () => { | ||
| const { cancel, exportPenpot } = useFigma(); | ||
| const methods = useForm<FormValues>(); | ||
|
|
||
| return ( | ||
| <FormProvider {...methods}> | ||
| <form onSubmit={methods.handleSubmit(exportPenpot)}> | ||
| <Stack> | ||
| <MissingFontsSection /> | ||
| <Stack space="xsmall" direction="row"> | ||
| <Button type="submit" fullWidth> | ||
| Export to Penpot | ||
| </Button> | ||
| <Button secondary onClick={cancel} fullWidth> | ||
| Cancel | ||
| </Button> | ||
| </Stack> | ||
| </Stack> | ||
| </form> | ||
| </FormProvider> | ||
| ); | ||
| }; |
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 |
|---|---|---|
| @@ -1,114 +1,19 @@ | ||
| import { Banner, Button, IconInfo32, LoadingIndicator } from '@create-figma-plugin/ui'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { FormProvider, useForm } from 'react-hook-form'; | ||
| import { LoadingIndicator } from '@create-figma-plugin/ui'; | ||
|
|
||
| import { Stack } from '@ui/components/Stack'; | ||
| import { parse } from '@ui/parser'; | ||
| import { PenpotDocument } from '@ui/types'; | ||
| import { useFigma } from '@ui/context'; | ||
|
|
||
| import { ExportForm } from './ExportForm'; | ||
| import { ExporterProgress } from './ExporterProgress'; | ||
| import { MissingFontsSection } from './MissingFontsSection'; | ||
|
|
||
| type FormValues = Record<string, string>; | ||
| import { PluginReload } from './PluginReload'; | ||
|
|
||
| export const PenpotExporter = () => { | ||
| const [missingFonts, setMissingFonts] = useState<string[]>(); | ||
| const [needsReload, setNeedsReload] = useState(false); | ||
| const [loading, setLoading] = useState(true); | ||
| const [exporting, setExporting] = useState(false); | ||
| const [downloading, setDownloading] = useState(false); | ||
| const methods = useForm<FormValues>(); | ||
|
|
||
| methods.getValues(); | ||
|
|
||
| const onMessage = (event: MessageEvent<{ pluginMessage: { type: string; data: unknown } }>) => { | ||
| if (event.data.pluginMessage?.type == 'PENPOT_DOCUMENT') { | ||
| setDownloading(true); | ||
|
|
||
| const document = event.data.pluginMessage.data as PenpotDocument; | ||
| const file = parse(document); | ||
|
|
||
| file.export(); | ||
| } else if (event.data.pluginMessage?.type == 'CUSTOM_FONTS') { | ||
| setMissingFonts(event.data.pluginMessage.data as string[]); | ||
| setLoading(false); | ||
| setNeedsReload(false); | ||
| } else if (event.data.pluginMessage?.type == 'CHANGES_DETECTED') { | ||
| setNeedsReload(true); | ||
| } | ||
| }; | ||
|
|
||
| const exportPenpot = (data: FormValues) => { | ||
| setExporting(true); | ||
|
|
||
| parent.postMessage( | ||
| { | ||
| pluginMessage: { | ||
| type: 'export', | ||
| data | ||
| } | ||
| }, | ||
| '*' | ||
| ); | ||
| }; | ||
|
|
||
| const cancel = () => { | ||
| parent.postMessage({ pluginMessage: { type: 'cancel' } }, '*'); | ||
| }; | ||
|
|
||
| const reload = () => { | ||
| setLoading(true); | ||
| parent.postMessage({ pluginMessage: { type: 'reload' } }, '*'); | ||
| }; | ||
|
|
||
| useEffect(() => { | ||
| window.addEventListener('message', onMessage); | ||
|
|
||
| parent.postMessage({ pluginMessage: { type: 'ready' } }, '*'); | ||
|
|
||
| return () => { | ||
| window.removeEventListener('message', onMessage); | ||
| }; | ||
| }, []); | ||
| const { loading, needsReload, exporting } = useFigma(); | ||
|
|
||
| if (loading) return <LoadingIndicator />; | ||
|
|
||
| if (exporting) return <ExporterProgress downloading={downloading} />; | ||
| if (exporting) return <ExporterProgress />; | ||
|
|
||
| if (needsReload) { | ||
| return ( | ||
| <Stack space="small"> | ||
| <Banner icon={<IconInfo32 />}> | ||
| Changes detected. Please reload the plug-in to ensure all modifications are included in | ||
| the exported file. | ||
| </Banner> | ||
| <Stack space="xsmall" direction="row"> | ||
| <Button onClick={reload} fullWidth> | ||
| Reload | ||
| </Button> | ||
| <Button secondary onClick={cancel} fullWidth> | ||
| Cancel | ||
| </Button> | ||
| </Stack> | ||
| </Stack> | ||
| ); | ||
| } | ||
| if (needsReload) return <PluginReload />; | ||
|
|
||
| return ( | ||
| <FormProvider {...methods}> | ||
| <form onSubmit={methods.handleSubmit(exportPenpot)}> | ||
| <Stack> | ||
| <MissingFontsSection fonts={missingFonts} /> | ||
| <Stack space="xsmall" direction="row"> | ||
| <Button type="submit" fullWidth> | ||
| Export to Penpot | ||
| </Button> | ||
| <Button secondary onClick={cancel} fullWidth> | ||
| Cancel | ||
| </Button> | ||
| </Stack> | ||
| </Stack> | ||
| </form> | ||
| </FormProvider> | ||
| ); | ||
| return <ExportForm />; | ||
| }; |
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 @@ | ||
| import { Banner, Button, IconInfo32 } from '@create-figma-plugin/ui'; | ||
|
|
||
| import { Stack } from '@ui/components/Stack'; | ||
| import { useFigma } from '@ui/context'; | ||
|
|
||
| export const PluginReload = () => { | ||
| const { reload, cancel } = useFigma(); | ||
|
|
||
| return ( | ||
| <Stack space="small"> | ||
| <Banner icon={<IconInfo32 />}> | ||
| Changes detected. Please reload the plug-in to ensure all modifications are included in the | ||
| exported file. | ||
| </Banner> | ||
| <Stack space="xsmall" direction="row"> | ||
| <Button onClick={reload} fullWidth> | ||
| Reload | ||
| </Button> | ||
| <Button secondary onClick={cancel} fullWidth> | ||
| Cancel | ||
| </Button> | ||
| </Stack> | ||
| </Stack> | ||
| ); | ||
| }; |
Oops, something went wrong.