Fix render vocabulary field

.gitignore

@@ -41,4 +41,6 @@ e2e/example/.next
 # Guillotina
 .python-version
 *.egg-info
-__pycache__
+__pycache__
+
+.vscode

CHANGELOG.md

@@ -1,3 +1,7 @@
+0.24.1
+------
+- fix: Render vocabulary field
+
 0.24.0
 ------
  - feat: Implement and update some guillotina behaviors

e2e/vite_example/src/App.tsx

@@ -127,7 +127,6 @@ function App() {
     return null
   }
 
-  console.log('language', navigator.language)
   return (
     <ClientProvider client={clientInstance}>
       <Layout auth={auth} onLogout={onLogout}>

package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.24.0",
+  "version": "0.24.1",
   "repository": {
     "type": "git",
     "url": "[email protected]:guillotinaweb/guillotina_react.git"

src/guillo-gmi/components/fields/renderField.js

@@ -1,15 +1,16 @@
 import React from 'react'
 import { DownloadField } from './downloadField'
+import { useIntl } from 'react-intl'
 import { useVocabulary } from '../../hooks/useVocabulary'
 import { get } from '../../lib/utils'
-import { useIntl } from 'react-intl'
+
 const plain = ['string', 'number', 'boolean']
 
-export function RenderField({ value, Widget }) {
+export function RenderField({ value, Widget, schema }) {
   if (value === null || value === undefined) return ''
 
   if (Widget) {
-    return <Widget value={value} />
+    return <Widget value={value} schema={schema} />
   }
 
   const type = typeof value
@@ -40,13 +41,52 @@ const FieldValue = ({ field, value }) => (
   </div>
 )
 
-export function RenderFieldComponent({ schema, field, val, modifyContent }) {
-  const intl = useIntl()
-  const DEFAULT_VALUE_EDITABLE_FIELD = intl.formatMessage({
+const DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- '
+const getDefaultValueEditableField = (intl) => {
+  return intl.formatMessage({
     id: 'default_value_editable_field',
     defaultMessage: 'Click to edit',
   })
-  const DEFAULT_VALUE_NO_EDITABLE_FIELD = ' -- '
+}
+
+export const VocabularyRenderField = ({ schema, value, modifyContent }) => {
+  const intl = useIntl()
+  const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl)
+
+  const vocabularyName = schema?.items?.vocabularyName || schema?.vocabularyName
+  const vocabulary = useVocabulary(vocabularyName)
+
+  const getRenderProps = () => {
+    const renderProps = {
+      value:
+        value ??
+        (modifyContent
+          ? DEFAULT_VALUE_EDITABLE_FIELD
+          : DEFAULT_VALUE_NO_EDITABLE_FIELD),
+    }
+
+    if (schema?.vocabularyName) {
+      const vocabularyValue = get(vocabulary, 'data.items', []).find(
+        (item) => item.token === value
+      )
+      renderProps['value'] = vocabularyValue?.title ?? ''
+    } else {
+      renderProps['value'] = (renderProps['value'] ?? []).map((value) => {
+        return (
+          get(vocabulary, 'data.items', []).find((item) => item.token === value)
+            ?.title ?? ''
+        )
+      })
+    }
+
+    return renderProps
+  }
+  return <RenderField {...getRenderProps()} />
+}
+
+export function RenderFieldComponent({ schema, field, val, modifyContent }) {
+  const intl = useIntl()
+  const DEFAULT_VALUE_EDITABLE_FIELD = getDefaultValueEditableField(intl)
 
   const getRenderProps = () => {
     const renderProps = {
@@ -67,23 +107,8 @@ export function RenderFieldComponent({ schema, field, val, modifyContent }) {
     } else if (val && schema?.type === 'datetime') {
       renderProps['value'] = new Date(val).toLocaleString()
     } else if (schema?.items?.vocabularyName || schema?.vocabularyName) {
-      const vocabularyName =
-        schema?.items?.vocabularyName || schema?.vocabularyName
-      const vocabulary = useVocabulary(vocabularyName)
-      if (schema?.vocabularyName) {
-        const vocabularyValue = get(vocabulary, 'data.items', []).find(
-          (item) => item.token === val
-        )
-        renderProps['value'] = vocabularyValue?.title ?? ''
-      } else {
-        renderProps['value'] = (renderProps['value'] ?? []).map((value) => {
-          return (
-            get(vocabulary, 'data.items', []).find(
-              (item) => item.token === value
-            )?.title ?? ''
-          )
-        })
-      }
+      renderProps['Widget'] = VocabularyRenderField
+      renderProps['schema'] = schema
     }
 
     return renderProps

src/guillo-gmi/components/index.js

@@ -17,6 +17,7 @@ export * from './input/dropdown'
 export * from './fields/editableField'
 export * from './fields/renderField'
 export * from './fields/downloadField'
+export * from './fields/editComponent'
 
 export * from './behaviors/iattachment'
 export * from './behaviors/imultiattachment'