Feat: Add label to input list (#215)

guillotinaweb · Feb 7, 2024 · f6c17df · f6c17df
1 parent e502969
commit f6c17df
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 27 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,3 +1,7 @@
+0.27.0
+------
+- Feat: Add label to input list
+
 0.26.0
 ------
 - Feat: Add possibility to translate the workflow texts

diff --git a/package.json b/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.26.0",
+  "version": "0.27.0",
   "repository": {
     "type": "git",
     "url": "[email protected]:guillotinaweb/guillotina_react.git"

diff --git a/src/guillo-gmi/components/fields/editComponent.js b/src/guillo-gmi/components/fields/editComponent.js
@@ -121,14 +121,19 @@ export const EditComponent = React.forwardRef(
         }
       }
       return (
-        <InputList
-          value={val || []}
-          className={className}
-          onChange={(ev) => setValue(ev)}
-          ref={ref}
-          dataTest={dataTest}
-          {...rest}
-        />
+        <React.Fragment>
+          {rest.placeholder && (
+            <label className="label">{rest.placeholder}</label>
+          )}
+          <InputList
+            value={val || []}
+            className={className}
+            onChange={(ev) => setValue(ev)}
+            ref={ref}
+            dataTest={dataTest}
+            {...rest}
+          />
+        </React.Fragment>
       )
     } else if (schema?.widget === 'file') {
       return (

diff --git a/src/guillo-gmi/components/input/input_list.js b/src/guillo-gmi/components/input/input_list.js
@@ -15,24 +15,26 @@ export const InputList = React.forwardRef(
 
     return (
       <div className="control">
-        <div className="tags">
-          {value.map((tag, index) => (
-            <div
-              key={`input_list_${tag}_${index}`}
-              className="tag is-info is-medium"
-            >
-              {tag}
-              <button
-                className="delete is-small"
-                onClick={() =>
-                  onChange([
-                    ...value.filter((tag) => value.indexOf(tag) !== index),
-                  ])
-                }
-              ></button>
-            </div>
-          ))}
-        </div>
+        {(value ?? []).length > 0 && (
+          <div className="tags">
+            {value.map((tag, index) => (
+              <div
+                key={`input_list_${tag}_${index}`}
+                className="tag is-info is-medium"
+              >
+                {tag}
+                <button
+                  className="delete is-small"
+                  onClick={() =>
+                    onChange([
+                      ...value.filter((tag) => value.indexOf(tag) !== index),
+                    ])
+                  }
+                ></button>
+              </div>
+            ))}
+          </div>
+        )}
         <Input
           type="text"
           placeholder={intl.formatMessage({