add some custom styles and types

dilipchandima · Jun 24, 2021 · 00c2867 · 00c2867
1 parent 80d6a93
commit 00c2867
Show file tree

Hide file tree

Showing 11 changed files with 155 additions and 149 deletions.
diff --git a/.npmignore b/.npmignore
@@ -12,4 +12,6 @@ tmp
 example
 
 
-rnv-date-range-picker-*.tgz
+rnv-date-range-picker-*.tgz
+screen.png
+screen2.png
diff --git a/README.md b/README.md
@@ -4,7 +4,7 @@ A simple React Native date range picker component
 
 ---
 
-### Installing:
+## Installing
 
 ```
 npm install rn-select-date-range
@@ -16,21 +16,32 @@ or
 yarn add rn-select-date-range
 ```
 
-### Screenshot
+---
+
+## Screenshot
 
-![screen gif](https://media.giphy.com/media/qvl9TQCBdaMh116zk1/giphy.gif)
+<p align="center">
+  <img src="https://media.giphy.com/media/qvl9TQCBdaMh116zk1/giphy.gif">
+</p>
 
-![screen shot](https://raw.githubusercontent.com/dilipchandima/rnv-date-range-picker/master/screen.png)
+<p align="center">
+  <img src="https://raw.githubusercontent.com/dilipchandima/rnv-date-range-picker/master/screen.png">
+  <img src="https://raw.githubusercontent.com/dilipchandima/rnv-date-range-picker/master/screen2.png">
+</p>
+
+---
 
-# Prerequisites
+## Prerequisites
 
 CalendarPicker requires Moment JS.
 
 ```
 npm install --save moment
 ```
 
-# Example
+---
+
+## Example React Native App
 
 ```js
 import moment from "moment";
@@ -47,9 +58,12 @@ const App = () => {
           onSelectDateRange={(range) => {
             setRange(range);
           }}
+          blockSingleDateSelection={true}
           responseFormat="YYYY-MM-DD"
           maxDate={moment()}
           minDate={moment().subtract(100, "days")}
+          selectedDateContainerStyle={styles.selectedDateContainerStyle}
+          selectedDateStyle={styles.selectedDateStyle}
         />
         <View style={styles.container}>
           <Text>first date: {selectedRange.firstDate}</Text>
@@ -64,21 +78,40 @@ const styles = StyleSheet.create({
   container: {
     margin: 50,
   },
+  selectedDateContainerStyle: {
+    height: 35,
+    width: "100%",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "blue",
+  },
+  selectedDateStyle: {
+    fontWeight: "bold",
+    color: "white",
+  },
 });
 
 export default App;
 ```
 
+---
+
 ## CalendarPicker Props
 
-| Prop                    | Type       | Description                                                                                                             |
-| :---------------------- | :--------- | :---------------------------------------------------------------------------------------------------------------------- |
-| **`maxDate`**           | `Moment()` | Optional. If you need to pass Max Date user can select, set this prop as a moment date                                  |
-| **`minDate`**           | `Moment()` | Optional. If you need to pass Min Date user can select, set this prop as a moment date                                  |
-| **`responseFormat`**    | `String`   | Optional. Please refere the date formats here [Moment Date Formats](https://momentjs.com/docs/#/parsing/string-format/) |
-| **`onSelectDateRange`** | `Method`   | This will return a object with firstDate and lastDate                                                                   |
+| Prop                             | Type       | Description                                                                                                             |
+| :------------------------------- | :--------- | :---------------------------------------------------------------------------------------------------------------------- |
+| **`maxDate`**                    | `Moment()` | Optional. If you need to pass Max Date user can select, set this prop as a moment date                                  |
+| **`minDate`**                    | `Moment()` | Optional. If you need to pass Min Date user can select, set this prop as a moment date                                  |
+| **`responseFormat`**             | `String`   | Optional. Please refere the date formats here [Moment Date Formats](https://momentjs.com/docs/#/parsing/string-format/) |
+| **`onSelectDateRange`**          | `Method`   | This will return a object with firstDate and lastDate                                                                   |
+| **`blockSingleDateSelection`**   | `boolean`  | This will block the user to click single date without date range                                                        |
+| **`font`**                       | `String`   | Name of the font you are using in your theme                                                                            |
+| **`selectedDateContainerStyle`** | `Style`    | Style of the selected date container                                                                                    |
+| **`selectedDateStyle`**          | `Style`    | Style of the selected date                                                                                              |
+
+---
 
-### onSelectDateRange response
+## onSelectDateRange response
 
 ```
 {
@@ -87,14 +120,18 @@ export default App;
 }
 ```
 
-### Run the sample app
+---
+
+## Run the sample app
 
 ```
 cd example
 npm install
 npx react-native run-ios
 ```
 
-# Suggestions?
+---
+
+## Suggestions?
 
 Open Issues. Submit PRs.
diff --git a/example/App.js b/example/App.js
@@ -1,7 +1,7 @@
 import moment from 'moment';
 import React, {useState} from 'react';
 import {SafeAreaView, StyleSheet, View, Text} from 'react-native';
-import DateRangePicker from 'rnv-date-range-picker';
+import DateRangePicker from 'rn-select-date-range';
 
 const App = () => {
   const [selectedRange, setRange] = useState({});
@@ -12,9 +12,12 @@ const App = () => {
           onSelectDateRange={range => {
             setRange(range);
           }}
+          blockSingleDateSelection={true}
           responseFormat="YYYY-MM-DD"
           maxDate={moment()}
           minDate={moment().subtract(100, 'days')}
+          selectedDateContainerStyle={styles.selectedDateContainerStyle}
+          selectedDateStyle={styles.selectedDateStyle}
         />
         <View style={styles.container}>
           <Text>first date: {selectedRange.firstDate}</Text>
@@ -29,6 +32,17 @@ const styles = StyleSheet.create({
   container: {
     margin: 50,
   },
+  selectedDateContainerStyle: {
+    height: 35,
+    width: '100%',
+    alignItems: 'center',
+    justifyContent: 'center',
+    backgroundColor: 'blue',
+  },
+  selectedDateStyle: {
+    fontWeight: 'bold',
+    color: 'white',
+  },
 });
 
 export default App;
diff --git a/example/package-lock.json b/example/package-lock.json
diff --git a/example/package.json b/example/package.json
@@ -11,10 +11,9 @@
   },
   "dependencies": {
     "moment": "^2.29.1",
-    "moment-range": "^4.0.2",
     "react": "17.0.1",
     "react-native": "0.64.2",
-    "rnv-date-range-picker": "^1.1.0"
+    "rn-select-date-range": "^1.1.1"
   },
   "devDependencies": {
     "@babel/core": "^7.12.9",

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "rn-select-date-range",
-  "version": "1.0.0",
+  "version": "1.3.0",
   "description": "A simple and fully customizable React Native date range picker component",
   "main": "index.js",
   "scripts": {
@@ -43,7 +43,6 @@
     "metro-react-native-babel-preset": "^0.66.0"
   },
   "dependencies": {
-    "moment": "^2.29.1",
-    "moment-range": "^4.0.2"
+    "moment": "^2.29.1"
   }
 }
diff --git a/screen.png b/screen.png
diff --git a/screen2.png b/screen2.png
diff --git a/src/Button.js b/src/Button.js
@@ -2,15 +2,15 @@ import React from "react";
 import { TouchableOpacity, Text, StyleSheet } from "react-native";
 
 export default ({ lable, onPress = () => {}, align, disabled = false }) => {
+  const textStyle = { textAlign: align, opacity: disabled ? 0.2 : 1 };
+
   return (
     <TouchableOpacity
       disabled={disabled}
       style={styles.buttonContainer}
       onPress={() => onPress()}
     >
-      <Text style={{ textAlign: align, opacity: disabled ? 0.2 : 1 }}>
-        {lable}
-      </Text>
+      <Text style={textStyle}>{lable}</Text>
     </TouchableOpacity>
   );
 };