shineout/es/Progress/Line.js

Shein 前端组件库

import _extends from "@babel/runtime/helpers/extends";
import React from 'react';
import classnames from 'classnames';
import { progressClass } from './styles';
import analyzeColor from './analyzeColor';
import Popup from './Popup';
import { isRTL } from '../config';
var DefaultValue = {
  strokeWidth: 8
};

function Line(props) {
  var children = props.children,
      _props$strokeWidth = props.strokeWidth,
      strokeWidth = _props$strokeWidth === void 0 ? DefaultValue.strokeWidth : _props$strokeWidth,
      type = props.type,
      value = props.value,
      color = props.color,
      style = props.style,
      background = props.background,
      popup = props.popup;
  var hasChildren = children !== undefined;
  var isPopup = popup && hasChildren;
  var className = classnames(progressClass('line', type, isPopup && 'line-popup', isRTL() && 'rtl'), props.className);
  var innerStyle = {
    width: value / 100 * 100 + "%",
    borderRadius: strokeWidth / 2
  };

  if (typeof color === 'string') {
    innerStyle.background = color;
    innerStyle.backgroundSize = '1em 1em';
  } else if (typeof color === 'object') {
    innerStyle.background = "linear-gradient(to right, " + analyzeColor(color).reduce(function (p, v) {
      var col = v.color + " " + v.pos;
      return p ? p + "," + col : col;
    }, '') + ")";
  }

  return React.createElement("div", {
    className: className,
    style: style
  }, React.createElement("div", {
    className: progressClass('background'),
    style: {
      height: strokeWidth,
      background: background,
      borderRadius: strokeWidth / 2
    }
  }, React.createElement("div", {
    className: progressClass('front'),
    style: innerStyle
  })), hasChildren && (popup ? React.createElement(Popup, _extends({}, props, {
    value: value
  })) : React.createElement("div", {
    className: progressClass('content')
  }, children)));
}

Line.defaultProps = DefaultValue;
export default Line;