62 lines
1.7 KiB
JavaScript
62 lines
1.7 KiB
JavaScript
import {Children} from 'react';
|
|
import _ from 'lodash';
|
|
import Color from 'color';
|
|
|
|
import extractOpacity from './extractOpacity';
|
|
import extractTransform from './extractTransform';
|
|
import PATTERN_UNITS from '../PATTERN_UNITS';
|
|
import percentToFloat from '../percentToFloat';
|
|
import Stop from '../../elements/Stop';
|
|
|
|
export default function(props) {
|
|
if (!props.id) {
|
|
return null;
|
|
}
|
|
|
|
const stops = {};
|
|
Children.forEach(props.children, child => {
|
|
if (child.type === Stop) {
|
|
if (child.props.stopColor && child.props.offset) {
|
|
// convert percent to float.
|
|
let offset = percentToFloat(child.props.offset);
|
|
|
|
// add stop
|
|
stops[offset] = Color(child.props.stopColor).alpha(extractOpacity(child.props.stopOpacity));
|
|
}
|
|
} else {
|
|
console.warn('`Gradient` elements only accept `Stop` elements as children');
|
|
}
|
|
});
|
|
|
|
const sorted = _.sortBy(_.map(stops, (stop, offset) => {
|
|
return {stop, offset};
|
|
}), 'offset');
|
|
|
|
const gradient = [];
|
|
|
|
sorted.forEach(({stop}) => {
|
|
let [r, g, b, a = 1] = stop.rgb().array();
|
|
gradient.push(r / 255);
|
|
gradient.push(g / 255);
|
|
gradient.push(b / 255);
|
|
gradient.push(a);
|
|
});
|
|
|
|
gradient.push(...sorted.map(({offset}) => +offset));
|
|
|
|
|
|
let gradientTransform;
|
|
if (props.transform) {
|
|
gradientTransform = extractTransform(props.transform);
|
|
} else {
|
|
gradientTransform = extractTransform(props);
|
|
}
|
|
|
|
return {
|
|
gradient,
|
|
name: props.id,
|
|
gradientTransform,
|
|
gradientUnits: PATTERN_UNITS[props.gradientUnits] || 0
|
|
};
|
|
}
|