|
@@ -120,6 +120,7 @@ function ProximoListScreen(props: Props) {
|
120
|
120
|
const theme = useTheme();
|
121
|
121
|
const { articles, setArticles } = useCachedProximoArticles();
|
122
|
122
|
const modalRef = useRef<Modalize>(null);
|
|
123
|
+ const navParams = props.route.params;
|
123
|
124
|
|
124
|
125
|
const [currentSearchString, setCurrentSearchString] = useState('');
|
125
|
126
|
const [currentSortMode, setCurrentSortMode] = useState(2);
|
|
@@ -130,6 +131,70 @@ function ProximoListScreen(props: Props) {
|
130
|
131
|
const sortModes = [sortPrice, sortPriceReverse, sortName, sortNameReverse];
|
131
|
132
|
|
132
|
133
|
useLayoutEffect(() => {
|
|
134
|
+ const getSearchBar = () => {
|
|
135
|
+ return (
|
|
136
|
+ // @ts-ignore
|
|
137
|
+ <Searchbar
|
|
138
|
+ placeholder={i18n.t('screens.proximo.search')}
|
|
139
|
+ onChangeText={setCurrentSearchString}
|
|
140
|
+ autoFocus={navParams.shouldFocusSearchBar}
|
|
141
|
+ />
|
|
142
|
+ );
|
|
143
|
+ };
|
|
144
|
+ const getModalSortMenu = () => {
|
|
145
|
+ return (
|
|
146
|
+ <View style={styles.modalContainer}>
|
|
147
|
+ <Title style={styles.sortTitle}>
|
|
148
|
+ {i18n.t('screens.proximo.sortOrder')}
|
|
149
|
+ </Title>
|
|
150
|
+ <RadioButton.Group
|
|
151
|
+ onValueChange={setSortMode}
|
|
152
|
+ value={currentSortMode.toString()}
|
|
153
|
+ >
|
|
154
|
+ <RadioButton.Item
|
|
155
|
+ label={i18n.t('screens.proximo.sortPrice')}
|
|
156
|
+ value={'0'}
|
|
157
|
+ />
|
|
158
|
+ <RadioButton.Item
|
|
159
|
+ label={i18n.t('screens.proximo.sortPriceReverse')}
|
|
160
|
+ value={'1'}
|
|
161
|
+ />
|
|
162
|
+ <RadioButton.Item
|
|
163
|
+ label={i18n.t('screens.proximo.sortName')}
|
|
164
|
+ value={'2'}
|
|
165
|
+ />
|
|
166
|
+ <RadioButton.Item
|
|
167
|
+ label={i18n.t('screens.proximo.sortNameReverse')}
|
|
168
|
+ value={'3'}
|
|
169
|
+ />
|
|
170
|
+ </RadioButton.Group>
|
|
171
|
+ </View>
|
|
172
|
+ );
|
|
173
|
+ };
|
|
174
|
+ const setSortMode = (mode: string) => {
|
|
175
|
+ const currentMode = parseInt(mode, 10);
|
|
176
|
+ setCurrentSortMode(currentMode);
|
|
177
|
+ if (modalRef.current && currentMode !== currentSortMode) {
|
|
178
|
+ modalRef.current.close();
|
|
179
|
+ }
|
|
180
|
+ };
|
|
181
|
+ const getSortMenuButton = () => {
|
|
182
|
+ return (
|
|
183
|
+ <MaterialHeaderButtons>
|
|
184
|
+ <Item
|
|
185
|
+ title="main"
|
|
186
|
+ iconName="sort"
|
|
187
|
+ onPress={() => {
|
|
188
|
+ setModalCurrentDisplayItem(getModalSortMenu());
|
|
189
|
+ if (modalRef.current) {
|
|
190
|
+ modalRef.current.open();
|
|
191
|
+ }
|
|
192
|
+ }}
|
|
193
|
+ />
|
|
194
|
+ </MaterialHeaderButtons>
|
|
195
|
+ );
|
|
196
|
+ };
|
|
197
|
+
|
133
|
198
|
navigation.setOptions({
|
134
|
199
|
headerRight: getSortMenuButton,
|
135
|
200
|
headerTitle: getSearchBar,
|
|
@@ -137,21 +202,9 @@ function ProximoListScreen(props: Props) {
|
137
|
202
|
headerTitleContainerStyle:
|
138
|
203
|
Platform.OS === 'ios'
|
139
|
204
|
? { marginHorizontal: 0, width: '70%' }
|
140
|
|
- : { marginHorizontal: 0, right: 50, left: 50 },
|
|
205
|
+ : { width: '100%' },
|
141
|
206
|
});
|
142
|
|
- // eslint-disable-next-line react-hooks/exhaustive-deps
|
143
|
|
- }, [navigation, currentSortMode]);
|
144
|
|
-
|
145
|
|
- /**
|
146
|
|
- * Callback used when clicking on the sort menu button.
|
147
|
|
- * It will open the modal to show a sort selection
|
148
|
|
- */
|
149
|
|
- const onSortMenuPress = () => {
|
150
|
|
- setModalCurrentDisplayItem(getModalSortMenu());
|
151
|
|
- if (modalRef.current) {
|
152
|
|
- modalRef.current.open();
|
153
|
|
- }
|
154
|
|
- };
|
|
207
|
+ }, [navigation, currentSortMode, navParams.shouldFocusSearchBar]);
|
155
|
208
|
|
156
|
209
|
/**
|
157
|
210
|
* Callback used when clicking an article in the list.
|
|
@@ -167,19 +220,6 @@ function ProximoListScreen(props: Props) {
|
167
|
220
|
};
|
168
|
221
|
|
169
|
222
|
/**
|
170
|
|
- * Sets the current sort mode.
|
171
|
|
- *
|
172
|
|
- * @param mode The number representing the mode
|
173
|
|
- */
|
174
|
|
- const setSortMode = (mode: string) => {
|
175
|
|
- const currentMode = parseInt(mode, 10);
|
176
|
|
- setCurrentSortMode(currentMode);
|
177
|
|
- if (modalRef.current && currentMode !== currentSortMode) {
|
178
|
|
- modalRef.current.close();
|
179
|
|
- }
|
180
|
|
- };
|
181
|
|
-
|
182
|
|
- /**
|
183
|
223
|
* Gets a color depending on the quantity available
|
184
|
224
|
*
|
185
|
225
|
* @param availableStock The quantity available
|
|
@@ -198,35 +238,6 @@ function ProximoListScreen(props: Props) {
|
198
|
238
|
};
|
199
|
239
|
|
200
|
240
|
/**
|
201
|
|
- * Gets the sort menu header button
|
202
|
|
- *
|
203
|
|
- * @return {*}
|
204
|
|
- */
|
205
|
|
- const getSortMenuButton = () => {
|
206
|
|
- return (
|
207
|
|
- <MaterialHeaderButtons>
|
208
|
|
- <Item title="main" iconName="sort" onPress={onSortMenuPress} />
|
209
|
|
- </MaterialHeaderButtons>
|
210
|
|
- );
|
211
|
|
- };
|
212
|
|
-
|
213
|
|
- /**
|
214
|
|
- * Gets the header search bar
|
215
|
|
- *
|
216
|
|
- * @return {*}
|
217
|
|
- */
|
218
|
|
- const getSearchBar = () => {
|
219
|
|
- return (
|
220
|
|
- // @ts-ignore
|
221
|
|
- <Searchbar
|
222
|
|
- placeholder={i18n.t('screens.proximo.search')}
|
223
|
|
- onChangeText={setCurrentSearchString}
|
224
|
|
- autoFocus={props.route.params.shouldFocusSearchBar}
|
225
|
|
- />
|
226
|
|
- );
|
227
|
|
- };
|
228
|
|
-
|
229
|
|
- /**
|
230
|
241
|
* Gets the modal content depending on the given article
|
231
|
242
|
*
|
232
|
243
|
* @param item The article to display
|
|
@@ -263,42 +274,6 @@ function ProximoListScreen(props: Props) {
|
263
|
274
|
};
|
264
|
275
|
|
265
|
276
|
/**
|
266
|
|
- * Gets the modal content to display a sort menu
|
267
|
|
- *
|
268
|
|
- * @return {*}
|
269
|
|
- */
|
270
|
|
- const getModalSortMenu = () => {
|
271
|
|
- return (
|
272
|
|
- <View style={styles.modalContainer}>
|
273
|
|
- <Title style={styles.sortTitle}>
|
274
|
|
- {i18n.t('screens.proximo.sortOrder')}
|
275
|
|
- </Title>
|
276
|
|
- <RadioButton.Group
|
277
|
|
- onValueChange={setSortMode}
|
278
|
|
- value={currentSortMode.toString()}
|
279
|
|
- >
|
280
|
|
- <RadioButton.Item
|
281
|
|
- label={i18n.t('screens.proximo.sortPrice')}
|
282
|
|
- value={'0'}
|
283
|
|
- />
|
284
|
|
- <RadioButton.Item
|
285
|
|
- label={i18n.t('screens.proximo.sortPriceReverse')}
|
286
|
|
- value={'1'}
|
287
|
|
- />
|
288
|
|
- <RadioButton.Item
|
289
|
|
- label={i18n.t('screens.proximo.sortName')}
|
290
|
|
- value={'2'}
|
291
|
|
- />
|
292
|
|
- <RadioButton.Item
|
293
|
|
- label={i18n.t('screens.proximo.sortNameReverse')}
|
294
|
|
- value={'3'}
|
295
|
|
- />
|
296
|
|
- </RadioButton.Group>
|
297
|
|
- </View>
|
298
|
|
- );
|
299
|
|
- };
|
300
|
|
-
|
301
|
|
- /**
|
302
|
277
|
* Gets a render item for the given article
|
303
|
278
|
*
|
304
|
279
|
* @param item The article to render
|
|
@@ -341,8 +316,8 @@ function ProximoListScreen(props: Props) {
|
341
|
316
|
data: data
|
342
|
317
|
.filter(
|
343
|
318
|
(d) =>
|
344
|
|
- props.route.params.category === -1 ||
|
345
|
|
- props.route.params.category === d.category_id
|
|
319
|
+ navParams.category === -1 ||
|
|
320
|
+ navParams.category === d.category_id
|
346
|
321
|
)
|
347
|
322
|
.sort(sortModes[currentSortMode]),
|
348
|
323
|
keyExtractor: keyExtractor,
|