src Pointer.tsx

100% Statements 4/4

100% Branches 4/4

100% Functions 1/1

100% Lines 4/4

Press n or j to go to the next uncovered block, b, p or k for the previous block.


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32  
 
 
 
 
 
 
 
 
3x
5x
 
 
 
 
 
5x
 
 
 
 
 
 
 
 
5x
 
 
 
 
 
  import React, { CSSProperties } from 'react';
 
export interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
  prefixCls?: string;
  left?: string;
  top?: string;
  fillProps?: React.HTMLAttributes<HTMLDivElement>;
}
 
export const Pointer = ({ className, prefixCls, left, top, style, fillProps, ...reset }: PointerProps): JSX.Element => {
  const styleWrapper: React.CSSProperties = {
    ...style,
    position: 'absolute',
    left,
    top,
  };
  const stylePointer = {
    width: 18,
    height: 18,
    boxShadow: 'var(--alpha-pointer-box-shadow)',
    borderRadius: '50%',
    backgroundColor: 'var(--alpha-pointer-background-color)',
    ...fillProps?.style,
    transform: left ? 'translate(-9px, -1px)' : 'translate(-1px, -9px)',
  } as CSSProperties;
  return (
    <div className={`${prefixCls}-pointer ${className || ''}`} style={styleWrapper} {...reset}>
      <div className={`${prefixCls}-fill`} {...fillProps} style={stylePointer} />
    </div>
  );
};