@gemx-dev/heatmap-react 3.5.23 → 3.5.24

package/src/components/VizElement/HeatmapElements.tsx

@@ -1,147 +0,0 @@
-import type { HeatmapInfo, WebVisualizer } from '../../types';
-
-import {
-  CLICKED_ELEMENT_ID,
-  HOVERED_ELEMENT_ID,
-  SECONDARY_CLICKED_ELEMENT_ID,
-  SECONDARY_HOVERED_ELEMENT_ID,
-} from '../../constants';
-import {
-  useClickedElement,
-  useHeatmapEffects,
-  useHeatmapElementPosition,
-  useHoveredElement,
-} from '../../hooks';
-
-import { ClickedElementOverlay } from './ClickedElementOverlay';
-import { DefaultRankBadges } from './DefaultRankBadges';
-import { ElementCallout } from './ElementCallout';
-import { HoveredElementOverlay } from './HoveredElementOverlay';
-import { MissingElementMessage } from './MissingElementMessage';
-
-export interface HeatmapElementsProps {
-  widthScale: number;
-  heatmapInfo?: HeatmapInfo;
-  isElementSidebarOpen?: boolean;
-  selectedElement?: string | null;
-  visualizer?: WebVisualizer;
-  isVisible?: boolean;
-  iframeDimensions?: React.CSSProperties;
-  areDefaultRanksHidden?: boolean;
-  isSecondary?: boolean;
-  isRecordingView?: boolean;
-  isCompareMode?: boolean;
-  deviceType?: string;
-  heatmapType?: string;
-  projectId?: string;
-  iframeRef: React.RefObject<HTMLIFrameElement>;
-  parentRef: React.RefObject<HTMLElement>;
-  iframeHeight?: number;
-  selectElement?: (hash: string) => void;
-}
-
-export const HeatmapElements: React.FC<HeatmapElementsProps> = (props) => {
-  const {
-    iframeRef,
-    parentRef,
-    visualizer,
-    heatmapInfo,
-    widthScale,
-    iframeHeight,
-    iframeDimensions,
-    selectedElement,
-    isElementSidebarOpen,
-    isVisible = true,
-    selectElement,
-    areDefaultRanksHidden,
-    isSecondary,
-    ...rest
-  } = props;
-
-  const getRect = useHeatmapElementPosition({
-    iframeRef,
-    parentRef,
-    visualizer,
-    heatmapWidth: heatmapInfo?.width,
-    iframeHeight,
-    widthScale,
-    projectId: props.projectId,
-  });
-
-  const { clickedElement, showMissingElement, shouldShowCallout, setShouldShowCallout } =
-    useClickedElement({
-      selectedElement,
-      heatmapInfo,
-      getRect,
-    });
-
-  const { hoveredElement, handleMouseMove, handleMouseLeave, handleClick } = useHoveredElement({
-    iframeRef,
-    heatmapInfo,
-    getRect,
-    onSelect: selectElement,
-    widthScale,
-  });
-
-  const resetAll = () => {
-    // nếu cần reset thêm state ở đây
-    // setShouldShowCallout(false);
-  };
-
-  useHeatmapEffects({
-    isVisible,
-    isElementSidebarOpen,
-    selectedElement,
-    setShouldShowCallout,
-    resetAll,
-  });
-
-  if (!isVisible) return null;
-
-  const top10 = heatmapInfo?.sortedElements?.slice(0, 10) ?? [];
-
-  return (
-    <div
-      onMouseMove={handleMouseMove}
-      onMouseLeave={handleMouseLeave}
-      className="heatmapElements gx-hm-elements"
-      style={iframeDimensions}
-    >
-      <DefaultRankBadges
-        elements={top10}
-        getRect={getRect}
-        widthScale={widthScale}
-        hidden={areDefaultRanksHidden}
-      />
-
-      <ClickedElementOverlay
-        widthScale={widthScale}
-        element={clickedElement}
-        shouldShowCallout={shouldShowCallout}
-        isSecondary={isSecondary}
-        targetId={isSecondary ? SECONDARY_CLICKED_ELEMENT_ID : CLICKED_ELEMENT_ID}
-        {...rest}
-      />
-
-      {showMissingElement && <MissingElementMessage widthScale={widthScale} />}
-
-      <HoveredElementOverlay
-        element={hoveredElement}
-        onClick={handleClick}
-        isSecondary={isSecondary}
-        targetId={isSecondary ? SECONDARY_HOVERED_ELEMENT_ID : HOVERED_ELEMENT_ID}
-        totalClicks={heatmapInfo?.totalClicks ?? 1}
-      />
-
-      {hoveredElement !== clickedElement && hoveredElement && (
-        <ElementCallout
-          element={hoveredElement}
-          target={`#${props.isSecondary ? SECONDARY_HOVERED_ELEMENT_ID : HOVERED_ELEMENT_ID}`}
-          totalClicks={props.heatmapInfo?.totalClicks ?? 1}
-          isSecondary={props.isSecondary}
-          parentRef={props.parentRef}
-        />
-      )}
-    </div>
-  );
-};

package/src/components/VizElement/HoveredElementOverlay.tsx

@@ -1,46 +0,0 @@
-import type { ElementInfo } from '../../types';
-
-import React, { Fragment } from 'react';
-import { RankBadge } from './RankBadge';
-
-interface Props {
-  element: ElementInfo | null;
-  onClick?: () => void;
-  isSecondary?: boolean;
-  targetId: string;
-  totalClicks?: number;
-}
-
-export const HoveredElementOverlay: React.FC<Props> = ({
-  element,
-  onClick,
-  isSecondary,
-  targetId,
-  totalClicks = 1,
-}) => {
-  if (!element) return null;
-
-  return (
-    <Fragment>
-      <div
-        onClick={onClick}
-        className="heatmapElement hovered"
-        id={targetId}
-        style={{
-          top: element.top,
-          left: element.left,
-          width: element.width,
-          height: element.height,
-          cursor: 'pointer',
-        }}
-      />
-
-      <RankBadge
-        index={element.rank}
-        elementRect={element}
-        widthScale={1}
-        clickOnElement={onClick}
-      />
-    </Fragment>
-  );
-};

package/src/components/VizElement/MissingElementMessage.tsx

@@ -1,32 +0,0 @@
-// src/components/HeatmapElements/components/MissingElementMessage.tsx
-import React from 'react';
-
-interface Props {
-  widthScale: number;
-}
-
-export const MissingElementMessage: React.FC<Props> = ({ widthScale }) => {
-  return (
-    <div
-      className="missingElement"
-      style={{
-        position: 'absolute',
-        top: '50%',
-        left: '50%',
-        transform: `translate(-50%, -50%) scale(${1 / widthScale})`,
-        background: 'rgba(0, 0, 0, 0.8)',
-        color: 'white',
-        padding: '12px 20px',
-        borderRadius: '8px',
-        fontSize: '14px',
-        fontWeight: '500',
-        zIndex: 9999,
-        pointerEvents: 'none',
-        whiteSpace: 'nowrap',
-      }}
-      aria-live="assertive"
-    >
-      Element not visible on current screen
-    </div>
-  );
-};

package/src/components/VizElement/RankBadge.tsx

@@ -1,25 +0,0 @@
-import type { ElementRect } from '../../types';
-
-import { calculateRankPosition } from '../../helpers/viz-elements';
-
-interface RankBadgeProps {
-  index: number;
-  elementRect: ElementRect;
-  widthScale: number;
-  clickOnElement?: () => void;
-}
-
-export const RankBadge: React.FC<RankBadgeProps> = ({
-  index,
-  elementRect,
-  widthScale,
-  clickOnElement,
-}) => {
-  const style = calculateRankPosition(elementRect, widthScale);
-
-  return (
-    <div className="rankBadge" style={style} onClick={clickOnElement} data-testid="elementRank">
-      {index}
-    </div>
-  );
-};

package/src/components/VizElement/VizElements.tsx

@@ -1,80 +0,0 @@
-import { useState } from 'react';
-import { useHeatmapDataStore } from '../../stores';
-import { HeatmapInfo, WebVisualizer } from '../../types';
-import { HeatmapElements } from './HeatmapElements';
-
-interface VizElementsProps {
-  width: number;
-  height: number;
-  iframeRef: React.RefObject<HTMLIFrameElement | null>;
-  wrapperRef: React.RefObject<HTMLDivElement>;
-  widthScale: number;
-}
-export const VizElements: React.FC<VizElementsProps> = ({
-  width,
-  height,
-  iframeRef,
-  wrapperRef,
-  widthScale,
-}) => {
-  const data = useHeatmapDataStore((state) => state.data);
-
-  const heatmapInfo: HeatmapInfo = {
-    sortedElements: [
-      {
-        hash: '9ebwu6a3',
-        selector: 'Join our email list',
-      },
-      {
-        hash: '350hde5d4',
-        selector: 'Products',
-      },
-    ],
-    elementMapInfo: {
-      '9ebwu6a3': {
-        totalclicks: 4,
-        hash: '9ebwu6a3',
-      },
-      '350hde5d4': {
-        totalclicks: 4,
-        hash: '350hde5d4',
-      },
-    },
-    totalClicks: 8,
-  };
-
-  const visualizer: WebVisualizer = {
-    get: (hash: string) => {
-      const doc = iframeRef.current?.contentDocument;
-      if (!doc) return null;
-
-      // Find element by hash attribute
-      return doc.querySelector(`[data-clarity-hashalpha="${hash}"]`) as HTMLElement;
-    },
-  };
-  const [selectedElement, setSelectedElement] = useState<string | null>(null);
-
-  if (!iframeRef.current) return null;
-
-  return (
-    <HeatmapElements
-      visualizer={visualizer}
-      iframeRef={iframeRef as React.RefObject<HTMLIFrameElement>}
-      parentRef={wrapperRef as React.RefObject<HTMLElement>}
-      iframeHeight={window.innerHeight}
-      widthScale={widthScale}
-      heatmapInfo={heatmapInfo}
-      selectedElement={selectedElement}
-      selectElement={setSelectedElement}
-      isVisible={true}
-      iframeDimensions={{
-        width,
-        height,
-        position: 'absolute',
-        top: 0,
-        left: 0,
-        // pointerEvents: 'none',
-      }}
-    />
-  );
-};

package/src/components/VizElement/index.ts

@@ -1 +0,0 @@
-export * from './VizElements';