/**
* Created by zack on 2018/5/23.
*/
import {
View,
Text,
StyleSheet,
TextInput,
TouchableOpacity,
Platform,
FlatList,
Image,
NativeModules
} from 'react-native'
import React, {Component} from 'react'
import {NavigationBarHeight, TabBarHeight, ScreenDimensions} from '../../../utils/DimensionsTools'
import BaseNavigationBarStyle from '../../base/BaseNavigationBarStyle'
import ImagePicker from 'react-native-image-crop-picker';
import ActionSheet from 'react-native-actionsheet'
import ToastMsg from '../../../utils/ToastMsg'
import HttpTools from '../../../network/HttpTools'
import {auth, question} from '../../../network/API'
import {GlobalMD5EncryptTool} from '../../../utils/GlobalEncryptTool'
const ImageListViewMaxHeight = 320
const ImageListItemWidth = ((ScreenDimensions.width - 56 - 30)/3.0)
const ImageListItemHeight = ((ScreenDimensions.width - 56 - 30)/3.0)
const ImageBaseUrl = 'https://links123-images.oss-cn-hangzhou.aliyuncs.com/'
//test png 0a682be491c4f2938a9c2a927c3bc16f.jpg 76b4fee490acc691f1421e9ed45a2a9b.jpeg
export default class QuestionCreateAddImageViewController extends Component {
static navigatorButtons = {
rightButtons: [
{
title: '发布', // for a textual button, provide the button title (label)
id: 'Send', // id for this button, given in onNavigatorEvent(event) to help understand which button was clicked
disabled: false, // optional, used to disable the button (appears faded and doesn't interact)
buttonColor: '#449edc', // Optional, iOS only. Set color for the button (can also be used in setButtons function to set different button style programatically)
buttonFontSize: 16,
},
],
}
constructor(props) {
super(props)
this.state = {
imageListViewHeight: ImageListViewMaxHeight,
selectedImagesMap: new Map(),
questionTitle: props.questionTitle,
questionDesc: ''
}
}
componentDidMount() {
this.props.navigator.setOnNavigatorEvent(event => {
if (event.type === 'NavBarButtonPress') {
if (event.id === 'Send') {
// this.postQuestion()
if (Platform.OS === 'ios') {
this.props.navigator.dismissAllModals()
}else {
this.props.navigator.popToRoot()
}
}else if (event.id === 'cancel'){
this.props.navigator.dismissModal()
}
}
})
}
postQuestion() {
let imageNames = []
let imageBase64Strings = []
for (let [url, imageInfo] of this.state.selectedImagesMap.entries()) {
let urlStatementArrays = url.split('/')
if (urlStatementArrays.length) {
let fileFullName = urlStatementArrays[urlStatementArrays.length - 1]
//MD5(filename + userID )
let fileFullNameArray = fileFullName.split('.')
let fileName = fileFullNameArray[0]
let fileExtension = fileFullNameArray[1]
let userId = "zack" //以后会使用USER id替代
let timeStamp = (new Date()).getTime()
let imageName = GlobalMD5EncryptTool.encrypt(userId + fileName + timeStamp + '')
imageNames.push(imageName + '.' + fileExtension)
imageBase64Strings.push(imageInfo.data)
}
}
if (Platform.OS === 'ios') {
const aliOSSModule = NativeModules.AliOSSModule
aliOSSModule.uploadImages(imageNames, imageBase64Strings, (state) => {
// this.createNewQuestion(this.state.questionTitle, this.state.questionDesc, imageNames)
})
}else {
//beginTask
const aliOSSModule = NativeModules.AliOSSModule
aliOSSModule.uploadImages(imageNames, imageBase64Strings, (state) => {
alert(state)
// this.createNewQuestion(this.state.questionTitle, this.state.questionDesc, imageNames)
})
}
}
androidUploadImage(imageName, imageBase64Strings) {
const aliOSSModule = NativeModules.AliOSSModule
aliOSSModule.uploadImage(imageNames[0], imageBase64Strings[0], (taksIndex)=> {
} )
}
createNewQuestion(questionTitle, questionDesc, imageUrls) {
const param = JSON.stringify({
title: questionTitle,
img_urls: imageUrls,
content: questionDesc
})
HttpTools.post(question, param, (response) => {
console.log(response)
this.props.navigator.dismissAllModals(); //回到首页
}, (error) => {
console.log(error)
})
}
goToGallery() {
ImagePicker.openPicker({
multiple: true,
includeBase64: true,
mediaType: 'photo',
writeTempFile: false,
}).then(images => {
const imageMap = this.state.selectedImagesMap
for(let i = 0; i < images.length; i ++) {
const url = Platform.OS === 'ios' ? images[i].sourceURL : images[i].path
imageMap.set(url, images[i])
}
if (imageMap.size > 9) {
ToastMsg.show("最多还可以添加" + images.length - imageMap.size + '张图片!')
// return
}
this.setState({selectedImagesMap: imageMap})
});
}
openCamera() {
ImagePicker.openCamera({
width: 300,
height: 400,
cropping: true,
includeBase64: true
}).then(image => {
const imageMap = this.state.selectedImagesMap
const url = Platform.OS === 'ios' ? image.sourceURL : image.path
imageMap.set(url, image)
this.setState({selectedImagesMap: imageMap})
});
}
deleteSelectedImage(key) {
let selectedImageSources = this.state.selectedImagesMap
selectedImageSources.delete(key)
this.setState({selectedImagesMap: selectedImageSources})
}
showActionSheet() {
this.ActionSheet.show()
}
actionSheetClickedIndex(index) {
if (index === 1) {
this.openCamera()
}else if (index === 2) {
this.goToGallery()
}
}
renderImageBgItem(rows) {
let selectedImageSources = []
let imageItems = []
for (let [key, value] of this.state.selectedImagesMap.entries()) {
selectedImageSources.push(value)
}
for (let i = 0; i < selectedImageSources.length; i ++) {
const imageItem = this.renderImageItem(selectedImageSources[i], i)
imageItems.push(imageItem)
}
//还需要添加一个add 图片的按钮,根据数量决定是否正确显示
if (selectedImageSources.length < 9 ) {
let addButtonItem = this.renderAddButton()
imageItems.push(addButtonItem)
}
return(
{imageItems}
)
}
renderImageItem(imageItem, i) {
let marginLeft = 0
if (i%3 === 0) {
marginLeft = 28
}else {
marginLeft = 15
}
let marginRight = 0
if (i%3 === 2) {
marginRight = 28
}else {
marginRight = 0
}
let marginTop = 0
if (i <= 2) {
marginTop = 0
}else {
marginTop = 15
}
return (
{
const key = Platform.OS === 'ios' ? imageItem.sourceURL : imageItem.path
this.deleteSelectedImage(key)
}} style={{width: 21, height: 21, position: 'absolute', left: 10, top: 10, justifyContent: 'center', alignItems: 'center'}}>
)
}
renderAddButton() {
return (
{
this.showActionSheet()
}} key = {9} style={{width: ImageListItemWidth, height: ImageListItemHeight, backgroundColor: 'white',
marginLeft: (this.state.selectedImagesMap.size%6 === 0 ? 28 : 15), marginRight: 0, marginTop: (this.state.selectedImagesMap.size <=2 ? 0 : 15),
marginBottom: 5}}>
)
}
render() {
return (
{this.state.questionTitle}
this.renderImageBgItem(item)}
keyboardDismissMode = 'on-drag'
keyExtractor = {(item,index) =>{
return 'key' + item.key + index
}}
/>
this.ActionSheet = o}
title={'Choose images to send.'}
options={['Cancel', 'Take a photo', 'Select from album']}
cancelButtonIndex={0}
destructiveButtonIndex={-1}
onPress={(index) => this.actionSheetClickedIndex(index)}
/>
);
}
}
const styles = StyleSheet.create({
View: {
width: ScreenDimensions.width,
height: ScreenDimensions.height,
backgroundColor: 'white'
},
TitleText: {
fontSize: 17,
color: '#4A4A4A',
marginLeft: 28,
marginTop: NavigationBarHeight.height + 57,
width: ScreenDimensions.width - 28 - 10,
textAlignVertical: 'top'
},
TextInput: {
width: ScreenDimensions.width - 56,
fontSize: 16,
color: '#4A4A4A',
marginLeft: 28,
marginTop: 42,
height: 44,
paddingLeft: 0,
paddingTop: 0,
paddingRight: 0,
paddingBottom: 0
},
ImageListView: {
width: ScreenDimensions.width,
backgroundColor: '#efeff4',
marginTop: 32,
},
})