diff --git a/example/base/metro.config.js b/example/base/metro.config.js index 3ce02f748..01234bfa1 100644 --- a/example/base/metro.config.js +++ b/example/base/metro.config.js @@ -10,6 +10,7 @@ module.exports = { resolver: { extraNodeModules: { '@uiw/react-native': path.resolve(`${__dirname}/lib/`), + '@uiw/react-native-image-picker': path.resolve(`${__dirname}/lib2/`), // '@uiw/react-native': path.resolve(`${__dirname}/../../packages/core/`), // 'react-native-svg': path.resolve( // `${__dirname}/../../node_modules/react-native-svg/`, diff --git a/example/base/package.json b/example/base/package.json index a6ec4d1c9..c6306fafd 100644 --- a/example/base/package.json +++ b/example/base/package.json @@ -11,7 +11,8 @@ }, "dependencies": { "@uiw/react-native": "3.2.3", - "react": "18.0.0", + "@uiw/react-native-image-picker": "3.2.3", + "react": "18.2.0", "react-native": "0.69.7", "react-native-svg": "12.1.1" }, diff --git a/example/examples/lib2/ImagePicker/index.d.ts b/example/examples/lib2/ImagePicker/index.d.ts new file mode 100644 index 000000000..e2bd5d69a --- /dev/null +++ b/example/examples/lib2/ImagePicker/index.d.ts @@ -0,0 +1,3 @@ +/// +declare const ImagePicker: () => JSX.Element; +export default ImagePicker; diff --git a/example/examples/lib2/ImagePicker/index.js b/example/examples/lib2/ImagePicker/index.js new file mode 100644 index 000000000..eaa9f2661 --- /dev/null +++ b/example/examples/lib2/ImagePicker/index.js @@ -0,0 +1,17 @@ +import React from 'react'; +import {View, Text, StyleSheet} from 'react-native'; +const ImagePicker = () => { + return ( + + ImagePicker + + ); +}; +const styles = StyleSheet.create({ + tree: { + paddingHorizontal: 10, + paddingVertical: 5, + backgroundColor: '#fff', + }, +}); +export default ImagePicker; diff --git a/example/examples/lib2/index.d.ts b/example/examples/lib2/index.d.ts new file mode 100644 index 000000000..a5785e9d9 --- /dev/null +++ b/example/examples/lib2/index.d.ts @@ -0,0 +1,2 @@ +export {default as ImagePicker} from './ImagePicker'; +export * from './ImagePicker'; diff --git a/example/examples/lib2/index.js b/example/examples/lib2/index.js new file mode 100644 index 000000000..a5785e9d9 --- /dev/null +++ b/example/examples/lib2/index.js @@ -0,0 +1,2 @@ +export {default as ImagePicker} from './ImagePicker'; +export * from './ImagePicker'; diff --git a/example/examples/metro.config.js b/example/examples/metro.config.js index ec444e750..af377d57a 100644 --- a/example/examples/metro.config.js +++ b/example/examples/metro.config.js @@ -10,6 +10,7 @@ module.exports = { resolver: { extraNodeModules: { '@uiw/react-native': path.resolve(`${__dirname}/lib/`), + '@uiw/react-native-image-picker': path.resolve(`${__dirname}/lib2/`), // '@uiw/react-native': path.resolve(`${__dirname}/../../packages/core/`), // 'react-native-svg': path.resolve( // `${__dirname}/../../node_modules/react-native-svg/`, diff --git a/example/examples/package.json b/example/examples/package.json index 7c4c46ba9..c3a6851f2 100644 --- a/example/examples/package.json +++ b/example/examples/package.json @@ -14,12 +14,13 @@ "@react-navigation/native": "~6.0.11", "@react-navigation/stack": "~6.2.2", "@uiw/react-native": "3.2.3", - "react": "18.0.0", + "react": "18.2.0", "react-native": "0.69.7", "react-native-gesture-handler": "~2.5.0", "react-native-safe-area-context": "~4.3.1", "react-native-screens": "~3.15.0", - "react-native-svg": "12.1.1" + "react-native-svg": "12.1.1", + "@uiw/react-native-image-picker": "3.2.3" }, "devDependencies": { "@babel/core": "~7.20.7", diff --git a/example/examples/src/routes/ActionBar/index.tsx b/example/examples/src/routes/ActionBar/index.tsx index 134382c19..8bea21b05 100644 --- a/example/examples/src/routes/ActionBar/index.tsx +++ b/example/examples/src/routes/ActionBar/index.tsx @@ -1,5 +1,6 @@ import React from 'react'; -import {ActionBar, Button, Icon} from '@uiw/react-native'; +import {ActionBar} from '@uiw/react-native'; +import {ImagePicker} from '@uiw/react-native-image-picker'; import {View, Alert} from 'react-native'; import {ComProps} from '../../routes'; import Layout from '../../Layout'; @@ -37,6 +38,7 @@ export default class ActionBarDemo extends React.Component { }, ]} /> + ); diff --git a/package.json b/package.json index 38c2bf7e7..908da9053 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,15 @@ "build": "npm run lib:build && npm run lib:build:base && npm run lib:build:examples && npm run lib:build:test && npm run build:doc", ">>>>>>>": ">>>>>>>", "lib:build": "lerna exec --scope @uiw/react-native -- tsbb build --disable-babel-option --no-esm", - "lib:watch": "lerna exec --scope @uiw/react-native -- tsbb watch --disable-babel-option --no-esm", + "lib:watch": "lerna exec --scope @uiw/react-native -- tsbb watch --disable-babel-option --no-esm", + "⬇️⬇️⬇️⬇️⬇️ image-picker ⬇️⬇️⬇️⬇️⬇️": "▼▼▼▼▼ example::base ▼▼▼▼▼", + "lib:build:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb build", + "lib:watch:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb watch", + "lib:build:examples:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb build --disable-babel-option --no-esm --cjs ../../example/examples/lib2", + "lib:watch:examples:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb watch --disable-babel-option --no-esm --cjs ../../example/examples/lib2", + "lib:build:base:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb build --disable-babel-option --no-esm --cjs ../../example/base/lib2", + "lib:watch:base:image-picker": "lerna exec --scope @uiw/react-native-image-picker -- tsbb watch --disable-babel-option --no-esm --cjs ../../example/base/lib2", + "⬆️⬆️⬆️⬆️⬆️ image-picker ⬆️⬆️⬆️⬆️⬆️": "▲▲▲▲▲ example::base ▲▲▲▲▲", "start": "lerna exec --scope website -- npm run start", "doc": "lerna exec --scope website -- npm run build", "<<<<<<<": "<<<<<<<", @@ -45,7 +53,7 @@ "babel-preset-react-native": "4.0.1", "fs-extra": "~10.1.0", "metro-react-native-babel-preset": "0.73.6", - "react": "18.0.0", + "react": "18.2.0", "react-native": "0.69.7" }, "dependencies": { @@ -56,6 +64,10 @@ "tsbb": "^3.7.6", "typescript": "^4.7.4" }, + "resolutions": { + "react":"~18.2.0", + "react-dom": "~18.2.0" + }, "workspaces": { "packages": [ "example/*", diff --git a/packages/core/src/ImageViewer/index.tsx b/packages/core/src/ImageViewer/index.tsx index d416eba8c..04e6d43e7 100644 --- a/packages/core/src/ImageViewer/index.tsx +++ b/packages/core/src/ImageViewer/index.tsx @@ -106,8 +106,6 @@ function ImageViewer(props: ImageViewerProps) { ); - console.log('src', typeof src); - return ( setValue(val)} /> @@ -39,7 +39,7 @@ export default Demo ### modal弹框 & 联动 -```jsx mdx:preview&background=#bebebe29 +```jsx import React from 'react'; import { SafeAreaView } from 'react-native'; import { Picker,Button } from '@uiw/react-native'; diff --git a/packages/core/src/index.tsx b/packages/core/src/index.tsx index 63aa40600..6e3c27ad7 100644 --- a/packages/core/src/index.tsx +++ b/packages/core/src/index.tsx @@ -125,6 +125,7 @@ export { default as ImageViewer } from './ImageViewer'; export * from './ImageViewer'; export { default as Form } from './Form'; export * from './Form'; + /** * Typography */ diff --git a/packages/react-native-image-picker/.babelrc b/packages/react-native-image-picker/.babelrc new file mode 100644 index 000000000..e15ac017a --- /dev/null +++ b/packages/react-native-image-picker/.babelrc @@ -0,0 +1,3 @@ +{ + "presets": ["@babel/preset-typescript"] +} diff --git a/packages/react-native-image-picker/README.md b/packages/react-native-image-picker/README.md new file mode 100644 index 000000000..1282d156b --- /dev/null +++ b/packages/react-native-image-picker/README.md @@ -0,0 +1,112 @@ +

+ + + +

+

+ + + + + + + + + +
+ + + + + + + + + +

+ +React Native UIW +--- + +A UI component library based on React Native (Android & iOS). + +[快速上手](https://uimjs.github.io/#/docs/getting-started) | [参与组件开发](https://uimjs.github.io/#/docs/development/components) | [参与文档/网站编辑开发](https://uimjs.github.io/#/docs/development/document) | [组件库](https://uimjs.github.io/#/components/about) + +您可以使用我们制定的模版([`@uiw/react-native-template`](https://github.com/uiwjs/react-native-template))创建一个新项目： + + +```shell +# 此模板默认集成了一些必用的依赖，如路由，组件库等 +npx react-native init AwesomeProject --template @uiw/react-native-template +``` + +## Install +```bash +yarn add @uiw/react-native react-native-svg@12.1.1 react-native-root-siblings@4.1.1 react-native-gesture-handler@2.8.0 +``` + +## Basic Usage + +```jsx +import React from 'react'; +import { View } from 'react-native'; +import { Icon } from '@uiw/react-native' + +export default class Demo extends React.Component { + render() { + return ( + + + + ) + } +} +``` + +## Other + +- [@uiw/react-native-alipay](https://github.com/uiwjs/react-native-alipay) +- [@uiw/react-native-amap-geolocation](https://github.com/uiwjs/react-native-amap-geolocation) + +## Development + +```bash +# Install current dependencies, and dependencies in sub-packages +yarn install +yarn run build # Compile package +``` + +Real-time monitoring of package and document website local preview + +```bash +# Step 1 +yarn run lib:watch # Compile and output JS file +# Step 2 +yarn run lib:watch:type # Output type file d.ts +# Step 3 +yarn run start # Run the preview document website locally +``` + +## 文档本地预览 + +**第一步安装文档包和预览工具** + +```bash + npm install @uiw/react-native-doc @kkt/doc -D # yarn add @uiw/react-native-doc @kkt/doc -D +``` + +**第二步配置命令** + +在`package.json`文件中配置命令 + +```json + // ... + "scripts":{ + "doc":"kktd @uiw/react-native-doc/doc/build" + } +``` + + +### License + +Licensed under the MIT License. diff --git a/packages/react-native-image-picker/package.json b/packages/react-native-image-picker/package.json new file mode 100644 index 000000000..e703a5fd1 --- /dev/null +++ b/packages/react-native-image-picker/package.json @@ -0,0 +1,48 @@ +{ + "name": "@uiw/react-native-image-picker", + "version": "3.2.3", + "description": "UIW for React Native", + "homepage": "https://uiwjs.github.io/react-native-uiw/", + "main": "lib/index.js", + "types": "lib/index.d.ts", + "scripts": {}, + "keywords": [ + "uiw", + "react-native", + "ImagePicker" + ], + "license": "MIT", + "repository": { + "type": "git", + "url": "https://github.com/uiwjs/react-native-uiw" + }, + "files": [ + "lib", + "src", + "README.md" + ], + "dependencies": { + "@babel/runtime": "~7.20.7", + "@types/lodash": "~4.14.191", + "@types/react-native": "0.69.1", + "@uiw/icons": "2.5.3", + "ahooks": "2.10.14", + "lodash": "4.17.21", + "prop-types": "15.7.2", + "react-native-svg": "12.1.1", + "@shopify/restyle":"~2.4.2", + "@uiw/react-native":"~3.2.3" + }, + "peerDependencies": { + "react": ">=16.9.0", + "react-native": ">=0.60.0", + "react-native-svg": ">=9.9.3" + }, + "devDependencies": { + "@babel/core": "~7.20.7", + "@babel/preset-typescript": "~7.18.6" + }, + "engines": { + "node": ">=16.0.0" + } +} \ No newline at end of file diff --git a/packages/react-native-image-picker/src/ImagePicker/index.tsx b/packages/react-native-image-picker/src/ImagePicker/index.tsx new file mode 100644 index 000000000..ccda9d823 --- /dev/null +++ b/packages/react-native-image-picker/src/ImagePicker/index.tsx @@ -0,0 +1,20 @@ +import React, { useState } from 'react'; +import { View, Text, StyleSheet } from 'react-native'; + +const ImagePicker = () => { + return ( + + ImagePicker + + ); +}; + +const styles = StyleSheet.create({ + tree: { + paddingHorizontal: 10, + paddingVertical: 5, + backgroundColor: '#fff', + }, +}); + +export default ImagePicker; diff --git a/packages/react-native-image-picker/src/index.ts b/packages/react-native-image-picker/src/index.ts new file mode 100644 index 000000000..4193e7bf1 --- /dev/null +++ b/packages/react-native-image-picker/src/index.ts @@ -0,0 +1,2 @@ +export { default as ImagePicker } from './ImagePicker'; +export * from './ImagePicker'; diff --git a/packages/react-native-image-picker/tsconfig.json b/packages/react-native-image-picker/tsconfig.json new file mode 100644 index 000000000..378754ad4 --- /dev/null +++ b/packages/react-native-image-picker/tsconfig.json @@ -0,0 +1,22 @@ +{ + "compilerOptions": { + "allowJs": false, + "skipLibCheck": true, + "esModuleInterop": true, + "outDir": "lib", + "declaration": true, + "jsx": "react-native", + "lib": ["es6"], + "resolveJsonModule": true, + "isolatedModules": true, + "moduleResolution": "node", + "allowSyntheticDefaultImports": true, + "strict": true, + "noEmit": false, + "target": "esnext", + "module": "esnext", + "baseUrl": "." + }, + "exclude": ["node_modules"], + "include": ["src"] +} diff --git a/website/src/component/Preview/index.js b/website/src/component/Preview/index.js index 318b92702..cc32182af 100644 --- a/website/src/component/Preview/index.js +++ b/website/src/component/Preview/index.js @@ -34,7 +34,7 @@ const getBooleanValue = (param, field, defaultValue) => { }; const Preview = ({ path, ...mdData }) => { - // const Preview = CodeLayout.Preview; + const Preview = CodeLayout.Preview; const Code = CodeLayout.Code; const Toolbar = CodeLayout.Toolbar; const $dom = useRef(null); @@ -70,9 +70,9 @@ const Preview = ({ path, ...mdData }) => { disableCheckered={getBooleanValue(param, 'disableCheckered', true)} bordered={getBooleanValue(param, 'bordered', true)} > - {/* + - */} + {param.title || '示例'}