@geezee/react-ui/esm/progress/progress.js

Modern and minimalist React UI library.

import _extends from "@babel/runtime/helpers/esm/extends";
import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
import _JSXStyle from "styled-jsx/style";
import React from 'react';
import withDefaults from '../utils/with-defaults';
import useTheme from '../styles/use-theme';
import { useProportions } from '../utils/calculations';
var defaultProps = {
  value: 0,
  max: 100,
  type: 'default',
  fixedTop: false,
  fixedBottom: false,
  className: ''
};

var getCurrentColor = function getCurrentColor(ratio, palette, type) {
  var colors = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : {};
  var defaultColors = {
    "default": palette.foreground,
    primary: palette.success,
    success: palette.success,
    secondary: palette.secondary,
    warning: palette.warning,
    error: palette.error
  };
  var colorKeys = Object.keys(colors);
  if (colorKeys.length === 0) return defaultColors[type];
  var customColorKey = colorKeys.find(function (key) {
    return ratio <= +key;
  });
  if (!customColorKey || Number.isNaN(+customColorKey)) return defaultColors[type];
  return colors[+customColorKey];
};

var Progress = function Progress(_ref) {
  var value = _ref.value,
      max = _ref.max,
      className = _ref.className,
      type = _ref.type,
      colors = _ref.colors,
      fixedTop = _ref.fixedTop,
      fixedBottom = _ref.fixedBottom,
      props = _objectWithoutProperties(_ref, ["value", "max", "className", "type", "colors", "fixedTop", "fixedBottom"]);

  var theme = useTheme();
  var percentValue = useProportions(value, max);
  var currentColor = getCurrentColor(percentValue, theme.palette, type, colors);
  var fixed = fixedTop || fixedBottom;
  return /*#__PURE__*/React.createElement("div", {
    className: _JSXStyle.dynamic([["969529316", [theme.palette.accents_2, theme.expressiveness.R2, fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.expressiveness.R2, currentColor, percentValue]]]) + " " + "progress ".concat(className, " ").concat(fixed ? 'fixed' : '')
  }, /*#__PURE__*/React.createElement("div", {
    title: "".concat(percentValue, "%"),
    className: _JSXStyle.dynamic([["969529316", [theme.palette.accents_2, theme.expressiveness.R2, fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.expressiveness.R2, currentColor, percentValue]]]) + " " + "inner"
  }), /*#__PURE__*/React.createElement("progress", _extends({
    value: value,
    max: max
  }, props, {
    className: _JSXStyle.dynamic([["969529316", [theme.palette.accents_2, theme.expressiveness.R2, fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.expressiveness.R2, currentColor, percentValue]]]) + " " + (props && props.className != null && props.className || className || "")
  })), /*#__PURE__*/React.createElement(_JSXStyle, {
    id: "969529316",
    dynamic: [theme.palette.accents_2, theme.expressiveness.R2, fixedTop ? 0 : 'unset', fixedBottom ? 0 : 'unset', theme.expressiveness.R2, currentColor, percentValue]
  }, "progress.__jsx-style-dynamic-selector{position:fixed;top:-1000px;opacity:0;visibility:hidden;pointer-events:none;}.progress.__jsx-style-dynamic-selector{position:relative;width:100%;height:0.625rem;background-color:".concat(theme.palette.accents_2, ";border-radius:").concat(theme.expressiveness.R2, ";}.fixed.__jsx-style-dynamic-selector{position:fixed;top:").concat(fixedTop ? 0 : 'unset', ";bottom:").concat(fixedBottom ? 0 : 'unset', ";left:0;border-radius:0;}.fixed.__jsx-style-dynamic-selector>.inner.__jsx-style-dynamic-selector{border-radius:0;}.inner.__jsx-style-dynamic-selector{position:absolute;top:0;left:0;height:100%;bottom:0;-webkit-transition:all 100ms ease-in;transition:all 100ms ease-in;border-radius:").concat(theme.expressiveness.R2, ";background-color:").concat(currentColor, ";width:").concat(percentValue, "%;}")));
};

export default withDefaults(Progress, defaultProps);