@griddo/ax 1.56.2 → 1.56.6

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.56.2",
+  "version": "1.56.6",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -233,5 +233,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "76dddc292b1037223a780b2093399c3c6e12ce02"
+  "gitHead": "f42e7395e9d7708136ecd857644ba587729b87e9"
 }

package/src/components/Fields/ArrayFieldGroup/ArrayFieldItem/index.tsx

@@ -1,13 +1,11 @@
-import React, { useState } from "react";
+import React from "react";
 
 import * as S from "./style";
 
 const ArrayFieldItem = (props: IProps): JSX.Element => {
-  const { fields, item, name, index, onChange, handleDelete } = props;
+  const { fields, item, name, index, onChange, handleDelete, isOpen, setIsOpen } = props;
 
-  const [isOpen, setIsOpen] = useState(false);
-
-  const handleClick = () => setIsOpen(!isOpen);
+  const handleClick = () => (isOpen === index ? setIsOpen(null) : setIsOpen(index));
 
   const deleteItem = () => handleDelete(index);
 
@@ -19,6 +17,15 @@ const ArrayFieldItem = (props: IProps): JSX.Element => {
     },
   ];
 
+  const getItemTitle = (fields: any[]) => {
+    const itemTitle = fields.find((field: any) => field.props.isTitle);
+    if (itemTitle) {
+      const title: any = item[itemTitle.key];
+      if (title && typeof title === "string" && title.length) return title;
+    }
+    return `${name} ${index + 1}`;
+  };
+
   const getFields = (fields: any[]): any[] => {
     return fields.map((field: any) => {
       const key = field.props.objKey;
@@ -35,12 +42,12 @@ const ArrayFieldItem = (props: IProps): JSX.Element => {
   };
 
   return (
-    <S.Wrapper isOpen={isOpen}>
-      <S.Title onClick={handleClick} isOpen={isOpen}>
-        {`${name} ${index + 1}`}
+    <S.Wrapper isOpen={isOpen === index}>
+      <S.Title onClick={handleClick} isOpen={isOpen === index}>
+        {getItemTitle(fields)}
         <S.StyledActionMenu icon="more" options={menuOptions} />
       </S.Title>
-      <S.Content isOpen={isOpen}>{getFields(fields)}</S.Content>
+      <S.Content isOpen={isOpen === index}>{getFields(fields)}</S.Content>
     </S.Wrapper>
   );
 };
@@ -52,6 +59,8 @@ interface IProps {
   index: number;
   onChange: (value: Record<string, unknown>) => void;
   handleDelete: (index: number) => void;
+  isOpen: number | null;
+  setIsOpen: (index: number | null) => void;
 }
 
 export default ArrayFieldItem;

package/src/components/Fields/ArrayFieldGroup/ArrayFieldItem/style.tsx

@@ -39,7 +39,7 @@ const Title = styled.div<{ isOpen: boolean }>`
 `;
 
 const Content = styled.div<{ isOpen: boolean }>`
-  overflow-y: hidden;
+  display: ${(p) => (p.isOpen ? "block" : "none")};
   max-height: ${(p) => (p.isOpen ? `auto` : 0)};
   transition: all 0.5s ease-in-out;
   padding: ${(p) => `0 ${p.theme.spacing.s}`};

package/src/components/Fields/ArrayFieldGroup/index.tsx

@@ -14,11 +14,13 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
   });
 
   const [items, setItems] = useState(initialValueMapped);
+  const [isOpen, setIsOpen] = useState<number | null>(null);
 
   const handleClick = () => {
     const newItems = [...items, { id: uuidv4() }];
     setItems(newItems);
     onChange(newItems);
+    setIsOpen(newItems.length - 1);
   };
 
   const handleChange = (newValue: Record<string, unknown>, index: number) => {
@@ -66,6 +68,8 @@ const ArrayFieldGroup = (props: IProps): JSX.Element => {
                 index={index}
                 onChange={handleFieldChange}
                 handleDelete={handleDelete}
+                isOpen={isOpen}
+                setIsOpen={setIsOpen}
               />
             );
           })}

package/src/components/Fields/ReferenceField/Context/index.tsx

@@ -16,8 +16,9 @@ const initState = {
   sourceTitles: [],
 };
 
-const useReference = () => {
-  const [state, setState] = useState({ state: initState });
+const useReference = (modes?: string[]) => {
+  const mode = modes && modes.length ? modes[0] : "auto";
+  const [state, setState] = useState({ state: { ...initState, mode } });
 
   const setCurrentState = useCallback((newState: any): void => {
     setState(newState);

package/src/components/Fields/ReferenceField/index.tsx

@@ -18,7 +18,7 @@ const ReferenceField = (props: IProps) => {
 
   const { isOpen, toggleModal } = useModal();
 
-  const contextValue = useReference();
+  const contextValue = useReference(selectionType);
   const { state, setState, setModeAndSource } = contextValue;
   const { mode } = state;
   const singleMode = selectionType && selectionType.length === 1;

package/src/components/Flag/index.tsx

@@ -1,8 +1,17 @@
 import React from "react";
 
 const getImage = (name: string) => {
+  const simpleIcons: any = {
+    es: "Es_ES",
+    en: "En_GB",
+    de: "De_DE",
+    fr: "Fr_FR",
+    it: "It_IT",
+    pt: "Pt_PT",
+  };
+  const filename = simpleIcons[name?.toLowerCase()] || name;
   try {
-    return require(`./components/${name}`).default;
+    return require(`./components/${filename}`).default;
   } catch (err) {
     return null;
   }