zarm/lib/loading/index.js

基于 React 的移动端UI库

"use strict";

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

var _typeof = require("@babel/runtime/helpers/typeof");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.default = void 0;

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

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

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

var _bem = require("@zarm-design/bem");

var React = _interopRequireWildcard(require("react"));

var _configProvider = require("../config-provider");

function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }

function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) { if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } } return n.default = e, t && t.set(e, n), n; }

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 = (0, _objectWithoutProperties2.default)(props, ["className", "size", "percent", "strokeWidth", "loading"]);

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

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

  if (loading) {
    return /*#__PURE__*/React.createElement("div", (0, _extends2.default)({
      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", (0, _extends2.default)({
    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 = (0, _objectWithoutProperties2.default)(props, ["className", "size"]);

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

  var bem = (0, _bem.createBEM)('loading', {
    prefixCls: prefixCls
  });
  var cls = bem([(0, _defineProperty2.default)({
    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", (0, _extends2.default)({
    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 = (0, _objectWithoutProperties2.default)(props, ["type"]);

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

  var strokeWidth = props.strokeWidth,
      percent = props.percent,
      loading = props.loading,
      type = props.type,
      restProps = (0, _objectWithoutProperties2.default)(props, ["strokeWidth", "percent", "loading", "type"]);
  return /*#__PURE__*/React.createElement(Spinner, (0, _extends2.default)({
    ref: ref
  }, restProps));
});
Loading.defaultProps = {
  type: 'circular',
  loading: true,
  strokeWidth: 5,
  percent: 20
};
Loading.displayName = 'Loading';
var _default = Loading;
exports.default = _default;