@alifd/meet-react/es/progress/linear.js

Fusion Mobile React UI System Component

import { rpx2vw4style as __rpx2vw__ } from "@alifd/babel-runtime-jsx-style-transform";
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
import { __rest } from "tslib";
import classNames from 'classnames';
import React, { createElement, forwardRef } from "react";
import View from '../view';
import { progressBackgroundColor, progressiveColor, progressSize, statusColor } from './utils';
import { isNumber } from '../utils';
var LinearProgress = function LinearProgress(props, ref) {
  var _props$prefix = props.prefix,
    prefix = _props$prefix === void 0 ? 'mt-' : _props$prefix,
    _props$percent = props.percent,
    percent = _props$percent === void 0 ? 0 : _props$percent,
    color = props.color,
    _props$size = props.size,
    size = _props$size === void 0 ? 'medium' : _props$size,
    backgroundColor = props.backgroundColor,
    _props$progressive = props.progressive,
    progressive = _props$progressive === void 0 ? false : _props$progressive,
    _props$state = props.state,
    state = _props$state === void 0 ? 'normal' : _props$state,
    className = props.className,
    others = __rest(props, ["prefix", "percent", "color", "size", "backgroundColor", "progressive", "state", "className"]);
  var progressiveColorEnabled = function progressiveColorEnabled() {
    if (progressive) {
      return progressiveColor(percent);
    } else {
      return color || statusColor(state);
    }
  };
  var trackStyle = {
    height: progressSize(size),
    backgroundColor: progressBackgroundColor(backgroundColor)
  };
  var barStyle = {
    height: progressSize(size),
    backgroundColor: progressiveColorEnabled(),
    width: "".concat(percent, "%")
  };
  if (isNumber(size) && size > 0) {
    var borderRadiusVal = "".concat(size / 2, "rpx");
    trackStyle.borderRadius = borderRadiusVal;
    barStyle.borderRadius = borderRadiusVal;
  }
  var clsPrefix = "".concat(prefix, "progress");
  return /*#__PURE__*/React.createElement(View, _extends({
    ref: ref
  }, others, {
    className: classNames(clsPrefix, "".concat(clsPrefix, "-line--").concat(size), "".concat(clsPrefix, "-line-").concat(size, "-corner"), className)
  }), /*#__PURE__*/React.createElement(View, {
    className: classNames("".concat(clsPrefix, "-track"), "".concat(clsPrefix, "-line-").concat(size, "-corner")),
    style: __rpx2vw__(trackStyle)
  }, /*#__PURE__*/React.createElement(View, {
    className: classNames("".concat(clsPrefix, "-line-bar"), "".concat(clsPrefix, "-line-").concat(size, "-corner")),
    style: __rpx2vw__(barStyle)
  })));
};
export default /*#__PURE__*/forwardRef(LinearProgress);