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