react-native-auto-positioned-popup 1.2.6 → 1.2.7
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.
|
@@ -31,21 +31,28 @@ export interface AutoPositionedPopupProps {
|
|
|
31
31
|
tag: string;
|
|
32
32
|
tagStyle?: ViewStyle;
|
|
33
33
|
/**
|
|
34
|
-
* fetchData={fetchData}
|
|
35
34
|
* const fetchData = useCallback(async ({
|
|
36
|
-
*
|
|
37
|
-
*
|
|
38
|
-
*
|
|
39
|
-
*
|
|
35
|
+
* pageIndex,
|
|
36
|
+
* pageSize,
|
|
37
|
+
* searchQuery
|
|
38
|
+
* }: {
|
|
40
39
|
* pageIndex: number;
|
|
41
40
|
* pageSize: number;
|
|
42
41
|
* searchQuery?: string
|
|
43
|
-
* }): Promise<
|
|
42
|
+
* }): Promise<AutoPositionedPopupData | null> => {
|
|
44
43
|
* try {
|
|
44
|
+
* const data: SelectedItem[] = await api()
|
|
45
|
+
* console.log('fetchData data=', data)
|
|
46
|
+
* if (data) {
|
|
47
|
+
* return Promise.resolve({
|
|
48
|
+
* items: data, needLoadMore: false, pageIndex: pageIndex,
|
|
49
|
+
* })
|
|
50
|
+
* }
|
|
45
51
|
* } catch (e) {
|
|
46
52
|
* }
|
|
47
53
|
* return Promise.resolve(null)
|
|
48
54
|
* }, []);
|
|
55
|
+
* fetchData={fetchData}
|
|
49
56
|
* @param pageIndex
|
|
50
57
|
* @param pageSize
|
|
51
58
|
* @param searchQuery
|
|
@@ -60,6 +67,20 @@ export interface AutoPositionedPopupProps {
|
|
|
60
67
|
index: number;
|
|
61
68
|
}) => React.ReactElement;
|
|
62
69
|
onItemSelected?: (item: SelectedItem & any) => void;
|
|
70
|
+
/**
|
|
71
|
+
* onSubmitEditing={(e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
|
|
72
|
+
* if (e.nativeEvent?.text) {
|
|
73
|
+
* const searchQuery = e.nativeEvent?.text
|
|
74
|
+
* setTimeout(() => {
|
|
75
|
+
* emitEvent(AutoPositionedPopupEventNames.searchQueryChange, {
|
|
76
|
+
* tag: '',
|
|
77
|
+
* searchQuery: searchQuery
|
|
78
|
+
* })
|
|
79
|
+
* }, 250);
|
|
80
|
+
* }
|
|
81
|
+
* }}
|
|
82
|
+
* @param e
|
|
83
|
+
*/
|
|
63
84
|
onSubmitEditing?: (e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void;
|
|
64
85
|
localSearch?: boolean;
|
|
65
86
|
placeholder?: string;
|
|
@@ -80,14 +101,42 @@ export interface AutoPositionedPopupProps {
|
|
|
80
101
|
children?: React.ReactNode;
|
|
81
102
|
}>;
|
|
82
103
|
/**
|
|
83
|
-
*
|
|
84
|
-
*
|
|
85
|
-
*
|
|
86
|
-
*
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
104
|
+
* const renderBtChildren = useCallback(() => {
|
|
105
|
+
* return (
|
|
106
|
+
* <BtChildren
|
|
107
|
+
* selectedItem={state.selectedItem}
|
|
108
|
+
* />
|
|
109
|
+
* );
|
|
110
|
+
* }, [state.selectedItem]);
|
|
111
|
+
*
|
|
112
|
+
* const BtChildren: React.FC<AutoPositionedPopupProps> = memo(({
|
|
113
|
+
* selectedItem,
|
|
114
|
+
* }: AutoPositionedPopupProps) => {
|
|
115
|
+
* const {uiTheme} = useThemeProvider();
|
|
116
|
+
* const [searchQuery, setSearchQuery] = useState<string>('');
|
|
117
|
+
* useGlobalEventListener(
|
|
118
|
+
* AutoPositionedPopupEventNames.searchQueryChange,
|
|
119
|
+
* useCallback(({tag, searchQuery: newQuery}: { tag: string; searchQuery: string }): void => {
|
|
120
|
+
* console.log('BtChildren searchQueryChange event received=', {tag, searchQuery: newQuery});
|
|
121
|
+
* if (tag === i18n.t('')) {
|
|
122
|
+
* setSearchQuery(newQuery);
|
|
123
|
+
* }
|
|
124
|
+
* }, [])
|
|
125
|
+
* );
|
|
126
|
+
* console.log('BtChildren render=', {
|
|
127
|
+
* selectedItem, searchQuery
|
|
128
|
+
* })
|
|
129
|
+
* return (
|
|
130
|
+
* <>
|
|
131
|
+
* <Text
|
|
132
|
+
* style={[styles.selectBtText, ((selectedItem || searchQuery) && {color: uiTheme.colors.$text})]}>{searchQuery ? searchQuery : (selectedItem ? selectedItem.title : i18n.t('Please_enter'))}</Text>
|
|
133
|
+
* </>
|
|
134
|
+
* );
|
|
135
|
+
* });
|
|
136
|
+
*
|
|
137
|
+
* btwChildren={
|
|
138
|
+
* renderBtChildren
|
|
139
|
+
* }
|
|
91
140
|
*/
|
|
92
141
|
btwChildren?: () => React.ReactNode;
|
|
93
142
|
useTextInput?: boolean;
|
|
@@ -121,6 +170,15 @@ export interface AutoPositionedPopupProps {
|
|
|
121
170
|
selectedItemBackgroundColor?: string;
|
|
122
171
|
showListEmptyComponent?: boolean;
|
|
123
172
|
emptyText?: string;
|
|
173
|
+
/**
|
|
174
|
+
* onChangeText={(text: string) => {
|
|
175
|
+
* console.log('onChangeText=', text)
|
|
176
|
+
* emitEvent(AutoPositionedPopupEventNames.searchQueryChange, {
|
|
177
|
+
* tag: '',
|
|
178
|
+
* searchQuery: text
|
|
179
|
+
* })
|
|
180
|
+
* }}
|
|
181
|
+
*/
|
|
124
182
|
onChangeText?: ((text: string) => void) | undefined;
|
|
125
183
|
}
|
|
126
184
|
//# 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;CAChC;AAED;;GAEG;AACH,MAAM,WAAW,wBAAwB;IACvC,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB,UAAU,CAAC,EAAE,SAAS,CAAC;IACvB,GAAG,EAAE,MAAM,CAAC;IACZ,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB
|
|
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.7",
|
|
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": {
|
|
@@ -35,21 +35,28 @@ export interface AutoPositionedPopupProps {
|
|
|
35
35
|
tag: string;
|
|
36
36
|
tagStyle?: ViewStyle;
|
|
37
37
|
/**
|
|
38
|
-
* fetchData={fetchData}
|
|
39
38
|
* const fetchData = useCallback(async ({
|
|
40
|
-
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
*
|
|
39
|
+
* pageIndex,
|
|
40
|
+
* pageSize,
|
|
41
|
+
* searchQuery
|
|
42
|
+
* }: {
|
|
44
43
|
* pageIndex: number;
|
|
45
44
|
* pageSize: number;
|
|
46
45
|
* searchQuery?: string
|
|
47
|
-
* }): Promise<
|
|
46
|
+
* }): Promise<AutoPositionedPopupData | null> => {
|
|
48
47
|
* try {
|
|
48
|
+
* const data: SelectedItem[] = await api()
|
|
49
|
+
* console.log('fetchData data=', data)
|
|
50
|
+
* if (data) {
|
|
51
|
+
* return Promise.resolve({
|
|
52
|
+
* items: data, needLoadMore: false, pageIndex: pageIndex,
|
|
53
|
+
* })
|
|
54
|
+
* }
|
|
49
55
|
* } catch (e) {
|
|
50
56
|
* }
|
|
51
57
|
* return Promise.resolve(null)
|
|
52
58
|
* }, []);
|
|
59
|
+
* fetchData={fetchData}
|
|
53
60
|
* @param pageIndex
|
|
54
61
|
* @param pageSize
|
|
55
62
|
* @param searchQuery
|
|
@@ -65,6 +72,20 @@ export interface AutoPositionedPopupProps {
|
|
|
65
72
|
}) => Promise<Data | null>;
|
|
66
73
|
renderItem?: ({item, index}: { item: SelectedItem; index: number }) => React.ReactElement;
|
|
67
74
|
onItemSelected?: (item: SelectedItem & any) => void;
|
|
75
|
+
/**
|
|
76
|
+
* onSubmitEditing={(e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => {
|
|
77
|
+
* if (e.nativeEvent?.text) {
|
|
78
|
+
* const searchQuery = e.nativeEvent?.text
|
|
79
|
+
* setTimeout(() => {
|
|
80
|
+
* emitEvent(AutoPositionedPopupEventNames.searchQueryChange, {
|
|
81
|
+
* tag: '',
|
|
82
|
+
* searchQuery: searchQuery
|
|
83
|
+
* })
|
|
84
|
+
* }, 250);
|
|
85
|
+
* }
|
|
86
|
+
* }}
|
|
87
|
+
* @param e
|
|
88
|
+
*/
|
|
68
89
|
onSubmitEditing?: (e: NativeSyntheticEvent<TextInputSubmitEditingEventData>) => void;
|
|
69
90
|
localSearch?: boolean;
|
|
70
91
|
placeholder?: string;
|
|
@@ -84,14 +105,42 @@ export interface AutoPositionedPopupProps {
|
|
|
84
105
|
*/
|
|
85
106
|
CustomRow?: React.ComponentType<ViewStyle & { children?: React.ReactNode }>;
|
|
86
107
|
/**
|
|
87
|
-
*
|
|
88
|
-
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
*
|
|
92
|
-
*
|
|
93
|
-
*
|
|
94
|
-
*
|
|
108
|
+
* const renderBtChildren = useCallback(() => {
|
|
109
|
+
* return (
|
|
110
|
+
* <BtChildren
|
|
111
|
+
* selectedItem={state.selectedItem}
|
|
112
|
+
* />
|
|
113
|
+
* );
|
|
114
|
+
* }, [state.selectedItem]);
|
|
115
|
+
*
|
|
116
|
+
* const BtChildren: React.FC<AutoPositionedPopupProps> = memo(({
|
|
117
|
+
* selectedItem,
|
|
118
|
+
* }: AutoPositionedPopupProps) => {
|
|
119
|
+
* const {uiTheme} = useThemeProvider();
|
|
120
|
+
* const [searchQuery, setSearchQuery] = useState<string>('');
|
|
121
|
+
* useGlobalEventListener(
|
|
122
|
+
* AutoPositionedPopupEventNames.searchQueryChange,
|
|
123
|
+
* useCallback(({tag, searchQuery: newQuery}: { tag: string; searchQuery: string }): void => {
|
|
124
|
+
* console.log('BtChildren searchQueryChange event received=', {tag, searchQuery: newQuery});
|
|
125
|
+
* if (tag === i18n.t('')) {
|
|
126
|
+
* setSearchQuery(newQuery);
|
|
127
|
+
* }
|
|
128
|
+
* }, [])
|
|
129
|
+
* );
|
|
130
|
+
* console.log('BtChildren render=', {
|
|
131
|
+
* selectedItem, searchQuery
|
|
132
|
+
* })
|
|
133
|
+
* return (
|
|
134
|
+
* <>
|
|
135
|
+
* <Text
|
|
136
|
+
* style={[styles.selectBtText, ((selectedItem || searchQuery) && {color: uiTheme.colors.$text})]}>{searchQuery ? searchQuery : (selectedItem ? selectedItem.title : i18n.t('Please_enter'))}</Text>
|
|
137
|
+
* </>
|
|
138
|
+
* );
|
|
139
|
+
* });
|
|
140
|
+
*
|
|
141
|
+
* btwChildren={
|
|
142
|
+
* renderBtChildren
|
|
143
|
+
* }
|
|
95
144
|
*/
|
|
96
145
|
btwChildren?: () => React.ReactNode;
|
|
97
146
|
useTextInput?: boolean;
|
|
@@ -127,5 +176,14 @@ export interface AutoPositionedPopupProps {
|
|
|
127
176
|
selectedItemBackgroundColor?: string;
|
|
128
177
|
showListEmptyComponent?: boolean;
|
|
129
178
|
emptyText?: string;
|
|
179
|
+
/**
|
|
180
|
+
* onChangeText={(text: string) => {
|
|
181
|
+
* console.log('onChangeText=', text)
|
|
182
|
+
* emitEvent(AutoPositionedPopupEventNames.searchQueryChange, {
|
|
183
|
+
* tag: '',
|
|
184
|
+
* searchQuery: text
|
|
185
|
+
* })
|
|
186
|
+
* }}
|
|
187
|
+
*/
|
|
130
188
|
onChangeText?: ((text: string) => void) | undefined;
|
|
131
189
|
}
|