1
/*
2
 * Copyright 2017-2017 Amazon.com, Inc. or its affiliates. All Rights Reserved.
3
 *
4
 * Licensed under the Apache License, Version 2.0 (the "License"). You may not use this file except in compliance with
5
 * the License. A copy of the License is located at
6
 *
7
 *     http://aws.amazon.com/apache2.0/
8
 *
9
 * or in the "license" file accompanying this file. This file is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR
10
 * CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions
11
 * and limitations under the License.
12
 */
13

14 1
import * as React from 'react';
15

16 1
import { I18n, ConsoleLogger as Logger } from '@aws-amplify/core';
17 1
import { Picker } from './Picker';
18 1
import AmplifyTheme from '../Amplify-UI/Amplify-UI-Theme';
19 1
import {
20
	FormSection,
21
	SectionHeader,
22
	SectionBody,
23
	PhotoPlaceholder,
24
} from '../Amplify-UI/Amplify-UI-Components-React';
25

26 1
const PickerPreview = {
27
	maxWidth: '100%',
28
};
29

30 1
const logger = new Logger('PhotoPicker');
31

32
export interface IPhotoPickerProps {
33
	headerHint?: string;
34
	headerText?: string;
35
	onLoad?: (dataUrl: any) => void;
36
	onPick?: (data: any) => void;
37
	preview?: 'hidden';
38
	previewSrc?: string;
39
	title?: string;
40
	theme?: any;
41
}
42

43
export interface IPhotoPickerState {
44
	previewSrc?: string;
45
}
46

47 1
export class PhotoPicker extends React.Component<
48
	IPhotoPickerProps,
49
	IPhotoPickerState
50
> {
51
	constructor(props) {
52 1
		super(props);
53

54 1
		this.handlePick = this.handlePick.bind(this);
55

56 1
		this.state = {
57
			previewSrc: props.previewSrc,
58
		};
59
	}
60

61 1
	handlePick(data) {
62 1
		const that = this;
63 1
		const { file, name, size, type } = data;
64 1
		const { preview, onPick, onLoad } = this.props;
65

66 1
		if (onPick) {
67 1
			onPick(data);
68
		}
69

70 1
		if (preview) {
71 1
			const reader = new FileReader();
72 1
			reader.onload = function(e) {
73 0
				const url = e.target.result;
74
				// @ts-ignore
75 0
				that.setState({ previewSrc: url });
76 1
				if (onLoad) {
77 0
					onLoad(url);
78
				}
79
			};
80 1
			reader.readAsDataURL(file);
81
		}
82
	}
83

84 1
	render() {
85 1
		const { preview } = this.props;
86 1
		const { previewSrc } = this.state;
87

88 1
		const headerText = this.props.headerText || 'Photos';
89
		const headerHint =
90 1
			this.props.headerHint || 'Add your photos by clicking below';
91 1
		const title = this.props.title || 'Select a Photo';
92

93 1
		const theme = this.props.theme || AmplifyTheme;
94 1
		const previewStyle = Object.assign({}, PickerPreview, theme.pickerPreview);
95

96 1
		const previewHidden = !(preview && preview !== 'hidden');
97

98 1
		return (
99
			<FormSection theme={theme}>
100
				<SectionHeader theme={theme} hint={headerHint}>
101
					{I18n.get(headerText)}
102
				</SectionHeader>
103
				<SectionBody theme={theme}>
104
					{previewSrc ? (
105 1
						previewHidden ? (
106 1
							'The image has been selected'
107
						) : (
108
							<img src={previewSrc} style={previewStyle} />
109
						)
110
					) : (
111
						<PhotoPlaceholder theme={theme} />
112
					)}
113
				</SectionBody>
114
				<Picker
115
					title={title}
116
					accept="image/*"
117
					theme={theme}
118
					onPick={this.handlePick}
119
				/>
120
			</FormSection>
121
		);
122
	}
123 1
}
124

125
/**
126
 * @deprecated use named import
127
 */
128 1
export default PhotoPicker;

Read our documentation on viewing source code .

Loading