From f238dd3734dd96e8ed65da990338a840a9232110 Mon Sep 17 00:00:00 2001 From: Aakash N S Date: Mon, 2 Nov 2015 02:32:01 +0530 Subject: [PATCH 1/8] Include installations instructions in README --- README.md | 50 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 50 insertions(+) diff --git a/README.md b/README.md index 63ec014..532b37e 100644 --- a/README.md +++ b/README.md @@ -1,2 +1,52 @@ # react-native-dialogs React Native wrappers for https://github.com/afollestad/material-dialogs + +Installation +------------ + +Install the npm package 'react-native-dialogs'. Inside your React Native project, run : +```bash +npm install --save react-native-dialogs +``` +Changes to your `package.json` should look like [this](https://github.com/aakashns/react-native-dialogs-example/commit/e6b83bf3d2238cf7e4ec3688519f38b2544ccad5). + +In `android/settings.gradle`, remove the line `include ':app'` and add the following lines : +``` +include ':app', ':react-native-dialogs' +project(':react-native-dialogs').projectDir = file('../node_modules/react-native-dialogs/android') +``` +The changes should look like [this](https://github.com/aakashns/react-native-dialogs-example/commit/32b4159725601e0ea17e140f0a9b62161d567804) +**NOTE** : If you have included other libraries in your project, the `include` line will contain the other dependencies too, apart from `':app'` and `':react-native-dialogs'` + +In `android/app/build.gradle`, add a dependency to `':react-native-dialogs'` and URL of the Jitpack maven repository (to download the library https://github.com/afollestad/material-dialogs) : +``` +repositories { + maven { url "https://jitpack.io" } +} + +dependencies { + // after other dependencies + compile project(':react-native-dialogs') +} +``` +The changes should look like [this](https://github.com/aakashns/react-native-dialogs-example/commit/b58086d8fb9ece99f0e678dd8bf0e689a856bd43) + +Next, you need to change the `MainActivity` of your app to extends `FragmentActivity` instead of `Activity` (otherwise dialogs will not be rendered), and register `ReactNativeDialogsPackage` : +```java +import android.support.v4.app.FragmentActivity; +import com.aakashns.reactnativedialogs.ReactNativeDialogsPackage; + +public class MainActivity extends FragmentActivity implements DefaultHardwareBackBtnHandler { + //... + + mReactInstanceManager = ReactInstanceManager.builder() + //... + .addPackage(new MainReactPackage()) + .addPackage(new ReactNativeDialogsPackage(this)) // <- ADD THIS LINE! + //... + .build(); + +``` +See [this changelog](https://github.com/aakashns/react-native-dialogs-example/commit/52cac27756963bcd2f4fdcd039e1a78028bb0abd) for reference + +Now you're finally ready to start using module in your React Native application. See [this changelog](https://github.com/aakashns/react-native-dialogs-example/commit/2d8e02c22275479d2fbbb89f99dcb846834bec9d) for an example that uses `DialogAndroid`. From 84f1701ea1271671c5245326c9f1bf06ed986345 Mon Sep 17 00:00:00 2001 From: Aakash N S Date: Mon, 2 Nov 2015 02:34:44 +0530 Subject: [PATCH 2/8] Update README.md --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index 532b37e..597cdac 100644 --- a/README.md +++ b/README.md @@ -4,18 +4,16 @@ React Native wrappers for https://github.com/afollestad/material-dialogs Installation ------------ -Install the npm package 'react-native-dialogs'. Inside your React Native project, run : +Install the npm package 'react-native-dialogs'. Inside your React Native project, run ([example](https://github.com/aakashns/react-native-dialogs-example/commit/e6b83bf3d2238cf7e4ec3688519f38b2544ccad5)): ```bash npm install --save react-native-dialogs ``` -Changes to your `package.json` should look like [this](https://github.com/aakashns/react-native-dialogs-example/commit/e6b83bf3d2238cf7e4ec3688519f38b2544ccad5). -In `android/settings.gradle`, remove the line `include ':app'` and add the following lines : +In `android/settings.gradle`, remove the line `include ':app'` and add the following lines ([example](https://github.com/aakashns/react-native-dialogs-example/commit/32b4159725601e0ea17e140f0a9b62161d567804)): ``` include ':app', ':react-native-dialogs' project(':react-native-dialogs').projectDir = file('../node_modules/react-native-dialogs/android') ``` -The changes should look like [this](https://github.com/aakashns/react-native-dialogs-example/commit/32b4159725601e0ea17e140f0a9b62161d567804) **NOTE** : If you have included other libraries in your project, the `include` line will contain the other dependencies too, apart from `':app'` and `':react-native-dialogs'` In `android/app/build.gradle`, add a dependency to `':react-native-dialogs'` and URL of the Jitpack maven repository (to download the library https://github.com/afollestad/material-dialogs) : @@ -47,6 +45,6 @@ public class MainActivity extends FragmentActivity implements DefaultHardwareBac .build(); ``` -See [this changelog](https://github.com/aakashns/react-native-dialogs-example/commit/52cac27756963bcd2f4fdcd039e1a78028bb0abd) for reference +See [this changelog](https://github.com/aakashns/react-native-dialogs-example/commit/52cac27756963bcd2f4fdcd039e1a78028bb0abd) for reference. Now you're finally ready to start using module in your React Native application. See [this changelog](https://github.com/aakashns/react-native-dialogs-example/commit/2d8e02c22275479d2fbbb89f99dcb846834bec9d) for an example that uses `DialogAndroid`. From 4505ab3e916526acc09f3ec0574667a50e36887d Mon Sep 17 00:00:00 2001 From: Aakash N S Date: Mon, 2 Nov 2015 02:35:17 +0530 Subject: [PATCH 3/8] Update README.md --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 597cdac..8bf12bf 100644 --- a/README.md +++ b/README.md @@ -14,7 +14,7 @@ In `android/settings.gradle`, remove the line `include ':app'` and add the follo include ':app', ':react-native-dialogs' project(':react-native-dialogs').projectDir = file('../node_modules/react-native-dialogs/android') ``` -**NOTE** : If you have included other libraries in your project, the `include` line will contain the other dependencies too, apart from `':app'` and `':react-native-dialogs'` +**NOTE** : If you have included other libraries in your project, the `include` line will contain the other dependencies too. In `android/app/build.gradle`, add a dependency to `':react-native-dialogs'` and URL of the Jitpack maven repository (to download the library https://github.com/afollestad/material-dialogs) : ``` From f82ec460026bb9f49d97c211326af8a802e21d27 Mon Sep 17 00:00:00 2001 From: Aakash N S Date: Mon, 2 Nov 2015 02:58:12 +0530 Subject: [PATCH 4/8] Update README.md --- README.md | 29 ++++++++++++++++++++++++++++- 1 file changed, 28 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 8bf12bf..c4180be 100644 --- a/README.md +++ b/README.md @@ -27,7 +27,7 @@ dependencies { compile project(':react-native-dialogs') } ``` -The changes should look like [this](https://github.com/aakashns/react-native-dialogs-example/commit/b58086d8fb9ece99f0e678dd8bf0e689a856bd43) +The changes should look like [this](https://github.com/aakashns/react-native-dialogs-example/commit/b58086d8fb9ece99f0e678dd8bf0e689a856bd43). Next, you need to change the `MainActivity` of your app to extends `FragmentActivity` instead of `Activity` (otherwise dialogs will not be rendered), and register `ReactNativeDialogsPackage` : ```java @@ -48,3 +48,30 @@ public class MainActivity extends FragmentActivity implements DefaultHardwareBac See [this changelog](https://github.com/aakashns/react-native-dialogs-example/commit/52cac27756963bcd2f4fdcd039e1a78028bb0abd) for reference. Now you're finally ready to start using module in your React Native application. See [this changelog](https://github.com/aakashns/react-native-dialogs-example/commit/2d8e02c22275479d2fbbb89f99dcb846834bec9d) for an example that uses `DialogAndroid`. + +Usage +----- +```javascript +var DialogAndroid = require('react-native-dialogs'); + +var options = { + title: 'Hello, World!', + content: 'I\'m just simple Dialog', + positiveText: 'OK', + negativeText: 'Cancel' +}; + +var showDialog = function () { + var dialog = new DialogAndroid(); + dialog.set(options); + dialog.show(); +} +``` +Creation of a dialog works in 3 steps : +1. Create a new dialog using `new DialogAndroid()`. +2. Set some options using `dialog.set(options)`. `set` can be called multiple times, and options from multiple calls will be merged. +3. Show the dialog using `dialog.show()`. + +This library is a thin wrapper over [afollestad/material-dialogs](https://github.com/afollestad/material-dialogs), which provides builders for showing Material Design dialogs in Android apps. The options provided to `set` map more or less directly to the methods provided in the original library. See [its documentation](https://github.com/afollestad/material-dialogs#basic-dialog) for reference. + +The following options are currently supported : From b17ebcc8def1fcf382a3d3bfae445e7044cb8628 Mon Sep 17 00:00:00 2001 From: Aakash N S Date: Mon, 2 Nov 2015 03:37:56 +0530 Subject: [PATCH 5/8] Update README.md --- README.md | 35 ++++++++++++++++++++++++++++++++++- 1 file changed, 34 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index c4180be..5b16a96 100644 --- a/README.md +++ b/README.md @@ -74,4 +74,37 @@ Creation of a dialog works in 3 steps : This library is a thin wrapper over [afollestad/material-dialogs](https://github.com/afollestad/material-dialogs), which provides builders for showing Material Design dialogs in Android apps. The options provided to `set` map more or less directly to the methods provided in the original library. See [its documentation](https://github.com/afollestad/material-dialogs#basic-dialog) for reference. -The following options are currently supported : +The following options are currently supported (value type is `String` unless mentioned otherwise) : +* `title` +* `content` +* `positiveText` +* `onPositive` (function with no arguments) +* `negativeText` +* `onNegative` (function with no arguments) +* `neutralText` +* `onNeutral` (function with no arguments) +* `onAny` (function with no arguments) +* `items` (array of strings) +* `itemsCallback` (function with 2 arguments : selectedIndex (int) and selectedItem (string)) +* `itemsCallbackSingleChoice` (function with 2 arguments : selectedIndex (int) and selectedItem (string)) +* `selectedIndex` (int) - set the preselected index for Single Choice List +* `itemsCallbackMultiChoice` (function with 2 arguments : selected indices (array of ints) and selected items (array of strings) +* `selectedIndices` (array of ints) - set the preselected indices for Multiple Choice List +* `multiChoiceClearButton` (boolean) - provide a 'Clear' button in Multiple Choice List +* `autoDismiss` (boolean) +* `forceStacking` (boolean) +* `alwaysCallSingleChoiceCallback` (boolean) +* `alwaysCallMultipleChoiceCallback` (boolean) +* `cancelable` (boolean) +* `showListener` (function) +* `cancelListener` (function) +* `dismissListener` (function) +* `input` - Object containing the following keys (all optional) : + * `hint` + * `prefill` + * `allowEmptyInput` (boolean) + * `minLength` (int) + * `maxLength` (int) + * `type` (int) + * `callback` (function with 1 argument : user provided input) +* `alwaysCallInputCallback` (boolean) From 0b86b440baacdfac19b7d16e8831340c59145e07 Mon Sep 17 00:00:00 2001 From: Aakash N S Date: Mon, 2 Nov 2015 03:45:36 +0530 Subject: [PATCH 6/8] Update README.md --- README.md | 62 +++++++++++++++++++++++++++---------------------------- 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/README.md b/README.md index 5b16a96..4e4e8e7 100644 --- a/README.md +++ b/README.md @@ -75,36 +75,36 @@ Creation of a dialog works in 3 steps : This library is a thin wrapper over [afollestad/material-dialogs](https://github.com/afollestad/material-dialogs), which provides builders for showing Material Design dialogs in Android apps. The options provided to `set` map more or less directly to the methods provided in the original library. See [its documentation](https://github.com/afollestad/material-dialogs#basic-dialog) for reference. The following options are currently supported (value type is `String` unless mentioned otherwise) : -* `title` -* `content` -* `positiveText` -* `onPositive` (function with no arguments) -* `negativeText` -* `onNegative` (function with no arguments) -* `neutralText` -* `onNeutral` (function with no arguments) -* `onAny` (function with no arguments) -* `items` (array of strings) -* `itemsCallback` (function with 2 arguments : selectedIndex (int) and selectedItem (string)) -* `itemsCallbackSingleChoice` (function with 2 arguments : selectedIndex (int) and selectedItem (string)) -* `selectedIndex` (int) - set the preselected index for Single Choice List -* `itemsCallbackMultiChoice` (function with 2 arguments : selected indices (array of ints) and selected items (array of strings) -* `selectedIndices` (array of ints) - set the preselected indices for Multiple Choice List +* [`title`](https://github.com/afollestad/material-dialogs#basic-dialog) +* [`content`](https://github.com/afollestad/material-dialogs#basic-dialog) +* [`positiveText`](https://github.com/afollestad/material-dialogs#basic-dialog) +* [`onPositive`](https://github.com/afollestad/material-dialogs#callbacks) (function with no arguments) +* [`negativeText`](https://github.com/afollestad/material-dialogs#basic-dialog) +* [`onNegative`](https://github.com/afollestad/material-dialogs#callbacks) (function with no arguments) +* [`neutralText`](https://github.com/afollestad/material-dialogs#neutral-action-button) +* [`onNeutral`](https://github.com/afollestad/material-dialogs#callbacks) (function with no arguments) +* [`onAny`](https://github.com/afollestad/material-dialogs#callbacks) (function with no arguments) +* [`items`](https://github.com/afollestad/material-dialogs#list-dialogs) (array of strings) +* [`itemsCallback`](https://github.com/afollestad/material-dialogs#list-dialogs) (function with 2 arguments : selectedIndex (int) and selectedItem (string)) +* [`itemsCallbackSingleChoice`](https://github.com/afollestad/material-dialogs#single-choice-list-dialogs) (function with 2 arguments : selectedIndex (int) and selectedItem (string)) +* [`selectedIndex`](https://github.com/afollestad/material-dialogs#single-choice-list-dialogs) (int) - set the preselected index for Single Choice List +* [`itemsCallbackMultiChoice`](https://github.com/afollestad/material-dialogs#multi-choice-list-dialogs) (function with 2 arguments : selected indices (array of ints) and selected items (array of strings) +* [`selectedIndices`](https://github.com/afollestad/material-dialogs#multi-choice-list-dialogs) (array of ints) - set the preselected indices for Multiple Choice List * `multiChoiceClearButton` (boolean) - provide a 'Clear' button in Multiple Choice List * `autoDismiss` (boolean) -* `forceStacking` (boolean) -* `alwaysCallSingleChoiceCallback` (boolean) -* `alwaysCallMultipleChoiceCallback` (boolean) -* `cancelable` (boolean) -* `showListener` (function) -* `cancelListener` (function) -* `dismissListener` (function) -* `input` - Object containing the following keys (all optional) : - * `hint` - * `prefill` - * `allowEmptyInput` (boolean) - * `minLength` (int) - * `maxLength` (int) - * `type` (int) - * `callback` (function with 1 argument : user provided input) -* `alwaysCallInputCallback` (boolean) +* [`forceStacking`](https://github.com/afollestad/material-dialogs#stacked-action-buttons) (boolean) +* [`alwaysCallSingleChoiceCallback`](https://github.com/afollestad/material-dialogs#single-choice-list-dialogs) (boolean) +* [`alwaysCallMultipleChoiceCallback`](https://github.com/afollestad/material-dialogs#multi-choice-list-dialogs) (boolean) +* [`cancelable`](https://github.com/afollestad/material-dialogs#show-cancel-and-dismiss-callbacks) (boolean) +* [`showListener`](https://github.com/afollestad/material-dialogs#show-cancel-and-dismiss-callbacks) (function) +* [`cancelListener`](https://github.com/afollestad/material-dialogs#show-cancel-and-dismiss-callbacks) (function) +* [`dismissListener`](https://github.com/afollestad/material-dialogs#show-cancel-and-dismiss-callbacks) (function) +* [`input`](https://github.com/afollestad/material-dialogs#input-dialogs) - Object containing the following keys (all optional except callback) : + * [`hint`](https://github.com/afollestad/material-dialogs#input-dialogs) + * [`prefill`](https://github.com/afollestad/material-dialogs#input-dialogs) + * [`allowEmptyInput`](https://github.com/afollestad/material-dialogs#input-dialogs) (boolean) + * [`minLength`](https://github.com/afollestad/material-dialogs#limiting-input-length) (int) + * [`maxLength`](https://github.com/afollestad/material-dialogs#limiting-input-length) (int) + * [`type`](https://github.com/afollestad/material-dialogs#input-dialogs) (int) + * [`callback`](https://github.com/afollestad/material-dialogs#input-dialogs) (function with 1 argument : user provided input) +* [`alwaysCallInputCallback`](https://github.com/afollestad/material-dialogs#input-dialogs) (boolean) From 11558e9880f400a83326dbff0a29667068f62d89 Mon Sep 17 00:00:00 2001 From: Aakash N S Date: Mon, 2 Nov 2015 03:55:33 +0530 Subject: [PATCH 7/8] Update README.md --- README.md | 80 ++++++++++++++++++++++++++++++++++++++++++++++++++++++- 1 file changed, 79 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 4e4e8e7..ed316c0 100644 --- a/README.md +++ b/README.md @@ -1,5 +1,6 @@ # react-native-dialogs -React Native wrappers for https://github.com/afollestad/material-dialogs +Material Design dialogs for React Native Android apps (wrappers over https://github.com/afollestad/material-dialogs) + Installation ------------ @@ -108,3 +109,80 @@ The following options are currently supported (value type is `String` unless men * [`type`](https://github.com/afollestad/material-dialogs#input-dialogs) (int) * [`callback`](https://github.com/afollestad/material-dialogs#input-dialogs) (function with 1 argument : user provided input) * [`alwaysCallInputCallback`](https://github.com/afollestad/material-dialogs#input-dialogs) (boolean) + +Examples +-------- + +Try out the following values for option (taken from [examples/ExampleApp/dialogData.js](./examples/ExampleApp/dialogData.js)): + +```javascript +{ + "title": "Use Google's Location Services?", + "content": "This app wants to access your location.", + "positiveText": "Agree", + "negativeText": "Disagree" +} +``` + +```javascript +{ + "title": "Use Google's Location Services?", + "content": "Let Google help apps determine location. This means sending anonymous location data to Google, even when no apps are running.", + "positiveText": "Agree", + "negativeText": "Disagree", + "neutralText": "More Info", + "onPositive": () => ToastAndroid.show("POSITIVE!", ToastAndroid.SHORT), + "onNegative": () => ToastAndroid.show("NEGATIVE!", ToastAndroid.SHORT), + "onNeutral": () => ToastAndroid.show("NEUTRAL!", ToastAndroid.SHORT), +} +``` + +```javascript +"data": { + "items": [ + "Twitter", + "Google+", + "Instagram", + "Facebook" + ], + "title": "Social Networks", + itemsCallback: (id, text) => ToastAndroid.show(id + ": " + text, ToastAndroid.SHORT); +} +``` + +```javascript +"data": { + "items": [ + "Twitter", + "Google+", + "Instagram", + "Facebook" + ], + "title": "Social Networks", + itemsCallbackSingleChoice: (id, text) => ToastAndroid.show(id + ": " + text, ToastAndroid.SHORT); +} +``` + +```javascript +"data": { + "items": [ + "Twitter", + "Google+", + "Instagram", + "Facebook" + ], + "title": "Social Networks", + itemsCallbackMultiChoice: (id, text) => ToastAndroid.show(id + ": " + text, ToastAndroid.SHORT); +} +``` + + + +Known Issues +------------ +TODO + +Upcoming Features +------- +TODO + From 8609552cf013aae77badbe1c82be0990d065d9e8 Mon Sep 17 00:00:00 2001 From: Aakash N S Date: Mon, 2 Nov 2015 03:56:20 +0530 Subject: [PATCH 8/8] Update README.md --- README.md | 1 + 1 file changed, 1 insertion(+) diff --git a/README.md b/README.md index ed316c0..aa01d44 100644 --- a/README.md +++ b/README.md @@ -172,6 +172,7 @@ Try out the following values for option (taken from [examples/ExampleApp/dialogD "Facebook" ], "title": "Social Networks", + "positiveText": "Choose", itemsCallbackMultiChoice: (id, text) => ToastAndroid.show(id + ": " + text, ToastAndroid.SHORT); } ```