react-native-auto-positioned-popup 1.0.9 → 1.0.11

package/README.md

@@ -26,6 +26,107 @@ or
 yarn add react-native-auto-positioned-popup
 ```
 
+## Loading Source Code in Development
+
+If you need to debug or develop with the source code directly instead of the compiled library files, you can configure your project to load the TypeScript source files. This is useful for debugging or when you need to make temporary modifications.
+
+### Configure Babel to Load Source Files
+
+1. Install the babel module resolver plugin if you haven't already:
+
+```bash
+npm install --save-dev babel-plugin-module-resolver
+```
+
+2. Update your `babel.config.js` to redirect imports from the compiled lib files to the source files:
+
+```javascript
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    [
+      require.resolve('babel-plugin-module-resolver'),
+      {
+        root: ['.', './src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+        alias: {
+          // Redirect react-native-auto-positioned-popup to source files
+          'react-native-auto-positioned-popup': './node_modules/react-native-auto-positioned-popup/src',
+          'react-native-auto-positioned-popup/lib/index': './node_modules/react-native-auto-positioned-popup/src/index.ts',
+          'react-native-auto-positioned-popup/lib/AutoPositionedPopup': './node_modules/react-native-auto-positioned-popup/src/AutoPositionedPopup.tsx',
+          'react-native-auto-positioned-popup/lib/AutoPositionedPopupProps': './node_modules/react-native-auto-positioned-popup/src/AutoPositionedPopupProps.ts',
+          'react-native-auto-positioned-popup/lib/RootViewContext': './node_modules/react-native-auto-positioned-popup/src/RootViewContext.tsx',
+          'react-native-auto-positioned-popup/lib/KeyboardManager': './node_modules/react-native-auto-positioned-popup/src/KeyboardManager.tsx',
+          'react-native-auto-positioned-popup/lib/AutoPositionedPopup.style': './node_modules/react-native-auto-positioned-popup/src/AutoPositionedPopup.style.ts',
+          // If you also use react-native-advanced-flatlist
+          'react-native-advanced-flatlist': './node_modules/react-native-advanced-flatlist/src',
+          'react-native-advanced-flatlist/lib/index': './node_modules/react-native-advanced-flatlist/src/index.ts',
+          'react-native-advanced-flatlist/lib/AdvancedFlatList': './node_modules/react-native-advanced-flatlist/src/AdvancedFlatList.tsx',
+        },
+      },
+    ],
+    // ... other plugins
+  ],
+};
+```
+
+3. Clear the Metro bundler cache and restart:
+
+```bash
+npx react-native start --reset-cache
+```
+
+### Conditional Loading (Advanced)
+
+If you want to conditionally load source files only in certain environments (e.g., during development), you can add logic to your babel config:
+
+```javascript
+const isDevelopment = process.env.NODE_ENV === 'development';
+const useSourceFiles = process.env.USE_SOURCE_FILES === 'true';
+
+const aliasConfig = (isDevelopment || useSourceFiles) ? {
+  // ... your source file aliases
+} : {
+  // ... your production aliases
+};
+
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    [
+      require.resolve('babel-plugin-module-resolver'),
+      {
+        root: ['.', './src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+        alias: aliasConfig,
+      },
+    ],
+  ],
+};
+```
+
+### TypeScript Configuration
+
+When loading source files directly, ensure your `tsconfig.json` includes the necessary paths:
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "react-native-auto-positioned-popup": ["./node_modules/react-native-auto-positioned-popup/src"],
+      "react-native-auto-positioned-popup/*": ["./node_modules/react-native-auto-positioned-popup/src/*"]
+    }
+  }
+}
+```
+
+### Notes
+
+- Loading source files directly may impact build performance
+- Remember to revert these changes before building for production
+- Always clear Metro cache after changing babel configuration
+- This approach is recommended only for development and debugging purposes
+
 ## Basic Usage
 
 First, wrap your app with the `RootViewProvider`:
@@ -47,12 +148,13 @@ Then use the `AutoPositionedPopup` component:
 ```tsx
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import AutoPositionedPopup, { SelectedItem, Data } from 'react-native-auto-positioned-popup';
+import RNAutoPositionedPopup from 'react-native-auto-positioned-popup';
+import type {SelectedItem as RNSelectedItem, Data as AutoPositionedPopupData} from 'react-native-auto-positioned-popup';
 
 const MyComponent = () => {
-  const [selectedItem, setSelectedItem] = useState<SelectedItem | undefined>();
+  const [selectedItem, setSelectedItem] = useState<RNSelectedItem | undefined>();
 
-  const fetchData = async ({ pageIndex, pageSize, searchQuery }): Promise<Data | null> => {
+  const fetchData = async ({ pageIndex, pageSize, searchQuery }): Promise<AutoPositionedPopupData | null> => {
     // Your data fetching logic here
     return {
       items: [
@@ -67,7 +169,7 @@ const MyComponent = () => {
 
   return (
     <View style={{ padding: 20 }}>
-      <AutoPositionedPopup
+      <RNAutoPositionedPopup
         tag="example-popup"
         placeholder="Select an option"
         selectedItem={selectedItem}
@@ -144,10 +246,11 @@ This example shows a complete implementation without search input, suitable for
 ```tsx
 import React, { useState } from 'react';
 import { View, Text, Image, StyleSheet } from 'react-native';
-import AutoPositionedPopup, { SelectedItem, Data, RootViewProvider } from 'react-native-auto-positioned-popup';
+import RNAutoPositionedPopup, { RootViewProvider } from 'react-native-auto-positioned-popup';
+import type {SelectedItem as RNSelectedItem, Data as AutoPositionedPopupData} from 'react-native-auto-positioned-popup';
 
 // Sample data type with color support
-interface ClinicItem extends SelectedItem {
+interface ClinicItem extends RNSelectedItem {
   code: string;
   textColor: string;
   address?: string;
@@ -156,7 +259,7 @@ interface ClinicItem extends SelectedItem {
 const ClinicSelector = () => {
   const [selectedClinic, setSelectedClinic] = useState<ClinicItem | null>(null);
 
-  const fetchClinics = async ({ pageIndex, pageSize }): Promise<Data | null> => {
+  const fetchClinics = async ({ pageIndex, pageSize }): Promise<AutoPositionedPopupData | null> => {
     // Simulate API call
     const mockClinics = [
       { id: '1', title: 'Main Clinic', code: 'MC001', textColor: '#4CAF50', address: '123 Main St' },
@@ -177,7 +280,7 @@ const ClinicSelector = () => {
   return (
     <RootViewProvider>
       <View style={styles.container}>
-        <AutoPositionedPopup
+        <RNAutoPositionedPopup
           tag="clinic-selector"
           useTextInput={false}
           localSearch={false}

package/README_zh.md

@@ -26,6 +26,107 @@ npm install react-native-auto-positioned-popup
 yarn add react-native-auto-positioned-popup
 ```
 
+## 在开发环境中加载源码
+
+如果你需要调试或直接使用源代码进行开发，而不是使用编译后的库文件，可以配置你的项目来加载 TypeScript 源文件。这在调试或需要临时修改时非常有用。
+
+### 配置 Babel 加载源文件
+
+1. 如果还没有安装，请先安装 babel 模块解析器插件：
+
+```bash
+npm install --save-dev babel-plugin-module-resolver
+```
+
+2. 更新你的 `babel.config.js`，将导入从编译的 lib 文件重定向到源文件：
+
+```javascript
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    [
+      require.resolve('babel-plugin-module-resolver'),
+      {
+        root: ['.', './src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+        alias: {
+          // 将 react-native-auto-positioned-popup 重定向到源文件
+          'react-native-auto-positioned-popup': './node_modules/react-native-auto-positioned-popup/src',
+          'react-native-auto-positioned-popup/lib/index': './node_modules/react-native-auto-positioned-popup/src/index.ts',
+          'react-native-auto-positioned-popup/lib/AutoPositionedPopup': './node_modules/react-native-auto-positioned-popup/src/AutoPositionedPopup.tsx',
+          'react-native-auto-positioned-popup/lib/AutoPositionedPopupProps': './node_modules/react-native-auto-positioned-popup/src/AutoPositionedPopupProps.ts',
+          'react-native-auto-positioned-popup/lib/RootViewContext': './node_modules/react-native-auto-positioned-popup/src/RootViewContext.tsx',
+          'react-native-auto-positioned-popup/lib/KeyboardManager': './node_modules/react-native-auto-positioned-popup/src/KeyboardManager.tsx',
+          'react-native-auto-positioned-popup/lib/AutoPositionedPopup.style': './node_modules/react-native-auto-positioned-popup/src/AutoPositionedPopup.style.ts',
+          // 如果你也使用 react-native-advanced-flatlist
+          'react-native-advanced-flatlist': './node_modules/react-native-advanced-flatlist/src',
+          'react-native-advanced-flatlist/lib/index': './node_modules/react-native-advanced-flatlist/src/index.ts',
+          'react-native-advanced-flatlist/lib/AdvancedFlatList': './node_modules/react-native-advanced-flatlist/src/AdvancedFlatList.tsx',
+        },
+      },
+    ],
+    // ... 其他插件
+  ],
+};
+```
+
+3. 清除 Metro bundler 缓存并重启：
+
+```bash
+npx react-native start --reset-cache
+```
+
+### 条件加载（高级用法）
+
+如果你想只在特定环境（例如开发环境）中有条件地加载源文件，可以在 babel 配置中添加逻辑：
+
+```javascript
+const isDevelopment = process.env.NODE_ENV === 'development';
+const useSourceFiles = process.env.USE_SOURCE_FILES === 'true';
+
+const aliasConfig = (isDevelopment || useSourceFiles) ? {
+  // ... 你的源文件别名
+} : {
+  // ... 你的生产环境别名
+};
+
+module.exports = {
+  presets: ['module:@react-native/babel-preset'],
+  plugins: [
+    [
+      require.resolve('babel-plugin-module-resolver'),
+      {
+        root: ['.', './src'],
+        extensions: ['.js', '.jsx', '.ts', '.tsx', '.json'],
+        alias: aliasConfig,
+      },
+    ],
+  ],
+};
+```
+
+### TypeScript 配置
+
+当直接加载源文件时，确保你的 `tsconfig.json` 包含必要的路径：
+
+```json
+{
+  "compilerOptions": {
+    "paths": {
+      "react-native-auto-positioned-popup": ["./node_modules/react-native-auto-positioned-popup/src"],
+      "react-native-auto-positioned-popup/*": ["./node_modules/react-native-auto-positioned-popup/src/*"]
+    }
+  }
+}
+```
+
+### 注意事项
+
+- 直接加载源文件可能会影响构建性能
+- 记得在生产构建前恢复这些更改
+- 更改 babel 配置后务必清除 Metro 缓存
+- 此方法仅建议用于开发和调试目的
+
 ## 基本用法
 
 首先，使用 `RootViewProvider` 包裹你的应用：
@@ -47,12 +148,13 @@ const App = () => {
 ```tsx
 import React, { useState } from 'react';
 import { View } from 'react-native';
-import AutoPositionedPopup, { SelectedItem, Data } from 'react-native-auto-positioned-popup';
+import RNAutoPositionedPopup from 'react-native-auto-positioned-popup';
+import type {SelectedItem as RNSelectedItem, Data as AutoPositionedPopupData} from 'react-native-auto-positioned-popup';
 
 const MyComponent = () => {
-  const [selectedItem, setSelectedItem] = useState<SelectedItem | undefined>();
+  const [selectedItem, setSelectedItem] = useState<RNSelectedItem | undefined>();
 
-  const fetchData = async ({ pageIndex, pageSize, searchQuery }): Promise<Data | null> => {
+  const fetchData = async ({ pageIndex, pageSize, searchQuery }): Promise<AutoPositionedPopupData | null> => {
     // 你的数据获取逻辑
     return {
       items: [
@@ -67,7 +169,7 @@ const MyComponent = () => {
 
   return (
     <View style={{ padding: 20 }}>
-      <AutoPositionedPopup
+      <RNAutoPositionedPopup
         tag="example-popup"
         placeholder="请选择一个选项"
         selectedItem={selectedItem}
@@ -144,10 +246,11 @@ export default MyComponent;
 ```tsx
 import React, { useState } from 'react';
 import { View, Text, Image, StyleSheet } from 'react-native';
-import AutoPositionedPopup, { SelectedItem, Data, RootViewProvider } from 'react-native-auto-positioned-popup';
+import RNAutoPositionedPopup from 'react-native-auto-positioned-popup';
+import type {SelectedItem as RNSelectedItem, Data as AutoPositionedPopupData} from 'react-native-auto-positioned-popup';
 
 // 支持颜色的数据类型示例
-interface ClinicItem extends SelectedItem {
+interface ClinicItem extends RNSelectedItem {
   code: string;
   textColor: string;
   address?: string;
@@ -156,7 +259,7 @@ interface ClinicItem extends SelectedItem {
 const ClinicSelector = () => {
   const [selectedClinic, setSelectedClinic] = useState<ClinicItem | null>(null);
 
-  const fetchClinics = async ({ pageIndex, pageSize }): Promise<Data | null> => {
+  const fetchClinics = async ({ pageIndex, pageSize }): Promise<AutoPositionedPopupData | null> => {
     // 模拟 API 调用
     const mockClinics = [
       { id: '1', title: '主诊所', code: 'MC001', textColor: '#4CAF50', address: '主街123号' },
@@ -177,7 +280,7 @@ const ClinicSelector = () => {
   return (
     <RootViewProvider>
       <View style={styles.container}>
-        <AutoPositionedPopup
+        <RNAutoPositionedPopup
           tag="clinic-selector"
           useTextInput={false}
           localSearch={false}
@@ -422,4 +525,4 @@ MIT © [Stark](https://github.com/your-username)
 - 自动定位功能
 - 搜索支持
 - TypeScript 定义
-- 跨平台兼容性
+- 跨平台兼容性

package/lib/AutoPositionedPopup.d.ts

@@ -1,5 +1,5 @@
-import { ForwardRefExoticComponent, MemoExoticComponent } from 'react';
+import React from 'react';
 import { AutoPositionedPopupProps } from './AutoPositionedPopupProps';
-declare const AutoPositionedPopup: MemoExoticComponent<ForwardRefExoticComponent<AutoPositionedPopupProps>>;
+declare const AutoPositionedPopup: React.NamedExoticComponent<AutoPositionedPopupProps & React.RefAttributes<unknown>>;
 export default AutoPositionedPopup;
 //# sourceMappingURL=AutoPositionedPopup.d.ts.map

package/lib/AutoPositionedPopup.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"AutoPositionedPopup.d.ts","sourceRoot":"","sources":["../src/AutoPositionedPopup.tsx"],"names":[],"mappings":"AAAA,OAAc,EAGZ,yBAAyB,EAEzB,mBAAmB,EAOpB,MAAM,OAAO,CAAC;AAef,OAAO,EAAC,wBAAwB,EAAqB,MAAM,4BAA4B,CAAC;AAoRxF,QAAA,MAAM,mBAAmB,EAAE,mBAAmB,CAC5C,yBAAyB,CAAC,wBAAwB,CAAC,CAkoBpD,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"AutoPositionedPopup.d.ts","sourceRoot":"","sources":["../src/AutoPositionedPopup.tsx"],"names":[],"mappings":"AAAA,OAAO,KAYN,MAAM,OAAO,CAAC;AAcf,OAAO,EAAC,wBAAwB,EAAqB,MAAM,4BAA4B,CAAC;AAwRxF,QAAA,MAAM,mBAAmB,qFA2vBxB,CAAC;AAEF,eAAe,mBAAmB,CAAC"}