-
Notifications
You must be signed in to change notification settings - Fork 32
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #19 from sauzy34/develop
Develop
- Loading branch information
Showing
13 changed files
with
581 additions
and
375 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,63 +1,102 @@ | ||
| import React from 'react' | ||
| import React, { useState } from 'react' | ||
| import { Text, View } from 'react-native' | ||
| import SelectBox from './lib' | ||
| import { xor } from 'lodash' | ||
| import SelectBox from 'react-native-multi-selectbox' | ||
| import { xorBy } from 'lodash' | ||
|
|
||
| export default class App extends React.Component { | ||
| state = { | ||
| selectedLocations: {}, | ||
| selectedValues: [], | ||
| locations: [ | ||
| { item: 'Afghanistan', id: 'AF' }, | ||
| { item: 'land Islands', id: 'AX' }, | ||
| { item: 'Albania', id: 'AL' }, | ||
| { item: 'Algeria', id: 'DZ' }, | ||
| { item: 'American Samoa', id: 'AS' }, | ||
| { item: 'AndorrA', id: 'AD' }, | ||
| { item: 'Angola', id: 'AO' }, | ||
| { item: 'Anguilla', id: 'AI' }, | ||
| { item: 'Antarctica', id: 'AQ' }, | ||
| { item: 'Antigua and Barbuda', id: 'AG' }, | ||
| { item: 'Argentina', id: 'AR' }, | ||
| { item: 'Armenia', id: 'AM' }, | ||
| { item: 'Aruba', id: 'AW' }, | ||
| { item: 'Australia', id: 'AU' }, | ||
| { item: 'Austria', id: 'AT' }, | ||
| { item: 'Azerbaijan', id: 'AZ' }, | ||
| { item: 'Bahamas', id: 'BS' }, | ||
| { item: 'Bahrain', id: 'BH' }, | ||
| { item: 'Bangladesh', id: 'BD' }, | ||
| { item: 'Barbados', id: 'BB' } | ||
| ] | ||
| // Options data must contain 'item' & 'id' keys | ||
|
|
||
| const K_OPTIONS = [ | ||
| { | ||
| item: 'Juventus', | ||
| id: 'JUVE' | ||
| }, | ||
| { | ||
| item: 'Real Madrid', | ||
| id: 'RM' | ||
| }, | ||
| { | ||
| item: 'Barcelona', | ||
| id: 'BR' | ||
| }, | ||
| { | ||
| item: 'PSG', | ||
| id: 'PSG' | ||
| }, | ||
| { | ||
| item: 'FC Bayern Munich', | ||
| id: 'FBM' | ||
| }, | ||
| { | ||
| item: 'Manchester United FC', | ||
| id: 'MUN' | ||
| }, | ||
| { | ||
| item: 'Manchester City FC', | ||
| id: 'MCI' | ||
| }, | ||
| { | ||
| item: 'Everton FC', | ||
| id: 'EVE' | ||
| }, | ||
| { | ||
| item: 'Tottenham Hotspur FC', | ||
| id: 'TOT' | ||
| }, | ||
| { | ||
| item: 'Chelsea FC', | ||
| id: 'CHE' | ||
| }, | ||
| { | ||
| item: 'Liverpool FC', | ||
| id: 'LIV' | ||
| }, | ||
| { | ||
| item: 'Arsenal FC', | ||
| id: 'ARS' | ||
| }, | ||
|
|
||
| { | ||
| item: 'Leicester City FC', | ||
| id: 'LEI' | ||
| } | ||
| render() { | ||
| const { locations, selectedLocations, selectedValues } = this.state | ||
| return ( | ||
| <View style={{ margin: 30 }}> | ||
| <View style={{ width: '100%', alignItems: 'center' }}> | ||
| <Text style={{ fontSize: 30, paddingBottom: 20 }}>Demos</Text> | ||
| </View> | ||
| <Text style={{ fontSize: 20, paddingBottom: 10 }}>Select Demo</Text> | ||
| <SelectBox | ||
| label="Select" | ||
| options={locations} | ||
| value={selectedLocations} | ||
| onChange={val => this.setState({ selectedLocations: val })} | ||
| hideInputFilter={false} | ||
| /> | ||
| <View style={{ height: 40 }}></View> | ||
| <Text style={{ fontSize: 20, paddingBottom: 10 }}>MultiSelect Demo</Text> | ||
| <SelectBox | ||
| label="Select Groups" | ||
| options={locations} | ||
| selectedValues={selectedValues} | ||
| onMultiSelect={item => { | ||
| this.setState({ selectedValues: xor(selectedValues, [item]) }) | ||
| }} | ||
| onTapClose={val => this.setState({ selectedValues: xor(selectedValues, [val]) })} | ||
| isMulti | ||
| /> | ||
| ] | ||
|
|
||
| function App() { | ||
| const [selectedLocations, setSelectedLocations] = useState({}) | ||
| const [selectedValues, setSelectedValues] = useState([]) | ||
| return ( | ||
| <View style={{ margin: 30 }}> | ||
| <View style={{ width: '100%', alignItems: 'center' }}> | ||
| <Text style={{ fontSize: 30, paddingBottom: 20 }}>Demos</Text> | ||
| </View> | ||
| ) | ||
| <Text style={{ fontSize: 20, paddingBottom: 10 }}>Select Demo</Text> | ||
| <SelectBox | ||
| label="Select single" | ||
| options={K_OPTIONS} | ||
| value={selectedLocations} | ||
| onChange={onChange()} | ||
| hideInputFilter={false} | ||
| /> | ||
| <View style={{ height: 40 }} /> | ||
| <Text style={{ fontSize: 20, paddingBottom: 10 }}>MultiSelect Demo</Text> | ||
| <SelectBox | ||
| label="Select multiple" | ||
| options={K_OPTIONS} | ||
| selectedValues={selectedValues} | ||
| onMultiSelect={onMultiChange()} | ||
| onTapClose={onMultiChange()} | ||
| isMulti | ||
| /> | ||
| </View> | ||
| ) | ||
|
|
||
| function onMultiChange() { | ||
| return item => setSelectedValues(xorBy(selectedValues, [item], 'id')) | ||
| } | ||
|
|
||
| function onChange() { | ||
| return val => setSelectedLocations(val) | ||
| } | ||
| } | ||
|
|
||
| export default App |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.