Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

@hig/progress-ring

Package Overview
Dependencies
Maintainers
6
Versions
123
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@hig/progress-ring - npm Package Compare versions

Comparing version 2.1.0 to 2.2.0

660

build/index.es.js

@@ -1,2 +0,2 @@

import React, { useState, useEffect, useRef } from 'react';
import React, { useState, useRef, useEffect } from 'react';
import PropTypes from 'prop-types';

@@ -7,34 +7,78 @@ import { CSSTransition } from 'react-transition-group';

var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
var MAX_INCREASE_PER_MS = 1 / 1000;
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
var ProgressRingDeterminateBehavior = function ProgressRingDeterminateBehavior(props) {
var _useState = useState(null),
_useState2 = _slicedToArray(_useState, 2),
cssTransitionState = _useState2[0],
setCSSTransitionState = _useState2[1];
return target;
};
var _useState3 = useState(true),
_useState4 = _slicedToArray(_useState3, 2),
transitionEnter = _useState4[0],
setTransitionEnter = _useState4[1];
return _extends.apply(this, arguments);
}
var containerRef = useRef(null);
var value = 0;
var prevTimestamp = 0;
var targetValue = void 0;
var segments = void 0;
var SEGMENT_COUNT = void 0;
var FADE_DELAY_FACTOR = void 0;
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
var wait = function wait() {
prevTimestamp = window.performance.now();
// eslint-disable-next-line no-use-before-define
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
const MAX_INCREASE_PER_MS = 1 / 1000;
const ProgressRingDeterminateBehavior = props => {
const [cssTransitionState, setCSSTransitionState] = useState(null);
const [transitionEnter, setTransitionEnter] = useState(true);
const containerRef = useRef(null);
let value = 0;
let prevTimestamp = 0;
let targetValue;
let segments;
let SEGMENT_COUNT;
let FADE_DELAY_FACTOR;
const wait = () => {
prevTimestamp = window.performance.now(); // eslint-disable-next-line no-use-before-define
window.requestAnimationFrame(step);
};
var enter = function enter() {
segments.forEach(function (segment) {
var eachSegment = segment;
const enter = () => {
segments.forEach(segment => {
const eachSegment = segment;
eachSegment.style.opacity = 0;

@@ -48,5 +92,7 @@ });

*/
var exit = function exit() {
segments.forEach(function (segment) {
var eachSegment = segment;
const exit = () => {
segments.forEach(segment => {
const eachSegment = segment;
eachSegment.style.opacity = null;

@@ -58,11 +104,11 @@ });

var opacityForSegment = function opacityForSegment(index, param) {
var fadeStartValue = index * FADE_DELAY_FACTOR;
const opacityForSegment = (index, param) => {
const fadeStartValue = index * FADE_DELAY_FACTOR;
return Math.max(0, (param - fadeStartValue) / FADE_DELAY_FACTOR);
};
var setSegmentOpacities = function setSegmentOpacities(param) {
segments.forEach(function (segment, i) {
var index = Math.abs(i - SEGMENT_COUNT) - 1;
var eachSegment = segment;
const setSegmentOpacities = param => {
segments.forEach((segment, i) => {
const index = Math.abs(i - SEGMENT_COUNT) - 1;
const eachSegment = segment;
eachSegment.style.opacity = opacityForSegment(index, param);

@@ -72,5 +118,5 @@ });

var progressTowardTarget = function progressTowardTarget(timestamp) {
var elapsed = timestamp - prevTimestamp;
var valueDiff = void 0;
const progressTowardTarget = timestamp => {
const elapsed = timestamp - prevTimestamp;
let valueDiff;

@@ -85,2 +131,3 @@ if (targetValue > value) {

}
prevTimestamp = undefined;

@@ -90,14 +137,11 @@ return;

var interrumValue = value + valueDiff;
const interrumValue = value + valueDiff;
setSegmentOpacities(interrumValue);
prevTimestamp = timestamp;
value = interrumValue;
value = interrumValue; // eslint-disable-next-line no-use-before-define
// eslint-disable-next-line no-use-before-define
window.requestAnimationFrame(step);
};
var step = function step(timestamp) {
const step = timestamp => {
if (cssTransitionState === "entering" || cssTransitionState === "exiting") {

@@ -113,4 +157,8 @@ wait();

/**
* @todo The condition associated with the final state of the animation was modified to prevent it from running. The exited state of the animation is the origin of an infinite loop. The component must be refactored to optimize the component life cycle.
* @todo The condition associated with the final state of the animation was modified
* to prevent it from running. The exited state of the animation is the origin of an
* infinite loop. The component must be refactored to optimize the component life cycle.
*/
if (targetValue === 1 && value === 1 && cssTransitionState === "exited") {

@@ -124,13 +172,16 @@ exit();

var setProgress = function setProgress(percent) {
const setProgress = percent => {
targetValue = percent / 100;
if (!prevTimestamp) {
prevTimestamp = window.performance.now();
}
window.requestAnimationFrame(step);
};
var initSegments = function initSegments() {
var current = containerRef.current;
const initSegments = () => {
const {
current
} = containerRef;
segments = Array.from(current.querySelectorAll(".hig__progress-ring__segment"));

@@ -142,7 +193,7 @@ current.querySelector(".hig__progress-ring__mask").style.opacity = null;

var handleEntering = function handleEntering() {
const handleEntering = () => {
setCSSTransitionState("entering");
};
var handleEntered = function handleEntered() {
const handleEntered = () => {
setCSSTransitionState("entered");

@@ -152,7 +203,7 @@ setProgress(props.percentComplete);

var handleExiting = function handleExiting() {
const handleExiting = () => {
setCSSTransitionState("exiting");
};
var handleExited = function handleExited() {
const handleExited = () => {
setCSSTransitionState("exited");

@@ -163,7 +214,8 @@ };

*/
var refContainer = function refContainer(param) {
const refContainer = param => {
containerRef.current = param;
};
useEffect(function () {
useEffect(() => {
if (cssTransitionState === "entered" || cssTransitionState === "exited") {

@@ -174,27 +226,22 @@ initSegments();

});
return React.createElement(
CSSTransition,
{
"in": transitionEnter,
timeout: { enter: 650, exit: 466 },
appear: true,
classNames: "hig__progress-ring--",
onEntering: handleEntering,
onEntered: handleEntered,
onExiting: handleExiting,
onExited: handleExited
return /*#__PURE__*/React.createElement(CSSTransition, {
in: transitionEnter,
timeout: {
enter: 650,
exit: 466
},
function (status) {
return props.children({
innerRef: refContainer,
percentComplete: props.percentComplete,
cssTransitionState: status
});
}
);
appear: true,
classNames: "hig__progress-ring--",
onEntering: handleEntering,
onEntered: handleEntered,
onExiting: handleExiting,
onExited: handleExited
}, status => props.children({
innerRef: refContainer,
percentComplete: props.percentComplete,
cssTransitionState: status
}));
};
ProgressRingDeterminateBehavior.displayName = "ProgressRingDeterminateBehavior";
ProgressRingDeterminateBehavior.propTypes = {

@@ -205,2 +252,3 @@ /**

percentComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/** Render prop */

@@ -235,45 +283,34 @@ children: PropTypes.func.isRequired

var _slicedToArray$1 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
const CYCLE_DURATION = 1000;
const FADE_DURATION = 416;
var CYCLE_DURATION = 1000;
var FADE_DURATION = 416;
const ProgressRingIndeterminateBehavior = props => {
const [cssTransitionState, setcssTransitionState] = useState(null);
const [playing, setPlaying] = useState(null);
const containerRef = useRef(null);
let startTime;
let segments;
let SEGMENT_COUNT;
let SEGMENT_DELAY_FACTOR;
var ProgressRingIndeterminateBehavior = function ProgressRingIndeterminateBehavior(props) {
var _useState = useState(null),
_useState2 = _slicedToArray$1(_useState, 2),
cssTransitionState = _useState2[0],
setcssTransitionState = _useState2[1];
const opacityForSegment = (index, elapsedThisCycle) => {
const segmentFadeStartTime = index * SEGMENT_DELAY_FACTOR; // Fade continuing from previous cycle
var _useState3 = useState(null),
_useState4 = _slicedToArray$1(_useState3, 2),
playing = _useState4[0],
setPlaying = _useState4[1];
var containerRef = useRef(null);
var startTime = void 0;
var segments = void 0;
var SEGMENT_COUNT = void 0;
var SEGMENT_DELAY_FACTOR = void 0;
var opacityForSegment = function opacityForSegment(index, elapsedThisCycle) {
var segmentFadeStartTime = index * SEGMENT_DELAY_FACTOR;
// Fade continuing from previous cycle
if (segmentFadeStartTime + FADE_DURATION > CYCLE_DURATION && elapsedThisCycle < FADE_DURATION) {
return ((elapsedThisCycle + CYCLE_DURATION - segmentFadeStartTime) / FADE_DURATION - 1) * -1;
}
} // Fade has finished
// Fade has finished
if (elapsedThisCycle < segmentFadeStartTime || elapsedThisCycle > segmentFadeStartTime + FADE_DURATION) {
return 0;
}
} // Fading
// Fading
return Math.abs((elapsedThisCycle - segmentFadeStartTime) / FADE_DURATION - 1);
};
var setSegmentOpacities = function setSegmentOpacities(elapsedThisCycle) {
segments.forEach(function (segment, i) {
var index = Math.abs(i - SEGMENT_COUNT) - 1;
var eachSegment = segment;
const setSegmentOpacities = elapsedThisCycle => {
segments.forEach((segment, i) => {
const index = Math.abs(i - SEGMENT_COUNT) - 1;
const eachSegment = segment;
eachSegment.style.opacity = opacityForSegment(index, elapsedThisCycle);

@@ -283,5 +320,6 @@ });

var initSegments = function initSegments() {
var current = containerRef.current;
const initSegments = () => {
const {
current
} = containerRef;
segments = Array.from(current.querySelectorAll(".hig__progress-ring__segment"));

@@ -293,6 +331,7 @@ current.querySelector(".hig__progress-ring__mask").style.opacity = null;

var step = function step(timestamp) {
const step = timestamp => {
if (!playing) {
return;
}
if (cssTransitionState !== "entered") {

@@ -304,10 +343,9 @@ window.requestAnimationFrame(step);

if (!startTime) startTime = timestamp;
var elapsed = timestamp - startTime;
var elapsedThisCycle = elapsed % CYCLE_DURATION;
const elapsed = timestamp - startTime;
const elapsedThisCycle = elapsed % CYCLE_DURATION;
setSegmentOpacities(elapsedThisCycle);
window.requestAnimationFrame(step);
};
var start = function start() {
const start = () => {
setPlaying(true);

@@ -318,7 +356,7 @@ startTime = undefined;

var handleEntering = function handleEntering() {
const handleEntering = () => {
setcssTransitionState("entering");
};
var handleEntered = function handleEntered() {
const handleEntered = () => {
setcssTransitionState("entered");

@@ -328,7 +366,7 @@ start();

var handleExiting = function handleExiting() {
const handleExiting = () => {
setcssTransitionState("exited");
};
var handleExited = function handleExited() {
const handleExited = () => {
setcssTransitionState("exited");

@@ -339,34 +377,30 @@ };

*/
var refContainer = function refContainer(value) {
const refContainer = value => {
containerRef.current = value;
};
useEffect(function () {
useEffect(() => {
initSegments();
step(1);
});
return React.createElement(
CSSTransition,
{
"in": true,
timeout: { enter: 650, exit: 466 },
appear: true,
classNames: "hig__progress-ring--",
onEntering: handleEntering,
onEntered: handleEntered,
onExiting: handleExiting,
onExited: handleExited
return /*#__PURE__*/React.createElement(CSSTransition, {
in: true,
timeout: {
enter: 650,
exit: 466
},
function (status) {
return props.children({
innerRef: refContainer,
cssTransitionState: status
});
}
);
appear: true,
classNames: "hig__progress-ring--",
onEntering: handleEntering,
onEntered: handleEntered,
onExiting: handleExiting,
onExited: handleExited
}, status => props.children({
innerRef: refContainer,
cssTransitionState: status
}));
};
ProgressRingIndeterminateBehavior.displayName = "ProgressRingIndeterminateBehavior";
ProgressRingIndeterminateBehavior.propTypes = {

@@ -390,30 +424,91 @@ /** Render prop */

var _templateObject = _taggedTemplateLiteral(["\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n 61% {\n transform: scale(1.1);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n"], ["\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n 61% {\n transform: scale(1.1);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n"]),
_templateObject2 = _taggedTemplateLiteral(["\n from {\n opacity: 0;\n transform: scale(2);\n }\n\n 55% {\n opacity: 0;\n transform: scale(1.6);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n"], ["\n from {\n opacity: 0;\n transform: scale(2);\n }\n\n 55% {\n opacity: 0;\n transform: scale(1.6);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n"]),
_templateObject3 = _taggedTemplateLiteral(["\n from {\n opacity: 1;\n transform: scale(1);\n fill: ", ";\n }\n\n 10% {\n transform: scale(1.1);\n }\n\n 60% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n "], ["\n from {\n opacity: 1;\n transform: scale(1);\n fill: ", ";\n }\n\n 10% {\n transform: scale(1.1);\n }\n\n 60% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n "]),
_templateObject4 = _taggedTemplateLiteral(["\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n 10% {\n transform: scale(1.2);\n }\n\n 90% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n"], ["\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n 10% {\n transform: scale(1.2);\n }\n\n 90% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n"]),
_templateObject5 = _taggedTemplateLiteral(["\n from {\n opacity: 1;\n }\n\n 28% {\n opacity: 0;\n }\n"], ["\n from {\n opacity: 1;\n }\n\n 28% {\n opacity: 0;\n }\n"]);
const BackgroundEntering = keyframes`
from {
opacity: 0;
transform: scale(0);
}
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
61% {
transform: scale(1.1);
}
var BackgroundEntering = keyframes(_templateObject);
to {
opacity: 1;
transform: scale(1);
}
`;
const MaskEntering = keyframes`
from {
opacity: 0;
transform: scale(2);
}
var MaskEntering = keyframes(_templateObject2);
55% {
opacity: 0;
transform: scale(1.6);
}
var BackgroundExiting = function BackgroundExiting(color) {
return keyframes(_templateObject3, color);
};
to {
opacity: 1;
transform: scale(1);
}
`;
var MaskExiting = keyframes(_templateObject4);
const BackgroundExiting = color => keyframes`
from {
opacity: 1;
transform: scale(1);
fill: ${color};
}
var SegmentsExiting = keyframes(_templateObject5);
10% {
transform: scale(1.1);
}
function stylesheet(props, themeData) {
var cssTransitionState = props.cssTransitionState,
mask = props.mask,
customStylesheet = props.stylesheet,
surface = props.surface;
60% {
opacity: 1;
}
to {
opacity: 0;
transform: scale(0);
}
`;
var styles = {
const MaskExiting = keyframes`
from {
opacity: 1;
transform: scale(1);
}
10% {
transform: scale(1.2);
}
90% {
opacity: 1;
}
to {
opacity: 0;
transform: scale(0);
}
`;
const SegmentsExiting = keyframes`
from {
opacity: 1;
}
28% {
opacity: 0;
}
`;
function stylesheet(props, themeData) {
const {
cssTransitionState,
mask,
stylesheet: customStylesheet,
surface
} = props;
const styles = {
ring: {

@@ -428,3 +523,2 @@ fontFamily: "ArtifaktElement",

},
background: {

@@ -434,8 +528,6 @@ transformOrigin: "center",

},
mask: {
transformOrigin: "center",
fill: mask || themeData["colorScheme.surface.level" + surface]
fill: mask || themeData[`colorScheme.surface.level${surface}`]
},
segment: {

@@ -453,8 +545,8 @@ opacity: 0,

if (cssTransitionState === "entering") {
styles.background.animation = BackgroundEntering + " 0.65s ease-in-out";
styles.mask.animation = MaskEntering + " 0.65s ease-out";
styles.background.animation = `${BackgroundEntering} 0.65s ease-in-out`;
styles.mask.animation = `${MaskEntering} 0.65s ease-out`;
} else if (cssTransitionState === "exiting") {
styles.background.animation = BackgroundExiting(themeData["progress.ring.highlightColor1"]) + " 0.466s ease-in forwards";
styles.mask.animation = MaskExiting + " 0.466s ease-in forwards";
styles.segment.animation = SegmentsExiting + " 0.466s linear";
styles.background.animation = `${BackgroundExiting(themeData["progress.ring.highlightColor1"])} 0.466s ease-in forwards`;
styles.mask.animation = `${MaskExiting} 0.466s ease-in forwards`;
styles.segment.animation = `${SegmentsExiting} 0.466s linear`;
} else if (cssTransitionState === "exited") {

@@ -471,52 +563,45 @@ styles.mask.opacity = 0;

function SVGPresenter(props) {
var height = props.height,
original = props.original,
svgData = props.svgData,
width = props.width;
const {
height,
original,
svgData,
width
} = props;
var buildPolygons = function buildPolygons(svgs, resolvedRoles) {
return svgs.map(function (item) {
// we need this if we don't want to manually edit
// the svg files
var map = {
"hig__progress-ring__background": "background",
"hig__progress-ring__mask": "mask",
"hig__progress-ring__segment": "segment"
};
var styles = stylesheet(props, resolvedRoles)[map[item.className]];
return React.createElement("polygon", {
key: item.points,
className: cx(item.className, css(styles)),
fill: item.fill,
fillRule: item.fillRule,
points: item.points
});
const buildPolygons = (svgs, resolvedRoles) => svgs.map(item => {
// we need this if we don't want to manually edit
// the svg files
const map = {
"hig__progress-ring__background": "background",
"hig__progress-ring__mask": "mask",
"hig__progress-ring__segment": "segment"
};
const styles = stylesheet(props, resolvedRoles)[map[item.className]];
return /*#__PURE__*/React.createElement("polygon", {
key: item.points,
className: cx(item.className, css(styles)),
fill: item.fill,
fillRule: item.fillRule,
points: item.points
});
};
});
return React.createElement(
ThemeContext.Consumer,
null,
function (_ref) {
var resolvedRoles = _ref.resolvedRoles;
return React.createElement(
"svg",
{
width: width,
height: height,
viewBox: "0 0 " + original + " " + original,
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink"
},
buildPolygons(svgData, resolvedRoles)
);
}
);
return /*#__PURE__*/React.createElement(ThemeContext.Consumer, null, _ref => {
let {
resolvedRoles
} = _ref;
return /*#__PURE__*/React.createElement("svg", {
width: width,
height: height,
viewBox: `0 0 ${original} ${original}`,
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink"
}, buildPolygons(svgData, resolvedRoles));
});
}
SVGPresenter.propTypes = {
height: PropTypes.number,
original: PropTypes.number,
// eslint-disable-next-line react/forbid-prop-types
svgData: PropTypes.arrayOf(PropTypes.object),

@@ -563,3 +648,3 @@ width: PropTypes.number

var smallSVG = [{
const smallSVG = [{
className: "hig__progress-ring__background",

@@ -654,3 +739,3 @@ points: "22.49 5.51 14 2 5.51 5.51 2 14 5.51 22.49 14 26 22.49 22.49 26 14"

var mediumSVG = [{
const mediumSVG = [{
className: "hig__progress-ring__background",

@@ -769,3 +854,3 @@ points:

var xsmallSVG = [{
const xsmallSVG = [{
className: "hig__progress-ring__background",

@@ -840,10 +925,7 @@ fillRule: "nonzero",

var availableSizes = Object.freeze(["xs", "s", "m", "l", "xl"]);
var availableSurfaces = Object.freeze([100, 200, 250, 300, 350]);
const availableSizes = Object.freeze(["xs", "s", "m", "l", "xl"]);
const availableSurfaces = Object.freeze([100, 200, 250, 300, 350]);
var _extends = Object.assign || 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; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var sizes = {
const _excluded$1 = ["innerRef", "percentComplete", "size", "cssTransitionState", "surface", "mask"];
const sizes = {
xs: {

@@ -870,41 +952,39 @@ svg: xsmallSVG,

};
function ProgressRingPresenter(props) {
var innerRef = props.innerRef,
percentComplete = props.percentComplete,
size = props.size,
cssTransitionState = props.cssTransitionState,
surface = props.surface,
mask = props.mask,
otherProps = _objectWithoutProperties(props, ["innerRef", "percentComplete", "size", "cssTransitionState", "surface", "mask"]);
const {
innerRef,
percentComplete,
size,
cssTransitionState,
surface,
mask
} = props,
otherProps = _objectWithoutProperties(props, _excluded$1);
var className = otherProps.className;
var SVG = sizes[size].svg;
var originalSize = sizes[size].svg === mediumSVG ? 72 : sizes[size].size;
return React.createElement(
"div",
{
className: cx([className, css(stylesheet(props, {}).ring)]),
role: "progressbar",
"aria-valuemin": "0",
"aria-valuemax": "100",
"aria-valuenow": percentComplete,
ref: innerRef
},
React.createElement(SVGPresenter, _extends({
height: sizes[size].size,
width: sizes[size].size,
original: originalSize,
svgData: SVG,
cssTransitionState: cssTransitionState,
surface: surface,
mask: mask
}, otherProps))
);
const {
className
} = otherProps;
const SVG = sizes[size].svg;
const originalSize = sizes[size].svg === mediumSVG ? 72 : sizes[size].size;
return /*#__PURE__*/React.createElement("div", {
className: cx([className, css(stylesheet(props, {}).ring)]),
role: "progressbar",
"aria-valuemin": "0",
"aria-valuemax": "100",
"aria-valuenow": percentComplete,
ref: innerRef
}, /*#__PURE__*/React.createElement(SVGPresenter, _extends({
height: sizes[size].size,
width: sizes[size].size,
original: originalSize,
svgData: SVG,
cssTransitionState: cssTransitionState,
surface: surface,
mask: mask
}, otherProps)));
}
ProgressRingPresenter.defaultProps = { size: "m", surface: 100 };
ProgressRingPresenter.defaultProps = {
size: "m",
surface: 100
};
ProgressRingPresenter.propTypes = {

@@ -997,34 +1077,33 @@ cssTransitionState: PropTypes.string,

var _extends$1 = Object.assign || 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; };
const _excluded = ["mask", "percentComplete", "size", "stylesheet", "surface"];
function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const ProgressRing = props => {
const {
mask,
percentComplete,
size,
stylesheet,
surface
} = props,
otherProps = _objectWithoutProperties(props, _excluded);
var ProgressRing = function ProgressRing(props) {
var mask = props.mask,
percentComplete = props.percentComplete,
size = props.size,
stylesheet = props.stylesheet,
surface = props.surface,
otherProps = _objectWithoutProperties$1(props, ["mask", "percentComplete", "size", "stylesheet", "surface"]);
var ProgressRingBehavior = percentComplete === undefined ? ProgressRingIndeterminateBehavior : ProgressRingDeterminateBehavior;
var behaviorProps = percentComplete === undefined ? {} : { percentComplete: percentComplete };
return React.createElement(
ProgressRingBehavior,
behaviorProps,
function (_ref) {
var innerRef = _ref.innerRef,
cssTransitionState = _ref.cssTransitionState;
return React.createElement(ProgressRingPresenter, _extends$1({
innerRef: innerRef,
percentComplete: percentComplete,
size: size,
cssTransitionState: cssTransitionState,
stylesheet: stylesheet,
surface: surface,
mask: mask
}, otherProps));
}
);
const ProgressRingBehavior = percentComplete === undefined ? ProgressRingIndeterminateBehavior : ProgressRingDeterminateBehavior;
const behaviorProps = percentComplete === undefined ? {} : {
percentComplete
};
return /*#__PURE__*/React.createElement(ProgressRingBehavior, behaviorProps, _ref => {
let {
innerRef,
cssTransitionState
} = _ref;
return /*#__PURE__*/React.createElement(ProgressRingPresenter, _extends({
innerRef: innerRef,
percentComplete: percentComplete,
size: size,
cssTransitionState: cssTransitionState,
stylesheet: stylesheet,
surface: surface,
mask: mask
}, otherProps));
});
};

@@ -1038,2 +1117,3 @@

mask: PropTypes.string,
/**

@@ -1044,2 +1124,3 @@ * An integer from 0 to 100 representing the percent the delayed operation has completed.

percentComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
/**

@@ -1049,2 +1130,3 @@ * {xs, s, m, l, xl} the size of the progress indicator

size: PropTypes.oneOf(availableSizes),
/**

@@ -1054,2 +1136,3 @@ * Adds custom/overriding styles

stylesheet: PropTypes.func,
/**

@@ -1060,3 +1143,2 @@ * Specifies the surface level for the background

};
ProgressRing.defaultProps = {

@@ -1130,2 +1212,2 @@ size: "m",

export default ProgressRing;
export { ProgressRing as default };

709

build/index.js

@@ -5,43 +5,90 @@ 'use strict';

function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
var React = require('react');
var React__default = _interopDefault(React);
var PropTypes = _interopDefault(require('prop-types'));
var PropTypes = require('prop-types');
var reactTransitionGroup = require('react-transition-group');
var emotion = require('emotion');
var ThemeContext = _interopDefault(require('@hig/theme-context'));
var ThemeContext = require('@hig/theme-context');
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
var MAX_INCREASE_PER_MS = 1 / 1000;
var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
var PropTypes__default = /*#__PURE__*/_interopDefaultLegacy(PropTypes);
var ThemeContext__default = /*#__PURE__*/_interopDefaultLegacy(ThemeContext);
var ProgressRingDeterminateBehavior = function ProgressRingDeterminateBehavior(props) {
var _useState = React.useState(null),
_useState2 = _slicedToArray(_useState, 2),
cssTransitionState = _useState2[0],
setCSSTransitionState = _useState2[1];
function _extends() {
_extends = Object.assign || function (target) {
for (var i = 1; i < arguments.length; i++) {
var source = arguments[i];
var _useState3 = React.useState(true),
_useState4 = _slicedToArray(_useState3, 2),
transitionEnter = _useState4[0],
setTransitionEnter = _useState4[1];
for (var key in source) {
if (Object.prototype.hasOwnProperty.call(source, key)) {
target[key] = source[key];
}
}
}
var containerRef = React.useRef(null);
var value = 0;
var prevTimestamp = 0;
var targetValue = void 0;
var segments = void 0;
var SEGMENT_COUNT = void 0;
var FADE_DELAY_FACTOR = void 0;
return target;
};
var wait = function wait() {
prevTimestamp = window.performance.now();
// eslint-disable-next-line no-use-before-define
return _extends.apply(this, arguments);
}
function _objectWithoutPropertiesLoose(source, excluded) {
if (source == null) return {};
var target = {};
var sourceKeys = Object.keys(source);
var key, i;
for (i = 0; i < sourceKeys.length; i++) {
key = sourceKeys[i];
if (excluded.indexOf(key) >= 0) continue;
target[key] = source[key];
}
return target;
}
function _objectWithoutProperties(source, excluded) {
if (source == null) return {};
var target = _objectWithoutPropertiesLoose(source, excluded);
var key, i;
if (Object.getOwnPropertySymbols) {
var sourceSymbolKeys = Object.getOwnPropertySymbols(source);
for (i = 0; i < sourceSymbolKeys.length; i++) {
key = sourceSymbolKeys[i];
if (excluded.indexOf(key) >= 0) continue;
if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue;
target[key] = source[key];
}
}
return target;
}
const MAX_INCREASE_PER_MS = 1 / 1000;
const ProgressRingDeterminateBehavior = props => {
const [cssTransitionState, setCSSTransitionState] = React.useState(null);
const [transitionEnter, setTransitionEnter] = React.useState(true);
const containerRef = React.useRef(null);
let value = 0;
let prevTimestamp = 0;
let targetValue;
let segments;
let SEGMENT_COUNT;
let FADE_DELAY_FACTOR;
const wait = () => {
prevTimestamp = window.performance.now(); // eslint-disable-next-line no-use-before-define
window.requestAnimationFrame(step);
};
var enter = function enter() {
segments.forEach(function (segment) {
var eachSegment = segment;
const enter = () => {
segments.forEach(segment => {
const eachSegment = segment;
eachSegment.style.opacity = 0;

@@ -55,5 +102,7 @@ });

*/
var exit = function exit() {
segments.forEach(function (segment) {
var eachSegment = segment;
const exit = () => {
segments.forEach(segment => {
const eachSegment = segment;
eachSegment.style.opacity = null;

@@ -65,11 +114,11 @@ });

var opacityForSegment = function opacityForSegment(index, param) {
var fadeStartValue = index * FADE_DELAY_FACTOR;
const opacityForSegment = (index, param) => {
const fadeStartValue = index * FADE_DELAY_FACTOR;
return Math.max(0, (param - fadeStartValue) / FADE_DELAY_FACTOR);
};
var setSegmentOpacities = function setSegmentOpacities(param) {
segments.forEach(function (segment, i) {
var index = Math.abs(i - SEGMENT_COUNT) - 1;
var eachSegment = segment;
const setSegmentOpacities = param => {
segments.forEach((segment, i) => {
const index = Math.abs(i - SEGMENT_COUNT) - 1;
const eachSegment = segment;
eachSegment.style.opacity = opacityForSegment(index, param);

@@ -79,5 +128,5 @@ });

var progressTowardTarget = function progressTowardTarget(timestamp) {
var elapsed = timestamp - prevTimestamp;
var valueDiff = void 0;
const progressTowardTarget = timestamp => {
const elapsed = timestamp - prevTimestamp;
let valueDiff;

@@ -92,2 +141,3 @@ if (targetValue > value) {

}
prevTimestamp = undefined;

@@ -97,14 +147,11 @@ return;

var interrumValue = value + valueDiff;
const interrumValue = value + valueDiff;
setSegmentOpacities(interrumValue);
prevTimestamp = timestamp;
value = interrumValue;
value = interrumValue; // eslint-disable-next-line no-use-before-define
// eslint-disable-next-line no-use-before-define
window.requestAnimationFrame(step);
};
var step = function step(timestamp) {
const step = timestamp => {
if (cssTransitionState === "entering" || cssTransitionState === "exiting") {

@@ -120,4 +167,8 @@ wait();

/**
* @todo The condition associated with the final state of the animation was modified to prevent it from running. The exited state of the animation is the origin of an infinite loop. The component must be refactored to optimize the component life cycle.
* @todo The condition associated with the final state of the animation was modified
* to prevent it from running. The exited state of the animation is the origin of an
* infinite loop. The component must be refactored to optimize the component life cycle.
*/
if (targetValue === 1 && value === 1 && cssTransitionState === "exited") {

@@ -131,13 +182,16 @@ exit();

var setProgress = function setProgress(percent) {
const setProgress = percent => {
targetValue = percent / 100;
if (!prevTimestamp) {
prevTimestamp = window.performance.now();
}
window.requestAnimationFrame(step);
};
var initSegments = function initSegments() {
var current = containerRef.current;
const initSegments = () => {
const {
current
} = containerRef;
segments = Array.from(current.querySelectorAll(".hig__progress-ring__segment"));

@@ -149,7 +203,7 @@ current.querySelector(".hig__progress-ring__mask").style.opacity = null;

var handleEntering = function handleEntering() {
const handleEntering = () => {
setCSSTransitionState("entering");
};
var handleEntered = function handleEntered() {
const handleEntered = () => {
setCSSTransitionState("entered");

@@ -159,7 +213,7 @@ setProgress(props.percentComplete);

var handleExiting = function handleExiting() {
const handleExiting = () => {
setCSSTransitionState("exiting");
};
var handleExited = function handleExited() {
const handleExited = () => {
setCSSTransitionState("exited");

@@ -170,7 +224,8 @@ };

*/
var refContainer = function refContainer(param) {
const refContainer = param => {
containerRef.current = param;
};
React.useEffect(function () {
React.useEffect(() => {
if (cssTransitionState === "entered" || cssTransitionState === "exited") {

@@ -181,27 +236,22 @@ initSegments();

});
return React__default.createElement(
reactTransitionGroup.CSSTransition,
{
"in": transitionEnter,
timeout: { enter: 650, exit: 466 },
appear: true,
classNames: "hig__progress-ring--",
onEntering: handleEntering,
onEntered: handleEntered,
onExiting: handleExiting,
onExited: handleExited
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
in: transitionEnter,
timeout: {
enter: 650,
exit: 466
},
function (status) {
return props.children({
innerRef: refContainer,
percentComplete: props.percentComplete,
cssTransitionState: status
});
}
);
appear: true,
classNames: "hig__progress-ring--",
onEntering: handleEntering,
onEntered: handleEntered,
onExiting: handleExiting,
onExited: handleExited
}, status => props.children({
innerRef: refContainer,
percentComplete: props.percentComplete,
cssTransitionState: status
}));
};
ProgressRingDeterminateBehavior.displayName = "ProgressRingDeterminateBehavior";
ProgressRingDeterminateBehavior.propTypes = {

@@ -211,5 +261,6 @@ /**

*/
percentComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
percentComplete: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
/** Render prop */
children: PropTypes.func.isRequired
children: PropTypes__default["default"].func.isRequired
};

@@ -242,45 +293,34 @@ ProgressRingDeterminateBehavior.__docgenInfo = {

var _slicedToArray$1 = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
const CYCLE_DURATION = 1000;
const FADE_DURATION = 416;
var CYCLE_DURATION = 1000;
var FADE_DURATION = 416;
const ProgressRingIndeterminateBehavior = props => {
const [cssTransitionState, setcssTransitionState] = React.useState(null);
const [playing, setPlaying] = React.useState(null);
const containerRef = React.useRef(null);
let startTime;
let segments;
let SEGMENT_COUNT;
let SEGMENT_DELAY_FACTOR;
var ProgressRingIndeterminateBehavior = function ProgressRingIndeterminateBehavior(props) {
var _useState = React.useState(null),
_useState2 = _slicedToArray$1(_useState, 2),
cssTransitionState = _useState2[0],
setcssTransitionState = _useState2[1];
const opacityForSegment = (index, elapsedThisCycle) => {
const segmentFadeStartTime = index * SEGMENT_DELAY_FACTOR; // Fade continuing from previous cycle
var _useState3 = React.useState(null),
_useState4 = _slicedToArray$1(_useState3, 2),
playing = _useState4[0],
setPlaying = _useState4[1];
var containerRef = React.useRef(null);
var startTime = void 0;
var segments = void 0;
var SEGMENT_COUNT = void 0;
var SEGMENT_DELAY_FACTOR = void 0;
var opacityForSegment = function opacityForSegment(index, elapsedThisCycle) {
var segmentFadeStartTime = index * SEGMENT_DELAY_FACTOR;
// Fade continuing from previous cycle
if (segmentFadeStartTime + FADE_DURATION > CYCLE_DURATION && elapsedThisCycle < FADE_DURATION) {
return ((elapsedThisCycle + CYCLE_DURATION - segmentFadeStartTime) / FADE_DURATION - 1) * -1;
}
} // Fade has finished
// Fade has finished
if (elapsedThisCycle < segmentFadeStartTime || elapsedThisCycle > segmentFadeStartTime + FADE_DURATION) {
return 0;
}
} // Fading
// Fading
return Math.abs((elapsedThisCycle - segmentFadeStartTime) / FADE_DURATION - 1);
};
var setSegmentOpacities = function setSegmentOpacities(elapsedThisCycle) {
segments.forEach(function (segment, i) {
var index = Math.abs(i - SEGMENT_COUNT) - 1;
var eachSegment = segment;
const setSegmentOpacities = elapsedThisCycle => {
segments.forEach((segment, i) => {
const index = Math.abs(i - SEGMENT_COUNT) - 1;
const eachSegment = segment;
eachSegment.style.opacity = opacityForSegment(index, elapsedThisCycle);

@@ -290,5 +330,6 @@ });

var initSegments = function initSegments() {
var current = containerRef.current;
const initSegments = () => {
const {
current
} = containerRef;
segments = Array.from(current.querySelectorAll(".hig__progress-ring__segment"));

@@ -300,6 +341,7 @@ current.querySelector(".hig__progress-ring__mask").style.opacity = null;

var step = function step(timestamp) {
const step = timestamp => {
if (!playing) {
return;
}
if (cssTransitionState !== "entered") {

@@ -311,10 +353,9 @@ window.requestAnimationFrame(step);

if (!startTime) startTime = timestamp;
var elapsed = timestamp - startTime;
var elapsedThisCycle = elapsed % CYCLE_DURATION;
const elapsed = timestamp - startTime;
const elapsedThisCycle = elapsed % CYCLE_DURATION;
setSegmentOpacities(elapsedThisCycle);
window.requestAnimationFrame(step);
};
var start = function start() {
const start = () => {
setPlaying(true);

@@ -325,7 +366,7 @@ startTime = undefined;

var handleEntering = function handleEntering() {
const handleEntering = () => {
setcssTransitionState("entering");
};
var handleEntered = function handleEntered() {
const handleEntered = () => {
setcssTransitionState("entered");

@@ -335,7 +376,7 @@ start();

var handleExiting = function handleExiting() {
const handleExiting = () => {
setcssTransitionState("exited");
};
var handleExited = function handleExited() {
const handleExited = () => {
setcssTransitionState("exited");

@@ -346,37 +387,33 @@ };

*/
var refContainer = function refContainer(value) {
const refContainer = value => {
containerRef.current = value;
};
React.useEffect(function () {
React.useEffect(() => {
initSegments();
step(1);
});
return React__default.createElement(
reactTransitionGroup.CSSTransition,
{
"in": true,
timeout: { enter: 650, exit: 466 },
appear: true,
classNames: "hig__progress-ring--",
onEntering: handleEntering,
onEntered: handleEntered,
onExiting: handleExiting,
onExited: handleExited
return /*#__PURE__*/React__default["default"].createElement(reactTransitionGroup.CSSTransition, {
in: true,
timeout: {
enter: 650,
exit: 466
},
function (status) {
return props.children({
innerRef: refContainer,
cssTransitionState: status
});
}
);
appear: true,
classNames: "hig__progress-ring--",
onEntering: handleEntering,
onEntered: handleEntered,
onExiting: handleExiting,
onExited: handleExited
}, status => props.children({
innerRef: refContainer,
cssTransitionState: status
}));
};
ProgressRingIndeterminateBehavior.displayName = "ProgressRingIndeterminateBehavior";
ProgressRingIndeterminateBehavior.propTypes = {
/** Render prop */
children: PropTypes.func.isRequired
children: PropTypes__default["default"].func.isRequired
};

@@ -397,30 +434,91 @@ ProgressRingIndeterminateBehavior.__docgenInfo = {

var _templateObject = _taggedTemplateLiteral(["\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n 61% {\n transform: scale(1.1);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n"], ["\n from {\n opacity: 0;\n transform: scale(0);\n }\n\n 61% {\n transform: scale(1.1);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n"]),
_templateObject2 = _taggedTemplateLiteral(["\n from {\n opacity: 0;\n transform: scale(2);\n }\n\n 55% {\n opacity: 0;\n transform: scale(1.6);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n"], ["\n from {\n opacity: 0;\n transform: scale(2);\n }\n\n 55% {\n opacity: 0;\n transform: scale(1.6);\n }\n\n to {\n opacity: 1;\n transform: scale(1);\n }\n"]),
_templateObject3 = _taggedTemplateLiteral(["\n from {\n opacity: 1;\n transform: scale(1);\n fill: ", ";\n }\n\n 10% {\n transform: scale(1.1);\n }\n\n 60% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n "], ["\n from {\n opacity: 1;\n transform: scale(1);\n fill: ", ";\n }\n\n 10% {\n transform: scale(1.1);\n }\n\n 60% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n "]),
_templateObject4 = _taggedTemplateLiteral(["\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n 10% {\n transform: scale(1.2);\n }\n\n 90% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n"], ["\n from {\n opacity: 1;\n transform: scale(1);\n }\n\n 10% {\n transform: scale(1.2);\n }\n\n 90% {\n opacity: 1;\n }\n\n to {\n opacity: 0;\n transform: scale(0);\n }\n"]),
_templateObject5 = _taggedTemplateLiteral(["\n from {\n opacity: 1;\n }\n\n 28% {\n opacity: 0;\n }\n"], ["\n from {\n opacity: 1;\n }\n\n 28% {\n opacity: 0;\n }\n"]);
const BackgroundEntering = emotion.keyframes`
from {
opacity: 0;
transform: scale(0);
}
function _taggedTemplateLiteral(strings, raw) { return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
61% {
transform: scale(1.1);
}
var BackgroundEntering = emotion.keyframes(_templateObject);
to {
opacity: 1;
transform: scale(1);
}
`;
const MaskEntering = emotion.keyframes`
from {
opacity: 0;
transform: scale(2);
}
var MaskEntering = emotion.keyframes(_templateObject2);
55% {
opacity: 0;
transform: scale(1.6);
}
var BackgroundExiting = function BackgroundExiting(color) {
return emotion.keyframes(_templateObject3, color);
};
to {
opacity: 1;
transform: scale(1);
}
`;
var MaskExiting = emotion.keyframes(_templateObject4);
const BackgroundExiting = color => emotion.keyframes`
from {
opacity: 1;
transform: scale(1);
fill: ${color};
}
var SegmentsExiting = emotion.keyframes(_templateObject5);
10% {
transform: scale(1.1);
}
function stylesheet(props, themeData) {
var cssTransitionState = props.cssTransitionState,
mask = props.mask,
customStylesheet = props.stylesheet,
surface = props.surface;
60% {
opacity: 1;
}
to {
opacity: 0;
transform: scale(0);
}
`;
var styles = {
const MaskExiting = emotion.keyframes`
from {
opacity: 1;
transform: scale(1);
}
10% {
transform: scale(1.2);
}
90% {
opacity: 1;
}
to {
opacity: 0;
transform: scale(0);
}
`;
const SegmentsExiting = emotion.keyframes`
from {
opacity: 1;
}
28% {
opacity: 0;
}
`;
function stylesheet(props, themeData) {
const {
cssTransitionState,
mask,
stylesheet: customStylesheet,
surface
} = props;
const styles = {
ring: {

@@ -435,3 +533,2 @@ fontFamily: "ArtifaktElement",

},
background: {

@@ -441,8 +538,6 @@ transformOrigin: "center",

},
mask: {
transformOrigin: "center",
fill: mask || themeData["colorScheme.surface.level" + surface]
fill: mask || themeData[`colorScheme.surface.level${surface}`]
},
segment: {

@@ -460,8 +555,8 @@ opacity: 0,

if (cssTransitionState === "entering") {
styles.background.animation = BackgroundEntering + " 0.65s ease-in-out";
styles.mask.animation = MaskEntering + " 0.65s ease-out";
styles.background.animation = `${BackgroundEntering} 0.65s ease-in-out`;
styles.mask.animation = `${MaskEntering} 0.65s ease-out`;
} else if (cssTransitionState === "exiting") {
styles.background.animation = BackgroundExiting(themeData["progress.ring.highlightColor1"]) + " 0.466s ease-in forwards";
styles.mask.animation = MaskExiting + " 0.466s ease-in forwards";
styles.segment.animation = SegmentsExiting + " 0.466s linear";
styles.background.animation = `${BackgroundExiting(themeData["progress.ring.highlightColor1"])} 0.466s ease-in forwards`;
styles.mask.animation = `${MaskExiting} 0.466s ease-in forwards`;
styles.segment.animation = `${SegmentsExiting} 0.466s linear`;
} else if (cssTransitionState === "exited") {

@@ -478,54 +573,47 @@ styles.mask.opacity = 0;

function SVGPresenter(props) {
var height = props.height,
original = props.original,
svgData = props.svgData,
width = props.width;
const {
height,
original,
svgData,
width
} = props;
var buildPolygons = function buildPolygons(svgs, resolvedRoles) {
return svgs.map(function (item) {
// we need this if we don't want to manually edit
// the svg files
var map = {
"hig__progress-ring__background": "background",
"hig__progress-ring__mask": "mask",
"hig__progress-ring__segment": "segment"
};
var styles = stylesheet(props, resolvedRoles)[map[item.className]];
return React__default.createElement("polygon", {
key: item.points,
className: emotion.cx(item.className, emotion.css(styles)),
fill: item.fill,
fillRule: item.fillRule,
points: item.points
});
const buildPolygons = (svgs, resolvedRoles) => svgs.map(item => {
// we need this if we don't want to manually edit
// the svg files
const map = {
"hig__progress-ring__background": "background",
"hig__progress-ring__mask": "mask",
"hig__progress-ring__segment": "segment"
};
const styles = stylesheet(props, resolvedRoles)[map[item.className]];
return /*#__PURE__*/React__default["default"].createElement("polygon", {
key: item.points,
className: emotion.cx(item.className, emotion.css(styles)),
fill: item.fill,
fillRule: item.fillRule,
points: item.points
});
};
});
return React__default.createElement(
ThemeContext.Consumer,
null,
function (_ref) {
var resolvedRoles = _ref.resolvedRoles;
return React__default.createElement(
"svg",
{
width: width,
height: height,
viewBox: "0 0 " + original + " " + original,
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink"
},
buildPolygons(svgData, resolvedRoles)
);
}
);
return /*#__PURE__*/React__default["default"].createElement(ThemeContext__default["default"].Consumer, null, _ref => {
let {
resolvedRoles
} = _ref;
return /*#__PURE__*/React__default["default"].createElement("svg", {
width: width,
height: height,
viewBox: `0 0 ${original} ${original}`,
version: "1.1",
xmlns: "http://www.w3.org/2000/svg",
xmlnsXlink: "http://www.w3.org/1999/xlink"
}, buildPolygons(svgData, resolvedRoles));
});
}
SVGPresenter.propTypes = {
height: PropTypes.number,
original: PropTypes.number,
svgData: PropTypes.arrayOf(PropTypes.object),
width: PropTypes.number
height: PropTypes__default["default"].number,
original: PropTypes__default["default"].number,
// eslint-disable-next-line react/forbid-prop-types
svgData: PropTypes__default["default"].arrayOf(PropTypes__default["default"].object),
width: PropTypes__default["default"].number
};

@@ -570,3 +658,3 @@ SVGPresenter.__docgenInfo = {

var smallSVG = [{
const smallSVG = [{
className: "hig__progress-ring__background",

@@ -661,3 +749,3 @@ points: "22.49 5.51 14 2 5.51 5.51 2 14 5.51 22.49 14 26 22.49 22.49 26 14"

var mediumSVG = [{
const mediumSVG = [{
className: "hig__progress-ring__background",

@@ -776,3 +864,3 @@ points:

var xsmallSVG = [{
const xsmallSVG = [{
className: "hig__progress-ring__background",

@@ -847,10 +935,7 @@ fillRule: "nonzero",

var availableSizes = Object.freeze(["xs", "s", "m", "l", "xl"]);
var availableSurfaces = Object.freeze([100, 200, 250, 300, 350]);
const availableSizes = Object.freeze(["xs", "s", "m", "l", "xl"]);
const availableSurfaces = Object.freeze([100, 200, 250, 300, 350]);
var _extends = Object.assign || 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; };
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
var sizes = {
const _excluded$1 = ["innerRef", "percentComplete", "size", "cssTransitionState", "surface", "mask"];
const sizes = {
xs: {

@@ -877,49 +962,47 @@ svg: xsmallSVG,

};
function ProgressRingPresenter(props) {
var innerRef = props.innerRef,
percentComplete = props.percentComplete,
size = props.size,
cssTransitionState = props.cssTransitionState,
surface = props.surface,
mask = props.mask,
otherProps = _objectWithoutProperties(props, ["innerRef", "percentComplete", "size", "cssTransitionState", "surface", "mask"]);
const {
innerRef,
percentComplete,
size,
cssTransitionState,
surface,
mask
} = props,
otherProps = _objectWithoutProperties(props, _excluded$1);
var className = otherProps.className;
var SVG = sizes[size].svg;
var originalSize = sizes[size].svg === mediumSVG ? 72 : sizes[size].size;
return React__default.createElement(
"div",
{
className: emotion.cx([className, emotion.css(stylesheet(props, {}).ring)]),
role: "progressbar",
"aria-valuemin": "0",
"aria-valuemax": "100",
"aria-valuenow": percentComplete,
ref: innerRef
},
React__default.createElement(SVGPresenter, _extends({
height: sizes[size].size,
width: sizes[size].size,
original: originalSize,
svgData: SVG,
cssTransitionState: cssTransitionState,
surface: surface,
mask: mask
}, otherProps))
);
const {
className
} = otherProps;
const SVG = sizes[size].svg;
const originalSize = sizes[size].svg === mediumSVG ? 72 : sizes[size].size;
return /*#__PURE__*/React__default["default"].createElement("div", {
className: emotion.cx([className, emotion.css(stylesheet(props, {}).ring)]),
role: "progressbar",
"aria-valuemin": "0",
"aria-valuemax": "100",
"aria-valuenow": percentComplete,
ref: innerRef
}, /*#__PURE__*/React__default["default"].createElement(SVGPresenter, _extends({
height: sizes[size].size,
width: sizes[size].size,
original: originalSize,
svgData: SVG,
cssTransitionState: cssTransitionState,
surface: surface,
mask: mask
}, otherProps)));
}
ProgressRingPresenter.defaultProps = { size: "m", surface: 100 };
ProgressRingPresenter.defaultProps = {
size: "m",
surface: 100
};
ProgressRingPresenter.propTypes = {
cssTransitionState: PropTypes.string,
innerRef: PropTypes.func,
mask: PropTypes.string,
percentComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
size: PropTypes.oneOf(availableSizes),
stylesheet: PropTypes.func,
surface: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(availableSurfaces)])
cssTransitionState: PropTypes__default["default"].string,
innerRef: PropTypes__default["default"].func,
mask: PropTypes__default["default"].string,
percentComplete: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
size: PropTypes__default["default"].oneOf(availableSizes),
stylesheet: PropTypes__default["default"].func,
surface: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].oneOf(availableSurfaces)])
};

@@ -1004,34 +1087,33 @@ ProgressRingPresenter.__docgenInfo = {

var _extends$1 = Object.assign || 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; };
const _excluded = ["mask", "percentComplete", "size", "stylesheet", "surface"];
function _objectWithoutProperties$1(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
const ProgressRing = props => {
const {
mask,
percentComplete,
size,
stylesheet,
surface
} = props,
otherProps = _objectWithoutProperties(props, _excluded);
var ProgressRing = function ProgressRing(props) {
var mask = props.mask,
percentComplete = props.percentComplete,
size = props.size,
stylesheet = props.stylesheet,
surface = props.surface,
otherProps = _objectWithoutProperties$1(props, ["mask", "percentComplete", "size", "stylesheet", "surface"]);
var ProgressRingBehavior = percentComplete === undefined ? ProgressRingIndeterminateBehavior : ProgressRingDeterminateBehavior;
var behaviorProps = percentComplete === undefined ? {} : { percentComplete: percentComplete };
return React__default.createElement(
ProgressRingBehavior,
behaviorProps,
function (_ref) {
var innerRef = _ref.innerRef,
cssTransitionState = _ref.cssTransitionState;
return React__default.createElement(ProgressRingPresenter, _extends$1({
innerRef: innerRef,
percentComplete: percentComplete,
size: size,
cssTransitionState: cssTransitionState,
stylesheet: stylesheet,
surface: surface,
mask: mask
}, otherProps));
}
);
const ProgressRingBehavior = percentComplete === undefined ? ProgressRingIndeterminateBehavior : ProgressRingDeterminateBehavior;
const behaviorProps = percentComplete === undefined ? {} : {
percentComplete
};
return /*#__PURE__*/React__default["default"].createElement(ProgressRingBehavior, behaviorProps, _ref => {
let {
innerRef,
cssTransitionState
} = _ref;
return /*#__PURE__*/React__default["default"].createElement(ProgressRingPresenter, _extends({
innerRef: innerRef,
percentComplete: percentComplete,
size: size,
cssTransitionState: cssTransitionState,
stylesheet: stylesheet,
surface: surface,
mask: mask
}, otherProps));
});
};

@@ -1044,3 +1126,4 @@

*/
mask: PropTypes.string,
mask: PropTypes__default["default"].string,
/**

@@ -1050,17 +1133,19 @@ * An integer from 0 to 100 representing the percent the delayed operation has completed.

*/
percentComplete: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
percentComplete: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].number]),
/**
* {xs, s, m, l, xl} the size of the progress indicator
*/
size: PropTypes.oneOf(availableSizes),
size: PropTypes__default["default"].oneOf(availableSizes),
/**
* Adds custom/overriding styles
*/
stylesheet: PropTypes.func,
stylesheet: PropTypes__default["default"].func,
/**
* Specifies the surface level for the background
*/
surface: PropTypes.oneOfType([PropTypes.string, PropTypes.oneOf(availableSurfaces)])
surface: PropTypes__default["default"].oneOfType([PropTypes__default["default"].string, PropTypes__default["default"].oneOf(availableSurfaces)])
};
ProgressRing.defaultProps = {

@@ -1134,2 +1219,2 @@ size: "m",

exports.default = ProgressRing;
exports["default"] = ProgressRing;

7

CHANGELOG.md

@@ -0,1 +1,8 @@

# [@hig/progress-ring-v2.2.0](https://github.com/Autodesk/hig/compare/@hig/progress-ring@2.1.0...@hig/progress-ring@2.2.0) (2022-06-15)
### Features
* update react-transition-group ([56b4f6c](https://github.com/Autodesk/hig/commit/56b4f6c))
# [@hig/progress-ring-v2.1.0](https://github.com/Autodesk/hig/compare/@hig/progress-ring@2.0.0...@hig/progress-ring@2.1.0) (2022-01-24)

@@ -2,0 +9,0 @@

7

package.json
{
"name": "@hig/progress-ring",
"version": "2.1.0",
"version": "2.2.0",
"description": "HIG Progress Ring",

@@ -22,8 +22,7 @@ "author": "Autodesk Inc.",

"prop-types": "^15.7.1",
"react-lifecycles-compat": "^3.0.4",
"react-transition-group": "^2.4.0"
"react-transition-group": "^4.4.2"
},
"peerDependencies": {
"@hig/theme-context": "^4.0.0",
"@hig/theme-data": "^2.22.1",
"@hig/theme-data": "^2.26.0",
"react": "^17.0.0"

@@ -30,0 +29,0 @@ },

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc