From 7a29bfc74bc6d2a1f2e454491a69b021c86baca8 Mon Sep 17 00:00:00 2001 From: Arda Pektas Date: Thu, 15 Mar 2018 00:44:54 +0300 Subject: [PATCH] Add default border to AccessoryView and fix style prop types --- example/screens/ViewExample.js | 2 - lib/KeyboardAccessoryNavigation.js | 108 +++++-------------- lib/KeyboardAccessoryView.js | 35 +++--- lib/components/AccessoryArrowButton/index.js | 38 +++++++ 4 files changed, 85 insertions(+), 98 deletions(-) create mode 100644 lib/components/AccessoryArrowButton/index.js diff --git a/example/screens/ViewExample.js b/example/screens/ViewExample.js index 7618062..47f1d0f 100644 --- a/example/screens/ViewExample.js +++ b/example/screens/ViewExample.js @@ -44,8 +44,6 @@ const styles = StyleSheet.create({ }, textInputView: { padding: 8, - borderTopWidth: 1, - borderTopColor: '#CCC', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center', diff --git a/lib/KeyboardAccessoryNavigation.js b/lib/KeyboardAccessoryNavigation.js index 70e1a88..d2213fe 100644 --- a/lib/KeyboardAccessoryNavigation.js +++ b/lib/KeyboardAccessoryNavigation.js @@ -7,47 +7,10 @@ import { Text, TouchableOpacity, Keyboard, - ViewPropTypes, } from 'react-native'; import KeyboardAccessoryView from './KeyboardAccessoryView'; -import Arrow from './components/Arrow'; - -// Render a prev/hidden arrow button -const AccessoryArrowButton = ({style, hidden = false, disabled = false, onPress, ...props}) => { - if (hidden) { - return null; - } else { - return ( - - {props.customButton ? props.customButton : ( - - )} - - ); - } -} - -AccessoryArrowButton.propTypes = { - style: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.number - ]), - customButton: PropTypes.element, - tintColor: PropTypes.string.isRequired, - direction: PropTypes.string.isRequired, - disabled: PropTypes.bool.isRequired, - hidden: PropTypes.bool.isRequired, - onPress: PropTypes.func.isRequired, -} +import AccessoryArrowButton from './components/AccessoryArrowButton'; class KeyboardAccessoryNavigation extends Component { handleDoneButton() { @@ -70,7 +33,6 @@ class KeyboardAccessoryNavigation extends Component { previousDisabled, nextHidden, previousHidden, - style, accessoryStyle, nextButtonStyle, previousButtonStyle, @@ -79,7 +41,7 @@ class KeyboardAccessoryNavigation extends Component { infoMessageStyle, nextButtonDirection, previousButtonDirection, - alwaysVisible, + ...passThroughProps, } = this.props; // Are both arrows hidden? @@ -92,12 +54,12 @@ class KeyboardAccessoryNavigation extends Component { styles.accessoryContainer, arrowsHidden && noInfo ? styles.accessoryContainerReverse : null, accessoryStyle, - ] + ]; return ( - + - {!arrowsHidden && ( + { !arrowsHidden && ( )} - {(infoMessage || infoContainer) && ( + { (infoMessage || infoContainer) && ( - {infoContainer ? infoContainer : ( + {infoContainer || ( @@ -132,15 +94,18 @@ class KeyboardAccessoryNavigation extends Component { )} - {doneButton ? doneButton : ( - + onPress={this.handleDoneButton.bind(this)}> + { doneButton || + {doneButtonTitle} - )} + } @@ -149,6 +114,7 @@ class KeyboardAccessoryNavigation extends Component { } KeyboardAccessoryNavigation.propTypes = { + ...KeyboardAccessoryView.propTypes, doneButtonTitle: PropTypes.string, infoMessage: PropTypes.string, doneButton: PropTypes.element, @@ -163,36 +129,13 @@ KeyboardAccessoryNavigation.propTypes = { doneDisabled: PropTypes.bool, nextHidden: PropTypes.bool, previousHidden: PropTypes.bool, - alwaysVisible: PropTypes.bool, tintColor: PropTypes.string, - style: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.number - ]), - accessoryStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.number - ]), - previousButtonStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.number - ]), - nextButtonStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.number - ]), - doneButtonStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.number - ]), - doneButtonTitleStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.number - ]), - infoMessageStyle: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.number - ]), + accessoryStyle: View.propTypes.style, + previousButtonStyle: View.propTypes.style, + nextButtonStyle: View.propTypes.style, + doneButtonStyle: View.propTypes.style, + doneButtonTitleStyle: View.propTypes.style, + infoMessageStyle: View.propTypes.style, nextButtonDirection: PropTypes.oneOf(['up', 'down', 'left', 'right']), previousButtonDirection: PropTypes.oneOf(['up', 'down', 'left', 'right']), } @@ -206,7 +149,6 @@ KeyboardAccessoryNavigation.defaultProps = { previousHidden: false, nextButtonDirection: 'down', previousButtonDirection: 'up', - alwaysVisible: false, } const styles = StyleSheet.create({ diff --git a/lib/KeyboardAccessoryView.js b/lib/KeyboardAccessoryView.js index 299d3ec..97cd803 100644 --- a/lib/KeyboardAccessoryView.js +++ b/lib/KeyboardAccessoryView.js @@ -108,14 +108,19 @@ class KeyboardAccessoryView extends Component { render() { const { isKeyboardVisible , accessoryHeight, keyboardHeight } = this.state; - const { bumperHeight, alwaysVisible, visibleOpacity, hiddenOpacity, style } = this.props; + const { bumperHeight, alwaysVisible, visibleOpacity, hiddenOpacity, hideBorder, style } = this.props; return ( - + { this.props.children } @@ -126,26 +131,26 @@ class KeyboardAccessoryView extends Component { } KeyboardAccessoryView.propTypes = { - style: PropTypes.oneOfType([ - PropTypes.object, - PropTypes.number - ]), + style: View.propTypes.style, animateOn: PropTypes.oneOf(['ios', 'android', 'all', 'none']), animationConfig: PropTypes.oneOfType([ PropTypes.object, PropTypes.func ]), - alwaysVisible: PropTypes.bool, bumperHeight: PropTypes.number, visibleOpacity: PropTypes.number, hiddenOpacity: PropTypes.number, + alwaysVisible: PropTypes.bool, + hideBorder: PropTypes.bool, } KeyboardAccessoryView.defaultProps = { animateOn: 'ios', bumperHeight: 15, visibleOpacity: 1, - hiddenOpacity: 0 + hiddenOpacity: 0, + alwaysVisible: false, + hideBorder: false, } const styles = StyleSheet.create({ @@ -153,7 +158,11 @@ const styles = StyleSheet.create({ position: 'absolute', right: 0, left: 0, - backgroundColor: '#EFF0F1' + backgroundColor: '#EFF0F1', + }, + accessoryBorder: { + borderTopWidth: 1, + borderTopColor: 'rgba(0,0,0,0.2)', } }) diff --git a/lib/components/AccessoryArrowButton/index.js b/lib/components/AccessoryArrowButton/index.js new file mode 100644 index 0000000..616b789 --- /dev/null +++ b/lib/components/AccessoryArrowButton/index.js @@ -0,0 +1,38 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { + TouchableOpacity, +} from 'react-native'; + +import Arrow from '../Arrow'; + +const AccessoryArrowButton = ({ hidden = false, disabled = false, onPress, ...props }) => { + if (hidden) { + return null; + } + + return ( + + { props.customButton ? props.customButton : ( + + )} + + ); +} + +AccessoryArrowButton.propTypes = { + customButton: PropTypes.element, + tintColor: PropTypes.string.isRequired, + direction: PropTypes.string.isRequired, + disabled: PropTypes.bool.isRequired, + hidden: PropTypes.bool.isRequired, + onPress: PropTypes.func.isRequired, +} + +export default AccessoryArrowButton;