fix: properly validate all locales in mobile mode (StaticJsCMS#951)

Net-Slayer · Oct 26, 2023 · fa99ed7 · fa99ed7
1 parent 7a999ee
commit fa99ed7
Showing 1 changed file with 13 additions and 44 deletions.
diff --git a/packages/core/src/components/entry-editor/EditorInterface.tsx b/packages/core/src/components/entry-editor/EditorInterface.tsx
@@ -303,7 +303,7 @@ const EditorInterface = ({
  const editorLocale = useMemo(
  () =>
  locales
- ?.filter(l => l !== defaultLocale)
+ ?.filter(locale => isSmallScreen || locale !== defaultLocale)
  .map(locale => (
  <div
  key={locale}
@@ -319,9 +319,10 @@ const EditorInterface = ({
  fieldsErrors={fieldsErrors}
  locale={locale}
  onLocaleChange={handleLocaleChange}
+ allowDefaultLocale={isSmallScreen}
  submitted={submitted}
  canChangeLocale
- context="i18nSplit"
+ context={!isSmallScreen ? 'i18nSplit' : undefined}
  hideBorder
  t={t}
  />
@@ -334,6 +335,7 @@ const EditorInterface = ({
  fields,
  fieldsErrors,
  handleLocaleChange,
+ isSmallScreen,
  locales,
  selectedLocale,
  submitted,
@@ -347,38 +349,6 @@ const EditorInterface = ({
  [collectHasI18n, collection, defaultLocale, entry, selectedLocale],
  );
 
- const mobileLocaleEditor = useMemo(
- () =>
- isSmallScreen ? (
- <div key={selectedLocale} className={classes['mobile-i18n']}>
- <EditorControlPane
- collection={collection}
- entry={entry}
- fields={fields}
- fieldsErrors={fieldsErrors}
- locale={selectedLocale}
- onLocaleChange={handleLocaleChange}
- allowDefaultLocale
- submitted={submitted}
- canChangeLocale
- hideBorder
- t={t}
- />
- </div>
- ) : null,
- [
- collection,
- entry,
- fields,
- fieldsErrors,
- handleLocaleChange,
- isSmallScreen,
- selectedLocale,
- submitted,
- t,
- ],
- );
-
  const editorWithPreview = (
  <div
  className={classNames(classes.root, editorSize === EDITOR_SIZE_COMPACT && classes.compact)}
@@ -396,16 +366,15 @@ const EditorInterface = ({
  </div>
  );
 
- const editorSideBySideLocale = (
- <>
- <div className={classNames(classes.root, classes['wrapper-i18n-side-by-side'])}>
- <ScrollSyncPane>{editor}</ScrollSyncPane>
- <ScrollSyncPane>
- <>{editorLocale}</>
- </ScrollSyncPane>
- </div>
- {mobileLocaleEditor}
- </>
+ const editorSideBySideLocale = isSmallScreen ? (
+ <>{editorLocale}</>
+ ) : (
+ <div className={classNames(classes.root, classes['wrapper-i18n-side-by-side'])}>
+ <ScrollSyncPane>{editor}</ScrollSyncPane>
+ <ScrollSyncPane>
+ <>{editorLocale}</>
+ </ScrollSyncPane>
+ </div>
  );
 
  const summary = useMemo(() => selectEntryCollectionTitle(collection, entry), [collection, entry]);