react-native-ethiopian-calendar-date-picker
Version:
A react native calendar component which is mainly intended for applications which require Ethiopian calendar.
262 lines (261 loc) • 9.32 kB
JavaScript
import React, { useState } from 'react';
import { Image, Text, TouchableOpacity, View, Modal } from 'react-native';
import { getDaysNameOfTheWeek, getMonthsName } from '../../../utils/locals';
import { makeStyle } from './style';
import { LocalsDropDown, SwitchMode } from '../../../commons/components';
export const Header = /*#__PURE__*/React.memo(props => {
const {
currentDay,
today,
prev,
next,
month,
setMonths,
year,
setYears,
locals = 'AMH',
mode,
theme,
onModeChange,
onLanguageChange,
hideHeaderButtons
} = props;
const styles = makeStyle(theme);
// Generate years based on the current start year
const getYears = yearStart => {
let start = yearStart <= 1000 ? 1000 : yearStart;
const years = [];
for (let i = 0; i < 20; i++) {
const value = start + i;
years.push(value);
}
return years;
};
const [showYearPicker, setShowYearPicker] = useState(false);
const [showMonthPicker, setShowMonthPicker] = useState(false);
const YearPicker = _ref => {
let {
initialYear,
onYearSelect
} = _ref;
const [currentStartYear, setCurrentStartYear] = useState(initialYear);
const years = getYears(currentStartYear);
const prev = () => {
setCurrentStartYear(prevYear => prevYear - 20);
};
const next = () => {
setCurrentStartYear(prevYear => prevYear + 20);
};
return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
style: styles.closeContainer
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: () => setShowYearPicker(false)
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../images/close-circle.png'),
style: {
width: 40,
height: 40
}
}))), /*#__PURE__*/React.createElement(View, {
style: styles.pickerContainer
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: prev,
style: styles.arrow
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../images/left_icon.png'),
style: styles.arrowImage
})), /*#__PURE__*/React.createElement(Text, {
style: [styles.titleText, {
marginTop: 5
}]
}, currentStartYear, " - ", currentStartYear + 19), /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: next,
style: styles.arrow
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../images/right_icon.png'),
style: styles.arrowImage
}))), /*#__PURE__*/React.createElement(View, {
style: styles.pickerItemContainer
}, years.map(year => /*#__PURE__*/React.createElement(View, {
key: year,
style: styles.pickedItem
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
style: styles.pickedItemContainer,
onPress: () => onYearSelect(year),
accessibilityLabel: `Select year ${year}`
}, /*#__PURE__*/React.createElement(Text, {
style: styles.titleText
}, year))))));
};
const MonthPicker = _ref2 => {
let {
initialYear,
onMonthSelect
} = _ref2;
const [currentStartYear, setCurrentStartYear] = useState(initialYear);
const prev = () => {
setCurrentStartYear(prevYear => prevYear - 1);
setYears(currentStartYear - 1);
};
const next = () => {
setCurrentStartYear(prevYear => prevYear + 1);
setYears(currentStartYear + 1);
};
return /*#__PURE__*/React.createElement(View, null, /*#__PURE__*/React.createElement(View, {
style: styles.closeContainer
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: () => setShowMonthPicker(false)
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../images/close-circle.png'),
style: {
width: 40,
height: 40
}
}))), /*#__PURE__*/React.createElement(View, {
style: styles.monthPicker
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: prev,
style: styles.arrow
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../images/left_icon.png'),
style: styles.arrowImage
})), /*#__PURE__*/React.createElement(TouchableOpacity, {
style: styles.dropDown,
onPress: () => setShowYearPicker(true)
}, /*#__PURE__*/React.createElement(Text, {
style: styles.titleText
}, currentStartYear), /*#__PURE__*/React.createElement(View, {
style: {
marginRight: 5
}
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../images/dropdown_down.png'),
style: styles.dropdownIconStyle
}))), /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: next,
style: styles.arrow
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../images/right_icon.png'),
style: styles.arrowImage
}))), /*#__PURE__*/React.createElement(View, {
style: styles.pickerItemContainer
}, getMonthsName({
locals,
mode
}).map((month, index) => /*#__PURE__*/React.createElement(View, {
key: index,
style: styles.pickedItem
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
style: styles.pickedItemContainer,
onPress: () => onMonthSelect(month, index),
accessibilityLabel: `Select year ${month}`
}, /*#__PURE__*/React.createElement(Text, {
style: styles.titleText
}, month))))));
};
return /*#__PURE__*/React.createElement(View, null, !hideHeaderButtons && /*#__PURE__*/React.createElement(View, {
style: styles.headerButtonsWrapper
}, /*#__PURE__*/React.createElement(SwitchMode, {
theme: theme,
mode: mode,
onModeChange: onModeChange
}), /*#__PURE__*/React.createElement(View, {
style: styles.todayButton
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: today,
activeOpacity: 0.9
}, /*#__PURE__*/React.createElement(Text, {
style: styles.todayText
}, currentDay))), mode === 'EC' && /*#__PURE__*/React.createElement(LocalsDropDown, {
theme: theme,
locals: locals,
onLanguageChange: onLanguageChange
})), /*#__PURE__*/React.createElement(View, {
style: styles.mainHeader
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: prev,
style: styles.arrow
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../images/left_icon.png'),
style: styles.arrowImage
})), /*#__PURE__*/React.createElement(View, {
style: styles.headerTitle
}, /*#__PURE__*/React.createElement(View, {
style: styles.dropDown
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: () => setShowMonthPicker(true),
style: {
flexDirection: 'row'
}
}, /*#__PURE__*/React.createElement(Text, {
style: styles.titleText
}, getMonthsName({
locals,
mode
})[month - 1]), /*#__PURE__*/React.createElement(View, {
style: styles.dropDownIconContainerStyle
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../images/dropdown_down.png'),
style: styles.dropdownIconStyle
})))), /*#__PURE__*/React.createElement(View, {
style: styles.space
}), /*#__PURE__*/React.createElement(View, {
style: styles.dropDown
}, /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: () => setShowYearPicker(true),
style: {
flexDirection: 'row'
}
}, /*#__PURE__*/React.createElement(Text, {
style: styles.titleText
}, year), /*#__PURE__*/React.createElement(View, {
style: styles.dropDownIconContainerStyle
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../images/dropdown_down.png'),
style: styles.dropdownIconStyle
}))))), /*#__PURE__*/React.createElement(TouchableOpacity, {
onPress: next,
style: styles.arrow
}, /*#__PURE__*/React.createElement(Image, {
source: require('../../images/right_icon.png'),
style: styles.arrowImage
}))), /*#__PURE__*/React.createElement(View, {
style: styles.daysHeader
}, getDaysNameOfTheWeek(locals).map((item, i) => /*#__PURE__*/React.createElement(Text, {
style: styles.dayText,
key: i,
numberOfLines: 1
}, item))), /*#__PURE__*/React.createElement(Modal, {
visible: showMonthPicker,
transparent: true,
animationType: "fade",
onRequestClose: () => setShowMonthPicker(false)
}, /*#__PURE__*/React.createElement(View, {
style: styles.modalContainer
}, /*#__PURE__*/React.createElement(View, {
style: styles.modalItemContainer
}, /*#__PURE__*/React.createElement(MonthPicker, {
initialYear: year,
onMonthSelect: (month, index) => {
console.log(month, index + 1);
setMonths(index + 1);
setShowMonthPicker(false);
}
})))), /*#__PURE__*/React.createElement(Modal, {
visible: showYearPicker,
transparent: true,
animationType: "fade",
onRequestClose: () => setShowYearPicker(false)
}, /*#__PURE__*/React.createElement(View, {
style: styles.modalContainer
}, /*#__PURE__*/React.createElement(View, {
style: styles.modalItemContainer
}, /*#__PURE__*/React.createElement(YearPicker, {
initialYear: year,
onYearSelect: year => {
setYears(year);
setShowYearPicker(false);
}
})))));
});
//# sourceMappingURL=index.js.map