@zendeskgarden/react-loaders
Advanced tools
Comparing version 8.26.0 to 8.27.0
@@ -14,4 +14,4 @@ /** | ||
var PropTypes = require('prop-types'); | ||
var styled = require('styled-components'); | ||
var containerSchedule = require('@zendeskgarden/container-schedule'); | ||
var styled = require('styled-components'); | ||
var reactTheming = require('@zendeskgarden/react-theming'); | ||
@@ -229,3 +229,3 @@ var polished = require('polished'); | ||
'data-garden-id': COMPONENT_ID, | ||
'data-garden-version': '8.26.0', | ||
'data-garden-version': '8.27.0', | ||
role: 'progressbar' | ||
@@ -272,3 +272,3 @@ })(_templateObject$1(), function (props) { | ||
'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID, | ||
'data-garden-version': '8.26.0', | ||
'data-garden-version': '8.27.0', | ||
borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme) | ||
@@ -294,3 +294,3 @@ }; | ||
'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID, | ||
'data-garden-version': '8.26.0', | ||
'data-garden-version': '8.27.0', | ||
height: props.height || sizeToHeight(props.size, props.theme), | ||
@@ -345,3 +345,3 @@ borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme) | ||
'data-garden-id': COMPONENT_ID$1, | ||
'data-garden-version': '8.26.0' | ||
'data-garden-version': '8.27.0' | ||
})(_templateObject$3(), fadeInAnimation, function (props) { | ||
@@ -395,3 +395,3 @@ return props.theme.borderRadii.md; | ||
return { | ||
'data-garden-version': '8.26.0', | ||
'data-garden-version': '8.27.0', | ||
xmlns: 'http://www.w3.org/2000/svg', | ||
@@ -442,3 +442,3 @@ width: props.width, | ||
'data-garden-id': COMPONENT_ID$2, | ||
'data-garden-version': '8.26.0', | ||
'data-garden-version': '8.27.0', | ||
viewBox: '0 0 16 4', | ||
@@ -461,24 +461,2 @@ width: props.size, | ||
var useCSSSVGAnimation = function useCSSSVGAnimation() { | ||
var _useState = React.useState(true), | ||
_useState2 = _slicedToArray(_useState, 2), | ||
canAnimateSVG = _useState2[0], | ||
setAnimateSVG = _useState2[1]; | ||
React.useEffect(function () { | ||
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | ||
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); | ||
svg.setAttribute('viewBox', '0 0 2 2'); | ||
svg.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 2px; height: 2px;'); | ||
rect.setAttribute('style', 'transform: translate(1px, 1px);'); | ||
rect.setAttribute('width', '1'); | ||
rect.setAttribute('height', '1'); | ||
svg.appendChild(rect); | ||
document.body.appendChild(svg); | ||
var result = document.elementFromPoint(1, 1) === svg; | ||
svg.parentNode.removeChild(svg); | ||
setAnimateSVG(result); | ||
}, []); | ||
return canAnimateSVG; | ||
}; | ||
var COMPONENT_ID$3 = 'loaders.dots'; | ||
@@ -491,7 +469,13 @@ var Dots = function Dots(_ref) { | ||
other = _objectWithoutProperties(_ref, ["size", "color", "duration", "delayMS"]); | ||
var noAnimatedSVGSupport = useCSSSVGAnimation(); | ||
var theme = React.useContext(styled.ThemeContext); | ||
var environment = reactTheming.useDocument(theme); | ||
var canTransformSVG = React.useRef(null); | ||
if (environment && canTransformSVG.current === null) { | ||
var svg = environment.createElementNS('http://www.w3.org/2000/svg', 'svg'); | ||
canTransformSVG.current = 'transform' in svg; | ||
} | ||
var _useSchedule = containerSchedule.useSchedule({ | ||
duration: duration, | ||
delayMS: delayMS, | ||
loop: noAnimatedSVGSupport | ||
loop: true | ||
}), | ||
@@ -503,3 +487,3 @@ delayComplete = _useSchedule.delayComplete; | ||
React.useEffect(function () { | ||
if (noAnimatedSVGSupport && delayComplete) { | ||
if (!canTransformSVG.current && delayComplete) { | ||
var transforms = [window.getComputedStyle(dotOne.current).getPropertyValue('transform'), window.getComputedStyle(dotTwo.current).getPropertyValue('transform'), window.getComputedStyle(dotThree.current).getPropertyValue('transform')]; | ||
@@ -556,3 +540,3 @@ dotOne.current.setAttribute('transform', transforms[0]); | ||
"data-garden-id": COMPONENT_ID$4, | ||
"data-garden-version": '8.26.0', | ||
"data-garden-version": '8.27.0', | ||
"aria-valuemax": 100, | ||
@@ -559,0 +543,0 @@ "aria-valuemin": 0, |
@@ -8,7 +8,7 @@ /** | ||
import React, { useState, useEffect, useRef } from 'react'; | ||
import React, { useContext, useRef, useEffect } from 'react'; | ||
import PropTypes from 'prop-types'; | ||
import styled, { keyframes, css, ThemeContext } from 'styled-components'; | ||
import { useSchedule } from '@zendeskgarden/container-schedule'; | ||
import styled, { keyframes, css } from 'styled-components'; | ||
import { DEFAULT_THEME, retrieveComponentStyles, getColor, getLineHeight } from '@zendeskgarden/react-theming'; | ||
import { DEFAULT_THEME, retrieveComponentStyles, getColor, getLineHeight, useDocument } from '@zendeskgarden/react-theming'; | ||
import { rgba } from 'polished'; | ||
@@ -219,3 +219,3 @@ | ||
'data-garden-id': COMPONENT_ID, | ||
'data-garden-version': '8.26.0', | ||
'data-garden-version': '8.27.0', | ||
role: 'progressbar' | ||
@@ -262,3 +262,3 @@ })(_templateObject$1(), function (props) { | ||
'data-garden-id': PROGRESS_BACKGROUND_COMPONENT_ID, | ||
'data-garden-version': '8.26.0', | ||
'data-garden-version': '8.27.0', | ||
borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme) | ||
@@ -284,3 +284,3 @@ }; | ||
'data-garden-id': PROGESS_INDICATOR_COMPONENT_ID, | ||
'data-garden-version': '8.26.0', | ||
'data-garden-version': '8.27.0', | ||
height: props.height || sizeToHeight(props.size, props.theme), | ||
@@ -335,3 +335,3 @@ borderRadius: props.borderRadius || sizeToBorderRadius(props.size, props.theme) | ||
'data-garden-id': COMPONENT_ID$1, | ||
'data-garden-version': '8.26.0' | ||
'data-garden-version': '8.27.0' | ||
})(_templateObject$3(), fadeInAnimation, function (props) { | ||
@@ -385,3 +385,3 @@ return props.theme.borderRadii.md; | ||
return { | ||
'data-garden-version': '8.26.0', | ||
'data-garden-version': '8.27.0', | ||
xmlns: 'http://www.w3.org/2000/svg', | ||
@@ -432,3 +432,3 @@ width: props.width, | ||
'data-garden-id': COMPONENT_ID$2, | ||
'data-garden-version': '8.26.0', | ||
'data-garden-version': '8.27.0', | ||
viewBox: '0 0 16 4', | ||
@@ -451,24 +451,2 @@ width: props.size, | ||
var useCSSSVGAnimation = function useCSSSVGAnimation() { | ||
var _useState = useState(true), | ||
_useState2 = _slicedToArray(_useState, 2), | ||
canAnimateSVG = _useState2[0], | ||
setAnimateSVG = _useState2[1]; | ||
useEffect(function () { | ||
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); | ||
var rect = document.createElementNS('http://www.w3.org/2000/svg', 'rect'); | ||
svg.setAttribute('viewBox', '0 0 2 2'); | ||
svg.setAttribute('style', 'position: fixed; top: 0; left: 0; width: 2px; height: 2px;'); | ||
rect.setAttribute('style', 'transform: translate(1px, 1px);'); | ||
rect.setAttribute('width', '1'); | ||
rect.setAttribute('height', '1'); | ||
svg.appendChild(rect); | ||
document.body.appendChild(svg); | ||
var result = document.elementFromPoint(1, 1) === svg; | ||
svg.parentNode.removeChild(svg); | ||
setAnimateSVG(result); | ||
}, []); | ||
return canAnimateSVG; | ||
}; | ||
var COMPONENT_ID$3 = 'loaders.dots'; | ||
@@ -481,7 +459,13 @@ var Dots = function Dots(_ref) { | ||
other = _objectWithoutProperties(_ref, ["size", "color", "duration", "delayMS"]); | ||
var noAnimatedSVGSupport = useCSSSVGAnimation(); | ||
var theme = useContext(ThemeContext); | ||
var environment = useDocument(theme); | ||
var canTransformSVG = useRef(null); | ||
if (environment && canTransformSVG.current === null) { | ||
var svg = environment.createElementNS('http://www.w3.org/2000/svg', 'svg'); | ||
canTransformSVG.current = 'transform' in svg; | ||
} | ||
var _useSchedule = useSchedule({ | ||
duration: duration, | ||
delayMS: delayMS, | ||
loop: noAnimatedSVGSupport | ||
loop: true | ||
}), | ||
@@ -493,3 +477,3 @@ delayComplete = _useSchedule.delayComplete; | ||
useEffect(function () { | ||
if (noAnimatedSVGSupport && delayComplete) { | ||
if (!canTransformSVG.current && delayComplete) { | ||
var transforms = [window.getComputedStyle(dotOne.current).getPropertyValue('transform'), window.getComputedStyle(dotTwo.current).getPropertyValue('transform'), window.getComputedStyle(dotThree.current).getPropertyValue('transform')]; | ||
@@ -546,3 +530,3 @@ dotOne.current.setAttribute('transform', transforms[0]); | ||
"data-garden-id": COMPONENT_ID$4, | ||
"data-garden-version": '8.26.0', | ||
"data-garden-version": '8.27.0', | ||
"aria-valuemax": 100, | ||
@@ -549,0 +533,0 @@ "aria-valuemin": 0, |
@@ -11,3 +11,3 @@ { | ||
}, | ||
"version": "8.26.0", | ||
"version": "8.27.0", | ||
"main": "dist/index.cjs.js", | ||
@@ -36,3 +36,3 @@ "module": "dist/index.esm.js", | ||
"devDependencies": { | ||
"@zendeskgarden/react-theming": "^8.26.0" | ||
"@zendeskgarden/react-theming": "^8.27.0" | ||
}, | ||
@@ -49,3 +49,3 @@ "keywords": [ | ||
"zendeskgarden:src": "src/index.ts", | ||
"gitHead": "e656c731978ff053b85ed6bdb3ad28f5f52e1d7a" | ||
"gitHead": "134f6d5aeba48d1832f0229ef09b062a2e5fe6b0" | ||
} |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
74791
21
1701