Skip to content
This repository has been archived by the owner on Jun 3, 2024. It is now read-only.

Commit

Permalink
Renderer regression (#496)
Browse files Browse the repository at this point in the history
  • Loading branch information
@Marc-Andre-Rivet
Marc-Andre-Rivet authored Mar 25, 2019
1 parent 49a4451 commit da9e5e3
Show file tree
Hide file tree
Showing 8 changed files with 429 additions and 201 deletions.
27 changes: 4 additions & 23 deletions src/components/Loading.react.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,9 +37,7 @@ export default class Loading extends Component {
type,
} = this.props;

const isLoading = getLoadingState(this);

if (isLoading) {
if (loading_state && loading_state.is_loading) {
const Spinner = getSpinner(type);
return (
<Spinner
Expand All @@ -52,6 +50,7 @@ export default class Loading extends Component {
/>
);
}

if (
R.type(this.props.children) !== 'Object' ||
R.type(this.props.children) !== 'Function'
Expand All @@ -62,6 +61,8 @@ export default class Loading extends Component {
}
}

Loading._dashprivate_isLoadingComponent = true;

Loading.defaultProps = {
type: 'default',
color: '#119DFF',
Expand Down Expand Up @@ -126,23 +127,3 @@ Loading.propTypes = {
component_name: PropTypes.string,
}),
};

function getLoadingState(element) {
if (
element.props &&
element.props.loading_state &&
element.props.loading_state.is_loading
) {
return true;
}

const children = element.props && element.props.children;
if (!children) {
return false;
}

return R.any(
child => child.type !== Loading && getLoadingState(child),
Array.isArray(children) ? children : [children]
);
}
6 changes: 3 additions & 3 deletions src/fragments/Loading/spinners/CircleSpinner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const CircleSpinner = ({
return (
<div style={style ? style : {}} className={spinnerClass}>
{debugTitle}
<div className="dash-sk-circle">
<div className="dash-spinner dash-sk-circle">
<div className="dash-sk-circle1 dash-sk-child" />
<div className="dash-sk-circle2 dash-sk-child" />
<div className="dash-sk-circle3 dash-sk-child" />
Expand Down Expand Up @@ -160,7 +160,7 @@ const CircleSpinner = ({
.dash-spinner-container .sk-circle .sk-circle12:before {
-webkit-animation-delay: -0.1s;
animation-delay: -0.1s; }
@-webkit-keyframes dash-sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
Expand All @@ -170,7 +170,7 @@ const CircleSpinner = ({
transform: scale(1);
}
}
@keyframes dash-sk-circleBounceDelay {
0%, 80%, 100% {
-webkit-transform: scale(0);
Expand Down
20 changes: 10 additions & 10 deletions src/fragments/Loading/spinners/CubeSpinner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const CubeSpinner = ({status, color, fullscreen, debug, className, style}) => {
return (
<div style={style ? style : {}} className={spinnerClass}>
{debugTitle}
<div className="dash-cube-container">
<div className="dash-spinner dash-cube-container">
<div className="dash-cube">
<div className="dash-cube-side dash-cube-side--front" />
<div className="dash-cube-side dash-cube-side--back" />
Expand Down Expand Up @@ -61,16 +61,16 @@ const CubeSpinner = ({status, color, fullscreen, debug, className, style}) => {
width: 80px;
margin: 7rem auto;
}
.dash-cube-side {
width: 100%;
height: 100%;
position: absolute;
display: inline-block;
}
.dash-cube-side--front {
background-color: ${color};
background-color: ${color};
animation: blowout-front 4s infinite;
transform: rotateY(0deg) translateZ(40px);
}
Expand All @@ -79,31 +79,31 @@ const CubeSpinner = ({status, color, fullscreen, debug, className, style}) => {
transform: rotateX(180deg) translateZ(40px);
animation: blowout-back 4s infinite;
}
.dash-cube-side--left {
background-color: ${changeColor(color).darken(0.2)};
transform: rotateY(-90deg) translateZ(40px);
animation: blowout-left 4s infinite;
}
.dash-cube-side--right {
background-color: ${changeColor(color).darken(0.4)};
transform: rotateY(90deg) translateZ(40px);
animation: blowout-right 4s infinite;
}
.dash-cube-side--top {
background-color: ${changeColor(color).darken(0.2)};
transform: rotateX(90deg) translateZ(40px);
animation: blowout-top 4s infinite;
}
.dash-cube-side--bottom {
background-color: ${changeColor(color).darken(0.4)};
transform: rotateX(-90deg) translateZ(40px);
animation: blowout-bottom 4s infinite;
}
@keyframes rotate {
0% {
transform: rotateX(0deg) rotateY(0deg);
Expand All @@ -115,7 +115,7 @@ const CubeSpinner = ({status, color, fullscreen, debug, className, style}) => {
transform: rotateX(360deg) rotateY(360deg);
}
}
@keyframes blowout-bottom {
20% {
transform: rotateX(-90deg) translateZ(40px);
Expand Down
24 changes: 12 additions & 12 deletions src/fragments/Loading/spinners/DefaultSpinner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ const DefaultSpinner = ({
return (
<div style={style ? style : {}} className={spinnerClass}>
{debugTitle}
<div className="dash-default-spinner">
<div className="dash-spinner dash-default-spinner">
<div className="dash-default-spinner-rect1" />
<div className="dash-default-spinner-rect2" />
<div className="dash-default-spinner-rect3" />
Expand Down Expand Up @@ -59,48 +59,48 @@ const DefaultSpinner = ({
text-align: center;
font-size: 10px;
}
.dash-default-spinner > div {
background-color: ${color};
height: 100%;
width: 6px;
display: inline-block;
margin-right: 4px;
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
animation: sk-stretchdelay 1.2s infinite ease-in-out;
}
.dash-default-spinner .dash-default-spinner-rect2 {
-webkit-animation-delay: -1.1s;
animation-delay: -1.1s;
}
.dash-default-spinner .dash-default-spinner-rect3 {
-webkit-animation-delay: -1.0s;
animation-delay: -1.0s;
}
.dash-default-spinner .dash-default-spinner-rect4 {
-webkit-animation-delay: -0.9s;
animation-delay: -0.9s;
}
.dash-default-spinner .dash-default-spinner-rect5 {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
@-webkit-keyframes sk-stretchdelay {
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
20% { -webkit-transform: scaleY(1.0) }
}
@keyframes sk-stretchdelay {
0%, 40%, 100% {
0%, 40%, 100% {
transform: scaleY(0.4);
-webkit-transform: scaleY(0.4);
} 20% {
} 20% {
transform: scaleY(1.0);
-webkit-transform: scaleY(1.0);
}
Expand Down
18 changes: 9 additions & 9 deletions src/fragments/Loading/spinners/DotSpinner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ const DotSpinner = ({status, color, fullscreen, debug, className, style}) => {
return (
<div style={style ? style : {}} className={spinnerClass}>
{debugTitle}
<div className="dash-dot-spinner">
<div className="dash-spinner dash-dot-spinner">
<div className="dash-dot-spinner-bounce1"></div>
<div className="dash-dot-spinner-bounce2"></div>
<div className="dash-dot-spinner-bounce3"></div>
Expand All @@ -48,38 +48,38 @@ const DotSpinner = ({status, color, fullscreen, debug, className, style}) => {
width: 70px;
text-align: center;
}
.dash-dot-spinner > div {
width: 18px;
height: 18px;
background-color: ${color};
border-radius: 100%;
display: inline-block;
-webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
animation: sk-bouncedelay 1.4s infinite ease-in-out both;
}
.dash-dot-spinner .dash-dot-spinner-bounce1 {
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.dash-dot-spinner .dash-dot-spinner-bounce2 {
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
@-webkit-keyframes sk-bouncedelay {
0%, 80%, 100% { -webkit-transform: scale(0) }
40% { -webkit-transform: scale(1.0) }
}
@keyframes sk-bouncedelay {
0%, 80%, 100% {
0%, 80%, 100% {
-webkit-transform: scale(0);
transform: scale(0);
} 40% {
} 40% {
-webkit-transform: scale(1.0);
transform: scale(1.0);
}
Expand Down
14 changes: 7 additions & 7 deletions src/fragments/Loading/spinners/GraphSpinner.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,18 +19,18 @@ const GraphSpinner = ({status, fullscreen, debug, className, style}) => {
<div style={style ? style : {}} className={spinnerClass}>
<div>
{debugTitle}
<div className="dash-spinner">
<div className="dash-spinner__bottom">
<div className="dash-spinner dash-graph-spinner">
<div className="dash-graph-spinner__bottom">
<div className="dash-bar dash-bar__one" />
<div className="dash-bar dash-bar__two" />
<div className="dash-bar dash-bar__three" />
</div>
<div className="dash-spinner__background">
<div className="dash-graph-spinner__background">
<div className="dash-dot dash-dot__one" />
<div className="dash-dot dash-dot__two" />
<div className="dash-dot dash-dot__three" />
<div className="dash-dot dash-dot__four" />
<div className="dash-spinner__bottom">
<div className="dash-graph-spinner__bottom">
<div className="dash-vert dash-vert__one" />
<div className="dash-vert dash-vert__two" />
<div className="dash-vert dash-vert__three" />
Expand All @@ -56,7 +56,7 @@ const GraphSpinner = ({status, fullscreen, debug, className, style}) => {
.dash-loading-title {
text-align: center;
}
.dash-spinner {
.dash-graph-spinner {
display: flex;
margin: 0 auto;
width: 200px;
Expand All @@ -65,14 +65,14 @@ const GraphSpinner = ({status, fullscreen, debug, className, style}) => {
z-index: -2;
border-radius: 4px;
}
.dash-spinner__bottom {
.dash-graph-spinner__bottom {
display: flex;
margin-top: auto;
flex-direction: column;
height: 12px;
width: 100%;
}
.dash-spinner__background {
.dash-graph-spinner__background {
width: 100%;
height: 100%;
display: block;
Expand Down
Loading

0 comments on commit da9e5e3

Please sign in to comment.