@vnmfify/core/circle/circle-canvas.h5.js

```shell npm i @vnmfify/core -S ```

import _isObject from "lodash/isObject";
import * as React from "react";
import { useCallback, useEffect, useMemo } from "react";
import { prefixClassname } from "../styles";
import { useAnimatePercent } from "./circle.hooks";
var uid = 0;

function getPath(clockwise, viewBoxSize) {
  var sweepFlag = clockwise ? 1 : 0;
  return "M ".concat(viewBoxSize / 2, " ").concat(viewBoxSize / 2, " m 0, -500 a 500, 500 0 1, ").concat(sweepFlag, " 0, 1000 a 500, 500 0 1, ").concat(sweepFlag, " 0, -1000");
}

function CircleCanvasH5(props) {
  var {
    percent: percentProp = 0,
    speed = 0,
    color,
    layerColor,
    fill = "none",
    clockwise = true,
    strokeWidth = 0,
    strokeLinecap,
    onChange
  } = props;
  var percent = useAnimatePercent(percentProp, speed);
  useEffect(() => onChange === null || onChange === void 0 ? void 0 : onChange(percent), [onChange, percent]);
  var id = useMemo(() => prefixClassname("circle-".concat(uid++)), []);
  var viewBoxSize = useMemo(() => +strokeWidth + 1000, [strokeWidth]);
  var path = useMemo(() => getPath(clockwise, viewBoxSize), [clockwise, viewBoxSize]);
  var renderHover = useCallback(() => {
    var PERIMETER = 3140;
    var offset = PERIMETER * percent / 100;
    var stroke = _isObject(color) ? "url(#".concat(id, ")") : color;
    var style = {
      stroke,
      strokeWidth: "".concat(+strokeWidth + 1, "px"),
      strokeLinecap: strokeLinecap,
      strokeDasharray: "".concat(offset, "px ").concat(PERIMETER, "px")
    };
    return /*#__PURE__*/React.createElement("path", {
      d: path,
      style: style,
      className: prefixClassname("circle__hover"),
      stroke: stroke
    });
  }, [percent, color, id, strokeWidth, strokeLinecap, path]);
  var renderLayer = useCallback(() => {
    var style = {
      fill: fill,
      stroke: layerColor,
      strokeWidth: "".concat(strokeWidth, "px")
    };
    return /*#__PURE__*/React.createElement("path", {
      className: prefixClassname("circle__layer"),
      style: style,
      d: path
    });
  }, [fill, layerColor, path, strokeWidth]);
  var renderGradient = useCallback(() => {
    if (!_isObject(color)) {
      return;
    }

    var Stops = Object.keys(color).sort((a, b) => parseFloat(a) - parseFloat(b)).map((key, index) => /*#__PURE__*/React.createElement("stop", {
      key: index,
      offset: key,
      stopColor: color[key]
    }));
    return /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
      id: id,
      x1: "100%",
      y1: "0%",
      x2: "0%",
      y2: "0%"
    }, Stops));
  }, [color, id]);
  return /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 ".concat(viewBoxSize, " ").concat(viewBoxSize)
  }, renderGradient(), renderLayer(), renderHover());
}

export default CircleCanvasH5;
//# sourceMappingURL=circle-canvas.h5.js.map