From 3bd6fdb97e14b4802970994b18db6d811e26e446 Mon Sep 17 00:00:00 2001 From: Bugles Date: Mon, 3 May 2021 19:17:46 -0400 Subject: [PATCH 1/8] Fixed animatedValue setValue undefined Add border radius props --- README.md | 39 +++++++++++-------- src/Animator.js | 48 ++++++++++++----------- src/BottomDrawer.js | 94 ++++++++++++++++++++++++++++++++------------- 3 files changed, 114 insertions(+), 67 deletions(-) diff --git a/README.md b/README.md index 0d20ead..6a732a8 100644 --- a/README.md +++ b/README.md @@ -30,24 +30,24 @@ import BottomDrawer from 'rn-bottom-drawer'; const TAB_BAR_HEIGHT = 49; export default class App extends React.Component { - renderContent = () => { - return ( - - Get directions to your location - - ) - } + renderContent = () => { + return ( + + Get directions to your location + + ) + } - render() { - return ( - - {this.renderContent()} - - ) - } + render() { + return ( + + {this.renderContent()} + + ) + } } ``` @@ -66,6 +66,11 @@ export default class App extends React.Component { | shadow | bool | true | if **true**, the top of the drawer will have a shadow. | | onExpanded | func | -- | A callback function triggered when the drawer is swiped into up position | | onCollapsed | func | -- | A callback function triggered when the drawer is swiped into down position | +| borderRadius | number | 0 |A number of border radius | +| borderBottomLeftRadius | number | 0 | A number of bottom left border radius | +| borderBottomRightRadius | number | 0 | A number of bottom right border radius | +| borderTopLeftRadius | number | 0 | A number of top left border radius | +| borderTopRightRadius | number | 0 | A number of top right border radius | ### Questions? Feel free to contact me at [jackdillklein@gmail.com](mailto:jackdillklein@gmail.com) or [create an issue](https://github.com/jacklein/rn-bottom-drawer/issues/new) diff --git a/src/Animator.js b/src/Animator.js index 0917141..7711c10 100644 --- a/src/Animator.js +++ b/src/Animator.js @@ -1,5 +1,5 @@ import React, { Component } from 'react'; -import { +import { PanResponder, Animated, Dimensions, @@ -12,7 +12,7 @@ const SCREEN_WIDTH = Dimensions.get('window').width; export default class Animator extends Component{ constructor(props){ super(props); - + this.position = new Animated.ValueXY(this.props.currentPosition); this._panResponder = PanResponder.create({ @@ -24,27 +24,27 @@ export default class Animator extends Component{ render() { return ( - - {this.props.children} - + + {this.props.children} + ) } _handlePanResponderMove = (e, gesture) => { if (this._swipeInBounds(gesture)) { - this.position.setValue({ y: this.props.currentPosition.y + gesture.dy }); + this.position.setValue({x: 0, y: this.props.currentPosition.y + gesture.dy }); } else { - this.position.setValue({ y: this.props.upPosition.y - this._calculateEase(gesture) }); + this.position.setValue({x: 0, y: this.props.upPosition.y - this._calculateEase(gesture) }); } } @@ -69,16 +69,18 @@ export default class Animator extends Component{ _transitionTo(position, callback) { Animated.spring(this.position, { - toValue: position + toValue: position, + useNativeDriver: false, }).start(() => this.props.onExpanded()); - + this.props.setCurrentPosition(position); callback(); } _resetPosition() { Animated.spring(this.position, { - toValue: this.props.currentPosition + toValue: this.props.currentPosition, + useNativeDriver: false }).start(); } } @@ -91,16 +93,16 @@ const styles = { backgroundColor: color, }), roundedEdges: rounded => { - return rounded == true && { + return rounded === true && { borderTopLeftRadius: 10, borderTopRightRadius: 10, } }, shadow: shadow => { - return shadow == true && { + return shadow === true && { shadowColor: '#CECDCD', shadowRadius: 3, shadowOpacity: 5, } }, -} \ No newline at end of file +} diff --git a/src/BottomDrawer.js b/src/BottomDrawer.js index df13974..4e8e1af 100644 --- a/src/BottomDrawer.js +++ b/src/BottomDrawer.js @@ -1,6 +1,6 @@ import React, { Component } from 'react'; import PropTypes from 'prop-types'; -import { +import { View, Dimensions, } from 'react-native'; @@ -12,13 +12,13 @@ const SCREEN_HEIGHT = Dimensions.get('window').height; export default class BottomDrawer extends Component{ static propTypes = { /** - * Height of the drawer. + * Height of the drawer. */ containerHeight: PropTypes.number.isRequired, /** * The amount of offset to apply to the drawer's position. - * If the app uses a header and tab navigation, offset should equal + * If the app uses a header and tab navigation, offset should equal * the sum of those two components' heights. */ offset: PropTypes.number, @@ -29,7 +29,7 @@ export default class BottomDrawer extends Component{ startUp: PropTypes.bool, /** - * How much the drawer's down display falls beneath the up display. + * How much the drawer's down display falls beneath the up display. * Ex: if set to 20, the down display will be 20 points underneath the up display. */ downDisplay: PropTypes.number, @@ -57,13 +57,44 @@ export default class BottomDrawer extends Component{ /** * A callback function triggered when the drawer swiped into down position */ - onCollapsed: PropTypes.func + onCollapsed: PropTypes.func, + + /** + * Set bottom left border raidus + */ + borderBottomLeftRadius: PropTypes.number, + + /** + * Set bottom right border raidus + */ + borderBottomRightRadius: PropTypes.number, + + /** + * Set border raidus + */ + borderRadius: PropTypes.number, + + /** + * Set top left border raidus + */ + borderTopLeftRadius: PropTypes.number, + + /** + * Set top right border raidus + */ + borderTopRightRadius: PropTypes.number, + } static defaultProps = { offset: 0, startUp: true, backgroundColor: '#ffffff', + borderRadius: 0, + borderBottomLeftRadius: 0, + borderBottomRightRadius: 0, + borderTopLeftRadius: 0, + borderTopRightRadius: 0, roundedEdges: true, shadow: true, onExpanded: () => {}, @@ -90,25 +121,34 @@ export default class BottomDrawer extends Component{ this.state = { currentPosition: this.props.startUp ? this.UP_POSITION : this.DOWN_POSITION }; } - render() { + render() { return ( - this.setCurrentPosition(position)} - toggleThreshold = {this.TOGGLE_THRESHOLD} - upPosition = {this.UP_POSITION} - downPosition = {this.DOWN_POSITION} - roundedEdges = {this.props.roundedEdges} - shadow = {this.props.shadow} - containerHeight = {this.props.containerHeight} - backgroundColor = {this.props.backgroundColor} - onExpanded = {() => this.props.onExpanded()} - onCollapsed = {() => this.props.onCollapsed()} - > - {this.props.children} - - - + this.setCurrentPosition(position)} + toggleThreshold = {this.TOGGLE_THRESHOLD} + upPosition = {this.UP_POSITION} + downPosition = {this.DOWN_POSITION} + roundedEdges = {this.props.roundedEdges} + shadow = {this.props.shadow} + containerHeight = {this.props.containerHeight} + backgroundColor = {this.props.backgroundColor} + onExpanded = {() => this.props.onExpanded()} + onCollapsed = {() => this.props.onCollapsed()} + > + {this.props.children} + + + ) } @@ -118,15 +158,15 @@ export default class BottomDrawer extends Component{ _calculateUpPosition(screenHeight, containerHeight, offset) { return { - x: 0, - y: screenHeight - (containerHeight + offset) + x: 0, + y: screenHeight - (containerHeight + offset) } } _calculateDownPosition(upPosition, downDisplay) { - return { + return { x: 0, y: upPosition.y + downDisplay }; } -} \ No newline at end of file +} From 1dc8e95f7d79eadae9e65f78afdab7d9fa3c2b8d Mon Sep 17 00:00:00 2001 From: Bugles Date: Tue, 4 May 2021 13:05:21 -0400 Subject: [PATCH 2/8] creat a new npm package --- README.md | 4 ++-- package-lock.json | 45 ++++++++++++++++++++++++++++++++------------- package.json | 10 +++++----- 3 files changed, 39 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index 6a732a8..cf3f6f4 100644 --- a/README.md +++ b/README.md @@ -13,10 +13,10 @@ ## Installation -Install `rn-bottom-drawer`. +Install `react-native-bottom-drawer-jyn`. ``` -npm install rn-bottom-drawer --save +npm install react-native-bottom-drawer-jyn --save ``` ## Usage Example diff --git a/package-lock.json b/package-lock.json index fa19175..280119e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { - "name": "rn-bottom-drawer", - "version": "1.4.3", + "name": "react-native-bottom-drawer-jyn", + "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -2415,7 +2415,8 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "aproba": { "version": "1.2.0", @@ -2436,12 +2437,14 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, + "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -2456,17 +2459,20 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "core-util-is": { "version": "1.0.2", @@ -2583,7 +2589,8 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "ini": { "version": "1.3.5", @@ -2595,6 +2602,7 @@ "version": "1.0.0", "bundled": true, "dev": true, + "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -2609,6 +2617,7 @@ "version": "3.0.4", "bundled": true, "dev": true, + "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -2616,12 +2625,14 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "minipass": { "version": "2.2.4", "bundled": true, "dev": true, + "optional": true, "requires": { "safe-buffer": "^5.1.1", "yallist": "^3.0.0" @@ -2640,6 +2651,7 @@ "version": "0.5.1", "bundled": true, "dev": true, + "optional": true, "requires": { "minimist": "0.0.8" } @@ -2720,7 +2732,8 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "object-assign": { "version": "4.1.1", @@ -2732,6 +2745,7 @@ "version": "1.4.0", "bundled": true, "dev": true, + "optional": true, "requires": { "wrappy": "1" } @@ -2817,7 +2831,8 @@ "safe-buffer": { "version": "5.1.1", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "safer-buffer": { "version": "2.1.2", @@ -2853,6 +2868,7 @@ "version": "1.0.2", "bundled": true, "dev": true, + "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -2872,6 +2888,7 @@ "version": "3.0.1", "bundled": true, "dev": true, + "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -2915,12 +2932,14 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true }, "yallist": { "version": "3.0.2", "bundled": true, - "dev": true + "dev": true, + "optional": true } } }, diff --git a/package.json b/package.json index 25a73d5..99aa1a3 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { - "name": "rn-bottom-drawer", - "version": "1.4.3", + "name": "react-native-bottom-drawer-jyn", + "version": "1.0.0", "description": "a bottom drawer component for react native", "main": "index.js", "scripts": { @@ -8,7 +8,7 @@ }, "repository": { "type": "git", - "url": "git+https://github.com/jacklein/rn-bottom-drawer.git" + "url": "https://github.com/jynlele/rn-bottom-drawer.git" }, "keywords": [ "react-native", @@ -17,9 +17,9 @@ "author": "Jack K", "license": "ISC", "bugs": { - "url": "https://github.com/jacklein/rn-bottom-drawer/issues" + "url": "https://github.com/jynlele/rn-bottom-drawer/" }, - "homepage": "https://github.com/jacklein/rn-bottom-drawer#readme", + "homepage": "https://github.com/jynlele/rn-bottom-drawer/blob/master/README.md", "dependencies": { "prop-types": "^15.6.2" }, From 9ca9bea89c6a312709f5e5c5c252a8c3ac799738 Mon Sep 17 00:00:00 2001 From: Bugles Date: Tue, 4 May 2021 13:21:32 -0400 Subject: [PATCH 3/8] public 1.0.0 --- package.json | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 99aa1a3..d096aed 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "name": "react-native-bottom-drawer-jyn", + "name": "react-native-bottom-drawer-view", "version": "1.0.0", "description": "a bottom drawer component for react native", "main": "index.js", @@ -8,7 +8,7 @@ }, "repository": { "type": "git", - "url": "https://github.com/jynlele/rn-bottom-drawer.git" + "url": "git+https://github.com/jynlele/rn-bottom-drawer.git" }, "keywords": [ "react-native", @@ -27,5 +27,8 @@ "metro-react-native-babel-preset": "^0.51.0", "react": "^16.6.3", "react-native": "^0.57.8" + }, + "directories": { + "example": "example" } } From 644e8cbbb56b3952348d0fdd9d56b2e6fd80f965 Mon Sep 17 00:00:00 2001 From: Bugles Date: Tue, 4 May 2021 13:33:15 -0400 Subject: [PATCH 4/8] change import package --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index cf3f6f4..dcf0d45 100644 --- a/README.md +++ b/README.md @@ -25,7 +25,7 @@ npm install react-native-bottom-drawer-jyn --save ```javascript import React from 'react'; import { View, Text } from 'react-native'; -import BottomDrawer from 'rn-bottom-drawer'; +import BottomDrawer from 'react-native-bottom-drawer-view'; const TAB_BAR_HEIGHT = 49; From 8b3369e21646a0ce64cdf039e5f47c8579ff1cb7 Mon Sep 17 00:00:00 2001 From: Bugles Date: Tue, 4 May 2021 13:35:56 -0400 Subject: [PATCH 5/8] change README --- README.md | 4 ++-- package.json | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index dcf0d45..f592b86 100644 --- a/README.md +++ b/README.md @@ -13,10 +13,10 @@ ## Installation -Install `react-native-bottom-drawer-jyn`. +Install `react-native-bottom-drawer-view`. ``` -npm install react-native-bottom-drawer-jyn --save +npm install react-native-bottom-drawer-view --save ``` ## Usage Example diff --git a/package.json b/package.json index d096aed..6d311fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-bottom-drawer-view", - "version": "1.0.0", + "version": "1.0.1", "description": "a bottom drawer component for react native", "main": "index.js", "scripts": { From 5d618627cc88aa315cbde621dbfa9581bae0571c Mon Sep 17 00:00:00 2001 From: Bugles Date: Tue, 4 May 2021 19:05:33 -0400 Subject: [PATCH 6/8] fix collapse auto expand --- src/Animator.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Animator.js b/src/Animator.js index 7711c10..b9f7602 100644 --- a/src/Animator.js +++ b/src/Animator.js @@ -71,7 +71,7 @@ export default class Animator extends Component{ Animated.spring(this.position, { toValue: position, useNativeDriver: false, - }).start(() => this.props.onExpanded()); + }).start(); this.props.setCurrentPosition(position); callback(); From 912edf353aa31eea8371244f8f094afde743c399 Mon Sep 17 00:00:00 2001 From: Bugles Date: Tue, 4 May 2021 19:06:12 -0400 Subject: [PATCH 7/8] v 1.0.2 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 6d311fc..eb35ab5 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-bottom-drawer-view", - "version": "1.0.1", + "version": "1.0.2", "description": "a bottom drawer component for react native", "main": "index.js", "scripts": { From 90f75a39f8c9c1392cbd76c05f9e7690f90d7868 Mon Sep 17 00:00:00 2001 From: Bugles Date: Thu, 10 Jun 2021 18:16:17 -0400 Subject: [PATCH 8/8] v 1.0.3 --- src/Animator.js | 15 +++++++++++++-- src/BottomDrawer.js | 9 ++++++++- 2 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/Animator.js b/src/Animator.js index b9f7602..d38f75a 100644 --- a/src/Animator.js +++ b/src/Animator.js @@ -53,7 +53,18 @@ export default class Animator extends Component{ this._transitionTo(this.props.downPosition, this.props.onCollapsed); } else if (gesture.dy < -this.props.toggleThreshold && this.props.currentPosition === this.props.downPosition) { this._transitionTo(this.props.upPosition, this.props.onExpanded); - } else { + }else if(gesture.dy > this.props.toggleThreshold && this.props.currentPosition === this.props.downPosition){ + if(!this.props.downPosition){ + return + } + this._transitionTo(this.props.alldownPosition, this.props.onCollapsed); + }else if(gesture.dy < -this.props.toggleThreshold && this.props.currentPosition === this.props.alldownPosition){ + if(!this.props.downPosition){ + return + } + this._transitionTo(this.props.downPosition, this.props.onCollapsed); + } + else { this._resetPosition(); } } @@ -71,7 +82,7 @@ export default class Animator extends Component{ Animated.spring(this.position, { toValue: position, useNativeDriver: false, - }).start(); + }).start();44 this.props.setCurrentPosition(position); callback(); diff --git a/src/BottomDrawer.js b/src/BottomDrawer.js index 4e8e1af..2e936f4 100644 --- a/src/BottomDrawer.js +++ b/src/BottomDrawer.js @@ -83,6 +83,10 @@ export default class BottomDrawer extends Component{ * Set top right border raidus */ borderTopRightRadius: PropTypes.number, + /** + * Set all the way down positon + */ + alldownDisplay: PropTypes.number, } @@ -98,7 +102,8 @@ export default class BottomDrawer extends Component{ roundedEdges: true, shadow: true, onExpanded: () => {}, - onCollapsed: () => {} + onCollapsed: () => {}, + alldownDisplay: 0 } constructor(props){ @@ -117,6 +122,7 @@ export default class BottomDrawer extends Component{ */ this.UP_POSITION = this._calculateUpPosition(SCREEN_HEIGHT, this.props.containerHeight, this.props.offset) this.DOWN_POSITION = this._calculateDownPosition(this.UP_POSITION, this.DOWN_DISPLAY) + this.ALL_DOWN_POSITION = {x:0, y:this.props.alldownDisplay} this.state = { currentPosition: this.props.startUp ? this.UP_POSITION : this.DOWN_POSITION }; } @@ -135,6 +141,7 @@ export default class BottomDrawer extends Component{ backgroundColor = {this.props.backgroundColor} onExpanded = {() => this.props.onExpanded()} onCollapsed = {() => this.props.onCollapsed()} + alldownPosition = {this.ALL_DOWN_POSITION} > {this.props.children}