@campxdev/react-blueprint 1.3.4 → 1.3.6
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json
CHANGED
|
@@ -14,6 +14,18 @@ import { Spinner } from '../../Feedback/Spinner/Spinner';
|
|
|
14
14
|
import { TextField } from '../TextField/TextField';
|
|
15
15
|
import { OptionsLoader } from '../components/OptionsLoader';
|
|
16
16
|
import { OptionContainer } from '../styles';
|
|
17
|
+
import {
|
|
18
|
+
SingleSelectActionsTypes,
|
|
19
|
+
singleSelectReducer,
|
|
20
|
+
SingleSelectState,
|
|
21
|
+
} from './singleSelectReducer';
|
|
22
|
+
|
|
23
|
+
declare module '@mui/material/Autocomplete' {
|
|
24
|
+
interface AutocompletePaperSlotPropsOverrides {
|
|
25
|
+
loadingOptions: boolean;
|
|
26
|
+
isSearch: boolean;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
17
29
|
|
|
18
30
|
function sleep(duration: number): Promise<void> {
|
|
19
31
|
return new Promise<void>((resolve) => {
|
|
@@ -23,13 +35,6 @@ function sleep(duration: number): Promise<void> {
|
|
|
23
35
|
});
|
|
24
36
|
}
|
|
25
37
|
|
|
26
|
-
declare module '@mui/material/Autocomplete' {
|
|
27
|
-
interface AutocompletePaperSlotPropsOverrides {
|
|
28
|
-
loadingOptions: boolean;
|
|
29
|
-
isSearch: boolean;
|
|
30
|
-
}
|
|
31
|
-
}
|
|
32
|
-
|
|
33
38
|
export type SingleSelectProps = {
|
|
34
39
|
options?: { label: string; subLabel?: string; value: any }[] | any[];
|
|
35
40
|
optionsApiEndPoint?: string;
|
|
@@ -79,101 +84,6 @@ const CustomPaper = (props: any) => (
|
|
|
79
84
|
</Paper>
|
|
80
85
|
);
|
|
81
86
|
|
|
82
|
-
enum SingleSelectActionsTypes {
|
|
83
|
-
OPEN = 'open',
|
|
84
|
-
CLOSE = 'close',
|
|
85
|
-
LOAD_INTERNAL_OPTIONS_START = 'load_internal_options_start',
|
|
86
|
-
LOAD_INTERNAL_OPTIONS_END = 'load_internal_options_end',
|
|
87
|
-
LOAD_SELECTED_OPTIONS_START = 'load_selected_options_start',
|
|
88
|
-
LOAD_SELECTED_OPTIONS_END = 'load_selected_options_end',
|
|
89
|
-
SET_NETWORK_ERROR = 'set_network_error',
|
|
90
|
-
SET_INTERNAL_OPTIONS = 'set_internal_options',
|
|
91
|
-
APPEND_INTERNAL_OPTIONS = 'append_internal_options',
|
|
92
|
-
CHANGE_HAS_MORE_FLAG = 'change_has_more_flag',
|
|
93
|
-
SET_SEARCH = 'set_search',
|
|
94
|
-
CLEAR_SEARCH = 'clear_search',
|
|
95
|
-
}
|
|
96
|
-
const singleSelectReducer = (
|
|
97
|
-
state: any,
|
|
98
|
-
{
|
|
99
|
-
actionType,
|
|
100
|
-
stateChanges,
|
|
101
|
-
}: { actionType: SingleSelectActionsTypes; stateChanges?: any },
|
|
102
|
-
) => {
|
|
103
|
-
switch (actionType) {
|
|
104
|
-
case SingleSelectActionsTypes.OPEN: {
|
|
105
|
-
return { ...state, open: true };
|
|
106
|
-
}
|
|
107
|
-
case SingleSelectActionsTypes.CLOSE: {
|
|
108
|
-
return {
|
|
109
|
-
...state,
|
|
110
|
-
open: false,
|
|
111
|
-
loadingInternalOptions: false,
|
|
112
|
-
};
|
|
113
|
-
}
|
|
114
|
-
case SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START: {
|
|
115
|
-
return { ...state, loadingInternalOptions: true };
|
|
116
|
-
}
|
|
117
|
-
case SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END: {
|
|
118
|
-
return { ...state, loadingInternalOptions: false };
|
|
119
|
-
}
|
|
120
|
-
case SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_START: {
|
|
121
|
-
return { ...state, loadingInitialInternalOptions: true };
|
|
122
|
-
}
|
|
123
|
-
case SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_END: {
|
|
124
|
-
return { ...state, loadingInitialInternalOptions: false };
|
|
125
|
-
}
|
|
126
|
-
case SingleSelectActionsTypes.SET_NETWORK_ERROR: {
|
|
127
|
-
return { ...state, ...stateChanges };
|
|
128
|
-
}
|
|
129
|
-
case SingleSelectActionsTypes.SET_SEARCH: {
|
|
130
|
-
return {
|
|
131
|
-
...state,
|
|
132
|
-
search: stateChanges.search,
|
|
133
|
-
hasMore: true,
|
|
134
|
-
};
|
|
135
|
-
}
|
|
136
|
-
case SingleSelectActionsTypes.CLEAR_SEARCH: {
|
|
137
|
-
return {
|
|
138
|
-
...state,
|
|
139
|
-
search: null,
|
|
140
|
-
offset: 0,
|
|
141
|
-
internalOptions: stateChanges.internalOptions,
|
|
142
|
-
internalOptionsMap: stateChanges.internalOptionsMap,
|
|
143
|
-
};
|
|
144
|
-
}
|
|
145
|
-
case SingleSelectActionsTypes.SET_INTERNAL_OPTIONS: {
|
|
146
|
-
return {
|
|
147
|
-
...state,
|
|
148
|
-
internalOptions: stateChanges.internalOptions,
|
|
149
|
-
internalOptionsMap: stateChanges.internalOptionsMap,
|
|
150
|
-
loadingInternalOptions: false,
|
|
151
|
-
};
|
|
152
|
-
}
|
|
153
|
-
case SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS: {
|
|
154
|
-
return {
|
|
155
|
-
...state,
|
|
156
|
-
internalOptions: [...state.internalOptions, ...stateChanges.newOptions],
|
|
157
|
-
internalOptionsMap: {
|
|
158
|
-
...state.internalOptionsMap,
|
|
159
|
-
...stateChanges.internalOptionsMap,
|
|
160
|
-
},
|
|
161
|
-
loadingInternalOptions: false,
|
|
162
|
-
limit: state.limit,
|
|
163
|
-
offset: state.offset + (stateChanges?.persistOffset ? 0 : 10),
|
|
164
|
-
};
|
|
165
|
-
}
|
|
166
|
-
case SingleSelectActionsTypes.CHANGE_HAS_MORE_FLAG: {
|
|
167
|
-
return {
|
|
168
|
-
...state,
|
|
169
|
-
hasMore: !state.hasMore,
|
|
170
|
-
};
|
|
171
|
-
}
|
|
172
|
-
default:
|
|
173
|
-
return { ...state, ...stateChanges };
|
|
174
|
-
}
|
|
175
|
-
};
|
|
176
|
-
|
|
177
87
|
export const SingleSelect = ({
|
|
178
88
|
options,
|
|
179
89
|
optionsApiEndPoint,
|
|
@@ -202,7 +112,7 @@ export const SingleSelect = ({
|
|
|
202
112
|
return _.keyBy(options ?? [], getValue ? getValue : (o) => o.value);
|
|
203
113
|
};
|
|
204
114
|
|
|
205
|
-
const
|
|
115
|
+
const initialState: SingleSelectState = {
|
|
206
116
|
open: false,
|
|
207
117
|
loadingInternalOptions: false,
|
|
208
118
|
loadingInitialInternalOptions: false,
|
|
@@ -212,7 +122,9 @@ export const SingleSelect = ({
|
|
|
212
122
|
offset: 0,
|
|
213
123
|
hasMore: true,
|
|
214
124
|
search: null,
|
|
215
|
-
}
|
|
125
|
+
};
|
|
126
|
+
|
|
127
|
+
const [state, dispatch] = useReducer(singleSelectReducer, initialState);
|
|
216
128
|
const {
|
|
217
129
|
open,
|
|
218
130
|
loadingInternalOptions,
|
|
@@ -241,8 +153,10 @@ export const SingleSelect = ({
|
|
|
241
153
|
limit,
|
|
242
154
|
offset,
|
|
243
155
|
dbValueProps: {
|
|
244
|
-
|
|
156
|
+
valueKey: dbValueProps.valueKey,
|
|
245
157
|
...(dbValueProps.isObjectId && { isObjectId: true }),
|
|
158
|
+
...(dbValueProps.isInt && { isInt: true }),
|
|
159
|
+
...(dbValueProps.isFloat && { isFloat: true }),
|
|
246
160
|
selectedValueData: value,
|
|
247
161
|
},
|
|
248
162
|
dbLabelProps,
|
|
@@ -465,6 +379,7 @@ export const SingleSelect = ({
|
|
|
465
379
|
filterBySelectedValues: true,
|
|
466
380
|
},
|
|
467
381
|
dbLabelProps,
|
|
382
|
+
...optionsApiEndpointParams,
|
|
468
383
|
},
|
|
469
384
|
});
|
|
470
385
|
dispatch({
|
|
@@ -0,0 +1,125 @@
|
|
|
1
|
+
import { Reducer } from 'react';
|
|
2
|
+
|
|
3
|
+
export enum SingleSelectActionsTypes {
|
|
4
|
+
OPEN = 'open',
|
|
5
|
+
CLOSE = 'close',
|
|
6
|
+
LOAD_INTERNAL_OPTIONS_START = 'load_internal_options_start',
|
|
7
|
+
LOAD_INTERNAL_OPTIONS_END = 'load_internal_options_end',
|
|
8
|
+
LOAD_SELECTED_OPTIONS_START = 'load_selected_options_start',
|
|
9
|
+
LOAD_SELECTED_OPTIONS_END = 'load_selected_options_end',
|
|
10
|
+
SET_NETWORK_ERROR = 'set_network_error',
|
|
11
|
+
SET_INTERNAL_OPTIONS = 'set_internal_options',
|
|
12
|
+
APPEND_INTERNAL_OPTIONS = 'append_internal_options',
|
|
13
|
+
CHANGE_HAS_MORE_FLAG = 'change_has_more_flag',
|
|
14
|
+
SET_SEARCH = 'set_search',
|
|
15
|
+
CLEAR_SEARCH = 'clear_search',
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
export type Option = {
|
|
19
|
+
label: string;
|
|
20
|
+
subLabel?: string;
|
|
21
|
+
value: any;
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export type SingleSelectState = {
|
|
25
|
+
open: boolean;
|
|
26
|
+
loadingInternalOptions: boolean;
|
|
27
|
+
loadingInitialInternalOptions: boolean;
|
|
28
|
+
internalOptions: Option[];
|
|
29
|
+
internalOptionsMap: { [x: string]: Option };
|
|
30
|
+
limit: number;
|
|
31
|
+
offset: number;
|
|
32
|
+
hasMore: boolean;
|
|
33
|
+
search: string | null;
|
|
34
|
+
error?: any;
|
|
35
|
+
};
|
|
36
|
+
|
|
37
|
+
export type SingleSelectAction = {
|
|
38
|
+
actionType: SingleSelectActionsTypes;
|
|
39
|
+
stateChanges?: Partial<SingleSelectState> & {
|
|
40
|
+
persistOffset?: boolean;
|
|
41
|
+
newOptions?: Option[];
|
|
42
|
+
};
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export const singleSelectReducer: Reducer<
|
|
46
|
+
SingleSelectState,
|
|
47
|
+
SingleSelectAction
|
|
48
|
+
> = (state: SingleSelectState, action: SingleSelectAction) => {
|
|
49
|
+
const { actionType, stateChanges } = action;
|
|
50
|
+
switch (actionType) {
|
|
51
|
+
case SingleSelectActionsTypes.OPEN: {
|
|
52
|
+
return { ...state, open: true };
|
|
53
|
+
}
|
|
54
|
+
case SingleSelectActionsTypes.CLOSE: {
|
|
55
|
+
return {
|
|
56
|
+
...state,
|
|
57
|
+
open: false,
|
|
58
|
+
loadingInternalOptions: false,
|
|
59
|
+
};
|
|
60
|
+
}
|
|
61
|
+
case SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_START: {
|
|
62
|
+
return { ...state, loadingInternalOptions: true };
|
|
63
|
+
}
|
|
64
|
+
case SingleSelectActionsTypes.LOAD_INTERNAL_OPTIONS_END: {
|
|
65
|
+
return { ...state, loadingInternalOptions: false };
|
|
66
|
+
}
|
|
67
|
+
case SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_START: {
|
|
68
|
+
return { ...state, loadingInitialInternalOptions: true };
|
|
69
|
+
}
|
|
70
|
+
case SingleSelectActionsTypes.LOAD_SELECTED_OPTIONS_END: {
|
|
71
|
+
return { ...state, loadingInitialInternalOptions: false };
|
|
72
|
+
}
|
|
73
|
+
case SingleSelectActionsTypes.SET_NETWORK_ERROR: {
|
|
74
|
+
return { ...state, ...stateChanges };
|
|
75
|
+
}
|
|
76
|
+
case SingleSelectActionsTypes.SET_SEARCH: {
|
|
77
|
+
return {
|
|
78
|
+
...state,
|
|
79
|
+
search: stateChanges?.search ?? null,
|
|
80
|
+
hasMore: true,
|
|
81
|
+
};
|
|
82
|
+
}
|
|
83
|
+
case SingleSelectActionsTypes.CLEAR_SEARCH: {
|
|
84
|
+
return {
|
|
85
|
+
...state,
|
|
86
|
+
search: null,
|
|
87
|
+
offset: 0,
|
|
88
|
+
internalOptions: stateChanges?.internalOptions ?? [],
|
|
89
|
+
internalOptionsMap: stateChanges?.internalOptionsMap ?? {},
|
|
90
|
+
};
|
|
91
|
+
}
|
|
92
|
+
case SingleSelectActionsTypes.SET_INTERNAL_OPTIONS: {
|
|
93
|
+
return {
|
|
94
|
+
...state,
|
|
95
|
+
internalOptions: stateChanges?.internalOptions ?? [],
|
|
96
|
+
internalOptionsMap: stateChanges?.internalOptionsMap ?? {},
|
|
97
|
+
loadingInternalOptions: false,
|
|
98
|
+
};
|
|
99
|
+
}
|
|
100
|
+
case SingleSelectActionsTypes.APPEND_INTERNAL_OPTIONS: {
|
|
101
|
+
return {
|
|
102
|
+
...state,
|
|
103
|
+
internalOptions: [
|
|
104
|
+
...state.internalOptions,
|
|
105
|
+
...(stateChanges?.newOptions ?? []),
|
|
106
|
+
],
|
|
107
|
+
internalOptionsMap: {
|
|
108
|
+
...state.internalOptionsMap,
|
|
109
|
+
...stateChanges?.internalOptionsMap,
|
|
110
|
+
},
|
|
111
|
+
loadingInternalOptions: false,
|
|
112
|
+
limit: state.limit,
|
|
113
|
+
offset: state.offset + (stateChanges?.persistOffset ? 0 : 10),
|
|
114
|
+
};
|
|
115
|
+
}
|
|
116
|
+
case SingleSelectActionsTypes.CHANGE_HAS_MORE_FLAG: {
|
|
117
|
+
return {
|
|
118
|
+
...state,
|
|
119
|
+
hasMore: !state.hasMore,
|
|
120
|
+
};
|
|
121
|
+
}
|
|
122
|
+
default:
|
|
123
|
+
return { ...state, ...stateChanges };
|
|
124
|
+
}
|
|
125
|
+
};
|