@griddo/ax 1.56.9 → 1.57.2

package/src/components/InformativeMenu/index.tsx

@@ -5,14 +5,14 @@ import { Button, FloatingMenu, IconAction } from "@ax/components";
 import * as S from "./style";
 
 const InformativeMenu = (props: IProps): JSX.Element => {
-  const { icon, message, actionText, iconSize } = props;
+  const { icon, message, actionText, iconSize, position } = props;
 
   const InfoButton = () => <IconAction icon={icon} size={iconSize} />;
 
   const handleClick = (event: any) => event.preventDefault();
 
   return (
-    <FloatingMenu Button={InfoButton} isWide={true} reactiveToHover={true}>
+    <FloatingMenu Button={InfoButton} reactiveToHover={true} position={position}>
       <S.InformativeMenu>
         {message}
         <S.Footer>
@@ -30,5 +30,6 @@ interface IProps {
   message: string;
   actionText: string;
   iconSize?: "s" | "m" | undefined;
+  position?: string;
 }
 export default InformativeMenu;

package/src/components/InformativeMenu/style.tsx

@@ -6,7 +6,6 @@ const InformativeMenu = styled.div`
   color: ${(p) => p.theme.color.textLowEmphasis};
   display: flex;
   flex-direction: column;
-
 `;
 
 const Footer = styled.div`

package/src/components/MainWrapper/AppBar/index.tsx

@@ -2,10 +2,9 @@ import React from "react";
 import { withRouter, RouteComponentProps } from "react-router-dom";
 
 import { IErrorItem } from "@ax/types";
-import { Button, Icon, IconAction, Flag, FloatingMenu, LanguageMenu, Tabs, Tooltip, ErrorCenter } from "@ax/components";
+import { Button, Icon, IconAction, Flag, FloatingMenu, LanguageMenu, Tabs, Tooltip, ErrorCenter, SearchField } from "@ax/components";
 
 import { ActionMenu, ActionSimpleMenu, DownArrowButton } from "./atoms";
-import SearchField from "./SearchField";
 
 import * as S from "./style";
 
@@ -123,7 +122,7 @@ const AppBar = (props: IProps): JSX.Element => {
 
   const PageStatus = () =>
     statusMenu.options && statusMenu.options.length > 0 ? (
-      <FloatingMenu Button={StatusBtn} isWide={true} isInAppBar={true}>
+      <FloatingMenu Button={StatusBtn} isInAppBar={true}>
         <ActionSimpleMenu menu={statusMenu} />
       </FloatingMenu>
     ) : (
@@ -149,7 +148,9 @@ const AppBar = (props: IProps): JSX.Element => {
       <S.Wrapper>
         {searchAction && (
           <>
-            <SearchField onChange={searchAction} />
+            <S.SearchWrapper>
+              <SearchField onChange={searchAction} closeOnInactive />
+            </S.SearchWrapper>
             <S.Separator />
           </>
         )}
@@ -157,7 +158,7 @@ const AppBar = (props: IProps): JSX.Element => {
           <>
             <S.LanguageWrapper>
               <Tooltip content={languageTooltip} hideOnClick bottom>
-                <FloatingMenu Button={LanguageBtn} isWide={true} isInAppBar={true}>
+                <FloatingMenu Button={LanguageBtn} isInAppBar={true}>
                   {languageMenu}
                 </FloatingMenu>
               </Tooltip>
@@ -178,7 +179,7 @@ const AppBar = (props: IProps): JSX.Element => {
         {errors && errors.length > 0 && (
           <>
             <S.IconStatusWrapper>
-              <FloatingMenu Button={ErrorCenterBtn} isWide={true} isInAppBar={true}>
+              <FloatingMenu Button={ErrorCenterBtn} isInAppBar={true}>
                 <ErrorCenter errors={errors} actions={errorActions} />
               </FloatingMenu>
             </S.IconStatusWrapper>
@@ -203,7 +204,7 @@ const AppBar = (props: IProps): JSX.Element => {
         )}
         {downArrowMenu && downArrowMenu.displayed && (
           <Tooltip content="Actions" hideOnClick bottom>
-            <FloatingMenu Button={DownArrowButton} isWide={true} isInAppBar={true}>
+            <FloatingMenu Button={DownArrowButton} isInAppBar={true}>
               <ActionMenu menu={downArrowMenu} />
             </FloatingMenu>
           </Tooltip>

package/src/components/MainWrapper/AppBar/style.tsx

@@ -151,6 +151,12 @@ const ErrorWrapper = styled.div`
   }
 `;
 
+const SearchWrapper = styled.div`
+  width: ${p => `calc(${p.theme.spacing.xl} * 5)`};
+  display: flex;
+  justify-content: flex-end;
+`;
+
 export {
   ActionMenu,
   Header,
@@ -168,4 +174,5 @@ export {
   Separator,
   IconWrapper,
   ErrorWrapper,
+  SearchWrapper,
 };

package/src/components/MenuItem/style.tsx

@@ -16,6 +16,7 @@ const SubItem = styled.li<{ active: boolean }>`
   clear: both;
   width: 100%;
   margin-bottom: ${(p) => p.theme.spacing.xxs};
+  margin-top: ${(p) => p.theme.spacing.xxs};
   position: relative;
 
   &:hover {

package/src/components/Modal/style.tsx

@@ -29,7 +29,7 @@ export const ModalOverlay = styled.div`
   z-index: 1040;
   width: 100vw;
   height: 100vh;
-  background: ${p => p.theme.color.overlay};
+  background: ${(p) => p.theme.color.overlay};
   body.modal-open:not(&) {
     overflow: hidden;
   }
@@ -51,34 +51,33 @@ export const Modal = styled.div<{ size: string | undefined }>`
   z-index: 100;
   display: flex;
   flex-flow: column nowrap;
-  background: ${p => p.theme.color.uiBackground01};
+  background: ${(p) => p.theme.color.uiBackground01};
   position: relative;
   margin: auto;
   border-radius: 4px;
-  width: ${p => getWidth(p.size)};
-  height: ${p => getHeight(p.size)};
-  box-shadow: ${p => p.theme.shadow.shadowXL};
+  width: ${(p) => getWidth(p.size)};
+  height: ${(p) => getHeight(p.size)};
+  box-shadow: ${(p) => p.theme.shadow.shadowXL};
   top: 50%;
   transform: translateY(-50%);
 `;
 
 export const ModalHeader = styled.div`
-  background: ${p => p.theme.color.uiBarBackground};
+  background: ${(p) => p.theme.color.uiBarBackground};
   display: flex;
-  padding: ${p => p.theme.spacing.s};
+  padding: ${(p) => p.theme.spacing.s};
   border-radius: 4px 4px 0 0;
-  border-bottom: 1px solid ${p => p.theme.color.uiLine};
+  border-bottom: 1px solid ${(p) => p.theme.color.uiLine};
 `;
 
 export const ModalContent = styled.div`
   position: relative;
   flex-grow: 1;
-  overflow: auto;
 `;
 
 export const Title = styled.div`
-  ${p => p.theme.textStyle.headingM};
-  color: ${p => p.theme.color.textHighEmphasis};
+  ${(p) => p.theme.textStyle.headingM};
+  color: ${(p) => p.theme.color.textHighEmphasis};
 `;
 
 export const ButtonWrapper = styled.div`
@@ -86,10 +85,12 @@ export const ButtonWrapper = styled.div`
 `;
 
 export const ModalFooter = styled.div`
+  background: ${(p) => p.theme.color.uiBackground01};
   display: flex;
   justify-content: flex-end;
-  padding: ${p => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
+  padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
   button:not(:first-child) {
-    margin-left: ${p => p.theme.spacing.s};
+    margin-left: ${(p) => p.theme.spacing.s};
   }
+  border-radius: 0 0 4px 4px;
 `;

package/src/components/Nav/index.tsx

@@ -4,6 +4,8 @@ import { NavLink } from "react-router-dom";
 import { SubNav, MenuItem } from "@ax/components";
 import { INavItem } from "@ax/types";
 
+import * as S from './style';
+
 const Nav = (props: IProps): JSX.Element => {
   const { current, items, onClick } = props;
 
@@ -11,12 +13,15 @@ const Nav = (props: IProps): JSX.Element => {
     <SubNav>
       {items &&
         items.map((item: INavItem, key: number) => {
-          const isSelected = current && item.title === current.title ? "selected" : "";
+          const isSelected = current && item.title === current.title;
+          const selectedClass = isSelected ? "selected" : "";
           const handleClick = () => onClick(item.path);
           return (
             <MenuItem key={key} onClick={handleClick}>
-              <NavLink to="#" className={isSelected}>
-                {item.title}
+              <NavLink to="#" className={selectedClass}>
+                <S.Link active={isSelected}>
+                  {item.title}
+                </S.Link>
               </NavLink>
             </MenuItem>
           );

package/src/components/Nav/style.tsx

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const Link = styled.div<{ active: boolean }>`
+    color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+`;

package/src/components/SearchField/index.tsx

@@ -4,10 +4,13 @@ import React, { useState } from "react";
 import * as S from "./style";
 
 const SearchField = (props: IProps): JSX.Element => {
-  const { onChange, placeholder } = props;
+  const { onChange, placeholder, closeOnInactive = false } = props;
 
+  const [isOpen, setIsOpen] = useState(false);
   const [inputValue, setInputValue] = useState("");
 
+  const toggleField = () => setIsOpen(!isOpen);
+
   const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const newValue = e.target.value;
     setInputValue(newValue);
@@ -18,27 +21,52 @@ const SearchField = (props: IProps): JSX.Element => {
     onChange("");
   };
 
+  const handleClose = () => {
+    toggleField();
+    handleClear();
+  };
+
+  const handleClick = () => {
+    closeOnInactive ? handleClose() : handleClear();
+  }
+
   const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {
     if (e.key === "Enter") {
       onChange(inputValue);
     }
   };
 
+  const showField = isOpen || !closeOnInactive;
+
   return (
     <S.Wrapper>
-      <S.FieldWrapper>
-        <S.Input type="text" value={inputValue} onChange={handleChange} onKeyDown={handleKeyDown} placeholder={placeholder} />
-        {inputValue.trim() !== "" && <S.HelpText>Press ENTER</S.HelpText>}
-        {inputValue.length > 0 ? (
-          <S.IconWrapper onClick={handleClear}>
-            <Icon name="close" size="24" />
-          </S.IconWrapper>
-        ) : (
-          <S.IconWrapper>
-            <Icon name="search" size="24" />
-          </S.IconWrapper>
-        )}
-      </S.FieldWrapper>
+      {showField ? (
+        <S.FieldWrapper>
+          <S.Input
+            type="text"
+            value={inputValue}
+            onChange={handleChange}
+            onKeyDown={handleKeyDown}
+            placeholder={placeholder}
+            closeOnInactive={closeOnInactive}
+            autoFocus
+          />
+          {inputValue.trim() !== "" && <S.HelpText>Press ENTER</S.HelpText>}
+          {closeOnInactive || inputValue.length > 0 ? (
+            <S.IconCloseWrapper onClick={handleClick}>
+              <Icon name="close" size="24" />
+            </S.IconCloseWrapper>
+          ) : (
+              <S.IconSearchWrapper>
+                <Icon name="search" size="24" />
+            </S.IconSearchWrapper>
+          )}
+        </S.FieldWrapper>
+      ) : (
+        <S.IconSearchWrapper onClick={toggleField}>
+          <Icon name="search" size="24" />
+        </S.IconSearchWrapper>
+      )}
     </S.Wrapper>
   );
 };
@@ -46,6 +74,7 @@ const SearchField = (props: IProps): JSX.Element => {
 interface IProps {
   onChange(query: string): void;
   placeholder?: string;
+  closeOnInactive?: boolean;
 }
 
 export default SearchField;

package/src/components/SearchField/style.tsx

@@ -1,32 +1,35 @@
 import styled from "styled-components";
 
-const Wrapper = styled.div``;
-
-const FieldWrapper = styled.div`
+const Wrapper = styled.div`
   position: relative;
   width: 100%;
 `;
 
-const Input = styled.input`
+const FieldWrapper = styled.div`
+`;
+
+const Input = styled.input<{ closeOnInactive: boolean }>`
   ${(p) => p.theme.textStyle.fieldContent};
   color: ${(p) => p.theme.color.textHighEmphasis};
   background-color: ${(p) => p.theme.color.interactiveBackground};
   width: 100%;
   height: ${(p) => p.theme.spacing.l};
   padding-left: ${(p) => p.theme.spacing.xs};
-  border: 1px solid ${(p) => p.theme.color.uiLine};
-  border-radius: ${(p) => p.theme.radii.s};
+  border-color: ${(p) => p.closeOnInactive ? p.theme.color.interactive01 : p.theme.color.uiLine};
+  border-width: ${(p) => p.closeOnInactive ? "0 0 1px" : "1px"};
+  border-style: solid;
+  border-radius: ${(p) => p.closeOnInactive ? 0 : p.theme.radii.s};
 
   &:active,
   &:focus {
-    border-color: ${(p) => p.theme.color.interactive01};
     outline: none;
+    border-color: ${(p) => p.theme.color.interactive01};
   }
 `;
 
-const IconWrapper = styled.div<{ onClick?: () => void }>`
+const IconSearchWrapper = styled.div<{ onClick?: () => void }>`
   position: absolute;
-  right: ${(p) => p.theme.spacing.xs};
+  right: ${(p) => p.theme.spacing.xxs};
   top: 50%;
   width: ${(p) => p.theme.spacing.m};
   height: ${(p) => p.theme.spacing.m};
@@ -44,4 +47,14 @@ const HelpText = styled.div`
   transform: translateY(-50%);
 `;
 
-export { Wrapper, IconWrapper, FieldWrapper, Input, HelpText };
+const IconCloseWrapper = styled.div`
+  position: absolute;
+  right: ${p => p.theme.spacing.xxs};
+  top: 50%;
+  width: ${p => p.theme.spacing.m};
+  height: ${p => p.theme.spacing.m};
+  cursor: pointer;
+  transform: translateY(-50%);
+`;
+
+export { Wrapper, IconSearchWrapper, FieldWrapper, Input, HelpText, IconCloseWrapper };

package/src/components/SideModal/index.tsx

@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 import { useHandleClickOutside } from "@ax/hooks";
 import { getDisplayName, filterByCategory } from "@ax/helpers";
 import SideModalOption from "@ax/components/SideModal/SideModalOption";
-import { CheckField, MenuItem } from "@ax/components";
+import { CheckField, MenuItem, SearchField } from "@ax/components";
 import { ModuleCategoryInfo } from "@ax/types";
 
 import * as S from "./style";
@@ -33,6 +33,7 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
   };
 
   const [options, setOptions] = useState(filteredValues);
+  const [searchQuery, setSearchQuery] = useState("");
 
   useEffect(() => {
     if (componentOptions) {
@@ -78,11 +79,15 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
   const getCategoryItem = (category: ModuleCategoryInfo, i: number) => {
     const { value, label } = category;
     const filterOptions = () => filterOptionsByCategory(value);
-    const isActive = value === options.category;
+    const isSelected = value === options.category;
 
     return (
-      <MenuItem key={`${value}${i}`} active={isActive}>
-        <S.NavLink onClick={filterOptions}>{label}</S.NavLink>
+      <MenuItem key={`${value}${i}`} active={isSelected}>
+        <S.NavLink onClick={filterOptions}>
+          <S.Link active={isSelected}>
+            {label}
+          </S.Link>
+        </S.NavLink>
       </MenuItem>
     );
   };
@@ -107,12 +112,20 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
 
   const filteredOptions =
     options.options &&
-    options.options.map((option: any, i: number) =>
-      typeof option === "object" || typeof option === "string" ? (
+    options.options.map((option: any, i: number) => {
+      if (typeof option !== "object" && typeof option !== "string") return null;
+      const displayName = getDisplayName(option.component ? option.component : option);
+      if (searchQuery.length > 0) {
+        const name = displayName.toLowerCase();
+        const search = searchQuery.toLocaleLowerCase();
+        if (!name.includes(search)) return null
+      };
+      return (
         <SideModalOption option={option} handleClick={handleClick} toggleModal={toggleModal} key={`${option}${i}`}>
-          {getDisplayName(option.component ? option.component : option)}
+          {displayName}
         </SideModalOption>
-      ) : null
+      )
+    }
     );
 
   return isOpen
@@ -120,6 +133,9 @@ const SideModal = (props: ISideModalProps): JSX.Element | null => {
         <S.Wrapper ref={node} optionsType={optionsType}>
           <S.Header>
             <S.Title>{optionsType}</S.Title>
+          <S.SearchWrapper>
+            <SearchField onChange={setSearchQuery} closeOnInactive />
+          </S.SearchWrapper>
           </S.Header>
           {setDefault && !setDefault.checked && (
             <S.CheckFieldWrapper>

package/src/components/SideModal/style.tsx

@@ -18,6 +18,7 @@ const Wrapper = styled.div<{ optionsType?: string }>`
 const Header = styled.div`
   display: flex;
   align-items: center;
+  justify-content: space-between;
   height: ${(p) => p.theme.spacing.xl};
   width: 100%;
   padding: 0 ${(p) => p.theme.spacing.m};
@@ -37,7 +38,7 @@ const ColumnsWrapper = styled.div`
   display:flex;
 `;
 
-const Content = styled.ul`
+const Content = styled.div`
   list-style: none;
   padding: ${(p) => p.theme.spacing.m};
   height: ${(p) => `calc(100vh - (${p.theme.spacing.xl} * 2))`};
@@ -62,6 +63,14 @@ const FeaturedWrapper = styled.div`
   margin-bottom: ${(p) => p.theme.spacing.xs};
 `;
 
+const SearchWrapper = styled.div`
+  width: ${p => `calc(${p.theme.spacing.xl} * 4)`};
+`;
+
+const Link = styled.div<{ active: boolean }>`
+  color: ${p => p.active ? p.theme.color.textHighEmphasis : p.theme.color.textMediumEmphasis};
+`;
+
 export {
   Wrapper,
   Content,
@@ -70,5 +79,7 @@ export {
   ColumnsWrapper,
   NavLink,
   CheckFieldWrapper,
-  FeaturedWrapper
+  FeaturedWrapper,
+  SearchWrapper,
+  Link,
 };

package/src/components/SubNav/style.tsx

@@ -6,12 +6,13 @@ const Wrapper = styled.div`
 
 const SubNav = styled.ul`
   position: relative;
-  width: calc(${(p) => p.theme.spacing.m} * 10);
+  width: calc(${(p) => p.theme.spacing.s} * 17);
   padding: ${(p) => p.theme.spacing.m};
   background: ${(p) => p.theme.color.uiBackground02};
   border-right: ${(p) => `1px solid ${p.theme.color.uiLine}`};
   height: 100%;
-  overflow: auto;
+  overflow-x: scroll;
+
   ::-webkit-scrollbar {
     -webkit-appearance: none;
     width: 4px;

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

@@ -11,7 +11,6 @@ import {
   getParentKey,
   moveElement,
   replaceElements,
-  setIsSavedData,
   updateByEditorID,
 } from "@ax/forms";
 
@@ -214,10 +213,9 @@ function getNavigationByType(type: string): (dispatch: Dispatch, getState: any)
   };
 }
 
-function createNavigation(): (dispatch: Dispatch, getState: any) => Promise<void> {
+function createNavigation(): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
-      dispatch(setIsSaving(true));
       const {
         navigation: { editorContent, isNewTranslation },
         sites: { currentSiteInfo },
@@ -234,8 +232,6 @@ function createNavigation(): (dispatch: Dispatch, getState: any) => Promise<void
       const successAction = async (response: any) => {
         generateContent(response, dispatch, getState);
         dispatch(setIsNewTranslation(false));
-        setIsSavedData(true);
-        getNavigationByType(response.type)(dispatch, getState);
       };
 
       const responseActions = {
@@ -245,10 +241,10 @@ function createNavigation(): (dispatch: Dispatch, getState: any) => Promise<void
 
       const callback = async () => navigation.createNavigation(cleanValues);
 
-      await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar error bien
-      dispatch(setIsSaving(false));
+      console.log(e);
+      return false;
     }
   };
 }
@@ -257,7 +253,7 @@ function updateNavigation(
   navID: number,
   data: any,
   fromEditor?: boolean
-): (dispatch: Dispatch, getState: any) => Promise<void> {
+): (dispatch: Dispatch, getState: any) => Promise<boolean> {
   return async (dispatch, getState) => {
     try {
       const { isNewTranslation } = getStateValues(getState);
@@ -270,9 +266,7 @@ function updateNavigation(
       const successAction = async (response: any) => {
         if (fromEditor) {
           generateContent(response, dispatch, getState);
-          setIsSavedData(true);
         }
-        getNavigationByType(response.type)(dispatch, getState);
       };
       const responseActions = {
         handleSuccess: (response: any) => successAction(response),
@@ -281,9 +275,10 @@ function updateNavigation(
 
       const callback = async () => navigation.updateNavigation(navID, cleanValues);
 
-      await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
+      return await handleRequest(callback, responseActions, [appActions.setIsSaving])(dispatch);
     } catch (e) {
-      console.log(e); // TODO: capturar error bien
+      console.log(e);
+      return false;
     }
   };
 }
@@ -673,17 +668,24 @@ function setSelectedTab(tab: string): (dispatch: Dispatch) => Promise<void> {
   };
 }
 
-const resetDefaultsValues = (dispatch: Dispatch) => {
-  dispatch(setEditorContent({}));
-  dispatch(setBreadcrumb([]));
-  dispatch(setSchema({}));
-  dispatch(setSelectedDefaultContent({}));
-  dispatch(setSelectedEditorID(0));
-  dispatch(setTab("content"));
-  dispatch(setHeader(null));
-  dispatch(setFooter(null));
-  dispatch(setCurrentNavigationLanguages([]));
-};
+function resetDefaultsValues(): (dispatch: Dispatch) => Promise<void> {
+  return async (dispatch) => {
+    try {
+      dispatch(setEditorContent(null));
+      dispatch(setBreadcrumb([]));
+      dispatch(setSchema({}));
+      dispatch(setSelectedDefaultContent({}));
+      dispatch(setSelectedEditorID(0));
+      dispatch(setTab("content"));
+      dispatch(setHeader(null));
+      dispatch(setFooter(null));
+      dispatch(setCurrentNavigationLanguages([]));
+      dispatch(setIsNewTranslation(false));
+    } catch (e) {
+      console.log("Error", e); //TODO
+    }
+  };
+}
 
 export {
   setEditorContent,

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

@@ -21,10 +21,10 @@ import { NavigationActionsCreators } from "./interfaces";
 export interface INavigationState {
   editorContent: any | undefined;
   breadcrumb: IBreadcrumbItem[];
-  schema: ISchema | {};
+  schema: ISchema | Record<string, unknown>;
   selectedContent: any;
   selectedDefault: string;
-  selectedParent: Object | null;
+  selectedParent: Record<string, unknown> | null;
   tab: string;
   selectedEditorID: number | undefined;
   header: number | null;