diff --git a/oarepo_ui/ext.py b/oarepo_ui/ext.py index 2210bc12..578617b3 100644 --- a/oarepo_ui/ext.py +++ b/oarepo_ui/ext.py @@ -97,18 +97,6 @@ def catalog(self): return self._catalog_config(self._catalog, self.templates.jinja_env) def _catalog_config(self, catalog, env): - - # monkeypatch component - see https://github.com/jpsca/jinjax/issues/32 - from markupsafe import Markup - from jinjax.component import Component - - def render(self, **kwargs): - assert self.tmpl, f"Component {self.name} has no template" - return Markup(self.tmpl.render(**kwargs).strip()) - render.__name__ = 'render_patched_by_oarepo_ui' - Component.render = render - # monkeypatch end - context = {} env.policies.setdefault("json.dumps_kwargs", {}).setdefault("default", str) self.app.update_template_context(context) diff --git a/oarepo_ui/templates/oarepo_ui/javascript.html b/oarepo_ui/templates/oarepo_ui/javascript.html index 762d0744..70abc513 100644 --- a/oarepo_ui/templates/oarepo_ui/javascript.html +++ b/oarepo_ui/templates/oarepo_ui/javascript.html @@ -1,5 +1,3 @@ {% include "invenio_theme/javascript.html" %} - +{{ webpack['oarepo_ui_theme.js'] }} diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx index 06e7d413..3ca2101b 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/I18nRichInputField/I18nRichInputField.jsx @@ -20,7 +20,6 @@ export const I18nRichInputField = ({ { - const { values } = useFormikContext(); return ( { formikProps.form.setFieldValue(fieldPath, data.value); }} - value={getIn(values, fieldPath, multiple ? [] : '')} {...uiProps} /> ); diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx index 050ac034..7bb552f9 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/components/MultilingualTextInput/MultilingualTextInput.jsx @@ -6,8 +6,11 @@ import { I18nTextInputField, I18nRichInputField, ArrayFieldItem, + useDefaultLocale, + useFormFieldValue, } from "@js/oarepo_ui"; import { i18next } from "@translations/oarepo_ui/i18next"; +import { useFormikContext, getIn } from "formik"; export const MultilingualTextInput = ({ fieldPath, @@ -24,10 +27,21 @@ export const MultilingualTextInput = ({ lngFieldWidth, ...uiProps }) => { + const { defaultLocale } = useDefaultLocale(); + const { values } = useFormikContext(); + const { usedSubValues, defaultNewValue } = useFormFieldValue({ + defaultValue: defaultLocale, + fieldPath, + subValuesPath: "lang", + }); + const value = getIn(values, fieldPath); + const usedLanguages = usedSubValues(value); + const newValue = defaultNewValue(emptyNewInput, usedLanguages); + return ( @@ -52,7 +66,7 @@ export const MultilingualTextInput = ({ editorConfig={editorConfig} optimized required={required} - usedLanguages={array.map((v) => v.lang)} + usedLanguages={usedLanguages} lngFieldWidth={lngFieldWidth} {...uiProps} /> @@ -62,7 +76,7 @@ export const MultilingualTextInput = ({ label={textFieldLabel} labelIcon={textFieldIcon} required={required} - usedLanguages={array.map((v) => v.lang)} + usedLanguages={usedLanguages} lngFieldWidth={lngFieldWidth} {...uiProps} /> diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js index c28b373d..6149cb54 100644 --- a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/forms/hooks.js @@ -2,6 +2,8 @@ import * as React from "react"; import { FormConfigContext } from "./contexts"; import { OARepoDepositApiClient, OARepoDepositSerializer } from "../api"; import { useFormikContext } from "formik"; +import _get from "lodash/get"; +import _set from "lodash/set"; import _omit from "lodash/omit"; import _pick from "lodash/pick"; import _isEmpty from "lodash/isEmpty"; @@ -18,6 +20,14 @@ export const useFormConfig = () => { return context; }; +export const useDefaultLocale = () => { + const { + formConfig: { default_locale }, + } = useFormConfig(); + + return { defaultLocale: default_locale } +} + export const useVocabularyOptions = (vocabularyType) => { const { formConfig: { vocabularies }, @@ -35,6 +45,16 @@ export const useConfirmationModal = () => { return { isModalOpen, handleCloseModal, handleOpenModal }; }; +export const useFormFieldValue = ({ fieldPath, subValuesPath, defaultValue, subValuesUnique = true }) => { + const usedSubValues = (value) => + value && typeof Array.isArray(value) + ? value.map((val) => _get(val, "lang")) || [] + : []; + const defaultNewValue = (initialVal, usedSubValues = []) => _set({ ...initialVal }, subValuesPath, !usedSubValues?.includes(defaultValue) || !subValuesUnique ? defaultValue : "") + + return { usedSubValues, defaultNewValue } +} + export const useDepositApiClient = ( baseApiClient, serializer, @@ -71,7 +91,7 @@ export const useDepositApiClient = ( ? new baseApiClient(createUrl, recordSerializer) : new OARepoDepositApiClient(createUrl, recordSerializer); - async function save() { + async function save () { let response; setSubmitting(true); @@ -131,7 +151,7 @@ export const useDepositApiClient = ( } } - async function publish() { + async function publish () { // call save and if save returns false, exit const saveResult = await save(); if (!saveResult) return; @@ -176,11 +196,11 @@ export const useDepositApiClient = ( } } - async function read(recordUrl) { + async function read (recordUrl) { return await apiClient.readDraft({ self: recordUrl }); } - async function _delete(redirectUrl) { + async function _delete (redirectUrl) { if (!redirectUrl) throw new Error( "You must provide url where to be redirected after deleting a draft" diff --git a/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/theme.js b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/theme.js new file mode 100644 index 00000000..66b5dba6 --- /dev/null +++ b/oarepo_ui/theme/assets/semantic-ui/js/oarepo_ui/theme.js @@ -0,0 +1,3 @@ +import $ from "jquery"; + +$('.ui.multilingual-tabs>.menu>.item').tab(); \ No newline at end of file diff --git a/oarepo_ui/theme/webpack.py b/oarepo_ui/theme/webpack.py index 18c24db0..eb7b4b0d 100644 --- a/oarepo_ui/theme/webpack.py +++ b/oarepo_ui/theme/webpack.py @@ -29,6 +29,7 @@ "oarepo_ui": "./js/oarepo_ui/index.js", "oarepo_ui_search": "./js/oarepo_ui/search/index.js", "oarepo_ui_forms": "./js/oarepo_ui/forms/index.js", + "oarepo_ui_theme": "./js/oarepo_ui/theme.js" }, dependencies={ "@tanstack/react-query": "^4.32.0", diff --git a/setup.cfg b/setup.cfg index a1a64085..d45831c7 100644 --- a/setup.cfg +++ b/setup.cfg @@ -1,6 +1,6 @@ [metadata] name = oarepo-ui -version = 5.0.79 +version = 5.0.80 description = UI module for invenio 3.5+ long_description = file: README.md long_description_content_type = text/markdown