@vimeo/iris/components/Progress/Progress.js

Vimeo Design System

'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

var tslib_es6 = require('../../tslib.es6-3ec409b7.js');
var React = require('react');
var styled = require('styled-components');
var components_Ribbon_Ribbon = require('../Ribbon/Ribbon.js');
var utils_HOCs_withIris = require('../../utils/HOCs/withIris.js');
var utils_DOM_geometry = require('../../utils/DOM/geometry.js');
require('../Ribbon/Ribbon.style.js');
require('polished');
require('../../color/colors.js');

function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }

var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var styled__default = /*#__PURE__*/_interopDefaultLegacy(styled);

var Progress = utils_HOCs_withIris.withIris(ProgressComponent);
function ProgressComponent(_a) {
    var _b;
    var animate = _a.animate, value = _a.value, forwardRef = _a.forwardRef, _c = _a.variant, variant = _c === void 0 ? 'rainbow' : _c, _d = _a.size, size = _d === void 0 ? 'md' : _d, style = _a.style, props = tslib_es6.__rest(_a, ["animate", "value", "forwardRef", "variant", "size", "style"]);
    var ref = React.useRef(null);
    var width = ((_b = utils_DOM_geometry.geometry(ref.current)) !== null && _b !== void 0 ? _b : {}).width;
    var background = (style !== null && style !== void 0 ? style : {}).background;
    var ARIAprops = {
        'aria-valuenow': value,
        'aria-valuemin': 0,
        'aria-valuemax': 100,
    };
    return (React__default["default"].createElement(Background, tslib_es6.__assign({ ref: ref, style: tslib_es6.__assign({}, style) }, props),
        React__default["default"].createElement(Boundary, { style: { width: value + '%' } },
            React__default["default"].createElement(components_Ribbon_Ribbon.Ribbon, tslib_es6.__assign({ animate: animate, ref: forwardRef, role: "progressbar", size: size, style: { width: width, background: background }, variant: variant }, ARIAprops)))));
}
var bgGradient = function (_a) {
    var theme = _a.theme;
    return theme.name === 'dark'
        ? 'linear-gradient(to right, #322f33, #45484c)'
        : 'linear-gradient(to right, #908994, #adb4be)';
};
var Background = styled__default["default"].div(templateObject_1 || (templateObject_1 = tslib_es6.__makeTemplateObject(["\n  position: relative;\n  border-radius: 0.5rem;\n  background: ", ";\n"], ["\n  position: relative;\n  border-radius: 0.5rem;\n  background: ", ";\n"])), bgGradient);
var Boundary = styled__default["default"].div(templateObject_2 || (templateObject_2 = tslib_es6.__makeTemplateObject(["\n  overflow: hidden;\n  border-radius: 0.5rem;\n  transition: 30ms linear;\n"], ["\n  overflow: hidden;\n  border-radius: 0.5rem;\n  transition: 30ms linear;\n"])));
var templateObject_1, templateObject_2;

exports.Progress = Progress;