pass used languages down to language select field

oarepo · Oct 25, 2023 · e3021a5 · e3021a5
1 parent 9a805dc
commit e3021a5
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 19 deletions.
diff --git a/...ssets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx b/...ssets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx
@@ -12,8 +12,8 @@ export const I18nRichInputField = ({
   labelIcon,
   placeholder,
   editorConfig,
-  languageOptions,
   lngFieldWidth,
+  usedLanguages,
   ...uiProps
 }) => {
   return (
@@ -22,8 +22,8 @@ export const I18nRichInputField = ({
         fieldPath={`${fieldPath}.lang`}
         placeholder=""
         required
-        options={languageOptions}
         width={lngFieldWidth}
+        usedLanguages={usedLanguages}
       />
 
       <Form.Field width={13}>

diff --git a/...ssets/semantic-ui/js/oarepo_ui/forms/components/I18nTextInputField/I18nTextInputField.jsx b/...ssets/semantic-ui/js/oarepo_ui/forms/components/I18nTextInputField/I18nTextInputField.jsx
@@ -10,8 +10,8 @@ export const I18nTextInputField = ({
   optimized,
   labelIcon,
   placeholder,
-  languageOptions,
   lngFieldWidth,
+  usedLanguages,
   ...uiProps
 }) => {
   return (
@@ -21,7 +21,7 @@ export const I18nTextInputField = ({
         placeholder=""
         required
         width={lngFieldWidth}
-        options={languageOptions}
+        usedLanguages={usedLanguages}
       />
       <TextField
         // TODO: hacky fix for SUI alignment bug for case with

diff --git a/...ets/semantic-ui/js/oarepo_ui/forms/components/LanguageSelectField/LanguageSelectField.jsx b/...ets/semantic-ui/js/oarepo_ui/forms/components/LanguageSelectField/LanguageSelectField.jsx
@@ -1,9 +1,9 @@
 import * as React from "react";
-import { SelectField, FieldLabel } from "react-invenio-forms";
-import { useVocabularyOptions } from "@js/oarepo_ui";
+import { FieldLabel } from "react-invenio-forms";
+import { LocalVocabularySelectField } from "@js/oarepo_vocabularies";
 import { i18next } from "@translations/oarepo_ui/i18next";
-import { useFormikContext } from "formik";
 import PropTypes from "prop-types";
+import { getIn, useFormikContext } from "formik";
 
 export const LanguageSelectField = ({
   fieldPath,
@@ -13,26 +13,25 @@ export const LanguageSelectField = ({
   multiple,
   placeholder,
   clearable,
-  options,
+  usedLanguages,
   ...uiProps
 }) => {
-  const { options: languages } = useVocabularyOptions("languages");
+  const { values } = useFormikContext();
 
-  const { setFieldTouched } = useFormikContext();
   return (
-    <SelectField
+    <LocalVocabularySelectField
       deburr
-      onBlur={() => setFieldTouched(fieldPath)}
       fieldPath={fieldPath}
-      optimized
       placeholder={placeholder}
       required={required}
       clearable={clearable}
       multiple={multiple}
-      options={options ?? languages.all}
       label={<FieldLabel htmlFor={fieldPath} icon={labelIcon} label={label} />}
-      selectOnBlur={false}
-      fluid
+      optionsListName="languages"
+      onChange={({ e, data, formikProps }) => {
+        formikProps.form.setFieldValue(fieldPath, data.value);
+      }}
+      value={getIn(values, fieldPath, multiple ? [] : {})}
       {...uiProps}
     />
   );

diff --git a/...semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx b/...semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx
@@ -45,6 +45,7 @@ export const MultilingualTextInput = ({
           languages.all,
           array
         );
+
         return (
           <ArrayFieldItem
             indexPath={indexPath}
@@ -54,14 +55,13 @@ export const MultilingualTextInput = ({
             <Form.Field width={16}>
               {rich ? (
                 <I18nRichInputField
-                  key={availableLanguages.length}
                   fieldPath={fieldPathPrefix}
                   label={textFieldLabel}
                   labelIcon={textFieldIcon}
                   editorConfig={editorConfig}
                   optimized
                   required={required}
-                  languageOptions={availableLanguages}
+                  usedLanguages={array.map((v) => v.lang)}
                   lngFieldWidth={lngFieldWidth}
                   {...uiProps}
                 />
@@ -72,7 +72,7 @@ export const MultilingualTextInput = ({
                   label={textFieldLabel}
                   labelIcon={textFieldIcon}
                   required={required}
-                  languageOptions={availableLanguages}
+                  usedLanguages={array.map((v) => v.lang)}
                   lngFieldWidth={lngFieldWidth}
                   {...uiProps}
                 />