Skip to content

Commit

Permalink
no conditional rendering of modals to avoid bug in react-modal
Browse files Browse the repository at this point in the history
  • Loading branch information
elbotho committed Feb 15, 2024
1 parent 480d23b commit 540446e
Show file tree
Hide file tree
Showing 11 changed files with 179 additions and 208 deletions.
47 changes: 22 additions & 25 deletions packages/editor/src/plugins/audio/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,32 +57,29 @@ export const AudioToolbar = ({
>
{audioStrings.audioUrl} <FaIcon icon={faPencilAlt} />
</button>
{/* In the future we want a popovers per setting, but this is faster for now */}
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">{audioStrings.title}</h3>
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">{audioStrings.title}</h3>

<div className="mx-side mb-3">
<EditorInput
autoFocus
label={`${audioStrings.audioUrl}: `}
value={state.src.value}
onChange={(e) => {
state.src.set(e.target.value)
}}
inputWidth="100%"
width="100%"
onKeyDown={handleInputEnter}
placeholder="voca.ro/audio-id"
className="block"
/>
</div>
</ModalWithCloseButton>
) : null}
<div className="mx-side mb-3">
<EditorInput
autoFocus
label={`${audioStrings.audioUrl}: `}
value={state.src.value}
onChange={(e) => {
state.src.set(e.target.value)
}}
inputWidth="100%"
width="100%"
onKeyDown={handleInputEnter}
placeholder="voca.ro/audio-id"
className="block"
/>
</div>
</ModalWithCloseButton>
</>
}
pluginControls={<PluginDefaultTools pluginId={id} />}
Expand Down
2 changes: 0 additions & 2 deletions packages/editor/src/plugins/geogebra/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,8 +33,6 @@ export const GeogebraToolbar = ({
>
{geogebraStrings.chooseApplet} <FaIcon icon={faPencilAlt} />
</button>
{/* In the future we want a popovers per setting, but this is faster for now */}

<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
Expand Down
26 changes: 12 additions & 14 deletions packages/editor/src/plugins/image/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -33,21 +33,19 @@ export const ImageToolbar = (
>
{editorStrings.edtrIo.settings} <FaIcon icon={faCog} />
</button>
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">
{editorStrings.edtrIo.settings}: {imageStrings.title}
</h3>
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">
{editorStrings.edtrIo.settings}: {imageStrings.title}
</h3>

<div className="mx-side mb-3">
<SettingsModalControls state={props.state} />
</div>
</ModalWithCloseButton>
) : null}
<div className="mx-side mb-3">
<SettingsModalControls state={props.state} />
</div>
</ModalWithCloseButton>

<UploadButton {...props} />
</>
Expand Down
49 changes: 23 additions & 26 deletions packages/editor/src/plugins/injection/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -32,33 +32,30 @@ export const InjectionToolbar = ({
>
{injectionStrings.serloId} <FaIcon icon={faPencilAlt} />
</button>
{/* In the future we want a popovers per setting, but this is faster for now */}
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">{injectionStrings.title}</h3>
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">{injectionStrings.title}</h3>

<div className="mx-side mb-3">
<EditorInput
autoFocus
label={`${injectionStrings.serloId}: `}
placeholder={injectionStrings.placeholder}
inputMode="numeric"
pattern="\d+"
value={state.value}
onChange={(e) =>
state.set(e.target.value.replace(/[^0-9]/g, ''))
}
width="100%"
inputWidth="100%"
className="block"
/>
</div>
</ModalWithCloseButton>
) : null}
<div className="mx-side mb-3">
<EditorInput
autoFocus
label={`${injectionStrings.serloId}: `}
placeholder={injectionStrings.placeholder}
inputMode="numeric"
pattern="\d+"
value={state.value}
onChange={(e) =>
state.set(e.target.value.replace(/[^0-9]/g, ''))
}
width="100%"
inputWidth="100%"
className="block"
/>
</div>
</ModalWithCloseButton>
</>
}
pluginControls={<PluginDefaultTools pluginId={id} />}
Expand Down
24 changes: 11 additions & 13 deletions packages/editor/src/plugins/multimedia/toolbar/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,18 @@ export const MultimediaToolbar = ({ id, children }: MultimediaToolbarProps) => {
>
{editorStrings.edtrIo.settings} <FaIcon icon={faCog} />
</button>
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">
{editorStrings.edtrIo.settings}:{' '}
{editorStrings.plugins.multimedia.title}
</h3>
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">
{editorStrings.edtrIo.settings}:{' '}
{editorStrings.plugins.multimedia.title}
</h3>

<div className="mx-side mb-3">{children}</div>
</ModalWithCloseButton>
) : null}
<div className="mx-side mb-3">{children}</div>
</ModalWithCloseButton>
</>
}
pluginControls={<PluginDefaultTools pluginId={id} />}
Expand Down
16 changes: 7 additions & 9 deletions packages/editor/src/plugins/page-layout/toolbar/toolbar.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -36,15 +36,13 @@ export const PageLayoutToolbar = ({
>
{pageLayoutStrings.chooseRatio} <FaIcon icon={faPencilAlt} />
</button>
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<LayoutChooser {...state} />
</ModalWithCloseButton>
) : null}
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<LayoutChooser {...state} />
</ModalWithCloseButton>
</>
}
/>
Expand Down
36 changes: 17 additions & 19 deletions packages/editor/src/plugins/serlo-template-plugins/applet.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -86,25 +86,23 @@ function AppletTypeEditor(props: EditorPluginProps<AppletTypePluginState>) {
{content.render()}

<ToolbarMain showSubscriptionOptions {...props.state} />
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
autoFocus
label={appletStrings.seoTitle}
state={meta_title}
/>
<SettingsTextarea
label={appletStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
) : null}
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
autoFocus
label={appletStrings.seoTitle}
state={meta_title}
/>
<SettingsTextarea
label={appletStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
</>
)
}
36 changes: 17 additions & 19 deletions packages/editor/src/plugins/serlo-template-plugins/article.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -88,25 +88,23 @@ function ArticleTypeEditor(props: EditorPluginProps<ArticleTypePluginState>) {
<section itemProp="articleBody">{content.render()}</section>

<ToolbarMain showSubscriptionOptions {...props.state} />
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
label={articleStrings.seoTitle}
state={meta_title}
autoFocus
/>
<SettingsTextarea
label={articleStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
) : null}
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
label={articleStrings.seoTitle}
state={meta_title}
autoFocus
/>
<SettingsTextarea
label={articleStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
</>
)
}
Original file line number Diff line number Diff line change
Expand Up @@ -119,21 +119,19 @@ function CourseTypeEditor(props: EditorPluginProps<CourseTypePluginState>) {
</div>
<ToolbarMain showSubscriptionOptions {...props.state} />
</article>
{showSettingsModal ? (
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="max-w-xl"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
autoFocus
label={courseStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
) : null}
<ModalWithCloseButton
isOpen={showSettingsModal}
onCloseClick={() => setShowSettingsModal(false)}
className="max-w-xl"
>
<div className="mx-side mb-3 mt-12">
<SettingsTextarea
autoFocus
label={courseStrings.seoDesc}
state={meta_description}
/>
</div>
</ModalWithCloseButton>
</>
)

Expand Down
56 changes: 25 additions & 31 deletions packages/editor/src/plugins/solution/serlo-license-chooser.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -29,38 +29,32 @@ export function SerloLicenseChooser({ licenseId }: SerloLicenseChooserProps) {
<FaIcon icon={faCreativeCommons} />
</button>
</div>
{showLicenseModal ? (
<ModalWithCloseButton
isOpen={showLicenseModal}
onCloseClick={() => setShowLicenseModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">{solutionStrings.changeLicense}:</h3>
<ModalWithCloseButton
isOpen={showLicenseModal}
onCloseClick={() => setShowLicenseModal(false)}
className="top-8 max-w-xl translate-y-0 sm:top-1/3"
>
<h3 className="serlo-h3 mt-4">{solutionStrings.changeLicense}:</h3>

<div className="mx-side mb-3">
<select
className="serlo-button-light serlo-input-font-reset max-w-md"
onChange={(e) => {
if (licenseId.defined) licenseId.set(parseInt(e.target.value))
else licenseId.create(parseInt(e.target.value))
}}
value={licenseId.defined ? licenseId.value : undefined}
>
{licenses.map(({ id, title }) => {
return (
<option
className="bg-brand-200 text-brand"
key={id}
value={id}
>
{id} {title}
</option>
)
})}
</select>
</div>
</ModalWithCloseButton>
) : null}
<div className="mx-side mb-3">
<select
className="serlo-button-light serlo-input-font-reset max-w-md"
onChange={(e) => {
if (licenseId.defined) licenseId.set(parseInt(e.target.value))
else licenseId.create(parseInt(e.target.value))
}}
value={licenseId.defined ? licenseId.value : undefined}
>
{licenses.map(({ id, title }) => {
return (
<option className="bg-brand-200 text-brand" key={id} value={id}>
{id} {title}
</option>
)
})}
</select>
</div>
</ModalWithCloseButton>
</>
)
}
Loading

0 comments on commit 540446e

Please sign in to comment.