103 lines
2.5 KiB
JavaScript
103 lines
2.5 KiB
JavaScript
|
import React, {
|
||
|
Component
|
||
|
} from 'react';
|
||
|
import PropTypes from 'prop-types';
|
||
|
import {
|
||
|
ViewPropTypes,
|
||
|
requireNativeComponent,
|
||
|
StyleSheet,
|
||
|
findNodeHandle,
|
||
|
NativeModules
|
||
|
} from 'react-native';
|
||
|
import extractViewBox from '../lib/extract/extractViewBox';
|
||
|
import {ViewBoxAttributes} from '../lib/attributes';
|
||
|
|
||
|
const RNSVGSvgViewManager = NativeModules.RNSVGSvgViewManager;
|
||
|
|
||
|
// Svg - Root node of all Svg elements
|
||
|
let id = 0;
|
||
|
|
||
|
const styles = StyleSheet.create({
|
||
|
svg: {
|
||
|
backgroundColor: 'transparent'
|
||
|
}
|
||
|
});
|
||
|
|
||
|
class Svg extends Component{
|
||
|
static displayName = 'Svg';
|
||
|
static propTypes = {
|
||
|
...ViewPropTypes,
|
||
|
opacity: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
|
width: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
|
height: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
|
||
|
// more detail https://svgwg.org/svg2-draft/coords.html#ViewBoxAttribute
|
||
|
viewBox: PropTypes.string,
|
||
|
preserveAspectRatio: PropTypes.string
|
||
|
};
|
||
|
|
||
|
static defaultProps = {
|
||
|
preserveAspectRatio: 'xMidYMid meet'
|
||
|
};
|
||
|
|
||
|
constructor() {
|
||
|
super(...arguments);
|
||
|
id++;
|
||
|
this.id = id;
|
||
|
this.onDataURLCallbacks = [];
|
||
|
}
|
||
|
measureInWindow = (...args) => {
|
||
|
this.root.measureInWindow(...args);
|
||
|
};
|
||
|
|
||
|
measure = (...args) => {
|
||
|
this.root.measure(...args);
|
||
|
};
|
||
|
|
||
|
measureLayout = (...args) => {
|
||
|
this.root.measureLayout(...args);
|
||
|
};
|
||
|
|
||
|
setNativeProps = (...args) => {
|
||
|
this.root.setNativeProps(...args);
|
||
|
};
|
||
|
|
||
|
toDataURL = (callback: Function) => {
|
||
|
callback && RNSVGSvgViewManager.toDataURL(findNodeHandle(this.root), callback);
|
||
|
};
|
||
|
|
||
|
render() {
|
||
|
const {opacity, width, height, viewBox, preserveAspectRatio, style, ...props} = this.props;
|
||
|
let dimensions;
|
||
|
|
||
|
if (width && height) {
|
||
|
dimensions = {
|
||
|
width: +width,
|
||
|
height: +height,
|
||
|
flex: 0
|
||
|
};
|
||
|
}
|
||
|
|
||
|
return <NativeSvgView
|
||
|
{...props}
|
||
|
{...extractViewBox({ viewBox, preserveAspectRatio })}
|
||
|
ref={ele => {this.root = ele;}}
|
||
|
style={[
|
||
|
styles.svg,
|
||
|
style,
|
||
|
!isNaN(+opacity) && {
|
||
|
opacity: +opacity
|
||
|
},
|
||
|
dimensions
|
||
|
]}
|
||
|
/>;
|
||
|
}
|
||
|
}
|
||
|
|
||
|
const NativeSvgView = requireNativeComponent('RNSVGSvgView', null, {
|
||
|
nativeOnly: {
|
||
|
...ViewBoxAttributes
|
||
|
}
|
||
|
});
|
||
|
|
||
|
export default Svg;
|