@griddo/ax 10.4.7 → 10.4.9

package/src/components/Fields/ComponentContainer/style.tsx

@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 const IconWrapper = styled.div`
   background-color: ${(p) => p.theme.color.uiBackground03};
-  border-radius: 4px;
+  border-radius: ${(p) => p.theme.radii.s};
   height: calc(${(p) => p.theme.spacing.s} * 2);
   width: calc(${(p) => p.theme.spacing.s} * 2);
   display: flex;
@@ -11,6 +11,13 @@ const IconWrapper = styled.div`
   margin-right: ${(p) => p.theme.spacing.xs};
 `;
 
+const ButtonsWrapper = styled.span`
+  display: flex;
+  align-items: center;
+  margin-left: auto;
+  opacity: 0;
+`;
+
 const HiddenButtonsWrapper = styled.span`
   margin-left: auto;
   display: none;
@@ -21,7 +28,7 @@ const Component = styled.span<{ disabled?: boolean }>`
   color: ${(p) => p.theme.color.textHighEmphasis};
   position: relative;
   display: flex;
-  align-items: stretch;
+  align-items: center;
   width: 100%;
   background: ${(p) => p.theme.color.uiBackground02};
   border: 1px solid transparent;
@@ -32,10 +39,27 @@ const Component = styled.span<{ disabled?: boolean }>`
   ${(p) => p.theme.textStyle.fieldLabel};
   text-align: left;
   cursor: ${(p) => (p.disabled ? `default` : `pointer`)};
+  min-height: 48px;
 
-  &:hover ${HiddenButtonsWrapper} {
-    display: flex;
-    opacity: 1;
+  &:hover {
+    border: 1px solid ${(p) => p.theme.color.overlayHoverPrimary};
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      border-radius: ${(p) => p.theme.radii.s};
+      background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+    }
+    span.light {
+      border-color: ${(p) => p.theme.color.interactiveInactive};
+    }
+    ${HiddenButtonsWrapper}, ${ButtonsWrapper} {
+      display: flex;
+      opacity: 1;
+    }
   }
 
   &:focus,
@@ -44,6 +68,40 @@ const Component = styled.span<{ disabled?: boolean }>`
     border: 1px solid ${(p) => (p.disabled ? `transparent` : p.theme.color.interactive01)};
     outline: none;
   }
+
+  &.ghosting {
+    opacity: 0.3;
+  }
+
+  &.dragging {
+    border: 1px solid ${(p) => p.theme.color.interactive01};
+    height: 48px;
+    &:before {
+      content: "";
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: ${(p) => p.theme.color.overlayHoverPrimary};
+      box-shadow: ${(p) => p.theme.shadow.shadowS};
+    }
+    &:after {
+      content: "";
+      position: absolute;
+      top: 47px;
+      left: 0;
+      right: 0;
+      width: calc(100% - ${(p) => p.theme.spacing.s});
+      height: ${(p) => p.theme.spacing.xs};
+      border-radius: ${(p) => `0 0 ${p.theme.radii.s} ${p.theme.radii.s}`};
+      background-color: ${(p) => p.theme.color.uiBackground02};
+      z-index: -1;
+      margin-left: ${(p) => p.theme.spacing.xs};
+      margin-right: ${(p) => p.theme.spacing.xs};
+      box-shadow: ${(p) => p.theme.shadow.shadowS};
+    }
+  }
 `;
 
 const Text = styled.div`
@@ -64,18 +122,20 @@ const Label = styled.span<{ containerInfo: boolean | undefined; disabled?: boole
       : p.theme.color.textHighEmphasis};
 `;
 
+const LabelDrag = styled.div`
+  ${(p) => p.theme.textStyle.fieldLabel};
+  color: ${(p) => p.theme.color.textHighEmphasis};
+  span {
+    color: ${(p) => p.theme.color.interactive01};
+  }
+`;
+
 const Title = styled.span<{ disabled?: boolean }>`
   ${(p) => p.theme.textStyle.uiXS};
   color: ${(p) => (p.disabled ? p.theme.color.interactiveDisabled : p.theme.color.textMediumEmphasis)};
   margin-bottom: ${(p) => p.theme.spacing.xxs};
 `;
 
-const ButtonsWrapper = styled.span`
-  display: flex;
-  align-items: center;
-  margin-left: auto;
-`;
-
 const HandleWrapper = styled.div<{ hidden?: boolean }>`
   display: ${(p) => (p.hidden ? "none" : "flex")};
   align-items: center;
@@ -91,14 +151,21 @@ const IconHandleWrapper = styled.div`
   }
 `;
 
+const CheckWrapper = styled.div`
+  margin-left: ${(p) => p.theme.spacing.xxs};
+  width: ${(p) => p.theme.spacing.s};
+`;
+
 export {
   IconWrapper,
   Component,
   Text,
   Label,
+  LabelDrag,
   Title,
   ButtonsWrapper,
   HiddenButtonsWrapper,
   HandleWrapper,
   IconHandleWrapper,
+  CheckWrapper,
 };

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

@@ -50,7 +50,7 @@ const useReferenceProvider = (modes?: string[]) => {
 
   const setReorderElements = (item: IStructuredDataContent, newIndex: number): number[] => {
     const { selectedItems, fixed, fullRelations = false } = state;
-    const newItems = moveElement(item.id, selectedItems, newIndex, "id");
+    const newItems = moveElement([item.id], selectedItems, newIndex, "id");
     const originalItemId = item.relatedPage?.originalStructuredDataId;
     const itemId = originalItemId && state.fixed.includes(originalItemId) ? originalItemId : item.id;
     const newFixed: number[] = moveArrayElement(itemId, fixed, newIndex);

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

@@ -31,14 +31,11 @@ const ActionMenuBtn = (props: any) => {
 const ActionMenu = (props: any) => {
   const { menu } = props;
   return (
-    menu &&
-    menu.options.length > 0 && (
-      <S.ActionMenu>
-        <S.ActionMenuTitle> More actions </S.ActionMenuTitle>
-        <ActionMenuBtn menu={menu} />
-        {menu.options.map((item: any, i: number) => item && ActionMenuItem(item))}
-      </S.ActionMenu>
-    )
+    <S.ActionMenu>
+      <S.ActionMenuTitle> More actions </S.ActionMenuTitle>
+      <ActionMenuBtn menu={menu} />
+      {menu && menu.options.map((item: any, i: number) => item && ActionMenuItem(item))}
+    </S.ActionMenu>
   );
 };
 

package/src/components/SideModal/SideModalOption/index.tsx

@@ -24,8 +24,10 @@ const SideModalOption = (props: IProps) => {
   const label = isNavigationDefault ? option.title : getDisplayName(optionParam);
 
   const setOption = () => {
-    handleClick(option);
-    toggleModal();
+    if(handleClick) {
+      handleClick(option);
+      toggleModal();
+    }
   };
 
   const defaultTag = option.tag ? (
@@ -45,7 +47,7 @@ const SideModalOption = (props: IProps) => {
 
 interface IProps {
   option: any;
-  handleClick: any;
+  handleClick?: (option: any) => void;
   toggleModal: () => void;
   children: string;
   theme: string;

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

@@ -1,7 +1,15 @@
 import { Dispatch } from "redux";
 
 import { navigation } from "@ax/api";
-import { IBreadcrumbItem, INavPages, INotification, ISchema, IUpdateNavigationParam } from "@ax/types";
+import {
+  IBreadcrumbItem,
+  IModule,
+  INavPages,
+  INotification,
+  IRootState,
+  ISchema,
+  IUpdateNavigationParam,
+} from "@ax/types";
 import {
   getDefaultSchema,
   getSchema,
@@ -119,7 +127,7 @@ function setIsNewTranslation(isNewTranslation: boolean): ISetIsNewTranslation {
   return { type: SET_IS_NEW_TRANSLATION, payload: { isNewTranslation } };
 }
 
-function setCopyModule(moduleCopy: Record<string, unknown> | null): ISetCopyModule {
+function setCopyModule(moduleCopy: { date: Date; elements: IModule[] } | null): ISetCopyModule {
   return { type: SET_COPY_MODULE, payload: { moduleCopy } };
 }
 
@@ -260,7 +268,7 @@ function createNavigation(navHtml?: HTMLDivElement | null): (dispatch: Dispatch,
 
       const successAction = async (response: any) => {
         const updatedContent = { ...editorContent, ...response };
-        generateContent(updatedContent, dispatch, getState);
+        generateContent(updatedContent)(dispatch, getState);
         dispatch(setIsNewTranslation(false));
         dispatch(appActions.setIsSaving(false));
       };
@@ -309,7 +317,7 @@ function updateNavigation(
 
       const successAction = async (response: any) => {
         if (fromEditor) {
-          generateContent(response, dispatch, getState);
+          generateContent(response)(dispatch, getState);
         } else {
           getNavigationByType(data.type)(dispatch, getState);
         }
@@ -437,7 +445,7 @@ function generateNewDefault(dispatch: Dispatch, getState: any) {
   dispatch(setIsNewTranslation(false));
   dispatch(setCurrentNavigationLanguages([]));
 
-  generateContent(defaultSchema, dispatch, getState);
+  generateContent(defaultSchema)(dispatch, getState);
 }
 
 function getValues(): (dispatch: Dispatch, getState: any) => Promise<void> {
@@ -463,7 +471,7 @@ function getValues(): (dispatch: Dispatch, getState: any) => Promise<void> {
               response.component = navigationModuleComponent;
             }
             dispatch(setSelectedEditorID(rootEditorID));
-            generateContent(response, dispatch, getState);
+            generateContent(response)(dispatch, getState);
           },
           handleError: (response: any) => appActions.handleError(response)(dispatch),
         };
@@ -547,7 +555,7 @@ function addComponent(type: any, key: string): (dispatch: Dispatch, getState: an
       type,
     };
     const updatedContent = getUpdatedComponents(editorContent, component, key);
-    generateContent(updatedContent, dispatch, getState);
+    generateContent(updatedContent)(dispatch, getState);
 
     if (type.editorID) {
       localStorage.setItem("selectedID", `${type.editorID}`);
@@ -559,21 +567,23 @@ function addComponent(type: any, key: string): (dispatch: Dispatch, getState: an
   };
 }
 
-function deleteModule(editorID: number, key: string): (dispatch: Dispatch, getState: any) => void {
+function deleteModule(editorID: number[], key: string): (dispatch: Dispatch, getState: any) => void {
   return (dispatch, getState) => {
     const { editorContent } = getStateValues(getState);
     const updatedContent: any = deepClone(editorContent);
 
-    const { parent, grandParent } = findByEditorID(updatedContent, editorID);
+    const { parent, grandParent } = findByEditorID(updatedContent, editorID[0]);
     const parentModule = Array.isArray(parent) ? grandParent : parent;
 
-    const parentKey = key ? key : getParentKey(parentModule, editorID);
+    const parentKey = key ? key : getParentKey(parentModule, editorID[0]);
     const itemsArr = parentModule[parentKey];
 
-    const index = itemsArr.findIndex((module: any) => module.editorID === editorID);
-    itemsArr.splice(index, 1);
+    editorID.forEach((moduleID) => {
+      const index = itemsArr.findIndex((module: IModule) => module.editorID === moduleID);
+      itemsArr.splice(index, 1);
+    });
 
-    generateContent(updatedContent, dispatch, getState);
+    generateContent(updatedContent)(dispatch, getState);
   };
 }
 
@@ -595,29 +605,36 @@ function replaceModule(module: any, parent: any, objKey: string): (dispatch: Dis
     });
 
     const updatedContent = updateByEditorID(editorContent, parent.editorID, objKey, updatedVal);
-    generateContent(updatedContent, dispatch, getState);
+    generateContent(updatedContent)(dispatch, getState);
   };
 }
 
-function duplicateModule(editorID: number, key?: string): (dispatch: Dispatch, getState: any) => Promise<number> {
+function duplicateModule(editorID: number[], key?: string): (dispatch: Dispatch, getState: any) => number {
   return (dispatch, getState) => {
     const { editorContent } = getStateValues(getState);
 
     const updatedContent: any = { ...editorContent };
-    const { element: originalItem, parent, grandParent } = findByEditorID(updatedContent, editorID);
+    const { parent, grandParent } = findByEditorID(updatedContent, editorID[0]);
     const parentModule = Array.isArray(parent) ? grandParent : parent;
 
-    const parentKey = key ? key : getParentKey(parentModule, editorID);
+    const parentKey = key ? key : getParentKey(parentModule, editorID[0]);
     const itemsArr = parentModule[parentKey];
+    let duplicatedItemIndex = 0;
 
-    const originalItemIndex = itemsArr.findIndex((module: any) => module.editorID === editorID);
-    const duplicatedItemIndex = originalItemIndex + 1;
-    itemsArr.splice(duplicatedItemIndex, 0, originalItem);
+    editorID.forEach((id) => {
+      const { element: originalItem } = findByEditorID(updatedContent, id);
+      const originalItemIndex = itemsArr.findIndex((module: IModule) => module.editorID === id);
+      duplicatedItemIndex = originalItemIndex + 1;
+      itemsArr.splice(duplicatedItemIndex, 0, originalItem);
+    });
 
-    generateContent(updatedContent, dispatch, getState);
+    generateContent(updatedContent)(dispatch, getState);
 
     const { editorContent: generatedContent } = getStateValues(getState);
-    const { parent: generatedParent, grandParent: generatedGrandParent } = findByEditorID(generatedContent, editorID);
+    const { parent: generatedParent, grandParent: generatedGrandParent } = findByEditorID(
+      generatedContent,
+      editorID[0]
+    );
     const module = Array.isArray(generatedParent) ? generatedGrandParent : generatedParent;
     const duplicatedEditorID = module[parentKey][duplicatedItemIndex].editorID;
 
@@ -628,7 +645,7 @@ function duplicateModule(editorID: number, key?: string): (dispatch: Dispatch, g
 }
 
 function moveModule(
-  elementID: number,
+  elementID: number[],
   content: any,
   newIndex: number,
   key: string
@@ -639,29 +656,39 @@ function moveModule(
         navigation: { selectedContent, editorContent },
       } = getState();
 
+      const updatedContent: any = { ...editorContent };
       const contentElements = [...selectedContent[key]];
-      const { element: selectedModule } = findByEditorID(editorContent, selectedContent.editorID);
+      const { element: selectedModule } = findByEditorID(updatedContent, selectedContent.editorID);
       selectedModule[key] = moveElement(elementID, contentElements, newIndex);
 
-      generateContent(editorContent, dispatch, getState);
+      dispatch(setEditorContent(updatedContent));
+      dispatch(setSelectedDefaultContent(selectedContent));
     } catch {
       console.log("error in moveModule");
     }
   };
 }
 
-function copyModule(editorID: number): (dispatch: Dispatch, getState: any) => boolean {
+function copyModule(editorID: number[]): (dispatch: Dispatch, getState: any) => boolean {
   return (dispatch, getState) => {
     const {
       navigation: { editorContent },
     } = getState();
 
-    const { element: originalElement } = findByEditorID(editorContent, editorID);
-    if (originalElement) {
-      const { editorID, parentEditorID, ...element } = originalElement;
+    const modulesToCopy: IModule[] = [];
+
+    editorID.forEach((id) => {
+      const { element: originalElement } = findByEditorID(editorContent, id);
+      if (originalElement) {
+        const { editorID, parentEditorID, ...element } = originalElement;
+        modulesToCopy.push(element);
+      }
+    });
+
+    if (modulesToCopy.length) {
       const payload = {
         date: new Date(),
-        element,
+        elements: modulesToCopy,
       };
       dispatch(setCopyModule(payload));
       return true;
@@ -673,25 +700,27 @@ function copyModule(editorID: number): (dispatch: Dispatch, getState: any) => bo
 
 function pasteModule(
   editorID: number,
-  key: string
+  key: string,
+  modulesToPaste: IModule[]
 ): (dispatch: Dispatch, getState: any) => Promise<{ error?: INotification }> {
   return async (dispatch, getState) => {
     const {
-      navigation: { moduleCopy, editorContent },
-    } = getState();
+      navigation: { editorContent },
+    }: IRootState = getState();
 
     const { element: originalElement } = findByEditorID(editorContent, editorID);
-
-    const validatedModuleCopy: any = deepClone(moduleCopy.element);
-
     const itemsArr = originalElement[key];
-    itemsArr.push(validatedModuleCopy);
+
+    modulesToPaste.forEach((element) => {
+      const validatedModuleCopy: any = deepClone(element);
+      itemsArr.push(validatedModuleCopy);
+    });
 
     const updatedPageContent = {
       ...editorContent,
     };
 
-    generateContent(updatedPageContent, dispatch, getState);
+    generateContent(updatedPageContent)(dispatch, getState);
 
     return { error: undefined };
   };
@@ -708,23 +737,25 @@ function replaceElementsInCollection(newValue: string, reference: string): (disp
   };
 }
 
-function generateContent(editorContent: any, dispatch: Dispatch, getState: any) {
-  const {
-    navigation: { selectedEditorID },
-  } = getState();
-  const { pageContent } = generateEditorIDs(editorContent);
-  const { element: selectedContent, parent: selectedParent } = findByEditorID(pageContent, selectedEditorID);
-  const { component } = selectedContent;
-  const schema = selectedContent && getSchema(component);
-
-  dispatch(setSchema(schema));
-  dispatch(setEditorContent(pageContent));
-  dispatch(updateBreadcrumb(selectedEditorID));
-  dispatch(setSelectedDefaultContent(selectedContent));
-  dispatch(setSelectedDefaultParentContent(selectedParent));
-  dispatch(setTab("content"));
-  dispatch(setCurrentNavigationLanguages(editorContent.navigationLanguages));
-  dispatch(setIsLoading(false));
+function generateContent(editorContent: any): (dispatch: Dispatch, getState: any) => void {
+  return async (dispatch, getState) => {
+    const {
+      navigation: { selectedEditorID },
+    } = getState();
+    const { pageContent } = generateEditorIDs(editorContent);
+    const { element: selectedContent, parent: selectedParent } = findByEditorID(pageContent, selectedEditorID);
+    const { component } = selectedContent;
+    const schema = selectedContent && getSchema(component);
+
+    dispatch(setSchema(schema));
+    dispatch(setEditorContent(pageContent));
+    dispatch(updateBreadcrumb(selectedEditorID));
+    dispatch(setSelectedDefaultContent(selectedContent));
+    dispatch(setSelectedDefaultParentContent(selectedParent));
+    dispatch(setTab("content"));
+    dispatch(setCurrentNavigationLanguages(editorContent.navigationLanguages));
+    dispatch(setIsLoading(false));
+  };
 }
 
 function updateEditorContent(

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

@@ -1,4 +1,4 @@
-import { IBreadcrumbItem, INavPages, ISchema } from "@ax/types";
+import { IBreadcrumbItem, IModule, INavPages, ISchema } from "@ax/types";
 import {
   SET_EDITOR_CONTENT,
   SET_BREADCRUMB,
@@ -84,7 +84,7 @@ export interface ISetIsNewTranslation {
 
 export interface ISetCopyModule {
   type: typeof SET_COPY_MODULE;
-  payload: { moduleCopy: Record<string, unknown> | null };
+  payload: { moduleCopy: { date: Date; elements: IModule[] } | null };
 }
 
 export interface ISetNavPages {

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

@@ -1,4 +1,4 @@
-import { IBreadcrumbItem, INavPages, ISchema } from "@ax/types";
+import { IBreadcrumbItem, IModule, INavPages, ISchema } from "@ax/types";
 
 import {
   SET_EDITOR_CONTENT,
@@ -36,7 +36,7 @@ export interface INavigationState {
   currentNavigationLanguages: any[];
   isNewTranslation: boolean;
   form: any;
-  moduleCopy: { date: string; element: Record<string, unknown> } | null;
+  moduleCopy: { date: Date; elements: IModule[] } | null;
   navigationPages: INavPages | null;
 }
 
@@ -60,7 +60,7 @@ export const initialState = {
   navigationPages: null,
 };
 
-export function reducer(state = initialState, action: NavigationActionsCreators): INavigationState {
+export function reducer(state = initialState, action: any): INavigationState {
   switch (action.type) {
     case SET_EDITOR_CONTENT:
     case SET_BREADCRUMB: