react-native-1app
Version:
329 lines (301 loc) • 10.2 kB
JavaScript
'use strict';
import React, { Component } from 'react';
import {Modal,Alert,
StyleSheet,
} from 'react-native';
import ApiUteis from '../api/uteis.js';
import TouchableOpacity from './TouchableOpacity';
import View from './View';
import Icon from './Icon';
import Text from './Text';
import Image from './Image';
import ImageUpload from './ImageUpload';
import TextInput from './inputtext';
var host = "";
export default class FotosUpload extends React.Component {
constructor(props, context) {
super(props, context);
this.state = { open:false,lista :props.value?props.value: [] ,
label:props.label ,item:props.value?props.value[0]:null,pos:0};
}
shouldComponentUpdate(nextProps, nextState) {
if(nextProps !==this.props){
nextState.lista = nextProps.value?nextProps.value:[];
nextState.label = nextProps.label;
nextState.item = nextState.lista[0];
}
return true;
}
novo(){
this.state.item = {};
this.state.lista.push(this.state.item);
this.setState({item:this.state.item,pos:this.state.lista.length-1});
}
delet(){
this.state.lista.splice(this.state.pos, 1);
this.setState({item:this.state.item,pos:0});
}
render() {
var style = {
justifyContent: "center",
alignItems: "center",
flexDirection:"column",
minHeight:150,
// padding:3,
// border:"1px solid #ccc",
minWidth:100,
alignSelf:"stretch",
flex: 1,
};
if(this.props.style){
var lista = [];
if( Array === this.props.style.constructor){
lista = this.props.style;
}else{
lista.push(this.props.style);
}
for (var a = 0; a < lista.length; a++) {
var st = lista[a];
if( (typeof st === "object") && (st !== null) ){
//nada
}else if(st){
st = StyleSheet.flatten(this.props.style);
}else if(!st){
continue;
}
var tags = Object.keys(st);
for (var i = 0; i < tags.length; i++) {
style[tags[i]] = st[tags[i]];
}
}
}
if(!this.state.item){
this.state.item = {};
this.state.lista.push(this.state.item);
}
var styleMarcador = {
width:50,
height:50,
backgroundColor:"rgba(0,0,0,0.5)",
marginRight:2,
marginTop:5,
// padding:3,
// border:"1px solid #ccc",
alignItems:"center",
borderRadius:5,
justifyContent:"center",
};
// return (
// <View></View>
// )
var numero=this.state.pos+1
return (
<View style={style} >
<ImageUpload label={this.state.label} style={ {
"alignSelf": "stretch",
backgroundColor:"#ccc",
"flex": 1
} } onChange={ (text) => {
this.state.item.url_img = text;
var item = this.state.item;
var pos = this.state.pos;
if(this.props.onChangeText){
this.props.onChangeText(this.state.lista,this.state.pos,text);
}
if(this.props.onChange){
this.props.onChange(this.state.lista,this.state.pos,text);
}
this.setState({pos:pos,item:item});
} } resizeMode={ "cover" } value={this.state.item.url_img }>
</ImageUpload>
<View style={{
top:0,
right:0,
height:60,
padding:5,
width:150,
"flexDirection": "row",
justifyContent:"flex-end",
"alignItems": "flex-end",
"position": "absolute",
}} >
{this.props.description?(
<TouchableOpacity style={[styleMarcador,{
}]} onPress = {()=>{
this.setState({open:true});
}} >
<Icon style={{
"color": "#fff",
"fontSize": 25
}} fromFontFamily={"Material Icons"} icon={"create"}
/>
</TouchableOpacity>
):null}
{numero>1?(
<TouchableOpacity style={[styleMarcador,{
}]} onPress = {()=>{
Alert.alert(
'Apagar',
'Deseja apagar este item N:'+numero+'?',
[
{text: 'Sim', onPress: () => this.delet()},
{text: 'Não', onPress: () => console.log()}
]
)
}} >
<Icon style={{
"color": "#fff",
"fontSize": 25
}} fromFontFamily={"Material Icons"} icon={"delete"}
/>
</TouchableOpacity>
):null}
</View>
<Modal
animationType={"fade"}
transparent={true}
onRequestClose={() => {
this.setState({open:false});
}}
visible={this.state.open}
>
<View style={ styles.view }>
<View style={ styles.view1 }>
<View style={ styles.view2 }>
<TouchableOpacity style={ styles.bottom } onPress={ () => {
this.setState({
open: false
})
} }>
<Icon style={ styles.icon } fromFontFamily={ "Material Icons" } icon={ "close" } />
</TouchableOpacity>
<Text style={ styles.label } text={ "Informações da foto "+(this.state.numero ?"número:" +this.state.numero :"")} />
<TouchableOpacity style={ styles.bottom1 } />
</View>
<View style={ styles.view3 }>
<TextInput style={ styles.nome } value={ this.state.item.nome } onChange={ (value) => {
this.state.item.nome = value ;
} } ref={ (v) => this.nome = v } keyboardType={ "default" } secureTextEntry={ false }
multiline={ false } label={ "Título" } />
<TextInput style={ styles.descricao } value={ this.state.item.descricao } onChange={ (value) => {
this.state.item.descricao = value ;
} } ref={ (v) => this.descricao = v } keyboardType={ "default" } secureTextEntry={ false }
multiline={ true } label={ "Descrição" } />
</View>
</View>
</View>
</Modal>
<View
style={{ flexWrap: "wrap",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",alignSelf:"stretch"}} >
{this.state.lista.map((object, pos)=>{
return (
<TouchableOpacity key={pos+"k"} style={[styleMarcador,{ backgroundColor:( pos==this.state.pos ? "#000":"#777")}]}
onPress={()=>{
this.setState({pos:pos,item:object});
}}>
<Text style={{color:"#ffffff",fontWeight:"bold",fontSize:20}}>{(pos+1)}</Text>
</TouchableOpacity>
);
})}
<TouchableOpacity style={styleMarcador} onPress={()=>{
this.novo();
}}>
<Icon icon={"add"} style={{color:"#fff",fontSize:35}} />
</TouchableOpacity>
<View style={{ "flex": 1,flexWrap: "wrap",flexDirection:"row",alignItems:"flex-start",justifyContent:"flex-start",alignSelf:"stretch"}} ></View>
</View>
</View>
);
}
}
var styles = StyleSheet.create(
{
"view": {
"flex": 1,
"flexDirection": "column",
"alignItems": "flex-start",
"justifyContent": "flex-start",
"flexWrap": "nowrap",
"position": "relative",
"padding": 30,
"backgroundColor": "rgba(0,0,0,0.3)"
},
"view1": {
"alignSelf": "stretch",
// "flex": 1,
padding:5,
"flexDirection": "column",
"alignItems": "flex-start",
"justifyContent": "flex-start",
"flexWrap": "nowrap",
borderRadius:5,
"position": "relative",
"backgroundColor": "rgba(255,255,255,1)"
},
"view2": {
"alignSelf": "stretch",
"flexDirection": "row",
"alignItems": "flex-start",
"justifyContent": "flex-start",
"flexWrap": "nowrap",
"position": "relative",
// "height": 50
},
"bottom": {
"alignSelf": "stretch",
"justifyContent": "center",
"alignItems": "center",
"height": 50,
"flexDirection": "column",
"flexWrap": "nowrap",
"position": "relative",
"width": 50
},
"icon": {
"color": "rgba(150,150,145,1)",
"fontSize": 25
},
"label": {
"textAlign": "center",
"flexWrap": "wrap",
"color": "rgba(0,0,0,1)",
"alignSelf": "stretch",
"flex": 1
},
"bottom1": {
"alignSelf": "stretch",
"justifyContent": "center",
"alignItems": "center",
"height": 50,
"flexDirection": "column",
"flexWrap": "nowrap",
"position": "relative",
"width": 50
},
"view3": {
"alignSelf": "stretch",
// "flex": 1,
"flexDirection": "column",
"alignItems": "flex-start",
"justifyContent": "flex-start",
"flexWrap": "nowrap",
"position": "relative",
"padding": 10
},
"nome": {
"minHeight": 35,
"color": "rgba(0,0,0,1)",
"alignSelf": "stretch",
"textAlign": "left",
"flexWrap": "nowrap"
},
"descricao": {
"minHeight": 35,
"color": "rgba(0,0,0,1)",
"alignSelf": "stretch",
"textAlign": "left",
"flexWrap": "nowrap",
"marginTop": 5
}
}
);