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

Commit e762437

Browse files
valentijnniemanvalentijnnieman
authored
Loading component (#352)
* Loading component with basic spinner Loading component with basic spinner * Get loading prop from loading object, bump version * Prop docs for Loading component * Use new loading API and show propsName and componentName for now * Add custom CSS spinner * Update webpack to parse .jsx, update extract-meta to not parse .jsx * Refactor into loading/ folder and pull out spinners into separate files * Update default spinner * Add props.type and Cube spinner * Add default padding to cube spinner * More spinners, fullscreen mode * Fix Demo app and add Loading Demo * Add component gallery back to demo using tabs * Change prop names for Loading component to be more pythonic * Color prop for Loading component - all spinners except GraphSpinner * Add codemirror scripts back in index.html * Fix for Input that causes dash-renderer tests to fail * Change props.status to props.loading_state to be more specific * Add docstring to type prop * Revert Input changes back to master * Fix formatting * Refactor spinner type parsing * Credit tobiasahlin for spinners in comments * Append dash-circle-spinner to circle spinner html * Change circlespinner to use prepended dash- classnames * Prepend default spinner classes with dash-default-spinner * Bump version for prerelease 0.41.0rc1 * Release candidate 2, fixes indent bug in _imports_ * Fixes bug with react-dom when renderering props.children * Fix regression of default spinner animations caused by CSS changes * Release candidate 3 * Add className and style props to loading component * Update unit tests with Jest snapshots to test correct output * Check if children have loading_state prop, and children's children if applicable * Update dev-requirements with loading states prerelease version of dash-renderer * dash -> 0.31.0 dev-requirements * Rebuild package-lock.json * Fix test by accept()ing confirmdialog twice, for now * Update dash_renderer to 0.18.0rc2 for latest loading states api build * Use new loading_states dash-renderer build to fix tests * Remove tarball and get latest dash-renderer rc, fix scroll test * Recurse children and get loading states * Use latest dash-renderer RC to fix tests * Fix formatting * Fix formatting in test * Add unit test for checking loading_state in children * Get loading_state from children * Small type fix * Expose data-dash-is-loading attribute to all components with loading_state * Style wrapper of DatePicker components so they don't change appearance * Prerelease version 0.44.0rc2 * Changed to unreleased and added link * fragments/ folder for components used internally such as spinners * initial_loading_state -> isLoading * Add style and className props to DatePicker components * Refactored getLoadingState function * Restore plotly-1.44.3.min.js * Removed defaultProps.loading_state because it overrides loading_state prop coming from dash-renderer * Revert version and dev-requirements * Revert dev-requirements * Try with dash 0.37.0rc1 * Use rc of loading states dash-renderer
1 parent 83a3ea0 commit e762437

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

72 files changed

+62401
-56939
lines changed

‎.eslintrc

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@
7777
"no-new": ["error"],
7878
"no-new-func": ["error"],
7979
"no-new-wrappers": ["error"],
80-
"no-param-reassign": ["error"],
80+
"no-param-reassign": ["off"],
8181
"no-process-env": ["warn"],
8282
"no-proto": ["error"],
8383
"no-redeclare": ["error"],
@@ -105,7 +105,7 @@
105105
"react/no-unknown-property": ["error"],
106106
"react/prefer-es6-class": ["error", "always"],
107107
"react/prop-types": "error",
108-
"valid-jsdoc": ["error"],
108+
"valid-jsdoc": ["off"],
109109
"yoda": ["error"],
110110
"spaced-comment": ["error", "always", {
111111
"block": {

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,10 @@
22
All notable changes to this project will be documented in this file.
33
This project adheres to [Semantic Versioning](http://semver.org/).
44

5+
## UNRELEASED
6+
### Added
7+
- Loading component [#267](https://github.com/plotly/dash/issues/267)
8+
59
## [0.43.1] - 2019-02-11
610
### Updated
711
- Upgraded plotly.js to 1.44.3 [#458](https://github.com/plotly/dash-core-components/pull/458)

‎dash_core_components/Checklist.py

Lines changed: 9 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -21,14 +21,19 @@ class Checklist(Component):
2121
- labelStyle (dict; optional): The style of the <label> that wraps the checkbox input
2222
and the option's label
2323
- labelClassName (string; optional): The class of the <label> that wraps the checkbox input
24-
and the option's label"""
24+
and the option's label
25+
- loading_state (optional): Object that holds the loading state object coming from dash-renderer. loading_state has the following type: dict containing keys 'is_loading', 'prop_name', 'component_name'.
26+
Those keys have the following types:
27+
- is_loading (boolean; optional): Determines if the component is loading or not
28+
- prop_name (string; optional): Holds which property is loading
29+
- component_name (string; optional): Holds the name of the component that is loading"""
2530
@_explicitize_args
26-
def __init__(self, id=Component.UNDEFINED, options=Component.UNDEFINED, values=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, inputStyle=Component.UNDEFINED, inputClassName=Component.UNDEFINED, labelStyle=Component.UNDEFINED, labelClassName=Component.UNDEFINED, **kwargs):
27-
self._prop_names = ['id', 'options', 'values', 'className', 'style', 'inputStyle', 'inputClassName', 'labelStyle', 'labelClassName']
31+
def __init__(self, id=Component.UNDEFINED, options=Component.UNDEFINED, values=Component.UNDEFINED, className=Component.UNDEFINED, style=Component.UNDEFINED, inputStyle=Component.UNDEFINED, inputClassName=Component.UNDEFINED, labelStyle=Component.UNDEFINED, labelClassName=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
32+
self._prop_names = ['id', 'options', 'values', 'className', 'style', 'inputStyle', 'inputClassName', 'labelStyle', 'labelClassName', 'loading_state']
2833
self._type = 'Checklist'
2934
self._namespace = 'dash_core_components'
3035
self._valid_wildcard_attributes = []
31-
self.available_properties = ['id', 'options', 'values', 'className', 'style', 'inputStyle', 'inputClassName', 'labelStyle', 'labelClassName']
36+
self.available_properties = ['id', 'options', 'values', 'className', 'style', 'inputStyle', 'inputClassName', 'labelStyle', 'labelClassName', 'loading_state']
3237
self.available_wildcard_properties = []
3338

3439
_explicit_args = kwargs.pop('_explicit_args')
@@ -41,26 +46,3 @@ def __init__(self, id=Component.UNDEFINED, options=Component.UNDEFINED, values=C
4146
raise TypeError(
4247
'Required argument `' + k + '` was not specified.')
4348
super(Checklist, self).__init__(**args)
44-
45-
def __repr__(self):
46-
if(any(getattr(self, c, None) is not None
47-
for c in self._prop_names
48-
if c is not self._prop_names[0])
49-
or any(getattr(self, c, None) is not None
50-
for c in self.__dict__.keys()
51-
if any(c.startswith(wc_attr)
52-
for wc_attr in self._valid_wildcard_attributes))):
53-
props_string = ', '.join([c+'='+repr(getattr(self, c, None))
54-
for c in self._prop_names
55-
if getattr(self, c, None) is not None])
56-
wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
57-
for c in self.__dict__.keys()
58-
if any([c.startswith(wc_attr)
59-
for wc_attr in
60-
self._valid_wildcard_attributes])])
61-
return ('Checklist(' + props_string +
62-
(', ' + wilds_string if wilds_string != '' else '') + ')')
63-
else:
64-
return (
65-
'Checklist(' +
66-
repr(getattr(self, self._prop_names[0], None)) + ')')

‎dash_core_components/ConfirmDialog.py

Lines changed: 0 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -38,26 +38,3 @@ def __init__(self, id=Component.UNDEFINED, message=Component.UNDEFINED, submit_n
3838
raise TypeError(
3939
'Required argument `' + k + '` was not specified.')
4040
super(ConfirmDialog, self).__init__(**args)
41-
42-
def __repr__(self):
43-
if(any(getattr(self, c, None) is not None
44-
for c in self._prop_names
45-
if c is not self._prop_names[0])
46-
or any(getattr(self, c, None) is not None
47-
for c in self.__dict__.keys()
48-
if any(c.startswith(wc_attr)
49-
for wc_attr in self._valid_wildcard_attributes))):
50-
props_string = ', '.join([c+'='+repr(getattr(self, c, None))
51-
for c in self._prop_names
52-
if getattr(self, c, None) is not None])
53-
wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
54-
for c in self.__dict__.keys()
55-
if any([c.startswith(wc_attr)
56-
for wc_attr in
57-
self._valid_wildcard_attributes])])
58-
return ('ConfirmDialog(' + props_string +
59-
(', ' + wilds_string if wilds_string != '' else '') + ')')
60-
else:
61-
return (
62-
'ConfirmDialog(' +
63-
repr(getattr(self, self._prop_names[0], None)) + ')')

‎dash_core_components/ConfirmDialogProvider.py

Lines changed: 9 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -24,14 +24,19 @@ class ConfirmDialogProvider(Component):
2424
- submit_n_clicks_timestamp (number; optional): Last time the submit button was clicked.
2525
- cancel_n_clicks (number; optional): Number of times the popup was canceled.
2626
- cancel_n_clicks_timestamp (number; optional): Last time the cancel button was clicked.
27-
- displayed (boolean; optional): Is the modal currently displayed."""
27+
- displayed (boolean; optional): Is the modal currently displayed.
28+
- loading_state (optional): Object that holds the loading state object coming from dash-renderer. loading_state has the following type: dict containing keys 'is_loading', 'prop_name', 'component_name'.
29+
Those keys have the following types:
30+
- is_loading (boolean; optional): Determines if the component is loading or not
31+
- prop_name (string; optional): Holds which property is loading
32+
- component_name (string; optional): Holds the name of the component that is loading"""
2833
@_explicitize_args
29-
def __init__(self, children=None, id=Component.UNDEFINED, message=Component.UNDEFINED, submit_n_clicks=Component.UNDEFINED, submit_n_clicks_timestamp=Component.UNDEFINED, cancel_n_clicks=Component.UNDEFINED, cancel_n_clicks_timestamp=Component.UNDEFINED, displayed=Component.UNDEFINED, **kwargs):
30-
self._prop_names = ['children', 'id', 'message', 'submit_n_clicks', 'submit_n_clicks_timestamp', 'cancel_n_clicks', 'cancel_n_clicks_timestamp', 'displayed']
34+
def __init__(self, children=None, id=Component.UNDEFINED, message=Component.UNDEFINED, submit_n_clicks=Component.UNDEFINED, submit_n_clicks_timestamp=Component.UNDEFINED, cancel_n_clicks=Component.UNDEFINED, cancel_n_clicks_timestamp=Component.UNDEFINED, displayed=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
35+
self._prop_names = ['children', 'id', 'message', 'submit_n_clicks', 'submit_n_clicks_timestamp', 'cancel_n_clicks', 'cancel_n_clicks_timestamp', 'displayed', 'loading_state']
3136
self._type = 'ConfirmDialogProvider'
3237
self._namespace = 'dash_core_components'
3338
self._valid_wildcard_attributes = []
34-
self.available_properties = ['children', 'id', 'message', 'submit_n_clicks', 'submit_n_clicks_timestamp', 'cancel_n_clicks', 'cancel_n_clicks_timestamp', 'displayed']
39+
self.available_properties = ['children', 'id', 'message', 'submit_n_clicks', 'submit_n_clicks_timestamp', 'cancel_n_clicks', 'cancel_n_clicks_timestamp', 'displayed', 'loading_state']
3540
self.available_wildcard_properties = []
3641

3742
_explicit_args = kwargs.pop('_explicit_args')
@@ -44,26 +49,3 @@ def __init__(self, children=None, id=Component.UNDEFINED, message=Component.UNDE
4449
raise TypeError(
4550
'Required argument `' + k + '` was not specified.')
4651
super(ConfirmDialogProvider, self).__init__(children=children, **args)
47-
48-
def __repr__(self):
49-
if(any(getattr(self, c, None) is not None
50-
for c in self._prop_names
51-
if c is not self._prop_names[0])
52-
or any(getattr(self, c, None) is not None
53-
for c in self.__dict__.keys()
54-
if any(c.startswith(wc_attr)
55-
for wc_attr in self._valid_wildcard_attributes))):
56-
props_string = ', '.join([c+'='+repr(getattr(self, c, None))
57-
for c in self._prop_names
58-
if getattr(self, c, None) is not None])
59-
wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
60-
for c in self.__dict__.keys()
61-
if any([c.startswith(wc_attr)
62-
for wc_attr in
63-
self._valid_wildcard_attributes])])
64-
return ('ConfirmDialogProvider(' + props_string +
65-
(', ' + wilds_string if wilds_string != '' else '') + ')')
66-
else:
67-
return (
68-
'ConfirmDialogProvider(' +
69-
repr(getattr(self, self._prop_names[0], None)) + ')')

‎dash_core_components/DatePickerRange.py

Lines changed: 11 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -72,19 +72,26 @@ class DatePickerRange(Component):
7272
- clearable (boolean; optional): Whether or not the dropdown is "clearable", that is, whether or
7373
not a small "x" appears on the right of the dropdown that removes
7474
the selected value.
75+
- style (dict; optional): CSS styles appended to wrapper div
76+
- className (string; optional): Appends a CSS class to the wrapper div component.
7577
- updatemode (a value equal to: 'singledate', 'bothdates'; optional): Determines when the component should update
7678
its value. If `bothdates`, then the DatePicker
7779
will only trigger its value when the user has
7880
finished picking both dates. If `singledate`, then
7981
the DatePicker will update its value
80-
as one date is picked."""
82+
as one date is picked.
83+
- loading_state (optional): Object that holds the loading state object coming from dash-renderer. loading_state has the following type: dict containing keys 'is_loading', 'prop_name', 'component_name'.
84+
Those keys have the following types:
85+
- is_loading (boolean; optional): Determines if the component is loading or not
86+
- prop_name (string; optional): Holds which property is loading
87+
- component_name (string; optional): Holds the name of the component that is loading"""
8188
@_explicitize_args
82-
def __init__(self, id=Component.UNDEFINED, start_date=Component.UNDEFINED, end_date=Component.UNDEFINED, min_date_allowed=Component.UNDEFINED, max_date_allowed=Component.UNDEFINED, initial_visible_month=Component.UNDEFINED, start_date_placeholder_text=Component.UNDEFINED, end_date_placeholder_text=Component.UNDEFINED, day_size=Component.UNDEFINED, calendar_orientation=Component.UNDEFINED, is_RTL=Component.UNDEFINED, reopen_calendar_on_clear=Component.UNDEFINED, number_of_months_shown=Component.UNDEFINED, with_portal=Component.UNDEFINED, with_full_screen_portal=Component.UNDEFINED, first_day_of_week=Component.UNDEFINED, minimum_nights=Component.UNDEFINED, stay_open_on_select=Component.UNDEFINED, show_outside_days=Component.UNDEFINED, month_format=Component.UNDEFINED, display_format=Component.UNDEFINED, disabled=Component.UNDEFINED, clearable=Component.UNDEFINED, updatemode=Component.UNDEFINED, **kwargs):
83-
self._prop_names = ['id', 'start_date', 'end_date', 'min_date_allowed', 'max_date_allowed', 'initial_visible_month', 'start_date_placeholder_text', 'end_date_placeholder_text', 'day_size', 'calendar_orientation', 'is_RTL', 'reopen_calendar_on_clear', 'number_of_months_shown', 'with_portal', 'with_full_screen_portal', 'first_day_of_week', 'minimum_nights', 'stay_open_on_select', 'show_outside_days', 'month_format', 'display_format', 'disabled', 'clearable', 'updatemode']
89+
def __init__(self, id=Component.UNDEFINED, start_date=Component.UNDEFINED, end_date=Component.UNDEFINED, min_date_allowed=Component.UNDEFINED, max_date_allowed=Component.UNDEFINED, initial_visible_month=Component.UNDEFINED, start_date_placeholder_text=Component.UNDEFINED, end_date_placeholder_text=Component.UNDEFINED, day_size=Component.UNDEFINED, calendar_orientation=Component.UNDEFINED, is_RTL=Component.UNDEFINED, reopen_calendar_on_clear=Component.UNDEFINED, number_of_months_shown=Component.UNDEFINED, with_portal=Component.UNDEFINED, with_full_screen_portal=Component.UNDEFINED, first_day_of_week=Component.UNDEFINED, minimum_nights=Component.UNDEFINED, stay_open_on_select=Component.UNDEFINED, show_outside_days=Component.UNDEFINED, month_format=Component.UNDEFINED, display_format=Component.UNDEFINED, disabled=Component.UNDEFINED, clearable=Component.UNDEFINED, style=Component.UNDEFINED, className=Component.UNDEFINED, updatemode=Component.UNDEFINED, loading_state=Component.UNDEFINED, **kwargs):
90+
self._prop_names = ['id', 'start_date', 'end_date', 'min_date_allowed', 'max_date_allowed', 'initial_visible_month', 'start_date_placeholder_text', 'end_date_placeholder_text', 'day_size', 'calendar_orientation', 'is_RTL', 'reopen_calendar_on_clear', 'number_of_months_shown', 'with_portal', 'with_full_screen_portal', 'first_day_of_week', 'minimum_nights', 'stay_open_on_select', 'show_outside_days', 'month_format', 'display_format', 'disabled', 'clearable', 'style', 'className', 'updatemode', 'loading_state']
8491
self._type = 'DatePickerRange'
8592
self._namespace = 'dash_core_components'
8693
self._valid_wildcard_attributes = []
87-
self.available_properties = ['id', 'start_date', 'end_date', 'min_date_allowed', 'max_date_allowed', 'initial_visible_month', 'start_date_placeholder_text', 'end_date_placeholder_text', 'day_size', 'calendar_orientation', 'is_RTL', 'reopen_calendar_on_clear', 'number_of_months_shown', 'with_portal', 'with_full_screen_portal', 'first_day_of_week', 'minimum_nights', 'stay_open_on_select', 'show_outside_days', 'month_format', 'display_format', 'disabled', 'clearable', 'updatemode']
94+
self.available_properties = ['id', 'start_date', 'end_date', 'min_date_allowed', 'max_date_allowed', 'initial_visible_month', 'start_date_placeholder_text', 'end_date_placeholder_text', 'day_size', 'calendar_orientation', 'is_RTL', 'reopen_calendar_on_clear', 'number_of_months_shown', 'with_portal', 'with_full_screen_portal', 'first_day_of_week', 'minimum_nights', 'stay_open_on_select', 'show_outside_days', 'month_format', 'display_format', 'disabled', 'clearable', 'style', 'className', 'updatemode', 'loading_state']
8895
self.available_wildcard_properties = []
8996

9097
_explicit_args = kwargs.pop('_explicit_args')
@@ -97,26 +104,3 @@ def __init__(self, id=Component.UNDEFINED, start_date=Component.UNDEFINED, end_d
97104
raise TypeError(
98105
'Required argument `' + k + '` was not specified.')
99106
super(DatePickerRange, self).__init__(**args)
100-
101-
def __repr__(self):
102-
if(any(getattr(self, c, None) is not None
103-
for c in self._prop_names
104-
if c is not self._prop_names[0])
105-
or any(getattr(self, c, None) is not None
106-
for c in self.__dict__.keys()
107-
if any(c.startswith(wc_attr)
108-
for wc_attr in self._valid_wildcard_attributes))):
109-
props_string = ', '.join([c+'='+repr(getattr(self, c, None))
110-
for c in self._prop_names
111-
if getattr(self, c, None) is not None])
112-
wilds_string = ', '.join([c+'='+repr(getattr(self, c, None))
113-
for c in self.__dict__.keys()
114-
if any([c.startswith(wc_attr)
115-
for wc_attr in
116-
self._valid_wildcard_attributes])])
117-
return ('DatePickerRange(' + props_string +
118-
(', ' + wilds_string if wilds_string != '' else '') + ')')
119-
else:
120-
return (
121-
'DatePickerRange(' +
122-
repr(getattr(self, self._prop_names[0], None)) + ')')

0 commit comments

Comments
 (0)