@griddo/ax 1.75.239 → 1.75.241

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "1.75.239",
+  "version": "1.75.241",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Carlos Torres <carlos.torres@secuoyas.com>",
@@ -230,5 +230,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "f551ff2a20f234d26bbe6c2b16c15f9fe3a7b1de"
+  "gitHead": "ed73d8fd6389ceb4f2e2dd6b95a102353b1186a4"
 }

package/src/containers/Navigation/Menu/actions.tsx

@@ -281,12 +281,13 @@ function setItemValue(page: IMenuItem): (dispatch: Dispatch) => Promise<void> {
   };
 }
 
-function updateForm(valueObj: any): (dispatch: Dispatch, getState: any) => void {
+function updateFormValue(valueObj: any): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const {
       menu: { form },
     } = getState();
     const updatedForm = { ...form, ...valueObj };
+
     dispatch(setMenuFormData(updatedForm));
   };
 }
@@ -338,5 +339,5 @@ export {
   resetItemValues,
   resetMenuValues,
   reorderMenu,
-  updateForm,
+  updateFormValue,
 };

package/src/containers/Navigation/Menu/reducer.tsx

@@ -33,14 +33,11 @@ const initialState = {
   type: "MainMenu",
   item: null,
   form: {
-    itemLink: null,
-    itemImage: null,
-    itemLabel: "",
-    itemAuxText: "",
+    url: null,
+    label: "",
     type: "link",
     headerStyle: "",
     footerStyle: "",
-    itemSpecial: false,
   },
   totalItems: 0,
 };

package/src/helpers/index.tsx

@@ -46,6 +46,7 @@ import {
   getDisplayName,
   getTemplateType,
   getTemplateDisplayName,
+  getMenuItems,
   filterByCategory,
   getSchemaType,
   getModuleCategories,
@@ -133,6 +134,7 @@ export {
   getTemplateDisplayName,
   getSchemaThumbnails,
   getTemplateThumbnails,
+  getMenuItems,
   filterByCategory,
   getStructuredDataFromPage,
   getCurrentPageStructuredData,

package/src/helpers/schemas.tsx

@@ -74,6 +74,8 @@ const getTemplateDisplayName = (template: string) => {
   return schema ? schema.displayName : undefined;
 };
 
+const getMenuItems = (type: string): ({ fields: any[] } | undefined) => schemas.menuItems[type];
+
 const filterByCategory = (options: any, category: string) =>
   options.filter((option: any) => allSchemas[option].category === category);
 
@@ -153,6 +155,7 @@ export {
   getSchemaType,
   getTemplateType,
   getTemplateDisplayName,
+  getMenuItems,
   filterByCategory,
   getModuleCategories,
   getModuleStyles,

package/src/modules/Navigation/Menus/List/Table/Item/index.tsx

@@ -44,18 +44,15 @@ const Item = (props: IItemProps): JSX.Element => {
   const resetValues = () => resetItemValues();
 
   const setItem = (item: IMenuItem) => {
-    const type = item.config ? item.config.type : "link";
-    const headerStyle = item.config ? item.config.headerStyle : "";
-    const footerStyle = item.config ? item.config.footerStyle : "";
+    const { config, ...rest } = item;
+    const type = config ? config.type : "link";
+    const headerStyle = config ? config.headerStyle : "";
+    const footerStyle = config ? config.footerStyle : "";
     setItemValue(item);
-    updateFormValue({ itemLink: item.url });
-    updateFormValue({ itemLabel: item.label });
-    updateFormValue({ itemAuxText: item.auxText });
-    updateFormValue({ itemImage: item.image });
     updateFormValue({ type });
     updateFormValue({ headerStyle });
     updateFormValue({ footerStyle });
-    updateFormValue({ itemSpecial: item.special || false });
+    updateFormValue(rest);
   };
 
   const openModal = () => {
@@ -132,7 +129,7 @@ const mapDispatchToProps = {
   deleteMenuItem: menuActions.deleteMenuItem,
   resetItemValues: menuActions.resetItemValues,
   setItemValue: menuActions.setItemValue,
-  updateFormValue: menuActions.updateForm,
+  updateFormValue: menuActions.updateFormValue,
 };
 
 type IItemProps = IProps & IDispatchProps;

package/src/modules/Navigation/Menus/List/Table/SidePanel/Form/ConnectedField/index.tsx

@@ -0,0 +1,45 @@
+import React from "react";
+import { connect } from "react-redux";
+
+import { IRootState } from "@ax/types";
+import { menuActions } from "@ax/containers/Navigation/Menu";
+import { FieldsBehavior } from "@ax/components";
+
+const ConnectedField = (props: IProps) => {
+  const { form, type, name, updateFormValue, setIsGalleryOpened } = props;
+
+  const value = form[name];
+
+  const handleChange = (newValue: any) => updateFormValue({ [name]: newValue });
+
+  const fieldProps = {
+    value,
+    onChange: handleChange,
+    setIsGalleryOpened: type === "ImageField" ? setIsGalleryOpened : undefined,
+    ...props,
+  };
+
+  return <FieldsBehavior fieldType={type} {...fieldProps} />;
+};
+
+interface IProps {
+  form: any;
+  type: string;
+  title: string;
+  name: string;
+  mandatory?: boolean;
+  helptext?: string;
+  options?: any;
+  updateFormValue: (value: any) => void;
+  setIsGalleryOpened?: (isGalleryOpened: boolean) => void;
+}
+
+const mapStateToProps = (state: IRootState) => ({
+  form: state.menu.form,
+});
+
+const mapDispatchToProps = {
+  updateFormValue: menuActions.updateFormValue,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(ConnectedField)

package/src/modules/Navigation/Menus/List/Table/SidePanel/Form/index.tsx

@@ -1,23 +1,22 @@
 import React, { memo } from "react";
-
 import { connect } from "react-redux";
+
 import { menuActions } from "@ax/containers/Navigation";
 import { sitesActions } from "@ax/containers/Sites";
 import { FieldsBehavior } from "@ax/components";
+import { IRootState, IMenuForm, ISchemaField } from "@ax/types";
+import { getMenuItems } from "@ax/helpers";
 
-import { IRootState, IMenuForm, IImage } from "@ax/types";
+import ConnectedField from "./ConnectedField";
 
 const Form = (props: IProps): JSX.Element => {
-  const { form, updateForm, toggleSecondaryPanel, setIsGalleryOpened } = props;
+  const { form, updateFormValue, toggleSecondaryPanel, setIsGalleryOpened } = props;
 
-  const { itemLink, itemLabel, itemAuxText, type, itemImage, itemSpecial } = form;
+  const { url, label, type } = form;
 
-  const setLinkValue = (value: any) => updateForm({ itemLink: value });
-  const setLabelValue = (value: string) => updateForm({ itemLabel: value });
-  const setAuxTextValue = (value: string) => updateForm({ itemAuxText: value });
-  const setTypeValue = (value: string) => updateForm({ type: value });
-  const setImageValue = (value: IImage) => updateForm({ itemImage: value });
-  const setSpecial = (value: boolean) => updateForm({ itemSpecial: value });
+  const setLinkValue = (value: any) => updateFormValue({ url: value });
+  const setLabelValue = (value: string) => updateFormValue({ label: value });
+  const setTypeValue = (value: string) => updateFormValue({ type: value });
 
   const typeLinkOptions = [
     {
@@ -34,6 +33,11 @@ const Form = (props: IProps): JSX.Element => {
 
   const typeLink = type ? type : "link";
 
+  const menuItems = getMenuItems(typeLink);
+  const schemaFields = menuItems && menuItems.fields ? menuItems.fields : [];
+
+  const generateFields = (fields: ISchemaField[]) => fields.map((field: ISchemaField) => <ConnectedField {...field } name={field.key} setIsGalleryOpened={setIsGalleryOpened} />);
+
   return (
     <>
       <FieldsBehavior
@@ -49,57 +53,22 @@ const Form = (props: IProps): JSX.Element => {
         name="navigationLabel"
         fieldType="TextField"
         autoComplete="nav-label"
-        value={itemLabel || ""}
+        value={label || ""}
         onChange={setLabelValue}
       />
-      {type !== "link" ? (
+      {type === "link" ? (
         <FieldsBehavior
-          title="Image"
-          name="image"
-          fullWidth={true}
-          fieldType="ImageField"
-          value={itemImage || null}
-          onChange={setImageValue}
-          setIsGalleryOpened={setIsGalleryOpened}
-        />
-      ) : (
-        <>
-          <FieldsBehavior
             title="Link"
             name="link"
             fieldType="UrlField"
-            value={itemLink || null}
+            value={url || null}
             onChange={setLinkValue}
             advanced={true}
             handlePanel={toggleSecondaryPanel}
             inFloatingPanel={true}
           />
-          <FieldsBehavior
-            title="Auxiliar Text"
-            name="auxText"
-            fieldType="TextArea"
-            value={itemAuxText || ""}
-            onChange={setAuxTextValue}
-          />
-          <FieldsBehavior
-            title="Image"
-            name="image"
-            fullWidth={true}
-            fieldType="ImageField"
-            value={itemImage || null}
-            onChange={setImageValue}
-            setIsGalleryOpened={setIsGalleryOpened}
-          />
-          <FieldsBehavior
-            name="special"
-            fieldType="ToggleField"
-            value={itemSpecial}
-            onChange={setSpecial}
-            background
-            auxText="Check it if the link has a special behavior."
-          />
-        </>
-      )}
+      ) : null }
+      {generateFields(schemaFields)}
     </>
   );
 };
@@ -109,7 +78,7 @@ const mapStateToProps = (state: IRootState) => ({
 });
 
 const mapDispatchToProps = {
-  updateForm: menuActions.updateForm,
+  updateFormValue: menuActions.updateFormValue,
   getSitePages: sitesActions.getSitePages,
 };
 
@@ -122,7 +91,7 @@ interface IFormProps {
   setIsGalleryOpened?: (isGalleryOpened: boolean) => void;
 }
 interface IDispatchProps {
-  updateForm(value: any): void;
+  updateFormValue(value: any): void;
 }
 
 type IProps = IDispatchProps & IStateProps & IFormProps;

package/src/modules/Navigation/Menus/List/Table/SidePanel/index.tsx

@@ -14,7 +14,7 @@ const SidePanel = (props: IProps): JSX.Element => {
   const { isOpen, isOpenedSecond, toggleModal, toggleSecondaryPanel, addMenuItem, updateMenuItem, item, edit, form } =
     props;
 
-  const { itemLabel, itemLink, itemImage, itemAuxText, type, headerStyle, footerStyle, itemSpecial } = form;
+  const { type, headerStyle, footerStyle } = form;
 
   const [isGalleryOpened, setIsGalleryOpened] = useState(false);
 
@@ -23,13 +23,9 @@ const SidePanel = (props: IProps): JSX.Element => {
   };
 
   let menuItem: any = {
-    label: itemLabel,
-    url: itemLink,
-    image: itemImage,
-    auxText: itemAuxText,
+    ...form,
     component: "Menu",
     config: { type, headerStyle, footerStyle },
-    special: itemSpecial,
   };
 
   menuItem.children = edit && item ? item.children : [];

package/src/types/index.tsx

@@ -364,14 +364,11 @@ export interface IMenuItemConfig {
 }
 
 export interface IMenuForm {
-  itemLink: any;
-  itemLabel: string;
-  itemAuxText: string;
-  itemImage: IImage | string | null;
+  url: any;
+  label: string;
   type: string;
   headerStyle: string;
   footerStyle: string;
-  itemSpecial: boolean;
 }
 
 export interface IHeader {