jee
4 years ago
5 changed files with 259 additions and 0 deletions
@ -0,0 +1,114 @@
|
||||
import React, {Component} from 'react'; |
||||
import { |
||||
Image, |
||||
View, |
||||
StyleSheet, |
||||
TouchableOpacity, |
||||
ScrollView, |
||||
Text, |
||||
FlatList |
||||
} from 'react-native'; |
||||
import {Directory} from '../../public/plugin/api'; |
||||
|
||||
const back_image = require("./back.png"); |
||||
|
||||
export class FullList extends Component { |
||||
|
||||
render(){ |
||||
|
||||
const data = this._getData(); |
||||
const content = data.map((item, index) => (
|
||||
this.getItem(item, index) |
||||
)).slice(4); |
||||
|
||||
return ( |
||||
|
||||
<ScrollView contentContainerStyle={styles.list}> |
||||
|
||||
<TouchableOpacity |
||||
onPress={ |
||||
this.props.Change |
||||
}><Image source={back_image} style={{ width: 25, height: 25, margin: 'auto'}} /> |
||||
|
||||
</TouchableOpacity><Text style={{margin: 'auto',"font-size" : "20px",}}>全部</Text> |
||||
{content} |
||||
</ScrollView> |
||||
|
||||
) |
||||
|
||||
} |
||||
_getData() { |
||||
return this.props.pprops.currentNode.getChildNodes(); |
||||
} |
||||
getItem(item, index) { |
||||
//debugger;
|
||||
|
||||
return ( |
||||
<View style={styles.gridWrapper} key={index}> |
||||
<Text style = {styles.title} >{item.title}</Text> |
||||
<Sub item = {item} navigateNode ={this.props.pprops.navigateNode} /> |
||||
|
||||
</View> |
||||
) |
||||
} |
||||
} |
||||
|
||||
class Sub extends Component{ |
||||
render(){ |
||||
//debugger;
|
||||
const data = this.props.item.getChildNodes(); |
||||
const content = data.map((item, index) => (
|
||||
this.getItem(item, index) |
||||
)); |
||||
return ( |
||||
<ScrollView contentContainerStyle={styles.list}>{content}</ScrollView> |
||||
|
||||
) |
||||
} |
||||
getItem(item, index) { |
||||
//debugger;
|
||||
return ( |
||||
<View style={styles.box} key={index}> |
||||
<TouchableOpacity
|
||||
onPress={() => this.props.navigateNode(item)}> |
||||
{Directory.createIconGrid(item, {iconStyle: styles.gridIcon})} |
||||
</TouchableOpacity> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
} |
||||
|
||||
const styles = StyleSheet.create({ |
||||
box:{ |
||||
width : "20%", |
||||
flexWrap : "nowrap", |
||||
}, |
||||
title:{ |
||||
height : 56, |
||||
fontSize : "20px", |
||||
marginTop: 10 |
||||
}, |
||||
gridWrapper: { |
||||
width: "100%", |
||||
|
||||
//height: "17.5%",
|
||||
marginTop: 10 |
||||
}, |
||||
gridIcon: { |
||||
width: 36, |
||||
height: 36, |
||||
borderRadius: 8, |
||||
|
||||
}, |
||||
list: { |
||||
flex: 1, |
||||
flexDirection: "row", |
||||
overflow: "hidden auto", |
||||
//alignContent:"flex-start",
|
||||
flexWrap: "wrap", |
||||
width: "100%", |
||||
transform: "translateZ(0px)" |
||||
|
||||
} |
||||
}); |
@ -0,0 +1,119 @@
|
||||
import React, {Component} from 'react'; |
||||
import { |
||||
Image, |
||||
View, |
||||
StyleSheet, |
||||
TouchableOpacity, |
||||
ScrollView |
||||
} from 'react-native'; |
||||
import {Directory} from '../../public/plugin/api'; |
||||
import {FullList} from './FullList'; |
||||
import { from } from 'core-js/fn/array'; |
||||
|
||||
const DirectoryScrollView = Directory.DirectoryScrollView; |
||||
var image = require('./fold.png'); |
||||
|
||||
class MainList extends Component { |
||||
constructor(props) { |
||||
super(props); |
||||
this.state = { |
||||
hidden : true |
||||
} |
||||
} |
||||
Change = () => { |
||||
|
||||
this.setState({ |
||||
hidden : this.state.hidden ? false : true |
||||
}) |
||||
} |
||||
render() { |
||||
|
||||
const data = this._getData(); |
||||
const content = data.map((item, index) => (
|
||||
this.getItem(item, index) |
||||
)); |
||||
|
||||
if(content.length < 5){ |
||||
return <DirectoryScrollView> |
||||
<ScrollView contentContainerStyle={styles.list}> |
||||
{content} |
||||
</ScrollView> |
||||
</DirectoryScrollView> |
||||
} |
||||
|
||||
|
||||
if (!this.state.hidden){ |
||||
|
||||
return( |
||||
|
||||
<FullList pprops = {this.props} Change = {this.Change}/> |
||||
) |
||||
} |
||||
|
||||
fullIcon = (<View style={styles.gridWrapper} > |
||||
<TouchableOpacity |
||||
onPress={ |
||||
this.Change |
||||
}><Image source={image} style={{ width: 36, height: 36, margin: 'auto'}} /> |
||||
<p style={{color: "#666", fontSize: 12, textAlign: "center"}}>全部</p> |
||||
</TouchableOpacity> |
||||
</View>); |
||||
return ( |
||||
<DirectoryScrollView > |
||||
<ScrollView contentContainerStyle={styles.list}> |
||||
{content} |
||||
</ScrollView> |
||||
</DirectoryScrollView> |
||||
)} |
||||
|
||||
getItem(item, index) { |
||||
return ( |
||||
<View style={styles.gridWrapper} key={index}> |
||||
<TouchableOpacity |
||||
onPress={() => this.props.navigateNode(item)}> |
||||
{Directory.createIconGrid(item, {iconStyle: styles.gridIcon})} |
||||
</TouchableOpacity> |
||||
</View> |
||||
) |
||||
} |
||||
|
||||
_getData() { |
||||
return this.props.currentNode.getChildNodes(); |
||||
} |
||||
} |
||||
|
||||
class Static extends Component{ |
||||
render() { |
||||
|
||||
const content = this.props.content; |
||||
var foldList = content.slice(0, 4); |
||||
return foldList; |
||||
} |
||||
|
||||
} |
||||
|
||||
export default MainList; |
||||
|
||||
const styles = StyleSheet.create({ |
||||
gridWrapper: { |
||||
width: "20%", |
||||
//height: "17.5%",
|
||||
marginTop: 10 |
||||
}, |
||||
gridIcon: { |
||||
width: 36, |
||||
height: 36, |
||||
borderRadius: 8, |
||||
|
||||
}, |
||||
list: { |
||||
flex: 1, |
||||
flexDirection: "row", |
||||
overflow: "hidden auto", |
||||
//alignContent:"flex-start",
|
||||
flexWrap: "wrap", |
||||
width: "100%", |
||||
transform: "translateZ(0px)" |
||||
|
||||
} |
||||
}); |
After Width: | Height: | Size: 2.5 KiB |
After Width: | Height: | Size: 535 B |
@ -0,0 +1,26 @@
|
||||
import {Widget, Toolbar, Directory} from '../public/plugin/api'; |
||||
|
||||
import SubList from "./Zip/SubList"; |
||||
import MainList from "./Zip/MainList"; |
||||
|
||||
let apiVersions = { |
||||
Widget: '2.0.1', |
||||
Toolbar: '2.0.0', |
||||
Directory: '2.2.0' |
||||
}; |
||||
|
||||
function run() { |
||||
|
||||
Directory.registerFunction((directoryNode) => { |
||||
console.log(directoryNode.getLayer() ); |
||||
if (directoryNode.getLayer() === 0 ) { |
||||
return MainList; |
||||
} else { |
||||
return SubList; |
||||
} |
||||
}); |
||||
Directory.registerFetchLayersCountFunction(() => { |
||||
return 2; |
||||
}) |
||||
|
||||
} |
Loading…
Reference in new issue