Almost ready to go with example

WrathChaos · Oct 18, 2020 · b83600b · b83600b
1 parent dce69e0
commit b83600b
Show file tree

Hide file tree

Showing 55 changed files with 1,121 additions and 345 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -1,6 +1,13 @@
 module.exports = {
+  root: true,
+  extends: [
+    "@react-native-community",
+    "airbnb-typescript",
+    "prettier",
+    "prettier/@typescript-eslint",
+    "prettier/react"
+  ],
   parser: "babel-eslint",
-  extends: "airbnb",
   plugins: ["react", "react-native"],
   env: {
     jest: true,
@@ -11,7 +18,7 @@ module.exports = {
     "react/jsx-filename-extension": [
       "error",
       {
-        extensions: [".js", ".jsx"]
+        extensions: [".js", ".jsx", ".tsx", ".ts"]
       }
     ],
     // for post defining style object in react-native

diff --git a/.prettierrc.js b/.prettierrc.js
@@ -0,0 +1,8 @@
+module.exports = {
+  bracketSpacing: true,
+  jsxBracketSameLine: false,
+  singleQuote: false,
+  trailingComma: "all",
+  tabWidth: 2,
+  semi: true,
+};
diff --git a/example/App.tsx b/example/App.tsx
@@ -1,21 +1,121 @@
 import React, { Component } from "react";
-import { Text, View } from "react-native";
+import { View, StatusBar, FlatList, Platform, UIManager } from "react-native";
 import { SafeAreaView } from "react-native-safe-area-context";
+import { LineChart } from "react-native-svg-charts";
+import GradientCard from "react-native-gradient-card-view";
+import { ScreenWidth } from "@freakycoder/react-native-helpers";
 /**
  * ? Local Imports
  */
-import styles from "./App.style.ts";
 import SearchBar from "./lib/SearchBar";
+import styles, { centerSubtitleStyle } from "./styles";
+// Static Data
+import staticData from "./src/data/staticData";
 
 interface IProps {}
 
-interface IState {}
+interface IState {
+  query: string;
+  dataBackup: any;
+  dataSource: any;
+  isLoading: boolean;
+  refreshing: boolean;
+  spinnerVisibility: boolean;
+}
 
 export default class App extends Component<IProps, IState> {
+  constructor(props: IProps) {
+    super(props);
+    this.state = {
+      query: "",
+      isLoading: true,
+      refreshing: false,
+      dataBackup: staticData,
+      dataSource: staticData,
+      spinnerVisibility: false,
+    };
+
+    if (Platform.OS === "android") {
+      UIManager.setLayoutAnimationEnabledExperimental &&
+        UIManager.setLayoutAnimationEnabledExperimental(true);
+    }
+  }
+
+  filterList = (text: string) => {
+    var newData = this.state.dataBackup;
+    newData = this.state.dataBackup.filter((item: any) => {
+      const itemData = item.name.toLowerCase();
+      const textData = text.toLowerCase();
+      return itemData.indexOf(textData) > -1;
+    });
+    this.setState({
+      query: text,
+      dataSource: newData,
+    });
+  };
+
+  renderRightComponent = (item: any) => (
+    <View>
+      <LineChart
+        data={item.data}
+        style={styles.chartStyle}
+        contentInset={styles.chartContentInset}
+        svg={{
+          strokeWidth: 1.5,
+          fill: item.fillColor,
+          stroke: item.strokeColor,
+        }}
+      />
+    </View>
+  );
+
+  renderItem(item: any) {
+    return (
+      <GradientCard
+        key={item.name}
+        title={item.name}
+        style={styles.cardStyle}
+        imageSource={item.image}
+        centerTitle={item.value}
+        subtitle={item.shortName}
+        width={ScreenWidth * 0.9}
+        centerSubtitle={item.change}
+        shadowStyle={styles.cardShadowStyle}
+        centerSubtitleStyle={centerSubtitleStyle(item)}
+        // rightComponent={this.renderRightComponent(item)}
+      />
+    );
+  }
+
   render() {
+    const { spinnerVisibility } = this.state;
     return (
-      <SafeAreaView style={{ flex: 1 }}>
-        <SearchBar />
+      <SafeAreaView style={styles.safeAreaViewStyle}>
+        <StatusBar barStyle={"light-content"} />
+        <View style={styles.container}>
+          <SearchBar
+            // style={{
+            //   height: 50,
+            // }}
+            placeholder="Search"
+            spinnerVisibility={spinnerVisibility}
+            onChangeText={(text) => {
+              if (text.length === 0)
+                this.setState({ spinnerVisibility: false });
+              else this.setState({ spinnerVisibility: true });
+              this.filterList(text);
+            }}
+            onCancelPress={() => {
+              this.filterList("");
+            }}
+          />
+          <View style={styles.flatListStyle}>
+            <FlatList
+              data={this.state.dataSource}
+              renderItem={({ item }) => this.renderItem(item)}
+            />
+          </View>
+        </View>
       </SafeAreaView>
     );
   }

diff --git a/example/lib/SearchBar.tsx b/example/lib/SearchBar.tsx
@@ -7,6 +7,7 @@ import {
   ViewStyle,
   TextStyle,
   ImageStyle,
+  TextInputProps,
   TouchableWithoutFeedbackProps,
 } from "react-native";
 import Spinner from "react-native-spinkit";
@@ -22,7 +23,9 @@ const defaultCancelIcon = require("./local-assets/cancel-icon.png");
 export interface ISource {
   source: string | { uri: string };
 }
-export interface ISearchBarProps extends TouchableWithoutFeedbackProps {
+export interface ISearchBarProps
+  extends TouchableWithoutFeedbackProps,
+    TextInputProps {
   placeholder?: string;
   ImageComponent?: any;
   spinnerType?: string;
@@ -37,6 +40,8 @@ export interface ISearchBarProps extends TouchableWithoutFeedbackProps {
   textInputStyle?: TextStyle | Array<TextStyle>;
   searchIconImageStyle?: ImageStyle | Array<ImageStyle>;
   cancelIconImageStyle?: ImageStyle | Array<ImageStyle>;
+  onBlur?: () => void;
+  onFocus?: () => void;
   onPress?: () => void;
   onSearchPress?: () => void;
   onCancelPress?: () => void;
@@ -102,10 +107,17 @@ export default class SearchBar extends Component<ISearchBarProps, IState> {
   };
 
   renderTextInput = () => {
-    const { textInputStyle, placeholder = "Search here..." } = this.props;
+    const {
+      onBlur,
+      onFocus,
+      textInputStyle,
+      placeholder = "Search here...",
+    } = this.props;
     return (
       <TextInput
         {...this.props}
+        onBlur={onBlur}
+        onFocus={onFocus}
         ref={(ref) => (this.inputRef = ref)}
         style={[styles.textInputStyle, textInputStyle]}
         placeholder={placeholder}

diff --git a/example/package.json b/example/package.json
@@ -18,7 +18,7 @@
     "react-native-dynamic-search-bar": "1.3.1",
     "react-native-fast-image": "^8.3.2",
     "react-native-gesture-handler": "^1.8.0",
-    "react-native-gradient-card-view": "0.2.0",
+    "react-native-gradient-card-view": "0.1.0",
     "react-native-linear-gradient": "^2.5.6",
     "react-native-material-ripple": "^0.9.1",
     "react-native-safe-area-context": "^3.1.8",

diff --git a/example/styles.js b/example/styles.js
@@ -44,9 +44,6 @@ export default {
         top: 24,
       },
     }),
-    flex: 1,
-    justifyContent: "center",
-    alignItems: "center",
     backgroundColor: "#21283d",
   },
   welcome: {

diff --git a/lib/SearchBar.style.ts b/lib/SearchBar.style.ts
@@ -1,98 +1,53 @@
-import { Platform, ViewStyle, StyleSheet } from "react-native";
-import {
-  ScreenWidth,
-  isIPhoneXFamily,
-} from "@freakycoder/react-native-helpers";
+import { ViewStyle, ImageStyle, TextStyle, StyleSheet } from "react-native";
 
 interface Style {
-  center: ViewStyle;
-  searchStyle: ViewStyle;
-  containerGlue: ViewStyle;
-  textInputContainer: ViewStyle;
-}
-
-export function container(props: any) {
-  const {
-    height = 35,
-    width = ScreenWidth * 0.93,
-    backgroundColor = "#fff",
-    borderRadius = 10,
-  } = props;
-
-  return {
-    width: width,
-    height: height,
-    borderRadius,
-    backgroundColor,
-    paddingLeft: 8,
-    paddingRight: 8,
-  };
-}
-
-export function textInputStyle(
-  fontSize: number = 13,
-  fontColor: string = "#b3b6c3",
-  height: number = 35,
-  width: number = ScreenWidth * 0.7
-) {
-  return {
-    ...Platform.select({
-      android: {
-        padding: 0,
-        margin: 0,
-        borderWidth: 0,
-      },
-      ios: {
-        bottom: 0,
-      },
-    }),
-    flex: 1,
-    marginLeft: 24,
-    color: fontColor,
-    fontSize: fontSize,
-    maxHeight: height - 8,
-    maxWidth: width * 0.75,
-  };
-}
-
-export function _shadowStyle(shadowColor: string = "#757575") {
-  return {
-    ...Platform.select({
-      ios: {
-        shadowColor,
-        shadowRadius: 5,
-        shadowOpacity: 0.3,
-        shadowOffset: { width: 2, height: 1 },
-      },
-      android: { elevation: 5 },
-    }),
-  };
-}
-
-export function ifIPhoneXHeader(noExtraMargin: boolean) {
-  if (noExtraMargin) return { marginTop: 16 };
-  return {
-    marginTop: isIPhoneXFamily() ? 44 : 16,
-  };
+  container: ViewStyle;
+  searchContainer: ViewStyle;
+  searchIconImageStyle: ImageStyle;
+  textInputStyle: TextStyle;
+  cancelIconImageStyle: ImageStyle;
+  cancelIconContainer: ViewStyle;
+  spinnerContainer: ViewStyle;
 }
 
 export default StyleSheet.create<Style>({
-  containerGlue: {
-    flex: 1,
+  container: {
+    height: 40,
+    width: "90%",
+    borderRadius: 12,
+    alignSelf: "center",
     flexDirection: "row",
-    justifyContent: "space-between",
+    alignItems: "center",
+    backgroundColor: "#fff",
+    shadowRadius: 8,
+    shadowOpacity: 0.3,
+    shadowColor: "#757575",
+    shadowOffset: {
+      width: 0,
+      height: 3,
+    },
   },
-  searchStyle: {
-    flex: 1,
-    flexDirection: "row",
+  searchContainer: {
+    marginLeft: 12,
   },
-  textInputContainer: {
-    flex: 1,
-    alignItems: "center",
-    justifyContent: "center",
+  searchIconImageStyle: {
+    width: 18,
+    height: 18,
   },
-  center: {
-    alignSelf: "center",
-    alignContent: "center",
+  textInputStyle: {
+    width: "80%",
+    marginLeft: 12,
+    color: "#19191a",
+  },
+  cancelIconImageStyle: {
+    width: 18,
+    height: 18,
+  },
+  cancelIconContainer: {
+    marginRight: 8,
+    marginLeft: "auto",
+  },
+  spinnerContainer: {
+    marginLeft: 12,
   },
 });