react-native-commonselect

react native select component

Usage no npm install needed!

<script type="module">
  import reactNativeCommonselect from 'https://cdn.skypack.dev/react-native-commonselect';
</script>

README

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'