react-native-search-box - npm Package Compare versions

Comparing version 0.0.9 to 0.0.10

index.js

@@ -1,11 +0,12 @@
-import React, { Component, PropTypes } from 'react';
+import React, { PureComponent } from 'react';
+import PropTypes from 'prop-types';
 import {
-    Text,
-    TouchableWithoutFeedback,
-    TextInput,
-    Animated,
-    Dimensions,
-    Keyboard,
-    Image,
-    View
+  Text,
+  TouchableWithoutFeedback,
+  TextInput,
+  Animated,
+  Dimensions,
+  Keyboard,
+  Image,
+  View
 } from 'react-native';
@@ -17,419 +18,405 @@
 
-class Search extends Component {
-    constructor(props) {
-        super(props);
+class Search extends PureComponent {
+  constructor(props) {
+    super(props);
 
-        this.state = {
-            keyword: '',
-            expanded: false
-        };
-        const { width } = Dimensions.get('window');
-        this.contentWidth = width;
-        this.middleWidth = width / 2;
+    this.state = {
+      keyword: '',
+      expanded: false
+    };
+    const { width } = Dimensions.get('window');
+    this.contentWidth = width;
+    this.middleWidth = width / 2;
 
-        /**
-         * Animated values
-         */
-        this.iconSearchAnimated = new Animated.Value(this.middleWidth - this.props.searchIconCollapsedMargin);
-        this.iconDeleteAnimated = new Animated.Value(0);
-        this.inputFocusWidthAnimated = new Animated.Value(this.contentWidth - 10);
-        this.inputFocusPlaceholderAnimated = new Animated.Value(this.middleWidth - this.props.placeholderCollapsedMargin);
-        this.btnCancelAnimated = new Animated.Value(this.contentWidth);
+    /**
+     * Animated values
+     */
+    this.iconSearchAnimated = new Animated.Value(
+      this.middleWidth - this.props.searchIconCollapsedMargin
+    );
+    this.iconDeleteAnimated = new Animated.Value(0);
+    this.inputFocusWidthAnimated = new Animated.Value(this.contentWidth - 10);
+    this.inputFocusPlaceholderAnimated = new Animated.Value(
+      this.middleWidth - this.props.placeholderCollapsedMargin
+    );
+    this.btnCancelAnimated = new Animated.Value(this.contentWidth);
 
-        /**
-         * functions
-         */
-        this.onFocus = this.onFocus.bind(this);
-        this.onSearch = this.onSearch.bind(this);
-        this.onChangeText = this.onChangeText.bind(this);
-        this.onCancel = this.onCancel.bind(this);
-        this.onDelete = this.onDelete.bind(this);
-        this.focus = this.focus.bind(this);
-        this.expandAnimation = this.expandAnimation.bind(this);
-        this.collapseAnimation = this.collapseAnimation.bind(this);
-        this.onLayout = this.onLayout.bind(this);
+    /**
+     * functions
+     */
+    this.onFocus = this.onFocus.bind(this);
+    this.onSearch = this.onSearch.bind(this);
+    this.onChangeText = this.onChangeText.bind(this);
+    this.onCancel = this.onCancel.bind(this);
+    this.onDelete = this.onDelete.bind(this);
+    this.focus = this.focus.bind(this);
+    this.expandAnimation = this.expandAnimation.bind(this);
+    this.collapseAnimation = this.collapseAnimation.bind(this);
+    this.onLayout = this.onLayout.bind(this);
 
-        /**
-         * local variables
-         */
-        this.placeholder = this.props.placeholder || 'Search';
-        this.cancelTitle = this.props.cancelTitle || 'Cancel';
-
-        /**
-         * Shadow
-         */
-        this.shadowOpacityAnimated = new Animated.Value(this.props.shadowOpacityCollapsed);
-        this.shadowHeight = this.props.shadowOffsetHeightCollapsed;
-    }
-
-    onLayout = (event) => {
-        const contentWidth = event.nativeEvent.layout.width;
-        this.contentWidth = contentWidth;
-        this.middleWidth = contentWidth / 2;
-        if (this.state.expanded) {
-            this.expandAnimation();
-        } else {
-            this.collapseAnimation();
-        }
-    }
-
     /**
-     * onSearch
-     * async await
+     * local variables
      */
-    onSearch = async () => {
-        this.props.beforeSearch && await this.props.beforeSearch(this.state.keyword);
-        if ( this.props.keyboardShouldPersist === false ) {
-            await Keyboard.dismiss();
-        }
-        this.props.onSearch && await this.props.onSearch(this.state.keyword);
-        this.props.afterSearch && await this.props.afterSearch(this.state.keyword);
-    }
+    this.placeholder = this.props.placeholder || 'Search';
+    this.cancelTitle = this.props.cancelTitle || 'Cancel';
 
     /**
-     * onChangeText
-     * async await
+     * Shadow
      */
-    onChangeText = async (text) => {
-        await this.setState({ keyword: text });
-        await new Promise((resolve, reject) => {
-            Animated.timing(
-                this.iconDeleteAnimated,
-                {
-                    toValue: (text.length > 0) ? 1 : 0,
-                    duration: 200
-                }
-            ).start(() => resolve());
-        });
-        this.props.onChangeText && await this.props.onChangeText(this.state.keyword);
+    this.shadowOpacityAnimated = new Animated.Value(
+      this.props.shadowOpacityCollapsed
+    );
+    this.shadowHeight = this.props.shadowOffsetHeightCollapsed;
+  }
+
+  onLayout = event => {
+    const contentWidth = event.nativeEvent.layout.width;
+    this.contentWidth = contentWidth;
+    this.middleWidth = contentWidth / 2;
+    if (this.state.expanded) {
+      this.expandAnimation();
+    } else {
+      this.collapseAnimation();
     }
+  };
 
-    /**
+  /**
+ * onSearch
+ * async await
+ */
+  onSearch = async () => {
+    this.props.beforeSearch &&
+      (await this.props.beforeSearch(this.state.keyword));
+    if (this.props.keyboardShouldPersist === false) {
+      await Keyboard.dismiss();
+    }
+    this.props.onSearch && (await this.props.onSearch(this.state.keyword));
+    this.props.afterSearch &&
+      (await this.props.afterSearch(this.state.keyword));
+  };
+
+  /**
+ * onChangeText
+ * async await
+ */
+  onChangeText = async text => {
+    await this.setState({ keyword: text });
+    await new Promise((resolve, reject) => {
+      Animated.timing(this.iconDeleteAnimated, {
+        toValue: text.length > 0 ? 1 : 0,
+        duration: 200
+      }).start(() => resolve());
+    });
+    this.props.onChangeText &&
+      (await this.props.onChangeText(this.state.keyword));
+  };
+
+  /**
      * onFocus
      * async await
      */
-    onFocus = async () => {
-        this.props.beforeFocus && await this.props.beforeFocus();
-        this.refs.input_keyword._component.isFocused && await this.refs.input_keyword._component.focus();
-        await this.setState(prevState => {
-            return { expanded: !prevState.expanded };
-        });
-        await this.expandAnimation();
-        this.props.onFocus && await this.props.onFocus(this.state.keyword);
-        this.props.afterFocus && await this.props.afterFocus();
-    }
+  onFocus = async () => {
+    this.props.beforeFocus && (await this.props.beforeFocus());
+    this.refs.input_keyword._component.isFocused &&
+      (await this.refs.input_keyword._component.focus());
+    await this.setState(prevState => {
+      return { expanded: !prevState.expanded };
+    });
+    await this.expandAnimation();
+    this.props.onFocus && (await this.props.onFocus(this.state.keyword));
+    this.props.afterFocus && (await this.props.afterFocus());
+  };
 
-    /**
+  /**
      * focus
      * async await
      */
-    focus = async (text = '') => {
-        await this.setState({ keyword: text });
-        await this.refs.input_keyword._component.focus();
-    }
+  focus = async (text = '') => {
+    await this.setState({ keyword: text });
+    await this.refs.input_keyword._component.focus();
+  };
 
-    /**
+  /**
      * onDelete
      * async await
      */
-    onDelete = async () => {
-        this.props.beforeDelete && await this.props.beforeDelete();
-        await new Promise((resolve, reject) => {
-            Animated.timing(
-                this.iconDeleteAnimated,
-                {
-                    toValue: 0,
-                    duration: 200
-                }
-            ).start(() => resolve());
-        });
-        await this.setState({ keyword: '' });
-        this.props.onDelete && await this.props.onDelete();
-        this.props.afterDelete && await this.props.afterDelete();
-    }
+  onDelete = async () => {
+    this.props.beforeDelete && (await this.props.beforeDelete());
+    await new Promise((resolve, reject) => {
+      Animated.timing(this.iconDeleteAnimated, {
+        toValue: 0,
+        duration: 200
+      }).start(() => resolve());
+    });
+    await this.setState({ keyword: '' });
+    this.props.onDelete && (await this.props.onDelete());
+    this.props.afterDelete && (await this.props.afterDelete());
+  };
 
-    /**
+  /**
      * onCancel
      * async await
      */
-    onCancel = async () => {
-        this.props.beforeCancel && await this.props.beforeCancel();
-        await this.setState({ keyword: '' });
-        await this.setState(prevState => {
-            return { expanded: !prevState.expanded };
-        });
-        await this.collapseAnimation( true );
-        this.props.onCancel && await this.props.onCancel();
-        this.props.afterCancel && await this.props.afterCancel();
-    }
+  onCancel = async () => {
+    this.props.beforeCancel && (await this.props.beforeCancel());
+    await this.setState({ keyword: '' });
+    await this.setState(prevState => {
+      return { expanded: !prevState.expanded };
+    });
+    await this.collapseAnimation(true);
+    this.props.onCancel && (await this.props.onCancel());
+    this.props.afterCancel && (await this.props.afterCancel());
+  };
 
-    expandAnimation = () => {
-        return new Promise((resolve, reject) => {
-            Animated.parallel([
-                Animated.timing(
-                    this.inputFocusWidthAnimated,
-                    {
-                        toValue: this.contentWidth - 70,
-                        duration: 200
-                    }
-                ).start(),
-                Animated.timing(
-                    this.btnCancelAnimated,
-                    {
-                        toValue: 10,
-                        duration: 200
-                    }
-                ).start(),
-                Animated.timing(
-                    this.inputFocusPlaceholderAnimated,
-                    {
-                        toValue: this.props.placeholderExpandedMargin,
-                        duration: 200
-                    }
-                ).start(),
-                Animated.timing(
-                    this.iconSearchAnimated,
-                    {
-                        toValue: this.props.searchIconExpandedMargin,
-                        duration: 200
-                    }
-                ).start(),
-                Animated.timing(
-                    this.iconDeleteAnimated,
-                    {
-                        toValue: (this.state.keyword.length > 0) ? 1 : 0,
-                        duration: 200
-                    }
-                ).start(),
-                Animated.timing(
-                    this.shadowOpacityAnimated,
-                    {
-                        toValue: this.props.shadowOpacityExpanded,
-                        duration: 200
-                    }
-                ).start(),
-            ]);
-            this.shadowHeight = this.props.shadowOffsetHeightExpanded;
-            resolve();
-        });
-    }
+  expandAnimation = () => {
+    return new Promise((resolve, reject) => {
+      Animated.parallel([
+        Animated.timing(this.inputFocusWidthAnimated, {
+          toValue: this.contentWidth - 70,
+          duration: 200
+        }).start(),
+        Animated.timing(this.btnCancelAnimated, {
+          toValue: 10,
+          duration: 200
+        }).start(),
+        Animated.timing(this.inputFocusPlaceholderAnimated, {
+          toValue: this.props.placeholderExpandedMargin,
+          duration: 200
+        }).start(),
+        Animated.timing(this.iconSearchAnimated, {
+          toValue: this.props.searchIconExpandedMargin,
+          duration: 200
+        }).start(),
+        Animated.timing(this.iconDeleteAnimated, {
+          toValue: this.state.keyword.length > 0 ? 1 : 0,
+          duration: 200
+        }).start(),
+        Animated.timing(this.shadowOpacityAnimated, {
+          toValue: this.props.shadowOpacityExpanded,
+          duration: 200
+        }).start()
+      ]);
+      this.shadowHeight = this.props.shadowOffsetHeightExpanded;
+      resolve();
+    });
+  };
 
-    collapseAnimation = ( isForceAnim = false ) => {
-        return new Promise((resolve, reject) => {
-            Animated.parallel([
-                ( ( this.props.keyboardShouldPersist === false ) ? Keyboard.dismiss() : null ),
-                Animated.timing(
-                    this.inputFocusWidthAnimated,
-                    {
-                        toValue: this.contentWidth - 10,
-                        duration: 200
-                    }
-                ).start(),
-                Animated.timing(
-                    this.btnCancelAnimated,
-                    {
-                        toValue: this.contentWidth,
-                        duration: 200
-                    }
-                ).start(),
-                ( ( this.props.keyboardShouldPersist === false ) ?
-                Animated.timing(
-                    this.inputFocusPlaceholderAnimated,
-                    {
-                        toValue: this.middleWidth - this.props.placeholderCollapsedMargin,
-                        duration: 200
-                    }
-                ).start() : null ),
-                ( ( this.props.keyboardShouldPersist === false || isForceAnim === true ) ?
-                Animated.timing(
-                    this.iconSearchAnimated,
-                    {
-                        toValue: this.middleWidth - this.props.searchIconCollapsedMargin,
-                        duration: 200
-                    }
-                ).start() : null ),
-                Animated.timing(
-                    this.iconDeleteAnimated,
-                    {
-                        toValue: 0,
-                        duration: 200
-                    }
-                ).start(),
-                Animated.timing(
-                    this.shadowOpacityAnimated,
-                    {
-                        toValue: this.props.shadowOpacityCollapsed,
-                        duration: 200
-                    }
-                ).start(),
-            ]);
-            this.shadowHeight = this.props.shadowOffsetHeightCollapsed;
-            resolve();
-        });
-    }
+  collapseAnimation = (isForceAnim = false) => {
+    return new Promise((resolve, reject) => {
+      Animated.parallel([
+        this.props.keyboardShouldPersist === false ? Keyboard.dismiss() : null,
+        Animated.timing(this.inputFocusWidthAnimated, {
+          toValue: this.contentWidth - 10,
+          duration: 200
+        }).start(),
+        Animated.timing(this.btnCancelAnimated, {
+          toValue: this.contentWidth,
+          duration: 200
+        }).start(),
+        this.props.keyboardShouldPersist === false
+          ? Animated.timing(this.inputFocusPlaceholderAnimated, {
+              toValue: this.middleWidth - this.props.placeholderCollapsedMargin,
+              duration: 200
+            }).start()
+          : null,
+        this.props.keyboardShouldPersist === false || isForceAnim === true
+          ? Animated.timing(this.iconSearchAnimated, {
+              toValue: this.middleWidth - this.props.searchIconCollapsedMargin,
+              duration: 200
+            }).start()
+          : null,
+        Animated.timing(this.iconDeleteAnimated, {
+          toValue: 0,
+          duration: 200
+        }).start(),
+        Animated.timing(this.shadowOpacityAnimated, {
+          toValue: this.props.shadowOpacityCollapsed,
+          duration: 200
+        }).start()
+      ]);
+      this.shadowHeight = this.props.shadowOffsetHeightCollapsed;
+      resolve();
+    });
+  };
 
-    render() {
-        return (
-            <Animated.View
-                ref="searchContainer"
-                style={
-                    [
-                        styles.container,
-                        this.props.backgroundColor && { backgroundColor: this.props.backgroundColor }
-                    ]}
-                onLayout={this.onLayout}
+  render() {
+    return (
+      <Animated.View
+        ref="searchContainer"
+        style={[
+          styles.container,
+          this.props.backgroundColor && {
+            backgroundColor: this.props.backgroundColor
+          }
+        ]}
+        onLayout={this.onLayout}
+      >
+        <AnimatedTextInput
+          ref="input_keyword"
+          style={[
+            styles.input,
+            this.props.placeholderTextColor && {
+              color: this.props.placeholderTextColor
+            },
+            this.props.inputStyle && this.props.inputStyle,
+            this.props.inputHeight && { height: this.props.inputHeight },
+            this.props.inputBorderRadius && {
+              borderRadius: this.props.inputBorderRadius
+            },
+            {
+              width: this.inputFocusWidthAnimated,
+              paddingLeft: this.inputFocusPlaceholderAnimated
+            },
+            this.props.shadowVisible && {
+              shadowOffset: {
+                width: this.props.shadowOffsetWidth,
+                height: this.shadowHeight
+              },
+              shadowColor: this.props.shadowColor,
+              shadowOpacity: this.shadowOpacityAnimated,
+              shadowRadius: this.props.shadowRadius
+            }
+          ]}
+          editable={this.props.editable}
+          value={this.state.keyword}
+          onChangeText={this.onChangeText}
+          placeholder={this.placeholder}
+          placeholderTextColor={
+            this.props.placeholderTextColor || styles.placeholderColor
+          }
+          onSubmitEditing={this.onSearch}
+          autoCorrect={false}
+          blurOnSubmit={this.props.blurOnSubmit}
+          returnKeyType={this.props.returnKeyType || 'search'}
+          keyboardType={this.props.keyboardType || 'default'}
+          autoCapitalize={this.props.autoCapitalize}
+          onFocus={this.onFocus}
+          underlineColorAndroid="transparent"
+        />
+        <TouchableWithoutFeedback onPress={this.onFocus}>
+          {this.props.iconSearch
+            ? <Animated.View
+                style={[styles.iconSearch, { left: this.iconSearchAnimated }]}
+              >
+                {this.props.iconSearch}
+              </Animated.View>
+            : <Animated.Image
+                source={require('./img/search.png')}
+                style={[
+                  styles.iconSearch,
+                  styles.iconSearchDefault,
+                  this.props.tintColorSearch && {
+                    tintColor: this.props.tintColorSearch
+                  },
+                  {
+                    left: this.iconSearchAnimated
+                  }
+                ]}
+              />}
+        </TouchableWithoutFeedback>
+        <TouchableWithoutFeedback onPress={this.onDelete}>
+          {this.props.iconDelete
+            ? <Animated.View
+                style={[
+                  styles.iconDelete,
+                  this.props.positionRightDelete && {
+                    right: this.props.positionRightDelete
+                  },
+                  { opacity: this.iconDeleteAnimated }
+                ]}
+              >
+                {this.props.iconDelete}
+              </Animated.View>
+            : <Animated.Image
+                source={require('./img/delete.png')}
+                style={[
+                  styles.iconDelete,
+                  styles.iconDeleteDefault,
+                  this.props.tintColorDelete && {
+                    tintColor: this.props.tintColorDelete
+                  },
+                  this.props.positionRightDelete && {
+                    right: this.props.positionRightDelete
+                  },
+                  { opacity: this.iconDeleteAnimated }
+                ]}
+              />}
+        </TouchableWithoutFeedback>
+        <TouchableWithoutFeedback onPress={this.onCancel}>
+          <Animated.View
+            style={[
+              styles.cancelButton,
+              this.props.cancelButtonStyle && this.props.cancelButtonStyle,
+              { left: this.btnCancelAnimated }
+            ]}
+          >
+            <Text
+              style={[
+                styles.cancelButtonText,
+                this.props.titleCancelColor && {
+                  color: this.props.titleCancelColor
+                },
+                this.props.cancelButtonStyle && this.props.cancelButtonStyle
+              ]}
             >
-                <AnimatedTextInput
-                    ref="input_keyword"
-                    style={[
-                        styles.input,
-                        this.props.placeholderTextColor && { color: this.props.placeholderTextColor },
-                        this.props.inputStyle && this.props.inputStyle,
-                        this.props.inputHeight && { height: this.props.inputHeight },
-                        this.props.inputBorderRadius && { borderRadius: this.props.inputBorderRadius },
-                        {
-                            width: this.inputFocusWidthAnimated,
-                            paddingLeft: this.inputFocusPlaceholderAnimated
-                        },
-                        this.props.shadowVisible && {
-                            shadowOffset: { width: this.props.shadowOffsetWidth, height: this.shadowHeight },
-                            shadowColor: this.props.shadowColor,
-                            shadowOpacity: this.shadowOpacityAnimated,
-                            shadowRadius: this.props.shadowRadius,
-                        },
-
-                    ]}
-                    editable={this.props.editable}
-                    value={this.state.keyword}
-                    onChangeText={this.onChangeText}
-                    placeholder={this.placeholder}
-                    placeholderTextColor={this.props.placeholderTextColor || styles.placeholderColor}
-                    onSubmitEditing={this.onSearch}
-                    autoCorrect={false}
-                    blurOnSubmit={this.props.blurOnSubmit}
-                    returnKeyType={this.props.returnKeyType || 'search'}
-                    keyboardType={this.props.keyboardType || 'default'}
-                    autoCapitalize={this.props.autoCapitalize}
-                    onFocus={this.onFocus}
-                    underlineColorAndroid='transparent'
-                />
-                <TouchableWithoutFeedback onPress={this.onFocus}>
-                    {((this.props.iconSearch) ?
-                        <Animated.View
-                            style={[
-                                styles.iconSearch,
-                                {left: this.iconSearchAnimated}
-                            ]}>
-                            {this.props.iconSearch}
-                        </Animated.View>
-                        :
-                        <Animated.Image
-                            source={require('./img/search.png')}
-                            style={[
-                                styles.iconSearch,
-                                styles.iconSearchDefault,
-                                this.props.tintColorSearch && { tintColor: this.props.tintColorSearch },
-                                {
-                                    left: this.iconSearchAnimated,
-                                }
-                            ]}
-                        />
-                    )}
-                </TouchableWithoutFeedback>
-                <TouchableWithoutFeedback onPress={this.onDelete}>
-                    {((this.props.iconDelete) ?
-                        <Animated.View
-                            style={[
-                                styles.iconDelete,
-                                this.props.positionRightDelete && { right: this.props.positionRightDelete },
-                                { opacity: this.iconDeleteAnimated }
-                            ]}>
-                            {this.props.iconDelete}
-                        </Animated.View>
-                        :
-                        <Animated.Image
-                            source={require('./img/delete.png')}
-                            style={[
-                                styles.iconDelete,
-                                styles.iconDeleteDefault,
-                                this.props.tintColorDelete && { tintColor: this.props.tintColorDelete },
-                                this.props.positionRightDelete && { right: this.props.positionRightDelete },
-                                { opacity: this.iconDeleteAnimated }
-                            ]}
-                        />
-                    )}
-                </TouchableWithoutFeedback>
-                <TouchableWithoutFeedback onPress={this.onCancel}>
-                    <Animated.View
-                        style={[
-                            styles.cancelButton,
-                            this.props.cancelButtonStyle && this.props.cancelButtonStyle,
-                            { left: this.btnCancelAnimated }
-                        ]}
-                    >
-                        <Text style={[
-                                  styles.cancelButtonText,
-                                  this.props.titleCancelColor && { color: this.props.titleCancelColor },
-                                  this.props.cancelButtonStyle && this.props.cancelButtonStyle
-                              ]}>
-                            {this.cancelTitle}
-                        </Text>
-                    </Animated.View>
-                </TouchableWithoutFeedback>
-            </Animated.View>
-        );
-    }
+              {this.cancelTitle}
+            </Text>
+          </Animated.View>
+        </TouchableWithoutFeedback>
+      </Animated.View>
+    );
+  }
 }
 
 const styles = {
-    container: {
-        backgroundColor: 'grey',
-        height: containerHeight,
-        flexDirection: 'row',
-        justifyContent: 'flex-start',
-        alignItems: 'center',
-        padding: 5,
-    },
-    input: {
-        height: containerHeight - 10,
-        paddingTop: 5,
-        paddingBottom: 5,
-        paddingRight: 20,
-        borderColor: '#444',
-        backgroundColor: '#f7f7f7',
-        borderRadius: 5,
-        fontSize: 13,
-    },
-    placeholderColor: 'grey',
-    iconSearch: {
-        flex: 1,
-        position: 'absolute',
-        top: middleHeight - 7,
-        height: 14,
-        width: 14,
-    },
-    iconSearchDefault: {
-        tintColor: 'grey',
-    },
-    iconDelete: {
-        position: 'absolute',
-        right: 70,
-        top: middleHeight - 7,
-        height: 14,
-        width: 14,
-    },
-    iconDeleteDefault: {
-        tintColor: 'grey',
-    },
-    cancelButton: {
-        justifyContent: 'center',
-        alignItems: 'flex-start',
-        backgroundColor: 'transparent',
-        width: 60,
-        height: 50,
-    },
-    cancelButtonText: {
-        fontSize: 14,
-        color: '#fff'
-    }
+  container: {
+    backgroundColor: 'grey',
+    height: containerHeight,
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    padding: 5
+  },
+  input: {
+    height: containerHeight - 10,
+    paddingTop: 5,
+    paddingBottom: 5,
+    paddingRight: 20,
+    borderColor: '#444',
+    backgroundColor: '#f7f7f7',
+    borderRadius: 5,
+    fontSize: 13
+  },
+  placeholderColor: 'grey',
+  iconSearch: {
+    flex: 1,
+    position: 'absolute',
+    top: middleHeight - 7,
+    height: 14,
+    width: 14
+  },
+  iconSearchDefault: {
+    tintColor: 'grey'
+  },
+  iconDelete: {
+    position: 'absolute',
+    right: 70,
+    top: middleHeight - 7,
+    height: 14,
+    width: 14
+  },
+  iconDeleteDefault: {
+    tintColor: 'grey'
+  },
+  cancelButton: {
+    justifyContent: 'center',
+    alignItems: 'flex-start',
+    backgroundColor: 'transparent',
+    width: 60,
+    height: 50
+  },
+  cancelButtonText: {
+    fontSize: 14,
+    color: '#fff'
+  }
 };
@@ -440,3 +427,3 @@ /**
 Search.propTypes = {
-    /**
+  /**
      * onFocus
@@ -446,29 +433,29 @@ * return a Promise
      */
-    beforeFocus: PropTypes.func,
-    onFocus: PropTypes.func,
-    afterFocus: PropTypes.func,
+  beforeFocus: PropTypes.func,
+  onFocus: PropTypes.func,
+  afterFocus: PropTypes.func,
 
-    /**
+  /**
      * onSearch
      * return a Promise
      */
-    beforeSearch: PropTypes.func,
-    onSearch: PropTypes.func,
-    afterSearch: PropTypes.func,
+  beforeSearch: PropTypes.func,
+  onSearch: PropTypes.func,
+  afterSearch: PropTypes.func,
 
-    /**
+  /**
      * onChangeText
      * return a Promise
      */
-    onChangeText: PropTypes.func,
+  onChangeText: PropTypes.func,
 
-    /**
+  /**
      * onCancel
      * return a Promise
      */
-    beforeCancel: PropTypes.func,
-    onCancel: PropTypes.func,
-    afterCancel: PropTypes.func,
+  beforeCancel: PropTypes.func,
+  onCancel: PropTypes.func,
+  afterCancel: PropTypes.func,
 
-    /**
+  /**
      * async await
@@ -478,87 +465,81 @@ * return a Promise
      */
-    beforeDelete: PropTypes.func,
-    onDelete: PropTypes.func,
-    afterDelete: PropTypes.func,
+  beforeDelete: PropTypes.func,
+  onDelete: PropTypes.func,
+  afterDelete: PropTypes.func,
 
-    /**
+  /**
      * styles
      */
-    backgroundColor: PropTypes.string,
-    placeholderTextColor: PropTypes.string,
-    titleCancelColor: PropTypes.string,
-    tintColorSearch: PropTypes.string,
-    tintColorDelete: PropTypes.string,
-    inputStyle: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.object,
-        View.propTypes.style
-    ]),
-    cancelButtonStyle: PropTypes.oneOfType([
-        PropTypes.number,
-        PropTypes.object
-    ]),
-    onLayout: PropTypes.func,
-    cancelButtonStyle: View.propTypes.style,
+  backgroundColor: PropTypes.string,
+  placeholderTextColor: PropTypes.string,
+  titleCancelColor: PropTypes.string,
+  tintColorSearch: PropTypes.string,
+  tintColorDelete: PropTypes.string,
+  inputStyle: PropTypes.oneOfType([
+    PropTypes.number,
+    PropTypes.object,
+    View.propTypes.style
+  ]),
+  cancelButtonStyle: PropTypes.oneOfType([PropTypes.number, PropTypes.object]),
+  onLayout: PropTypes.func,
+  cancelButtonStyle: View.propTypes.style,
 
-    /**
+  /**
      * text input
      */
-    placeholder: PropTypes.string,
-    cancelTitle: PropTypes.oneOfType([
-        PropTypes.string,
-        PropTypes.object
-    ]),
-    iconDelete: PropTypes.object,
-    iconSearch: PropTypes.object,
-    returnKeyType: PropTypes.string,
-    keyboardType: PropTypes.string,
-    autoCapitalize: PropTypes.string,
-    inputHeight: PropTypes.number,
-    inputBorderRadius: PropTypes.number,
-    contentWidth: PropTypes.number,
-    middleWidth: PropTypes.number,
-    editable: PropTypes.bool,
-    blurOnSubmit: PropTypes.bool,
-    keyboardShouldPersist: PropTypes.bool,
+  placeholder: PropTypes.string,
+  cancelTitle: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
+  iconDelete: PropTypes.object,
+  iconSearch: PropTypes.object,
+  returnKeyType: PropTypes.string,
+  keyboardType: PropTypes.string,
+  autoCapitalize: PropTypes.string,
+  inputHeight: PropTypes.number,
+  inputBorderRadius: PropTypes.number,
+  contentWidth: PropTypes.number,
+  middleWidth: PropTypes.number,
+  editable: PropTypes.bool,
+  blurOnSubmit: PropTypes.bool,
+  keyboardShouldPersist: PropTypes.bool,
 
-    /**
+  /**
      * Positioning
      */
-    positionRightDelete: PropTypes.number,
-    searchIconCollapsedMargin: PropTypes.number,
-    searchIconExpandedMargin: PropTypes.number,
-    placeholderCollapsedMargin: PropTypes.number,
-    placeholderExpandedMargin: PropTypes.number,
+  positionRightDelete: PropTypes.number,
+  searchIconCollapsedMargin: PropTypes.number,
+  searchIconExpandedMargin: PropTypes.number,
+  placeholderCollapsedMargin: PropTypes.number,
+  placeholderExpandedMargin: PropTypes.number,
 
-    /**
+  /**
      * Shadow
      */
-    shadowOffsetHeightCollapsed: PropTypes.number,
-    shadowOffsetHeightExpanded: PropTypes.number,
-    shadowOffsetWidth: PropTypes.number,
-    shadowColor: PropTypes.string,
-    shadowOpacityCollapsed: PropTypes.number,
-    shadowOpacityExpanded: PropTypes.number,
-    shadowRadius: PropTypes.number,
-    shadowVisible: PropTypes.bool,
+  shadowOffsetHeightCollapsed: PropTypes.number,
+  shadowOffsetHeightExpanded: PropTypes.number,
+  shadowOffsetWidth: PropTypes.number,
+  shadowColor: PropTypes.string,
+  shadowOpacityCollapsed: PropTypes.number,
+  shadowOpacityExpanded: PropTypes.number,
+  shadowRadius: PropTypes.number,
+  shadowVisible: PropTypes.bool
 };
 
 Search.defaultProps = {
-    editable: true,
-    blurOnSubmit: false,
-    keyboardShouldPersist: false,
-    searchIconCollapsedMargin: 25,
-    searchIconExpandedMargin: 10,
-    placeholderCollapsedMargin: 15,
-    placeholderExpandedMargin: 20,
-    shadowOffsetWidth: 0,
-    shadowOffsetHeightCollapsed: 2,
-    shadowOffsetHeightExpanded: 4,
-    shadowColor: '#000',
-    shadowOpacityCollapsed: 0.12,
-    shadowOpacityExpanded: 0.24,
-    shadowRadius: 4,
-    shadowVisible: false,
+  editable: true,
+  blurOnSubmit: false,
+  keyboardShouldPersist: false,
+  searchIconCollapsedMargin: 25,
+  searchIconExpandedMargin: 10,
+  placeholderCollapsedMargin: 15,
+  placeholderExpandedMargin: 20,
+  shadowOffsetWidth: 0,
+  shadowOffsetHeightCollapsed: 2,
+  shadowOffsetHeightExpanded: 4,
+  shadowColor: '#000',
+  shadowOpacityCollapsed: 0.12,
+  shadowOpacityExpanded: 0.24,
+  shadowRadius: 4,
+  shadowVisible: false
 };
 
 export default Search;

package.json

 {
-    "name": "react-native-search-box",
-    "version": "0.0.9",
-    "description": "A simple search box with animation, inspired from ios search bar. No library dependencies, lightweight, fast, flexible, customizable. Support both iOS/Android devices",
-    "main": "index.js",
-    "scripts": {
-        "test": "echo \"Error: no test specified\" && exit 1"
-    },
-    "repository": {
-        "type": "git",
-        "url": "https://github.com/crabstudio/react-native-search-box.git"
-    },
-    "author": "Anh Tuan Nguyen <[e-mail]> (https://github.com/anhtuank7c)",
-    "license": "MIT",
-    "keywords": [
-        "react-component",
-        "react-native",
-        "ios",
-        "android",
-        "anhtuank7c",
-        "crabstudio"
-    ]
-}
+  "name": "react-native-search-box",
+  "version": "0.0.10",
+  "description": "A simple search box with animation, inspired from ios search bar. Lightweight, fast, flexible, customizable. Support both iOS/Android devices",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/agiletechvn/react-native-search-box.git"
+  },
+  "author": "Anh Tuan Nguyen <[e-mail]> (https://github.com/anhtuank7c)",
+  "license": "MIT",
+  "keywords": ["react-native", "ios", "android", "anhtuank7c", "agiletechvn"],
+  "dependencies": {
+    "prop-types": "^15.5.10"
+  }
+}

README.md

 ## React Native Search Box
 - A simple search box with animation, inspired from ios search bar.
-- No library dependencies, lightweight, fast, flexible, customizable.
+- Lightweight, fast, flexible, customizable.
 - Support both iOS/Android devices
@@ -25,3 +25,3 @@ - Support vertical, horizontal layout
 
-[Example](https://github.com/crabstudio/react-native-atoz-listview/blob/master/example/src/screens/Contacts/Home.js#L162)
+[Example](https://github.com/agiletechvn/react-native-atoz-listview/blob/master/example/src/screens/Contacts/Home.js#L162)
 
@@ -31,3 +31,3 @@ ## Usage
 ```javascript
-import React, { Component } from 'react';
+import React, { PureComponent } from 'react';
 import { TouchableHightLight, Text, View } from 'react-native';
@@ -39,3 +39,3 @@ import AtoZListView from 'react-native-atoz-listview';
 
-class MyScene extends Component {
+class MyScene extends PureComponent {
 
@@ -51,3 +51,3 @@ state = {
           "name": "An Nhien",
-          "age": 20
+          "age": 2
         },
@@ -57,8 +57,8 @@ ],
         {
-          "name": "Zue Dang",
-          "age": 22
+          "name": "Thanh Tu Pham",
+          "age": 32
         },
         {
-          "name": "Zoom Jane",
-          "age": 30
+          "name": "Tien Thanh",
+          "age": 24
         },
@@ -93,3 +93,3 @@ ]
         return new Promise((resolve, reject) => {
-            console.log('beforeFocus', text);
+            console.log('onFocus', text);
             resolve();
@@ -235,3 +235,3 @@ });
 
-Copyright (c) 2017 Crabstudio. https://github.com/crabstudio
+Copyright (c) 2017 Agiletech. https://github.com/agiletechvn
 
@@ -238,0 +238,0 @@ Permission is hereby granted, free of charge, to any person obtaining a copy

No alert changes

Improved metrics

Number of package files

6

increased by20%

Worsened metrics

Total package byte prevSize

23637

decreased by-12%

Dependency count

1

increased byInfinity%

Lines of code

513

decreased by-3.39%

Dependency changes

• + Addedprop-types@^15.5.10

• + Addedjs-tokens@4.0.0(transitive)

• + Addedloose-envify@1.4.0(transitive)

• + Addedobject-assign@4.1.1(transitive)

• + Addedprop-types@15.8.1(transitive)

• + Addedreact-is@16.13.1(transitive)