@griddo/ax 10.4.5 → 10.4.6

package/package.json

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

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

@@ -88,7 +88,7 @@ const AsyncSelect = (props: IAsyncSelectProps): JSX.Element => {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [entity, site, lang, selectedContent, entityId, mandatory, placeholder, filter, isCategories, isPage, options]);
 
-  const handleChange = (selectedValue: ICheck | IOption | null) => {
+  const handleChange = (selectedValue: ICheck | IOption | null) => {
     const newValue = selectedValue ? selectedValue.value : selectedValue;
     onChange(newValue);
   };

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

@@ -4,7 +4,7 @@ export const DatePickerWrapper = styled.div`
   .react-datepicker-popper,
   .react-datepicker-popper[data-placement^="bottom"],
   .react-datepicker-popper[data-placement^="bottom-start"] {
-    margin-top: 0
+    margin-top: 0;
     z-index: 2;
   }
 

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

@@ -27,24 +27,40 @@ const ImageField = (props: IImageFieldProps) => {
   const isModalOpen = isLinkableImage && !hasImage;
   const { isOpen, toggleModal } = useModal(isModalOpen);
   const [previewSrc, setPreviewSrc] = useState<string>();
-  const [imageHeight, setImageHeight] = useState<number>();
+  const [previewHeight, setPreviewHeight] = useState<{ height: string | number }>({ height: "auto" });
   const previewRef = useRef<HTMLDivElement>(null);
+  const [imageLoaded, setImageLoaded] = useState(false);
 
   const imageUrl = value ? (typeof value === "string" ? value : value.url) : "";
   const imagePosition = value && typeof value === "object" ? value.position : "center";
 
   useEffect(() => {
     setPreviewSrc(imageUrl);
+    setImageLoaded(false);
   }, [imageUrl]);
 
-  useEffect(() => {
+  const calculateImageHeight = () => {
     if (previewRef.current) {
-      setImageHeight(previewRef.current.clientHeight);
+      const height = previewRef.current.getBoundingClientRect().height;
+
+      if (!cropPreview && height < 180) {
+        setPreviewHeight({ height: "180px" });
+      } else {
+        setPreviewHeight({ height: "auto" });
+      }
+    }
+  };
+
+  const handleImageLoad = () => {
+    if (!imageLoaded) {
+      calculateImageHeight();
+      setImageLoaded(true);
     }
-  }, [previewRef.current]);
+  };
 
   const handleDelete = () => {
     if (!disabled) {
+      setPreviewHeight({ height: "auto" });
       setPreviewSrc("");
       onChange({});
     }
@@ -81,7 +97,6 @@ const ImageField = (props: IImageFieldProps) => {
     }
   };
 
-  const previewHeight = cropPreview || (imageHeight && imageHeight < 180) ? { height: 180 } : {};
   return (
     <>
       <S.FieldWrapper
@@ -108,7 +123,11 @@ const ImageField = (props: IImageFieldProps) => {
         </S.ImageDataWrapper>
       )}
       <S.Preview preview={!!previewSrc} data-testid="previewDiv" ref={previewRef}>
-        {previewSrc && <Image url={previewSrc} width={320} {...previewHeight} />}
+        {previewSrc && (
+          <S.ImageContainer style={{ height: previewHeight.height }}>
+            <Image url={previewSrc} width={320} onLoad={handleImageLoad} />
+          </S.ImageContainer>
+        )}
         <S.PositionWrapper>
           <S.PositionTitle>
             <Icon name="grid" size="16" />

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

@@ -84,13 +84,13 @@ const PositionGrid = styled.div`
   margin-top: ${(p) => p.theme.spacing.xs};
 `;
 
-const Position = styled.div<{active?: boolean}>`
+const Position = styled.div<{ active?: boolean }>`
   width: ${(p) => p.theme.spacing.m};
   height: ${(p) => p.theme.spacing.m};
   border-radius: ${(p) => p.theme.radii.xs};
-  background-color: ${(p) => p.active ? p.theme.color.interactive01 : p.theme.color.uiBackground03};
+  background-color: ${(p) => (p.active ? p.theme.color.interactive01 : p.theme.color.uiBackground03)};
   :hover {
-    background-color: ${(p) => p.active ? p.theme.color.interactive01 : p.theme.color.overlayPressedPrimary};
+    background-color: ${(p) => (p.active ? p.theme.color.interactive01 : p.theme.color.overlayPressedPrimary)};
   }
 `;
 
@@ -143,6 +143,12 @@ const ImageDataWrapper = styled.div`
   max-width: ${(p) => `calc(${p.theme.spacing.xl} * 5)`};
 `;
 
+const ImageContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+`;
+
 const FileName = styled.div`
   ${(p) => p.theme.textStyle.fieldLabel};
   margin-bottom: ${(p) => p.theme.spacing.xs};
@@ -160,6 +166,7 @@ export {
   PreviewActions,
   Preview,
   ImageDataWrapper,
+  ImageContainer,
   FileName,
   ImageData,
   PositionWrapper,

package/src/components/Modal/style.tsx

@@ -90,6 +90,10 @@ export const ButtonWrapper = styled.div`
 `;
 
 export const ModalFooter = styled.div`
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  width: 100%;
   background: ${(p) => p.theme.color.uiBackground01};
   display: flex;
   justify-content: flex-end;