@uiw/react-color-circle/esm/Point.js

Color swatch component for React.

import _extends from "@babel/runtime/helpers/extends";
import React, { useCallback } from 'react';
import { useRef } from 'react';
import { jsx as _jsx } from "react/jsx-runtime";
export default function Point(_ref) {
  var {
    style,
    className,
    title,
    checked,
    color,
    onClick,
    rectProps
  } = _ref;
  var btn = useRef(null);
  var handleMouseEnter = useCallback(() => {
    btn.current.style['transform'] = 'scale(1.2)';
  }, []);
  var handleMouseLeave = useCallback(() => {
    btn.current.style['transform'] = 'scale(1)';
  }, []);
  var styleWrapper = _extends({
    '--circle-point-background-color': '#fff',
    height: checked ? '100%' : 0,
    width: checked ? '100%' : 0,
    borderRadius: '50%',
    backgroundColor: 'var(--circle-point-background-color)',
    boxSizing: 'border-box',
    transition: 'height 100ms ease 0s, width 100ms ease 0s'
  }, rectProps.style);
  return /*#__PURE__*/_jsx("div", {
    ref: btn,
    onClick: onClick,
    onMouseEnter: handleMouseEnter,
    onMouseLeave: handleMouseLeave,
    title: title,
    className: className,
    style: _extends({
      padding: 3,
      marginRight: 12,
      marginBottom: 12
    }, style, {
      display: 'flex',
      alignItems: 'center',
      justifyContent: 'center',
      width: 28,
      height: 28,
      borderRadius: '50%',
      boxSizing: 'border-box',
      transform: 'scale(1)',
      boxShadow: color + " 0px 0px " + (checked ? 5 : 0) + "px",
      transition: 'transform 100ms ease 0s, box-shadow 100ms ease 0s'
    }),
    children: /*#__PURE__*/_jsx("div", _extends({}, rectProps, {
      style: styleWrapper
    }))
  });
}