All files / color-wheel/src Pointer.tsx

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
39
40
41
42
43
44
45
46
 
 
 
 
 
 
 
 
 
 
1x
 
1x
4x
 
 
 
 
 
4x
4x
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
import React from 'react';
import { useMemo } from 'react';
 
export interface PointerProps extends React.HTMLAttributes<HTMLDivElement> {
  prefixCls?: string;
  top?: string;
  left: string;
  color?: string;
}
 
const BOXSHADOW = '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';
 
export const Pointer = ({ className, color, left, top, style, prefixCls }: PointerProps): JSX.Element => {
  const styleWarp: React.CSSProperties = {
    ...style,
    position: 'absolute',
    top,
    left,
  };
  const cls = `${prefixCls}-pointer ${className || ''}`;
  return (
    <div className={cls} style={styleWarp}>
      <div
        className={`${prefixCls}-fill`}
        style={{
          width: 10,
          height: 10,
          transform: 'translate(-5px, -5px)',
          boxShadow: BOXSHADOW,
          borderRadius: '50%',
          backgroundColor: '#fff',
        }}
      >
        <div
          style={{
            inset: 0,
            borderRadius: '50%',
            position: 'absolute',
            backgroundColor: color,
          }}
        />
      </div>
    </div>
  );
};