diff --git a/IconicExample/App.js b/IconicExample/App.js index afe65f4..ff8cccd 100644 --- a/IconicExample/App.js +++ b/IconicExample/App.js @@ -44,6 +44,8 @@ export default class App extends Component<{}> { ] } else if (Platform.OS === "android") { shapes = [ + // RNIconic.Shapes.DownBasic, + // RNIconic.Shapes.UpBasic, RNIconic.Shapes.BURGER, RNIconic.Shapes.ARROW, RNIconic.Shapes.X, @@ -52,7 +54,7 @@ export default class App extends Component<{}> { } return - + ; } } diff --git a/IconicExample/android/app/build.gradle b/IconicExample/android/app/build.gradle index f43480a..ca5af80 100644 --- a/IconicExample/android/app/build.gradle +++ b/IconicExample/android/app/build.gradle @@ -94,13 +94,13 @@ def enableSeparateBuildPerCPUArchitecture = false def enableProguardInReleaseBuilds = false android { - compileSdkVersion 23 - buildToolsVersion "23.0.1" + compileSdkVersion 27 + buildToolsVersion "27.0.3" defaultConfig { applicationId "com.iconicexample" minSdkVersion 16 - targetSdkVersion 22 + targetSdkVersion 27 versionCode 1 versionName "1.0" ndk { @@ -139,7 +139,7 @@ android { dependencies { compile project(':react-native-iconic') compile fileTree(dir: "libs", include: ["*.jar"]) - compile "com.android.support:appcompat-v7:23.0.1" + compile "com.android.support:appcompat-v7:27.0.2" compile "com.facebook.react:react-native:+" // From node_modules } diff --git a/IconicExample/android/build.gradle b/IconicExample/android/build.gradle index c5fecab..9622df0 100644 --- a/IconicExample/android/build.gradle +++ b/IconicExample/android/build.gradle @@ -3,6 +3,7 @@ buildscript { repositories { jcenter() + google() } dependencies { classpath 'com.android.tools.build:gradle:3.0.1' @@ -20,5 +21,7 @@ allprojects { // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm url "$rootDir/../node_modules/react-native/android" } + maven { url "https://jitpack.io" } + google() } } diff --git a/IconicExample/ios/IconicExample.xcodeproj/project.pbxproj b/IconicExample/ios/IconicExample.xcodeproj/project.pbxproj index 1633717..3f3cdd8 100644 --- a/IconicExample/ios/IconicExample.xcodeproj/project.pbxproj +++ b/IconicExample/ios/IconicExample.xcodeproj/project.pbxproj @@ -1010,6 +1010,7 @@ "-lc++", ); PRODUCT_NAME = IconicExample; + TARGETED_DEVICE_FAMILY = "1,2"; VERSIONING_SYSTEM = "apple-generic"; }; name = Debug; @@ -1031,6 +1032,7 @@ "-lc++", ); PRODUCT_NAME = IconicExample; + TARGETED_DEVICE_FAMILY = "1,2"; VERSIONING_SYSTEM = "apple-generic"; }; name = Release; diff --git a/LICENSE b/LICENSE index 59359c2..d597130 100644 --- a/LICENSE +++ b/LICENSE @@ -1,21 +1,203 @@ -MIT License - -Copyright (c) 2018 Pranav Raj Singh Chauhan - -Permission is hereby granted, free of charge, to any person obtaining a copy -of this software and associated documentation files (the "Software"), to deal -in the Software without restriction, including without limitation the rights -to use, copy, modify, merge, publish, distribute, sublicense, and/or sell -copies of the Software, and to permit persons to whom the Software is -furnished to do so, subject to the following conditions: - -The above copyright notice and this permission notice shall be included in all -copies or substantial portions of the Software. - -THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR -IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, -FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE -AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER -LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, -OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE -SOFTWARE. + + + Apache License + Version 2.0, January 2004 + http://www.apache.org/licenses/ + + TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION + + 1. Definitions. + + "License" shall mean the terms and conditions for use, reproduction, + and distribution as defined by Sections 1 through 9 of this document. + + "Licensor" shall mean the copyright owner or entity authorized by + the copyright owner that is granting the License. + + "Legal Entity" shall mean the union of the acting entity and all + other entities that control, are controlled by, or are under common + control with that entity. For the purposes of this definition, + "control" means (i) the power, direct or indirect, to cause the + direction or management of such entity, whether by contract or + otherwise, or (ii) ownership of fifty percent (50%) or more of the + outstanding shares, or (iii) beneficial ownership of such entity. + + "You" (or "Your") shall mean an individual or Legal Entity + exercising permissions granted by this License. + + "Source" form shall mean the preferred form for making modifications, + including but not limited to software source code, documentation + source, and configuration files. + + "Object" form shall mean any form resulting from mechanical + transformation or translation of a Source form, including but + not limited to compiled object code, generated documentation, + and conversions to other media types. + + "Work" shall mean the work of authorship, whether in Source or + Object form, made available under the License, as indicated by a + copyright notice that is included in or attached to the work + (an example is provided in the Appendix below). + + "Derivative Works" shall mean any work, whether in Source or Object + form, that is based on (or derived from) the Work and for which the + editorial revisions, annotations, elaborations, or other modifications + represent, as a whole, an original work of authorship. For the purposes + of this License, Derivative Works shall not include works that remain + separable from, or merely link (or bind by name) to the interfaces of, + the Work and Derivative Works thereof. + + "Contribution" shall mean any work of authorship, including + the original version of the Work and any modifications or additions + to that Work or Derivative Works thereof, that is intentionally + submitted to Licensor for inclusion in the Work by the copyright owner + or by an individual or Legal Entity authorized to submit on behalf of + the copyright owner. For the purposes of this definition, "submitted" + means any form of electronic, verbal, or written communication sent + to the Licensor or its representatives, including but not limited to + communication on electronic mailing lists, source code control systems, + and issue tracking systems that are managed by, or on behalf of, the + Licensor for the purpose of discussing and improving the Work, but + excluding communication that is conspicuously marked or otherwise + designated in writing by the copyright owner as "Not a Contribution." + + "Contributor" shall mean Licensor and any individual or Legal Entity + on behalf of whom a Contribution has been received by Licensor and + subsequently incorporated within the Work. + + 2. Grant of Copyright License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + copyright license to reproduce, prepare Derivative Works of, + publicly display, publicly perform, sublicense, and distribute the + Work and such Derivative Works in Source or Object form. + + 3. Grant of Patent License. Subject to the terms and conditions of + this License, each Contributor hereby grants to You a perpetual, + worldwide, non-exclusive, no-charge, royalty-free, irrevocable + (except as stated in this section) patent license to make, have made, + use, offer to sell, sell, import, and otherwise transfer the Work, + where such license applies only to those patent claims licensable + by such Contributor that are necessarily infringed by their + Contribution(s) alone or by combination of their Contribution(s) + with the Work to which such Contribution(s) was submitted. If You + institute patent litigation against any entity (including a + cross-claim or counterclaim in a lawsuit) alleging that the Work + or a Contribution incorporated within the Work constitutes direct + or contributory patent infringement, then any patent licenses + granted to You under this License for that Work shall terminate + as of the date such litigation is filed. + + 4. Redistribution. You may reproduce and distribute copies of the + Work or Derivative Works thereof in any medium, with or without + modifications, and in Source or Object form, provided that You + meet the following conditions: + + (a) You must give any other recipients of the Work or + Derivative Works a copy of this License; and + + (b) You must cause any modified files to carry prominent notices + stating that You changed the files; and + + (c) You must retain, in the Source form of any Derivative Works + that You distribute, all copyright, patent, trademark, and + attribution notices from the Source form of the Work, + excluding those notices that do not pertain to any part of + the Derivative Works; and + + (d) If the Work includes a "NOTICE" text file as part of its + distribution, then any Derivative Works that You distribute must + include a readable copy of the attribution notices contained + within such NOTICE file, excluding those notices that do not + pertain to any part of the Derivative Works, in at least one + of the following places: within a NOTICE text file distributed + as part of the Derivative Works; within the Source form or + documentation, if provided along with the Derivative Works; or, + within a display generated by the Derivative Works, if and + wherever such third-party notices normally appear. The contents + of the NOTICE file are for informational purposes only and + do not modify the License. You may add Your own attribution + notices within Derivative Works that You distribute, alongside + or as an addendum to the NOTICE text from the Work, provided + that such additional attribution notices cannot be construed + as modifying the License. + + You may add Your own copyright statement to Your modifications and + may provide additional or different license terms and conditions + for use, reproduction, or distribution of Your modifications, or + for any such Derivative Works as a whole, provided Your use, + reproduction, and distribution of the Work otherwise complies with + the conditions stated in this License. + + 5. Submission of Contributions. Unless You explicitly state otherwise, + any Contribution intentionally submitted for inclusion in the Work + by You to the Licensor shall be under the terms and conditions of + this License, without any additional terms or conditions. + Notwithstanding the above, nothing herein shall supersede or modify + the terms of any separate license agreement you may have executed + with Licensor regarding such Contributions. + + 6. Trademarks. This License does not grant permission to use the trade + names, trademarks, service marks, or product names of the Licensor, + except as required for reasonable and customary use in describing the + origin of the Work and reproducing the content of the NOTICE file. + + 7. Disclaimer of Warranty. Unless required by applicable law or + agreed to in writing, Licensor provides the Work (and each + Contributor provides its Contributions) on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or + implied, including, without limitation, any warranties or conditions + of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A + PARTICULAR PURPOSE. You are solely responsible for determining the + appropriateness of using or redistributing the Work and assume any + risks associated with Your exercise of permissions under this License. + + 8. Limitation of Liability. In no event and under no legal theory, + whether in tort (including negligence), contract, or otherwise, + unless required by applicable law (such as deliberate and grossly + negligent acts) or agreed to in writing, shall any Contributor be + liable to You for damages, including any direct, indirect, special, + incidental, or consequential damages of any character arising as a + result of this License or out of the use or inability to use the + Work (including but not limited to damages for loss of goodwill, + work stoppage, computer failure or malfunction, or any and all + other commercial damages or losses), even if such Contributor + has been advised of the possibility of such damages. + + 9. Accepting Warranty or Additional Liability. While redistributing + the Work or Derivative Works thereof, You may choose to offer, + and charge a fee for, acceptance of support, warranty, indemnity, + or other liability obligations and/or rights consistent with this + License. However, in accepting such obligations, You may act only + on Your own behalf and on Your sole responsibility, not on behalf + of any other Contributor, and only if You agree to indemnify, + defend, and hold each Contributor harmless for any liability + incurred by, or claims asserted against, such Contributor by reason + of your accepting any such warranty or additional liability. + + END OF TERMS AND CONDITIONS + + APPENDIX: How to apply the Apache License to your work. + + To apply the Apache License to your work, attach the following + boilerplate notice, with the fields enclosed by brackets "[]" + replaced with your own identifying information. (Don't include + the brackets!) The text should be enclosed in the appropriate + comment syntax for the file format. We also recommend that a + file or class name and description of purpose be included on the + same "printed page" as the copyright notice for easier + identification within third-party archives. + + Copyright @ [Pranav Raj Singh Chauhan] + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. \ No newline at end of file diff --git a/README.md b/README.md index 598a666..311c4b1 100644 --- a/README.md +++ b/README.md @@ -24,18 +24,36 @@ Before we dive into on how to use this library. We would like to thank all the c | **Android: [Android: balysv/material-menu](https://github.com/balysv/material-menu)** | | ----------------- | -| | +| | > Morphing Android menu, back, dismiss and check buttons +| **Android: [Android: zagum/Android-ExpandIcon](https://github.com/zagum/Android-ExpandIcon)** | +| ----------------- | +| | + + + ## Getting started `$ npm install react-native-iconic --save` `$ react-native link react-native-iconic` -- **MAC** +- **Android** + +Please add below snippet into your app build.gradle: + +```javascript +allprojects { + repositories { + maven { url 'https://jitpack.io' } + } +} +``` + +- **iOS** `$ cd ./node_modules/react-native-iconic/ios/ && pod install` @@ -45,36 +63,45 @@ Before we dive into on how to use this library. We would like to thank all the c import RNIconic from 'react-native-iconic'; // TODO: What to do with the module? - + ``` - + + ## iOS Shapes -`Add, Minus, Close, Back, Forward, Menu, Download, Share, DownBasic, UpBasic, Paused, DownArrow, RightTriangle, LeftTriangle, UpTriangle, DownTriangle, Ok, Rewind, FastForward, Square` +- `Add, Minus, Close, Back, Forward, Menu, Download, Share, DownBasic, UpBasic, Paused, DownArrow, RightTriangle, LeftTriangle, UpTriangle, DownTriangle, Ok, Rewind, FastForward, Square` ## Android Shapes -`BURGER, ARROW, X, CHECK` +- `BURGER, ARROW, X, CHECK` +- `DownBasic, UpBasic` ## Props - + - **Generic** | Prop | Type | Default | Note | | ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- | | `shape` | `array` | | Array of shape sequence | `selection` | `int` | | Default position of shape -| `tintColor` | `string` | | Color of the icon line | -| `lineThickness` | `string` | | Thickness of icon line | +| `color` | `string` | | Specify icon color | | `size` | `int` | | Size of Icon | | | `disabled` | `bool` | | Disabling the Icon Button | | | `onChange` | `func` | | It is invoke then the value of shine button is change +| `tintColor` | `array` | | Color of background circle | + + - **iOS** + +| Prop | Type | Default | Note | +| ----------------- | ---------- | ------- | ---------------------------------------------------------------------------------------------------------- | +| `lineThickness` | `string` | | Thickness of icon line | | `rounded` | `bool` | | For having circle in background | -| `roundBackgroundColor` | `array` | | Color of background circle | + ## Credits -- iOS lib [iOS: VBFPopFlatButton](https://github.com/victorBaro/VBFPopFlatButton) for iOS implement -- Android lib [Android: balysv/material-menu](https://github.com/balysv/material-menu) for Android implement +- iOS Lib: [VBFPopFlatButton](https://github.com/victorBaro/VBFPopFlatButton) for iOS implement +- Android Lib: [balysv/material-menu](https://github.com/balysv/material-menu) for Android implement +- Android Lib: [zagum/Android-ExpandIcon](https://github.com/zagum/Android-ExpandIcon) ## Contribution Contributions are welcome and are greatly appreciated! Every little bit helps, and credit will always be given. @@ -84,81 +111,5 @@ Contributions are welcome and are greatly appreciated! Every little bit helps, a ## License Copyright @2017 Pranav Raj Singh Chauhan -RNIconic is provided under the MIT License. - - - - -## Other Contributions - -| [awesome-react-native-native-modules](https://github.com/prscX/awesome-react-native-native-modules) | -| ----------------- | -| | - - -| [react-native-spruce](https://github.com/prscX/react-native-spruce) | -| ----------------- | -| | - - -| [react-native-taptargetview](https://github.com/prscX/react-native-taptargetview) & [react-native-material-showcase-ios](https://github.com/prscX/react-native-material-showcase-ios) | -| ----------------- | -| | - - -| [react-native-bottom-action-sheet](https://github.com/prscX/react-native-bottom-action-sheet) | -| ----------------- | -| | - - -| [react-native-popover-menu](https://github.com/prscX/react-native-popover-menu) | -| ----------------- | -| | - - -| [react-native-tooltips](https://github.com/prscX/react-native-tooltips) | -| ----------------- | -| | - - -| [react-native-shine-button](https://github.com/prscX/react-native-shine-button) | -| ----------------- | -| | - - - -| [react-native-download-button](https://github.com/prscX/react-native-download-button) | -| ----------------- | -| | - - -| [react-native-siri-wave-view](https://github.com/prscX/react-native-siri-wave-view) | -| ----------------- | -| | - - -| [react-native-material-shadows](https://github.com/prscX/react-native-material-shadows) | -| ----------------- | -| | - - -| [react-native-gradient-blur-view](https://github.com/prscX/react-native-gradient-blur-view) | -| ----------------- | -| | - - -| [react-native-about-libraries](https://github.com/prscX/react-native-about-libraries) | -| ----------------- | -| | - - - -| [vs-essential-plugins](https://github.com/prscX/vs-essential-plugins) | -| ----------------- | -| | - - -| [prettier-pack](https://github.com/prscX/prettier-pack) | -| ----------------- | -| | +RNIconic is provided under the Apache 2.0 License. diff --git a/RNIconic.js b/RNIconic.js index d9fe56b..a5ef018 100644 --- a/RNIconic.js +++ b/RNIconic.js @@ -5,72 +5,77 @@ import PropTypes from "prop-types"; import { requireNativeComponent } from "react-native"; class RNIconic extends Component { + static Shapes = { + Default: "default", + Add: "add", + Minus: "minus", + Close: "close", + Back: "back", + Forward: "forward", + Menu: "menu", + Download: "download", + Share: "share", + DownBasic: "down-basic", + UpBasic: "up-basic", + Paused: "paused", + DownArrow: "down-arrow", + RightTriangle: "right-triangle", + LeftTriangle: "left-triangle", + UpTriangle: "up-triangle", + DownTriangle: "down-triangle", + Ok: "ok", + Rewind: "rewind", + FastForward: "fast-forward", + Square: "square", + BURGER: "BURGER", + ARROW: "ARROW", + X: "X", + CHECK: "CHECK" + }; + + static propTypes = { + ...ViewPropTypes, + + size: PropTypes.number, + rounded: PropTypes.bool, + tintColor: PropTypes.string, + lineThickness: PropTypes.number, + color: PropTypes.string, + shape: PropTypes.array || PropTypes.string, + disable: PropTypes.bool, + selection: PropTypes.number, + onChange: PropTypes.func + }; + + static defaultProps = { + size: 100, + selection: 0, + disabled: false, + backgroundColor: "#FFFFFF" + }; + _onChange = event => { this.props.onChange && this.props.onChange(event.nativeEvent.value); }; render() { - if (Platform.OS === "ios") { - return { - this._iconicButton = ref; - }} style={{ width: this.props.size, height: this.props.size }} props={{ roundBackgroundColor: this.props.roundBackgroundColor, lineThickness: this.props.lineThickness, tintColor: this.props.tintColor, shape: this.props.shape, selection: this.props.selection, disabled: this.props.disable, size: this.props.size }} onChange={this._onChange} />; - } else if (Platform.OS === "android") { - return { - this._iconicButton = ref; - }} style={{ width: this.props.size, height: this.props.size }} size={this.props.size} on={this.props.value} disable={this.props.disabled} shape={this.props.shape} color={this.props.color} fillColor={this.props.fillColor} onChange={this._onChange} />; - } + return ( + { + this._iconicButton = ref; + }} + style={{ width: this.props.size, height: this.props.size }} + tintColor={this.props.tintColor} + size={this.props.size} + disable={this.props.disabled} + shape={this.props.shape} + color={this.props.color} + onChange={this._onChange} + /> + ); } } -RNIconic.Shapes = { - Default: "default", - Add: "add", - Minus: "minus", - Close: "close", - Back: "back", - Forward: "forward", - Menu: "menu", - Download: "download", - Share: "share", - DownBasic: "down-basic", - UpBasic: "up-basic", - Paused: "paused", - DownArrow: "down-arrow", - RightTriangle: "right-triangle", - LeftTriangle: "left-triangle", - UpTriangle: "up-triangle", - DownTriangle: "down-triangle", - Ok: "ok", - Rewind: "rewind", - FastForward: "fast-forward", - Square: "square", - BURGER: "BURGER", - ARROW: "ARROW", - X: "X", - CHECK: "CHECK" -}; - -RNIconic.propTypes = { - ...ViewPropTypes, - - rounded: PropTypes.bool, - roundBackgroundColor: PropTypes.string, - lineThickness: PropTypes.number, - tintColor: PropTypes.string, - shape: PropTypes.array || PropTypes.string, - selection: PropTypes.number, - disable: PropTypes.bool, - size: PropTypes.number, - props: PropTypes.object, - onChange: PropTypes.func -} - -RNIconic.defaultProps = { - selection: 0, - disabled: false, - size: 100 -}; - const IconicButton = requireNativeComponent("RNIconic", RNIconic, { nativeOnly: { onChange: true } }); diff --git a/android/build.gradle b/android/build.gradle index a1f6807..8194fba 100644 --- a/android/build.gradle +++ b/android/build.gradle @@ -5,19 +5,19 @@ buildscript { } dependencies { - classpath 'com.android.tools.build:gradle:1.3.1' + classpath 'com.android.tools.build:gradle:3.0.1' } } apply plugin: 'com.android.library' android { - compileSdkVersion 23 - buildToolsVersion "23.0.1" + compileSdkVersion 27 + buildToolsVersion "27.0.3" defaultConfig { minSdkVersion 16 - targetSdkVersion 22 + targetSdkVersion 27 versionCode 1 versionName "1.0" } @@ -32,6 +32,6 @@ repositories { dependencies { compile 'com.facebook.react:react-native:+' - compile 'com.balysv.materialmenu:material-menu:2.0.0' + compile 'com.github.prscX:material-menu:1ce715ab5d0abf3859e3f0219454b76a1371ced8' + compile 'com.github.prscX:Android-ExpandIcon:fa9d3ca18a10bc8f68ff3dce0b6165a6ce719cef' } - \ No newline at end of file diff --git a/android/src/main/java/ui/iconic/RNIconic.java b/android/src/main/java/ui/iconic/RNIconic.java index 57741f8..034e49e 100644 --- a/android/src/main/java/ui/iconic/RNIconic.java +++ b/android/src/main/java/ui/iconic/RNIconic.java @@ -14,6 +14,7 @@ import com.facebook.react.uimanager.UIManagerModule; import com.facebook.react.uimanager.ViewGroupManager; import com.facebook.react.uimanager.annotations.ReactProp; +import com.github.zagum.expandicon.ExpandIconView; import java.util.ArrayList; import java.util.Random; @@ -39,11 +40,14 @@ protected FrameLayout createViewInstance(final ThemedReactContext reactContext) final int viewId = randomId; final MaterialMenuView iconicButton = new MaterialMenuView(reactContext.getCurrentActivity()); - iconicButton.setVisible(true); - iconicButton.setColor(Color.BLACK); + iconicButton.setVisible(false); + + final ExpandIconView expandIconView = new ExpandIconView(reactContext.getCurrentActivity()); + expandIconView.setVisibility(View.INVISIBLE); final FrameLayout frameLayout = new FrameLayout(reactContext.getCurrentActivity()); frameLayout.addView(iconicButton); + frameLayout.addView(expandIconView); iconicButton.setOnClickListener(new View.OnClickListener() { @Override @@ -51,7 +55,39 @@ public void onClick(View v) { if (selection + 1 == shapes.size()) selection = 0; else selection = selection + 1; - iconicButton.animateIconState(getState(selection)); + String state = (String) shapes.get(selection); + + if (state.equalsIgnoreCase("BURGER")) { + iconicButton.animateIconState(MaterialMenuDrawable.IconState.BURGER); + } else if (state.equalsIgnoreCase("ARROW")) { + iconicButton.animateIconState(MaterialMenuDrawable.IconState.ARROW); + } else if (state.equalsIgnoreCase("X")) { + iconicButton.animateIconState(MaterialMenuDrawable.IconState.X); + } else if (state.equalsIgnoreCase("CHECK")) { + iconicButton.animateIconState(MaterialMenuDrawable.IconState.CHECK); + } + + int id = frameLayout.getId(); + reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher().dispatchEvent( + new RNIconicEvent(id, selection) + ); + } + }); + + + expandIconView.setOnClickListener(new View.OnClickListener() { + @Override + public void onClick(View v) { + if (selection + 1 == shapes.size()) selection = 0; + else selection = selection + 1; + + String state = (String) shapes.get(selection); + + if (state.equalsIgnoreCase("up-basic")) { + expandIconView.switchState(true); + } else if (state.equalsIgnoreCase("down-basic")) { + expandIconView.switchState(true); + } int id = frameLayout.getId(); reactContext.getNativeModule(UIManagerModule.class).getEventDispatcher().dispatchEvent( @@ -66,16 +102,22 @@ public void onClick(View v) { @ReactProp(name = "size") public void setSize(FrameLayout iconicButtonFrame, int size) { MaterialMenuView iconicButton = (MaterialMenuView) iconicButtonFrame.getChildAt(0); - FrameLayout.LayoutParams layoutParams = new FrameLayout.LayoutParams(size, size); - iconicButton.setLayoutParams(layoutParams); + ExpandIconView expandIconView = (ExpandIconView) iconicButtonFrame.getChildAt(1); + + iconicButton.onSizeChanged(size, size, size, size); + expandIconView.onSizeChanged(size, size, size, size); } - @ReactProp(name = "tintColor") - public void setTintColor(FrameLayout iconicButtonFrame, String color) { + @ReactProp(name = "color") + public void setColor(FrameLayout iconicButtonFrame, String color) { MaterialMenuView iconicButton = (MaterialMenuView) iconicButtonFrame.getChildAt(0); + ExpandIconView expandIconView = (ExpandIconView) iconicButtonFrame.getChildAt(1); + iconicButton.setColor(Color.parseColor(color)); + expandIconView.setColor(Color.parseColor(color)); } + @ReactProp(name = "selection") public void setSelection(FrameLayout iconicButtonFrame, int selc) { selection = selc; @@ -85,23 +127,29 @@ public void setSelection(FrameLayout iconicButtonFrame, int selc) { public void setShape(FrameLayout iconicButtonFrame, ReadableArray shps) { shapes = shps.toArrayList(); - MaterialMenuView iconicButton = (MaterialMenuView) iconicButtonFrame.getChildAt(0); - iconicButton.setIconState(getState(selection)); - } - - private MaterialMenuDrawable.IconState getState(int selection) { String state = (String) shapes.get(selection); + MaterialMenuView iconicButton = (MaterialMenuView) iconicButtonFrame.getChildAt(0); + ExpandIconView expandIconView = (ExpandIconView) iconicButtonFrame.getChildAt(1); + if (state.equalsIgnoreCase("BURGER")) { - return MaterialMenuDrawable.IconState.BURGER; + iconicButton.setVisible(true); + iconicButton.setIconState(MaterialMenuDrawable.IconState.BURGER); } else if (state.equalsIgnoreCase("ARROW")) { - return MaterialMenuDrawable.IconState.ARROW; + iconicButton.setVisible(true); + iconicButton.setIconState(MaterialMenuDrawable.IconState.ARROW); } else if (state.equalsIgnoreCase("X")) { - return MaterialMenuDrawable.IconState.X; + iconicButton.setVisible(true); + iconicButton.setIconState(MaterialMenuDrawable.IconState.X); } else if (state.equalsIgnoreCase("CHECK")) { - return MaterialMenuDrawable.IconState.CHECK; + iconicButton.setVisible(true); + iconicButton.setIconState(MaterialMenuDrawable.IconState.CHECK); + } else if (state.equalsIgnoreCase("up-basic")) { + expandIconView.setVisibility(View.VISIBLE); + expandIconView.setState(ExpandIconView.LESS, false); + } else if (state.equalsIgnoreCase("down-basic")) { + expandIconView.setVisibility(View.VISIBLE); + expandIconView.setState(ExpandIconView.MORE, false); } - - return MaterialMenuDrawable.IconState.ARROW; } } \ No newline at end of file diff --git a/ios/Podfile b/ios/Podfile index b96ed8f..5ce202c 100644 --- a/ios/Podfile +++ b/ios/Podfile @@ -7,5 +7,5 @@ target 'RNIconic' do # Pods for RNIconic - pod 'VBFPopFlatButton' + pod 'VBFPopFlatButton', :git => 'https://github.com/prscX/VBFPopFlatButton.git', :commit => '5ac6e640b85ed534f4d06465bfe3e5f9f114b01b' end diff --git a/ios/RNIconic.m b/ios/RNIconic.m index fa87191..078ba27 100644 --- a/ios/RNIconic.m +++ b/ios/RNIconic.m @@ -10,46 +10,48 @@ - (dispatch_queue_t)methodQueue RCT_EXPORT_MODULE() -- (UIView *)view -{ - UIView *view = [[UIView alloc] init]; - return view; +- (VBFPopFlatButton *)view { + VBFPopFlatButton *iconicButton = [[VBFPopFlatButton alloc] init]; + [iconicButton addTarget:self + action:@selector(handleSelection:) + forControlEvents:UIControlEventTouchUpInside]; + + return iconicButton; } +RCT_CUSTOM_VIEW_PROPERTY(size, NSNumber *, VBFPopFlatButton) { + view.frame = CGRectMake(0, 0, [json floatValue], [json floatValue]); + [view commonSetup]; +} -RCT_CUSTOM_VIEW_PROPERTY(props, NSDictonary *, UIView) -{ - Boolean *rounded = (Boolean) [json objectForKey: @"rounded"]; - NSString *roundBackgroundColor = [json objectForKey: @"roundBackgroundColor"]; - NSNumber *lineThickness = [json objectForKey: @"lineThickness"]; - NSString *tintColor = [json objectForKey: @"tintColor"]; - - NSArray *shape = [json objectForKey: @"shape"]; - - NSString *disable = [json objectForKey: @"disable"]; - - NSNumber *selection = [json objectForKey: @"selection"]; - NSNumber *size = [json objectForKey: @"size"]; - - - VBFPopFlatButton *iconicButton = [[VBFPopFlatButton alloc]initWithFrame:CGRectMake(0, 0, [size floatValue], [size floatValue]) - buttonType:[self getShape: [shape objectAtIndex: [selection integerValue]]] - buttonStyle: rounded ? buttonPlainStyle : buttonRoundedStyle - animateToInitialState:YES]; +RCT_CUSTOM_VIEW_PROPERTY(rounded, NSBoolean *, VBFPopFlatButton) { + if ([json integerValue] == 1) { + [view setCurrentButtonStyle:(FlatButtonStyle) buttonRoundedStyle]; + } else { + [view setCurrentButtonStyle:(FlatButtonStyle) buttonPlainStyle]; + } +} - self.shapes = shape; - self.selection = selection; - - iconicButton.roundBackgroundColor = [RNIconic colorFromHexCode: roundBackgroundColor]; - iconicButton.lineThickness = [lineThickness floatValue]; - iconicButton.tintColor = [RNIconic colorFromHexCode: tintColor]; - iconicButton.reactTag = view.reactTag; +RCT_CUSTOM_VIEW_PROPERTY(lineThickness, NSNumber *, VBFPopFlatButton) { + view.lineThickness = [json floatValue]; +} + +RCT_CUSTOM_VIEW_PROPERTY(color, NSNumber *, VBFPopFlatButton) { + view.tintColor = [RNIconic colorFromHexCode: json]; +} + +RCT_CUSTOM_VIEW_PROPERTY(shape, NSArray *, VBFPopFlatButton) { + self.shapes = json; + [view setCurrentButtonType: [self getShape: [self.shapes objectAtIndex: [self.selection intValue]]]]; +} + +RCT_CUSTOM_VIEW_PROPERTY(selection, NSNumber *, VBFPopFlatButton) { + self.selection = json; +} - [iconicButton addTarget:self - action:@selector(handleSelection:) - forControlEvents:UIControlEventTouchUpInside]; - [view addSubview: iconicButton]; +RCT_CUSTOM_VIEW_PROPERTY(tintColor, NSString *, VBFPopFlatButton) { + [view setRoundBackgroundColor: [RNIconic colorFromHexCode: json]]; } diff --git a/ios/RNIconic.xcodeproj/project.pbxproj b/ios/RNIconic.xcodeproj/project.pbxproj index c565a6d..4e1aa31 100644 --- a/ios/RNIconic.xcodeproj/project.pbxproj +++ b/ios/RNIconic.xcodeproj/project.pbxproj @@ -7,6 +7,7 @@ objects = { /* Begin PBXBuildFile section */ + 2A3F227F522E392134F9389D /* libPods-RNIconic.a in Frameworks */ = {isa = PBXBuildFile; fileRef = 96DD16BBC4D160BD3BE0A08C /* libPods-RNIconic.a */; }; B3E7B58A1CC2AC0600A0062D /* RNIconic.m in Sources */ = {isa = PBXBuildFile; fileRef = B3E7B5891CC2AC0600A0062D /* RNIconic.m */; }; CEF03E5F20135F5700AB272B /* libpop.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CEF03E5C20135F5200AB272B /* libpop.a */; }; CEF03E6020135F5700AB272B /* libVBFPopFlatButton.a in Frameworks */ = {isa = PBXBuildFile; fileRef = CEF03E5E20135F5200AB272B /* libVBFPopFlatButton.a */; }; @@ -65,6 +66,7 @@ files = ( CEF03E5F20135F5700AB272B /* libpop.a in Frameworks */, CEF03E6020135F5700AB272B /* libVBFPopFlatButton.a in Frameworks */, + 2A3F227F522E392134F9389D /* libPods-RNIconic.a in Frameworks */, ); runOnlyForDeploymentPostprocessing = 0; }; diff --git a/package.json b/package.json index 6ce97f8..072a5d8 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "react-native-iconic", - "version": "0.0.3", + "version": "0.0.4", "description": "React Native - Animated Icons with different states", "main": "RNIconic.js", "scripts": {