react-native-smart-sortable-sudoku-grid
A smart sortable sudoku grid for React Native apps. Written in JS for cross-platform support. It works on iOS and Android.
Preview
Installation
npm install react-native-smart-sortable-sudoku-grid --save
Full Demo
Usage
Install the SortableSudokuGrid package from npm with:
$ npm install react-native-smart-sortable-sudoku-grid --save
Then, require it from your app's JavaScript files with:
;
Complete Example:
const dataList = icon: image_cash title: 'cash' icon: image_credit title: 'credit' icon: image_transfer title: 'transfer' icon: image_loan title: 'loan' icon: image_charge title: 'charge' icon: image_payment title: 'payment' icon: image_shopping title: 'shopping' icon: image_service title: 'service' icon: image_donate title: 'donate' const columnCount = 3 { superprops thisstate = dataSource: ...dataList candidates: sortable: false scrollEnabled: true disabled: false managementButtonText: 'Manage' opacity: 0 this_sortableSudokuGrid = null } { return <ScrollView scrollEnabled=thisstatescrollEnabled style=marginTop: 44 + 20 > <View style=height: 50 paddingHorizontal: 10 flexDirection: 'row' justifyContent: 'space-between' alignItems: 'center' > <View style=flex: 1 justifyContent: 'center'> <Text>My Applications: </Text> </View> <TouchableOpacity onPress=this_onPressManagementButton> <View style=flex: 1 justifyContent: 'center'> <Text>thisstatemanagementButtonText</Text> </View> </TouchableOpacity> </View> <SortableSudokuGrid ref= this_sortableSudokuGrid = component containerStyle= backgroundColor: '#fff' columnCount=columnCount dataSource=thisstatedataSource renderCell=this_renderGridCell sortable=thisstatesortable /> <View style=height: 50 paddingHorizontal: 10 flexDirection: 'row' justifyContent: 'space-between' alignItems: 'center' > <View style=flex: 1 justifyContent: 'center'> <Text>Candidates: </Text> </View> </View> <SortableSudokuGrid ref= this_candidatesSudokuGrid = component containerStyle= backgroundColor: '#fff' columnCount=columnCount dataSource=thisstatecandidates renderCell=this_renderCandidateCell sortable=false /> </ScrollView> } { return <TouchableOpacity disabled=thisstatedisabled style=flex: 1 padding: 6 position: 'relative' onPress= this_onPressCell > <View style= overflow: 'hidden' backgroundColor: '#fff' justifyContent: 'center' alignItems: 'center' flex: 1 borderWidth: StyleSheethairlineWidth borderColor: '#eee' > <Image source=dataicon style=width: 30 height: 30 marginHorizontal: 10 marginBottom: 10/> <Text>datatitle</Text> </View> <TouchableOpacity disabled=!thisstatedisabled style=position: 'absolute' right: 8 top: 8 width: 30 height: 30 onPress=this_onRemoveCellButtonPress> <AnimatedView style=flex: 1 opacity: thisstateopacity justifyContent: 'center' alignItems: 'center' > <View style= borderRadius: 10 borderWidth: StyleSheethairlineWidth borderColor: '#FF7F7F' width: 22 height: 22 justifyContent: 'center' alignItems: 'center' overflow: 'hidden' > <Image source=image_remove style=width: 20 height: 20 /> </View> </AnimatedView> </TouchableOpacity> </TouchableOpacity> } { return <TouchableOpacity disabled=thisstatedisabled style=flex: 1 padding: 6 position: 'relative' onPress= this_onPressCandidateCell > <View style= overflow: 'hidden' backgroundColor: '#fff' justifyContent: 'center' alignItems: 'center' flex: 1 borderWidth: StyleSheethairlineWidth borderColor: '#eee' > <Image source=dataicon style=width: 30 height: 30 marginHorizontal: 10 marginBottom: 10/> <Text>datatitle</Text> </View> <TouchableOpacity disabled=!thisstatedisabled style=position: 'absolute' right: 8 top: 8 width: 30 height: 30 onPress=this_onRemoveCandidatesCellButtonPress> <AnimatedView style=flex: 1 opacity: thisstateopacity justifyContent: 'center' alignItems: 'center' > <View style= borderRadius: 10 borderWidth: StyleSheethairlineWidth borderColor: '#5CC46C' width: 22 height: 22 justifyContent: 'center' alignItems: 'center' overflow: 'hidden' > <Image source=image_add style=width: 20 height: 20 /> </View> </AnimatedView> </TouchableOpacity> </TouchableOpacity> } { Alert } { Alert } { let scrollEnabled = !thisstatescrollEnabled let disabled = !thisstatedisabled let managementButtonText = thisstatemanagementButtonText == 'Manage' ? 'Complete' : 'Manage' let sortable = !thisstatesortable let opacity = sortable ? 1 : 0 this if !sortable let sortedDataSource = this_sortableSudokuGrid //console.log(`_onPressManagementButton get sorted/added/removed DataSource`) //console.log(sortedDataSource) let candidateDataSource = this_candidatesSudokuGrid //console.log(`_onPressManagementButton get sorted/added/removed candidateDataSource`) //console.log(candidateDataSource) } { let cellIndex = this_sortableSudokuGrid_cells this_sortableSudokuGrid } { let cellIndex = this_candidatesSudokuGrid_cells this_candidatesSudokuGrid }
Props
Prop | Type | Optional | Default | Description |
---|---|---|---|---|
rowWidth | number | Yes | deviceWidth | determines the width of a row. |
rowHeight | number | Yes | deviceWidth | determines the height of a row. |
columnCount | number | No | determines how many columns a row contains. | |
dataSource | array | No | determines the datasource of grid | |
renderCell | func | No | A function that returns the grid cell component. | |
containerStyle | style | Yes | see react-native documents | |
sortable | bool | Yes | determines if the gird cell can be sortable |
Method
- addCell({ data, callback, }): add a new cell with data to grid
- removeCell({ cellIndex, callback, }): remove a cell from grid by cellIndex
- getSortedDataSource: return a sorted(added/removed) dataSource