-
Notifications
You must be signed in to change notification settings - Fork 2.8k
/
index.js
100 lines (86 loc) · 3.53 KB
/
index.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
import lodashGet from 'lodash/get';
import React, {useMemo, useState} from 'react';
import {withOnyx} from 'react-native-onyx';
import _ from 'underscore';
import OptionsSelector from '@components/OptionsSelector';
import useLocalize from '@hooks/useLocalize';
import * as OptionsListUtils from '@libs/OptionsListUtils';
import styles from '@styles/styles';
import CONST from '@src/CONST';
import ONYXKEYS from '@src/ONYXKEYS';
import {defaultProps, propTypes} from './categoryPickerPropTypes';
function CategoryPicker({selectedCategory, policyCategories, policyRecentlyUsedCategories, onSubmit}) {
const {translate} = useLocalize();
const [searchValue, setSearchValue] = useState('');
const policyCategoriesCount = OptionsListUtils.getEnabledCategoriesCount(_.values(policyCategories));
const isCategoriesCountBelowThreshold = policyCategoriesCount < CONST.CATEGORY_LIST_THRESHOLD;
const selectedOptions = useMemo(() => {
if (!selectedCategory) {
return [];
}
return [
{
name: selectedCategory,
enabled: true,
accountID: null,
},
];
}, [selectedCategory]);
const sections = useMemo(() => {
const validPolicyRecentlyUsedCategories = _.filter(policyRecentlyUsedCategories, (p) => !_.isEmpty(p));
const {categoryOptions} = OptionsListUtils.getFilteredOptions(
{},
{},
[],
searchValue,
selectedOptions,
[],
false,
false,
true,
policyCategories,
validPolicyRecentlyUsedCategories,
false,
);
return categoryOptions;
}, [policyCategories, policyRecentlyUsedCategories, searchValue, selectedOptions]);
const initialFocusedIndex = useMemo(() => {
let categoryInitialFocusedIndex = 0;
if (!_.isEmpty(searchValue) || isCategoriesCountBelowThreshold) {
const index = _.findIndex(lodashGet(sections, '[0].data', []), (category) => category.searchText === selectedCategory);
categoryInitialFocusedIndex = index === -1 ? 0 : index;
}
return categoryInitialFocusedIndex;
}, [selectedCategory, searchValue, isCategoriesCountBelowThreshold, sections]);
const headerMessage = OptionsListUtils.getHeaderMessageForNonUserList(lodashGet(sections, '[0].data.length', 0) > 0, searchValue);
const shouldShowTextInput = !isCategoriesCountBelowThreshold;
return (
<OptionsSelector
optionHoveredStyle={styles.hoveredComponentBG}
sectionHeaderStyle={styles.mt5}
sections={sections}
selectedOptions={selectedOptions}
value={searchValue}
initialFocusedIndex={initialFocusedIndex}
headerMessage={headerMessage}
shouldShowTextInput={shouldShowTextInput}
textInputLabel={translate('common.search')}
boldStyle
highlightSelectedOptions
isRowMultilineSupported
onChangeText={setSearchValue}
onSelectRow={onSubmit}
/>
);
}
CategoryPicker.displayName = 'CategoryPicker';
CategoryPicker.propTypes = propTypes;
CategoryPicker.defaultProps = defaultProps;
export default withOnyx({
policyCategories: {
key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_CATEGORIES}${policyID}`,
},
policyRecentlyUsedCategories: {
key: ({policyID}) => `${ONYXKEYS.COLLECTION.POLICY_RECENTLY_USED_CATEGORIES}${policyID}`,
},
})(CategoryPicker);