feat(LabelSelect): update labelSelect with custom style

.npmignore

@@ -7,3 +7,4 @@ index.android.js
 index.ios.js
 android/
 ios/
+tools/

README.md

@@ -23,7 +23,6 @@ import {
   Confirm,
   Accordion,
   ZoomImage,
-  PressMenu,
   DrawerMenu,
   DatePicker,
   ActionSheet,
@@ -43,7 +42,6 @@ npm install react-native-input-xg --save
 npm install react-native-zoom-image --save
 npm install react-native-datepicker --save
 npm install react-native-drawer-menu --save
-npm install react-native-presss-menu --save
 npm install react-native-label-select --save
 npm install react-native-accordion-xg --save
 npm install react-native-action-sheet-xg --save

components/LabelSelect/LabelSelectStyle.js

@@ -87,19 +87,19 @@ export default StyleSheet.create({
     height: height * 0.6 - 80
   },
   buttonView: {
-    height: 40,
-    backgroundColor: Color.main,
     borderBottomLeftRadius: 10,
     borderBottomRightRadius: 10,
     flexDirection: 'row',
     justifyContent: 'space-around'
   },
   modalButton: {
+    height: 40,
     width: width * 0.3,
     paddingLeft: 20,
     paddingRight: 20,
     justifyContent: 'center',
-    alignItems: 'center'
+    alignItems: 'center',
+    backgroundColor: Color.main
   },
   modalItem: {
     height: 50,

components/LabelSelect/README.md

@@ -2,8 +2,9 @@
 LabelSelect is a component used for making multiple choices. The modal is a checkbox like html.
 
 ## Example
+<a href="#android" id="android"><img src="http://7xjgb0.com1.z0.glb.clouddn.com/android.gif" align="left" width="240"/></a>
 
-See at [github page](https://github.com/Tinysymphony/react-native-label-select#readme)
+<a href="#ios" id="ios"><img src="http://7xjgb0.com1.z0.glb.clouddn.com/ios.gif" width="240"/></a>
 
 ## Usage
 
@@ -48,15 +49,18 @@ import LabelSelect from 'react-native-label-select';
 | enable | true | bool | is the component interactive  |
 | enableAddBtn | true | bool | whether to show the add button |
 | onConfirm | - | function | Triggered when the confirm button of modal is pressed with the newly selected items list passed as the only argument |
-
+| confirmText | - | string | Text of confirm button. |
+| cancelText | - | string | Text of cancelText button. |
+| customStyle | - | object | You can customize styles of `modal` / `buttonView` / `confirmButton` / `confirmText` / `cancelButton` / `cancelText` by `customStyle. |
 
 **LabelSelect.Label**
 
 
 | Prop | Default | Type | Description |
 | --- | --- | --- | --- |
 | onCancel | - | function | Triggered when the close button of Label is pressed. |
-|data| -| any | Data that bind to the Label |
+| data | - | any | Data that bind to the Label |
+| customStyle | - | object | You can customize styles of `text` by `customStyle. |
 
 **LabelSelect.ModalItem**
 
@@ -75,6 +79,7 @@ import LabelSelect from 'react-native-label-select';
 | --- | --- | --- |
 | openModal | - | Open select modal |
 | cancelSelect | - | Close select modal. Also triggered when the cancel button of modal being pressed. |
+| customStyle | - | object | You can customize styles of `modalText` / `outerCircle` / `innerCircle` by `customStyle. |
 
 Use `ref` property as a hook to invoke internal methods.
 

components/LabelSelect/__tests__/LabelSelect.test.js

@@ -100,8 +100,10 @@ it('interact with modal', () => {
   expect(arr[0]).toEqual(item);
   expect(tree.state('isModalVisible')).toEqual(false);
   select.openModal();
+  expect(tree.state('isModalVisible')).toEqual(true);
   select.cancelSelect();
   expect(tree.state('isModalVisible')).toEqual(false);
+  select.confirmSelect();
 });
 
 it('selecte a item', () => {