react-native-auto-positioned-popup 1.0.2

package/lib/RootViewContext.js

@@ -0,0 +1,136 @@
+import React, { createContext, useContext, useEffect, useMemo, useRef, useState } from 'react';
+import { Pressable, View } from 'react-native';
+const RootViewContext = createContext(undefined);
+/**
+ * Dynamically add or remove views on the root view.
+ * @param children
+ * @constructor
+ */
+export const RootViewProvider = ({ children }) => {
+    const [rootViews, setRootViews] = useState([]);
+    const [searchQuery, setSearchQuery] = useState('');
+    const viewRefs = useRef({});
+    //監聽 rootViews
+    useEffect(() => {
+        console.log('RootViewProvider rootViews changed:', rootViews);
+    }, [rootViews]);
+    const addRootView = (view) => {
+        // const id = `dynamic-view-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
+        const newView = Object.assign({}, view);
+        console.log('RootViewProvider addRootView rootViews=', rootViews);
+        console.log('RootViewProvider addRootView newView=', newView);
+        setRootViews((prev) => [...prev, newView]);
+    };
+    const updateRootView = (id, update) => {
+        setRootViews((prev) => prev.map((view) => (view.id === id ? Object.assign(Object.assign({}, view), update) : view)));
+    };
+    const removeRootView = (id, force, _rootViews) => {
+        console.log('RootViewProvider removeRootView id=', id);
+        console.log('RootViewProvider removeRootView force=', force);
+        console.log('RootViewProvider removeRootView rootViews=', rootViews);
+        console.log('RootViewProvider removeRootView _rootViews=', _rootViews);
+        // Ensure keyboard is dismissed when force removing all root views
+        if (force) {
+            // Dismiss keyboard first
+            if (global.dismissKeyboard) {
+                global.dismissKeyboard();
+            }
+            // Small delay to ensure keyboard is dismissed before removing views
+            setTimeout(() => {
+                setRootViews((prev) => []);
+                console.log('RootViewProvider removeRootView setRootViews(prev => []) force=true');
+            }, 50);
+            return;
+        }
+        if (rootViews.length > 0 && id) {
+            setRootViews((prev) => prev.filter((view) => view.id !== id));
+            // else {
+            //   console.log('RootViewProvider removeRootView setRootViews(prev => [])')
+            //   setRootViews(prev => [])
+            // }
+        }
+        else if (_rootViews && _rootViews.length > 0 && id) {
+            setRootViews((prev) => prev.filter((view) => view.id !== id));
+        }
+    };
+    const setRootViewNativeStyle = (id, style) => {
+        const target = viewRefs.current[id];
+        if (target) {
+            // @ts-ignore - React Native setNativeProps
+            target.setNativeProps({ style });
+        }
+    };
+    const contextValue = useMemo(() => ({
+        addRootView,
+        setRootViewNativeStyle,
+        updateRootView,
+        removeRootView,
+        rootViews,
+        searchQuery,
+        setSearchQuery,
+    }), [addRootView, setRootViewNativeStyle, updateRootView, removeRootView, rootViews, searchQuery, setSearchQuery]);
+    return (<RootViewContext.Provider value={contextValue}>
+      <>
+        {children}
+        {rootViews.map(({ id, style, component, useModal, onModalClose, centerDisplay }) => {
+            console.log('RootViewProvider rootViews.map id=', id);
+            console.log('RootViewProvider rootViews.map style=', style);
+            console.log('RootViewProvider rootViews.map component=', component);
+            console.log('RootViewProvider rootViews.map useModal=', useModal);
+            console.log('RootViewProvider rootViews.map centerDisplay=', centerDisplay);
+            return !useModal ? (<View key={id} ref={(r) => {
+                    if (r)
+                        viewRefs.current[id] = r;
+                }} style={[style, { position: 'absolute' }]}>
+                {component}
+              </View>) : (<Pressable key={id} style={[
+                    {
+                        flex: 1,
+                        position: 'absolute',
+                        width: '100%',
+                        left: 0,
+                        right: 0,
+                        top: 0,
+                        bottom: 0,
+                        zIndex: 99999999999,
+                        backgroundColor: 'rgba(0,0,0,0.5)',
+                    },
+                    centerDisplay && { justifyContent: 'center', alignItems: 'center' },
+                ]} onPress={() => {
+                    console.log('RootViewProvider Pressable onPress rootViews=', rootViews);
+                    removeRootView(id, true);
+                    onModalClose && onModalClose();
+                }}>
+                <View ref={(r) => {
+                    if (r)
+                        viewRefs.current[id] = r;
+                }} style={[{ position: 'absolute' }, style]}>
+                  {component}
+                </View>
+              </Pressable>);
+            // (<Modal
+            //   animationType="none"
+            //   transparent={false}
+            //   visible={true}
+            //   presentationStyle="overFullScreen" // iOS特定属性
+            //   onRequestClose={() => {
+            //     // Android 返回鍵按下時的回調
+            //     onModalClose && onModalClose()
+            //   }}
+            //   key={id}
+            // >
+            // </Modal>)
+        })}
+      </>
+    </RootViewContext.Provider>);
+};
+/*
+  const { addRootView, updateRootView, removeRootView ,searchQuery } = useRootView();
+ */
+export const useRootView = () => {
+    const context = useContext(RootViewContext);
+    if (!context) {
+        throw new Error('useRootView must be used within a RootViewProvider');
+    }
+    return context;
+};

package/lib/index.d.ts

@@ -0,0 +1,6 @@
+export { default as AutoPositionedPopup } from './AutoPositionedPopup';
+export { default } from './AutoPositionedPopup';
+export type { AutoPositionedPopupProps, SelectedItem, Data, } from './AutoPositionedPopupProps';
+export { default as AutoPositionedPopupStyles } from './AutoPositionedPopup.style';
+export { RootViewProvider, useRootView } from './RootViewContext';
+//# sourceMappingURL=index.d.ts.map

package/lib/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACvE,OAAO,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AAGhD,YAAY,EACV,wBAAwB,EACxB,YAAY,EACZ,IAAI,GACL,MAAM,4BAA4B,CAAC;AAGpC,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AAGnF,OAAO,EAAE,gBAAgB,EAAE,WAAW,EAAE,MAAM,mBAAmB,CAAC"}

package/lib/index.js

@@ -0,0 +1,7 @@
+// Main component export
+export { default as AutoPositionedPopup } from './AutoPositionedPopup';
+export { default } from './AutoPositionedPopup';
+// Style exports (optional, for customization)
+export { default as AutoPositionedPopupStyles } from './AutoPositionedPopup.style';
+// RootView exports
+export { RootViewProvider, useRootView } from './RootViewContext';

package/package.json

@@ -0,0 +1,82 @@
+{
+  "name": "react-native-auto-positioned-popup",
+  "version": "1.0.2",
+  "description": "A highly customizable React Native auto-positioned popup component with search functionality and flexible styling options",
+  "main": "lib/index.js",
+  "types": "lib/index.d.ts",
+  "files": [
+    "lib/",
+    "src/",
+    "README.md",
+    "README_zh.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "npm run clean && tsc",
+    "watch": "tsc --watch",
+    "clean": "rimraf lib",
+    "prepare": "npm run build",
+    "prepublishOnly": "npm run build && npm run lint",
+    "postpublish": "echo \"Package published successfully! 🎉\"",
+    "test": "echo \"No tests specified\" && exit 0",
+    "lint": "eslint src --ext .ts,.tsx",
+    "lint:fix": "eslint src --ext .ts,.tsx --fix",
+    "type-check": "tsc --noEmit",
+    "pack-test": "npm pack --dry-run",
+    "release:patch": "npm version patch && npm publish",
+    "release:minor": "npm version minor && npm publish",
+    "release:major": "npm version major && npm publish",
+    "release": "node scripts/release.js",
+    "release:dry": "node scripts/release.js --dry-run",
+    "release:patch-auto": "node scripts/release.js --version patch",
+    "release:minor-auto": "node scripts/release.js --version minor",
+    "release:major-auto": "node scripts/release.js --version major",
+    "dev": "npm run watch"
+  },
+  "keywords": [
+    "react-native",
+    "popup",
+    "dropdown",
+    "auto-positioned",
+    "search",
+    "flatlist",
+    "autocomplete",
+    "typescript",
+    "ios",
+    "android"
+  ],
+  "author": "Stark <stark@example.com>",
+  "license": "MIT",
+  "homepage": "https://github.com/your-username/react-native-auto-positioned-popup#readme",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/your-username/react-native-auto-positioned-popup.git"
+  },
+  "bugs": {
+    "url": "https://github.com/your-username/react-native-auto-positioned-popup/issues"
+  },
+  "peerDependencies": {
+    "react": ">=16.8.0",
+    "react-native": ">=0.60.0"
+  },
+  "devDependencies": {
+    "@types/node": "^24.2.1",
+    "@types/react": "^18.3.23",
+    "@types/react-native": "^0.72.8",
+    "@typescript-eslint/eslint-plugin": "^6.21.0",
+    "@typescript-eslint/parser": "^6.21.0",
+    "eslint": "^8.57.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-native": "^4.1.0",
+    "rimraf": "^6.0.1",
+    "typescript": "^5.9.2"
+  },
+  "engines": {
+    "node": ">=14.0.0"
+  },
+  "react-native": "src/index.tsx",
+  "dependencies": {
+    "react-native-advanced-flatlist": "^1.0.4"
+  }
+}

package/src/AutoPositionedPopup.style.ts

@@ -0,0 +1,80 @@
+import { StyleSheet } from 'react-native';
+
+export default StyleSheet.create({
+  des: {
+    fontSize: 12,
+    lineHeight: 20,
+    fontWeight: '400',
+    color: '#666666',
+    marginLeft: 4,
+  },
+  ListItemCode: {
+    fontSize: 15,
+    lineHeight: 20,
+    fontWeight: '600',
+    color: '#333333',
+  },
+  commonModalRow: {
+    height: 32,
+    borderBottomWidth: 0,
+    overflow: 'hidden',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: '100%',
+    flexDirection: 'row',
+    borderRadius: 8,
+  },
+  autoPositionedPopupList: {
+    flex: 1,
+    height: '100%',
+    padding: 12,
+  },
+  inputStyle: {
+    fontSize: 15,
+    fontWeight: '400',
+    lineHeight: 20,
+    color: '#333333',
+    width: '90%',
+    textAlign: 'right',
+  },
+  AutoPositionedPopupBtn: {
+    flex: 1,
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+  searchQueryTxt: {
+    fontSize: 17,
+    lineHeight: 24,
+    color: '#999999',
+    textAlign: 'right',
+  },
+  contain: {
+    flex: 1,
+    height: '100%',
+  },
+  selectArrow: {
+    marginLeft: 6,
+    marginRight: 8,
+    width: 8,
+    height: 14,
+  },
+  AutoDropdownBtnStyle1: {
+    justifyContent: 'flex-start',
+  },
+  AutoDropdownBtnStyle: {
+    justifyContent: 'flex-end',
+  },
+  usageRowText: {
+    fontSize: 17,
+    lineHeight: 21,
+    fontWeight: '400',
+    color: '#333333',
+  },
+  AutoDropdownRow: {
+    flex: 1,
+    height: 50,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+  },
+});