From e4171b16ab8a35c10d05d32574ed08c151aebb71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Lepp=C3=A4nen?= Date: Wed, 3 Apr 2019 15:06:17 +0200 Subject: [PATCH 1/2] Added `animated` setting to allow change in wrapper component from View to Animated.View. Also fixed warning for each child in BorderShadow which got unpacked (should only allow one root for children) --- lib/BorderShadow.js | 80 ++++++++++++++++++++++++++------------------- lib/BoxShadow.js | 80 +++++++++++++++++++++++++++------------------ 2 files changed, 95 insertions(+), 65 deletions(-) diff --git a/lib/BorderShadow.js b/lib/BorderShadow.js index fe9baf8..cdd175f 100644 --- a/lib/BorderShadow.js +++ b/lib/BorderShadow.js @@ -1,11 +1,12 @@ 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' 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,49 @@ 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()} + + ) ) } } From 34afd12e1ff787f36bb079e6c5d8444357dd0f14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Daniel=20Lepp=C3=A4nen?= Date: Mon, 8 Apr 2019 11:35:42 +0200 Subject: [PATCH 2/2] Fixed error with children key attribute --- lib/BorderShadow.js | 27 ++++++++++++++------------- 1 file changed, 14 insertions(+), 13 deletions(-) diff --git a/lib/BorderShadow.js b/lib/BorderShadow.js index cdd175f..acf9187 100644 --- a/lib/BorderShadow.js +++ b/lib/BorderShadow.js @@ -1,6 +1,6 @@ import React, {Component} from 'react' import {View,Animated} from 'react-native' -import Svg,{ Rect,Defs,LinearGradient,Stop,RadialGradient,Path } from 'react-native-svg' +import Svg,{ Rect,Defs,LinearGradient,Stop } from 'react-native-svg' export default class BorderShadow extends Component { @@ -17,29 +17,30 @@ export default class BorderShadow extends Component { const lineWidth = border - switch (side){ + switch (side) { case "top": return [ - - - {linear('BorderTop')} - {linear('BorderTopInset')} - - - , - children - ] + + + {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