diff --git a/.npmignore b/.npmignore index 960e504..375e7d7 100644 --- a/.npmignore +++ b/.npmignore @@ -1,4 +1,4 @@ .github/ node_modules/ - +examples package-lock.json \ No newline at end of file diff --git a/README.md b/README.md index cba7382..fe396b1 100644 --- a/README.md +++ b/README.md @@ -1,15 +1,11 @@ # React Native Dropdown Picker -

- - react-native-dropdown-picker is released under the MIT license. - - - Current npm package version. - -

+[![react-native-dropdown-picker is released under the MIT license.](https://img.shields.io/badge/license-MIT-blue.svg)](https://github.com/hossein-zare/react-native-dropdown-picker/blob/dev-5.x/LICENSE) +[![Current npm package version.](https://img.shields.io/npm/v/react-native-dropdown-picker?color=brightgreen&label=npm%20package)](https://www.npmjs.org/package/react-native-dropdown-picker) + +[//]: # (TODO: add badge linking to GitHub repo) + +--- ## Screenshots @@ -22,17 +18,24 @@ width="270" alt="Screenshot showing dark theme and parent items" />

-The above screenshots are taken from the following -example: [https://snack.expo.dev/8mHmLfcZf](https://snack.expo.dev/8mHmLfcZf) +The above screenshots were taken +from [this example](https://snack.expo.dev/8mHmLfcZf). ## Usage -See [the relevant documentation](https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage). +You can find runnable examples in the `examples` subdirectory, which is a +working [Expo](https://github.com/expo/expo) project demonstrating this library. +Navigate into the `examples` subdirectory, run `npm install`, and then run +`npx expo start` to see the examples working. + +For further information on how to use this library, +read [the relevant documentation](https://hossein-zare.github.io/react-native-dropdown-picker-website/docs/usage). ## Further documentation The docs can be read -at: [https://hossein-zare.github.io/react-native-dropdown-picker-website](https://hossein-zare.github.io/react-native-dropdown-picker-website). +at: [https://hossein-zare.github.io/react-native-dropdown-picker-website](https://hossein-zare.github.io/react-native-dropdown-picker-website) + The docs can be edited at: [https://github.com/hossein-zare/react-native-dropdown-picker-website](https://github.com/hossein-zare/react-native-dropdown-picker-website) @@ -60,9 +63,8 @@ To make a new release, follow these steps: works well * You can test changes to the library and experiment easily with [patch-package](https://www.npmjs.com/package/patch-package) -* Use `npm pack` to test the new version of the library locally and check it - works correctly; - see [https://dev.to/scooperdev/use-npm-pack-to-test-your-packages-locally-486e](https://dev.to/scooperdev/use-npm-pack-to-test-your-packages-locally-486e) +* Once you have made changes, and after finalizing them, use `npm pack` + to [test your new, changed version of the library locally and check it works correctly](https://dev.to/scooperdev/use-npm-pack-to-test-your-packages-locally-486e) * Make and merge a final PR into the development branch that increments the version number in `package.json` * Make and merge a PR from the development branch to the release branch diff --git a/examples/.gitignore b/examples/.gitignore new file mode 100644 index 0000000..05647d5 --- /dev/null +++ b/examples/.gitignore @@ -0,0 +1,35 @@ +# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files + +# dependencies +node_modules/ + +# Expo +.expo/ +dist/ +web-build/ + +# Native +*.orig.* +*.jks +*.p8 +*.p12 +*.key +*.mobileprovision + +# Metro +.metro-health-check* + +# debug +npm-debug.* +yarn-debug.* +yarn-error.* + +# macOS +.DS_Store +*.pem + +# local env files +.env*.local + +# typescript +*.tsbuildinfo diff --git a/examples/App.tsx b/examples/App.tsx new file mode 100644 index 0000000..8324338 --- /dev/null +++ b/examples/App.tsx @@ -0,0 +1,159 @@ +import React, { JSX } from 'react'; +import { StyleSheet, Text, View } from 'react-native'; +import DropDownPicker, { ItemType } from 'react-native-dropdown-picker'; +import JavascriptClassExample from './example-src-files/javascript-class-example'; +import JavascriptFunctionExample from './example-src-files/javascript-function-example'; +import TypescriptClassExample from './example-src-files/typescript-class-example'; +import TypescriptFunctionExample from './example-src-files/typescript-function-example'; + +enum ExampleComponent { + JavaScriptClassSingleValue, + JavaScriptClassMultiValue, + JavaScriptFunctionSingleValue, + JavaScriptFunctionMultiValue, + TypeScriptClassSingleValue, + TypeScriptClassMultiValue, + TypeScriptFunctionSingleValue, + TypeScriptFunctionMultiValue, +} + +const styles = StyleSheet.create({ + container: { + flex: 1, + // backgroundColor: "#fff", + // alignItems: "center", + // justifyContent: "center", + flexDirection: 'column', + margin: 3, + marginTop: 20, + padding: 3, + }, +}); + +const EXAMPLE_COMPONENT_ITEMS: Array> = [ + { + label: 'JavaScript; class component; single-item', + value: ExampleComponent.JavaScriptClassSingleValue, + }, + { + label: 'JavaScript; class component; multiple-item', + value: ExampleComponent.JavaScriptClassMultiValue, + }, + { + label: 'JavaScript; function component; single-item', + value: ExampleComponent.JavaScriptFunctionSingleValue, + }, + { + label: 'JavaScript; function component; multiple-item', + value: ExampleComponent.JavaScriptFunctionMultiValue, + }, + { + label: 'TypeScript; class component; single-item', + value: ExampleComponent.TypeScriptClassSingleValue, + }, + { + label: 'TypeScript; class component; multiple-item', + value: ExampleComponent.TypeScriptClassMultiValue, + }, + { + label: 'TypeScript; function component; single-item', + value: ExampleComponent.TypeScriptFunctionSingleValue, + }, + { + label: 'TypeScript; function component; multiple-item', + value: ExampleComponent.TypeScriptFunctionMultiValue, + }, +]; + +type Props = Record; +type State = { + currentExample: ExampleComponent; + examplePickerOpen: boolean; + exampleComponents: Array>; +}; + +export default class App extends React.Component { + constructor(props: Readonly) { + super(props); + this.state = { + currentExample: ExampleComponent.JavaScriptClassSingleValue, + exampleComponents: EXAMPLE_COMPONENT_ITEMS, + examplePickerOpen: false, + }; + + this.setOpen = this.setOpen.bind(this); + this.setCurrentExample = this.setCurrentExample.bind(this); + } + + private static getExample(egComponent: ExampleComponent): JSX.Element { + switch (egComponent) { + case ExampleComponent.JavaScriptClassSingleValue: + return ; + case ExampleComponent.JavaScriptClassMultiValue: + return ; + case ExampleComponent.JavaScriptFunctionSingleValue: + return ; + case ExampleComponent.JavaScriptFunctionMultiValue: + return ; + case ExampleComponent.TypeScriptClassSingleValue: + return ; + case ExampleComponent.TypeScriptClassMultiValue: + return ; + case ExampleComponent.TypeScriptFunctionSingleValue: + return ; + case ExampleComponent.TypeScriptFunctionMultiValue: + return ; + default: + throw new Error( + "couldn't match example component in getExample() in App.tsx. egComponent was: ", + egComponent, + ); + } + } + + setOpen(examplePickerOpen: boolean): void { + this.setState({ examplePickerOpen }); + } + + setCurrentExample( + callback: (prevState: ExampleComponent | null) => ExampleComponent | null, + ): void { + this.setState((state: Readonly) => ({ + currentExample: callback(state.currentExample), + })); + } + + // todo: fix picker items being under text + + render(): JSX.Element { + const { currentExample, examplePickerOpen, exampleComponents } = this.state; + + return ( + + + + Choose example: + + + + + + + + + + Example: + + + {App.getExample(currentExample)} + + + ); + } +} diff --git a/examples/app.json b/examples/app.json new file mode 100644 index 0000000..b5e52fc --- /dev/null +++ b/examples/app.json @@ -0,0 +1,28 @@ +{ + "expo": { + "name": "examples", + "slug": "examples", + "version": "1.0.0", + "orientation": "portrait", + "icon": "./assets/icon.png", + "userInterfaceStyle": "light", + "splash": { + "image": "./assets/splash.png", + "resizeMode": "contain", + "backgroundColor": "#ffffff" + }, + "assetBundlePatterns": ["**/*"], + "ios": { + "supportsTablet": true + }, + "android": { + "adaptiveIcon": { + "foregroundImage": "./assets/adaptive-icon.png", + "backgroundColor": "#ffffff" + } + }, + "web": { + "favicon": "./assets/favicon.png" + } + } +} diff --git a/examples/assets/adaptive-icon.png b/examples/assets/adaptive-icon.png new file mode 100644 index 0000000..03d6f6b Binary files /dev/null and b/examples/assets/adaptive-icon.png differ diff --git a/examples/assets/favicon.png b/examples/assets/favicon.png new file mode 100644 index 0000000..e75f697 Binary files /dev/null and b/examples/assets/favicon.png differ diff --git a/examples/assets/icon.png b/examples/assets/icon.png new file mode 100644 index 0000000..a0b1526 Binary files /dev/null and b/examples/assets/icon.png differ diff --git a/examples/assets/splash.png b/examples/assets/splash.png new file mode 100644 index 0000000..0e89705 Binary files /dev/null and b/examples/assets/splash.png differ diff --git a/examples/babel.config.js b/examples/babel.config.js new file mode 100644 index 0000000..9d89e13 --- /dev/null +++ b/examples/babel.config.js @@ -0,0 +1,6 @@ +module.exports = function (api) { + api.cache(true); + return { + presets: ['babel-preset-expo'], + }; +}; diff --git a/examples/example-src-files/javascript-class-example.jsx b/examples/example-src-files/javascript-class-example.jsx new file mode 100644 index 0000000..b5fd06e --- /dev/null +++ b/examples/example-src-files/javascript-class-example.jsx @@ -0,0 +1,116 @@ +import React, { Component } from 'react'; +import { Button, Text, View } from 'react-native'; +import DropDownPicker from 'react-native-dropdown-picker'; + +export default class JavascriptClassExample extends Component { + constructor(props) { + super(props); + + this.state = { + items: [ + { label: 'Bert', value: 'Bert' }, + { label: 'Darius', value: 'Darius' }, + { label: 'Maggie', value: 'Maggie' }, + { label: 'Rebecca', value: 'Rebecca' }, + { label: 'Ruby', value: 'Ruby' }, + { label: 'Trent', value: 'Trent' }, + ], + multiValue: null, + open: false, + singleValue: null, + }; + + this.setOpen = this.setOpen.bind(this); + this.setSingleValue = this.setSingleValue.bind(this); + this.setMultiValue = this.setMultiValue.bind(this); + this.setItems = this.setItems.bind(this); + } + + setOpen(open) { + this.setState({ + open, + }); + } + + setSingleValue(callback) { + this.setState((state) => ({ + singleValue: callback(state.singleValue), + })); + } + + setMultiValue(callback) { + this.setState((state) => ({ + multiValue: callback(state.multiValue), + })); + } + + setItems(callback) { + this.setState((state) => ({ + items: callback(state.items), + })); + } + + render() { + const { multiple } = this.props; + const { open, singleValue, multiValue, items } = this.state; + + return ( + + + + Choose a name (javascript class,{' '} + {multiple ? 'multiple-item' : 'single-item'}): + + + + + {multiple ? ( + + ) : ( + + )} + + + + + + {multiple ? 'Names currently are: ' : 'Name currently is: '} + {multiple + ? JSON.stringify(multiValue) + : JSON.stringify(singleValue)} + + + + +