Refactor LinearGradient as functional component

This commit is contained in:
Dmitry Gladkov 2016-06-06 17:38:37 +03:00
parent b780d9df2e
commit 366239e441
2 changed files with 76 additions and 76 deletions

View File

@ -1,17 +1,15 @@
import React, { PropTypes } from 'react';
import { processColor, requireNativeComponent, StyleSheet, View } from 'react-native';
var LinearGradient = React.createClass({
propTypes: {
start: PropTypes.arrayOf(PropTypes.number),
end: PropTypes.arrayOf(PropTypes.number),
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
locations: PropTypes.arrayOf(PropTypes.number),
...View.propTypes,
},
render: function() {
var { style, children, colors, locations, start, end, ...otherProps } = this.props;
export default function LinearGradient({
children,
colors,
end,
locations,
start,
style,
...otherProps
}) {
if ((colors && locations) && (colors.length !== locations.length)) {
console.warn('LinearGradient colors and locations props should be arrays of the same length');
@ -19,12 +17,12 @@ var LinearGradient = React.createClass({
// inherit container borderRadius until this issue is resolved:
// https://github.com/facebook/react-native/issues/3198
var flatStyle = StyleSheet.flatten(style) || {};
var borderRadius = flatStyle.borderRadius || 0;
const flatStyle = StyleSheet.flatten(style) || {};
const borderRadius = flatStyle.borderRadius || 0;
// this is the format taken by:
// http://developer.android.com/reference/android/graphics/Path.html#addRoundRect(android.graphics.RectF, float[], android.graphics.Path.Direction)
var borderRadiiPerCorner = [
const borderRadiiPerCorner = [
flatStyle.borderTopLeftRadius || borderRadius,
flatStyle.borderTopLeftRadius || borderRadius,
flatStyle.borderTopRightRadius || borderRadius,
@ -48,9 +46,14 @@ var LinearGradient = React.createClass({
{ children }
</View>
);
}
})
}
var NativeLinearGradient = requireNativeComponent('BVLinearGradient', null);
LinearGradient.propTypes = {
start: PropTypes.arrayOf(PropTypes.number),
end: PropTypes.arrayOf(PropTypes.number),
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
locations: PropTypes.arrayOf(PropTypes.number),
...View.propTypes,
};
module.exports = LinearGradient;
const NativeLinearGradient = requireNativeComponent('BVLinearGradient', null);

View File

@ -2,22 +2,14 @@
* @providesModule LinearGradient
* @flow
*/
'use strict';
import React, { PropTypes } from 'react';
import { processColor, requireNativeComponent, View } from 'react-native';
var LinearGradient = React.createClass({
propTypes: {
start: PropTypes.arrayOf(PropTypes.number),
end: PropTypes.arrayOf(PropTypes.number),
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
locations: PropTypes.arrayOf(PropTypes.number),
...View.propTypes,
},
render: function() {
var { colors, locations, ...otherProps } = this.props;
export default function LinearGradient({
colors,
locations,
...otherProps
}) {
if ((colors && locations) && (colors.length !== locations.length)) {
console.warn('LinearGradient colors and locations props should be arrays of the same length');
@ -30,9 +22,14 @@ var LinearGradient = React.createClass({
locations={locations ? locations.slice(0, colors.length) : null}
/>
);
}
});
}
var NativeLinearGradient = requireNativeComponent('BVLinearGradient', null);
LinearGradient.propTypes = {
start: PropTypes.arrayOf(PropTypes.number),
end: PropTypes.arrayOf(PropTypes.number),
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
locations: PropTypes.arrayOf(PropTypes.number),
...View.propTypes,
};
module.exports = LinearGradient;
const NativeLinearGradient = requireNativeComponent('BVLinearGradient', null);