All files / color-saturation/src Pointer.tsx

100% Statements 5/5
100% Branches 2/2
100% Functions 2/2
100% Lines 5/5

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 33 34 35 36 37 38                    1x 2x           2x                     2x   2x              
import React, { useMemo } from 'react';
import type * as CSS from 'csstype';
 
export interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
  prefixCls?: string;
  top?: CSS.Properties<string | number>['top'];
  left: CSS.Properties<string | number>['left'];
  color?: string;
}
 
export const Pointer = ({ className, color, left, top, prefixCls }: PointerProps): JSX.Element => {
  const style: CSS.Properties<string | number> = {
    position: 'absolute',
    top,
    left,
  };
 
  const stylePointer: CSS.Properties<string | number> = {
    '--saturation-pointer-box-shadow':
      'rgb(255 255 255) 0px 0px 0px 1.5px, rgb(0 0 0 / 30%) 0px 0px 1px 1px inset, rgb(0 0 0 / 40%) 0px 0px 1px 2px',
    width: 6,
    height: 6,
    transform: 'translate(-3px, -3px)',
    boxShadow: 'var(--saturation-pointer-box-shadow)',
    borderRadius: '50%',
    backgroundColor: color,
  } as CSS.Properties<string | number>;
 
  return useMemo(
    () => (
      <div className={`${prefixCls}-pointer ${className || ''}`} style={style}>
        <div className={`${prefixCls}-fill`} style={stylePointer} />
      </div>
    ),
    [top, left, color, className, prefixCls],
  );
};