zarm/lib/progress/hooks.js

基于 React 的移动端UI库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.useStrokeWidthWithBackup = useStrokeWidthWithBackup;
exports.useSVG = useSVG;
exports.useSVGStrokeWidth = useSVGStrokeWidth;
exports.useSizeStyle = useSizeStyle;
exports.useRoundSVGAttributes = useRoundSVGAttributes;
exports.useRectStyles = useRectStyles;
exports.useIndicator = useIndicator;

var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));

var _react = require("react");

var strokeWeights = {
  lg: 10,
  md: 8,
  sm: 4
};

function useStrokeWidthWithBackup(_ref) {
  var strokeWidth = _ref.strokeWidth,
      size = _ref.size;
  return (0, _react.useMemo)(function () {
    var backup = strokeWeights[size && size in strokeWeights ? size : 'md'];
    return Math.max(1, strokeWidth || backup);
  }, [strokeWidth, size]);
}

function useSVG(_ref2) {
  var shape = _ref2.shape;
  return (0, _react.useMemo)(function () {
    return shape === 'semi-circle' || shape === 'circle';
  }, [shape]);
}

var baseWidth = 32;

function useSVGStrokeWidth(params) {
  var _useState = (0, _react.useState)(params.strokeWidth),
      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
      svgStrokeWidth = _useState2[0],
      setSvgStrokeWidth = _useState2[1];

  (0, _react.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
  };
}

function useSizeStyle(_ref3) {
  var size = _ref3.size,
      shape = _ref3.shape;
  return (0, _react.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;

function useRoundSVGAttributes(_ref4) {
  var shape = _ref4.shape,
      strokeShape = _ref4.strokeShape,
      finalStrokeWidth = _ref4.finalStrokeWidth,
      percent = _ref4.percent;
  return (0, _react.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]);
}

function useRectStyles(_ref5) {
  var strokeWidthWithBackup = _ref5.strokeWidthWithBackup,
      finalStrokeWidth = _ref5.finalStrokeWidth,
      strokeShape = _ref5.strokeShape,
      percent = _ref5.percent;
  return (0, _react.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]);
}

function useIndicator(_ref6) {
  var text = _ref6.text,
      percent = _ref6.percent,
      children = _ref6.children;
  return (0, _react.useMemo)(function () {
    var formattedPercent = text ? text(percent || 0) : null;
    var indicator = children || formattedPercent;
    return indicator;
  }, [text, percent, children]);
}