status-im
/
react-native-linear-gradient
mirror of https://github.com/status-im/react-native-linear-gradient.git
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Merge pull request #91 from oblador/class-refactor 

Refactor to class based ES2015 components for Animated support
This commit is contained in:
Dmitry Gladkov 2016-06-14 15:27:40 +03:00 committed by GitHub
parent c30d8de198 3bdc43ce97
commit 88140b2f72
2 changed files with 80 additions and 82 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

107
index.android.js
View File

@ -1,59 +1,62 @@
import React, { PropTypes } from 'react';
import React, { Component, PropTypes } from 'react';
import { processColor, requireNativeComponent, StyleSheet, View } from 'react-native';
export default function LinearGradient({
children,
colors,
end,
locations,
start,
style,
...otherProps
}) {
export default class LinearGradient extends Component {
static propTypes = {
start: PropTypes.arrayOf(PropTypes.number),
end: PropTypes.arrayOf(PropTypes.number),
colors: PropTypes.arrayOf(PropTypes.string).isRequired,
locations: PropTypes.arrayOf(PropTypes.number),
...View.propTypes,
};
if ((colors && locations) && (colors.length !== locations.length)) {
console.warn('LinearGradient colors and locations props should be arrays of the same length');
render() {
const {
children,
colors,
end,
locations,
start,
style,
...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
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)
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>
);
}
// 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;
// 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);

55
index.ios.js
View File

@ -2,41 +2,36 @@
* @providesModule LinearGradient
* @flow
*/
import React, { PropTypes } from 'react';
import React, { Component, PropTypes } from 'react';
import { processColor, requireNativeComponent, View } from 'react-native';
type Props = {
start?: Array<number>;
end?: Array<number>;
colors: Array<string>;
locations?: Array<number>;
};
export default class LinearGradient extends Component {
static 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
}: Props) {
render() {
const {
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');
}
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}
/>
);
}
return (
<NativeLinearGradient
{...otherProps}
colors={colors.map(processColor)}
locations={locations ? locations.slice(0, colors.length) : 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,
};
const NativeLinearGradient = requireNativeComponent('BVLinearGradient', null);