React Native Common Select

Getting started

yarn add react-native-commonselect

Generate ttf file

  if ("react-native-vector-icons" in package.json){
    react-native link
  }
  else{
    Insert into package.json
    "dependencies": {
    ...
    "react-native-vector-icons": "^6.6.0",
    ...
    }
    react-native link
    Delete react-native-vector-icons": "^6.6.0" from package.json
  }

CommonSelectTree Usage

import React from "react";
import {
  View,
  StyleSheet
} from "react-native";

import {
  CommonSelectTree
} from 'react-native-commonselect';

export default class App extends React.Component {
  constructor(props) {
    super(props);

    this.normalLabel = [{
      label_id: 1,
      label_name: 'Tom',
      other_data: 'data1'
    }, {
      label_id: 2,
      label_name: 'Jack',
      other_data: 'data2'
    }, {
      label_id: 3,
      label_name: 'Rose',
      other_data: 'data3'
    }];
    this.normalLabelInit = [2];

    this.treeSingleLabel = [{
      tree_id: 1,
      tree_name: 'Level1 1',
      other_data: 'data1',
      tree_children: [{
        tree_id: 11,
        tree_name: 'Level2 11',
        other_data: 'data11',
      }, {
        tree_id: 12,
        tree_name: 'Level2 12',
        other_data: 'data12',
      }, ]
    }, {
      tree_id: 2,
      tree_name: 'Level1 2',
      other_data: 'data2',
      tree_children: [{
        tree_id: 21,
        tree_name: 'Level2 21',
        other_data: 'data21',
        tree_children: [{
          tree_id: 211,
          tree_name: 'Level3 211',
          other_data: 'data211',
        }, {
          tree_id: 212,
          tree_name: 'Level3 212',
          other_data: 'data212',
        }, ]
      }, {
        tree_id: 22,
        tree_name: 'Level2 22',
        other_data: 'data22',
        tree_children: [{
          tree_id: 221,
          tree_name: 'Level3 221',
          other_data: 'data221',
        }, {
          tree_id: 222,
          tree_name: 'Level3 222',
          other_data: 'data222',
        }, ]
      }, ]
    }, ];

    this.treeMutipleLabel = JSON.parse(JSON.stringify(this.treeSingleLabel));
    this.treeLabelSingleInit = [1, 2, 21, 212];
    this.treeLabelMutipleInit = [1, 11, 2, 21, 212];
  }

  selectNormal = (node, result) => {
    console.log(node, result);
  }

  selectTree = (node, result) => {
    console.log(node, result);
  }

  render() {
    return (
      <View style={styles.container}>
        <CommonSelectTree labelData={this.normalLabel}
            selectCode='label_id'
            selectName='label_name'
            selectResult={this.selectNormal}
            selectInit={this.normalLabelInit}
            treeStyle={{flexDirection:'row',flexWrap :'wrap'}}
        />
        <View style={{backgroundColor:'#677ca0',height:10}}/>
        <CommonSelectTree labelData={this.treeSingleLabel}
            selectCode='tree_id'
            selectName='tree_name'
            selectChildren='tree_children'
            selectResult={this.selectTree}
            selectInit={this.treeLabelSingleInit}
            treeStyle={{width:200}}
        />
        <View style={{backgroundColor:'#677ca0',height:10}}/>
        <CommonSelectTree labelData={this.treeMutipleLabel}
            selectCode='tree_id'
            selectName='tree_name'
            selectChildren='tree_children'
            selectResult={this.selectTree}
            selectInit={this.treeLabelMutipleInit}
            treeStyle={{width:200}}
            mutipleFlag={true}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

CommonSelectList CommonSelectPanel Usage

import React from "react";
import {
  View,
  StyleSheet
} from "react-native";

import {
  CommonSelectList,
  CommonSelectPanel
} from 'react-native-commonselect';
import CommonIcon from 'react-native-commonicon';

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listVisible: false,
    }

    this.SelectData = [{
      student_code: '01',
      student_name: 'Tom',
      other_data: 'data1'
    }, {
      student_code: '02',
      student_name: 'Jack',
      other_data: 'data2'
    }, {
      student_code: '03',
      student_name: 'Rose',
      other_data: 'data3'
    }, {
      student_code: '04',
      student_name: 'David',
      other_data: 'data4'
    }, {
      student_code: '05',
      student_name: 'Peter',
      other_data: 'data5'
    }];

    this.SelectData0 = JSON.parse(JSON.stringify(this.SelectData));
    this.SelectData1 = JSON.parse(JSON.stringify(this.SelectData));
    this.SelectData2 = JSON.parse(JSON.stringify(this.SelectData));
    this.SelectData3 = JSON.parse(JSON.stringify(this.SelectData));
    this.SelectData4 = JSON.parse(JSON.stringify(this.SelectData));
    this.SelectData5 = JSON.parse(JSON.stringify(this.SelectData));

    this.SelectDataInit2 = ['02'];
    this.SelectDataInit4 = ['02', '04'];

  }

  selectedData = (res) => {
    console.log(res);
  }

  selectStudent = () => {
    this.setState({
      listVisible: !this.state.listVisible
    });
  }

  render() {
    return (
      <View style={styles.container}>
        <View style={{backgroundColor:'#FFFFFF',height:10}}/>
        <View style={{alignItems:'flex-end'}}>
          <CommonIcon iconType='MaterialCommunityIcons' iconName='account' color={'#FF0000'} size={30} onPress={() => this.selectStudent()}/>
        </View>
        <CommonSelectList
            selectData={this.SelectData5}
            selectCode='student_code'
            selectName = 'student_name'
            selectResult={this.selectedData}
            listVisible={this.state.listVisible}
            listLeft={0}
            listTop={10+30}
            listWidth={150}
            listMaxHeight={300}
            listPosition={{alignItems: 'flex-end'}}
            listToolBarHeight={30}
        />
        <CommonSelectPanel
            selectData={this.SelectData0}
            selectCode='student_code'
            selectName='student_name'
            selectToolBar={false}
            selectWidth={300}
            selectStyle={{marginLeft: 10,height:25}}
            selectResult={res=>this.selectedData(res)}
            textPrompt='Please Select Student'
            listToolBarHeight={30}
        />
        <View style={{backgroundColor:'#FFFFFF',height:10}}/>
        <CommonSelectPanel
            selectData={this.SelectData1}
            selectCode='student_code'
            selectName='student_name'
            selectWidth={300}
            selectStyle={{marginLeft: 10,height:25}}
            selectResult={res=>this.selectedData(res)}
            textPrompt='Please Select Student'
            listToolBarHeight={30}
        />
        <View style={{backgroundColor:'#FFFFFF',height:10}}/>
        <CommonSelectPanel
            selectData={this.SelectData2}
            selectCode='student_code'
            selectName='student_name'
            selectWidth={300}
            selectStyle={{marginLeft: 10,height:25}}
            selectResult={res=>this.selectedData(res)}
            selectInit={this.SelectDataInit2}
            textPrompt='Please Select Student'
            listToolBarHeight={30}
        />
        <View style={{backgroundColor:'#FFFFFF',height:10}}/>
        <CommonSelectPanel
            selectData={this.SelectData3}
            selectCode='student_code'
            selectName='student_name'
            selectMuti={true}
            selectWidth={300}
            selectStyle={{marginLeft: 10,height:25}}
            selectResult={res=>this.selectedData(res)}
            textHead='You Have Selected'
            textTail='Students'
            listToolBarHeight={30}
        />
        <View style={{backgroundColor:'#FFFFFF',height:10}}/>
        <CommonSelectPanel
            selectData={this.SelectData4}
            selectCode='student_code'
            selectName='student_name'
            selectMuti={true}
            selectWidth={300}
            selectStyle={{marginLeft: 10,height:25}}
            selectResult={res=>this.selectedData(res)}
            selectInit={this.SelectDataInit4}
            textHead='You Have Selected'
            textTail='Students'
            listToolBarHeight={30}
        />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  }
});

CommonSelectTree Component props

| Prop | Required | Type | default | description | | ---- | ---- | ----| ---- | ---- | | labelData | NO | array | none | Label data Array | | selectCode | NO | string | 'code' | | | selectName | NO | string | 'name' | | | selectChildren | NO | string | 'children' | | | selectResult | NO | func | none | | | selectInit | NO | array | none | | | treeStyle | NO | array or object | none | | | treeBackgroundColor | NO | '#42464b' | none | | | treeSelectedBackgroundColor | NO | string | '#ff0000' | | | iconColor | NO | string | '#FFF' | | | iconSize | NO | number | 20 | | | labelStyle | NO | array or object | {color: '#FFFFFF', fontSize: 16, margin: 4} | | | mutipleFlag | NO | bool | false | |

CommonSelectList Component props

| Prop | Required | Type | default | description | | ---- | ---- | ----| ---- | ---- | | selectData | YES | array | [] | Select data Array | | selectCode | YES | string | none | | | selectName | YES | string | none | | | selectMuti | NO | bool | false | | | selectToolBar | NO | bool | true | | | selectResult | NO | func | (selectedItem) => {} | | | selectInit | NO | array | none | | | caseSensitive | NO | bool | true | | | listVisible | NO | bool | false | | | listPosition | NO | array or object | {} | | | listLeft | NO | number | 0 | | | listTop | NO | number | 0 | | | listWidth | NO | number | 200 | | | listMaxHeight | NO | number | 300 | | | listToolBarHeight | NO | number | 20 | | | listInputFocus | NO | bool | true | | | listInputBgColor | NO | string | '#ececec' | | | listItemDarkBgColor | NO | string | '#d4d8e9' | | | listItemLightBgColor | NO | string | '#f0f0f0' | | | listItemSeparatorColor | NO | string | '#42464b' | |

CommonSelectPanel Component props

| Prop | Required | Type | default | description | | ---- | ---- | ----| ---- | ---- | | selectData | YES | array | [] | Select data Array | | selectCode | YES | string | none | | | selectName | YES | string | none | | | selectMuti | NO | bool | false | | | selectToolBar | NO | bool | true | | | selectResult | NO | func | (selectedItem) => {} | | | selectInit | NO | array | none | | | caseSensitive | NO | bool | true | | | selectWidth | NO | number | 200 | | | selectStyle | NO | array or object | {} | | | textPrompt | NO | string | '' | | | textHead | NO | string | '' | | | textTail | NO | string | '' | | | listMaxHeight | NO | number | 300 | | | listToolBarHeight | NO | number | 20 | | | listInputFocus | NO | bool | true | | | listInputBgColor | NO | string | '#ececec' | | | listItemDarkBgColor | NO | string | '#d4d8e9' | | | listItemLightBgColor | NO | string | '#f0f0f0' | | | listItemSeparatorColor | NO | string | '#42464b' | |