Skip to content

Commit 55ee920

Browse files
bietkulbietkul
committed
fix(web): add ReactiveComponentPrivate generic component
1 parent f1167cb commit 55ee920

File tree

7 files changed

+161
-144
lines changed

7 files changed

+161
-144
lines changed

‎packages/web/src/components/basic/ReactiveComponent.js‎

Lines changed: 16 additions & 98 deletions
Original file line numberDiff line numberDiff line change
@@ -25,30 +25,6 @@ import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
2525
import { connect } from '../../utils';
2626
import PreferencesConsumer from '../basic/PreferencesConsumer';
2727
import ComponentWrapper from '../basic/ComponentWrapper';
28-
import SingleList from '../list/SingleList';
29-
import ReactiveList from '../result/ReactiveList';
30-
import SearchBox from '../search/SearchBox';
31-
import MultiList from '../list/MultiList';
32-
import SingleDataList from '../list/SingleDataList';
33-
import TabDataList from '../list/TabDataList';
34-
import MultiDataList from '../list/MultiDataList';
35-
import SingleDropdownList from '../list/SingleDropdownList';
36-
import MultiDropdownList from '../list/MultiDropdownList';
37-
import SingleDropdownRange from '../range/SingleDropdownRange';
38-
import MultiDropdownRange from '../range/MultiDropdownRange';
39-
import NumberBox from './NumberBox';
40-
import TagCloud from '../list/TagCloud';
41-
import ToggleButton from '../list/ToggleButton';
42-
import DatePicker from '../date/DatePicker';
43-
import DateRange from '../date/DateRange';
44-
import SingleRange from '../range/SingleRange';
45-
import MultiRange from '../range/MultiRange';
46-
import RangeSlider from '../range/RangeSlider';
47-
import DynamicRangeSlider from '../range/DynamicRangeSlider';
48-
import RatingsFilter from '../range/RatingsFilter';
49-
import RangeInput from '../range/RangeInput';
50-
import ReactiveChart from '../chart/ReactiveChart';
51-
import TreeList from '../list/TreeList';
5228

5329
class ReactiveComponent extends Component {
5430
constructor(props) {
@@ -396,80 +372,22 @@ const ConnectedComponent = connect(
396372

397373
const ForwardRefComponent = React.forwardRef((props, ref) => (
398374
<PreferencesConsumer userProps={props}>
399-
{(preferenceProps) => {
400-
switch (preferenceProps.componentType) {
401-
case componentTypes.treeList:
402-
return <TreeList {...preferenceProps} />;
403-
case componentTypes.reactiveList:
404-
return <ReactiveList {...preferenceProps} />;
405-
case componentTypes.searchBox:
406-
return <SearchBox {...preferenceProps} />;
407-
// list components
408-
case componentTypes.singleList:
409-
return <SingleList {...preferenceProps} />;
410-
case componentTypes.multiList:
411-
return <MultiList {...preferenceProps} />;
412-
case componentTypes.singleDataList:
413-
return <SingleDataList {...preferenceProps} />;
414-
case componentTypes.tabDataList:
415-
return <TabDataList {...preferenceProps} />;
416-
case componentTypes.multiDataList:
417-
return <MultiDataList {...preferenceProps} />;
418-
case componentTypes.singleDropdownList:
419-
return <SingleDropdownList {...preferenceProps} />;
420-
case componentTypes.multiDropdownList:
421-
return <MultiDropdownList {...preferenceProps} />;
422-
case componentTypes.singleDropdownRange:
423-
return <SingleDropdownRange {...preferenceProps} />;
424-
case componentTypes.multiDropdownRange:
425-
return <MultiDropdownRange {...preferenceProps} />;
426-
// basic components
427-
case componentTypes.numberBox:
428-
return <NumberBox {...preferenceProps} />;
429-
case componentTypes.tagCloud:
430-
return <TagCloud {...preferenceProps} />;
431-
case componentTypes.toggleButton:
432-
return <ToggleButton {...preferenceProps} />;
433-
// range components
434-
case componentTypes.datePicker:
435-
return <DatePicker {...preferenceProps} />;
436-
case componentTypes.dateRange:
437-
return <DateRange {...preferenceProps} />;
438-
case componentTypes.dynamicRangeSlider:
439-
return <DynamicRangeSlider {...preferenceProps} />;
440-
case componentTypes.singleRange:
441-
return <SingleRange {...preferenceProps} />;
442-
case componentTypes.multiRange:
443-
return <MultiRange {...preferenceProps} />;
444-
case componentTypes.rangeSlider:
445-
return <RangeSlider {...preferenceProps} />;
446-
case componentTypes.ratingsFilter:
447-
return <RatingsFilter {...preferenceProps} />;
448-
case componentTypes.rangeInput:
449-
return <RangeInput {...preferenceProps} />;
450-
case componentTypes.reactiveChart:
451-
return <ReactiveChart {...preferenceProps} />;
452-
case componentTypes.reactiveComponent:
453-
default:
454-
return (
455-
<ComponentWrapper
456-
{...preferenceProps}
457-
// eslint-disable-next-line
458-
internalComponent={!!props.defaultQuery}
459-
componentType={componentTypes.reactiveComponent}
460-
>
461-
{
462-
componentProps =>
463-
(<ConnectedComponent
464-
{...preferenceProps}
465-
{...componentProps}
466-
myForwardedRef={ref}
467-
/>)
468-
}
469-
</ComponentWrapper>
470-
);
471-
}
472-
}}
375+
{preferenceProps => (
376+
<ComponentWrapper
377+
{...preferenceProps}
378+
// eslint-disable-next-line
379+
internalComponent={!!props.defaultQuery}
380+
componentType={componentTypes.reactiveComponent}
381+
>
382+
{componentProps => (
383+
<ConnectedComponent
384+
{...preferenceProps}
385+
{...componentProps}
386+
myForwardedRef={ref}
387+
/>
388+
)}
389+
</ComponentWrapper>
390+
)}
473391
</PreferencesConsumer>
474392
));
475393

‎packages/web/src/components/basic/ReactiveComponentPrivate.d.ts‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import * as React from 'react';
2+
3+
declare const ReactiveComponentPrivate: React.ComponentClass<any>;
4+
5+
export default ReactiveComponentPrivate;

‎packages/web/src/components/basic/ReactiveComponentPrivate.js‎

Lines changed: 94 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,94 @@
1+
import React from 'react';
2+
import { componentTypes } from '@appbaseio/reactivecore/lib/utils/constants';
3+
import PreferencesConsumer from '../basic/PreferencesConsumer';
4+
import SingleList from '../list/SingleList';
5+
import ReactiveList from '../result/ReactiveList';
6+
import SearchBox from '../search/SearchBox';
7+
import MultiList from '../list/MultiList';
8+
import SingleDataList from '../list/SingleDataList';
9+
import TabDataList from '../list/TabDataList';
10+
import MultiDataList from '../list/MultiDataList';
11+
import SingleDropdownList from '../list/SingleDropdownList';
12+
import MultiDropdownList from '../list/MultiDropdownList';
13+
import SingleDropdownRange from '../range/SingleDropdownRange';
14+
import MultiDropdownRange from '../range/MultiDropdownRange';
15+
import NumberBox from './NumberBox';
16+
import TagCloud from '../list/TagCloud';
17+
import ToggleButton from '../list/ToggleButton';
18+
import DatePicker from '../date/DatePicker';
19+
import DateRange from '../date/DateRange';
20+
import SingleRange from '../range/SingleRange';
21+
import MultiRange from '../range/MultiRange';
22+
import RangeSlider from '../range/RangeSlider';
23+
import DynamicRangeSlider from '../range/DynamicRangeSlider';
24+
import RatingsFilter from '../range/RatingsFilter';
25+
import RangeInput from '../range/RangeInput';
26+
import ReactiveChart from '../chart/ReactiveChart';
27+
import TreeList from '../list/TreeList';
28+
import ReactiveComponent from './ReactiveComponent';
29+
30+
const ForwardRefComponent = React.forwardRef((props, ref) => (
31+
<PreferencesConsumer userProps={props}>
32+
{(preferenceProps) => {
33+
switch (preferenceProps.componentType) {
34+
case componentTypes.treeList:
35+
return <TreeList {...preferenceProps} myForwardedRef={ref} />;
36+
case componentTypes.reactiveList:
37+
return <ReactiveList {...preferenceProps} myForwardedRef={ref} />;
38+
case componentTypes.searchBox:
39+
return <SearchBox {...preferenceProps} myForwardedRef={ref} />;
40+
// list components
41+
case componentTypes.singleList:
42+
return <SingleList {...preferenceProps} myForwardedRef={ref} />;
43+
case componentTypes.multiList:
44+
return <MultiList {...preferenceProps} myForwardedRef={ref} />;
45+
case componentTypes.singleDataList:
46+
return <SingleDataList {...preferenceProps} myForwardedRef={ref} />;
47+
case componentTypes.tabDataList:
48+
return <TabDataList {...preferenceProps} myForwardedRef={ref} />;
49+
case componentTypes.multiDataList:
50+
return <MultiDataList {...preferenceProps} myForwardedRef={ref} />;
51+
case componentTypes.singleDropdownList:
52+
return <SingleDropdownList {...preferenceProps} myForwardedRef={ref} />;
53+
case componentTypes.multiDropdownList:
54+
return <MultiDropdownList {...preferenceProps} myForwardedRef={ref} />;
55+
case componentTypes.singleDropdownRange:
56+
return <SingleDropdownRange {...preferenceProps} myForwardedRef={ref} />;
57+
case componentTypes.multiDropdownRange:
58+
return <MultiDropdownRange {...preferenceProps} myForwardedRef={ref} />;
59+
// basic components
60+
case componentTypes.numberBox:
61+
return <NumberBox {...preferenceProps} myForwardedRef={ref} />;
62+
case componentTypes.tagCloud:
63+
return <TagCloud {...preferenceProps} myForwardedRef={ref} />;
64+
case componentTypes.toggleButton:
65+
return <ToggleButton {...preferenceProps} myForwardedRef={ref} />;
66+
// range components
67+
case componentTypes.datePicker:
68+
return <DatePicker {...preferenceProps} myForwardedRef={ref} />;
69+
case componentTypes.dateRange:
70+
return <DateRange {...preferenceProps} myForwardedRef={ref} />;
71+
case componentTypes.dynamicRangeSlider:
72+
return <DynamicRangeSlider {...preferenceProps} myForwardedRef={ref} />;
73+
case componentTypes.singleRange:
74+
return <SingleRange {...preferenceProps} myForwardedRef={ref} />;
75+
case componentTypes.multiRange:
76+
return <MultiRange {...preferenceProps} myForwardedRef={ref} />;
77+
case componentTypes.rangeSlider:
78+
return <RangeSlider {...preferenceProps} myForwardedRef={ref} />;
79+
case componentTypes.ratingsFilter:
80+
return <RatingsFilter {...preferenceProps} myForwardedRef={ref} />;
81+
case componentTypes.rangeInput:
82+
return <RangeInput {...preferenceProps} myForwardedRef={ref} />;
83+
case componentTypes.reactiveChart:
84+
return <ReactiveChart {...preferenceProps} myForwardedRef={ref} />;
85+
case componentTypes.reactiveComponent:
86+
default:
87+
return <ReactiveComponent {...preferenceProps} myForwardedRef={ref} />;
88+
}
89+
}}
90+
</PreferencesConsumer>
91+
));
92+
93+
ForwardRefComponent.displayName = 'ReactiveComponentPrivate';
94+
export default ForwardRefComponent;

‎packages/web/src/components/chart/ReactiveChart.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ import {
1616
isEqual,
1717
getQueryOptions,
1818
checkValueChange,
19-
getOptionsFromQuery,
2019
getAggsQuery,
2120
updateInternalQuery,
2221
updateCustomQuery,
@@ -36,6 +35,7 @@ import {
3635
import PreferencesConsumer from '../basic/PreferencesConsumer';
3736
import ComponentWrapper from '../basic/ComponentWrapper';
3837

38+
const getLoading = loading => (loading === undefined ? true : loading);
3939
const ChartTypes = {
4040
Pie: 'pie',
4141
Scatter: 'scatter',
@@ -772,7 +772,7 @@ const mapStateToProps = (state, props) => ({
772772
(state.selectedValues[props.componentId]
773773
&& state.selectedValues[props.componentId].value)
774774
|| null,
775-
isLoading: state.isLoading[getInternalComponentID(props.componentId)],
775+
isLoading: getLoading(state.isLoading[getInternalComponentID(props.componentId)]),
776776
error: state.error[getInternalComponentID(props.componentId)],
777777
});
778778

‎packages/web/src/index.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export interface CommonProps {
1616
export { default as NumberBox } from './components/basic/NumberBox';
1717
export { default as ReactiveBase } from './components/basic/ReactiveBase';
1818
export { default as ReactiveComponent } from './components/basic/ReactiveComponent';
19+
export { default as ReactiveComponentPrivate } from './components/basic/ReactiveComponentPivate';
1920
export { default as SelectedFilters } from './components/basic/SelectedFilters';
2021
export { default as StateProvider } from './components/basic/StateProvider';
2122
export { default as ErrorBoundary } from './components/basic/ErrorBoundary';

‎packages/web/src/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import ErrorBoundary from './components/basic/ErrorBoundary';
66
import SelectedFilters from './components/basic/SelectedFilters';
77
import NumberBox from './components/basic/NumberBox';
88
import ReactiveComponent from './components/basic/ReactiveComponent';
9+
import ReactiveComponentPrivate from './components/basic/ReactiveComponentPrivate';
910
import StateProvider from './components/basic/StateProvider';
1011

1112
import DatePicker from './components/date/DatePicker';
@@ -51,6 +52,7 @@ export {
5152
NumberBox,
5253
TagCloud,
5354
ReactiveComponent,
55+
ReactiveComponentPrivate,
5456
ErrorBoundary,
5557
// date
5658
DatePicker,

0 commit comments

Comments
 (0)