react-persian-dates - npm Package Compare versions

Comparing version 1.0.0 to 1.0.1

package.json

 {
   "name": "react-persian-dates",
-  "version": "1.0.0",
+  "version": "1.0.1",
   "description": "Persian Datepicker for React, NO \"moment.js\" NEEDED!",
@@ -5,0 +5,0 @@ "repository": {

README.md

@@ -7,4 +7,4 @@ #  react-persian-dates
 
-Install Native-Dates using the following command:
+Install react-persian-dates using the following command:
 
 ``` npm install react-persian-dates --save```

src/Datepicker.js

 import React, {Component} from 'react';
-import {generateMonths,persianMonthsNames,persianWeekDayNames} from "./helper";
+import {generateMonths, getStatus, GtoJ, persianMonthsNames, persianWeekDayNames} from "./helper";
+import PropTypes from 'prop-types'
 import './Datepicker.css';
+import Month from "./Month";
 
@@ -9,8 +11,13 @@ export default class Datepicker extends Component {
 		startDate: new Date(),
-		type: 'persian'
+		type: 'persian',
+        monthsCount: 5,
 	}
 
+	static propTypes = {
+		onSelect: PropTypes.func
+	}
+
 	constructor(props) {
 		super(props);
-		let {selectFrom, selectTo, startDate, rangeSelect, type, monthIndex} = props;
+		let {selectFrom, selectTo, startDate, rangeSelect, type, monthsCount} = props;
 		if (rangeSelect) {
@@ -22,44 +29,70 @@ this.selectFrom = selectFrom;
 		}
-		let monthsCount = 4;
-		this.months = generateMonths(monthsCount, startDate,this.selectFrom,this.selectTo, type);
+		const to = (rangeSelect && (selectTo !== selectFrom)) ? selectTo : selectFrom;
 		this.state = {
-			months: this.months,
-			currentMonthIndex: monthIndex || 0
+			selectFrom: selectFrom,
+			selectTo: to,
+			months: generateMonths(monthsCount, startDate, selectFrom, to, type),
 		};
 	}
 
-	changeMonth = (type) => {
-		const {currentMonthIndex,months} = this.state;
-		if (type === 'prev' && currentMonthIndex !==0)
-			this.setState({ currentMonthIndex: currentMonthIndex-1 });
-		if (type === 'next' && currentMonthIndex < months.length-1)
-			this.setState({ currentMonthIndex: currentMonthIndex+1 });
+    changeSelection = (data) => {
+	    const { date } = data;
+        let { months, selectFrom, selectTo } = this.state;
+        const {rangeSelect} = this.props;
+        if (!selectFrom) {
+            selectFrom = date;
+        } else if (!selectTo) {
+            if (date > selectFrom) {
+                selectTo = date
+            } else {
+                selectFrom = date;
+            }
+        } else if (selectFrom && selectTo) {
+            selectFrom = date;
+            selectTo = null;
+        }
 
-	}
+        months = months.map((month) => {
+            return month.map((day) => {
+                return day.date ?{
+                    date: day.date,
+                    persianDate: GtoJ(day.date),
+                    status: getStatus(day.date, selectFrom, selectTo),
+                    disabled: day.disabled
+                } : {date: '', status: 'monthFirstDays'};
+            })
+        });
+        let to = null;
+        let from = null;
 
-	renderHeading = (date) => {
-		const {currentMonthIndex,months} = this.state;
-		return (
-			<div className="heading">
-				<button className="title">
-					{`${persianMonthsNames[date[1]-1]} ${date[0]}`}
-				</button>
-				<button
-					type="button"
-					title="ماه قبل"
-					className="prev"
-					onClick={() => this.changeMonth('prev')}
-					disabled={currentMonthIndex === 0}
-				><img src="../../assets/images/arrow.svg"/></button>
-				<button
-					type="button"
-					title="ماه بعد"
-					className="next"
-					disabled={currentMonthIndex+1 === months.length}
-					onClick={() => this.changeMonth('next')}
-				><img src="../../assets/images/arrow.svg"/></button>
-			</div>
-		);
-	}
+        if (rangeSelect) {
+            from = selectFrom;
+            to = selectTo;
+        } else {
+            from = to = selectFrom;
+        }
 
+
+        let dates = {};
+        if (rangeSelect && from && to)
+            dates = {
+                from,
+                to,
+                count: Math.floor((to - from) / (1000 * 24 * 60 * 60) + 1)
+            };
+        else
+            dates = {from, to: from, count: 0};
+
+        this.props.onSelect({
+            type: rangeSelect ? 'range' : 'single',
+            ...dates
+        });
+
+        this.setState({
+            months,
+            selectFrom: from,
+			selectTo: to,
+        });
+    }
+
 	renderWeekdays = () => {
@@ -73,61 +106,14 @@ return (
 
-	renderDay = (disabled, status, date, persianDate) => {
-		const {onSelect} = this.props;
-		const {currentMonthIndex} = this.state;
-		const today = new Date().toDateString();
-		if (status !== 'monthFirstDays'){
-			const day = date.getDate();
-			const month = date.getMonth()+1;
-			const year = date.getFullYear();
-			const correctMonth = month < 10 ? `0${month}` : month;
-			const correctDay = day < 10 ? `0${day}` : day;
-			const miladiDateString = `${year}-${correctMonth}-${correctDay}`;
-			const dateString = `${persianDate[2]} ${persianMonthsNames[persianDate[1]-1]}`;
-			const data = {date,persianDate,dateString,currentMonthIndex, miladiDateString};
-			const isToday = date.toDateString() === today;
-			const style = status === 'singleDate' ? "selected" : isToday ? "today" : null;
-			return (
-				<div className="dayWrapper">
-					<button
-						type="button"
-						className={style}
-						onClick={() => onSelect(data)}
-						disabled={disabled}
-					>
-						{persianDate[2]}
-					</button>
-				</div>
-			);
-		}
+	render() {
+		const {months} = this.state;
 		return (
-			<div className="dayWrapper">
-				<button
-					type="button"
-					disabled
-				/>
+			<div className="datepicker-container">
+                {this.renderWeekdays()}
+				{months.map((item,index) => {
+					const date = item[15].persianDate;
+					return <Month month={item} key={`month-${index}`} monthTitle={`${persianMonthsNames[date[1]-1]} ${date[0]}`} onSelect={this.changeSelection}/>
+				})}
 			</div>
-		);
+		)
 	}
-
-	renderMonth = (month) => {
-		return (
-			<div>
-				{this.renderHeading(month[15].persianDate)}
-				{this.renderWeekdays()}
-				<div className="dayPickerContainer">
-					{
-						month.map(day => this.renderDay(day.disabled, day.status, day.date, day.persianDate))
-					}
-				</div>
-			</div>
-		);
-	}
-
-	render({}, {months,currentMonthIndex}) {
-		return (
-			<div class="datepickerContainer">
-				{this.renderMonth(months[currentMonthIndex])}
-			</div>
-		);
-	}
 }

src/helper.js

@@ -132,8 +132,4 @@ /*eslint radix: ["error", "as-needed"]*/
 	startDate.setHours(0,0,0,0);
-	console.log('startDate: ',startDate);
 	monthStart.setHours(0,0,0,0);
-	console.log('monthStart: ',monthStart);
 	monthEnd.setHours(0,0,0,0);
-	console.log('monthEnd: ',monthEnd);
-	console.log('=====================');
 	if (
@@ -160,4 +156,4 @@ startDate <= monthEnd
 
-function getStatus(date, selectFrom, selectTo) {
-	if (selectFrom && !selectTo || selectFrom === selectTo)
+export function getStatus(date, selectFrom, selectTo) {
+	if ((selectFrom && !selectTo) || (selectFrom === selectTo))
 		if (selectFrom.toDateString() === date.toDateString()) {
@@ -164,0 +160,0 @@ return 'singleDate';

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

34059

increased by14.89%

Number of package files

13

increased by18.18%

Lines of code

472

increased by8.51%

No dependency changes