@forchange/aui/lib/progress/index.js

ai-boss 业务 ui 组件库

"use strict";

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

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

function _getRequireWildcardCache() { if (typeof WeakMap !== "function") return null; var cache = new WeakMap(); _getRequireWildcardCache = function () { return cache; }; return cache; }

function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } var cache = _getRequireWildcardCache(); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; if (obj != null) { var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }

const Progress = ({
  percent,
  className,
  strokeWidth: width = '100%',
  strokeHeight: height = 10,
  backgroundColor = '#e6e8f7',
  strokeColor = '#707cff',
  extraColor = '#fdaf00',
  borderRadius = 4,
  strokeMode
}) => {
  const minWidth = '10px';
  return strokeMode === 'fixedWidth' ? React.createElement("div", {
    style: {
      display: 'flex',
      width: '100%'
    },
    className: className ? `container--progress-component ${className}` : 'container--progress-component'
  }, percent < 100 && React.createElement("div", {
    className: "wrapper--progress-component",
    style: {
      minWidth,
      width: percent > 100 ? `${100 - (percent - 100)}%` : '100%',
      height,
      borderRadius: `${borderRadius}px`,
      backgroundColor
    }
  }, React.createElement("div", {
    className: "section--less-bar",
    style: {
      minWidth,
      width: percent > 100 ? `100%` : `${percent}%`,
      height,
      zIndex: 1,
      borderRadius: `${borderRadius}px`,
      backgroundColor: strokeColor
    }
  })), percent > 100 && React.createElement(React.Fragment, null, React.createElement("div", {
    className: "section--less-bar",
    style: {
      minWidth,
      width: percent > 100 ? `100%` : `${percent}%`,
      height,
      zIndex: 1,
      borderRadius: `${borderRadius}px`,
      backgroundColor: strokeColor
    }
  }), React.createElement("div", {
    className: "section--more-bar",
    style: {
      minWidth,
      width: percent > 100 ? `${percent - 100}%` : 0,
      height,
      marginLeft: `-${borderRadius + 2}px`,
      borderRadius: `${borderRadius}px`,
      backgroundColor: extraColor
    }
  }))) : React.createElement("div", {
    style: {
      display: 'flex',
      width: '100%'
    },
    className: className ? `container--progress-component ${className}` : 'container--progress-component'
  }, React.createElement("div", {
    className: "wrapper--progress-component",
    style: {
      position: 'relative',
      width,
      height,
      borderRadius: `${borderRadius}px`,
      backgroundColor
    }
  }, React.createElement("div", {
    className: "section--less-bar",
    style: {
      position: 'absolute',
      top: 0,
      left: 0,
      minWidth,
      width: percent > 100 ? `100%` : `${percent}%`,
      height,
      zIndex: 1,
      borderRadius: `${borderRadius}px`,
      backgroundColor: strokeColor
    }
  }), React.createElement("div", {
    className: "section--more-bar",
    style: {
      position: 'absolute',
      top: 0,
      right: `-${percent - 100}%`,
      minWidth,
      width: percent > 100 ? `calc(${percent - 100}% + ${borderRadius + 2}px)` : 0,
      height,
      zIndex: 0,
      borderRadius: `${borderRadius}px`,
      backgroundColor: extraColor
    }
  })));
};

var _default = Progress;
exports.default = _default;