@griddo/ax 11.10.11-rc.0 → 11.10.12-rc.0

package/src/components/Pagination/index.tsx

@@ -5,53 +5,58 @@ import { IconAction } from "@ax/components";
 import * as S from "./style";
 
 const Pagination = (props: IPaginationProps) => {
-  const { itemsPerPage, totalItems, setPage, currPage, size } = props;
-
-  const lastPage = Math.ceil(totalItems / itemsPerPage);
-  const isLastPage = currPage === lastPage;
-  const isFirstPage = currPage === 1;
-
-  const _handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    // tslint:disable-next-line: radix
-    const page = isNaN(parseInt(e.target.value)) ? 0 : parseInt(e.target.value);
-    setPage(page);
-  };
-
-  const handlePrev = () => {
-    if (currPage <= 1) return;
-
-    const prevPage = currPage - 1;
-
-    setPage(prevPage);
-  };
-
-  const handleNext = () => {
-    if (lastPage && currPage >= lastPage) return;
-
-    const nextPage = currPage + 1;
-
-    setPage(nextPage);
-  };
-
-  const CurrentPage = size === "S" ? currPage : <S.Input data-testid="pagination-text-input" type="text" value={currPage} onChange={_handleChange} />;
-
-  return (
-    <S.Wrapper data-testid="pagination-wrapper">
-      <S.Literal size={size} data-testid="pagination-label">
-        Page {CurrentPage} of {lastPage}
-      </S.Literal>
-      <IconAction icon="left-arrow" onClick={handlePrev} disabled={isFirstPage} />
-      <IconAction icon="right-arrow" onClick={handleNext} disabled={isLastPage} />
-    </S.Wrapper>
-  );
+	const { itemsPerPage, totalItems, setPage, currPage, size } = props;
+
+	const lastPage = Math.ceil(totalItems / itemsPerPage);
+	const isLastPage = currPage === lastPage;
+	const isFirstPage = currPage === 1;
+
+	const _handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+		// tslint:disable-next-line: radix
+		const page = isNaN(parseInt(e.target.value)) ? 0 : parseInt(e.target.value);
+		setPage(page);
+	};
+
+	const handlePrev = () => {
+		if (currPage <= 1) return;
+
+		const prevPage = currPage - 1;
+
+		setPage(prevPage);
+	};
+
+	const handleNext = () => {
+		if (lastPage && currPage >= lastPage) return;
+
+		const nextPage = currPage + 1;
+
+		setPage(nextPage);
+	};
+
+	const CurrentPage =
+		size === "S" ? (
+			currPage
+		) : (
+			<S.Input data-testid="pagination-text-input" type="text" value={currPage} onChange={_handleChange} />
+		);
+
+	return (
+		<S.Wrapper data-testid="pagination-wrapper">
+			<S.Literal size={size} data-testid="pagination-label">
+				Page {CurrentPage} of {lastPage}
+			</S.Literal>
+			<IconAction icon="left-arrow" onClick={handlePrev} disabled={isFirstPage} />
+			<IconAction icon="right-arrow" onClick={handleNext} disabled={isLastPage} />
+		</S.Wrapper>
+	);
 };
 
 export interface IPaginationProps {
-  setPage?: any;
-  itemsPerPage: number;
-  totalItems: number;
-  currPage: number;
-  size?: string;
+	setPage?: any;
+	itemsPerPage: number;
+	totalItems: number;
+	currPage: number;
+	size?: string;
 }
 
 export default Pagination;

package/src/components/Pagination/style.tsx

@@ -7,7 +7,7 @@ const Wrapper = styled.div`
 
 const Input = styled.input`
   width: ${(p) => p.theme.spacing.xl};
-  height: ${p => `calc(${p.theme.spacing.m} * 2)`};
+  height: ${(p) => `calc(${p.theme.spacing.m} * 2)`};
   padding: ${(p) => p.theme.spacing.s};
   margin: ${(p) => `0 ${p.theme.spacing.xs}`};
   border: ${(p) => `1px solid ${p.theme.color.uiLine}`};
@@ -20,14 +20,10 @@ const Input = styled.input`
   }
 `;
 
-const Literal = styled.div<{size?: string}>`
+const Literal = styled.div<{ size?: string }>`
   ${(p) => p.theme.textStyle.uiS};
   color: ${(p) => p.theme.colors.textMediumEmphasis};
-  margin-right: ${p => p.size==="S" ? p.theme.spacing.xs : `calc(${p.theme.spacing.s} * 2)`};
+  margin-right: ${(p) => (p.size === "S" ? p.theme.spacing.xs : `calc(${p.theme.spacing.s} * 2)`)};
 `;
 
-export {
-  Input,
-  Wrapper,
-  Literal
-};
+export { Input, Wrapper, Literal };

package/src/components/ProgressBar/index.tsx

@@ -3,22 +3,22 @@ import React from "react";
 import * as S from "./style";
 
 const ProgressBar = (props: IProgressBarProps): JSX.Element => {
-  const { percentage, inverse = false } = props;
+	const { percentage, inverse = false } = props;
 
-  const percentageLimits = (min: number, value: number, max: number) => {
-    return Math.min(Math.max(min, value), max);
-  };
+	const percentageLimits = (min: number, value: number, max: number) => {
+		return Math.min(Math.max(min, value), max);
+	};
 
-  return (
-    <S.Tracker data-testid="progressbar-tracker">
-      <S.ProgressInTracker percentage={percentageLimits(0, percentage, 100)} inverse={inverse} />
-    </S.Tracker>
-  );
+	return (
+		<S.Tracker data-testid="progressbar-tracker">
+			<S.ProgressInTracker percentage={percentageLimits(0, percentage, 100)} inverse={inverse} />
+		</S.Tracker>
+	);
 };
 
 export interface IProgressBarProps {
-  percentage: number;
-  inverse?: boolean;
+	percentage: number;
+	inverse?: boolean;
 }
 
 export default ProgressBar;

package/src/components/ProgressBar/style.tsx

@@ -1,17 +1,17 @@
 import styled from "styled-components";
 
 const Tracker = styled.div`
-  height: ${p => p.theme.spacing.xxs};
+  height: ${(p) => p.theme.spacing.xxs};
   width: 100%;
   border-radius: 2px;
   background-color: #e6e7f8;
 `;
 
 const ProgressInTracker = styled.div<{ percentage: number; inverse: boolean }>`
-  background-color: ${p => p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01};
+  background-color: ${(p) => (p.inverse ? p.theme.color.interactiveInverse : p.theme.color.interactive01)};
   border-radius: 2px;
   height: 100%;
-  width: ${p => p.percentage}%;
+  width: ${(p) => p.percentage}%;
 `;
 
-export { Tracker, ProgressInTracker }
+export { Tracker, ProgressInTracker };

package/src/components/ReorderArrows/index.tsx

@@ -4,37 +4,37 @@ import { IconAction } from "@ax/components";
 import * as S from "./style";
 
 const ReorderArrows = (props: IReorderArrows): JSX.Element => {
-  const { index, listLength, handleUpClick, handleDownClick } = props;
+	const { index, listLength, handleUpClick, handleDownClick } = props;
 
-  const showReorderArrows = listLength > 1;
-  const isLast = index + 1 === listLength;
-  const isFirst = index === 0;
+	const showReorderArrows = listLength > 1;
+	const isLast = index + 1 === listLength;
+	const isFirst = index === 0;
 
-  const Arrows = () => (
-    <>
-      {!isFirst && (
-        <S.ReorderArrow data-testid="reorder-last" setMargin={isLast}>
-          {" "}
-          <IconAction icon="FullArrowUp" size="s" onClick={handleUpClick} />{" "}
-        </S.ReorderArrow>
-      )}
-      {!isLast && (
-        <S.ReorderArrow data-testid="reorder-first">
-          {" "}
-          <IconAction icon="FullArrowDown" size="s" onClick={handleDownClick} />{" "}
-        </S.ReorderArrow>
-      )}
-    </>
-  );
+	const Arrows = () => (
+		<>
+			{!isFirst && (
+				<S.ReorderArrow data-testid="reorder-last" setMargin={isLast}>
+					{" "}
+					<IconAction icon="FullArrowUp" size="s" onClick={handleUpClick} />{" "}
+				</S.ReorderArrow>
+			)}
+			{!isLast && (
+				<S.ReorderArrow data-testid="reorder-first">
+					{" "}
+					<IconAction icon="FullArrowDown" size="s" onClick={handleDownClick} />{" "}
+				</S.ReorderArrow>
+			)}
+		</>
+	);
 
-  return <>{showReorderArrows && <Arrows />}</>;
+	return <>{showReorderArrows && <Arrows />}</>;
 };
 
 export interface IReorderArrows {
-  index: number;
-  listLength: number;
-  handleUpClick: (e: any) => void;
-  handleDownClick: (e: any) => void;
+	index: number;
+	listLength: number;
+	handleUpClick: (e: any) => void;
+	handleDownClick: (e: any) => void;
 }
 
 export default ReorderArrows;

package/src/components/ReorderArrows/style.tsx

@@ -1,7 +1,7 @@
 import styled from "styled-components";
 
-const ReorderArrow = styled.span<{setMargin?: boolean}>`
-  margin-right: ${(p) => p.setMargin ? p.theme.spacing.m : "0"};
+const ReorderArrow = styled.span<{ setMargin?: boolean }>`
+  margin-right: ${(p) => (p.setMargin ? p.theme.spacing.m : "0")};
 `;
 
-export { ReorderArrow }
+export { ReorderArrow };

package/src/components/ResizePanel/ResizeHandle/index.tsx

@@ -1,34 +1,66 @@
-import React from "react";
+import React, { useCallback, useEffect, useRef } from "react";
 
 import * as S from "./style";
 
 const ResizeHandle = (props: IResizeHandleProps): JSX.Element => {
-  const initListeners = () => {
-    window.addEventListener("mousemove", handleResize, false);
-    window.addEventListener("mouseup", handleMouseUp, false);
-  };
+	const { onMouseMove } = props;
 
-  const removeListeners = () => {
-    window.removeEventListener("mousemove", handleResize, false);
-    window.removeEventListener("mouseup", handleMouseUp, false);
-  };
+	const isDragging = useRef(false);
 
-  const handleMouseDown = () => initListeners();
+	const handleResize = useCallback(
+		(e: MouseEvent) => {
+			if (!isDragging.current) return;
+			e.preventDefault();
 
-  const handleMouseUp = () => removeListeners();
+			const newWidth = document.body.offsetWidth - e.clientX;
+			onMouseMove(newWidth);
+		},
+		[onMouseMove],
+	);
 
-  const handleResize = (e: MouseEvent) => {
-    e.preventDefault();
-    const { onMouseMove } = props;
-    const newWidth = window.document.body.offsetWidth - e.clientX;
-    onMouseMove(newWidth);
-  };
+	const handleMouseUp = useCallback(() => {
+		isDragging.current = false;
+		document.body.classList.remove("no-select");
+	}, []);
 
-  return <S.Handler onMouseDown={handleMouseDown} data-testid="handler" />;
+	const handleMouseDown = () => {
+		isDragging.current = true;
+		document.body.classList.add("no-select");
+	};
+
+	useEffect(() => {
+		window.addEventListener("mousemove", handleResize);
+		window.addEventListener("mouseup", handleMouseUp);
+
+		return () => {
+			window.removeEventListener("mousemove", handleResize);
+			window.removeEventListener("mouseup", handleMouseUp);
+		};
+	}, [handleResize, handleMouseUp]);
+
+	useEffect(() => {
+		const handleIframeMove = (event: MessageEvent) => {
+			if (!isDragging.current) return;
+			if (event.data?.type !== "iframe-mousemove") return;
+
+			handleResize({
+				clientX: event.data.clientX,
+				preventDefault: () => {},
+			} as MouseEvent);
+		};
+
+		window.addEventListener("message", handleIframeMove);
+
+		return () => {
+			window.removeEventListener("message", handleIframeMove);
+		};
+	}, [handleResize]);
+
+	return <S.Handler onMouseDown={handleMouseDown} data-testid="handler" />;
 };
 
 export interface IResizeHandleProps {
-  onMouseMove: (value: number) => void;
+	onMouseMove: (value: number) => void;
 }
 
 export default ResizeHandle;

package/src/components/ResizePanel/index.tsx

@@ -3,49 +3,50 @@ import ResizeHandle from "./ResizeHandle";
 
 import * as S from "./style";
 
+const MIN_WIDTH = 344;
+
 const ResizePanel = (props: IResizePanelProps): JSX.Element => {
-  const { leftPanel, rightPanel, fixed = true, full = false } = props;
-
-  const [rwidth, setRwidth] = useState(0);
-
-  const rightPanelRef = useRef<HTMLDivElement>(null);
-
-  useEffect(() => {
-    if (rightPanelRef.current) {
-      setRwidth(rightPanelRef.current.offsetWidth);
-    }
-  }, [rightPanelRef]);
-
-  const resize = (value: number) => {
-    if (value > 344) {
-      setRwidth(value);
-    }
-  };
-
-  return (
-    <>
-      <S.LeftPanel data-testid="left-panel">
-        {fixed ? (
-          <S.FixedPanel width={rwidth} full={full} data-testid="fixed-panel">
-            {leftPanel}
-          </S.FixedPanel>
-        ) : (
-          leftPanel
-        )}
-      </S.LeftPanel>
-      <ResizeHandle onMouseMove={resize} />
-      <S.RightPanel width={rwidth} ref={rightPanelRef} data-testid="right-panel">
-        {rightPanel}
-      </S.RightPanel>
-    </>
-  );
+	const { leftPanel, rightPanel, fixed = true, full = false } = props;
+
+	const [rwidth, setRwidth] = useState(MIN_WIDTH);
+	const rightPanelRef = useRef<HTMLDivElement>(null);
+
+	useEffect(() => {
+		requestAnimationFrame(() => {
+			if (rightPanelRef.current) {
+				setRwidth(rightPanelRef.current.offsetWidth);
+			}
+		});
+	}, []);
+
+	const resize = (value: number) => {
+		if (value > MIN_WIDTH) setRwidth(value);
+	};
+
+	return (
+		<>
+			<S.LeftPanel data-testid="left-panel">
+				{fixed ? (
+					<S.FixedPanel width={rwidth} full={full} data-testid="fixed-panel">
+						{leftPanel}
+					</S.FixedPanel>
+				) : (
+					leftPanel
+				)}
+			</S.LeftPanel>
+			<ResizeHandle onMouseMove={resize} />
+			<S.RightPanel width={rwidth} ref={rightPanelRef} data-testid="right-panel">
+				{rightPanel}
+			</S.RightPanel>
+		</>
+	);
 };
 
 export interface IResizePanelProps {
-  leftPanel: JSX.Element | JSX.Element[];
-  rightPanel: JSX.Element | JSX.Element[];
-  fixed?: boolean;
-  full?: boolean;
+	leftPanel: JSX.Element | JSX.Element[];
+	rightPanel: JSX.Element | JSX.Element[];
+	fixed?: boolean;
+	full?: boolean;
 }
 
 export default ResizePanel;

package/src/components/ResizePanel/style.tsx

@@ -1,8 +1,8 @@
 import styled from "styled-components";
 
 const getWidth = (width: number, space: string) => {
-  const minWidth = 1280 - width - parseInt(space) * 2;
-  return minWidth < 500 ? `500px` : `${minWidth}px`;
+	const minWidth = 1280 - width - parseInt(space) * 2;
+	return minWidth < 500 ? `500px` : `${minWidth}px`;
 };
 
 const LeftPanel = styled.section`
@@ -26,9 +26,9 @@ const FixedPanel = styled.div<{ width: number; full: boolean }>`
   position: sticky;
   top: ${(p) => (p.full ? p.theme.spacing.xl : `calc(${p.theme.spacing.xl} + ${p.theme.spacing.m})`)};
   height: ${(p) =>
-    p.full
-      ? `calc(100vh - ${p.theme.spacing.xl})`
-      : `calc(100vh - (${p.theme.spacing.xl} + (${p.theme.spacing.m} * 2)) - (${p.theme.spacing.m} + (${p.theme.spacing.xs} * 2)))`};
+		p.full
+			? `calc(100vh - ${p.theme.spacing.xl})`
+			: `calc(100vh - (${p.theme.spacing.xl} + (${p.theme.spacing.m} * 2)) - (${p.theme.spacing.m} + (${p.theme.spacing.xs} * 2)))`};
   min-width: ${(p) => getWidth(p.width, p.theme.spacing.m)};
   margin-left: ${(p) => (p.full ? "0" : p.theme.spacing.m)};
 `;

package/src/components/RestoreModal/index.tsx

@@ -6,46 +6,46 @@ import { Modal } from "@ax/components";
 import * as S from "./style";
 
 const RestorePageModal = (props: IRestorePageProps): JSX.Element => {
-  const { isOpen, toggleModal, isChild, hasIssues, restorePage } = props;
-
-  const buttonText = hasIssues ? "Ok, restore it" : "Yes, restore it";
-
-  const mainRestoreAction = { title: buttonText, onClick: restorePage };
-  const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
-
-  const title = hasIssues ? "Possible compatibility issues" : "Restore item";
-  const modalText = hasIssues ? (
-    <>
-      Restoring deleted items <strong>may cause conflicts if their structure has changed since removal</strong>. Please
-      review the restored content after recovery.
-    </>
-  ) : (
-    <>
-      You are about to restore this item.{" "}
-      <strong>It will reappear on your site exactly as it was before it was deleted.</strong> Are you sure you want to
-      continue?
-    </>
-  );
-
-  return (
-    <Modal
-      isOpen={isOpen}
-      hide={toggleModal}
-      title={title}
-      secondaryAction={secondaryModalAction}
-      mainAction={mainRestoreAction}
-      size="S"
-      height={240}
-      isChild={isChild}
-    >
-      <S.ModalContent>{modalText}</S.ModalContent>
-    </Modal>
-  );
+	const { isOpen, toggleModal, isChild, hasIssues, restorePage } = props;
+
+	const buttonText = hasIssues ? "Ok, restore it" : "Yes, restore it";
+
+	const mainRestoreAction = { title: buttonText, onClick: restorePage };
+	const secondaryModalAction = { title: "Cancel", onClick: toggleModal };
+
+	const title = hasIssues ? "Possible compatibility issues" : "Restore item";
+	const modalText = hasIssues ? (
+		<>
+			Restoring deleted items <strong>may cause conflicts if their structure has changed since removal</strong>. Please
+			review the restored content after recovery.
+		</>
+	) : (
+		<>
+			You are about to restore this item.{" "}
+			<strong>It will reappear on your site exactly as it was before it was deleted.</strong> Are you sure you want to
+			continue?
+		</>
+	);
+
+	return (
+		<Modal
+			isOpen={isOpen}
+			hide={toggleModal}
+			title={title}
+			secondaryAction={secondaryModalAction}
+			mainAction={mainRestoreAction}
+			size="S"
+			height={240}
+			isChild={isChild}
+		>
+			<S.ModalContent>{modalText}</S.ModalContent>
+		</Modal>
+	);
 };
 
 interface IRestorePageProps extends IModal {
-  hasIssues: boolean;
-  restorePage(): void;
+	hasIssues: boolean;
+	restorePage(): void;
 }
 
 export default RestorePageModal;