Select image

README.md

@@ -19,7 +19,7 @@ This project is from mobile software development class.
   - [ ] Corners
 - [x] Add slide
 - [x] Slide editing
-- [ ] Change background image
+- [x] Change background image
 - [ ] Select background color
 - [ ] Select text color
 - [ ] Multiplatform

components/App/view.js

@@ -8,12 +8,14 @@ import FileList from '../FileList';
 import BackStack from '../BackStack';
 import Editor from '../Editor';
 import ImagePicker from '../ImagePicker';
+import ImagePreview from '../ImagePreview';
 
 export default class App extends Component {
 	static routes = {
 		FileList: FileList,
 		Editor: Editor,
 		ImagePicker: ImagePicker,
+		ImagePreview: ImagePreview,
 	};
 
 	componentDidMount(){
@@ -50,4 +52,4 @@ export default class App extends Component {
 			route: route,
 		});
 	}
-}
+}

components/Editor/view.js

@@ -76,7 +76,10 @@ export default class Editor extends Component {
 	}
 
 	_onImagePickerButton = () => {
-		this.props.navigator.push({name: 'ImagePicker', index: this.props.index + 1});
+		this.props.navigator.push({
+			name: 'ImagePicker', index: this.props.index + 1,
+			callback: this._onImagePicked,
+		});
 	};
 
 	_onPreviewButton = () => {
@@ -118,4 +121,10 @@ export default class Editor extends Component {
 			};
 		});
 	};
+
+	_onImagePicked = (url) => {
+		Realm.write(() => {
+			this.file.slides[this.state.page].image = url;
+		});
+	};
 }

components/ImagePicker/view.js

@@ -83,12 +83,12 @@ export default class ImagePicker extends Component {
 		if(height > width){
 			width = height;
 		}
-		
+
 		let imageWidth = width / this.perRow;
 
 		return (
 			<TouchableHighlight onPress={() => {this.onSelect(item)}} key={item.id} underlayColor={item.color}>
-				<Image 
+				<Image
 					style={[styles.gallery, {
 						backgroundColor: item.color,
 						width: imageWidth,
@@ -134,10 +134,14 @@ export default class ImagePicker extends Component {
 	};
 
 	onSelect(item){
-		console.log(item);
+		this.props.navigator.push({
+			name: 'ImagePreview', index: this.props.index + 1,
+			image: item,
+			callback: this.props.route.callback,
+		});
 	}
 
 	_onPreviousButton = () => {
 		this.props.navigator.pop();
 	};
-}
+}

components/ImagePreview/package.json

@@ -0,0 +1,5 @@
+{
+	"name": "imagepreview",
+	"private": true,
+	"main": "view.js"
+}

components/ImagePreview/view.js

@@ -0,0 +1,65 @@
+import React, {
+	Component,
+	Text,
+	Image,
+	View,
+} from 'react-native';
+import Button from 'apsl-react-native-button'
+
+export default class ImagePicker extends Component {
+	render(){
+		let item = this.props.route.image;
+		return (
+			<Image
+				style={{
+					backgroundColor: item.color,
+					flex: 1,
+					paddingTop: 24+16,
+					paddingLeft: 16,
+				}}
+				source={{uri: item.urls.regular}}
+				resizeMode="contain">
+				<Text style={{
+					color: '#ffffff',
+					textShadowColor: '#222222',
+					textShadowOffset: {height: 1, width: 0},
+				}}>{item.user.name}</Text>
+				<View style={{
+					flexDirection: 'row',
+					width: 200,
+					position: 'absolute',
+					right: 16,
+					top: 24+16,
+					opacity: 0.8,
+				}}>
+					<Button style={{
+						borderColor: '#2980b9',
+						backgroundColor: '#3498db',
+						flex: 1,
+						marginRight: 10,
+					}} onPress={this.onUse}>Use</Button>
+					<Button style={{
+						borderColor: '#c0392b',
+						backgroundColor: '#e74c3c',
+						flex: 1,
+					}} onPress={() => {
+						this.props.navigator.pop();
+					}}>Back</Button>
+				</View>
+			</Image>
+		)
+	}
+
+	onUse = () => {
+		let routes = this.props.navigator.getCurrentRoutes();
+
+		for(let i = routes.length - 1; i >= 0; i--){
+			let route = routes[i];
+			if(route.name === 'Editor'){
+				this.props.route.callback(this.props.route.image.urls.regular);
+				this.props.navigator.popToRoute(route);
+				return;
+			}
+		}
+	};
+}

components/Slide/view.js

@@ -100,7 +100,7 @@ export default class Slide extends Component {
 						<Image style={[
 							styles.image,
 							size
-						]} source={this.props.slide.image}>
+						]} source={{uri: this.props.slide.image}}>
 							{text}
 						</Image>
 					</View>

package.json

@@ -6,6 +6,7 @@
     "start": "node node_modules/react-native/local-cli/cli.js start"
   },
   "dependencies": {
+    "apsl-react-native-button": "^2.4.2",
     "react": "^0.14.5",
     "react-native": "^0.24.1",
     "react-native-grid-view": "^0.3.7",