Add default border to AccessoryView and fix style prop types

ardaogulcan · Mar 14, 2018 · 7a29bfc · 7a29bfc
1 parent 560e9c4
commit 7a29bfc
Show file tree

Hide file tree

Showing 4 changed files with 85 additions and 98 deletions.
diff --git 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
@@ -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 (
-      <TouchableOpacity
-        disabled={disabled}
-        style={style}
-        onPress={onPress}
-      >
-        {props.customButton ? props.customButton : (
-          <Arrow
-            direction={props.direction}
-            disabled={disabled}
-            tintColor={props.tintColor}
-          />
-        )}
-      </TouchableOpacity>
-    );
-  }
-}
-
-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 (
-      <KeyboardAccessoryView {...(style ? { style } : {})} alwaysVisible={alwaysVisible}>
+      <KeyboardAccessoryView { ...passThroughProps }>
         <View style={accessoryContainerStyle}>
-          {!arrowsHidden && (
+          { !arrowsHidden && (
             <View style={styles.leftContainer}>
               <AccessoryArrowButton
                 style={[styles.previousButton, previousButtonStyle]}
@@ -109,7 +71,7 @@ class KeyboardAccessoryNavigation extends Component {
                 onPress={onPrevious}
               />
               <AccessoryArrowButton
-                style={{...(style ? { style: nextButtonStyle } : {})}}
+                style={nextButtonStyle && { style: nextButtonStyle }}
                 hidden={nextHidden}
                 disabled={nextDisabled}
                 direction={nextButtonDirection}
@@ -119,9 +81,9 @@ class KeyboardAccessoryNavigation extends Component {
               />
             </View>
           )}
-          {(infoMessage || infoContainer) && (
+          { (infoMessage || infoContainer) && (
             <View style={styles.infoContainer}>
-              {infoContainer ? infoContainer : (
+              {infoContainer || (
                 <Text style={[infoMessageStyle, {
                   color: tintColor,
                 }]}>
@@ -132,15 +94,18 @@ class KeyboardAccessoryNavigation extends Component {
           )}
           <TouchableOpacity
             style={[styles.doneButton, doneButtonStyle]}
-            onPress={this.handleDoneButton.bind(this)}
-          >
-            {doneButton ? doneButton : (
-              <Text style={[ styles.doneButtonText, doneButtonTitleStyle, {
-                color: tintColor,
-              }]}>
+            onPress={this.handleDoneButton.bind(this)}>
+            { doneButton ||
+              <Text style={[
+                styles.doneButtonText,
+                doneButtonTitleStyle,
+                {
+                  color: tintColor,
+                }
+              ]}>
                 {doneButtonTitle}
               </Text>
-            )}
+            }
           </TouchableOpacity>
         </View>
       </KeyboardAccessoryView>
@@ -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
@@ -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 (
       <View style={{ height: (isKeyboardVisible || alwaysVisible ? accessoryHeight : 0) }}>
-        <View style={[styles.accessory, style, {
-          opacity: (isKeyboardVisible || alwaysVisible ? visibleOpacity : hiddenOpacity),
-          bottom: keyboardHeight - bumperHeight,
-          height: accessoryHeight + bumperHeight,
-        }]}>
+        <View style={[
+          styles.accessory,
+          !hideBorder && styles.accessoryBorder,
+          style,
+          {
+            opacity: (isKeyboardVisible || alwaysVisible ? visibleOpacity : hiddenOpacity),
+            bottom: keyboardHeight - bumperHeight,
+            height: accessoryHeight + bumperHeight,
+          }
+        ]}>
           <View onLayout={this.handleChildrenLayout.bind(this)}>
             { this.props.children }
           </View>
@@ -126,34 +131,38 @@ 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({
   accessory: {
     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
@@ -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 (
+    <TouchableOpacity
+      disabled={disabled}
+      style={props.style}
+      onPress={onPress}>
+      { props.customButton ? props.customButton : (
+        <Arrow
+          direction={props.direction}
+          disabled={disabled}
+          tintColor={props.tintColor} />
+      )}
+    </TouchableOpacity>
+  );
+}
+
+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;