react-native-flexi-datepicker
Version:
A highly customizable and flexible date picker component for React Native
146 lines (145 loc) • 4.24 kB
JavaScript
"use strict";
var __assign = (this && this.__assign) || function () {
__assign = Object.assign || function(t) {
for (var s, i = 1, n = arguments.length; i < n; i++) {
s = arguments[i];
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
t[p] = s[p];
}
return t;
};
return __assign.apply(this, arguments);
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.mergeStyles = exports.createStyles = void 0;
var react_native_1 = require("react-native");
var SCREEN_WIDTH = react_native_1.Dimensions.get("window").width;
var createStyles = function (colors) {
return react_native_1.StyleSheet.create({
modalOverlay: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(0, 0, 0, 0.5)",
},
datePickerContainer: {
backgroundColor: colors.background,
borderRadius: 8,
overflow: "hidden",
width: "90%",
maxWidth: 400,
},
headerContainer: {
padding: 16,
backgroundColor: colors.headerBackground,
},
yearSelector: {
alignSelf: "flex-start",
},
yearText: {
fontSize: 14,
color: colors.yearText,
},
dateText: {
fontSize: 28,
fontWeight: "bold",
color: colors.selectedText,
marginTop: 8,
},
yearPickerOverlay: {
flex: 1,
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(0, 0, 0, 0.4)",
},
yearPickerContainer: {
backgroundColor: colors.background,
borderRadius: 8,
width: SCREEN_WIDTH * 0.5,
maxWidth: 200,
height: 300,
overflow: "hidden",
},
yearItem: {
height: 52,
justifyContent: "center",
alignItems: "center",
},
selectedYearItem: {
backgroundColor: "rgba(0, 0, 0, 0.1)",
},
yearTextSelector: {
fontSize: 22,
color: colors.text,
},
selectedYearText: {
color: colors.primary,
fontWeight: "bold",
},
chevron: {
width: 12,
height: 12,
justifyContent: "center",
alignItems: "center",
},
chevronLeft: {
transform: [{ rotate: "180deg" }],
},
chevronInner: {
width: 8,
height: 8,
borderTopWidth: 2,
borderRightWidth: 2,
borderColor: colors.text,
transform: [{ rotate: "45deg" }],
},
monthYearSelectorContainer: {
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
padding: 16,
backgroundColor: colors.background,
},
monthYearText: {
fontSize: 18,
color: colors.monthYearText,
},
arrowButton: {
padding: 8,
zIndex: 1,
},
calendarContainer: {
flex: 1,
overflow: "hidden",
},
calendarWrapper: {
flex: 1,
},
buttonContainer: {
flexDirection: "row",
justifyContent: "flex-end",
padding: 16,
borderTopWidth: 1,
borderTopColor: "rgba(0, 0, 0, 0.1)",
},
button: {
padding: 8,
marginLeft: 8,
},
buttonText: {
color: colors.buttonText,
fontWeight: "bold",
},
});
};
exports.createStyles = createStyles;
var mergeStyles = function (baseStyles, customStyles) {
var mergedStyles = __assign({}, baseStyles);
for (var key in customStyles) {
if (Object.prototype.hasOwnProperty.call(customStyles, key)) {
mergedStyles[key] = __assign(__assign({}, mergedStyles[key]), customStyles[key]);
}
}
return mergedStyles;
};
exports.mergeStyles = mergeStyles;