From 5da7f360a3487985e2f192b2676f2db4e091abcd Mon Sep 17 00:00:00 2001 From: FreakyCoder Date: Tue, 24 Dec 2019 23:00:07 +0300 Subject: [PATCH] TextInput is more customizable and available for all use-cases (I hope :D) --- README.md | 2 +- example/App.js | 3 +- example/lib/src/SearchBar.js | 118 ------------------ example/lib/src/SearchBar.style.js | 80 ------------ example/lib/src/components/SearchCancel.js | 40 ------ example/lib/src/components/SearchIcon.js | 31 ----- example/lib/src/components/SearchTextInput.js | 28 ----- .../components/styles/SearchCancel.style.js | 11 -- .../src/components/styles/SearchIcon.style.js | 7 -- .../styles/SearchTextInput.style.js | 16 --- example/package.json | 2 +- lib/src/SearchBar.js | 3 +- package.json | 2 +- 13 files changed, 5 insertions(+), 338 deletions(-) delete mode 100644 example/lib/src/SearchBar.js delete mode 100644 example/lib/src/SearchBar.style.js delete mode 100644 example/lib/src/components/SearchCancel.js delete mode 100644 example/lib/src/components/SearchIcon.js delete mode 100644 example/lib/src/components/SearchTextInput.js delete mode 100644 example/lib/src/components/styles/SearchCancel.style.js delete mode 100644 example/lib/src/components/styles/SearchIcon.style.js delete mode 100644 example/lib/src/components/styles/SearchTextInput.style.js diff --git a/README.md b/README.md index 0ee43a4..dd8b9f5 100644 --- a/README.md +++ b/README.md @@ -160,7 +160,7 @@ apply from: "../../node_modules/react-native-vector-icons/fonts.gradle" -> You need to enable experimental LayoutAnimation on the android. Here is how to do it: ```js -import {UIManager} from 'react-native'; +import { UIManager } from 'react-native'; constructor() { super(); diff --git a/example/App.js b/example/App.js index 8ac795f..36eed69 100644 --- a/example/App.js +++ b/example/App.js @@ -8,10 +8,9 @@ import { SafeAreaView, LayoutAnimation } from "react-native"; -import SearchBar from "./lib/src/SearchBar"; import { LineChart } from "react-native-svg-charts"; +import SearchBar from "react-native-dynamic-search-bar"; import GradientCard from "react-native-gradient-card-view"; -// import SearchBar from "react-native-dynamic-search-bar"; import { ScreenWidth } from "@freakycoder/react-native-helpers"; import { CustomLayoutSpring } from "react-native-animation-layout"; // Static Data diff --git a/example/lib/src/SearchBar.js b/example/lib/src/SearchBar.js deleted file mode 100644 index e07a056..0000000 --- a/example/lib/src/SearchBar.js +++ /dev/null @@ -1,118 +0,0 @@ -import React, { Component } from "react"; -import { View, TextInput, TouchableOpacity } from "react-native"; -/** - * ? Local Imports - */ -import styles, { - container, - _shadowStyle, - textInputStyle, - ifIPhoneXHeader -} from "./SearchBar.style"; -import SearchIcon from "./components/SearchIcon"; -import SearchCancel from "./components/SearchCancel"; -import SearchTextInput from "./components/SearchTextInput"; - -let textInputRef = null; - -export default class SearchBar extends Component { - render() { - const { - onPress, - fontSize, - iconName, - iconType, - iconSize, - iconColor, - fontColor, - autoFocus, - shadowColor, - placeholder, - onChangeText, - onPressCancel, - iconComponent, - onPressToFocus, - textInputValue, - cancelIconName, - cancelIconType, - cancelIconSize, - cancelIconColor, - cancelComponent, - textInputDisable, - textInputComponent, - cancelIconComponent, - cancelButtonDisable, - noExtraMargin - } = this.props; - - return ( - { - onPressToFocus ? textInputRef.focus() : onPress(); - }} - rippleColor="#807DE7" - rippleContainerBorderRadius={10} - > - - - - - { - this.textInput = c; - textInputRef = c; - }} - autoFocus={autoFocus} - value={textInputValue} - placeholder={placeholder} - onChangeText={onChangeText} - placeholderTextColor={fontColor} - style={[textInputStyle(fontSize, fontColor)]} - /> - - )) - } - /> - - { - if (onPressCancel) { - if (this.textInput) this.textInput.clear(); - onPressCancel(); - } else { - if (this.textInput) this.textInput.clear(); - } - }} - cancelComponent={cancelComponent} - cancelButtonDisable={cancelButtonDisable} - /> - - - ); - } -} diff --git a/example/lib/src/SearchBar.style.js b/example/lib/src/SearchBar.style.js deleted file mode 100644 index 78d5ec6..0000000 --- a/example/lib/src/SearchBar.style.js +++ /dev/null @@ -1,80 +0,0 @@ -import { Platform } from "react-native"; -import { - ScreenWidth, - isIPhoneXFamily -} from "@freakycoder/react-native-helpers"; - -export function container(props) { - const { height, width, backgroundColor, borderRadius } = props; - - return { - paddingLeft: 8, - paddingRight: 8, - height: height || 35, - borderRadius: borderRadius || 10, - backgroundColor: backgroundColor || "#fff", - width: width || ScreenWidth * 0.93 - }; -} - -export function textInputStyle(fontSize, fontColor) { - return { - ...Platform.select({ - android: { - padding: 0, - margin: 0, - borderWidth: 0 - }, - ios: { - bottom: 1 - } - }), - marginLeft: 24, - width: ScreenWidth * 0.7, - fontSize: fontSize || 13, - color: fontColor || "#b3b6c3" - }; -} - -export function _shadowStyle(shadowColor) { - return { - ...Platform.select({ - ios: { - shadowRadius: 5, - shadowOpacity: 0.3, - shadowColor: shadowColor || "#757575", - shadowOffset: { width: 2, height: 1 } - }, - android: { elevation: 5 } - }) - }; -} - -export function ifIPhoneXHeader(noExtraMargin) { - if (noExtraMargin) return { marginTop: 16 }; - return { - marginTop: isIPhoneXFamily() ? 44 : 16 - }; -} - -export default { - containerGlue: { - flex: 1, - flexDirection: "row", - justifyContent: "space-between" - }, - searchStyle: { - top: 2, - flex: 1, - flexDirection: "row" - }, - textInputContainer: { - flex: 1, - alignItems: "center", - justifyContent: "center" - }, - center: { - alignSelf: "center", - alignContent: "center" - } -}; diff --git a/example/lib/src/components/SearchCancel.js b/example/lib/src/components/SearchCancel.js deleted file mode 100644 index 3f99015..0000000 --- a/example/lib/src/components/SearchCancel.js +++ /dev/null @@ -1,40 +0,0 @@ -import React from "react"; -import { TouchableOpacity, View } from "react-native"; -import Icon from "react-native-dynamic-vector-icons"; -/** - * ? Local Imports - */ -import styles from "./styles/SearchCancel.style"; - -export default class SearchCancel extends React.PureComponent { - renderIcon(props) { - const { - onPressCancel, - cancelIconName, - cancelIconType, - cancelIconSize, - cancelIconColor, - cancelIconComponent, - cancelButtonDisable - } = props; - return ( - !cancelButtonDisable && ( - - {cancelIconComponent || ( - - )} - - ) - ); - } - - render() { - const { cancelComponent } = this.props; - return cancelComponent || this.renderIcon(this.props); - } -} diff --git a/example/lib/src/components/SearchIcon.js b/example/lib/src/components/SearchIcon.js deleted file mode 100644 index ee20c69..0000000 --- a/example/lib/src/components/SearchIcon.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from "react"; -import { View } from "react-native"; -import Icon from "react-native-dynamic-vector-icons"; -/** - * ? Local Imports - */ -import styles from "./styles/SearchIcon.style"; - -export default class SearchIcon extends React.PureComponent { - render() { - const { - iconName, - iconType, - iconSize, - iconColor, - iconComponent - } = this.props; - return ( - - {iconComponent || ( - - )} - - ); - } -} diff --git a/example/lib/src/components/SearchTextInput.js b/example/lib/src/components/SearchTextInput.js deleted file mode 100644 index c896753..0000000 --- a/example/lib/src/components/SearchTextInput.js +++ /dev/null @@ -1,28 +0,0 @@ -import React, { Component } from "react"; -import { Text, View } from "react-native"; -/** - * ? Local Imports - */ -import styles, { textStyle } from "./styles/SearchTextInput.style"; - -export default class SearchTextInput extends Component { - renderContent(props) { - const { fontSize, fontColor, placeholder, textInputDisable } = props; - return ( - textInputDisable && ( - {placeholder} - ) - ); - } - - render() { - const { textInputComponent } = this.props; - return ( - - {textInputComponent || ( - {this.renderContent(this.props)} - )} - - ); - } -} diff --git a/example/lib/src/components/styles/SearchCancel.style.js b/example/lib/src/components/styles/SearchCancel.style.js deleted file mode 100644 index 8efd9c1..0000000 --- a/example/lib/src/components/styles/SearchCancel.style.js +++ /dev/null @@ -1,11 +0,0 @@ -export default { - container: { - alignItems: "center", - justifyContent: "center" - }, - iconContainer: { - alignContent: "center", - alignItems: "center", - justifyContent: "center" - } -}; diff --git a/example/lib/src/components/styles/SearchIcon.style.js b/example/lib/src/components/styles/SearchIcon.style.js deleted file mode 100644 index f2c0941..0000000 --- a/example/lib/src/components/styles/SearchIcon.style.js +++ /dev/null @@ -1,7 +0,0 @@ -export default { - container: { - left: 8, - alignContent: "center", - justifyContent: "center" - } -}; diff --git a/example/lib/src/components/styles/SearchTextInput.style.js b/example/lib/src/components/styles/SearchTextInput.style.js deleted file mode 100644 index 00d4b9a..0000000 --- a/example/lib/src/components/styles/SearchTextInput.style.js +++ /dev/null @@ -1,16 +0,0 @@ -export function textStyle(fontSize, fontColor) { - return { - left: 24, - bottom: 1, - fontSize: fontSize || 13, - color: fontColor || "#b3b6c3" - }; -} - -export default { - container: { - flex: 1, - alignContent: "center", - justifyContent: "center" - } -}; diff --git a/example/package.json b/example/package.json index 29cfad0..43db99e 100644 --- a/example/package.json +++ b/example/package.json @@ -14,7 +14,7 @@ "react-native": "0.61.5", "@freakycoder/react-native-helpers": "^0.1.0", "react-native-animation-layout": "0.0.13", - "react-native-dynamic-search-bar": "0.2.1", + "react-native-dynamic-search-bar": "0.3.1", "react-native-dynamic-vector-icons": "0.2.1", "react-native-fast-image": "^7.0.2", "react-native-gradient-card-view": "0.1.0", diff --git a/lib/src/SearchBar.js b/lib/src/SearchBar.js index f7fd3b0..6a5f67c 100644 --- a/lib/src/SearchBar.js +++ b/lib/src/SearchBar.js @@ -86,10 +86,9 @@ export default class SearchBar extends Component { autoFocus={autoFocus} value={textInputValue} placeholder={placeholder} - onChangeText={onChangeText} placeholderTextColor={fontColor} - onSubmitEditing={onSubmitEditing} style={[textInputStyle(fontSize, fontColor)]} + {...this.props} /> )) diff --git a/package.json b/package.json index 465d8ec..aae7395 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "react-native-dynamic-search-bar", - "version": "0.3.0", + "version": "0.3.1", "description": "Fully customizable and dynamic Search Bar for React Native.", "keywords": [ "gradient",