react-native-timer-picker
Version:
A simple, flexible, performant duration picker for React Native apps 🔥 Great for timers, alarms and duration inputs ⏰🕰️⏳ Includes iOS-style haptic and audio feedback 🍏
121 lines (118 loc) • 6.68 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.generateStyles = void 0;
var _reactNative = require("react-native");
const DARK_MODE_BACKGROUND_COLOR = "#232323";
const DARK_MODE_TEXT_COLOR = "#E9E9E9";
const LIGHT_MODE_BACKGROUND_COLOR = "#F1F1F1";
const LIGHT_MODE_TEXT_COLOR = "#1B1B1B";
const generateStyles = customStyles => {
var _customStyles$pickerL, _customStyles$text, _customStyles$pickerA, _customStyles$pickerL2, _customStyles$text2, _customStyles$pickerI, _customStyles$text3;
const backgroundColor = (customStyles === null || customStyles === void 0 ? void 0 : customStyles.backgroundColor) ?? ((customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark" ? DARK_MODE_BACKGROUND_COLOR : LIGHT_MODE_BACKGROUND_COLOR);
const textColor = (customStyles === null || customStyles === void 0 ? void 0 : customStyles.theme) === "dark" ? DARK_MODE_TEXT_COLOR : LIGHT_MODE_TEXT_COLOR;
const pickerLabelFontSize = (customStyles === null || customStyles === void 0 || (_customStyles$pickerL = customStyles.pickerLabel) === null || _customStyles$pickerL === void 0 ? void 0 : _customStyles$pickerL.fontSize) ?? (customStyles === null || customStyles === void 0 || (_customStyles$text = customStyles.text) === null || _customStyles$text === void 0 ? void 0 : _customStyles$text.fontSize) ?? 18;
const pickerAmPmFontSize = (customStyles === null || customStyles === void 0 || (_customStyles$pickerA = customStyles.pickerAmPmLabel) === null || _customStyles$pickerA === void 0 ? void 0 : _customStyles$pickerA.fontSize) ?? (customStyles === null || customStyles === void 0 || (_customStyles$pickerL2 = customStyles.pickerLabel) === null || _customStyles$pickerL2 === void 0 ? void 0 : _customStyles$pickerL2.fontSize) ?? (customStyles === null || customStyles === void 0 || (_customStyles$text2 = customStyles.text) === null || _customStyles$text2 === void 0 ? void 0 : _customStyles$text2.fontSize) ?? 18;
const pickerItemFontSize = (customStyles === null || customStyles === void 0 || (_customStyles$pickerI = customStyles.pickerItem) === null || _customStyles$pickerI === void 0 ? void 0 : _customStyles$pickerI.fontSize) ?? (customStyles === null || customStyles === void 0 || (_customStyles$text3 = customStyles.text) === null || _customStyles$text3 === void 0 ? void 0 : _customStyles$text3.fontSize) ?? 25;
// This offset makes the picker label appear to be aligned with the picker item
// despite them having different font sizes
const pickerLabelVerticalOffset = pickerItemFontSize - pickerLabelFontSize - 1;
const pickerAmPmVerticalOffset = pickerItemFontSize - pickerAmPmFontSize - 1;
// The label is absolutely positioned, so we need to offset it for it to appear
// in the correct position. We offset it to the left of the container so that
// the width of the label doesn't impact its position.
const extraLabelOffsetPercentage = (customStyles === null || customStyles === void 0 ? void 0 : customStyles.labelOffsetPercentage) ?? 8;
const baseLeftOffsetPercentage = 70;
const labelOffsetPercentage = baseLeftOffsetPercentage + extraLabelOffsetPercentage;
return _reactNative.StyleSheet.create({
pickerContainer: {
flexDirection: "row",
backgroundColor,
width: "100%",
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerContainer)
},
pickerLabelContainer: {
position: "absolute",
top: 0,
bottom: 0,
left: `${labelOffsetPercentage}%`,
justifyContent: "center",
marginTop: pickerLabelVerticalOffset,
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerLabelContainer)
},
pickerLabel: {
fontSize: 18,
fontWeight: "bold",
color: textColor,
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.text),
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerLabel)
},
pickerItemContainer: {
flexDirection: "row",
height: 50,
justifyContent: "center",
alignItems: "center",
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItemContainer)
},
pickerItem: {
textAlignVertical: "center",
fontSize: 25,
overflow: "visible",
color: textColor,
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.text),
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerItem)
},
pickerAmPmContainer: {
position: "absolute",
top: 0,
bottom: 0,
left: `${labelOffsetPercentage}%`,
justifyContent: "center",
marginTop: pickerAmPmVerticalOffset,
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerLabelContainer),
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerAmPmContainer)
},
pickerAmPmLabel: {
fontSize: 18,
fontWeight: "bold",
color: textColor,
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.text),
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerLabel),
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerAmPmLabel)
},
disabledPickerContainer: {
opacity: 0.4,
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.disabledPickerContainer)
},
disabledPickerItem: {
opacity: 0.2,
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.disabledPickerItem)
},
maskedView: {
flex: 1
},
pickerGradientOverlay: {
position: "absolute",
width: "100%",
height: "100%",
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.pickerGradientOverlay)
},
durationScrollFlatListContainer: {
flex: 1,
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.durationScrollFlatListContainer)
},
durationScrollFlatList: {
// These paddings allow the inner am/pm label to
// spill out of the flatlist
paddingRight: "25%",
marginRight: "-25%",
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.durationScrollFlatList)
},
durationScrollFlatListContentContainer: {
...(customStyles === null || customStyles === void 0 ? void 0 : customStyles.durationScrollFlatListContentContainer)
}
});
};
exports.generateStyles = generateStyles;
//# sourceMappingURL=styles.js.map