@alliance-software-development/asdpay

A React component for payment.

Installation

For Native this module depends on nothing means no dependency require so, just 1 below step require to install it.

Note: to use this module on web, you have to install react-native-web

npm install @alliance-software-development/asdpay

or

yarn add @alliance-software-development/asdpay

Usage

import ASDSearch from "@alliance-software-development/asdpay";

For Native

import React from "react";
import { Dimensions, SafeAreaView, StyleSheet, Text, View } from "react-native";

import ASDSearch from "@alliance-software-development/asdpay";

const data = [
  {
    studioType: "music",
    zipCode: "74886",
    thresholdDays: 2,
    name: "music pool",
    phoneNumber: 7036979103,
    address: "707 Continental Cir, Mountain View, CA 94040, USA",
    service: {
      serviceName: "pool sounds",
      price: 100,
    },
  },
  {
    studioType: "music",
    zipCode: "122",
    thresholdDays: 2,
    name: "music ranty",
    phoneNumber: 7036979103,
    address: "707 Mac Book, Mountain View, CA 94040, USA",
    service: {
      serviceName: "pool sounds",
      price: 100,
    },
  },
  {
    studioType: "photo",
    thresholdDays: 2,
    name: "photo iconic",
    phoneNumber: 7036979103,
    address: "500 Phot Bum str, Mountain View, CA 94040, USA",
    service: {
      serviceName: "pool sounds",
      price: 10,
    },
  },
  {
    studioType: "video",
    thresholdDays: 2,
    name: "videp pool",
    phoneNumber: 7036979103,
    address: "300 Lam Sink, Mountain View, CA 94040, USA",
    service: {
      serviceName: "pool sounds",
      price: 50,
    },
  },
];

const App = () => {
  const dataView = ({ item, index }) => {
    return (
      <View key={index} style={[styles.dataViewStyle, styles.shadowProp]}>
        <View>
          <Text style={styles.title}>{item.name}</Text>
          <Text style={styles.subtitle}>
            Starting @ ${item.service.price}/hr
          </Text>
          <Text numberOfLines={2} style={styles.desc}>
            {item.address}
          </Text>
        </View>
        <View style={styles.box} />
      </View>
    );
  };

  const renderSearchHeader = (searchCount) => {
    return (
      <View style={styles.center}>
        <Text style={[styles.title, { color: "midnightblue" }]}>
          Quick Search Result {searchCount}
        </Text>
      </View>
    );
  };
  return (
    <SafeAreaView style={{ flex: 1 }}>
      <ASDSearch
        data={data}
        dataView={dataView}
        renderSearchHeader={renderSearchHeader}
        searchBy={["address", "name", "studioType", "service.price"]}
        dataViewContainerStyle={styles.dataViewContainerStyle}
        searchInputStyle={styles.searchInputStyle}
      />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  center: {
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 10,
  },
  searchInputStyle: {
    alignSelf: "center",
    backgroundColor: "lightgray",
    height: 45,
    borderRadius: 10,
    borderWidth: 0,
    marginBottom: 20,
  },
  dataViewStyle: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingHorizontal: 15,
    minHeight: 100,
    minWidth: Dimensions.get("window").width - 25,
    margin: 10,
    borderRadius: 10,
    backgroundColor: "#fff",
  },
  dataViewContainerStyle: {
    flex: 1,
    flexDirection: "column",
  },
  title: {
    fontSize: 18,
    fontWeight: "500",
    textTransform: "capitalize",
  },
  subtitle: {
    fontSize: 15,
    fontWeight: "500",
  },
  desc: {
    fontSize: 14,
    fontWeight: "300",
    color: "gray",
    letterSpacing: 1,
    marginTop: 20,
    width: 210,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  box: {
    backgroundColor: "gray",
    height: 70,
    width: 70,
    borderRadius: 8,
    alignSelf: "center",
  },
  shadowProp: {
    shadowColor: "#171717",
    shadowOffset: { width: -2, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
  elevation: {
    elevation: 20,
    shadowColor: "#52006A",
  },
});

export default App;

Usage on Web

import React from "react";

import ASDSearch from "@alliance-software-development/asdpay";

const data = [
  {
    studioType: "music",
    zipCode: "74886",
    thresholdDays: 2,
    name: "music pool",
    phoneNumber: 7036979103,
    address: "707 Continental Cir, Mountain View, CA 94040, USA",
    service: {
      serviceName: "pool sounds",
      price: 100,
    },
  },
  {
    studioType: "music",
    zipCode: "122",
    thresholdDays: 2,
    name: "music ranty",
    phoneNumber: 7036979103,
    address: "707 Mac Book, Mountain View, CA 94040, USA",
    service: {
      serviceName: "pool sounds",
      price: 100,
    },
  },
  {
    studioType: "photo",
    thresholdDays: 2,
    name: "photo iconic",
    phoneNumber: 7036979103,
    address: "500 Phot Bum str, Mountain View, CA 94040, USA",
    service: {
      serviceName: "pool sounds",
      price: 10,
    },
  },
  {
    studioType: "video",
    thresholdDays: 2,
    name: "videp pool",
    phoneNumber: 7036979103,
    address: "300 Lam Sink, Mountain View, CA 94040, USA",
    service: {
      serviceName: "pool sounds",
      price: 50,
    },
  },
];

const styles = {
  center: {
    justifyContent: "center",
    alignItems: "center",
    marginBottom: 10,
  },
  searchInputStyle: {
    alignSelf: "center",
    backgroundColor: "lightgray",
    height: 45,
    borderRadius: 10,
    borderWidth: 0,
    marginBottom: 20,
  },
  dataViewStyle: {
    flexDirection: "row",
    justifyContent: "space-between",
    paddingHorizontal: 15,
    minHeight: 100,
    minWidth: 300,
    margin: 10,
    borderRadius: 10,
    backgroundColor: "#fff",
  },
  dataViewContainerStyle: {
    flex: 1,
    flexDirection: "column",
  },
  title: {
    fontSize: 18,
    fontWeight: "500",
    textTransform: "capitalize",
  },
  subtitle: {
    fontSize: 15,
    fontWeight: "500",
  },
  desc: {
    fontSize: 14,
    fontWeight: "300",
    color: "gray",
    letterSpacing: 1,
    marginTop: 20,
    width: 210,
  },
  sectionContainer: {
    marginTop: 32,
    paddingHorizontal: 24,
  },
  box: {
    backgroundColor: "gray",
    height: 70,
    width: 70,
    borderRadius: 8,
    alignSelf: "center",
  },
  shadowProp: {
    shadowColor: "#171717",
    shadowOffset: { width: -2, height: 4 },
    shadowOpacity: 0.2,
    shadowRadius: 3,
  },
};

const App = () => {
  const dataView = ({ item, index }) => {
    return (
      <div key={index} style={[styles.dataViewStyle, styles.shadowProp]}>
        <div>
          <h1 style={styles.title}>{item.name}</h1>
          <p style={styles.subtitle}>Starting @ ${item.service.price}/hr</p>
          <span numberOfLines={2} style={styles.desc}>
            {item.address}
          </span>
        </div>
        <div style={styles.box} />
      </div>
    );
  };

  const renderSearchHeader = (searchCount) => {
    return (
      <div style={styles.center}>
        <h2 style={[styles.title, { color: "midnightblue" }]}>
          Quick Search Result {searchCount}
        </h2>
      </div>
    );
  };
  return (
    <div style={{ flex: 1 }}>
      <ASDSearch
        data={data}
        dataView={dataView}
        renderSearchHeader={renderSearchHeader}
        searchBy={["address", "name", "studioType", "service.price"]}
        dataViewContainerStyle={styles.dataViewContainerStyle}
        searchInputStyle={styles.searchInputStyle}
      />
    </div>
  );
};

export default App;

Props

ASDSearch component accepts following props.

| Name | Type | Default | Is Require | | ---------------------- | ------------- | ------- | ---------- | | data | [] of {} | - | Yes | | searchBy | [] of Strings | - | Yes | | dataView | Func | - | Yes | | renderSearchHeader | Func | - | No | | searchInputProps | {} | - | No | | dataViewContainerStyle | {} | - | No | | searchInputStyle | {} | - | No |

Props Explanation

Data List of Objects

Data must be List of Objects where each object will represent a View.

  //List of Objects
  [{
    studioType: 'video',
    thresholdDays: 2,
  }, ...]

  //For Example
  data={[{
    studioType: 'video',
    thresholdDays: 2,
    name: 'videp pool',
    phoneNumber: 7036979103,
    address: '300 Lam Sink, Mountain View, CA 94040, USA',
    service: {
      serviceName: 'pool sounds',
      price: 50,
    },
  }, ... ]}

searchBy List of Strings

By Default ASDSearch searches by all the Data props.

//List of Strings
["city", "zipcode", "name", "price"];

//Note
//Data prop must have Object keys same/match the Data item.

dataView Function ASDSearch passes each item with its index in Object in which can display, with full flexibity.

Below is the shape of Objects.

//Function Shape
const dataView = ({ item, index }) => {
  return (
    <View key={index} style={[styles.dataViewStyle, styles.shadowProp]}>
      <View>
        <Text style={styles.title}>{item.name}</Text>
        <Text style={styles.subtitle}>Starting @ ${item.service.price}/hr</Text>
        <Text numberOfLines={2} style={styles.desc}>
          {item.address}
        </Text>
      </View>
      <View style={styles.box} />
    </View>
  );
};

renderSearchHeader Function ASDSearch passes search result count.

Below is the shape of Objects.

//Function Shape
const renderSearchHeader = (searchCount) => {
  return (
    <View style={styles.center}>
      <Text style={[styles.title, { color: "midnightblue" }]}>
        Quick Search Result {searchCount}
      </Text>
    </View>
  );
};

searchInputProps Object

Search input props, just a wrapper around react native TextInput

e.g.
{
    placeholder: 'Search by name, zipcode...',
    onTextChange: ()=>{}

}

dataViewContainerStyle Object

dataView container styles

e.g.
{
   flex: 1,
   flexDirection: 'column',
},

searchInputStyle Object

Search input styles

e.g.
{
    alignSelf: 'center',
    backgroundColor: 'lightgray',
    height: 45,
    borderRadius: 10,
    borderWidth: 0,
    marginBottom: 20,
  }