react-native-nepali-picker
Version:
Minimalist and modern Nepali-date picker with customization.🌟
431 lines (427 loc) • 15.5 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.default = void 0;
var _react = require("react");
var _reactNative = require("react-native");
var _DateSync = _interopRequireDefault(require("./assets/DateSync.js"));
var _Icons = require("./assets/Icons.js");
var _Triangle = _interopRequireDefault(require("./assets/Triangle.js"));
var _config = require("./calendar/config.js");
var _functions = require("./calendar/functions.js");
var _settings = require("./calendar/settings.js");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const CalendarPicker = ({
visible,
onClose,
theme = 'light',
onDateSelect,
language = 'np',
initialDate = (0, _functions.NepaliToday)(),
brandColor = '#2081b9',
titleTextStyle = {
fontSize: 20,
fontWeight: 'bold'
},
weekTextStyle = {
fontSize: 15,
fontWeight: 'bold'
},
dayTextStyle = {
fontSize: 15,
fontWeight: '600'
}
}) => {
const value = (0, _functions.validateDate)(initialDate);
console.log('the initial date is ', initialDate);
const [TodayNepaliDate, setTodayNepaliDate] = (0, _react.useState)(initialDate);
const cYear = parseInt(TodayNepaliDate.split('-')[0], 10);
const cMonth = parseInt(TodayNepaliDate.split('-')[1], 10);
const cDay = parseInt(TodayNepaliDate.split('-')[2], 10);
const [firstDayOfMonth, setFirstDayOfMonth] = (0, _react.useState)(0);
const [month, setMonth] = (0, _react.useState)(cMonth);
const [year, setYear] = (0, _react.useState)(cYear);
const [calendarDate, setCalendarDate] = (0, _react.useState)([]);
const [yearModal, setYearModal] = (0, _react.useState)(false);
const syncToday = () => {
setMonth(cMonth);
setYear(cYear);
};
const handleDateClick = day => {
const date = `${year}-${month.toString().padStart(2, '0')}-${day.toString().padStart(2, '0')}`;
setTodayNepaliDate(date);
onDateSelect(date);
onClose();
};
(0, _react.useEffect)(() => {
setTodayNepaliDate(initialDate);
}, [initialDate]);
//Handle Next Month Click
const handleNextClick = () => {
if (month === 12) {
if (year < 2099) {
setYear(prev => prev + 1);
setMonth(1);
}
} else {
setMonth(prev => prev + 1);
}
};
//Handle Previous Month Click
const handlePreviousClick = () => {
if (month === 1) {
if (year > 2000) {
setYear(prev => prev - 1);
setMonth(12);
}
} else {
setMonth(prev => prev - 1);
}
};
const openYearView = () => {
setYearModal(true);
};
const closeYearView = () => {
setYearModal(false);
};
(0, _react.useEffect)(() => {
// calculate First Day Of Month (FDOM) and Days In Month(DIM)
const FDOM = (0, _settings.calcFirstDay)(year, month);
const DIM = _config.bs[year][month];
setFirstDayOfMonth(FDOM);
// array which contain 42 cells and it only fill the date with number if the date is present otherwise it fill cells with null.
const calendarCells = Array.from({
length: 42
}, (_, index) => {
const dayNumber = index - FDOM + 1;
if (dayNumber > 0 && dayNumber <= DIM) {
return dayNumber;
} else {
return null;
}
});
setCalendarDate(calendarCells);
}, [year, month, initialDate]);
const handleYearClick = y => {
setYear(y);
closeYearView();
};
const dark = theme === 'dark';
const weekDays = language === 'en' ? _config.daysInEnglish : _config.daysInNepali;
if (value !== true) {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
visible: visible,
onRequestClose: onClose,
transparent: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
style: styles.outerPressable,
onPress: onClose,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
onPress: () => {},
style: styles.innerPressable,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: {
...styles.innerView,
minHeight: '40%',
minWidth: '90%',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: dark ? '#383838' : '#ffffff'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: {
color: dark ? 'white' : 'black',
fontWeight: '600',
paddingHorizontal: 10,
paddingVertical: 10
},
children: "Unsupported date range on initialDate"
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: {
color: dark ? 'white' : 'black',
paddingHorizontal: 10
},
children: value
})]
})
})
})
});
}
return /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Modal, {
visible: visible,
onRequestClose: onClose,
transparent: true,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
style: styles.outerPressable,
onPress: onClose,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
onPress: () => {},
style: styles.innerPressable,
children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: {
...styles.innerView,
backgroundColor: dark ? '#383838' : '#ffffff'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: {
color: dark ? 'white' : 'black',
paddingHorizontal: 10
},
children: language === 'np' ? 'आजको मिति ' : "Today's Date"
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: {
display: 'flex',
flexDirection: 'row',
justifyContent: 'space-between',
paddingHorizontal: 10,
marginBottom: 20,
alignItems: 'center'
},
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
onPress: syncToday,
children: language == 'np' ? /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: {
...titleTextStyle,
color: dark ? '#fff' : '#000'
},
children: [(0, _config.getNepaliNumber)(cYear), " ", _config.monthsInNepali[cMonth - 1], ' ', " ", (0, _config.getNepaliNumber)(cDay)]
}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.Text, {
style: {
...titleTextStyle,
color: dark ? '#fff' : '#000'
},
children: [cYear, " ", _config.monthsInEnglish[cMonth - 1], ' ', " ", cDay]
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
onPress: syncToday,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_DateSync.default, {
day: cDay,
color: dark ? '#ffff' : '#000'
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.ButtonContainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.CButton,
onPress: handlePreviousClick,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ChevronIcon, {
direction: "right",
color: dark ? 'white' : 'black'
})
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.TouchableOpacity, {
style: {
flexDirection: 'row',
alignItems: 'center'
},
onPress: openYearView,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: {
...titleTextStyle,
marginRight: 6,
color: dark ? 'white' : 'black'
},
children: language === 'np' ? _config.monthsInNepali[month - 1] : _config.monthsInEnglish[month - 1]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: {
...titleTextStyle,
marginRight: 10,
color: dark ? 'white' : 'black'
},
children: language === 'np' ? (0, _config.getNepaliNumber)(year) : year
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Triangle.default, {
height: 10,
width: 13,
color: dark ? 'white' : 'black'
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.CButton,
onPress: handleNextClick,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icons.ChevronIcon, {
direction: "left",
color: dark ? 'white' : 'black'
})
})]
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(_reactNative.View, {
style: styles.outerDateConainer,
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.weekContainer,
children: weekDays.map((item, index) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.WeekItem,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: {
...weekTextStyle,
color: dark ? 'white' : 'black'
},
children: item
})
}, index);
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: styles.datesContainer,
children: calendarDate.map((dayItem, index) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
style: styles.dateItem,
onPress:
//execute on day item press, Only execute when dayItem is not null
dayItem ? () => handleDateClick(dayItem) : () => {},
children: dayItem ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
paddingHorizontal: 6,
paddingVertical: 3,
borderRadius: 999,
//check if the date is today or not and apply conditional styling.
backgroundColor: (0, _settings.isToday)(TodayNepaliDate, index, year, month, firstDayOfMonth) ? brandColor : dark ? '#383838' : '#fff'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: {
...dayTextStyle,
color: (0, _settings.isToday)(TodayNepaliDate, index, year, month, firstDayOfMonth) ? '#fff' : dark ? 'white' : 'black'
},
children: language === 'np' ? (0, _config.getNepaliNumber)(dayItem) : dayItem
})
}) : null
}, index);
})
})]
})]
})
})
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Modal, {
visible: yearModal,
onRequestClose: closeYearView,
transparent: true,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
style: styles.outerPressable,
onPress: () => closeYearView(),
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Pressable, {
style: styles.YearInnerPressable,
onPress: () => {},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.View, {
style: {
...styles.InnerYearView,
backgroundColor: dark ? '#383838' : '#f2f2f2'
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.ScrollView, {
showsVerticalScrollIndicator: false,
contentContainerStyle: {
display: 'flex',
paddingVertical: 10,
flexDirection: 'row',
justifyContent: 'center',
flexWrap: 'wrap'
},
children: Array(100).fill(0).map((_, index) => {
return /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.TouchableOpacity, {
onPress: () => handleYearClick(index + 2000),
style: {
paddingHorizontal: 20,
paddingVertical: 6,
marginHorizontal: 4,
marginVertical: 4,
borderColor: dark ? 'white' : 'black',
borderRadius: 20,
backgroundColor: index + 2000 === year ? brandColor : '',
borderWidth: 0.4
},
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactNative.Text, {
style: {
fontWeight: '500',
color: index + 2000 === year ? 'white' : dark ? 'white' : 'black'
},
children: language === 'np' ? (0, _config.getNepaliNumber)(index + 2000) : index + 2000
})
}, index);
})
})
})
})
})
})]
});
};
const styles = _reactNative.StyleSheet.create({
outerPressable: {
height: '100%',
justifyContent: 'center',
width: '100%',
alignItems: 'center',
backgroundColor: 'rgba(0,0,0,0.54)'
},
innerPressable: {
minHeight: '20%',
maxWidth: 500,
marginHorizontal: 30
},
innerView: {
borderRadius: 20,
backgroundColor: '#f2f2f2',
padding: 10
},
weekContainer: {
flexDirection: 'row',
width: '100%'
},
WeekItem: {
width: '14.28%',
alignItems: 'center',
paddingVertical: 18
},
//WeekText: {
// fontWeight: 'bold',
// fontSize: 14,
// color: 'black',
//},
datesContainer: {
flexDirection: 'row',
flexWrap: 'wrap'
},
dateItem: {
overflow: 'hidden',
width: '14.28%',
justifyContent: 'center',
alignItems: 'center',
paddingVertical: 10
},
//DayText: {
// fontSize: 14,
// fontWeight: '600',
//},
CButton: {
paddingHorizontal: 20,
paddingVertical: 10
},
ButtonContainer: {
alignItems: 'center',
flexDirection: 'row',
marginBottom: 10,
justifyContent: 'space-between'
},
outerDateConainer: {
paddingHorizontal: 3
},
//TitleText: {
// fontSize: 20,
// fontWeight: 'bold',
//},
// for year view modal
YearInnerPressable: {
justifyContent: 'center',
maxWidth: 500,
maxHeight: '70%',
marginHorizontal: 30
},
InnerYearView: {
borderRadius: 20,
backgroundColor: '#f2f2f2',
minHeight: 50,
maxHeight: '100%'
}
});
var _default = exports.default = CalendarPicker;
//# sourceMappingURL=CalendarPicker.js.map