zarm/es/progress/hooks.js

基于 React 的移动端UI库

import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
import { useEffect, useMemo, useState } from 'react';
var strokeWeights = {
  lg: 10,
  md: 8,
  sm: 4
};
export function useStrokeWidthWithBackup(_ref) {
  var strokeWidth = _ref.strokeWidth,
      size = _ref.size;
  return useMemo(function () {
    var backup = strokeWeights[size && size in strokeWeights ? size : 'md'];
    return Math.max(1, strokeWidth || backup);
  }, [strokeWidth, size]);
}
export function useSVG(_ref2) {
  var shape = _ref2.shape;
  return useMemo(function () {
    return shape === 'semi-circle' || shape === 'circle';
  }, [shape]);
}
var baseWidth = 32;
export function useSVGStrokeWidth(params) {
  var _useState = useState(params.strokeWidth),
      _useState2 = _slicedToArray(_useState, 2),
      svgStrokeWidth = _useState2[0],
      setSvgStrokeWidth = _useState2[1];

  useEffect(function () {
    if (params.shouldUseSVG && params.progressElement.current) {
      setSvgStrokeWidth(baseWidth / params.progressElement.current.clientWidth * params.strokeWidth);
    }
  }, [params.strokeWidth, params.progressElement, params.shouldUseSVG]);
  return {
    svgStrokeWidth: svgStrokeWidth
  };
}
export function useSizeStyle(_ref3) {
  var size = _ref3.size,
      shape = _ref3.shape;
  return useMemo(function () {
    var sizeStyle = {};
    var hasKnownSize = !!(size && size in strokeWeights);

    if (!hasKnownSize) {
      sizeStyle.width = size;

      if (shape === 'circle') {
        sizeStyle.height = size;
      }

      if (shape === 'semi-circle') {
        if (typeof size === 'number') {
          sizeStyle.height = "".concat(size / 2, "px");
        } else if (typeof size === 'string') {
          sizeStyle.height = size.replace(/^(\d+)(.+)$/, function () {
            return parseFloat(arguments.length <= 1 ? undefined : arguments[1]) / 2 + (arguments.length <= 2 ? undefined : arguments[2]);
          });
        }
      }
    }

    return {
      sizeStyle: sizeStyle,
      hasKnownSize: hasKnownSize
    };
  }, [size, shape]);
}
var diameter = 32;
var radius = diameter / 2;
export function useRoundSVGAttributes(_ref4) {
  var shape = _ref4.shape,
      strokeShape = _ref4.strokeShape,
      finalStrokeWidth = _ref4.finalStrokeWidth,
      percent = _ref4.percent;
  return useMemo(function () {
    var extendRadius = radius + finalStrokeWidth / 2;
    var strokeLinecap = strokeShape === 'round' ? 'round' : 'butt';
    var viewBox = shape === 'circle' ? "0 0 ".concat(diameter + finalStrokeWidth, " ").concat(diameter + finalStrokeWidth) : "0 0 ".concat(diameter + finalStrokeWidth, " ").concat((diameter + finalStrokeWidth) / 2);
    var path = shape === 'circle' ? "\n    M".concat(extendRadius, ", ").concat(extendRadius, "\n    m0 ").concat(-radius, "\n    a").concat(radius, " ").concat(radius, " 0 1 1 0 ").concat(diameter, "\n    a").concat(radius, " ").concat(radius, " 0 1 1 0 ").concat(-diameter) : "\n    M".concat(extendRadius, ", ").concat(extendRadius, "\n    m").concat(-radius, " 0\n    a").concat(radius, " ").concat(radius, " 0 0 1 ").concat(diameter, " 0");
    var dasharray = shape === 'circle' ? Math.PI * diameter : Math.PI * diameter / 2;
    var dashoffset = dasharray * (100 - percent) / 100;
    return {
      path: path,
      dasharray: dasharray,
      strokeLinecap: strokeLinecap,
      viewBox: viewBox,
      dashoffset: dashoffset
    };
  }, [shape, strokeShape, finalStrokeWidth, percent]);
}
export function useRectStyles(_ref5) {
  var strokeWidthWithBackup = _ref5.strokeWidthWithBackup,
      finalStrokeWidth = _ref5.finalStrokeWidth,
      strokeShape = _ref5.strokeShape,
      percent = _ref5.percent;
  return useMemo(function () {
    var borderRadius = strokeShape === 'round' ? "".concat(strokeWidthWithBackup, "px") : '0';
    var lineTrackStyle = {
      height: "".concat(finalStrokeWidth),
      borderRadius: borderRadius
    };
    var lineThumbStyle = {
      width: "".concat(percent, "%"),
      height: "".concat(finalStrokeWidth, "px"),
      borderRadius: borderRadius
    };
    return {
      lineThumbStyle: lineThumbStyle,
      lineTrackStyle: lineTrackStyle
    };
  }, [strokeWidthWithBackup, finalStrokeWidth, strokeShape, percent]);
}
export function useIndicator(_ref6) {
  var text = _ref6.text,
      percent = _ref6.percent,
      children = _ref6.children;
  return useMemo(function () {
    var formattedPercent = text ? text(percent || 0) : null;
    var indicator = children || formattedPercent;
    return indicator;
  }, [text, percent, children]);
}