initial commit

Author: HosseinShabani

.eslintrc.js

@@ -0,0 +1,4 @@
+module.exports = {
+  root: true,
+  extends: '@react-native-community',
+};

.gitignore

@@ -0,0 +1,11 @@
+# Logs
+*.log
+npm-debug.log
+
+# Runtime data
+tmp
+build
+dist
+
+# Dependency directory
+node_modules

.prettierrc.js

@@ -0,0 +1,7 @@
+module.exports = {
+  bracketSpacing: false,
+  jsxBracketSameLine: true,
+  singleQuote: true,
+  trailingComma: 'all',
+  printWidth: 100,
+};

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Hossein Shabani
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,3 @@
+# React Native Modern Datepicker 📆
+
+A customizable calendar, time & month picker for React Native (including Persian Jalaali calendar & locale). For more information, please visit [website](https://github.com/HosseinShabani/react-native-modern-datepicker)

package.json

@@ -0,0 +1,70 @@
+{
+  "name": "react-native-modern-datepicker",
+  "version": "1.0.0-beta.0",
+  "description": "A customizable calendar, time & month picker for React Native (including Persian Jalaali calendar & locale)",
+  "main": "src/index.js",
+  "scripts": {
+    "playground": "cd playground && react-native start"
+  },
+  "files": [
+    "src"
+  ],
+  "author": "Hossein Shabani",
+  "homepage": "https://github.com/HosseinShabani/react-native-modern-datepicker",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/HosseinShabani/react-native-modern-datepicker.git"
+  },
+  "bugs": {
+    "url": "https://github.com/HosseinShabani/react-native-modern-datepicker/issues"
+  },
+  "license": "MIT",
+  "keywords": [
+    "react",
+    "react-native",
+    "react-native-datepicker",
+    "datepicker",
+    "calendar",
+    "react-native-calendar",
+    "react-native-calendars",
+    "react-native-persian-calendar",
+    "react-native-jalaali-calendar",
+    "time-picker",
+    "react-native-time-picker",
+    "month-picker",
+    "react-native-month-picker",
+    "persian",
+    "jalaali",
+    "react-native-jalaali",
+    "persian-calendar",
+    "customizable-datepicker"
+  ],
+  "dependencies": {
+    "moment-jalaali": "^0.8.3",
+    "prop-types": "^15.7.2"
+  },
+  "peerDependencies": {
+    "react-native": ">=0.59"
+  },
+  "devDependencies": {
+    "husky": ">=1",
+    "lint-staged": ">=8",
+    "prettier": "^1.18.2",
+    "@babel/core": "^7.5.5",
+    "@babel/runtime": "^7.5.5",
+    "@react-native-community/eslint-config": "^0.0.5",
+    "eslint": "^6.3.0",
+    "metro-react-native-babel-preset": "^0.56.0"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "lint-staged"
+    }
+  },
+  "lint-staged": {
+    "*.js": [
+      "eslint --fix",
+      "git add"
+    ]
+  }
+}

src/assets/IRANYekanMobileBold.ttf

@@ -0,0 +1,160 @@
+import React, {createContext, useReducer, useContext, useState} from 'react';
+import {View, StyleSheet} from 'react-native';
+import PropTypes from 'prop-types';
+
+import {Calendar, SelectMonth, SelectTime} from './components';
+import {utils} from '../utils';
+
+const options = {
+  backgroundColor: '#fff',
+  textHeaderColor: '#212c35',
+  textDefaultColor: '#2d4150',
+  selectedTextColor: '#fff',
+  mainColor: '#0eca2d',
+  textSecondaryColor: '#7a92a5',
+  borderColor: 'rgba(122, 146, 165, 0.1)',
+  defaultFont: 'System',
+  headerFont: 'System',
+  textFontSize: 15,
+  textHeaderFontSize: 17,
+  headerAnimationDistance: 50,
+  daysAnimationDistance: 200,
+};
+
+const reducer = (state, action) => {
+  switch (action.type) {
+    case 'set':
+      return {...state, ...action};
+    case 'toggleMonth':
+      return {...state, monthOpen: !state.monthOpen};
+    case 'toggleTime':
+      return {...state, timeOpen: !state.timeOpen};
+    default:
+      throw new Error('Unexpected action');
+  }
+};
+
+const CalendarContext = createContext();
+
+const useCalendar = () => {
+  const contextValue = useContext(CalendarContext);
+  return contextValue;
+};
+
+const DatePicker = props => {
+  const calendarUtils = new utils(props);
+  const contextValue = {
+    ...props,
+    options: {...options, ...props.options},
+    utils: calendarUtils,
+    state: useReducer(reducer, {
+      activeDate: props.current || calendarUtils.getToday(),
+      selectedDate: '',
+      monthOpen: props.mode === 'monthYear',
+      timeOpen: props.mode === 'time',
+    }),
+  };
+  const [minHeight, setMinHeight] = useState(0);
+  const style = styles(contextValue.options);
+
+  const renderBody = () => {
+    switch (contextValue.mode) {
+      default:
+      case 'datepicker':
+        return (
+          <React.Fragment>
+            <Calendar />
+            <SelectMonth />
+            <SelectTime />
+          </React.Fragment>
+        );
+      case 'calendar':
+        return (
+          <React.Fragment>
+            <Calendar />
+            <SelectMonth />
+          </React.Fragment>
+        );
+      case 'monthYear':
+        return <SelectMonth />;
+      case 'time':
+        return <SelectTime />;
+    }
+  };
+
+  return (
+    <CalendarContext.Provider value={contextValue}>
+      <View
+        style={[style.container, {minHeight}, props.style]}
+        onLayout={({nativeEvent}) => setMinHeight(nativeEvent.layout.width * 0.9 + 50)}>
+        {renderBody()}
+      </View>
+    </CalendarContext.Provider>
+  );
+};
+
+const styles = theme =>
+  StyleSheet.create({
+    container: {
+      backgroundColor: theme.backgroundColor,
+      position: 'relative',
+      width: '100%',
+      overflow: 'hidden',
+    },
+  });
+
+const optionsShape = {
+  backgroundColor: PropTypes.string,
+  textHeaderColor: PropTypes.string,
+  textDefaultColor: PropTypes.string,
+  selectedTextColor: PropTypes.string,
+  mainColor: PropTypes.string,
+  textSecondaryColor: PropTypes.string,
+  borderColor: PropTypes.string,
+  defaultFont: PropTypes.string,
+  headerFont: PropTypes.string,
+  textFontSize: PropTypes.number,
+  textHeaderFontSize: PropTypes.number,
+  headerAnimationDistance: PropTypes.number,
+  daysAnimationDistance: PropTypes.number,
+};
+const modeArray = ['datepicker', 'calendar', 'monthYear', 'time'];
+const minuteIntervalArray = [1, 2, 3, 4, 5, 6, 10, 12, 15, 20, 30, 60];
+
+DatePicker.defaultProps = {
+  onSelectedChange: () => null,
+  onMonthYearChange: () => null,
+  onTimeChange: () => null,
+  onDateChange: () => null,
+  current: '',
+  minimumDate: '',
+  maximumDate: '',
+  selectorStartingYear: 0,
+  selectorEndingYear: 3000,
+  disableDateChange: false,
+  isGregorian: true,
+  options: {},
+  mode: 'datepicker',
+  minuteInterval: 5,
+  style: {},
+};
+
+DatePicker.propTypes = {
+  onSelectedChange: PropTypes.func,
+  onMonthYearChange: PropTypes.func,
+  onTimeChange: PropTypes.func,
+  onDateChange: PropTypes.func,
+  current: PropTypes.string,
+  minimumDate: PropTypes.string,
+  maximumDate: PropTypes.string,
+  selectorStartingYear: PropTypes.number,
+  selectorEndingYear: PropTypes.number,
+  disableDateChange: PropTypes.bool,
+  isGregorian: PropTypes.bool,
+  options: PropTypes.shape(optionsShape),
+  mode: PropTypes.oneOf(modeArray),
+  minuteInterval: PropTypes.oneOf(minuteIntervalArray),
+  style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
+};
+
+export {DatePicker, CalendarContext, useCalendar};

src/assets/IRANYekanMobileRegular.ttf

@@ -0,0 +1,77 @@
+import React, {useEffect} from 'react';
+import {View, StyleSheet, Text, Animated} from 'react-native';
+
+import {Header, Days} from '.';
+import {useCalendar} from '../DatePicker';
+
+const Calendar = () => {
+  const {options, state, utils, onSelectedChange} = useCalendar();
+  const [mainState] = state;
+  const style = styles(options);
+  const [{shownAnimation}, changeMonthAnimation] = utils.useMonthAnimation(
+    mainState.activeDate,
+    options.daysAnimationDistance,
+  );
+
+  useEffect(() => {
+    mainState.selectedDate && onSelectedChange(mainState.selectedDate);
+  }, [mainState.selectedDate, onSelectedChange]);
+
+  return (
+    <View style={style.container}>
+      <Header changeMonth={changeMonthAnimation} />
+      <View style={style.daysName}>
+        {utils.config.dayNamesShort.map(item => (
+          <Text key={item} style={style.daysNameText}>
+            {item}
+          </Text>
+        ))}
+      </View>
+      <View style={style.daysContainer}>
+        <Animated.View style={[style.days, shownAnimation]}>
+          <Days />
+        </Animated.View>
+      </View>
+    </View>
+  );
+};
+
+const styles = theme =>
+  StyleSheet.create({
+    container: {
+      flexDirection: 'column',
+      flex: 1,
+    },
+    daysName: {
+      paddingBottom: 10,
+      marginBottom: 0,
+      alignItems: 'center',
+      flexDirection: 'row-reverse',
+      justifyContent: 'space-around',
+      borderBottomColor: theme.borderColor,
+      borderBottomWidth: 1,
+      marginHorizontal: 15,
+    },
+    daysNameText: {
+      fontFamily: theme.defaultFont,
+      color: theme.textSecondaryColor,
+      fontSize: theme.textFontSize,
+    },
+    daysContainer: {
+      flex: 1,
+      position: 'relative',
+      overflow: 'hidden',
+      margin: 15,
+      marginTop: 5,
+      marginBottom: 0,
+    },
+    days: {
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      top: 0,
+      right: 0,
+    },
+  });
+
+export {Calendar};