PR to update broken PropTypes reference

LabelSelect/LabelSelectStyle.js

@@ -43,7 +43,8 @@ export default StyleSheet.create({
   labelText: {
     padding: 6,
     fontSize: 14,
-    lineHeight: 14
+    lineHeight: 14,
+    maxWidth: 300
   },
   closeContainer: {
     padding: 8,
@@ -86,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,
@@ -110,7 +111,8 @@ export default StyleSheet.create({
     borderBottomColor: '#bbb'
   },
   modalText: {
-    fontSize: 16
+    fontSize: 16,
+    width: width * 0.6 - 70
   },
   buttonText: {
     color: '#fff',

LabelSelect/index.js

@@ -22,15 +22,20 @@ class LabelSelect extends Component {
     readOnly: PropTypes.bool,
     enable: PropTypes.bool,
     onConfirm: PropTypes.func,
-    enableAddBtn: PropTypes.bool
+    enableAddBtn: PropTypes.bool,
+    confirmText: PropTypes.string,
+    cancelText: PropTypes.string
   }
   static defaultProps = {
     style: {},
+    customStyle: {},
     title: ' ',
     enable: true,
     readOnly: false,
     onConfirm: () => {},
-    enableAddBtn: true
+    enableAddBtn: true,
+    confirmText: 'Confirm',
+    cancelText: 'Cancel'
   }
   constructor(props) {
     super(props);
@@ -69,7 +74,16 @@ class LabelSelect extends Component {
     else {this.selectedList.push(time);}
   }
   render() {
-    const {readOnly, enable, title, style, enableAddBtn} = this.props;
+    const {
+      readOnly,
+      enable,
+      title,
+      style,
+      enableAddBtn,
+      customStyle,
+      confirmText,
+      cancelText
+    } = this.props;
     let selectedLabels = React.Children.toArray(this.props.children)
       .filter(item => item.type === Label)
       .map((child, index) => {
@@ -94,7 +108,7 @@ class LabelSelect extends Component {
           <TouchableHighlight
             style={[Styles.selectedItem, Styles.addItem]}
             underlayColor="transparent"
-            onPress={() => {this.openModal();}}>
+            onPress={this.openModal}>
             <Image
               style={Styles.addIcon}
               source={this.addIcon}
@@ -113,25 +127,29 @@ class LabelSelect extends Component {
               underlayColor="#00000077"
               onPress={this.cancelSelect}>
               <View style={Styles.modalContainer}>
-                <View style={Styles.modal}>
+                <View style={[Styles.modal, customStyle.modal || {}]}>
                   <View style={Styles.title}><Text style={Styles.titleText}>{title}</Text></View>
                   <View style={Styles.scrollView}>
                     <ScrollView>
                       {modalItems}
                     </ScrollView>
                   </View>
-                  <View style={Styles.buttonView}>
+                  <View style={[Styles.buttonView, customStyle.buttonView || {}]}>
                     <TouchableHighlight
                       underlayColor="transparent"
-                      style={Styles.modalButton}
+                      activeOpacity={0.8}
                       onPress={this.cancelSelect}>
-                      <Text style={Styles.buttonText}>Cancel</Text>
+                      <View style={[Styles.modalButton, customStyle.cancelButton || {}]}>
+                        <Text style={[Styles.buttonText, customStyle.cancelText || {}]}>{cancelText}</Text>
+                      </View>
                     </TouchableHighlight>
                     <TouchableHighlight
                       underlayColor="transparent"
-                      onPress={this.confirmSelect}
-                      style={[Styles.modalButton, Styles.confirmButton]}>
-                      <Text style={Styles.buttonText}>Confirm</Text>
+                      activeOpacity={0.8}
+                      onPress={this.confirmSelect}>
+                      <View style={[Styles.modalButton, Styles.confirmButton, customStyle.confirmButton || {}]}>
+                        <Text style={[Styles.buttonText, customStyle.confirmText || {}]}>{confirmText}</Text>
+                      </View>
                     </TouchableHighlight>
                   </View>
                 </View>
@@ -156,16 +174,18 @@ class Label extends Component {
   static defaultProps = {
     onCancel: () => {},
     enable: true,
-    readOnly: false
+    readOnly: false,
+    customStyle: {}
   }
   constructor(props) {
     super(props);
   }
   render() {
-    const {enable, readOnly, onCancel} = this.props;
+    const {enable, readOnly, onCancel, customStyle} = this.props;
     return (
       <View style={[Styles.selectedItem, !enable && Styles.disableColor]}>
-        <Text style={[Styles.labelText, !enable && Styles.disableText]}>{this.props.children}</Text>
+        <Text style={[Styles.labelText, !enable && Styles.disableText, customStyle.text || {}]}
+          numberOfLines={1} ellipsisMode="tail">{this.props.children}</Text>
         {enable && !readOnly && <TouchableHighlight
           style={Styles.closeContainer}
           underlayColor="transparent"
@@ -187,6 +207,9 @@ class ModalItem extends Component {
   static propTypes = {
     toggleSelect: PropTypes.func
   }
+  static defaultProps = {
+    customStyle: {}
+  }
   constructor (props) {
     super(props);
     this.isSelected = false;
@@ -199,16 +222,24 @@ class ModalItem extends Component {
     toggleSelect(data);
   }
   render () {
+    const {
+      customStyle
+    } = this.props;
     return (
       <TouchableHighlight
         activeOpacity={0.5}
         underlayColor="transparent"
         onPress={this._toggleSelect}>
         <View style={Styles.modalItem}>
-          <Text style={Styles.modalText}>{this.props.children}</Text>
-            <View style={[Styles.outerCircle, this.isSelected ? Styles.enableCircle : {}]}>
-              {this.isSelected && <View style={Styles.innerCircle}/>}
-            </View>
+          <Text
+            style={[Styles.modalText, customStyle.modalText || {}]}
+            numberOfLines={1}
+            ellipsisMode="tail">
+            {this.props.children}
+          </Text>
+          <View style={[Styles.outerCircle, this.isSelected ? Styles.enableCircle : {}, customStyle.outerCircle || {}]}>
+            {this.isSelected && <View style={[Styles.innerCircle, customStyle.innerCircle || {}]}/>}
+          </View>
         </View>
       </TouchableHighlight>
     );

README.md

@@ -26,7 +26,7 @@ import LabelSelect from 'react-native-label-select';
   style={yourStyle}
   onConfirm={(list) => {...}}>
 
-  <LableSelect.Label
+  <LabelSelect.Label
     key={...}
     data={itemA}
     onCancel={func}>selected ItemA</LabelSelect.Label>
@@ -49,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**
 
@@ -76,11 +79,12 @@ 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.
 
 ```html
-<LabelSelect ref="select">...</LableSelect>
+<LabelSelect ref="select">...</LabelSelect>
 ```
 
 ```js