zarm/es/loading/index.js

基于 React 的移动端UI库

import _extends from "@babel/runtime/helpers/extends";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
import { createBEM } from '@zarm-design/bem';
import * as React from 'react';
import { ConfigContext } from '../config-provider';
var DIAMETER = 62;
var Circular = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var className = props.className,
      size = props.size,
      percent = props.percent,
      strokeWidth = props.strokeWidth,
      loading = props.loading,
      restProps = _objectWithoutProperties(props, ["className", "size", "percent", "strokeWidth", "loading"]);

  var _React$useContext = React.useContext(ConfigContext),
      prefixCls = _React$useContext.prefixCls;

  var bem = createBEM('loading', {
    prefixCls: prefixCls
  });
  var cls = bem([_defineProperty({
    circular: loading
  }, "".concat(size), !!size), className]);
  var half = DIAMETER / 2;
  var r = half - strokeWidth / 2;

  if (loading) {
    return /*#__PURE__*/React.createElement("div", _extends({
      className: cls
    }, restProps, {
      ref: ref
    }), /*#__PURE__*/React.createElement("svg", {
      viewBox: "".concat(DIAMETER / 2, " ").concat(DIAMETER / 2, " ").concat(DIAMETER, " ").concat(DIAMETER)
    }, /*#__PURE__*/React.createElement("circle", {
      cx: DIAMETER,
      cy: DIAMETER,
      r: r,
      fill: "none",
      style: {
        strokeWidth: strokeWidth
      }
    })));
  }

  var round = 2 * Math.PI * r;
  var lineStyle = {
    strokeDasharray: "".concat(round * percent / 100, " ").concat(round),
    strokeWidth: strokeWidth
  };
  return /*#__PURE__*/React.createElement("div", _extends({
    className: cls
  }, restProps, {
    ref: ref
  }), /*#__PURE__*/React.createElement("svg", {
    viewBox: "0 0 ".concat(DIAMETER, " ").concat(DIAMETER)
  }, /*#__PURE__*/React.createElement("circle", {
    className: bem('stroke'),
    cx: half,
    cy: half,
    r: r,
    fill: "none",
    style: {
      strokeWidth: strokeWidth
    }
  }), /*#__PURE__*/React.createElement("circle", {
    className: bem('line'),
    cx: half,
    cy: half,
    r: r,
    fill: "none",
    style: lineStyle
  })));
});
Circular.displayName = 'Circular';
var Spinner = /*#__PURE__*/React.forwardRef(function (props, ref) {
  var className = props.className,
      size = props.size,
      restProps = _objectWithoutProperties(props, ["className", "size"]);

  var _React$useContext2 = React.useContext(ConfigContext),
      prefixCls = _React$useContext2.prefixCls;

  var bem = createBEM('loading', {
    prefixCls: prefixCls
  });
  var cls = bem([_defineProperty({
    spinner: true
  }, "".concat(size), !!size), className]);
  var spinner = [];

  for (var i = 0; i < 9; i++) {
    spinner.push( /*#__PURE__*/React.createElement("div", {
      key: i
    }));
  }

  return /*#__PURE__*/React.createElement("div", _extends({
    ref: ref,
    className: cls
  }, restProps), spinner);
});
Spinner.displayName = 'Spinner';
var Loading = /*#__PURE__*/React.forwardRef(function (props, ref) {
  if (props.type !== 'spinner') {
    var _type = props.type,
        _restProps = _objectWithoutProperties(props, ["type"]);

    return /*#__PURE__*/React.createElement(Circular, _extends({
      ref: ref
    }, _restProps));
  }

  var strokeWidth = props.strokeWidth,
      percent = props.percent,
      loading = props.loading,
      type = props.type,
      restProps = _objectWithoutProperties(props, ["strokeWidth", "percent", "loading", "type"]);

  return /*#__PURE__*/React.createElement(Spinner, _extends({
    ref: ref
  }, restProps));
});
Loading.defaultProps = {
  type: 'circular',
  loading: true,
  strokeWidth: 5,
  percent: 20
};
Loading.displayName = 'Loading';
export default Loading;