Skip to content

Commit 957ec39

Browse files
T4rk1nT4rk1n
committed
replace loading for data-dash-is-loading
1 parent 9741a69 commit 957ec39

25 files changed

+92
-364
lines changed

‎components/dash-core-components/src/components/Checklist.react.js‎

Lines changed: 4 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
11
import PropTypes from 'prop-types';
22
import {append, includes, without} from 'ramda';
33
import React, {Component} from 'react';
4+
45
import {sanitizeOptions} from '../utils/optionTypes';
6+
import LoadingElement from '../utils/LoadingElement';
57

68
/**
79
* Checklist is a component that encapsulates several checkboxes.
@@ -21,19 +23,11 @@ export default class Checklist extends Component {
2123
options,
2224
setProps,
2325
style,
24-
loading_state,
2526
value,
2627
inline,
2728
} = this.props;
2829
return (
29-
<div
30-
data-dash-is-loading={
31-
(loading_state && loading_state.is_loading) || undefined
32-
}
33-
id={id}
34-
style={style}
35-
className={className}
36-
>
30+
<LoadingElement id={id} style={style} className={className}>
3731
{sanitizeOptions(options).map(option => {
3832
return (
3933
<label
@@ -67,7 +61,7 @@ export default class Checklist extends Component {
6761
</label>
6862
);
6963
})}
70-
</div>
64+
</LoadingElement>
7165
);
7266
}
7367
}
@@ -192,24 +186,6 @@ Checklist.propTypes = {
192186
*/
193187
setProps: PropTypes.func,
194188

195-
/**
196-
* Object that holds the loading state object coming from dash-renderer
197-
*/
198-
loading_state: PropTypes.shape({
199-
/**
200-
* Determines if the component is loading or not
201-
*/
202-
is_loading: PropTypes.bool,
203-
/**
204-
* Holds which property is loading
205-
*/
206-
prop_name: PropTypes.string,
207-
/**
208-
* Holds the name of the component that is loading
209-
*/
210-
component_name: PropTypes.string,
211-
}),
212-
213189
/**
214190
* Used to allow user interactions in this component to be persisted when
215191
* the component - or the page - is refreshed. If `persisted` is truthy and

‎components/dash-core-components/src/components/Clipboard.react.js‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
33
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
44
import {faCopy, faCheckCircle} from '@fortawesome/free-regular-svg-icons';
55

6+
import LoadingElement from '../utils/LoadingElement';
7+
68
const clipboardAPI = navigator.clipboard;
79

810
function wait(ms) {
@@ -132,15 +134,15 @@ export default class Clipboard extends React.Component {
132134
const btnIcon = this.state.copied ? copiedIcon : copyIcon;
133135

134136
return clipboardAPI ? (
135-
<div
137+
<LoadingElement
136138
id={id}
137139
title={title}
138140
style={style}
139141
className={className}
140142
onClick={this.onClickHandler}
141143
>
142144
<i> {btnIcon}</i>
143-
</div>
145+
</LoadingElement>
144146
) : null;
145147
}
146148
}

‎components/dash-core-components/src/components/ConfirmDialogProvider.react.js‎

Lines changed: 4 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@ import React from 'react';
22
import PropTypes from 'prop-types';
33

44
import ConfirmDialog from './ConfirmDialog.react';
5+
import LoadingElement from '../utils/LoadingElement';
56

67
/**
78
* A wrapper component that will display a confirmation dialog
@@ -17,19 +18,16 @@ import ConfirmDialog from './ConfirmDialog.react';
1718
*/
1819
export default class ConfirmDialogProvider extends React.Component {
1920
render() {
20-
const {displayed, id, setProps, children, loading_state} = this.props;
21+
const {displayed, id, setProps, children} = this.props;
2122

2223
return (
23-
<div
24+
<LoadingElement
2425
id={id}
25-
data-dash-is-loading={
26-
(loading_state && loading_state.is_loading) || undefined
27-
}
2826
onClick={() => setProps({displayed: !displayed})}
2927
>
3028
{children}
3129
<ConfirmDialog {...this.props} displayed={displayed} />
32-
</div>
30+
</LoadingElement>
3331
);
3432
}
3533
}
@@ -82,22 +80,4 @@ ConfirmDialogProvider.propTypes = {
8280
* The children to hijack clicks from and display the popup.
8381
*/
8482
children: PropTypes.any,
85-
86-
/**
87-
* Object that holds the loading state object coming from dash-renderer
88-
*/
89-
loading_state: PropTypes.shape({
90-
/**
91-
* Determines if the component is loading or not
92-
*/
93-
is_loading: PropTypes.bool,
94-
/**
95-
* Holds which property is loading
96-
*/
97-
prop_name: PropTypes.string,
98-
/**
99-
* Holds the name of the component that is loading
100-
*/
101-
component_name: PropTypes.string,
102-
}),
10383
};

‎components/dash-core-components/src/components/DatePickerRange.react.js‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -222,24 +222,6 @@ DatePickerRange.propTypes = {
222222
*/
223223
setProps: PropTypes.func,
224224

225-
/**
226-
* Object that holds the loading state object coming from dash-renderer
227-
*/
228-
loading_state: PropTypes.shape({
229-
/**
230-
* Determines if the component is loading or not
231-
*/
232-
is_loading: PropTypes.bool,
233-
/**
234-
* Holds which property is loading
235-
*/
236-
prop_name: PropTypes.string,
237-
/**
238-
* Holds the name of the component that is loading
239-
*/
240-
component_name: PropTypes.string,
241-
}),
242-
243225
/**
244226
* Used to allow user interactions in this component to be persisted when
245227
* the component - or the page - is refreshed. If `persisted` is truthy and

‎components/dash-core-components/src/components/DatePickerSingle.react.js‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -181,24 +181,6 @@ DatePickerSingle.propTypes = {
181181
*/
182182
setProps: PropTypes.func,
183183

184-
/**
185-
* Object that holds the loading state object coming from dash-renderer
186-
*/
187-
loading_state: PropTypes.shape({
188-
/**
189-
* Determines if the component is loading or not
190-
*/
191-
is_loading: PropTypes.bool,
192-
/**
193-
* Holds which property is loading
194-
*/
195-
prop_name: PropTypes.string,
196-
/**
197-
* Holds the name of the component that is loading
198-
*/
199-
component_name: PropTypes.string,
200-
}),
201-
202184
/**
203185
* Used to allow user interactions in this component to be persisted when
204186
* the component - or the page - is refreshed. If `persisted` is truthy and

‎components/dash-core-components/src/components/Dropdown.react.js‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -177,24 +177,6 @@ Dropdown.propTypes = {
177177
*/
178178
setProps: PropTypes.func,
179179

180-
/**
181-
* Object that holds the loading state object coming from dash-renderer
182-
*/
183-
loading_state: PropTypes.shape({
184-
/**
185-
* Determines if the component is loading or not
186-
*/
187-
is_loading: PropTypes.bool,
188-
/**
189-
* Holds which property is loading
190-
*/
191-
prop_name: PropTypes.string,
192-
/**
193-
* Holds the name of the component that is loading
194-
*/
195-
component_name: PropTypes.string,
196-
}),
197-
198180
/**
199181
* Used to allow user interactions in this component to be persisted when
200182
* the component - or the page - is refreshed. If `persisted` is truthy and

‎components/dash-core-components/src/components/Graph.react.js‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -556,24 +556,6 @@ PlotlyGraph.propTypes = {
556556
* Function that updates the state tree.
557557
*/
558558
setProps: PropTypes.func,
559-
560-
/**
561-
* Object that holds the loading state object coming from dash-renderer
562-
*/
563-
loading_state: PropTypes.shape({
564-
/**
565-
* Determines if the component is loading or not
566-
*/
567-
is_loading: PropTypes.bool,
568-
/**
569-
* Holds which property is loading
570-
*/
571-
prop_name: PropTypes.string,
572-
/**
573-
* Holds the name of the component that is loading
574-
*/
575-
component_name: PropTypes.string,
576-
}),
577559
};
578560

579561
ControlledPlotlyGraph.propTypes = PlotlyGraph.propTypes;

‎components/dash-core-components/src/components/Input.react.js‎

Lines changed: 3 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import React, {PureComponent} from 'react';
33
import PropTypes from 'prop-types';
44
import isNumeric from 'fast-isnumeric';
55
import './css/input.css';
6+
import LoadingElement from '../utils/LoadingElement';
67

78
// eslint-disable-next-line no-implicit-coercion
89
const convert = val => (isNumeric(val) ? +val : NaN);
@@ -94,14 +95,11 @@ export default class Input extends PureComponent {
9495
render() {
9596
const valprops =
9697
this.props.type === 'number' ? {} : {value: this.state.value};
97-
const {loading_state} = this.props;
9898
let {className} = this.props;
9999
className = 'dash-input' + (className ? ` ${className}` : '');
100100
return (
101-
<input
102-
data-dash-is-loading={
103-
(loading_state && loading_state.is_loading) || undefined
104-
}
101+
<LoadingElement
102+
elementType={'input'}
105103
className={className}
106104
ref={this.input}
107105
onBlur={this.onBlur}
@@ -471,24 +469,6 @@ Input.propTypes = {
471469
*/
472470
setProps: PropTypes.func,
473471

474-
/**
475-
* Object that holds the loading state object coming from dash-renderer
476-
*/
477-
loading_state: PropTypes.shape({
478-
/**
479-
* Determines if the component is loading or not
480-
*/
481-
is_loading: PropTypes.bool,
482-
/**
483-
* Holds which property is loading
484-
*/
485-
prop_name: PropTypes.string,
486-
/**
487-
* Holds the name of the component that is loading
488-
*/
489-
component_name: PropTypes.string,
490-
}),
491-
492472
/**
493473
* Used to allow user interactions in this component to be persisted when
494474
* the component - or the page - is refreshed. If `persisted` is truthy and

‎components/dash-core-components/src/components/Link.react.js‎

Lines changed: 6 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -33,22 +33,16 @@ CustomEvent.prototype = window.Event.prototype;
3333
* component to use.
3434
*/
3535
const Link = ({refresh = false, ...props}) => {
36-
const {
37-
className,
38-
style,
39-
id,
40-
href,
41-
loading_state,
42-
children,
43-
title,
44-
target,
45-
setProps,
46-
} = props;
36+
const {className, style, id, href, children, title, target, setProps} =
37+
props;
4738
const cleanUrl = window.dash_clientside.clean_url;
4839
const sanitizedUrl = useMemo(() => {
4940
return href ? cleanUrl(href) : undefined;
5041
}, [href]);
5142

43+
const ctx = window.dash_component_api.useDashContext();
44+
const loading = ctx.useLoading();
45+
5246
const updateLocation = e => {
5347
const hasModifiers = e.metaKey || e.shiftKey || e.altKey || e.ctrlKey;
5448

@@ -80,9 +74,7 @@ const Link = ({refresh = false, ...props}) => {
8074

8175
return (
8276
<a
83-
data-dash-is-loading={
84-
(loading_state && loading_state.is_loading) || undefined
85-
}
77+
data-dash-is-loading={loading || undefined}
8678
id={id}
8779
className={className}
8880
style={style}

‎components/dash-core-components/src/components/Markdown.react.js‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -84,24 +84,6 @@ DashMarkdown.propTypes = {
8484
theme: PropTypes.oneOf(['dark', 'light']),
8585
}),
8686

87-
/**
88-
* Object that holds the loading state object coming from dash-renderer
89-
*/
90-
loading_state: PropTypes.shape({
91-
/**
92-
* Determines if the component is loading or not
93-
*/
94-
is_loading: PropTypes.bool,
95-
/**
96-
* Holds which property is loading
97-
*/
98-
prop_name: PropTypes.string,
99-
/**
100-
* Holds the name of the component that is loading
101-
*/
102-
component_name: PropTypes.string,
103-
}),
104-
10587
/**
10688
* User-defined inline styles for the rendered Markdown
10789
*/

0 commit comments

Comments
 (0)