react-native-input-select 1.1.1 → 1.1.3
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/README.md +18 -0
- package/lib/commonjs/components/CheckBox/index.js +20 -9
- package/lib/commonjs/components/CheckBox/index.js.map +1 -1
- package/lib/commonjs/components/CheckBox/types.js.map +1 -1
- package/lib/commonjs/components/Dropdown/Dropdown.js +4 -2
- package/lib/commonjs/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/commonjs/components/Dropdown/DropdownFlatList.js +34 -6
- package/lib/commonjs/components/Dropdown/DropdownFlatList.js.map +1 -1
- package/lib/commonjs/components/Dropdown/DropdownListItem.js +4 -2
- package/lib/commonjs/components/Dropdown/DropdownListItem.js.map +1 -1
- package/lib/commonjs/components/Dropdown/DropdownSectionList.js +29 -2
- package/lib/commonjs/components/Dropdown/DropdownSectionList.js.map +1 -1
- package/lib/commonjs/components/Dropdown/DropdownSelectedItemsView.js +41 -9
- package/lib/commonjs/components/Dropdown/DropdownSelectedItemsView.js.map +1 -1
- package/lib/commonjs/index.js +64 -16
- package/lib/commonjs/index.js.map +1 -1
- package/lib/commonjs/types/index.types.js.map +1 -1
- package/lib/module/components/CheckBox/index.js +20 -8
- package/lib/module/components/CheckBox/index.js.map +1 -1
- package/lib/module/components/CheckBox/types.js.map +1 -1
- package/lib/module/components/Dropdown/Dropdown.js +4 -2
- package/lib/module/components/Dropdown/Dropdown.js.map +1 -1
- package/lib/module/components/Dropdown/DropdownFlatList.js +32 -6
- package/lib/module/components/Dropdown/DropdownFlatList.js.map +1 -1
- package/lib/module/components/Dropdown/DropdownListItem.js +4 -2
- package/lib/module/components/Dropdown/DropdownListItem.js.map +1 -1
- package/lib/module/components/Dropdown/DropdownSectionList.js +30 -3
- package/lib/module/components/Dropdown/DropdownSectionList.js.map +1 -1
- package/lib/module/components/Dropdown/DropdownSelectedItemsView.js +42 -10
- package/lib/module/components/Dropdown/DropdownSelectedItemsView.js.map +1 -1
- package/lib/module/index.js +65 -17
- package/lib/module/index.js.map +1 -1
- package/lib/module/types/index.types.js.map +1 -1
- package/lib/typescript/components/CheckBox/index.d.ts +17 -5
- package/lib/typescript/components/CheckBox/types.d.ts +2 -0
- package/lib/typescript/components/Dropdown/Dropdown.d.ts +1 -1
- package/lib/typescript/components/Dropdown/DropdownFlatList.d.ts +1 -1
- package/lib/typescript/components/Dropdown/DropdownListItem.d.ts +1 -1
- package/lib/typescript/components/Dropdown/DropdownSectionList.d.ts +1 -1
- package/lib/typescript/components/Dropdown/DropdownSelectedItemsView.d.ts +1 -1
- package/lib/typescript/types/index.types.d.ts +1 -0
- package/package.json +2 -2
- package/src/components/CheckBox/index.tsx +42 -22
- package/src/components/CheckBox/types.ts +2 -0
- package/src/components/Dropdown/Dropdown.tsx +3 -0
- package/src/components/Dropdown/DropdownFlatList.tsx +27 -1
- package/src/components/Dropdown/DropdownListItem.tsx +2 -0
- package/src/components/Dropdown/DropdownSectionList.tsx +30 -1
- package/src/components/Dropdown/DropdownSelectedItemsView.tsx +32 -13
- package/src/index.tsx +64 -18
- package/src/types/index.types.ts +1 -0
|
@@ -13,7 +13,8 @@ const DropdownListItem = _ref => {
|
|
|
13
13
|
checkboxSize,
|
|
14
14
|
checkboxStyle,
|
|
15
15
|
checkboxLabelStyle,
|
|
16
|
-
checkboxComponentStyles
|
|
16
|
+
checkboxComponentStyles,
|
|
17
|
+
checkboxComponent
|
|
17
18
|
} = _ref;
|
|
18
19
|
return /*#__PURE__*/React.createElement(TouchableOpacity, {
|
|
19
20
|
style: styles.listItemContainerStyle,
|
|
@@ -26,7 +27,8 @@ const DropdownListItem = _ref => {
|
|
|
26
27
|
checkboxSize: (checkboxComponentStyles === null || checkboxComponentStyles === void 0 ? void 0 : checkboxComponentStyles.checkboxSize) || checkboxSize,
|
|
27
28
|
checkboxStyle: (checkboxComponentStyles === null || checkboxComponentStyles === void 0 ? void 0 : checkboxComponentStyles.checkboxStyle) || checkboxStyle,
|
|
28
29
|
checkboxLabelStyle: (checkboxComponentStyles === null || checkboxComponentStyles === void 0 ? void 0 : checkboxComponentStyles.checkboxLabelStyle) || checkboxLabelStyle,
|
|
29
|
-
disabled: item.disabled
|
|
30
|
+
disabled: item.disabled,
|
|
31
|
+
checkboxComponent: checkboxComponent
|
|
30
32
|
}));
|
|
31
33
|
};
|
|
32
34
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","memo","TouchableOpacity","StyleSheet","CheckBox","DropdownListItem","_ref","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","checkboxComponentStyles","createElement","style","styles","listItemContainerStyle","onPress","disabled","value","includes","label","create","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"sources":["DropdownListItem.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { TouchableOpacity, StyleSheet } from 'react-native';\nimport CheckBox from '../CheckBox';\n\nconst DropdownListItem = ({\n item,\n optionLabel,\n optionValue,\n isMultiple,\n selectedOption,\n onChange,\n primaryColor,\n checkboxSize,\n checkboxStyle,\n checkboxLabelStyle,\n checkboxComponentStyles,\n}: any) => {\n return (\n <TouchableOpacity\n style={styles.listItemContainerStyle}\n onPress={\n item.disabled ? () => {} : () => onChange(item[optionValue]) // intentionally didn't use the disable property\n }\n >\n <CheckBox\n value={\n isMultiple\n ? selectedOption.includes(item[optionValue])\n : [selectedOption].includes(item[optionValue])\n }\n label={item[optionLabel]}\n onChange={() => onChange(item[optionValue])}\n primaryColor={primaryColor}\n checkboxSize={checkboxComponentStyles?.checkboxSize || checkboxSize}\n checkboxStyle={checkboxComponentStyles?.checkboxStyle || checkboxStyle}\n checkboxLabelStyle={\n checkboxComponentStyles?.checkboxLabelStyle || checkboxLabelStyle\n }\n disabled={item.disabled}\n />\n </TouchableOpacity>\n );\n};\n\nconst styles = StyleSheet.create({\n listItemContainerStyle: {\n paddingHorizontal: 20,\n paddingVertical: 10,\n flexDirection: 'row',\n alignItems: 'center',\n },\n});\n\nexport default memo(DropdownListItem);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,gBAAgB,EAAEC,UAAU,QAAQ,cAAc;AAC3D,OAAOC,QAAQ,MAAM,aAAa;AAElC,MAAMC,gBAAgB,GAAGC,IAAA,
|
|
1
|
+
{"version":3,"names":["React","memo","TouchableOpacity","StyleSheet","CheckBox","DropdownListItem","_ref","item","optionLabel","optionValue","isMultiple","selectedOption","onChange","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","checkboxComponentStyles","checkboxComponent","createElement","style","styles","listItemContainerStyle","onPress","disabled","value","includes","label","create","paddingHorizontal","paddingVertical","flexDirection","alignItems"],"sources":["DropdownListItem.tsx"],"sourcesContent":["import React, { memo } from 'react';\nimport { TouchableOpacity, StyleSheet } from 'react-native';\nimport CheckBox from '../CheckBox';\n\nconst DropdownListItem = ({\n item,\n optionLabel,\n optionValue,\n isMultiple,\n selectedOption,\n onChange,\n primaryColor,\n checkboxSize,\n checkboxStyle,\n checkboxLabelStyle,\n checkboxComponentStyles,\n checkboxComponent,\n}: any) => {\n return (\n <TouchableOpacity\n style={styles.listItemContainerStyle}\n onPress={\n item.disabled ? () => {} : () => onChange(item[optionValue]) // intentionally didn't use the disable property\n }\n >\n <CheckBox\n value={\n isMultiple\n ? selectedOption.includes(item[optionValue])\n : [selectedOption].includes(item[optionValue])\n }\n label={item[optionLabel]}\n onChange={() => onChange(item[optionValue])}\n primaryColor={primaryColor}\n checkboxSize={checkboxComponentStyles?.checkboxSize || checkboxSize}\n checkboxStyle={checkboxComponentStyles?.checkboxStyle || checkboxStyle}\n checkboxLabelStyle={\n checkboxComponentStyles?.checkboxLabelStyle || checkboxLabelStyle\n }\n disabled={item.disabled}\n checkboxComponent={checkboxComponent}\n />\n </TouchableOpacity>\n );\n};\n\nconst styles = StyleSheet.create({\n listItemContainerStyle: {\n paddingHorizontal: 20,\n paddingVertical: 10,\n flexDirection: 'row',\n alignItems: 'center',\n },\n});\n\nexport default memo(DropdownListItem);\n"],"mappings":"AAAA,OAAOA,KAAK,IAAIC,IAAI,QAAQ,OAAO;AACnC,SAASC,gBAAgB,EAAEC,UAAU,QAAQ,cAAc;AAC3D,OAAOC,QAAQ,MAAM,aAAa;AAElC,MAAMC,gBAAgB,GAAGC,IAAA,IAad;EAAA,IAbe;IACxBC,IAAI;IACJC,WAAW;IACXC,WAAW;IACXC,UAAU;IACVC,cAAc;IACdC,QAAQ;IACRC,YAAY;IACZC,YAAY;IACZC,aAAa;IACbC,kBAAkB;IAClBC,uBAAuB;IACvBC;EACG,CAAC,GAAAZ,IAAA;EACJ,oBACEN,KAAA,CAAAmB,aAAA,CAACjB,gBAAgB;IACfkB,KAAK,EAAEC,MAAM,CAACC,sBAAuB;IACrCC,OAAO,EACLhB,IAAI,CAACiB,QAAQ,GAAG,MAAM,CAAC,CAAC,GAAG,MAAMZ,QAAQ,CAACL,IAAI,CAACE,WAAW,CAAC,CAAC,CAAC;EAC9D,gBAEDT,KAAA,CAAAmB,aAAA,CAACf,QAAQ;IACPqB,KAAK,EACHf,UAAU,GACNC,cAAc,CAACe,QAAQ,CAACnB,IAAI,CAACE,WAAW,CAAC,CAAC,GAC1C,CAACE,cAAc,CAAC,CAACe,QAAQ,CAACnB,IAAI,CAACE,WAAW,CAAC,CAChD;IACDkB,KAAK,EAAEpB,IAAI,CAACC,WAAW,CAAE;IACzBI,QAAQ,EAAEA,CAAA,KAAMA,QAAQ,CAACL,IAAI,CAACE,WAAW,CAAC,CAAE;IAC5CI,YAAY,EAAEA,YAAa;IAC3BC,YAAY,EAAE,CAAAG,uBAAuB,aAAvBA,uBAAuB,uBAAvBA,uBAAuB,CAAEH,YAAY,KAAIA,YAAa;IACpEC,aAAa,EAAE,CAAAE,uBAAuB,aAAvBA,uBAAuB,uBAAvBA,uBAAuB,CAAEF,aAAa,KAAIA,aAAc;IACvEC,kBAAkB,EAChB,CAAAC,uBAAuB,aAAvBA,uBAAuB,uBAAvBA,uBAAuB,CAAED,kBAAkB,KAAIA,kBAChD;IACDQ,QAAQ,EAAEjB,IAAI,CAACiB,QAAS;IACxBN,iBAAiB,EAAEA;EAAkB,CACtC,CACe,CAAC;AAEvB,CAAC;AAED,MAAMG,MAAM,GAAGlB,UAAU,CAACyB,MAAM,CAAC;EAC/BN,sBAAsB,EAAE;IACtBO,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,EAAE;IACnBC,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,4BAAe/B,IAAI,CAACI,gBAAgB,CAAC"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
2
|
/* eslint-disable react-native/no-inline-styles */
|
|
3
|
-
import React, { useEffect, useState } from 'react';
|
|
3
|
+
import React, { useEffect, useState, useRef } from 'react';
|
|
4
4
|
import { SectionList, StyleSheet } from 'react-native';
|
|
5
5
|
import DropdownListItem from './DropdownListItem';
|
|
6
6
|
import { ItemSeparatorComponent, ListEmptyComponent, SectionHeaderTitle } from '../Others';
|
|
@@ -21,7 +21,9 @@ const DropdownSectionList = _ref => {
|
|
|
21
21
|
checkboxStyle,
|
|
22
22
|
checkboxLabelStyle,
|
|
23
23
|
checkboxComponentStyles,
|
|
24
|
+
checkboxComponent,
|
|
24
25
|
listComponentStyles,
|
|
26
|
+
listIndex,
|
|
25
27
|
...rest
|
|
26
28
|
} = _ref;
|
|
27
29
|
const [expandedSections, setExpandedSections] = useState(new Set());
|
|
@@ -49,6 +51,23 @@ const DropdownSectionList = _ref => {
|
|
|
49
51
|
return next;
|
|
50
52
|
});
|
|
51
53
|
};
|
|
54
|
+
|
|
55
|
+
/**
|
|
56
|
+
* @description Scroll to item location
|
|
57
|
+
*/
|
|
58
|
+
|
|
59
|
+
const sectionlistRef = useRef(null);
|
|
60
|
+
const scrollToLocation = listIndex => {
|
|
61
|
+
var _sectionlistRef$curre;
|
|
62
|
+
(_sectionlistRef$curre = sectionlistRef.current) === null || _sectionlistRef$curre === void 0 ? void 0 : _sectionlistRef$curre.scrollToLocation({
|
|
63
|
+
sectionIndex: listIndex.sectionIndex,
|
|
64
|
+
animated: true,
|
|
65
|
+
itemIndex: listIndex.itemIndex
|
|
66
|
+
});
|
|
67
|
+
};
|
|
68
|
+
useEffect(() => {
|
|
69
|
+
scrollToLocation(listIndex);
|
|
70
|
+
}, [listIndex]);
|
|
52
71
|
return /*#__PURE__*/React.createElement(SectionList, _extends({
|
|
53
72
|
sections: options,
|
|
54
73
|
extraData: isMultiple ? selectedItems : selectedItem,
|
|
@@ -76,6 +95,7 @@ const DropdownSectionList = _ref => {
|
|
|
76
95
|
checkboxLabelStyle,
|
|
77
96
|
// kept for backwards compatibility
|
|
78
97
|
checkboxComponentStyles,
|
|
98
|
+
checkboxComponent,
|
|
79
99
|
expandedSections
|
|
80
100
|
}),
|
|
81
101
|
renderSectionHeader: _ref2 => {
|
|
@@ -93,7 +113,13 @@ const DropdownSectionList = _ref => {
|
|
|
93
113
|
});
|
|
94
114
|
},
|
|
95
115
|
keyExtractor: (_item, index) => `Options${index}`,
|
|
96
|
-
stickySectionHeadersEnabled: false
|
|
116
|
+
stickySectionHeadersEnabled: false,
|
|
117
|
+
ref: sectionlistRef,
|
|
118
|
+
onScrollToIndexFailed: () => {
|
|
119
|
+
setTimeout(() => {
|
|
120
|
+
scrollToLocation(listIndex);
|
|
121
|
+
}, 500);
|
|
122
|
+
}
|
|
97
123
|
}, rest));
|
|
98
124
|
};
|
|
99
125
|
const _renderItem = (_ref3, props) => {
|
|
@@ -118,7 +144,8 @@ const _renderItem = (_ref3, props) => {
|
|
|
118
144
|
checkboxSize: props.checkboxSize,
|
|
119
145
|
checkboxStyle: props.checkboxStyle,
|
|
120
146
|
checkboxLabelStyle: props.checkboxLabelStyle,
|
|
121
|
-
checkboxComponentStyles: props.checkboxComponentStyles
|
|
147
|
+
checkboxComponentStyles: props.checkboxComponentStyles,
|
|
148
|
+
checkboxComponent: props.checkboxComponent
|
|
122
149
|
});
|
|
123
150
|
};
|
|
124
151
|
const styles = StyleSheet.create({
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useEffect","useState","SectionList","StyleSheet","DropdownListItem","ItemSeparatorComponent","ListEmptyComponent","SectionHeaderTitle","extractPropertyFromArray","DropdownSectionList","_ref","options","optionLabel","optionValue","isMultiple","isSearchable","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","checkboxComponentStyles","listComponentStyles","rest","expandedSections","setExpandedSections","Set","initialState","handleToggleListExpansion","title","expandedSectionsState","next","has","delete","add","createElement","_extends","sections","extraData","initialNumToRender","listEmptyComponentStyle","contentContainerStyle","paddingTop","styles","itemSeparatorStyle","renderItem","item","_renderItem","selectedOption","onChange","renderSectionHeader","_ref2","section","data","length","sectionHeaderStyle","onPress","isExpanded","keyExtractor","_item","index","stickySectionHeadersEnabled","_ref3","props","create"],"sources":["DropdownSectionList.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport React, { useEffect, useState } from 'react';\nimport { SectionList, StyleSheet } from 'react-native';\nimport DropdownListItem from './DropdownListItem';\nimport {\n ItemSeparatorComponent,\n ListEmptyComponent,\n SectionHeaderTitle,\n} from '../Others';\nimport { extractPropertyFromArray } from '../../utils';\n\nconst DropdownSectionList = ({\n options,\n optionLabel,\n optionValue,\n isMultiple,\n isSearchable,\n selectedItems,\n selectedItem,\n handleMultipleSelections,\n handleSingleSelection,\n primaryColor,\n checkboxSize,\n checkboxStyle,\n checkboxLabelStyle,\n checkboxComponentStyles,\n listComponentStyles,\n ...rest\n}: any) => {\n const [expandedSections, setExpandedSections] = useState(new Set());\n\n /**\n * Expand all sections\n */\n useEffect(() => {\n let initialState = new Set(extractPropertyFromArray(options, 'title'));\n setExpandedSections(initialState);\n }, [options]);\n\n /**\n * @param title\n */\n const handleToggleListExpansion = (title: string) => {\n setExpandedSections((expandedSectionsState) => {\n // Using Set here but you can use an array too\n const next = new Set(expandedSectionsState);\n if (next.has(title)) {\n next.delete(title);\n } else {\n next.add(title);\n }\n return next;\n });\n };\n\n return (\n <SectionList\n sections={options}\n extraData={isMultiple ? selectedItems : selectedItem}\n initialNumToRender={5}\n ListEmptyComponent={\n <ListEmptyComponent\n listEmptyComponentStyle={listComponentStyles?.listEmptyComponentStyle}\n />\n }\n contentContainerStyle={[\n isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,\n ]}\n ItemSeparatorComponent={() => (\n <ItemSeparatorComponent\n itemSeparatorStyle={listComponentStyles?.itemSeparatorStyle}\n />\n )}\n renderItem={(item) =>\n _renderItem(item, {\n optionLabel,\n optionValue,\n isMultiple,\n selectedOption: isMultiple ? selectedItems : selectedItem,\n onChange: isMultiple\n ? handleMultipleSelections\n : handleSingleSelection,\n primaryColor,\n checkboxSize, // kept for backwards compatibility\n checkboxStyle, // kept for backwards compatibility\n checkboxLabelStyle, // kept for backwards compatibility\n checkboxComponentStyles,\n expandedSections,\n })\n }\n renderSectionHeader={({ section: { title, data } }) =>\n data.length > 0 && (\n <SectionHeaderTitle\n title={title}\n sectionHeaderStyle={listComponentStyles?.sectionHeaderStyle}\n onPress={() => handleToggleListExpansion(title)}\n isExpanded={expandedSections.has(title)}\n />\n )\n }\n keyExtractor={(_item, index) => `Options${index}`}\n stickySectionHeadersEnabled={false}\n {...rest}\n />\n );\n};\n\nconst _renderItem = ({ section: { title }, item }: any, props: any) => {\n const isExpanded = props?.expandedSections.has(title);\n\n //return null if it is not expanded\n if (!isExpanded) return null;\n\n return (\n <DropdownListItem\n item={item}\n optionLabel={props.optionLabel}\n optionValue={props.optionValue}\n isMultiple={props.isMultiple}\n selectedOption={props.selectedOption}\n onChange={props.onChange}\n primaryColor={props.primaryColor}\n checkboxSize={props.checkboxSize}\n checkboxStyle={props.checkboxStyle}\n checkboxLabelStyle={props.checkboxLabelStyle}\n checkboxComponentStyles={props.checkboxComponentStyles}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n contentContainerStyle: { paddingTop: 20 },\n});\n\nexport default DropdownSectionList;\n"],"mappings":";AAAA;AACA,OAAOA,KAAK,IAAIC,SAAS,EAAEC,QAAQ,QAAQ,OAAO;
|
|
1
|
+
{"version":3,"names":["React","useEffect","useState","useRef","SectionList","StyleSheet","DropdownListItem","ItemSeparatorComponent","ListEmptyComponent","SectionHeaderTitle","extractPropertyFromArray","DropdownSectionList","_ref","options","optionLabel","optionValue","isMultiple","isSearchable","selectedItems","selectedItem","handleMultipleSelections","handleSingleSelection","primaryColor","checkboxSize","checkboxStyle","checkboxLabelStyle","checkboxComponentStyles","checkboxComponent","listComponentStyles","listIndex","rest","expandedSections","setExpandedSections","Set","initialState","handleToggleListExpansion","title","expandedSectionsState","next","has","delete","add","sectionlistRef","scrollToLocation","_sectionlistRef$curre","current","sectionIndex","animated","itemIndex","createElement","_extends","sections","extraData","initialNumToRender","listEmptyComponentStyle","contentContainerStyle","paddingTop","styles","itemSeparatorStyle","renderItem","item","_renderItem","selectedOption","onChange","renderSectionHeader","_ref2","section","data","length","sectionHeaderStyle","onPress","isExpanded","keyExtractor","_item","index","stickySectionHeadersEnabled","ref","onScrollToIndexFailed","setTimeout","_ref3","props","create"],"sources":["DropdownSectionList.tsx"],"sourcesContent":["/* eslint-disable react-native/no-inline-styles */\nimport React, { useEffect, useState, useRef } from 'react';\nimport { SectionList, StyleSheet } from 'react-native';\nimport DropdownListItem from './DropdownListItem';\nimport {\n ItemSeparatorComponent,\n ListEmptyComponent,\n SectionHeaderTitle,\n} from '../Others';\nimport { extractPropertyFromArray } from '../../utils';\nimport { TSectionList } from 'src/types/index.types';\n\nconst DropdownSectionList = ({\n options,\n optionLabel,\n optionValue,\n isMultiple,\n isSearchable,\n selectedItems,\n selectedItem,\n handleMultipleSelections,\n handleSingleSelection,\n primaryColor,\n checkboxSize,\n checkboxStyle,\n checkboxLabelStyle,\n checkboxComponentStyles,\n checkboxComponent,\n listComponentStyles,\n listIndex,\n ...rest\n}: any) => {\n const [expandedSections, setExpandedSections] = useState(new Set());\n\n /**\n * Expand all sections\n */\n useEffect(() => {\n let initialState = new Set(extractPropertyFromArray(options, 'title'));\n setExpandedSections(initialState);\n }, [options]);\n\n /**\n * @param title\n */\n const handleToggleListExpansion = (title: string) => {\n setExpandedSections((expandedSectionsState) => {\n // Using Set here but you can use an array too\n const next = new Set(expandedSectionsState);\n if (next.has(title)) {\n next.delete(title);\n } else {\n next.add(title);\n }\n return next;\n });\n };\n\n /**\n * @description Scroll to item location\n */\n\n const sectionlistRef = useRef<SectionList<TSectionList>>(null);\n\n const scrollToLocation = (listIndex: any) => {\n sectionlistRef.current?.scrollToLocation({\n sectionIndex: listIndex.sectionIndex,\n animated: true,\n itemIndex: listIndex.itemIndex,\n });\n };\n\n useEffect(() => {\n scrollToLocation(listIndex);\n }, [listIndex]);\n\n return (\n <SectionList\n sections={options}\n extraData={isMultiple ? selectedItems : selectedItem}\n initialNumToRender={5}\n ListEmptyComponent={\n <ListEmptyComponent\n listEmptyComponentStyle={listComponentStyles?.listEmptyComponentStyle}\n />\n }\n contentContainerStyle={[\n isSearchable ? { paddingTop: 0 } : styles.contentContainerStyle,\n ]}\n ItemSeparatorComponent={() => (\n <ItemSeparatorComponent\n itemSeparatorStyle={listComponentStyles?.itemSeparatorStyle}\n />\n )}\n renderItem={(item) =>\n _renderItem(item, {\n optionLabel,\n optionValue,\n isMultiple,\n selectedOption: isMultiple ? selectedItems : selectedItem,\n onChange: isMultiple\n ? handleMultipleSelections\n : handleSingleSelection,\n primaryColor,\n checkboxSize, // kept for backwards compatibility\n checkboxStyle, // kept for backwards compatibility\n checkboxLabelStyle, // kept for backwards compatibility\n checkboxComponentStyles,\n checkboxComponent,\n expandedSections,\n })\n }\n renderSectionHeader={({ section: { title, data } }) =>\n data.length > 0 && (\n <SectionHeaderTitle\n title={title}\n sectionHeaderStyle={listComponentStyles?.sectionHeaderStyle}\n onPress={() => handleToggleListExpansion(title)}\n isExpanded={expandedSections.has(title)}\n />\n )\n }\n keyExtractor={(_item, index) => `Options${index}`}\n stickySectionHeadersEnabled={false}\n ref={sectionlistRef}\n onScrollToIndexFailed={() => {\n setTimeout(() => {\n scrollToLocation(listIndex);\n }, 500);\n }}\n {...rest}\n />\n );\n};\n\nconst _renderItem = ({ section: { title }, item }: any, props: any) => {\n const isExpanded = props?.expandedSections.has(title);\n\n //return null if it is not expanded\n if (!isExpanded) return null;\n\n return (\n <DropdownListItem\n item={item}\n optionLabel={props.optionLabel}\n optionValue={props.optionValue}\n isMultiple={props.isMultiple}\n selectedOption={props.selectedOption}\n onChange={props.onChange}\n primaryColor={props.primaryColor}\n checkboxSize={props.checkboxSize}\n checkboxStyle={props.checkboxStyle}\n checkboxLabelStyle={props.checkboxLabelStyle}\n checkboxComponentStyles={props.checkboxComponentStyles}\n checkboxComponent={props.checkboxComponent}\n />\n );\n};\n\nconst styles = StyleSheet.create({\n contentContainerStyle: { paddingTop: 20 },\n});\n\nexport default DropdownSectionList;\n"],"mappings":"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"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
|
+
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
1
2
|
import React from 'react';
|
|
2
|
-
import { View, Text, Pressable, ScrollView, StyleSheet, Image } from 'react-native';
|
|
3
|
+
import { View, Text, Pressable, ScrollView, StyleSheet, Image, TouchableOpacity } from 'react-native';
|
|
3
4
|
import { colors } from '../../styles/colors';
|
|
4
5
|
import { inputStyles } from '../../styles/input';
|
|
5
6
|
const DropdownSelectedItemsView = _ref => {
|
|
@@ -20,7 +21,8 @@ const DropdownSelectedItemsView = _ref => {
|
|
|
20
21
|
multipleSelectedItemStyle,
|
|
21
22
|
dropdownErrorStyle,
|
|
22
23
|
primaryColor,
|
|
23
|
-
disabled
|
|
24
|
+
disabled,
|
|
25
|
+
setIndexOfSelectedItem
|
|
24
26
|
} = _ref;
|
|
25
27
|
return /*#__PURE__*/React.createElement(Pressable, {
|
|
26
28
|
onPress: () => handleToggleModal(),
|
|
@@ -31,7 +33,10 @@ const DropdownSelectedItemsView = _ref => {
|
|
|
31
33
|
return [pressed && {
|
|
32
34
|
...inputStyles.inputFocusState,
|
|
33
35
|
borderColor: primaryColor
|
|
34
|
-
},
|
|
36
|
+
}, {
|
|
37
|
+
...inputStyles.input,
|
|
38
|
+
...dropdownStyle
|
|
39
|
+
}, error &&
|
|
35
40
|
//this must be last
|
|
36
41
|
error !== '' && !pressed && {
|
|
37
42
|
...inputStyles.inputFocusErrorState,
|
|
@@ -46,21 +51,48 @@ const DropdownSelectedItemsView = _ref => {
|
|
|
46
51
|
}, /*#__PURE__*/React.createElement(View, {
|
|
47
52
|
style: styles.selectedItemsContainer,
|
|
48
53
|
onStartShouldSetResponder: () => true
|
|
49
|
-
}, isMultiple ? (_getSelectedItemsLabe = getSelectedItemsLabel()) === null || _getSelectedItemsLabe === void 0 ? void 0 : _getSelectedItemsLabe.map((
|
|
54
|
+
}, isMultiple ? (_getSelectedItemsLabe = getSelectedItemsLabel()) === null || _getSelectedItemsLabe === void 0 ? void 0 : _getSelectedItemsLabe.map((label, i) => /*#__PURE__*/React.createElement(DropdownContent, {
|
|
55
|
+
onPress: () => {
|
|
56
|
+
handleToggleModal();
|
|
57
|
+
setIndexOfSelectedItem(label); // immediately scrolls to list item with the specified label when modal
|
|
58
|
+
},
|
|
59
|
+
|
|
50
60
|
key: `react-native-input-select-${Math.random()}-${i}`,
|
|
51
61
|
style: [styles.selectedItems, {
|
|
52
62
|
backgroundColor: primaryColor
|
|
53
|
-
}, multipleSelectedItemStyle]
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
63
|
+
}, multipleSelectedItemStyle],
|
|
64
|
+
label: label
|
|
65
|
+
})) : /*#__PURE__*/React.createElement(DropdownContent, {
|
|
66
|
+
onPress: () => {
|
|
67
|
+
handleToggleModal();
|
|
68
|
+
setIndexOfSelectedItem(getSelectedItemsLabel()); // immediately scrolls to list item with the specified label when modal
|
|
69
|
+
},
|
|
70
|
+
|
|
71
|
+
style: [styles.blackText, selectedItemStyle],
|
|
72
|
+
label: getSelectedItemsLabel()
|
|
73
|
+
}), !selectedItem && (selectedItems === null || selectedItems === void 0 ? void 0 : selectedItems.length) === 0 && /*#__PURE__*/React.createElement(DropdownContent, {
|
|
74
|
+
onPress: () => handleToggleModal(),
|
|
75
|
+
style: [styles.blackText, placeholderStyle],
|
|
76
|
+
label: placeholder ?? 'Select an option'
|
|
77
|
+
}))), /*#__PURE__*/React.createElement(View, {
|
|
59
78
|
style: [styles.iconStyle, dropdownIconStyle]
|
|
60
79
|
}, dropdownIcon || /*#__PURE__*/React.createElement(Image, {
|
|
61
80
|
source: require('../../asset/arrow-down.png')
|
|
62
81
|
})));
|
|
63
82
|
};
|
|
83
|
+
const DropdownContent = _ref3 => {
|
|
84
|
+
let {
|
|
85
|
+
onPress,
|
|
86
|
+
style,
|
|
87
|
+
label,
|
|
88
|
+
...rest
|
|
89
|
+
} = _ref3;
|
|
90
|
+
return /*#__PURE__*/React.createElement(TouchableOpacity, _extends({
|
|
91
|
+
onPress: () => onPress()
|
|
92
|
+
}, rest), /*#__PURE__*/React.createElement(Text, {
|
|
93
|
+
style: style
|
|
94
|
+
}, label));
|
|
95
|
+
};
|
|
64
96
|
const styles = StyleSheet.create({
|
|
65
97
|
iconStyle: {
|
|
66
98
|
position: 'absolute',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","colors","inputStyles","DropdownSelectedItemsView","_ref","_getSelectedItemsLabe","placeholder","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","dropdownIcon","dropdownStyle","dropdownIconStyle","selectedItemStyle","placeholderStyle","multipleSelectedItemStyle","dropdownErrorStyle","primaryColor","disabled","createElement","onPress","style","_ref2","pressed","inputFocusState","borderColor","input","inputFocusErrorState","horizontal","alwaysBounceHorizontal","showsHorizontalScrollIndicator","styles","selectedItemsContainer","onStartShouldSetResponder","map","
|
|
1
|
+
{"version":3,"names":["React","View","Text","Pressable","ScrollView","StyleSheet","Image","TouchableOpacity","colors","inputStyles","DropdownSelectedItemsView","_ref","_getSelectedItemsLabe","placeholder","error","getSelectedItemsLabel","handleToggleModal","isMultiple","selectedItem","selectedItems","dropdownIcon","dropdownStyle","dropdownIconStyle","selectedItemStyle","placeholderStyle","multipleSelectedItemStyle","dropdownErrorStyle","primaryColor","disabled","setIndexOfSelectedItem","createElement","onPress","style","_ref2","pressed","inputFocusState","borderColor","input","inputFocusErrorState","horizontal","alwaysBounceHorizontal","showsHorizontalScrollIndicator","styles","selectedItemsContainer","onStartShouldSetResponder","map","label","i","DropdownContent","key","Math","random","backgroundColor","blackText","length","iconStyle","source","require","_ref3","rest","_extends","create","position","right","top","flexDirection","flexWrap","alignItems","color","white","paddingHorizontal","paddingVertical","borderRadius","primary","marginRight","overflow","black"],"sources":["DropdownSelectedItemsView.tsx"],"sourcesContent":["import React from 'react';\nimport {\n View,\n Text,\n Pressable,\n ScrollView,\n StyleSheet,\n Image,\n TouchableOpacity,\n} from 'react-native';\nimport { colors } from '../../styles/colors';\nimport { inputStyles } from '../../styles/input';\n\nconst DropdownSelectedItemsView = ({\n placeholder,\n error,\n getSelectedItemsLabel,\n handleToggleModal,\n isMultiple,\n selectedItem,\n selectedItems,\n dropdownIcon,\n dropdownStyle,\n dropdownIconStyle,\n selectedItemStyle,\n placeholderStyle,\n multipleSelectedItemStyle,\n dropdownErrorStyle,\n primaryColor,\n disabled,\n setIndexOfSelectedItem,\n}: any) => {\n return (\n <Pressable\n onPress={() => handleToggleModal()}\n style={({ pressed }) => [\n pressed && {\n ...inputStyles.inputFocusState,\n borderColor: primaryColor,\n },\n { ...inputStyles.input, ...dropdownStyle },\n error && //this must be last\n error !== '' &&\n !pressed && {\n ...inputStyles.inputFocusErrorState,\n ...dropdownErrorStyle,\n },\n ]}\n disabled={disabled}\n >\n <ScrollView\n horizontal\n alwaysBounceHorizontal\n showsHorizontalScrollIndicator={false}\n >\n <View\n style={styles.selectedItemsContainer}\n onStartShouldSetResponder={() => true}\n >\n {isMultiple ? (\n getSelectedItemsLabel()?.map((label: string, i: Number) => (\n <DropdownContent\n onPress={() => {\n handleToggleModal();\n setIndexOfSelectedItem(label); // immediately scrolls to list item with the specified label when modal\n }}\n key={`react-native-input-select-${Math.random()}-${i}`}\n style={[\n styles.selectedItems,\n { backgroundColor: primaryColor },\n multipleSelectedItemStyle,\n ]}\n label={label}\n />\n ))\n ) : (\n <DropdownContent\n onPress={() => {\n handleToggleModal();\n setIndexOfSelectedItem(getSelectedItemsLabel()); // immediately scrolls to list item with the specified label when modal\n }}\n style={[styles.blackText, selectedItemStyle]}\n label={getSelectedItemsLabel()}\n />\n )}\n {!selectedItem && selectedItems?.length === 0 && (\n <DropdownContent\n onPress={() => handleToggleModal()}\n style={[styles.blackText, placeholderStyle]}\n label={placeholder ?? 'Select an option'}\n />\n )}\n </View>\n </ScrollView>\n <View style={[styles.iconStyle, dropdownIconStyle]}>\n {dropdownIcon || (\n <Image source={require('../../asset/arrow-down.png')} />\n )}\n </View>\n </Pressable>\n );\n};\n\nconst DropdownContent = ({ onPress, style, label, ...rest }: any) => {\n return (\n <TouchableOpacity onPress={() => onPress()} {...rest}>\n <Text style={style}>{label}</Text>\n </TouchableOpacity>\n );\n};\n\nconst styles = StyleSheet.create({\n iconStyle: { position: 'absolute', right: 25, top: 25 },\n selectedItemsContainer: {\n flexDirection: 'row',\n flexWrap: 'nowrap',\n alignItems: 'center',\n },\n selectedItems: {\n color: colors.white,\n paddingHorizontal: 10,\n paddingVertical: 5,\n borderRadius: 10,\n backgroundColor: colors.primary,\n marginRight: 10,\n overflow: 'hidden',\n },\n blackText: { color: colors.black },\n});\n\nexport default DropdownSelectedItemsView;\n"],"mappings":"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"}
|
package/lib/module/index.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
2
|
-
import React, { useState, useEffect } from 'react';
|
|
2
|
+
import React, { useState, useEffect, useCallback } from 'react';
|
|
3
3
|
import { TouchableOpacity, StyleSheet, View } from 'react-native';
|
|
4
4
|
import Input from './components/Input';
|
|
5
5
|
import CheckBox from './components/CheckBox';
|
|
@@ -46,6 +46,7 @@ export const DropdownSelect = _ref => {
|
|
|
46
46
|
checkboxLabelStyle,
|
|
47
47
|
// kept for backwards compatibility
|
|
48
48
|
checkboxComponentStyles,
|
|
49
|
+
checkboxComponent,
|
|
49
50
|
listHeaderComponent,
|
|
50
51
|
listFooterComponent,
|
|
51
52
|
listComponentStyles,
|
|
@@ -56,9 +57,13 @@ export const DropdownSelect = _ref => {
|
|
|
56
57
|
const [newOptions, setNewOptions] = useState([]);
|
|
57
58
|
const [open, setOpen] = useState(false);
|
|
58
59
|
const [selectAll, setSelectAll] = useState(false);
|
|
59
|
-
const [selectedItem, setSelectedItem] = useState(''); //for single selection
|
|
60
|
-
const [selectedItems, setSelectedItems] = useState([]); //for multiple selection
|
|
60
|
+
const [selectedItem, setSelectedItem] = useState(''); // for single selection
|
|
61
|
+
const [selectedItems, setSelectedItems] = useState([]); // for multiple selection
|
|
61
62
|
const [searchValue, setSearchValue] = useState('');
|
|
63
|
+
const [listIndex, setListIndex] = useState({
|
|
64
|
+
itemIndex: 0
|
|
65
|
+
}); // for scrollToIndex in Sectionlist and Flatlist
|
|
66
|
+
|
|
62
67
|
useEffect(() => {
|
|
63
68
|
if (options) {
|
|
64
69
|
setNewOptions(options);
|
|
@@ -76,10 +81,11 @@ export const DropdownSelect = _ref => {
|
|
|
76
81
|
|
|
77
82
|
const isSectionList = newOptions.some(item => item.title && item.data && Array.isArray(item.data));
|
|
78
83
|
const ListTypeComponent = isSectionList ? DropdownSectionList : DropdownFlatList;
|
|
79
|
-
|
|
80
|
-
|
|
84
|
+
const modifiedSectionData = extractPropertyFromArray(newOptions, 'data').flat();
|
|
85
|
+
const modifiedOptions = isSectionList ? modifiedSectionData : newOptions;
|
|
81
86
|
const optLabel = optionLabel || DEFAULT_OPTION_LABEL;
|
|
82
87
|
const optValue = optionValue || DEFAULT_OPTION_VALUE;
|
|
88
|
+
const optionsCopy = JSON.parse(JSON.stringify(options)); //copy of the original options array
|
|
83
89
|
|
|
84
90
|
/*===========================================
|
|
85
91
|
* Selection handlers
|
|
@@ -104,15 +110,7 @@ export const DropdownSelect = _ref => {
|
|
|
104
110
|
} else {
|
|
105
111
|
selectedValues.push(value);
|
|
106
112
|
}
|
|
107
|
-
setSelectedItems(selectedValues);
|
|
108
113
|
onValueChange(selectedValues); //send value to parent
|
|
109
|
-
|
|
110
|
-
//select all checkbox should not be checked if the list contains disabled values
|
|
111
|
-
if (modifiedOptions.filter(item => !item.disabled).length === selectedValues.length) {
|
|
112
|
-
setSelectAll(true);
|
|
113
|
-
} else {
|
|
114
|
-
setSelectAll(false);
|
|
115
|
-
}
|
|
116
114
|
return selectedValues;
|
|
117
115
|
});
|
|
118
116
|
};
|
|
@@ -133,6 +131,26 @@ export const DropdownSelect = _ref => {
|
|
|
133
131
|
});
|
|
134
132
|
};
|
|
135
133
|
|
|
134
|
+
/*===========================================
|
|
135
|
+
* Handle side effects
|
|
136
|
+
*==========================================*/
|
|
137
|
+
const checkSelectAll = useCallback(selectedValues => {
|
|
138
|
+
//if the list contains disabled values, those values will not be selected
|
|
139
|
+
if (modifiedOptions.filter(item => !item.disabled).length === selectedValues.length) {
|
|
140
|
+
setSelectAll(true);
|
|
141
|
+
} else {
|
|
142
|
+
setSelectAll(false);
|
|
143
|
+
}
|
|
144
|
+
}, [modifiedOptions]);
|
|
145
|
+
|
|
146
|
+
// anytime the selected items change, check if it is time to set `selectAll` to true
|
|
147
|
+
useEffect(() => {
|
|
148
|
+
if (isMultiple) {
|
|
149
|
+
checkSelectAll(selectedItems);
|
|
150
|
+
}
|
|
151
|
+
return () => {};
|
|
152
|
+
}, [checkSelectAll, isMultiple, selectedItems]);
|
|
153
|
+
|
|
136
154
|
/*===========================================
|
|
137
155
|
* Get label handler
|
|
138
156
|
*==========================================*/
|
|
@@ -159,7 +177,6 @@ export const DropdownSelect = _ref => {
|
|
|
159
177
|
const regexFilter = new RegExp(searchText, 'i');
|
|
160
178
|
|
|
161
179
|
//Because Search mutates the initial state, we have to search with a copy of the original array
|
|
162
|
-
const optionsCopy = JSON.parse(JSON.stringify(options));
|
|
163
180
|
const searchResults = isSectionList ? searchSectionList(optionsCopy, regexFilter) : searchFlatList(optionsCopy, regexFilter);
|
|
164
181
|
setNewOptions(searchResults);
|
|
165
182
|
};
|
|
@@ -192,6 +209,10 @@ export const DropdownSelect = _ref => {
|
|
|
192
209
|
setOpen(!open);
|
|
193
210
|
setSearchValue('');
|
|
194
211
|
setNewOptions(options);
|
|
212
|
+
setListIndex({
|
|
213
|
+
itemIndex: 0,
|
|
214
|
+
sectionIndex: 0
|
|
215
|
+
});
|
|
195
216
|
};
|
|
196
217
|
useEffect(() => {
|
|
197
218
|
if (hideModal) {
|
|
@@ -202,6 +223,29 @@ export const DropdownSelect = _ref => {
|
|
|
202
223
|
let primary = primaryColor || colors.gray;
|
|
203
224
|
const sectionListMaxLength = getMaxLengthOfSectionListProperty(newOptions, 'data');
|
|
204
225
|
const listIsEmpty = isSectionList ? sectionListMaxLength > 1 : newOptions.length > 1;
|
|
226
|
+
|
|
227
|
+
/*===========================================
|
|
228
|
+
* setIndexOfSelectedItem - For ScrollToIndex
|
|
229
|
+
*==========================================*/
|
|
230
|
+
const setIndexOfSelectedItem = selectedLabel => {
|
|
231
|
+
isSectionList ? optionsCopy.map((item, sectionIndex) => {
|
|
232
|
+
var _item$data;
|
|
233
|
+
(_item$data = item.data) === null || _item$data === void 0 ? void 0 : _item$data.find((dataItem, itemIndex) => {
|
|
234
|
+
if (dataItem[optLabel] === selectedLabel) {
|
|
235
|
+
setListIndex({
|
|
236
|
+
sectionIndex,
|
|
237
|
+
itemIndex
|
|
238
|
+
});
|
|
239
|
+
}
|
|
240
|
+
});
|
|
241
|
+
}) : optionsCopy === null || optionsCopy === void 0 ? void 0 : optionsCopy.find((item, itemIndex) => {
|
|
242
|
+
if (item[optLabel] === selectedLabel) {
|
|
243
|
+
setListIndex({
|
|
244
|
+
itemIndex
|
|
245
|
+
});
|
|
246
|
+
}
|
|
247
|
+
});
|
|
248
|
+
};
|
|
205
249
|
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Dropdown, _extends({
|
|
206
250
|
label: label,
|
|
207
251
|
placeholder: placeholder,
|
|
@@ -224,7 +268,8 @@ export const DropdownSelect = _ref => {
|
|
|
224
268
|
isMultiple: isMultiple,
|
|
225
269
|
primaryColor: primary,
|
|
226
270
|
disabled: disabled,
|
|
227
|
-
placeholderStyle: placeholderStyle
|
|
271
|
+
placeholderStyle: placeholderStyle,
|
|
272
|
+
setIndexOfSelectedItem: setIndexOfSelectedItem
|
|
228
273
|
}, rest)), /*#__PURE__*/React.createElement(CustomModal, {
|
|
229
274
|
open: open,
|
|
230
275
|
handleToggleModal: handleToggleModal,
|
|
@@ -250,7 +295,8 @@ export const DropdownSelect = _ref => {
|
|
|
250
295
|
checkboxSize: checkboxSize,
|
|
251
296
|
checkboxStyle: checkboxStyle,
|
|
252
297
|
checkboxLabelStyle: checkboxLabelStyle,
|
|
253
|
-
checkboxComponentStyles: checkboxComponentStyles
|
|
298
|
+
checkboxComponentStyles: checkboxComponentStyles,
|
|
299
|
+
checkboxComponent: checkboxComponent
|
|
254
300
|
})))),
|
|
255
301
|
ListFooterComponent: listFooterComponent,
|
|
256
302
|
listComponentStyles: listComponentStyles,
|
|
@@ -267,7 +313,9 @@ export const DropdownSelect = _ref => {
|
|
|
267
313
|
checkboxSize: checkboxSize,
|
|
268
314
|
checkboxStyle: checkboxStyle,
|
|
269
315
|
checkboxLabelStyle: checkboxLabelStyle,
|
|
270
|
-
checkboxComponentStyles: checkboxComponentStyles
|
|
316
|
+
checkboxComponentStyles: checkboxComponentStyles,
|
|
317
|
+
checkboxComponent: checkboxComponent,
|
|
318
|
+
listIndex: listIndex
|
|
271
319
|
})));
|
|
272
320
|
};
|
|
273
321
|
const styles = StyleSheet.create({
|
package/lib/module/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":["React","useState","useEffect","TouchableOpacity","StyleSheet","View","Input","CheckBox","Dropdown","DropdownFlatList","DropdownSectionList","CustomModal","colors","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","extractPropertyFromArray","getMaxLengthOfSectionListProperty","DropdownSelect","_ref","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","dropdownIcon","labelStyle","placeholderStyle","dropdownStyle","dropdownIconStyle","dropdownContainerStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainerStyle","searchInputStyle","primaryColor","disabled","checkboxSize","checkboxStyle","checkboxLabelStyle","checkboxComponentStyles","listHeaderComponent","listFooterComponent","listComponentStyles","modalProps","hideModal","rest","newOptions","setNewOptions","open","setOpen","selectAll","setSelectAll","selectedItem","setSelectedItem","selectedItems","setSelectedItems","searchValue","setSearchValue","Array","isArray","isSectionList","some","item","title","data","ListTypeComponent","modifiedSectionData","flat","modifiedOptions","optLabel","optValue","handleSingleSelection","value","handleMultipleSelections","prevVal","_selectedValues","selectedValues","includes","filter","push","length","handleSelectAll","filteredOptions","i","getSelectedItemsLabel","selectedLabels","forEach","element","_modifiedOptions$find","selectedItemLabel","find","onSearch","searchText","toString","toLocaleLowerCase","trim","regexFilter","RegExp","optionsCopy","JSON","parse","stringify","searchResults","searchSectionList","searchFlatList","flatList","toLowerCase","search","sectionList","map","listItem","handleToggleModal","primary","gray","sectionListMaxLength","listIsEmpty","createElement","Fragment","_extends","onRequestClose","ListHeaderComponent","onChangeText","text","style","styles","optionsContainerStyle","onPress","onChange","ListFooterComponent","create","paddingHorizontal","paddingVertical","flexDirection"],"sources":["index.tsx"],"sourcesContent":["import React, { useState, useEffect } from 'react';\nimport { TouchableOpacity, StyleSheet, View } from 'react-native';\nimport Input from './components/Input';\nimport CheckBox from './components/CheckBox';\nimport Dropdown from './components/Dropdown/Dropdown';\nimport DropdownFlatList from './components/Dropdown/DropdownFlatList';\nimport DropdownSectionList from './components/Dropdown/DropdownSectionList';\nimport CustomModal from './components/CustomModal';\nimport { colors } from './styles/colors';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport type {\n DropdownProps,\n TFlatList,\n TFlatListItem,\n TSectionList,\n TSectionListItem,\n} from './types/index.types';\nimport {\n extractPropertyFromArray,\n getMaxLengthOfSectionListProperty,\n} from './utils';\n\nexport const DropdownSelect: React.FC<DropdownProps> = ({\n placeholder,\n label,\n error,\n helperText,\n options,\n optionLabel,\n optionValue,\n onValueChange,\n selectedValue,\n isMultiple,\n isSearchable,\n dropdownIcon,\n labelStyle,\n placeholderStyle,\n dropdownStyle,\n dropdownIconStyle,\n dropdownContainerStyle,\n dropdownErrorStyle,\n dropdownErrorTextStyle,\n dropdownHelperTextStyle,\n selectedItemStyle,\n multipleSelectedItemStyle,\n modalBackgroundStyle,\n modalOptionsContainerStyle,\n searchInputStyle,\n primaryColor,\n disabled,\n checkboxSize, // kept for backwards compatibility\n checkboxStyle, // kept for backwards compatibility\n checkboxLabelStyle, // kept for backwards compatibility\n checkboxComponentStyles,\n listHeaderComponent,\n listFooterComponent,\n listComponentStyles,\n modalProps,\n hideModal = false,\n ...rest\n}) => {\n const [newOptions, setNewOptions] = useState<TFlatList | TSectionList>([]);\n const [open, setOpen] = useState<boolean>(false);\n const [selectAll, setSelectAll] = useState<boolean>(false);\n const [selectedItem, setSelectedItem] = useState<any>(''); //for single selection\n const [selectedItems, setSelectedItems] = useState<any[]>([]); //for multiple selection\n const [searchValue, setSearchValue] = useState<string>('');\n\n useEffect(() => {\n if (options) {\n setNewOptions(options);\n }\n return () => {};\n }, [options]);\n\n useEffect(() => {\n isMultiple\n ? setSelectedItems(Array.isArray(selectedValue) ? selectedValue : [])\n : setSelectedItem(selectedValue);\n\n return () => {};\n }, [selectedValue, isMultiple, onValueChange]);\n\n /*===========================================\n * List type\n *==========================================*/\n\n const isSectionList = newOptions.some(\n (item) => item.title && item.data && Array.isArray(item.data)\n );\n\n const ListTypeComponent = isSectionList\n ? DropdownSectionList\n : DropdownFlatList;\n let modifiedSectionData = extractPropertyFromArray(newOptions, 'data').flat();\n let modifiedOptions = isSectionList ? modifiedSectionData : newOptions;\n\n const optLabel = optionLabel || DEFAULT_OPTION_LABEL;\n const optValue = optionValue || DEFAULT_OPTION_VALUE;\n\n /*===========================================\n * Selection handlers\n *==========================================*/\n const handleSingleSelection = (value: string | number) => {\n if (selectedItem === value) {\n setSelectedItem(null);\n onValueChange(null); //send value to parent\n } else {\n setSelectedItem(value);\n onValueChange(value); //send value to parent\n setOpen(false); //close modal upon selection\n }\n };\n\n const handleMultipleSelections = (value: string[] | number[]) => {\n setSelectedItems((prevVal) => {\n let selectedValues = [...prevVal];\n\n if (selectedValues?.includes(value)) {\n selectedValues = selectedValues.filter((item) => item !== value);\n } else {\n selectedValues.push(value);\n }\n\n setSelectedItems(selectedValues);\n onValueChange(selectedValues); //send value to parent\n\n //select all checkbox should not be checked if the list contains disabled values\n if (\n modifiedOptions.filter((item: TFlatListItem) => !item.disabled)\n .length === selectedValues.length\n ) {\n setSelectAll(true);\n } else {\n setSelectAll(false);\n }\n return selectedValues;\n });\n };\n\n const handleSelectAll = () => {\n setSelectAll((prevVal) => {\n const selectedValues = [];\n\n //don't select disabled items\n const filteredOptions = modifiedOptions.filter(\n (item: TFlatListItem) => !item.disabled\n );\n\n if (!prevVal) {\n for (let i = 0; i < filteredOptions.length; i++) {\n selectedValues.push(filteredOptions[i][optValue]);\n }\n }\n\n setSelectedItems(selectedValues);\n onValueChange(selectedValues); //send value to parent\n return !prevVal;\n });\n };\n\n /*===========================================\n * Get label handler\n *==========================================*/\n const getSelectedItemsLabel = () => {\n if (isMultiple && Array.isArray(selectedItems)) {\n let selectedLabels: Array<string> = [];\n\n selectedItems?.forEach((element: number | string) => {\n let selectedItemLabel = modifiedOptions?.find(\n (item: TFlatListItem) => item[optValue] === element\n )?.[optLabel];\n selectedLabels.push(selectedItemLabel);\n });\n return selectedLabels;\n }\n\n let selectedItemLabel = modifiedOptions?.find(\n (item: TFlatListItem) => item[optValue] === selectedItem\n );\n return selectedItemLabel?.[optLabel];\n };\n\n /*===========================================\n * Search\n *==========================================*/\n const onSearch = (value: string) => {\n setSearchValue(value);\n\n let searchText = value.toString().toLocaleLowerCase().trim();\n\n const regexFilter = new RegExp(searchText, 'i');\n\n //Because Search mutates the initial state, we have to search with a copy of the original array\n const optionsCopy = JSON.parse(JSON.stringify(options));\n const searchResults = isSectionList\n ? searchSectionList(optionsCopy as TSectionList, regexFilter)\n : searchFlatList(optionsCopy as TFlatList, regexFilter);\n\n setNewOptions(searchResults);\n };\n\n const searchFlatList = (flatList: TFlatList, regexFilter: RegExp) => {\n const searchResults = flatList.filter((item: TFlatListItem) => {\n if (\n item[optLabel].toString().toLowerCase().search(regexFilter) !== -1 ||\n item[optValue].toString().toLowerCase().search(regexFilter) !== -1\n ) {\n return item;\n }\n return;\n });\n return searchResults;\n };\n\n const searchSectionList = (\n sectionList: TSectionList,\n regexFilter: RegExp\n ) => {\n const searchResults = sectionList.map((listItem: TSectionListItem) => {\n listItem.data = listItem.data.filter((item: TFlatListItem) => {\n if (\n item[optLabel].toString().toLowerCase().search(regexFilter) !== -1 ||\n item[optValue].toString().toLowerCase().search(regexFilter) !== -1\n ) {\n return listItem.data.push(item);\n }\n return;\n });\n\n return listItem;\n });\n\n return searchResults;\n };\n\n /*===========================================\n * Modal\n *==========================================*/\n const handleToggleModal = () => {\n setOpen(!open);\n setSearchValue('');\n setNewOptions(options);\n };\n\n useEffect(() => {\n if (hideModal) {\n setOpen(false);\n }\n return () => {};\n }, [hideModal]);\n\n let primary = primaryColor || colors.gray;\n\n const sectionListMaxLength = getMaxLengthOfSectionListProperty(\n newOptions as TSectionList,\n 'data'\n );\n\n const listIsEmpty = isSectionList\n ? sectionListMaxLength > 1\n : newOptions.length > 1;\n\n return (\n <>\n <Dropdown\n label={label}\n placeholder={placeholder}\n helperText={helperText}\n error={error}\n getSelectedItemsLabel={getSelectedItemsLabel}\n selectedItem={selectedItem}\n selectedItems={selectedItems}\n handleToggleModal={handleToggleModal}\n labelStyle={labelStyle}\n dropdownIcon={dropdownIcon}\n dropdownStyle={dropdownStyle}\n dropdownIconStyle={dropdownIconStyle}\n dropdownContainerStyle={dropdownContainerStyle}\n dropdownErrorStyle={dropdownErrorStyle}\n dropdownErrorTextStyle={dropdownErrorTextStyle}\n dropdownHelperTextStyle={dropdownHelperTextStyle}\n selectedItemStyle={selectedItemStyle}\n multipleSelectedItemStyle={multipleSelectedItemStyle}\n isMultiple={isMultiple}\n primaryColor={primary}\n disabled={disabled}\n placeholderStyle={placeholderStyle}\n {...rest}\n />\n <CustomModal\n open={open}\n handleToggleModal={handleToggleModal}\n modalBackgroundStyle={modalBackgroundStyle}\n modalOptionsContainerStyle={modalOptionsContainerStyle}\n onRequestClose={() => {}}\n modalProps={modalProps}\n >\n <ListTypeComponent\n ListHeaderComponent={\n <>\n {isSearchable && (\n <Input\n value={searchValue}\n onChangeText={(text: string) => onSearch(text)}\n style={searchInputStyle}\n primaryColor={primary}\n />\n )}\n {listHeaderComponent}\n {isMultiple && listIsEmpty && (\n <View style={styles.optionsContainerStyle}>\n <TouchableOpacity onPress={() => {}}>\n <CheckBox\n value={selectAll}\n label={selectAll ? 'Clear all' : 'Select all'}\n onChange={() => handleSelectAll()}\n primaryColor={primary}\n checkboxSize={checkboxSize}\n checkboxStyle={checkboxStyle}\n checkboxLabelStyle={checkboxLabelStyle}\n checkboxComponentStyles={checkboxComponentStyles}\n />\n </TouchableOpacity>\n </View>\n )}\n </>\n }\n ListFooterComponent={listFooterComponent}\n listComponentStyles={listComponentStyles}\n options={newOptions}\n optionLabel={optLabel}\n optionValue={optValue}\n isMultiple={isMultiple}\n isSearchable={isSearchable}\n selectedItems={selectedItems}\n selectedItem={selectedItem}\n handleMultipleSelections={handleMultipleSelections}\n handleSingleSelection={handleSingleSelection}\n primaryColor={primary}\n checkboxSize={checkboxSize}\n checkboxStyle={checkboxStyle}\n checkboxLabelStyle={checkboxLabelStyle}\n checkboxComponentStyles={checkboxComponentStyles}\n />\n </CustomModal>\n </>\n );\n};\n\nconst styles = StyleSheet.create({\n optionsContainerStyle: {\n paddingHorizontal: 20,\n paddingVertical: 10,\n flexDirection: 'row',\n },\n});\n\nexport default DropdownSelect;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"names":["React","useState","useEffect","useCallback","TouchableOpacity","StyleSheet","View","Input","CheckBox","Dropdown","DropdownFlatList","DropdownSectionList","CustomModal","colors","DEFAULT_OPTION_LABEL","DEFAULT_OPTION_VALUE","extractPropertyFromArray","getMaxLengthOfSectionListProperty","DropdownSelect","_ref","placeholder","label","error","helperText","options","optionLabel","optionValue","onValueChange","selectedValue","isMultiple","isSearchable","dropdownIcon","labelStyle","placeholderStyle","dropdownStyle","dropdownIconStyle","dropdownContainerStyle","dropdownErrorStyle","dropdownErrorTextStyle","dropdownHelperTextStyle","selectedItemStyle","multipleSelectedItemStyle","modalBackgroundStyle","modalOptionsContainerStyle","searchInputStyle","primaryColor","disabled","checkboxSize","checkboxStyle","checkboxLabelStyle","checkboxComponentStyles","checkboxComponent","listHeaderComponent","listFooterComponent","listComponentStyles","modalProps","hideModal","rest","newOptions","setNewOptions","open","setOpen","selectAll","setSelectAll","selectedItem","setSelectedItem","selectedItems","setSelectedItems","searchValue","setSearchValue","listIndex","setListIndex","itemIndex","Array","isArray","isSectionList","some","item","title","data","ListTypeComponent","modifiedSectionData","flat","modifiedOptions","optLabel","optValue","optionsCopy","JSON","parse","stringify","handleSingleSelection","value","handleMultipleSelections","prevVal","_selectedValues","selectedValues","includes","filter","push","handleSelectAll","filteredOptions","i","length","checkSelectAll","getSelectedItemsLabel","selectedLabels","forEach","element","_modifiedOptions$find","selectedItemLabel","find","onSearch","searchText","toString","toLocaleLowerCase","trim","regexFilter","RegExp","searchResults","searchSectionList","searchFlatList","flatList","toLowerCase","search","sectionList","map","listItem","handleToggleModal","sectionIndex","primary","gray","sectionListMaxLength","listIsEmpty","setIndexOfSelectedItem","selectedLabel","_item$data","dataItem","createElement","Fragment","_extends","onRequestClose","ListHeaderComponent","onChangeText","text","style","styles","optionsContainerStyle","onPress","onChange","ListFooterComponent","create","paddingHorizontal","paddingVertical","flexDirection"],"sources":["index.tsx"],"sourcesContent":["import React, { useState, useEffect, useCallback } from 'react';\nimport { TouchableOpacity, StyleSheet, View } from 'react-native';\nimport Input from './components/Input';\nimport CheckBox from './components/CheckBox';\nimport Dropdown from './components/Dropdown/Dropdown';\nimport DropdownFlatList from './components/Dropdown/DropdownFlatList';\nimport DropdownSectionList from './components/Dropdown/DropdownSectionList';\nimport CustomModal from './components/CustomModal';\nimport { colors } from './styles/colors';\nimport { DEFAULT_OPTION_LABEL, DEFAULT_OPTION_VALUE } from './constants';\nimport type {\n DropdownProps,\n TFlatList,\n TFlatListItem,\n TSectionList,\n TSectionListItem,\n} from './types/index.types';\nimport {\n extractPropertyFromArray,\n getMaxLengthOfSectionListProperty,\n} from './utils';\n\nexport const DropdownSelect: React.FC<DropdownProps> = ({\n placeholder,\n label,\n error,\n helperText,\n options,\n optionLabel,\n optionValue,\n onValueChange,\n selectedValue,\n isMultiple,\n isSearchable,\n dropdownIcon,\n labelStyle,\n placeholderStyle,\n dropdownStyle,\n dropdownIconStyle,\n dropdownContainerStyle,\n dropdownErrorStyle,\n dropdownErrorTextStyle,\n dropdownHelperTextStyle,\n selectedItemStyle,\n multipleSelectedItemStyle,\n modalBackgroundStyle,\n modalOptionsContainerStyle,\n searchInputStyle,\n primaryColor,\n disabled,\n checkboxSize, // kept for backwards compatibility\n checkboxStyle, // kept for backwards compatibility\n checkboxLabelStyle, // kept for backwards compatibility\n checkboxComponentStyles,\n checkboxComponent,\n listHeaderComponent,\n listFooterComponent,\n listComponentStyles,\n modalProps,\n hideModal = false,\n ...rest\n}) => {\n const [newOptions, setNewOptions] = useState<TFlatList | TSectionList>([]);\n const [open, setOpen] = useState<boolean>(false);\n const [selectAll, setSelectAll] = useState<boolean>(false);\n const [selectedItem, setSelectedItem] = useState<any>(''); // for single selection\n const [selectedItems, setSelectedItems] = useState<any[]>([]); // for multiple selection\n const [searchValue, setSearchValue] = useState<string>('');\n const [listIndex, setListIndex] = useState<{\n sectionIndex?: number;\n itemIndex: number;\n }>({ itemIndex: 0 }); // for scrollToIndex in Sectionlist and Flatlist\n\n useEffect(() => {\n if (options) {\n setNewOptions(options);\n }\n return () => {};\n }, [options]);\n\n useEffect(() => {\n isMultiple\n ? setSelectedItems(Array.isArray(selectedValue) ? selectedValue : [])\n : setSelectedItem(selectedValue);\n\n return () => {};\n }, [selectedValue, isMultiple, onValueChange]);\n\n /*===========================================\n * List type\n *==========================================*/\n\n const isSectionList = newOptions.some(\n (item) => item.title && item.data && Array.isArray(item.data)\n );\n\n const ListTypeComponent = isSectionList\n ? DropdownSectionList\n : DropdownFlatList;\n const modifiedSectionData = extractPropertyFromArray(\n newOptions,\n 'data'\n ).flat();\n const modifiedOptions = isSectionList ? modifiedSectionData : newOptions;\n\n const optLabel = optionLabel || DEFAULT_OPTION_LABEL;\n const optValue = optionValue || DEFAULT_OPTION_VALUE;\n const optionsCopy = JSON.parse(JSON.stringify(options)); //copy of the original options array\n\n /*===========================================\n * Selection handlers\n *==========================================*/\n const handleSingleSelection = (value: string | number) => {\n if (selectedItem === value) {\n setSelectedItem(null);\n onValueChange(null); //send value to parent\n } else {\n setSelectedItem(value);\n onValueChange(value); //send value to parent\n setOpen(false); //close modal upon selection\n }\n };\n\n const handleMultipleSelections = (value: string[] | number[]) => {\n setSelectedItems((prevVal) => {\n let selectedValues = [...prevVal];\n\n if (selectedValues?.includes(value)) {\n selectedValues = selectedValues.filter((item) => item !== value);\n } else {\n selectedValues.push(value);\n }\n onValueChange(selectedValues); //send value to parent\n return selectedValues;\n });\n };\n\n const handleSelectAll = () => {\n setSelectAll((prevVal) => {\n const selectedValues = [];\n\n //don't select disabled items\n const filteredOptions = modifiedOptions.filter(\n (item: TFlatListItem) => !item.disabled\n );\n\n if (!prevVal) {\n for (let i = 0; i < filteredOptions.length; i++) {\n selectedValues.push(filteredOptions[i][optValue]);\n }\n }\n\n setSelectedItems(selectedValues);\n onValueChange(selectedValues); //send value to parent\n return !prevVal;\n });\n };\n\n /*===========================================\n * Handle side effects\n *==========================================*/\n const checkSelectAll = useCallback(\n (selectedValues: any[]) => {\n //if the list contains disabled values, those values will not be selected\n if (\n modifiedOptions.filter((item: TFlatListItem) => !item.disabled)\n .length === selectedValues.length\n ) {\n setSelectAll(true);\n } else {\n setSelectAll(false);\n }\n },\n [modifiedOptions]\n );\n\n // anytime the selected items change, check if it is time to set `selectAll` to true\n useEffect(() => {\n if (isMultiple) {\n checkSelectAll(selectedItems);\n }\n return () => {};\n }, [checkSelectAll, isMultiple, selectedItems]);\n\n /*===========================================\n * Get label handler\n *==========================================*/\n const getSelectedItemsLabel = () => {\n if (isMultiple && Array.isArray(selectedItems)) {\n let selectedLabels: Array<string> = [];\n\n selectedItems?.forEach((element: number | string) => {\n let selectedItemLabel = modifiedOptions?.find(\n (item: TFlatListItem) => item[optValue] === element\n )?.[optLabel];\n selectedLabels.push(selectedItemLabel);\n });\n return selectedLabels;\n }\n\n let selectedItemLabel = modifiedOptions?.find(\n (item: TFlatListItem) => item[optValue] === selectedItem\n );\n return selectedItemLabel?.[optLabel];\n };\n\n /*===========================================\n * Search\n *==========================================*/\n const onSearch = (value: string) => {\n setSearchValue(value);\n\n let searchText = value.toString().toLocaleLowerCase().trim();\n\n const regexFilter = new RegExp(searchText, 'i');\n\n //Because Search mutates the initial state, we have to search with a copy of the original array\n const searchResults = isSectionList\n ? searchSectionList(optionsCopy as TSectionList, regexFilter)\n : searchFlatList(optionsCopy as TFlatList, regexFilter);\n\n setNewOptions(searchResults);\n };\n\n const searchFlatList = (flatList: TFlatList, regexFilter: RegExp) => {\n const searchResults = flatList.filter((item: TFlatListItem) => {\n if (\n item[optLabel].toString().toLowerCase().search(regexFilter) !== -1 ||\n item[optValue].toString().toLowerCase().search(regexFilter) !== -1\n ) {\n return item;\n }\n return;\n });\n return searchResults;\n };\n\n const searchSectionList = (\n sectionList: TSectionList,\n regexFilter: RegExp\n ) => {\n const searchResults = sectionList.map((listItem: TSectionListItem) => {\n listItem.data = listItem.data.filter((item: TFlatListItem) => {\n if (\n item[optLabel].toString().toLowerCase().search(regexFilter) !== -1 ||\n item[optValue].toString().toLowerCase().search(regexFilter) !== -1\n ) {\n return listItem.data.push(item);\n }\n return;\n });\n\n return listItem;\n });\n\n return searchResults;\n };\n\n /*===========================================\n * Modal\n *==========================================*/\n const handleToggleModal = () => {\n setOpen(!open);\n setSearchValue('');\n setNewOptions(options);\n setListIndex({ itemIndex: 0, sectionIndex: 0 });\n };\n\n useEffect(() => {\n if (hideModal) {\n setOpen(false);\n }\n return () => {};\n }, [hideModal]);\n\n let primary = primaryColor || colors.gray;\n\n const sectionListMaxLength = getMaxLengthOfSectionListProperty(\n newOptions as TSectionList,\n 'data'\n );\n\n const listIsEmpty = isSectionList\n ? sectionListMaxLength > 1\n : newOptions.length > 1;\n\n /*===========================================\n * setIndexOfSelectedItem - For ScrollToIndex\n *==========================================*/\n const setIndexOfSelectedItem = (selectedLabel: string) => {\n isSectionList\n ? optionsCopy.map((item: TSectionListItem, sectionIndex: number) => {\n item.data?.find((dataItem: TFlatListItem, itemIndex: number) => {\n if (dataItem[optLabel] === selectedLabel) {\n setListIndex({ sectionIndex, itemIndex });\n }\n });\n })\n : optionsCopy?.find((item: TFlatListItem, itemIndex: number) => {\n if (item[optLabel] === selectedLabel) {\n setListIndex({ itemIndex });\n }\n });\n };\n\n return (\n <>\n <Dropdown\n label={label}\n placeholder={placeholder}\n helperText={helperText}\n error={error}\n getSelectedItemsLabel={getSelectedItemsLabel}\n selectedItem={selectedItem}\n selectedItems={selectedItems}\n handleToggleModal={handleToggleModal}\n labelStyle={labelStyle}\n dropdownIcon={dropdownIcon}\n dropdownStyle={dropdownStyle}\n dropdownIconStyle={dropdownIconStyle}\n dropdownContainerStyle={dropdownContainerStyle}\n dropdownErrorStyle={dropdownErrorStyle}\n dropdownErrorTextStyle={dropdownErrorTextStyle}\n dropdownHelperTextStyle={dropdownHelperTextStyle}\n selectedItemStyle={selectedItemStyle}\n multipleSelectedItemStyle={multipleSelectedItemStyle}\n isMultiple={isMultiple}\n primaryColor={primary}\n disabled={disabled}\n placeholderStyle={placeholderStyle}\n setIndexOfSelectedItem={setIndexOfSelectedItem}\n {...rest}\n />\n <CustomModal\n open={open}\n handleToggleModal={handleToggleModal}\n modalBackgroundStyle={modalBackgroundStyle}\n modalOptionsContainerStyle={modalOptionsContainerStyle}\n onRequestClose={() => {}}\n modalProps={modalProps}\n >\n <ListTypeComponent\n ListHeaderComponent={\n <>\n {isSearchable && (\n <Input\n value={searchValue}\n onChangeText={(text: string) => onSearch(text)}\n style={searchInputStyle}\n primaryColor={primary}\n />\n )}\n {listHeaderComponent}\n {isMultiple && listIsEmpty && (\n <View style={styles.optionsContainerStyle}>\n <TouchableOpacity onPress={() => {}}>\n <CheckBox\n value={selectAll}\n label={selectAll ? 'Clear all' : 'Select all'}\n onChange={() => handleSelectAll()}\n primaryColor={primary}\n checkboxSize={checkboxSize}\n checkboxStyle={checkboxStyle}\n checkboxLabelStyle={checkboxLabelStyle}\n checkboxComponentStyles={checkboxComponentStyles}\n checkboxComponent={checkboxComponent}\n />\n </TouchableOpacity>\n </View>\n )}\n </>\n }\n ListFooterComponent={listFooterComponent}\n listComponentStyles={listComponentStyles}\n options={newOptions}\n optionLabel={optLabel}\n optionValue={optValue}\n isMultiple={isMultiple}\n isSearchable={isSearchable}\n selectedItems={selectedItems}\n selectedItem={selectedItem}\n handleMultipleSelections={handleMultipleSelections}\n handleSingleSelection={handleSingleSelection}\n primaryColor={primary}\n checkboxSize={checkboxSize}\n checkboxStyle={checkboxStyle}\n checkboxLabelStyle={checkboxLabelStyle}\n checkboxComponentStyles={checkboxComponentStyles}\n checkboxComponent={checkboxComponent}\n listIndex={listIndex}\n />\n </CustomModal>\n </>\n );\n};\n\nconst styles = StyleSheet.create({\n optionsContainerStyle: {\n paddingHorizontal: 20,\n paddingVertical: 10,\n flexDirection: 'row',\n },\n});\n\nexport default DropdownSelect;\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"names":[],"sources":["index.types.ts"],"sourcesContent":["import type {\n ViewStyle,\n ColorValue,\n TextStyle,\n ModalProps,\n} from 'react-native';\n\nexport type DropdownProps = {\n placeholder?: string;\n label?: string;\n error?: string;\n helperText?: string;\n options: TFlatList | TSectionList;\n optionLabel?: string;\n optionValue?: string;\n onValueChange: Function;\n selectedValue?:\n | string\n | boolean\n | number\n | string[]\n | boolean[]\n | number[]\n | null;\n isMultiple?: boolean;\n isSearchable?: boolean;\n dropdownIcon?: React.ReactNode;\n labelStyle?: TextStyle;\n dropdownStyle?: ViewStyle;\n dropdownIconStyle?: ViewStyle;\n dropdownContainerStyle?: ViewStyle;\n dropdownErrorStyle?: ViewStyle;\n dropdownErrorTextStyle?: TextStyle;\n dropdownHelperTextStyle?: TextStyle;\n selectedItemStyle?: TextStyle;\n multipleSelectedItemStyle?: TextStyle;\n modalBackgroundStyle?: ViewStyle;\n modalOptionsContainerStyle?: ViewStyle;\n searchInputStyle?: ViewStyle;\n primaryColor?: ColorValue;\n disabled?: boolean;\n checkboxSize?: number;\n checkboxStyle?: ViewStyle;\n checkboxLabelStyle?: TextStyle;\n checkboxComponentStyles?: {\n checkboxSize?: number;\n checkboxStyle?: ViewStyle;\n checkboxLabelStyle?: TextStyle;\n };\n placeholderStyle?: TextStyle;\n listHeaderComponent?: React.ReactNode;\n listFooterComponent?: React.ReactNode;\n hideModal?: boolean;\n modalProps?: ModalProps;\n listComponentStyles?: {\n listEmptyComponentStyle?: TextStyle;\n itemSeparatorStyle?: ViewStyle;\n sectionHeaderStyle?: TextStyle;\n };\n};\n\nexport type TFlatList = TFlatListItem[];\nexport type TFlatListItem = {\n [key: string]: string | number | boolean;\n}\n\nexport type TSectionList = TSectionListItem[];\nexport type TSectionListItem = { title: string; data: TFlatList };\n"],"mappings":""}
|
|
1
|
+
{"version":3,"names":[],"sources":["index.types.ts"],"sourcesContent":["import type {\n ViewStyle,\n ColorValue,\n TextStyle,\n ModalProps,\n} from 'react-native';\n\nexport type DropdownProps = {\n placeholder?: string;\n label?: string;\n error?: string;\n helperText?: string;\n options: TFlatList | TSectionList;\n optionLabel?: string;\n optionValue?: string;\n onValueChange: Function;\n selectedValue?:\n | string\n | boolean\n | number\n | string[]\n | boolean[]\n | number[]\n | null;\n isMultiple?: boolean;\n isSearchable?: boolean;\n dropdownIcon?: React.ReactNode;\n labelStyle?: TextStyle;\n dropdownStyle?: ViewStyle;\n dropdownIconStyle?: ViewStyle;\n dropdownContainerStyle?: ViewStyle;\n dropdownErrorStyle?: ViewStyle;\n dropdownErrorTextStyle?: TextStyle;\n dropdownHelperTextStyle?: TextStyle;\n selectedItemStyle?: TextStyle;\n multipleSelectedItemStyle?: TextStyle;\n modalBackgroundStyle?: ViewStyle;\n modalOptionsContainerStyle?: ViewStyle;\n searchInputStyle?: ViewStyle;\n primaryColor?: ColorValue;\n disabled?: boolean;\n checkboxSize?: number;\n checkboxStyle?: ViewStyle;\n checkboxLabelStyle?: TextStyle;\n checkboxComponentStyles?: {\n checkboxSize?: number;\n checkboxStyle?: ViewStyle;\n checkboxLabelStyle?: TextStyle;\n };\n checkboxComponent?: React.ReactNode;\n placeholderStyle?: TextStyle;\n listHeaderComponent?: React.ReactNode;\n listFooterComponent?: React.ReactNode;\n hideModal?: boolean;\n modalProps?: ModalProps;\n listComponentStyles?: {\n listEmptyComponentStyle?: TextStyle;\n itemSeparatorStyle?: ViewStyle;\n sectionHeaderStyle?: TextStyle;\n };\n};\n\nexport type TFlatList = TFlatListItem[];\nexport type TFlatListItem = {\n [key: string]: string | number | boolean;\n}\n\nexport type TSectionList = TSectionListItem[];\nexport type TSectionListItem = { title: string; data: TFlatList };\n"],"mappings":""}
|
|
@@ -1,9 +1,21 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
import type { CheckboxProps } from './types';
|
|
3
3
|
/**
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
4
|
+
* Individual props `checkboxSize`, `checkboxStyle`, `checkboxLabelStyle` would be replaced in future releases
|
|
5
|
+
* and replaced with a single object `checkboxComponentStyles` e.g
|
|
6
|
+
|
|
7
|
+
```js
|
|
8
|
+
const checkboxComponentStyles = {
|
|
9
|
+
checkboxSize: 20,
|
|
10
|
+
checkboxStyle: {
|
|
11
|
+
backgroundColor: 'purple',
|
|
12
|
+
borderRadius: 30,
|
|
13
|
+
padding: 10,
|
|
14
|
+
borderColor: 'red',
|
|
15
|
+
},
|
|
16
|
+
checkboxLabelStyle: { color: 'red', fontSize: 20 },
|
|
17
|
+
};
|
|
18
|
+
```
|
|
19
|
+
*/
|
|
20
|
+
declare const CheckBox: ({ label, value, disabled, primaryColor, checkboxSize, checkboxStyle, checkboxLabelStyle, checkboxComponentStyles, checkboxComponent, onChange, }: CheckboxProps) => JSX.Element;
|
|
9
21
|
export default CheckBox;
|