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

Commit d0a3847

Browse files
valentijnniemanvalentijnnieman
committed
Loading component with basic spinner
Loading component with basic spinner
1 parent b4ddfa5 commit d0a3847

File tree

5 files changed

+215
-0
lines changed

5 files changed

+215
-0
lines changed

‎dash_core_components/Loading.py

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
# AUTO GENERATED FILE - DO NOT EDIT
2+
3+
from dash.development.base_component import Component, _explicitize_args
4+
5+
6+
class Loading(Component):
7+
"""A Loading component.
8+
A slider component with a single handle.
9+
10+
Keyword arguments:
11+
- children (list | a list of or a singular dash component, string or number; optional): Array that holds components to render
12+
- id (string; optional)
13+
- className (string; optional): Additional CSS class for the root DOM node
14+
- loading (boolean; optional)
15+
16+
Available events: """
17+
@_explicitize_args
18+
def __init__(self, children=None, id=Component.UNDEFINED, className=Component.UNDEFINED, loading=Component.UNDEFINED, **kwargs):
19+
self._prop_names = ['children', 'id', 'className', 'loading']
20+
self._type = 'Loading'
21+
self._namespace = 'dash_core_components'
22+
self._valid_wildcard_attributes = []
23+
self.available_events = []
24+
self.available_properties = ['children', 'id', 'className', 'loading']
25+
self.available_wildcard_properties = []
26+
27+
_explicit_args = kwargs.pop('_explicit_args')
28+
_locals = locals()
29+
_locals.update(kwargs) # For wildcard attrs
30+
args = {k: _locals[k] for k in _explicit_args if k != 'children'}
31+
32+
for k in []:
33+
if k not in args:
34+
raise TypeError(
35+
'Required argument `' + k + '` was not specified.')
36+
super(Loading, self).__init__(children=children, **args)
37+
38+
def __repr__(self):
39+
if(any(getattr(self, c, None) is not None
40+
for c in self._prop_names
41+
if c is not self._prop_names[0])
42+
or any(getattr(self, c, None) is not None
43+
for c in self.__dict__.keys()
44+
if any(c.startswith(wc_attr)
45+
for wc_attr in self._valid_wildcard_attributes))):
46+
props_string = ', '.join([c+'='+repr(getattr(self, c, None))
47+
for c in self._prop_names
48+
if getattr(self, c, None) is not None])
49+
wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
50+
for c in self.__dict__.keys()
51+
if any([c.startswith(wc_attr)
52+
for wc_attr in
53+
self._valid_wildcard_attributes])])
54+
return ('Loading(' + props_string +
55+
(', ' + wilds_string if wilds_string != '' else '') + ')')
56+
else:
57+
return (
58+
'Loading(' +
59+
repr(getattr(self, self._prop_names[0], None)) + ')')

‎dash_core_components/_imports_.py

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
from .Input import Input
99
from .Interval import Interval
1010
from .Link import Link
11+
from .Loading import Loading
1112
from .Location import Location
1213
from .Markdown import Markdown
1314
from .RadioItems import RadioItems
@@ -32,6 +33,7 @@
3233
"Input",
3334
"Interval",
3435
"Link",
36+
"Loading",
3537
"Location",
3638
"Markdown",
3739
"RadioItems",

‎dash_core_components/metadata.json

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1971,6 +1971,52 @@
19711971
}
19721972
}
19731973
},
1974+
"src/components/Loading.react.js": {
1975+
"description": "A slider component with a single handle.",
1976+
"displayName": "Loading",
1977+
"methods": [],
1978+
"props": {
1979+
"id": {
1980+
"type": {
1981+
"name": "string"
1982+
},
1983+
"required": false,
1984+
"description": ""
1985+
},
1986+
"children": {
1987+
"type": {
1988+
"name": "union",
1989+
"value": [
1990+
{
1991+
"name": "arrayOf",
1992+
"value": {
1993+
"name": "node"
1994+
}
1995+
},
1996+
{
1997+
"name": "node"
1998+
}
1999+
]
2000+
},
2001+
"required": false,
2002+
"description": "Array that holds components to render"
2003+
},
2004+
"className": {
2005+
"type": {
2006+
"name": "string"
2007+
},
2008+
"required": false,
2009+
"description": "Additional CSS class for the root DOM node"
2010+
},
2011+
"loading": {
2012+
"type": {
2013+
"name": "bool"
2014+
},
2015+
"required": false,
2016+
"description": ""
2017+
}
2018+
}
2019+
},
19742020
"src/components/Location.react.js": {
19752021
"description": "Update and track the current window.location object through the window.history state.\nUse in conjunction with the `dash_core_components.Link` component to make apps with multiple pages.",
19762022
"displayName": "Location",

‎dash_core_components/version.py

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1 +1,5 @@
1+
<<<<<<< HEAD
12
__version__ = '0.34.0'
3+
=======
4+
__version__ = '0.33.0rc1'
5+
>>>>>>> 0641154... Add loading prop to Tabs

‎src/components/Loading.react.js

Lines changed: 104 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,104 @@
1+
import React, {Component} from 'react';
2+
import PropTypes from 'prop-types';
3+
4+
/**
5+
* A slider component with a single handle.
6+
*/
7+
export default class Loading extends Component {
8+
constructor(props) {
9+
super(props);
10+
}
11+
12+
render() {
13+
if (this.props.loading) {
14+
return (
15+
<div>
16+
<div className="spinner-verts">
17+
<div className="rect1" />
18+
<div className="rect2" />
19+
<div className="rect3" />
20+
<div className="rect4" />
21+
<div className="rect5" />
22+
</div>
23+
<style>
24+
{`
25+
.spinner-verts {
26+
margin: 100px auto;
27+
width: 50px;
28+
height: 40px;
29+
text-align: center;
30+
font-size: 10px;
31+
}
32+
33+
.spinner-verts > div {
34+
background-color: #1975FA;
35+
height: 100%;
36+
width: 6px;
37+
display: inline-block;
38+
margin-right: 4px;
39+
40+
-webkit-animation: sk-stretchdelay 1.2s infinite ease-in-out;
41+
animation: sk-stretchdelay 1.2s infinite ease-in-out;
42+
}
43+
44+
.spinner-verts .rect2 {
45+
-webkit-animation-delay: -1.1s;
46+
animation-delay: -1.1s;
47+
}
48+
49+
.spinner-verts .rect3 {
50+
-webkit-animation-delay: -1.0s;
51+
animation-delay: -1.0s;
52+
}
53+
54+
.spinner-verts .rect4 {
55+
-webkit-animation-delay: -0.9s;
56+
animation-delay: -0.9s;
57+
}
58+
59+
.spinner-verts .rect5 {
60+
-webkit-animation-delay: -0.8s;
61+
animation-delay: -0.8s;
62+
}
63+
64+
@-webkit-keyframes sk-stretchdelay {
65+
0%, 40%, 100% { -webkit-transform: scaleY(0.4) }
66+
20% { -webkit-transform: scaleY(1.0) }
67+
}
68+
69+
@keyframes sk-stretchdelay {
70+
0%, 40%, 100% {
71+
transform: scaleY(0.4);
72+
-webkit-transform: scaleY(0.4);
73+
} 20% {
74+
transform: scaleY(1.0);
75+
-webkit-transform: scaleY(1.0);
76+
}
77+
}
78+
`}
79+
</style>
80+
</div>
81+
);
82+
}
83+
return this.props.children;
84+
}
85+
}
86+
87+
Loading.propTypes = {
88+
id: PropTypes.string,
89+
90+
/**
91+
* Array that holds components to render
92+
*/
93+
children: React.PropTypes.oneOfType([
94+
React.PropTypes.arrayOf(React.PropTypes.node),
95+
React.PropTypes.node,
96+
]),
97+
98+
/**
99+
* Additional CSS class for the root DOM node
100+
*/
101+
className: PropTypes.string,
102+
103+
loading: PropTypes.bool,
104+
};

0 commit comments

Comments
 (0)