diff --git a/lib/BorderShadow.js b/lib/BorderShadow.js index fe9baf8..acf9187 100644 --- a/lib/BorderShadow.js +++ b/lib/BorderShadow.js @@ -1,11 +1,12 @@ import React, {Component} from 'react' -import {View} from 'react-native' -import Svg,{ Rect,Defs,LinearGradient,Stop,RadialGradient,Path } from 'react-native-svg' +import {View,Animated} from 'react-native' +import Svg,{ Rect,Defs,LinearGradient,Stop } from 'react-native-svg' export default class BorderShadow extends Component { - render = () => { - const { setting:{side="bottom",width=0,color="#000",border=0,opacity=1,inset=false,style={}}, children } = this.props + content = () => { + + const { setting:{side="bottom",width=0,color="#000",border=0,opacity=1,inset=false}, children } = this.props const linear = (key) => { return [ @@ -16,38 +17,50 @@ export default class BorderShadow extends Component { const lineWidth = border + switch (side) { + case "top": + return [ + + + {linear('BorderTop')} + {linear('BorderTopInset')} + + + , + children, + ] + + case "bottom": + return [ + children, + + + {linear('BorderBottom')} + {linear('BorderBottomInset')} + + + + ] + default: + throw new Error("Wrong Type of Side! We just support 'top' and 'bottom'") + return null + } + } + + render = () => { + + const { setting:{width, style, animated} } = this.props + return ( - - {(()=>{ - switch (side){ - case "top": - return [ - - - {linear('BorderTop')} - {linear('BorderTopInset')} - - - , - ...children - ] - case "bottom": - return [ - ...children, - - - {linear('BorderBottom')} - {linear('BorderBottomInset')} - - - - ] - default: - throw new Error("Wrong Type of Side! We just support 'top' and 'bottom'") - return null - } - })()} - + animated ? ( + + {this.content()} + + ) : ( + + {this.content()} + + ) ) } } diff --git a/lib/BoxShadow.js b/lib/BoxShadow.js index bff3bfc..3388a6a 100644 --- a/lib/BoxShadow.js +++ b/lib/BoxShadow.js @@ -1,5 +1,5 @@ import React, {Component} from 'react' -import {View} from 'react-native' +import {View,Animated} from 'react-native' import Svg,{ Rect,Defs,LinearGradient,Stop,RadialGradient,Path } from 'react-native-svg' @@ -25,9 +25,10 @@ function colorRgb (color){ } export default class BoxShadow extends Component { - render = () => { + + content = () => { //get the shadow settings and give them default values - const { setting:{width=0,height=0,color="#000",border=0,radius=0,opacity=1,x=0,y=0,style={}}, children } = this.props + const { disabled = false, setting:{width=0,height=0,color="#000",border=0,radius=0,opacity=1,x=0,y=0}, children } = this.props //define the lengths const lineWidth = border, @@ -57,34 +58,51 @@ export default class BoxShadow extends Component { //return a view ,whose background is a svg picture return ( - - - - {linear('BoxTop')} - {linear('BoxBottom')} - {linear('BoxLeft')} - {linear('BoxRight')} - - {radial('BoxLeftTop')} - {radial('BoxLeftBottom')} - {radial('BoxRightTop')} - {radial('BoxRightBottom')} - - - - - - - - - - - - - - - {children} - + [disabled || ( + + + {linear('BoxTop')} + {linear('BoxBottom')} + {linear('BoxLeft')} + {linear('BoxRight')} + + {radial('BoxLeftTop')} + {radial('BoxLeftBottom')} + {radial('BoxRightTop')} + {radial('BoxRightBottom')} + + + + + + + + + + + + + + + ), + children] + ) + } + + render = () => { + + const { setting:{width=0,height=0,style={},animated} } = this.props + + return ( + animated ? ( + + {content()} + + ) : ( + + {content()} + + ) ) } }