react-native-ethiopian-calendar-date-picker
Version:
A react native calendar component which is mainly intended for applications which require Ethiopian calendar.
271 lines (269 loc) • 12 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Header = void 0;
var _react = _interopRequireWildcard(require("react"));
var _reactNative = require("react-native");
var _locals = require("../../../utils/locals");
var _style = require("./style");
var _components = require("../../../commons/components");
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
const Header = /*#__PURE__*/_react.default.memo(props => {
const {
currentDay,
today,
prev,
next,
month,
setMonths,
year,
setYears,
locals = 'AMH',
mode,
theme,
onModeChange,
onLanguageChange,
hideHeaderButtons
} = props;
const styles = (0, _style.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] = (0, _react.useState)(false);
const [showMonthPicker, setShowMonthPicker] = (0, _react.useState)(false);
const YearPicker = _ref => {
let {
initialYear,
onYearSelect
} = _ref;
const [currentStartYear, setCurrentStartYear] = (0, _react.useState)(initialYear);
const years = getYears(currentStartYear);
const prev = () => {
setCurrentStartYear(prevYear => prevYear - 20);
};
const next = () => {
setCurrentStartYear(prevYear => prevYear + 20);
};
return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.closeContainer
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: () => setShowYearPicker(false)
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../images/close-circle.png'),
style: {
width: 40,
height: 40
}
}))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.pickerContainer
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: prev,
style: styles.arrow
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../images/left_icon.png'),
style: styles.arrowImage
})), /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: [styles.titleText, {
marginTop: 5
}]
}, currentStartYear, " - ", currentStartYear + 19), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: next,
style: styles.arrow
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../images/right_icon.png'),
style: styles.arrowImage
}))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.pickerItemContainer
}, years.map(year => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
key: year,
style: styles.pickedItem
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
style: styles.pickedItemContainer,
onPress: () => onYearSelect(year),
accessibilityLabel: `Select year ${year}`
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: styles.titleText
}, year))))));
};
const MonthPicker = _ref2 => {
let {
initialYear,
onMonthSelect
} = _ref2;
const [currentStartYear, setCurrentStartYear] = (0, _react.useState)(initialYear);
const prev = () => {
setCurrentStartYear(prevYear => prevYear - 1);
setYears(currentStartYear - 1);
};
const next = () => {
setCurrentStartYear(prevYear => prevYear + 1);
setYears(currentStartYear + 1);
};
return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.closeContainer
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: () => setShowMonthPicker(false)
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../images/close-circle.png'),
style: {
width: 40,
height: 40
}
}))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.monthPicker
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: prev,
style: styles.arrow
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../images/left_icon.png'),
style: styles.arrowImage
})), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
style: styles.dropDown,
onPress: () => setShowYearPicker(true)
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: styles.titleText
}, currentStartYear), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: {
marginRight: 5
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../images/dropdown_down.png'),
style: styles.dropdownIconStyle
}))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: next,
style: styles.arrow
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../images/right_icon.png'),
style: styles.arrowImage
}))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.pickerItemContainer
}, (0, _locals.getMonthsName)({
locals,
mode
}).map((month, index) => /*#__PURE__*/_react.default.createElement(_reactNative.View, {
key: index,
style: styles.pickedItem
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
style: styles.pickedItemContainer,
onPress: () => onMonthSelect(month, index),
accessibilityLabel: `Select year ${month}`
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: styles.titleText
}, month))))));
};
return /*#__PURE__*/_react.default.createElement(_reactNative.View, null, !hideHeaderButtons && /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.headerButtonsWrapper
}, /*#__PURE__*/_react.default.createElement(_components.SwitchMode, {
theme: theme,
mode: mode,
onModeChange: onModeChange
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.todayButton
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: today,
activeOpacity: 0.9
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: styles.todayText
}, currentDay))), mode === 'EC' && /*#__PURE__*/_react.default.createElement(_components.LocalsDropDown, {
theme: theme,
locals: locals,
onLanguageChange: onLanguageChange
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.mainHeader
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: prev,
style: styles.arrow
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../images/left_icon.png'),
style: styles.arrowImage
})), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.headerTitle
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.dropDown
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: () => setShowMonthPicker(true),
style: {
flexDirection: 'row'
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: styles.titleText
}, (0, _locals.getMonthsName)({
locals,
mode
})[month - 1]), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.dropDownIconContainerStyle
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../images/dropdown_down.png'),
style: styles.dropdownIconStyle
})))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.space
}), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.dropDown
}, /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: () => setShowYearPicker(true),
style: {
flexDirection: 'row'
}
}, /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: styles.titleText
}, year), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.dropDownIconContainerStyle
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../images/dropdown_down.png'),
style: styles.dropdownIconStyle
}))))), /*#__PURE__*/_react.default.createElement(_reactNative.TouchableOpacity, {
onPress: next,
style: styles.arrow
}, /*#__PURE__*/_react.default.createElement(_reactNative.Image, {
source: require('../../images/right_icon.png'),
style: styles.arrowImage
}))), /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.daysHeader
}, (0, _locals.getDaysNameOfTheWeek)(locals).map((item, i) => /*#__PURE__*/_react.default.createElement(_reactNative.Text, {
style: styles.dayText,
key: i,
numberOfLines: 1
}, item))), /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
visible: showMonthPicker,
transparent: true,
animationType: "fade",
onRequestClose: () => setShowMonthPicker(false)
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.modalContainer
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.modalItemContainer
}, /*#__PURE__*/_react.default.createElement(MonthPicker, {
initialYear: year,
onMonthSelect: (month, index) => {
console.log(month, index + 1);
setMonths(index + 1);
setShowMonthPicker(false);
}
})))), /*#__PURE__*/_react.default.createElement(_reactNative.Modal, {
visible: showYearPicker,
transparent: true,
animationType: "fade",
onRequestClose: () => setShowYearPicker(false)
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.modalContainer
}, /*#__PURE__*/_react.default.createElement(_reactNative.View, {
style: styles.modalItemContainer
}, /*#__PURE__*/_react.default.createElement(YearPicker, {
initialYear: year,
onYearSelect: year => {
setYears(year);
setShowYearPicker(false);
}
})))));
});
exports.Header = Header;
//# sourceMappingURL=index.js.map