mirror of
https://github.com/react/react-native.git
synced 2026-09-29 16:58:04 +08:00
[React Native] open source ImageEditingManager native module
This commit is contained in:
Philipp von Weitershausen
@@ -0,0 +1,305 @@
|
||||
|
||||
/**
|
||||
* The examples provided by Facebook are for non-commercial testing and
|
||||
* evaluation purposes only.
|
||||
*
|
||||
* Facebook reserves all rights not expressly granted.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
||||
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
|
||||
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
||||
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
* @flow
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
CameraRoll,
|
||||
Image,
|
||||
NativeModules,
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableHighlight,
|
||||
View,
|
||||
} = React;
|
||||
var ImageEditingManager = NativeModules.ImageEditingManager;
|
||||
var RCTScrollViewConsts = NativeModules.UIManager.RCTScrollView.Constants;
|
||||
|
||||
var PAGE_SIZE = 20;
|
||||
|
||||
type ImageOffset = {
|
||||
x: number;
|
||||
y: number;
|
||||
};
|
||||
|
||||
type ImageSize = {
|
||||
width: number;
|
||||
height: number;
|
||||
};
|
||||
|
||||
type TransformData = {
|
||||
offset: ImageOffset;
|
||||
size: ImageSize;
|
||||
}
|
||||
|
||||
class SquareImageCropper extends React.Component {
|
||||
_isMounted: boolean;
|
||||
_transformData: TransformData;
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
this._isMounted = true;
|
||||
this.state = {
|
||||
randomPhoto: null,
|
||||
measuredSize: null,
|
||||
croppedImageURI: null,
|
||||
cropError: null,
|
||||
};
|
||||
this._fetchRandomPhoto();
|
||||
}
|
||||
|
||||
_fetchRandomPhoto() {
|
||||
CameraRoll.getPhotos(
|
||||
{first: PAGE_SIZE},
|
||||
(data) => {
|
||||
if (!this._isMounted) {
|
||||
return;
|
||||
}
|
||||
var edges = data.edges;
|
||||
var edge = edges[Math.floor(Math.random() * edges.length)];
|
||||
var randomPhoto = edge && edge.node && edge.node.image;
|
||||
if (randomPhoto) {
|
||||
this.setState({randomPhoto});
|
||||
}
|
||||
},
|
||||
(error) => undefined
|
||||
);
|
||||
}
|
||||
|
||||
componentWillUnmount() {
|
||||
this._isMounted = false;
|
||||
}
|
||||
|
||||
render() {
|
||||
if (!this.state.measuredSize) {
|
||||
return (
|
||||
<View
|
||||
style={styles.container}
|
||||
onLayout={(event) => {
|
||||
var measuredWidth = event.nativeEvent.layout.width;
|
||||
if (!measuredWidth) {
|
||||
return;
|
||||
}
|
||||
this.setState({
|
||||
measuredSize: {width: measuredWidth, height: measuredWidth},
|
||||
});
|
||||
}}
|
||||
/>
|
||||
);
|
||||
}
|
||||
|
||||
if (!this.state.croppedImageURI) {
|
||||
return this._renderImageCropper();
|
||||
}
|
||||
return this._renderCroppedImage();
|
||||
}
|
||||
|
||||
_renderImageCropper() {
|
||||
if (!this.state.randomPhoto) {
|
||||
return (
|
||||
<View style={styles.container} />
|
||||
);
|
||||
}
|
||||
var error = null;
|
||||
if (this.state.cropError) {
|
||||
error = (
|
||||
<Text>{this.state.cropError.message}</Text>
|
||||
);
|
||||
}
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>Drag the image within the square to crop:</Text>
|
||||
<ImageCropper
|
||||
image={this.state.randomPhoto}
|
||||
size={this.state.measuredSize}
|
||||
style={[styles.imageCropper, this.state.measuredSize]}
|
||||
onTransformDataChange={(data) => this._transformData = data}
|
||||
/>
|
||||
<TouchableHighlight
|
||||
style={styles.cropButtonTouchable}
|
||||
onPress={this._crop.bind(this)}>
|
||||
<View style={styles.cropButton}>
|
||||
<Text style={styles.cropButtonLabel}>
|
||||
Crop
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
{error}
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_renderCroppedImage() {
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<Text>Here is the cropped image:</Text>
|
||||
<Image
|
||||
source={{uri: this.state.croppedImageURI}}
|
||||
style={[styles.imageCropper, this.state.measuredSize]}
|
||||
/>
|
||||
<TouchableHighlight
|
||||
style={styles.cropButtonTouchable}
|
||||
onPress={this._reset.bind(this)}>
|
||||
<View style={styles.cropButton}>
|
||||
<Text style={styles.cropButtonLabel}>
|
||||
Try again
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_crop() {
|
||||
ImageEditingManager.cropImage(
|
||||
this.state.randomPhoto.uri,
|
||||
this._transformData,
|
||||
(croppedImageURI) => this.setState({croppedImageURI}),
|
||||
(cropError) => this.setState({cropError})
|
||||
);
|
||||
}
|
||||
|
||||
_reset() {
|
||||
this.setState({
|
||||
randomPhoto: null,
|
||||
croppedImageURI: null,
|
||||
cropError: null,
|
||||
});
|
||||
this._fetchRandomPhoto();
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
class ImageCropper extends React.Component {
|
||||
_scaledImageSize: ImageSize;
|
||||
_contentOffset: ImageOffset;
|
||||
|
||||
componentWillMount() {
|
||||
// Scale an image to the minimum size that is large enough to completely
|
||||
// fill the crop box.
|
||||
var widthRatio = this.props.image.width / this.props.size.width;
|
||||
var heightRatio = this.props.image.height / this.props.size.height;
|
||||
if (widthRatio < heightRatio) {
|
||||
this._scaledImageSize = {
|
||||
width: this.props.size.width,
|
||||
height: this.props.image.height / widthRatio,
|
||||
};
|
||||
} else {
|
||||
this._scaledImageSize = {
|
||||
width: this.props.image.width / heightRatio,
|
||||
height: this.props.size.height,
|
||||
};
|
||||
}
|
||||
this._contentOffset = {
|
||||
x: (this._scaledImageSize.width - this.props.size.width) / 2,
|
||||
y: (this._scaledImageSize.height - this.props.size.height) / 2,
|
||||
};
|
||||
this._updateTransformData(
|
||||
this._contentOffset,
|
||||
this._scaledImageSize,
|
||||
this.props.size
|
||||
);
|
||||
}
|
||||
|
||||
_onScroll(event) {
|
||||
this._updateTransformData(
|
||||
event.nativeEvent.contentOffset,
|
||||
event.nativeEvent.contentSize,
|
||||
event.nativeEvent.layoutMeasurement
|
||||
);
|
||||
}
|
||||
|
||||
_updateTransformData(offset, scaledImageSize, croppedImageSize) {
|
||||
var offsetRatioX = offset.x / scaledImageSize.width;
|
||||
var offsetRatioY = offset.y / scaledImageSize.height;
|
||||
var sizeRatioX = croppedImageSize.width / scaledImageSize.width;
|
||||
var sizeRatioY = croppedImageSize.height / scaledImageSize.height;
|
||||
|
||||
this.props.onTransformDataChange && this.props.onTransformDataChange({
|
||||
offset: {
|
||||
x: this.props.image.width * offsetRatioX,
|
||||
y: this.props.image.height * offsetRatioY,
|
||||
},
|
||||
size: {
|
||||
width: this.props.image.width * sizeRatioX,
|
||||
height: this.props.image.height * sizeRatioY,
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
render() {
|
||||
var decelerationRate =
|
||||
RCTScrollViewConsts && RCTScrollViewConsts.DecelerationRate ?
|
||||
RCTScrollViewConsts.DecelerationRate.Fast :
|
||||
0;
|
||||
|
||||
return (
|
||||
<ScrollView
|
||||
alwaysBounceVertical={true}
|
||||
automaticallyAdjustContentInsets={false}
|
||||
contentOffset={this._contentOffset}
|
||||
decelerationRate={decelerationRate}
|
||||
horizontal={true}
|
||||
maximumZoomScale={3.0}
|
||||
onMomentumScrollEnd={this._onScroll.bind(this)}
|
||||
onScrollEndDrag={this._onScroll.bind(this)}
|
||||
showsHorizontalScrollIndicator={false}
|
||||
showsVerticalScrollIndicator={false}
|
||||
style={this.props.style}
|
||||
scrollEventThrottle={16}>
|
||||
<Image source={this.props.image} style={this._scaledImageSize} />
|
||||
</ScrollView>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
exports.framework = 'React';
|
||||
exports.title = 'ImageEditingManager';
|
||||
exports.description = 'Cropping and scaling with ImageEditingManager';
|
||||
exports.examples = [{
|
||||
title: 'Image Cropping',
|
||||
render() {
|
||||
return <SquareImageCropper/>;
|
||||
}
|
||||
}];
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
alignSelf: 'stretch',
|
||||
},
|
||||
imageCropper: {
|
||||
alignSelf: 'center',
|
||||
marginTop: 12,
|
||||
},
|
||||
cropButtonTouchable: {
|
||||
alignSelf: 'center',
|
||||
marginTop: 12,
|
||||
},
|
||||
cropButton: {
|
||||
padding: 12,
|
||||
backgroundColor: 'blue',
|
||||
borderRadius: 4,
|
||||
},
|
||||
cropButtonLabel: {
|
||||
color: 'white',
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
},
|
||||
});
|
||||
@@ -75,6 +75,7 @@ var APIS = [
|
||||
require('./TimerExample'),
|
||||
require('./VibrationIOSExample'),
|
||||
require('./XHRExample'),
|
||||
require('./ImageEditingExample'),
|
||||
];
|
||||
|
||||
// Register suitable examples for snapshot tests
|
||||
|
||||
@@ -1,344 +0,0 @@
|
||||
/**
|
||||
* The examples provided by Facebook are for non-commercial testing and
|
||||
* evaluation purposes only.
|
||||
*
|
||||
* Facebook reserves all rights not expressly granted.
|
||||
*
|
||||
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS
|
||||
* OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
* FITNESS FOR A PARTICULAR PURPOSE AND NON INFRINGEMENT. IN NO EVENT SHALL
|
||||
* FACEBOOK BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN
|
||||
* AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
|
||||
* CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
||||
*
|
||||
* @flow
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
var React = require('react-native');
|
||||
var {
|
||||
AppRegistry,
|
||||
ListView,
|
||||
PixelRatio,
|
||||
Platform,
|
||||
Settings,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableHighlight,
|
||||
View,
|
||||
} = React;
|
||||
|
||||
var { TestModule } = React.addons;
|
||||
|
||||
import type { ExampleModule } from 'ExampleTypes';
|
||||
import type { NavigationContext } from 'NavigationContext';
|
||||
|
||||
var createExamplePage = require('./createExamplePage');
|
||||
|
||||
var COMMON_COMPONENTS = [
|
||||
require('./ImageExample'),
|
||||
require('./LayoutEventsExample'),
|
||||
require('./ListViewExample'),
|
||||
require('./ListViewGridLayoutExample'),
|
||||
require('./ListViewPagingExample'),
|
||||
require('./MapViewExample'),
|
||||
require('./Navigator/NavigatorExample'),
|
||||
require('./ScrollViewExample'),
|
||||
require('./TextInputExample'),
|
||||
require('./TouchableExample'),
|
||||
require('./ViewExample'),
|
||||
require('./WebViewExample'),
|
||||
];
|
||||
|
||||
var COMMON_APIS = [
|
||||
require('./AnimationExample/AnExApp'),
|
||||
require('./GeolocationExample'),
|
||||
require('./LayoutExample'),
|
||||
require('./PanResponderExample'),
|
||||
require('./PointerEventsExample'),
|
||||
];
|
||||
|
||||
if (Platform.OS === 'ios') {
|
||||
var COMPONENTS = COMMON_COMPONENTS.concat([
|
||||
require('./ActivityIndicatorIOSExample'),
|
||||
require('./DatePickerIOSExample'),
|
||||
require('./NavigatorIOSColorsExample'),
|
||||
require('./NavigatorIOSExample'),
|
||||
require('./PickerIOSExample'),
|
||||
require('./ProgressViewIOSExample'),
|
||||
require('./SegmentedControlIOSExample'),
|
||||
require('./SliderIOSExample'),
|
||||
require('./SwitchIOSExample'),
|
||||
require('./TabBarIOSExample'),
|
||||
require('./TextExample.ios'),
|
||||
]);
|
||||
|
||||
var APIS = COMMON_APIS.concat([
|
||||
require('./AccessibilityIOSExample'),
|
||||
require('./ActionSheetIOSExample'),
|
||||
require('./AdSupportIOSExample'),
|
||||
require('./AlertIOSExample'),
|
||||
require('./AppStateIOSExample'),
|
||||
require('./AsyncStorageExample'),
|
||||
require('./TransformExample'),
|
||||
require('./BorderExample'),
|
||||
require('./CameraRollExample.ios'),
|
||||
require('./NetInfoExample'),
|
||||
require('./PushNotificationIOSExample'),
|
||||
require('./StatusBarIOSExample'),
|
||||
require('./TimerExample'),
|
||||
require('./VibrationIOSExample'),
|
||||
require('./XHRExample'),
|
||||
]);
|
||||
|
||||
} else if (Platform.OS === 'android') {
|
||||
var COMPONENTS = COMMON_COMPONENTS.concat([
|
||||
]);
|
||||
|
||||
var APIS = COMMON_APIS.concat([
|
||||
]);
|
||||
}
|
||||
|
||||
var ds = new ListView.DataSource({
|
||||
rowHasChanged: (r1, r2) => r1 !== r2,
|
||||
sectionHeaderHasChanged: (h1, h2) => h1 !== h2,
|
||||
});
|
||||
|
||||
function makeRenderable(example: any): ReactClass<any, any, any> {
|
||||
return example.examples ?
|
||||
createExamplePage(null, example) :
|
||||
example;
|
||||
}
|
||||
|
||||
// Register suitable examples for snapshot tests
|
||||
COMPONENTS.concat(APIS).forEach((Example) => {
|
||||
if (Example.displayName) {
|
||||
var Snapshotter = React.createClass({
|
||||
componentDidMount: function() {
|
||||
// View is still blank after first RAF :\
|
||||
global.requestAnimationFrame(() =>
|
||||
global.requestAnimationFrame(() => TestModule.verifySnapshot(
|
||||
TestModule.markTestPassed
|
||||
)
|
||||
));
|
||||
},
|
||||
render: function() {
|
||||
var Renderable = makeRenderable(Example);
|
||||
return <Renderable />;
|
||||
},
|
||||
});
|
||||
AppRegistry.registerComponent(Example.displayName, () => Snapshotter);
|
||||
}
|
||||
});
|
||||
|
||||
type Props = {
|
||||
navigator: {
|
||||
navigationContext: NavigationContext,
|
||||
push: (route: {title: string, component: ReactClass<any,any,any>}) => void,
|
||||
},
|
||||
onExternalExampleRequested: Function,
|
||||
onSelectExample: Function,
|
||||
isInDrawer: bool,
|
||||
};
|
||||
|
||||
class UIExplorerList extends React.Component {
|
||||
props: Props;
|
||||
|
||||
constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
dataSource: ds.cloneWithRowsAndSections({
|
||||
components: COMPONENTS,
|
||||
apis: APIS,
|
||||
}),
|
||||
searchText: Platform.OS === 'ios' ? Settings.get('searchText') : '',
|
||||
};
|
||||
}
|
||||
|
||||
componentWillMount() {
|
||||
this.props.navigator.navigationContext.addListener('didfocus', function(event) {
|
||||
if (event.data.route.title === 'UIExplorer') {
|
||||
Settings.set({visibleExample: null});
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
componentDidMount() {
|
||||
this._search(this.state.searchText);
|
||||
}
|
||||
|
||||
render() {
|
||||
if (Platform.OS === 'ios' ||
|
||||
(Platform.OS === 'android' && !this.props.isInDrawer)) {
|
||||
var platformTextInputStyle =
|
||||
Platform.OS === 'ios' ? styles.searchTextInputIOS :
|
||||
Platform.OS === 'android' ? styles.searchTextInputAndroid : {};
|
||||
var textInput = (
|
||||
<View style={styles.searchRow}>
|
||||
<TextInput
|
||||
autoCapitalize="none"
|
||||
autoCorrect={false}
|
||||
clearButtonMode="always"
|
||||
onChangeText={this._search.bind(this)}
|
||||
placeholder="Search..."
|
||||
style={[styles.searchTextInput, platformTextInputStyle]}
|
||||
testID="explorer_search"
|
||||
value={this.state.searchText}
|
||||
/>
|
||||
</View>);
|
||||
}
|
||||
|
||||
var homePage;
|
||||
if (Platform.OS === 'android' && this.props.isInDrawer) {
|
||||
homePage = this._renderRow({
|
||||
title: 'UIExplorer',
|
||||
description: 'List of examples',
|
||||
}, -1);
|
||||
}
|
||||
|
||||
return (
|
||||
<View style={styles.listContainer}>
|
||||
{textInput}
|
||||
{homePage}
|
||||
<ListView
|
||||
style={styles.list}
|
||||
dataSource={this.state.dataSource}
|
||||
renderRow={this._renderRow.bind(this)}
|
||||
renderSectionHeader={this._renderSectionHeader}
|
||||
keyboardShouldPersistTaps={true}
|
||||
automaticallyAdjustContentInsets={false}
|
||||
keyboardDismissMode="on-drag"
|
||||
/>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_renderSectionHeader(data: any, section: string) {
|
||||
return (
|
||||
<View style={styles.sectionHeader}>
|
||||
<Text style={styles.sectionHeaderTitle}>
|
||||
{section.toUpperCase()}
|
||||
</Text>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_renderRow(example: any, i: number) {
|
||||
return (
|
||||
<View key={i}>
|
||||
<TouchableHighlight onPress={() => this._onPressRow(example)}>
|
||||
<View style={styles.row}>
|
||||
<Text style={styles.rowTitleText}>
|
||||
{example.title}
|
||||
</Text>
|
||||
<Text style={styles.rowDetailText}>
|
||||
{example.description}
|
||||
</Text>
|
||||
</View>
|
||||
</TouchableHighlight>
|
||||
<View style={styles.separator} />
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
_search(text: mixed) {
|
||||
var regex = new RegExp(text, 'i');
|
||||
var filter = (component) => regex.test(component.title);
|
||||
|
||||
this.setState({
|
||||
dataSource: ds.cloneWithRowsAndSections({
|
||||
components: COMPONENTS.filter(filter),
|
||||
apis: APIS.filter(filter),
|
||||
}),
|
||||
searchText: text,
|
||||
});
|
||||
Settings.set({searchText: text});
|
||||
}
|
||||
|
||||
_openExample(example: any) {
|
||||
if (example.external) {
|
||||
this.props.onExternalExampleRequested(example);
|
||||
return;
|
||||
}
|
||||
|
||||
var Component = makeRenderable(example);
|
||||
if (Platform.OS === 'ios') {
|
||||
this.props.navigator.push({
|
||||
title: Component.title,
|
||||
component: Component,
|
||||
});
|
||||
} else if (Platform.OS === 'android') {
|
||||
this.props.onSelectExample({
|
||||
title: Component.title,
|
||||
component: Component,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
_onPressRow(example: any) {
|
||||
Settings.set({visibleExample: example.title});
|
||||
this._openExample(example);
|
||||
}
|
||||
}
|
||||
|
||||
var styles = StyleSheet.create({
|
||||
listContainer: {
|
||||
flex: 1,
|
||||
},
|
||||
list: {
|
||||
backgroundColor: '#eeeeee',
|
||||
},
|
||||
sectionHeader: {
|
||||
padding: 5,
|
||||
},
|
||||
group: {
|
||||
backgroundColor: 'white',
|
||||
},
|
||||
sectionHeaderTitle: {
|
||||
fontWeight: '500',
|
||||
fontSize: 11,
|
||||
},
|
||||
row: {
|
||||
backgroundColor: 'white',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 15,
|
||||
paddingVertical: 8,
|
||||
},
|
||||
separator: {
|
||||
height: 1 / PixelRatio.get(),
|
||||
backgroundColor: '#bbbbbb',
|
||||
marginLeft: 15,
|
||||
},
|
||||
rowTitleText: {
|
||||
fontSize: 17,
|
||||
fontWeight: '500',
|
||||
},
|
||||
rowDetailText: {
|
||||
fontSize: 15,
|
||||
color: '#888888',
|
||||
lineHeight: 20,
|
||||
},
|
||||
searchRow: {
|
||||
backgroundColor: '#eeeeee',
|
||||
paddingTop: 75,
|
||||
paddingLeft: 10,
|
||||
paddingRight: 10,
|
||||
paddingBottom: 10,
|
||||
},
|
||||
searchTextInput: {
|
||||
backgroundColor: 'white',
|
||||
borderColor: '#cccccc',
|
||||
borderRadius: 3,
|
||||
borderWidth: 1,
|
||||
paddingLeft: 8,
|
||||
},
|
||||
searchTextInputIOS: {
|
||||
height: 30,
|
||||
},
|
||||
searchTextInputAndroid: {
|
||||
padding: 2,
|
||||
},
|
||||
});
|
||||
|
||||
module.exports = UIExplorerList;
|
||||
@@ -144,7 +144,6 @@ class FormUploader extends React.Component {
|
||||
CameraRoll.getPhotos(
|
||||
{first: PAGE_SIZE},
|
||||
(data) => {
|
||||
console.log('isMounted', this._isMounted);
|
||||
if (!this._isMounted) {
|
||||
return;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user