react-native-auto-positioned-popup 1.2.6 → 1.2.8
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.
|
@@ -21,6 +21,7 @@ export interface RNAutoPositionedPopupCustomRowProps {
|
|
|
21
21
|
selectList?: string | any[];
|
|
22
22
|
onAdded?: (textToAdd: string) => void;
|
|
23
23
|
clearSelectedItem?: () => void;
|
|
24
|
+
disabled?: boolean;
|
|
24
25
|
}
|
|
25
26
|
/**
|
|
26
27
|
* Props interface for AutoPositionedPopup component
|
|
@@ -31,21 +32,28 @@ export interface AutoPositionedPopupProps {
|
|
|
31
32
|
tag: string;
|
|
32
33
|
tagStyle?: ViewStyle;
|
|
33
34
|
/**
|
|
34
|
-
* fetchData={fetchData}
|
|
35
35
|
* const fetchData = useCallback(async ({
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
36
|
+
* pageIndex,
|
|
37
|
+
* pageSize,
|
|
38
|
+
* searchQuery
|
|
39
|
+
* }: {
|
|
40
40
|
* pageIndex: number;
|
|
41
41
|
* pageSize: number;
|
|
42
42
|
* searchQuery?: string
|
|
43
|
-
* }): Promise<
|
|
43
|
+
* }): Promise<AutoPositionedPopupData | null> => {
|
|
44
44
|
* try {
|
|
45
|
+
* const data: SelectedItem[] = await api()
|
|
46
|
+
* console.log('fetchData data=', data)
|
|
47
|
+
* if (data) {
|
|
48
|
+
* return Promise.resolve({
|
|
49
|
+
* items: data, needLoadMore: false, pageIndex: pageIndex,
|
|
50
|
+
* })
|
|
51
|
+
* }
|
|
45
52
|
* } catch (e) {
|
|
46
53
|
* }
|
|
47
54
|
* return Promise.resolve(null)
|
|
48
55
|
* }, []);
|
|
56
|
+
* fetchData={fetchData}
|
|
49
57
|
* @param pageIndex
|
|
50
58
|
* @param pageSize
|
|
51
59
|
* @param searchQuery
|
|
@@ -60,6 +68,20 @@ export interface AutoPositionedPopupProps {
|
|
|
60
68
|
index: number;
|
|
61
69
|
}) => React.ReactElement;
|
|
62
70
|
onItemSelected?: (item: SelectedItem & any) => void;
|
|
71
|
+
/**
|
|
72
|
+
* onSubmitEditing={(e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
|
|
73
|
+
* if (e.nativeEvent?.text) {
|
|
74
|
+
* const searchQuery = e.nativeEvent?.text
|
|
75
|
+
* setTimeout(() => {
|
|
76
|
+
* emitEvent(AutoPositionedPopupEventNames.searchQueryChange, {
|
|
77
|
+
* tag: '',
|
|
78
|
+
* searchQuery: searchQuery
|
|
79
|
+
* })
|
|
80
|
+
* }, 250);
|
|
81
|
+
* }
|
|
82
|
+
* }}
|
|
83
|
+
* @param e
|
|
84
|
+
*/
|
|
63
85
|
onSubmitEditing?: (e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void;
|
|
64
86
|
localSearch?: boolean;
|
|
65
87
|
placeholder?: string;
|
|
@@ -80,14 +102,42 @@ export interface AutoPositionedPopupProps {
|
|
|
80
102
|
children?: React.ReactNode;
|
|
81
103
|
}>;
|
|
82
104
|
/**
|
|
83
|
-
*
|
|
84
|
-
*
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
105
|
+
* const renderBtChildren = useCallback(() => {
|
|
106
|
+
* return (
|
|
107
|
+
* <BtChildren
|
|
108
|
+
* selectedItem={state.selectedItem}
|
|
109
|
+
* />
|
|
110
|
+
* );
|
|
111
|
+
* }, [state.selectedItem]);
|
|
112
|
+
*
|
|
113
|
+
* const BtChildren: React.FC<AutoPositionedPopupProps> = memo(({
|
|
114
|
+
* selectedItem,
|
|
115
|
+
* }: AutoPositionedPopupProps) => {
|
|
116
|
+
* const {uiTheme} = useThemeProvider();
|
|
117
|
+
* const [searchQuery, setSearchQuery] = useState<string>('');
|
|
118
|
+
* useGlobalEventListener(
|
|
119
|
+
* AutoPositionedPopupEventNames.searchQueryChange,
|
|
120
|
+
* useCallback(({tag, searchQuery: newQuery}: { tag: string; searchQuery: string }): void => {
|
|
121
|
+
* console.log('BtChildren searchQueryChange event received=', {tag, searchQuery: newQuery});
|
|
122
|
+
* if (tag === i18n.t('')) {
|
|
123
|
+
* setSearchQuery(newQuery);
|
|
124
|
+
* }
|
|
125
|
+
* }, [])
|
|
126
|
+
* );
|
|
127
|
+
* console.log('BtChildren render=', {
|
|
128
|
+
* selectedItem, searchQuery
|
|
129
|
+
* })
|
|
130
|
+
* return (
|
|
131
|
+
* <>
|
|
132
|
+
* <Text
|
|
133
|
+
* style={[styles.selectBtText, ((selectedItem || searchQuery) && {color: uiTheme.colors.$text})]}>{searchQuery ? searchQuery : (selectedItem ? selectedItem.title : i18n.t('Please_enter'))}</Text>
|
|
134
|
+
* </>
|
|
135
|
+
* );
|
|
136
|
+
* });
|
|
137
|
+
*
|
|
138
|
+
* btwChildren={
|
|
139
|
+
* renderBtChildren
|
|
140
|
+
* }
|
|
91
141
|
*/
|
|
92
142
|
btwChildren?: () => React.ReactNode;
|
|
93
143
|
useTextInput?: boolean;
|
|
@@ -121,6 +171,15 @@ export interface AutoPositionedPopupProps {
|
|
|
121
171
|
selectedItemBackgroundColor?: string;
|
|
122
172
|
showListEmptyComponent?: boolean;
|
|
123
173
|
emptyText?: string;
|
|
174
|
+
/**
|
|
175
|
+
* onChangeText={(text: string) => {
|
|
176
|
+
* console.log('onChangeText=', text)
|
|
177
|
+
* emitEvent(AutoPositionedPopupEventNames.searchQueryChange, {
|
|
178
|
+
* tag: '',
|
|
179
|
+
* searchQuery: text
|
|
180
|
+
* })
|
|
181
|
+
* }}
|
|
182
|
+
*/
|
|
124
183
|
onChangeText?: ((text: string) => void) | undefined;
|
|
125
184
|
}
|
|
126
185
|
//# sourceMappingURL=AutoPositionedPopupProps.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AutoPositionedPopupProps.d.ts","sourceRoot":"","sources":["../src/AutoPositionedPopupProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAC1B,OAAO,EAAC,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,SAAS,EAAC,MAAM,cAAc,CAAC;AAC7E,OAAO,EAAC,+BAA+B,EAAC,MAAM,uDAAuD,CAAC;AACtG,OAAO,EAAC,oBAAoB,EAAC,MAAM,6CAA6C,CAAC;AAEjF,MAAM,WAAW,YAAY;IAC3B,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,MAAM,CAAC;CACf;AAED,MAAM,WAAW,IAAI;IACnB,KAAK,EAAE,YAAY,EAAE,GAAG,GAAG,EAAE,CAAC;IAC9B,SAAS,EAAE,MAAM,CAAC;IAClB,YAAY,EAAE,OAAO,CAAC;CACvB;AAED;;;GAGG;AACH,MAAM,WAAW,mCAAmC;IAClD,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,YAAY,CAAC,EAAE,YAAY,GAAG,GAAG,GAAG,IAAI,GAAG,SAAS,CAAC;IACrD,UAAU,CAAC,EAAE,MAAM,GAAG,GAAG,EAAG,CAAC;IAC7B,OAAO,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;
|
|
1
|
+
{"version":3,"file":"AutoPositionedPopupProps.d.ts","sourceRoot":"","sources":["../src/AutoPositionedPopupProps.ts"],"names":[],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "react-native-auto-positioned-popup",
|
|
3
|
-
"version": "1.2.
|
|
3
|
+
"version": "1.2.8",
|
|
4
4
|
"description": "A highly customizable React Native auto-positioned popup component with search functionality and flexible styling options",
|
|
5
5
|
"main": "lib/index.js",
|
|
6
6
|
"types": "lib/index.d.ts",
|
|
@@ -69,7 +69,7 @@
|
|
|
69
69
|
"eslint-plugin-react": "^7.37.5",
|
|
70
70
|
"eslint-plugin-react-hooks": "^7.0.1",
|
|
71
71
|
"eslint-plugin-react-native": "^5.0.0",
|
|
72
|
-
"rimraf": "^6.1.
|
|
72
|
+
"rimraf": "^6.1.2",
|
|
73
73
|
"typescript": "^5.9.3"
|
|
74
74
|
},
|
|
75
75
|
"engines": {
|
|
@@ -24,6 +24,7 @@ export interface RNAutoPositionedPopupCustomRowProps {
|
|
|
24
24
|
selectList?: string | any [];
|
|
25
25
|
onAdded?: (textToAdd: string) => void;
|
|
26
26
|
clearSelectedItem?: () => void;
|
|
27
|
+
disabled?: boolean;
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
/**
|
|
@@ -35,21 +36,28 @@ export interface AutoPositionedPopupProps {
|
|
|
35
36
|
tag: string;
|
|
36
37
|
tagStyle?: ViewStyle;
|
|
37
38
|
/**
|
|
38
|
-
* fetchData={fetchData}
|
|
39
39
|
* const fetchData = useCallback(async ({
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
40
|
+
* pageIndex,
|
|
41
|
+
* pageSize,
|
|
42
|
+
* searchQuery
|
|
43
|
+
* }: {
|
|
44
44
|
* pageIndex: number;
|
|
45
45
|
* pageSize: number;
|
|
46
46
|
* searchQuery?: string
|
|
47
|
-
* }): Promise<
|
|
47
|
+
* }): Promise<AutoPositionedPopupData | null> => {
|
|
48
48
|
* try {
|
|
49
|
+
* const data: SelectedItem[] = await api()
|
|
50
|
+
* console.log('fetchData data=', data)
|
|
51
|
+
* if (data) {
|
|
52
|
+
* return Promise.resolve({
|
|
53
|
+
* items: data, needLoadMore: false, pageIndex: pageIndex,
|
|
54
|
+
* })
|
|
55
|
+
* }
|
|
49
56
|
* } catch (e) {
|
|
50
57
|
* }
|
|
51
58
|
* return Promise.resolve(null)
|
|
52
59
|
* }, []);
|
|
60
|
+
* fetchData={fetchData}
|
|
53
61
|
* @param pageIndex
|
|
54
62
|
* @param pageSize
|
|
55
63
|
* @param searchQuery
|
|
@@ -65,6 +73,20 @@ export interface AutoPositionedPopupProps {
|
|
|
65
73
|
}) => Promise<Data | null>;
|
|
66
74
|
renderItem?: ({item, index}: { item: SelectedItem; index: number }) => React.ReactElement;
|
|
67
75
|
onItemSelected?: (item: SelectedItem & any) => void;
|
|
76
|
+
/**
|
|
77
|
+
* onSubmitEditing={(e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
|
|
78
|
+
* if (e.nativeEvent?.text) {
|
|
79
|
+
* const searchQuery = e.nativeEvent?.text
|
|
80
|
+
* setTimeout(() => {
|
|
81
|
+
* emitEvent(AutoPositionedPopupEventNames.searchQueryChange, {
|
|
82
|
+
* tag: '',
|
|
83
|
+
* searchQuery: searchQuery
|
|
84
|
+
* })
|
|
85
|
+
* }, 250);
|
|
86
|
+
* }
|
|
87
|
+
* }}
|
|
88
|
+
* @param e
|
|
89
|
+
*/
|
|
68
90
|
onSubmitEditing?: (e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void;
|
|
69
91
|
localSearch?: boolean;
|
|
70
92
|
placeholder?: string;
|
|
@@ -84,14 +106,42 @@ export interface AutoPositionedPopupProps {
|
|
|
84
106
|
*/
|
|
85
107
|
CustomRow?: React.ComponentType<ViewStyle & { children?: React.ReactNode }>;
|
|
86
108
|
/**
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
94
|
-
*
|
|
109
|
+
* const renderBtChildren = useCallback(() => {
|
|
110
|
+
* return (
|
|
111
|
+
* <BtChildren
|
|
112
|
+
* selectedItem={state.selectedItem}
|
|
113
|
+
* />
|
|
114
|
+
* );
|
|
115
|
+
* }, [state.selectedItem]);
|
|
116
|
+
*
|
|
117
|
+
* const BtChildren: React.FC<AutoPositionedPopupProps> = memo(({
|
|
118
|
+
* selectedItem,
|
|
119
|
+
* }: AutoPositionedPopupProps) => {
|
|
120
|
+
* const {uiTheme} = useThemeProvider();
|
|
121
|
+
* const [searchQuery, setSearchQuery] = useState<string>('');
|
|
122
|
+
* useGlobalEventListener(
|
|
123
|
+
* AutoPositionedPopupEventNames.searchQueryChange,
|
|
124
|
+
* useCallback(({tag, searchQuery: newQuery}: { tag: string; searchQuery: string }): void => {
|
|
125
|
+
* console.log('BtChildren searchQueryChange event received=', {tag, searchQuery: newQuery});
|
|
126
|
+
* if (tag === i18n.t('')) {
|
|
127
|
+
* setSearchQuery(newQuery);
|
|
128
|
+
* }
|
|
129
|
+
* }, [])
|
|
130
|
+
* );
|
|
131
|
+
* console.log('BtChildren render=', {
|
|
132
|
+
* selectedItem, searchQuery
|
|
133
|
+
* })
|
|
134
|
+
* return (
|
|
135
|
+
* <>
|
|
136
|
+
* <Text
|
|
137
|
+
* style={[styles.selectBtText, ((selectedItem || searchQuery) && {color: uiTheme.colors.$text})]}>{searchQuery ? searchQuery : (selectedItem ? selectedItem.title : i18n.t('Please_enter'))}</Text>
|
|
138
|
+
* </>
|
|
139
|
+
* );
|
|
140
|
+
* });
|
|
141
|
+
*
|
|
142
|
+
* btwChildren={
|
|
143
|
+
* renderBtChildren
|
|
144
|
+
* }
|
|
95
145
|
*/
|
|
96
146
|
btwChildren?: () => React.ReactNode;
|
|
97
147
|
useTextInput?: boolean;
|
|
@@ -127,5 +177,14 @@ export interface AutoPositionedPopupProps {
|
|
|
127
177
|
selectedItemBackgroundColor?: string;
|
|
128
178
|
showListEmptyComponent?: boolean;
|
|
129
179
|
emptyText?: string;
|
|
180
|
+
/**
|
|
181
|
+
* onChangeText={(text: string) => {
|
|
182
|
+
* console.log('onChangeText=', text)
|
|
183
|
+
* emitEvent(AutoPositionedPopupEventNames.searchQueryChange, {
|
|
184
|
+
* tag: '',
|
|
185
|
+
* searchQuery: text
|
|
186
|
+
* })
|
|
187
|
+
* }}
|
|
188
|
+
*/
|
|
130
189
|
onChangeText?: ((text: string) => void) | undefined;
|
|
131
190
|
}
|