@griddo/ax 11.4.25-rc.2 → 11.5.1-rc.0

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@griddo/ax",
   "description": "Griddo Author Experience",
-  "version": "11.4.25-rc.2",
+  "version": "11.5.1-rc.0",
   "authors": [
     "Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
     "Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -224,5 +224,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "3aff84e04046c963e37fb947c60f99a593b38027"
+  "gitHead": "1e296bcff6948ff5fa145ad0a2fc0529f9c5ad58"
 }

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

@@ -2,12 +2,25 @@ import React, { memo } from "react";
 
 import { FieldsBehavior } from "@ax/components";
 import { ILinkField, IUrlField } from "@ax/types";
+import { getNullValue } from "@ax/helpers";
 
 const LinkField = (props: ILinkFieldProps): JSX.Element => {
   const { value, onChange, disabled, whiteList, goTo, theme, actions, selectedContent, objKey } = props;
 
   const handleTextChange = (newValue: string) => onChange({ ...value, text: newValue });
-  const handleLinkTypeChange = (newValue: string) => onChange({ ...value, linkType: newValue });
+  const handleLinkTypeChange = (newValue: string) => {
+    let newObjValue: ILinkField = { ...value, linkType: newValue };
+
+    if (newValue === "url") {
+      newObjValue = { ...newObjValue, modal: getNullValue(newObjValue.modal, true) };
+    }
+
+    if (newValue === "modal") {
+      newObjValue = { ...newObjValue, url: null };
+    }
+
+    onChange(newObjValue);
+  };
   const handleUrlChange = (newValue: IUrlField) => onChange({ ...value, url: newValue });
   const handleModalChange = (newValue: any) => onChange({ ...value, modal: newValue });
 

package/src/components/FileGallery/index.tsx

@@ -79,20 +79,20 @@ const FileGallery = (props: IProps): JSX.Element => {
   const allowedToAddSiteFile = usePermission("mediaGallery.addFiles");
   const allowedToAddGlobalFile = usePermission("global.mediaGallery.addGlobalFiles");
   const allowedToAddGlobalFileFromSite = usePermission("mediaGallery.addGlobalFilesFromSite");
-  const allowedToAddFile = isTabGlobal
-    ? allowedToAddGlobalFileFromSite
-    : isSiteView
-      ? allowedToAddSiteFile
-      : allowedToAddGlobalFile;
+  const allowedToAddFile = !isSiteView
+    ? allowedToAddGlobalFile
+    : isTabGlobal
+      ? allowedToAddGlobalFileFromSite
+      : allowedToAddSiteFile;
 
   const allowedToEditSiteFile = usePermission("mediaGallery.editFilesss");
   const allowedToEditGlobalFile = usePermission("global.mediaGallery.editGlobalFiles");
   const allowedToEditGlobalFileFromSite = usePermission("mediaGallery.editGlobalFilesInSite");
-  const allowedToEditFile = isTabGlobal
-    ? allowedToEditGlobalFileFromSite
-    : isSiteView
-      ? allowedToEditSiteFile
-      : allowedToEditGlobalFile;
+  const allowedToEditFile = !isSiteView
+    ? allowedToEditGlobalFile
+    : isTabGlobal
+      ? allowedToEditGlobalFileFromSite
+      : allowedToEditSiteFile;
 
   const tabs: string[] = [];
   if (isSiteView && allowedToAccessGlobalFromSite) {
@@ -193,6 +193,13 @@ const FileGallery = (props: IProps): JSX.Element => {
     message: "No documents found in this folder.",
   };
 
+  const filters = (
+    <>
+      <Type filterItems={filterItems} value={filterValues["filterType"]} />
+      <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
+    </>
+  );
+
   return (
     <S.Wrapper data-testid="file-gallery-wrapper">
       <S.FolderPanel isOpen={isPanelOpen} ref={ref}>
@@ -209,13 +216,11 @@ const FileGallery = (props: IProps): JSX.Element => {
                 <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
               </S.TabsWrapper>
             )}
-            <S.Filters>
-              <Type filterItems={filterItems} value={filterValues["filterType"]} />
-              <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
-            </S.Filters>
+            <S.Filters>{filters}</S.Filters>
           </S.Header>
         )}
         <S.Search>
+          {!isSiteView && <S.FiltersGlobal>{filters}</S.FiltersGlobal>}
           <SearchField
             onChange={setSearchQuery}
             value={searchQuery}

package/src/components/FileGallery/style.tsx

@@ -45,6 +45,7 @@ const Header = styled.div`
 `;
 
 const Search = styled.div`
+  display: flex;
   padding: ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.m};
   border-right: 1px solid ${(p) => p.theme.color.uiLine};
   background-color: ${(p) => p.theme.color.uiBackground02};
@@ -62,15 +63,27 @@ const Filters = styled.div`
   }
 `;
 
+const FiltersGlobal = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${(p) => p.theme.spacing.l};
+  & > * {
+    margin-right: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
 const TabsWrapper = styled.div`
   width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
 `;
 
 const GalleryWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
   position: relative;
   background-color: ${(p) => p.theme.color.uiBackground01};
   overflow: auto;
   padding: ${(p) => `0 ${p.theme.spacing.m} ${p.theme.spacing.m} ${p.theme.spacing.m}`};
+  height: 100%;
 `;
 
 const Grid = styled.div`
@@ -167,11 +180,11 @@ const ResizeHandle = styled.div`
 `;
 
 const SearchTags = styled.div`
-  & > div:nth-child(1){
-    margin-top: ${p => p.theme.spacing.m};
+  & > div:nth-child(1) {
+    margin-top: ${(p) => p.theme.spacing.m};
   }
-  & > div:nth-child(2){
-    margin-top: ${p => p.theme.spacing.xs};
+  & > div:nth-child(2) {
+    margin-top: ${(p) => p.theme.spacing.xs};
   }
 `;
 
@@ -197,4 +210,5 @@ export {
   FoldersIconWrapper,
   ResizeHandle,
   SearchTags,
+  FiltersGlobal,
 };

package/src/components/Gallery/index.tsx

@@ -87,20 +87,21 @@ const Gallery = (props: IProps): JSX.Element => {
   const allowedToAddSiteFile = usePermission("mediaGallery.addImages");
   const allowedToAddGlobalFile = usePermission("global.mediaGallery.addGlobalImages");
   const allowedToAddGlobalFileFromSite = false;
-  const allowedToAddFile = isTabGlobal
-    ? allowedToAddGlobalFileFromSite
-    : isSiteView
-      ? allowedToAddSiteFile
-      : allowedToAddGlobalFile;
+  const allowedToAddFile = !isSiteView
+    ? allowedToAddGlobalFile
+    : isTabGlobal
+      ? allowedToAddGlobalFileFromSite
+      : allowedToAddSiteFile;
 
   const allowedToEditSiteFile = usePermission("mediaGallery.editImages");
   const allowedToEditGlobalFile = usePermission("global.mediaGallery.editGlobalImages");
   const allowedToEditGlobalFileFromSite = false;
-  const allowedToEditFile = isTabGlobal
-    ? allowedToEditGlobalFileFromSite
-    : isSiteView
-      ? allowedToEditSiteFile
-      : allowedToEditGlobalFile;
+
+  const allowedToEditFile = !isSiteView
+    ? allowedToEditGlobalFile
+    : isTabGlobal
+      ? allowedToEditGlobalFileFromSite
+      : allowedToEditSiteFile;
 
   const tabs: string[] = [];
   if (isSiteView && allowedToAccessGlobalFromSite) {
@@ -212,6 +213,14 @@ const Gallery = (props: IProps): JSX.Element => {
     message: "No images found in this folder.",
   };
 
+  const filters = (
+    <>
+      <Orientation filterItems={filterItems} />
+      <Type filterItems={filterItems} />
+      <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
+    </>
+  );
+
   return (
     <S.Wrapper data-testid="image-gallery-wrapper">
       <S.FolderPanel isOpen={isPanelOpen} ref={ref}>
@@ -228,14 +237,11 @@ const Gallery = (props: IProps): JSX.Element => {
                 <Tabs tabs={tabs} active={selectedTab} setSelectedTab={handleSelectedTab} noMargins />
               </S.TabsWrapper>
             )}
-            <S.Filters>
-              <Orientation filterItems={filterItems} />
-              <Type filterItems={filterItems} />
-              <SortBy sortItems={sortItems} sortedState={sortedListStatus} />
-            </S.Filters>
+            <S.Filters>{filters}</S.Filters>
           </S.Header>
         )}
         <S.Search>
+          {!isSiteView && <S.FiltersGlobal>{filters}</S.FiltersGlobal>}
           <SearchField
             onChange={setSearchQuery}
             value={searchQuery}

package/src/components/Gallery/style.tsx

@@ -45,6 +45,7 @@ const Header = styled.div`
 `;
 
 const Search = styled.div`
+  display: flex;
   padding: ${(p) => p.theme.spacing.s} ${(p) => p.theme.spacing.m};
   border-right: 1px solid ${(p) => p.theme.color.uiLine};
   background-color: ${(p) => p.theme.color.uiBackground02};
@@ -62,6 +63,16 @@ const Filters = styled.div`
   }
 `;
 
+const FiltersGlobal = styled.div`
+  display: flex;
+  align-items: center;
+  margin-right: ${(p) => p.theme.spacing.l};
+  margin-left: ${(p) => `-${p.theme.spacing.s}`};
+  & > * {
+    margin-right: ${(p) => p.theme.spacing.xs};
+  }
+`;
+
 const TabsWrapper = styled.div`
   width: ${(p) => `calc(${p.theme.spacing.xl} * 3)`};
 `;
@@ -258,4 +269,5 @@ export {
   SearchTags,
   ImageWrapper,
   IconWrapper,
+  FiltersGlobal,
 };

package/src/helpers/images.tsx

@@ -63,14 +63,15 @@ const getImageFromHtml = async (html: HTMLDivElement, fileName: string): Promise
 
 const getImageFromIFrame = async (html: HTMLDivElement, fileName: string): Promise<File | null> => {
   const frameOBject = html.querySelector<HTMLIFrameElement>(".frame-content");
-  const frameContent = frameOBject?.contentWindow?.document.body;
+  const frameContentFirst = frameOBject?.contentWindow?.document.getElementById("___griddo")?.firstChild as HTMLElement;
+  const frameContentId = frameOBject?.contentWindow?.document.getElementById("griddoFormThumb") as HTMLElement;
+
+  const frameContent = frameContentId || frameContentFirst;
 
   if (!frameContent) {
     return null;
   }
 
-  frameContent.removeChild(frameContent.childNodes[1]);
-
   const { height } = getComputedStyle(frameContent);
   const fullHeight = frameContent?.scrollHeight;
 

package/src/modules/FileDrive/FileFilters/SortBy/style.tsx

@@ -5,6 +5,9 @@ import { Header } from "@ax/components/TableList/style";
 const SortBy = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 100%;
   cursor: pointer;
+  flex-shrink: 0;
+  white-space: nowrap;
+  flex-wrap: nowrap;
   &:hover {
     color: ${(p) => p.theme.color.interactive01};
   }

package/src/modules/FileDrive/index.tsx

@@ -146,29 +146,29 @@ const FileDrive = (props: IProps) => {
   const allowedToAddSiteFile = usePermission("mediaGallery.addFiles");
   const allowedToAddGlobalFile = usePermission("global.mediaGallery.addGlobalFiles");
   const allowedToAddGlobalFileFromSite = usePermission("mediaGallery.addGlobalFilesFromSite");
-  const allowedToAddFile = isTabGlobal
-    ? allowedToAddGlobalFileFromSite
-    : isSiteView
-      ? allowedToAddSiteFile
-      : allowedToAddGlobalFile;
+  const allowedToAddFile = !isSiteView
+    ? allowedToAddGlobalFile
+    : isTabGlobal
+      ? allowedToAddGlobalFileFromSite
+      : allowedToAddSiteFile;
 
   const allowedToEditSiteFile = usePermission("mediaGallery.editFiles");
   const allowedToEditGlobalFile = usePermission("global.mediaGallery.editGlobalFiles");
   const allowedToEditGlobalFileFromSite = usePermission("mediaGallery.editGlobalFilesInSite");
-  const allowedToEditFile = isTabGlobal
-    ? allowedToEditGlobalFileFromSite
-    : isSiteView
-      ? allowedToEditSiteFile
-      : allowedToEditGlobalFile;
+  const allowedToEditFile = !isSiteView
+    ? allowedToEditGlobalFile
+    : isTabGlobal
+      ? allowedToEditGlobalFileFromSite
+      : allowedToEditSiteFile;
 
   const allowedToDeleteSiteFile = usePermission("mediaGallery.deleteFiles");
   const allowedToDeleteGlobalFile = usePermission("global.mediaGallery.deleteGlobalFiles");
   const allowedToDeleteGlobalFileFromSite = usePermission("mediaGallery.deleteGlobalFilesInSite");
-  const allowedToDeleteFile = isTabGlobal
-    ? allowedToDeleteGlobalFileFromSite
-    : isSiteView
-      ? allowedToDeleteSiteFile
-      : allowedToDeleteGlobalFile;
+  const allowedToDeleteFile = !isSiteView
+    ? allowedToDeleteGlobalFile
+    : isTabGlobal
+      ? allowedToDeleteGlobalFileFromSite
+      : allowedToDeleteSiteFile;
 
   const getParams = useCallback(() => {
     const params = {

package/src/modules/MediaGallery/index.tsx

@@ -128,29 +128,30 @@ const MediaGallery = (props: IProps) => {
   const allowedToAddSiteFile = usePermission("mediaGallery.addImages");
   const allowedToAddGlobalFile = usePermission("global.mediaGallery.addGlobalImages");
   const allowedToAddGlobalFileFromSite = false;
-  const allowedToAddFile = isTabGlobal
-    ? allowedToAddGlobalFileFromSite
-    : isSiteView
-      ? allowedToAddSiteFile
-      : allowedToAddGlobalFile;
+  const allowedToAddFile = !isSiteView
+    ? allowedToAddGlobalFile
+    : isTabGlobal
+      ? allowedToAddGlobalFileFromSite
+      : allowedToAddSiteFile;
 
   const allowedToEditSiteFile = usePermission("mediaGallery.editImages");
   const allowedToEditGlobalFile = usePermission("global.mediaGallery.editGlobalImages");
   const allowedToEditGlobalFileFromSite = false;
-  const allowedToEditFile = isTabGlobal
-    ? allowedToEditGlobalFileFromSite
-    : isSiteView
-      ? allowedToEditSiteFile
-      : allowedToEditGlobalFile;
+  const allowedToEditFile = !isSiteView
+    ? allowedToEditGlobalFile
+    : isTabGlobal
+      ? allowedToEditGlobalFileFromSite
+      : allowedToEditSiteFile;
 
   const allowedToDeleteSiteFile = usePermission("mediaGallery.deleteImages");
   const allowedToDeleteGlobalFile = usePermission("global.mediaGallery.deleteGlobalImages");
   const allowedToDeleteGlobalFileFromSite = false;
-  const allowedToDeleteFile = isTabGlobal
-    ? allowedToDeleteGlobalFileFromSite
-    : isSiteView
-      ? allowedToDeleteSiteFile
-      : allowedToDeleteGlobalFile;
+
+  const allowedToDeleteFile = !isSiteView
+    ? allowedToDeleteGlobalFile
+    : isTabGlobal
+      ? allowedToDeleteGlobalFileFromSite
+      : allowedToDeleteSiteFile;
 
   const getParams = useCallback(() => {
     const params: IGetFolderParams = {

package/src/types/index.tsx

@@ -924,7 +924,7 @@ export interface INotification {
 export interface ILinkField {
   text: string;
   linkType: string;
-  url: IUrlField;
+  url?: IUrlField | null;
   modal: any;
 }