@griddo/ax 10.4.7 → 10.4.8

package/src/components/Fields/ComponentArray/MixableComponentArray/index.tsx

@@ -1,14 +1,14 @@
-import React from "react";
-import differenceInSeconds from "date-fns/differenceInSeconds";
-import { DragDropContext, Droppable, Draggable, DropResult } from "react-beautiful-dnd";
+import React, { useEffect, useState } from "react";
+import { DragDropContext, Droppable, Draggable, DropResult, BeforeCapture } from "react-beautiful-dnd";
 
-import { IModule } from "@ax/types";
-import { ComponentContainer, SideModal } from "@ax/components";
-import { useModal } from "@ax/hooks";
+import { IModule, INotification, ISchemaField } from "@ax/types";
+import { ComponentContainer, SideModal, Toast } from "@ax/components";
+import { useBulkSelection, useModal, useToast } from "@ax/hooks";
 
-import { getComponentProps, containerToComponentArray, getTypefromKey } from "../helpers";
+import { getComponentProps, containerToComponentArray, getTypefromKey, getModulesToPaste } from "../helpers";
 import AddItemButton from "./AddItemButton";
 import PasteModuleButton from "./PasteModuleButton";
+import BulkHeader from "./BulkHeader";
 
 import * as S from "./style";
 
@@ -35,36 +35,45 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
     setHistoryPush,
   } = props;
 
-  const moduleCopyComponent = moduleCopy?.element.component;
+  const {
+    addModuleAction,
+    addComponentAction,
+    deleteModuleAction,
+    replaceElementsInCollectionAction,
+    pasteModuleAction,
+    setNotificationAction,
+    copyModuleAction,
+    duplicateModuleAction,
+  } = actions || {};
 
-  const availableDataPackModule = availableDataPacks?.reduce((prev: any, curr: any) => {
-    const packModule = curr.modules.find((module: any) => module.id === moduleCopyComponent);
-    return prev || packModule;
-  }, null);
+  // fix for old not array values
+  const fixedValue = Array.isArray(value) ? value : containerToComponentArray(value);
+  const componentIDs: number[] = fixedValue.map((element: any) => element.editorID);
 
-  const isModuleCopyUnavailable =
-    availableDataPackModule &&
-    !whiteList.includes(moduleCopyComponent) &&
-    !!availableDataPackModule?.sectionList[template.component]?.includes(field.key);
+  const { modulesToPaste, unavailableModules } = getModulesToPaste(
+    moduleCopy,
+    whiteList,
+    availableDataPacks,
+    template,
+    field
+  );
 
   const type = getTypefromKey(objKey);
   const { contentType = type } = field;
   const { isOpen, toggleModal } = useModal();
+  const [isBulkOpen, setIsBulkOpen] = useState(false);
+  const [draggingId, setDraggingId] = useState<number | null>(null);
+  const { isVisible, toggleToast, setIsVisible, state: toastState } = useToast();
 
-  let addModuleAction: any;
-  let addComponentAction: any;
-  let deleteModuleAction: any;
-  let replaceElementsInCollectionAction: any;
-
-  if (actions) {
-    addModuleAction = actions.addModuleAction;
-    addComponentAction = actions.addComponentAction;
-    deleteModuleAction = actions.deleteModuleAction;
-    replaceElementsInCollectionAction = actions.replaceElementsInCollectionAction;
-  }
+  const { resetBulkSelection, selectedItems, isSelected, checkState, addToBulkSelection, selectAllItems } =
+    useBulkSelection(componentIDs);
 
-  // fix for old not array values
-  const fixedValue = Array.isArray(value) ? value : containerToComponentArray(value);
+  useEffect(() => {
+    if (selectedItems.all.length) {
+      setIsBulkOpen(true);
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [selectedItems.all]);
 
   const getText = (name: string, index: number) => {
     return fixedValue.length > 1 ? `#${index + 1} ${name}` : name;
@@ -73,7 +82,8 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   const isComponentModule = contentType === "components";
   const isModuleArr = contentType === "modules";
 
-  const handleAddModule = (moduleType: string) => addModuleAction(moduleType, objKey, editorID, isComponentModule);
+  const handleAddModule = (moduleType: string) =>
+    addModuleAction && addModuleAction(moduleType, objKey, editorID, isComponentModule);
 
   const handleAddComponent = (componentType: string) => addComponentAction && addComponentAction(componentType, objKey);
 
@@ -81,27 +91,23 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
 
   const handleModuleReplace = (moduleType: string) => {
     const { modules } = selectedContent;
-    if (isModuleArr) {
-      const currentModule = modules[0];
-      deleteModuleAction(currentModule?.editorID, contentType);
+    if (isModuleArr && deleteModuleAction && modules?.length > 0) {
+      const currentModule: IModule = modules[0];
+      deleteModuleAction([currentModule.editorID], contentType);
       handleAddModule(moduleType);
     } else {
-      replaceElementsInCollectionAction(moduleType);
+      replaceElementsInCollectionAction && replaceElementsInCollectionAction(moduleType);
     }
   };
 
-  const getTimeSinceModuleCopy = (moduleCopy: { date: string; element: Record<string, any> }) =>
-    differenceInSeconds(new Date(), new Date(moduleCopy.date));
+  const selectItems = () => (checkState.isAllSelected ? resetBulkSelection() : selectAllItems());
 
   const showAddItemButton = (!maxItems || fixedValue.length < maxItems) && !disabled;
-  const eightHoursInSeconds = 8 * 60 * 60;
 
-  const showPasteModuleButton: boolean =
+  const showPasteModuleButton =
     showAddItemButton &&
     (isModuleArr || objKey === "componentModules") &&
-    !!moduleCopy &&
-    getTimeSinceModuleCopy(moduleCopy) < eightHoursInSeconds &&
-    (whiteList.includes(moduleCopyComponent) || isModuleCopyUnavailable);
+    (modulesToPaste.length > 0 || unavailableModules.length > 0);
 
   const canReplace = maxItems === 1 && whiteList.length > 1;
   const displayReplaceSideModal = fixedValue.length > 0 && canReplace;
@@ -110,7 +116,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   const Asterisk = () => (mandatory ? <S.Asterisk>*</S.Asterisk> : null);
 
   const ComponentList = React.memo(function ComponentList({ components }: any) {
-    return components.map((element: any, i: number) => {
+    return components.map((element: IModule, i: number) => {
       const { editorID } = element;
       const { moduleTitle, isModuleDeactivated, componentTitle, displayName, isModule } = getComponentProps(
         element,
@@ -118,9 +124,14 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
         isModuleArr
       );
       const text = getText(componentTitle || displayName, i);
+      const isItemSelected = isSelected(editorID);
+      const isDraggingSelected = selectedItems.all.includes(draggingId);
+      const isGhosting = isItemSelected && !!draggingId && draggingId !== editorID && isDraggingSelected;
+      const isMultiDragging = selectedItems.all.length > 1 && draggingId === editorID;
+
       return (
         <Draggable draggableId={`${editorID}`} index={i} key={editorID}>
-          {(provided) => (
+          {(provided, snapshot) => (
             <ComponentContainer
               actionReplace={toggleModal}
               canReplace={canReplace}
@@ -142,6 +153,13 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
               innerRef={provided.innerRef}
               provided={provided}
               isModule={isModule}
+              isSelected={isItemSelected}
+              onChange={addToBulkSelection}
+              hasMenu={selectedItems.all.length > 0}
+              toggleToast={toggleToast}
+              isMultiDragging={snapshot.isDragging && isMultiDragging}
+              draggingCount={selectedItems.all.length}
+              className={`${isGhosting ? "ghosting" : ""} ${snapshot.isDragging && isMultiDragging ? "dragging" : ""}`}
             />
           )}
         </Draggable>
@@ -150,17 +168,69 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
   });
 
   const onDragEnd = (result: DropResult) => {
-    const { moveModuleAction } = actions;
+    const { moveModuleAction } = actions || {};
 
-    if (!result.destination) {
+    if (!moveModuleAction || !result.destination || result.destination.index === result.source.index) {
+      setDraggingId(null);
       return;
     }
 
-    if (result.destination.index === result.source.index) {
-      return;
+    if (selectedItems.all.length > 0 && selectedItems.all.includes(parseInt(result.draggableId))) {
+      moveModuleAction(selectedItems.all, selectedContent, result.destination.index, objKey);
+    } else {
+      moveModuleAction([parseInt(result.draggableId)], selectedContent, result.destination.index, objKey);
+    }
+
+    setDraggingId(null);
+  };
+
+  const onBeforeCapture = (start: BeforeCapture) => setDraggingId(parseInt(start.draggableId));
+
+  const handleCopy = () => {
+    const isCopied = copyModuleAction && copyModuleAction(selectedItems.all);
+    isCopied &&
+      toggleToast(`${selectedItems.all.length} module${selectedItems.all.length > 1 ? "s" : ""} copied to clipboard`);
+  };
+
+  const handleDuplicate = () => {
+    if (maxItems && maxItems - fixedValue.length < selectedItems.all.length) {
+      const notification: INotification = {
+        type: "error",
+        text: "Unable to duplicate modules: The destination area has a limit on the number of modules allowed. Please adjust the selection accordingly.",
+      };
+      setNotificationAction && setNotificationAction(notification);
+    } else {
+      duplicateModuleAction && duplicateModuleAction(selectedItems.all, objKey);
+      resetBulkSelection();
     }
+  };
 
-    moveModuleAction(parseInt(result.draggableId), selectedContent, result.destination.index, objKey);
+  const handleDelete = () => {
+    deleteModuleAction && deleteModuleAction(selectedItems.all, objKey);
+    resetBulkSelection();
+  };
+
+  const bulkActions = [
+    {
+      icon: "copy",
+      text: "copy",
+      action: handleCopy,
+    },
+    {
+      icon: "duplicate",
+      text: "duplicate",
+      action: handleDuplicate,
+    },
+    {
+      icon: "delete",
+      text: "delete",
+      action: handleDelete,
+    },
+  ];
+
+  const toggleBulk = () => {
+    setIsBulkOpen(false);
+    resetBulkSelection();
   };
 
   return (
@@ -169,16 +239,28 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
         {title} <Asterisk />
       </S.Title>
       <S.ItemRow>
-        <S.Subtitle>{fixedValue && fixedValue.length} items</S.Subtitle>
+        {isBulkOpen ? (
+          <BulkHeader
+            selectItems={selectItems}
+            checkState={checkState}
+            totalItems={selectedItems.all.length}
+            toggleBulk={toggleBulk}
+            actions={bulkActions}
+          />
+        ) : (
+          <S.Subtitle>{fixedValue?.length || 0} items</S.Subtitle>
+        )}
         <S.ActionsWrapper data-testid="mixableComponentWrapper">
-          {showPasteModuleButton && (
+          {showPasteModuleButton && pasteModuleAction && (
             <PasteModuleButton
               editorID={editorID}
-              isModuleCopyUnavailable={isModuleCopyUnavailable}
-              pasteModule={actions.pasteModuleAction}
-              setNotification={actions.setNotificationAction}
+              isModuleCopyUnavailable={unavailableModules.length > 0}
+              pasteModule={pasteModuleAction}
+              setNotification={setNotificationAction}
               setHistoryPush={setHistoryPush}
               arrayKey={objKey}
+              modulesToPaste={modulesToPaste}
+              slots={maxItems ? maxItems - fixedValue.length : null}
             />
           )}
           {showAddItemButton && !disabled && (
@@ -195,7 +277,7 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
         </S.ActionsWrapper>
       </S.ItemRow>
       {fixedValue && (
-        <DragDropContext onDragEnd={onDragEnd}>
+        <DragDropContext onDragEnd={onDragEnd} onBeforeCapture={onBeforeCapture}>
           <Droppable droppableId="list">
             {(provided) => (
               <div ref={provided.innerRef} {...provided.droppableProps}>
@@ -218,27 +300,39 @@ const MixableComponentArray = (props: IMixableComponentArrayProps): JSX.Element
           showSearch
         />
       )}
+      {isVisible && <Toast message={toastState} setIsVisible={setIsVisible} />}
     </S.Wrapper>
   );
 };
 
 export interface IMixableComponentArrayProps {
-  maxItems: number;
+  maxItems?: number;
   title: string;
-  whiteList: any[];
+  whiteList: string[];
   value?: IModule[];
   selectedContent: any;
   editorID: number;
   goTo: (editorID: string) => void;
-  actions: any;
+  actions?: {
+    addComponentAction: (componentType: any, key?: string) => void;
+    addModuleAction: (moduleType: string, key: string, selectedID: number, isComponentModule?: boolean) => void;
+    deleteModuleAction: (editorID: number[], key?: string) => void;
+    duplicateModuleAction: (editorID: number[], key?: string) => number;
+    copyModuleAction: (editorID: number[]) => boolean;
+    replaceElementsInCollectionAction: (newValue: string, reference?: string) => void;
+    moveModuleAction: (moduleID: number[], selectedContent: any, newIndex: number, key: string) => void;
+    pasteModuleAction: (editorID: number, key: string, modulesToPaste: IModule[]) => Promise<{ error?: INotification }>;
+    setNotificationAction: (notification: INotification) => void;
+    replaceModuleAction: (module: any, parent: any, objKey: string) => void;
+  };
   categories?: any;
   disabled?: boolean;
   activatedModules: string[];
   objKey: string;
-  field: any;
+  field: ISchemaField;
   mandatory?: boolean;
   theme: string;
-  moduleCopy: { date: string; element: Record<string, any> } | null;
+  moduleCopy: { date: Date; elements: IModule[] } | null;
   availableDataPacks: Record<string, any>[];
   template: any;
   setHistoryPush?: (path: string, isEditor: boolean) => void;

package/src/components/Fields/ComponentArray/SameComponentArray/index.tsx

@@ -69,7 +69,7 @@ const SameComponentArray = (props: ISameComponentArrayProps): JSX.Element => {
       return;
     }
 
-    moveModuleAction(parseInt(result.draggableId), selectedContent, result.destination.index, objKey);
+    moveModuleAction([parseInt(result.draggableId)], selectedContent, result.destination.index, objKey);
   };
 
   const ComponentList = React.memo(function ComponentList({ components }: any) {

package/src/components/Fields/ComponentArray/helpers.tsx

@@ -1,5 +1,6 @@
+import differenceInSeconds from "date-fns/differenceInSeconds";
 import { getSchema, getDisplayName, getSchemaType, isComponentEmpty } from "@ax/helpers";
-import { IComponent } from "@ax/types";
+import { IComponent, IModule, ISchemaField } from "@ax/types";
 
 const getComponentTitle = (component: string, title: any) => {
   if (!title) return;
@@ -13,7 +14,7 @@ const getComponentTitle = (component: string, title: any) => {
   return defaultTitle === title ? displayName : title;
 };
 
-const getComponentProps = (element: any, activatedModules: string[], isModuleArr: boolean) => {
+const getComponentProps = (element: IModule, activatedModules: string[], isModuleArr: boolean) => {
   const { component } = element;
   const schemaType = getSchemaType(component);
   const displayName = getDisplayName(component);
@@ -27,7 +28,7 @@ const getComponentProps = (element: any, activatedModules: string[], isModuleArr
 };
 
 const containerToComponentArray = (value?: Record<string, IComponent>): IComponent[] =>
-  value ? Object.values(value).filter((item: IComponent) => !isComponentEmpty(item)): [];
+  value ? Object.values(value).filter((item: IComponent) => !isComponentEmpty(item)) : [];
 
 const getTypefromKey = (key: string) => {
   switch (key) {
@@ -41,4 +42,44 @@ const getTypefromKey = (key: string) => {
   }
 };
 
-export { getComponentTitle, getComponentProps, containerToComponentArray, getTypefromKey };
+const getTimeSinceModuleCopy = (moduleCopy: { date: Date; elements: IModule[] }) =>
+  differenceInSeconds(new Date(), new Date(moduleCopy.date));
+
+const getModulesToPaste = (
+  moduleCopy: { date: Date; elements: IModule[] } | null,
+  whiteList: string[],
+  availableDataPacks: Record<string, any>[],
+  template: any,
+  field: ISchemaField
+) => {
+  const modulesToPaste: IModule[] = [];
+  const unavailableModules: IModule[] = [];
+  const eightHoursInSeconds = 8 * 60 * 60;
+
+  if (moduleCopy && getTimeSinceModuleCopy(moduleCopy) < eightHoursInSeconds) {
+    moduleCopy.elements.forEach((element) => {
+      const { component } = element;
+
+      const availableDataPackModule = availableDataPacks?.reduce((prev: any, curr: any) => {
+        const packModule = curr.modules.find((module: any) => module.id === component);
+        return prev || packModule;
+      }, null);
+
+      if (
+        availableDataPackModule &&
+        !whiteList.includes(component) &&
+        !!availableDataPackModule?.sectionList[template.component]?.includes(field.key)
+      ) {
+        unavailableModules.push(element);
+      }
+
+      if (whiteList.includes(component)) {
+        modulesToPaste.push(element);
+      }
+    });
+  }
+
+  return { modulesToPaste, unavailableModules };
+};
+
+export { getComponentTitle, getComponentProps, containerToComponentArray, getTypefromKey, getModulesToPaste };

package/src/components/Fields/ComponentContainer/EmptyContainer/index.tsx

@@ -33,11 +33,11 @@ const EmptyContainer = (props: IProps) => {
 interface IProps {
   hasMultipleOptions: boolean | undefined;
   whiteList: any[] | undefined;
-  goTo?: any;
+  goTo: () => void;
   componentOptions: any;
   title?: string;
   categories?: any;
-  handleAdd: any;
+  handleAdd: (option: any) => void;
   theme: string;
 }
 

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

@@ -1,9 +1,10 @@
 import React from "react";
 import { DraggableProvided } from "react-beautiful-dnd";
 
-import { useModal, useToast } from "@ax/hooks";
+import { useModal } from "@ax/hooks";
 import { isEmptyContainer, getDisplayName, trimText } from "@ax/helpers";
-import { Icon, SideModal, Toast } from "@ax/components";
+import { CheckField, Icon, SideModal } from "@ax/components";
+import { ICheck } from "@ax/types";
 import EmptyContainer from "./EmptyContainer";
 import { ArrayContainerButtons, ContainerButtons } from "./atoms";
 
@@ -33,19 +34,19 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     innerRef,
     provided,
     isModule,
+    isSelected,
+    onChange,
+    hasMenu = true,
+    toggleToast,
+    className,
+    isMultiDragging = false,
+    draggingCount = 0,
   } = props;
 
-  const { isVisible, toggleToast, setIsVisible } = useToast();
+  const { addComponentAction, deleteModuleAction, duplicateModuleAction, copyModuleAction, replaceModuleAction } =
+    actions || {};
 
-  let deleteModuleAction: any;
-  let duplicateModuleAction: any;
-  let copyModuleAction: any;
-
-  if (actions) {
-    deleteModuleAction = actions.deleteModuleAction;
-    duplicateModuleAction = actions.duplicateModuleAction;
-    copyModuleAction = actions.copyModuleAction;
-  }
+  const { isOpen, toggleModal } = useModal();
 
   const whiteListFirstItem: any = whiteList && whiteList[0];
   const hasMultipleOptions: boolean | undefined = whiteList && whiteList.length > 1;
@@ -66,21 +67,21 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     componentID = currentComponent.componentID;
   }
 
-  const { isOpen, toggleModal } = useModal();
-
-  const handleEmptyContainerClick = () => actions.addComponentAction && actions.addComponentAction(value);
-
   const handleClick = () => {
     if (!disabled) {
       goTo(componentID);
     }
   };
 
-  const removeItem = () => deleteModuleAction(editorID, parentKey);
-  const duplicateItem = () => parentKey && duplicateModuleAction(editorID, parentKey);
+  const handleCheckClick = (e: React.MouseEvent<HTMLDivElement>) => e.stopPropagation();
+
+  const removeItem = () => deleteModuleAction && deleteModuleAction([editorID], parentKey);
+
+  const duplicateItem = () => parentKey && duplicateModuleAction && duplicateModuleAction([editorID], parentKey);
+
   const copyItem = () => {
-    const isCopied = copyModuleAction(editorID);
-    isCopied && toggleToast();
+    const isCopied = copyModuleAction && copyModuleAction([editorID]);
+    isCopied && toggleToast && toggleToast("1 module copied to clipboard");
   };
 
   const copyOpt = {
@@ -124,16 +125,38 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
 
   const actionMenuIcon = "more";
 
-  const handleOptionClick = (option: any) => actions.addComponentAction(option);
+  const handleEmptyContainerClick = () => {
+    if (addComponentAction) addComponentAction(value);
+  };
+
+  const handleOptionClick = (option: any) => {
+    if (addComponentAction) addComponentAction(option);
+  };
 
   const compoundKey = parentKey ? `${parentKey}.${objKey}` : objKey;
-  const handleReplace = (option: any) => actions.replaceModuleAction(option, selectedContent, compoundKey);
+  const handleReplace = (option: any) =>
+    compoundKey && replaceModuleAction && replaceModuleAction(option, selectedContent, compoundKey);
 
   const arrayContainerButtonsProps = {
     options: actionArrayMenuOptions,
     icon: actionMenuIcon,
   };
 
+  const handleChange = (value: ICheck) => onChange && onChange(value);
+
+  const textComponents = isMultiDragging ? (
+    <S.LabelDrag>
+      Dragging <span>{draggingCount}</span> modules
+    </S.LabelDrag>
+  ) : (
+    <>
+      <S.Label containerInfo={containerInfo} disabled={disabled}>
+        {trimText(containerText, 25)}
+      </S.Label>
+      {moduleTitle && <S.Title disabled={disabled}>{trimText(moduleTitle, 25)}</S.Title>}
+    </>
+  );
+
   return isEmpty ? (
     <EmptyContainer
       whiteList={whiteList}
@@ -149,7 +172,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
     <>
       <S.Component
         disabled={disabled}
-        className={`editorId-${editorID}`}
+        className={`editorId-${editorID} ${className}`}
         onClick={handleClick}
         ref={innerRef}
         data-testid="component-container"
@@ -162,18 +185,18 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
             </S.IconHandleWrapper>
           </S.HandleWrapper>
         )}
+        {isArray && !isMultiDragging && arrayLength > 1 && (
+          <S.CheckWrapper onClick={handleCheckClick}>
+            <CheckField name="check" value={editorID} checked={isSelected} onChange={handleChange} light={true} />
+          </S.CheckWrapper>
+        )}
         {containerInfo && !disabled && (
           <S.IconWrapper data-testid="icon-wrapper">
             <Icon name={containerText} />
           </S.IconWrapper>
         )}
-        <S.Text>
-          <S.Label containerInfo={containerInfo} disabled={disabled}>
-            {trimText(containerText, 35)}
-          </S.Label>
-          {moduleTitle && <S.Title disabled={disabled}>{trimText(moduleTitle, 35)}</S.Title>}
-        </S.Text>
-        {isArray && !disabled && <ArrayContainerButtons {...arrayContainerButtonsProps} />}
+        <S.Text>{textComponents}</S.Text>
+        {isArray && !disabled && !hasMenu && <ArrayContainerButtons {...arrayContainerButtonsProps} />}
         {!isArray && !disabled && hasMultipleOptions && (
           <ContainerButtons options={actionMenuOptions} icon={actionMenuIcon} />
         )}
@@ -191,7 +214,6 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
           theme={theme}
         />
       )}
-      {isVisible && <Toast message="1 module copied to clipboard" setIsVisible={setIsVisible} />}
     </>
   );
 };
@@ -199,7 +221,7 @@ const ComponentContainer = (props: IComponentContainerProps): JSX.Element => {
 export interface IComponentContainerProps {
   text: string;
   editorID: number;
-  whiteList: any[] | undefined;
+  whiteList: string[] | undefined;
   categories?: any[];
   goTo: any;
   isArray?: boolean | undefined;
@@ -208,7 +230,13 @@ export interface IComponentContainerProps {
   moduleTitle?: string;
   selectedContent?: any;
   objKey?: string;
-  actions: any;
+  actions?: {
+    addComponentAction: (componentType: any, key?: string) => void;
+    deleteModuleAction: (editorID: number[], key?: string) => void;
+    duplicateModuleAction: (editorID: number[], key?: string) => number;
+    copyModuleAction: (editorID: number[]) => boolean;
+    replaceModuleAction: (module: any, parent: any, objKey: string) => void;
+  };
   disabled?: boolean;
   canDuplicate?: boolean;
   parentKey?: string;
@@ -219,6 +247,13 @@ export interface IComponentContainerProps {
   innerRef?: any;
   provided?: DraggableProvided;
   isModule?: boolean;
+  isSelected?: boolean;
+  onChange?: (value: ICheck) => void;
+  hasMenu?: boolean;
+  toggleToast?: (state: string) => void;
+  className?: string;
+  isMultiDragging?: boolean;
+  draggingCount?: number;
 }
 
 export default ComponentContainer;