1 |
|
2 |
|
3 |
|
4 |
|
5 | import React, { Component } from 'react';
|
6 | import PropTypes from 'prop-types';
|
7 | import { processColor, requireNativeComponent, PointPropType, View, ViewPropTypes } from 'react-native';
|
8 | const deprecatedPropType = require('react-native/Libraries/Utilities/deprecatedPropType.js');
|
9 |
|
10 | const convertPoint = (name, point) => {
|
11 | if (Array.isArray(point)) {
|
12 | console.warn(
|
13 | `LinearGradient '${name}' property shoule be an object with fields 'x' and 'y', ` +
|
14 | 'Array type is deprecated.'
|
15 | );
|
16 |
|
17 | return {
|
18 | x: point[0],
|
19 | y: point[1]
|
20 | };
|
21 | }
|
22 | return point;
|
23 | };
|
24 |
|
25 | type PropsType = {
|
26 | start?: Array<number> | {x: number, y: number};
|
27 | end?: Array<number> | {x: number, y: number};
|
28 | colors: Array<string>;
|
29 | locations?: Array<number>;
|
30 | } & typeof(View);
|
31 |
|
32 | export default class LinearGradient extends Component {
|
33 | static propTypes = {
|
34 | start: PropTypes.oneOfType([
|
35 | PointPropType,
|
36 | deprecatedPropType(
|
37 | PropTypes.arrayOf(PropTypes.number),
|
38 | 'Use point object with {x, y} instead.'
|
39 | )
|
40 | ]),
|
41 | end: PropTypes.oneOfType([
|
42 | PointPropType,
|
43 | deprecatedPropType(
|
44 | PropTypes.arrayOf(PropTypes.number),
|
45 | 'Use point object with {x, y} instead.'
|
46 | )
|
47 | ]),
|
48 | colors: PropTypes.arrayOf(PropTypes.string).isRequired,
|
49 | locations: PropTypes.arrayOf(PropTypes.number),
|
50 | ...ViewPropTypes,
|
51 | };
|
52 | props: PropsType;
|
53 | gradientRef: any;
|
54 |
|
55 | setNativeProps(props: PropsType) {
|
56 | this.gradientRef.setNativeProps(props);
|
57 | }
|
58 |
|
59 | render() {
|
60 | const {
|
61 | start,
|
62 | end,
|
63 | colors,
|
64 | locations,
|
65 | ...otherProps
|
66 | } = this.props;
|
67 | if ((colors && locations) && (colors.length !== locations.length)) {
|
68 | console.warn('LinearGradient colors and locations props should be arrays of the same length');
|
69 | }
|
70 |
|
71 | return (
|
72 | <NativeLinearGradient
|
73 | ref={(component) => { this.gradientRef = component; }}
|
74 | {...otherProps}
|
75 | startPoint={convertPoint('start', start)}
|
76 | endPoint={convertPoint('end', end)}
|
77 | colors={colors.map(processColor)}
|
78 | locations={locations ? locations.slice(0, colors.length) : null}
|
79 | />
|
80 | );
|
81 | }
|
82 | }
|
83 |
|
84 | const NativeLinearGradient = requireNativeComponent('BVLinearGradient', null);
|