status-im/react-native-linear-gradient
2
0
Fork 0
mirror of https://github.com/status-im/react-native-linear-gradient.git synced 2025-02-09 14:23:30 +00:00
Code Issues Projects Releases Wiki Activity

Refactor LinearGradient as functional component

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

101
index.android.js
View File

@ -1,56 +1,59 @@
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,
},
export default function LinearGradient({
children,
colors,
end,
locations,
start,
style,
...otherProps
}) {
render: function() {
var { style, children, colors, locations, start, end, ...otherProps } = this.props;
if ((colors && locations) && (colors.length !== locations.length)) {
console.warn('LinearGradient colors and locations props should be arrays of the same length');
}
// 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;
// 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 = [
flatStyle.borderTopLeftRadius || borderRadius,
flatStyle.borderTopLeftRadius || borderRadius,
flatStyle.borderTopRightRadius || borderRadius,
flatStyle.borderTopRightRadius || borderRadius,
flatStyle.borderBottomRightRadius || borderRadius,
flatStyle.borderBottomRightRadius || borderRadius,
flatStyle.borderBottomLeftRadius || borderRadius,
flatStyle.borderBottomLeftRadius || borderRadius
];
return (
<View {...otherProps} style={style}>
<NativeLinearGradient
style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}}
colors={colors.map(processColor)}
start={start}
end={end}
locations={locations ? locations.slice(0, colors.length) : null}
borderRadii={borderRadiiPerCorner}
/>
{ children }
</View>
);
if ((colors && locations) && (colors.length !== locations.length)) {
console.warn('LinearGradient colors and locations props should be arrays of the same length');
}
})
var NativeLinearGradient = requireNativeComponent('BVLinearGradient', null);
// inherit container borderRadius until this issue is resolved:
// https://github.com/facebook/react-native/issues/3198
const flatStyle = StyleSheet.flatten(style) || {};
const borderRadius = flatStyle.borderRadius || 0;
module.exports = LinearGradient;
// this is the format taken by:
// http://developer.android.com/reference/android/graphics/Path.html#addRoundRect(android.graphics.RectF, float[], android.graphics.Path.Direction)
const borderRadiiPerCorner = [
flatStyle.borderTopLeftRadius || borderRadius,
flatStyle.borderTopLeftRadius || borderRadius,
flatStyle.borderTopRightRadius || borderRadius,
flatStyle.borderTopRightRadius || borderRadius,
flatStyle.borderBottomRightRadius || borderRadius,
flatStyle.borderBottomRightRadius || borderRadius,
flatStyle.borderBottomLeftRadius || borderRadius,
flatStyle.borderBottomLeftRadius || borderRadius
];
return (
<View {...otherProps} style={style}>
<NativeLinearGradient
style={{position: 'absolute', top: 0, left: 0, bottom: 0, right: 0}}
colors={colors.map(processColor)}
start={start}
end={end}
locations={locations ? locations.slice(0, colors.length) : null}
borderRadii={borderRadiiPerCorner}
/>
{ children }
</View>
);
}
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,
};
const NativeLinearGradient = requireNativeComponent('BVLinearGradient', null);

51
index.ios.js
View File

@ -2,37 +2,34 @@
* @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,
},
export default function LinearGradient({
colors,
locations,
...otherProps
}) {
render: function() {
var { colors, locations, ...otherProps } = this.props;
if ((colors && locations) && (colors.length !== locations.length)) {
console.warn('LinearGradient colors and locations props should be arrays of the same length');
}
return (
<NativeLinearGradient
{...otherProps}
colors={colors.map(processColor)}
locations={locations ? locations.slice(0, colors.length) : null}
/>
);
if ((colors && locations) && (colors.length !== locations.length)) {
console.warn('LinearGradient colors and locations props should be arrays of the same length');
}
});
var NativeLinearGradient = requireNativeComponent('BVLinearGradient', null);
return (
<NativeLinearGradient
{...otherProps}
colors={colors.map(processColor)}
locations={locations ? locations.slice(0, colors.length) : null}
/>
);
}
module.exports = LinearGradient;
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,
};
const NativeLinearGradient = requireNativeComponent('BVLinearGradient', null);