react-native-simple-time-picker
Version:
<!-- prettier-ignore --> | iOS | Android | | --- | --- | | <img src="./screenshots/iOS.png" width="300" /> | <img src="./screenshots/Android.png" width="300" /> |
141 lines (138 loc) • 7.18 kB
JavaScript
;
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
Object.defineProperty(o, k2, { enumerable: true, get: function() { return m[k]; } });
}) : (function(o, m, k, k2) {
if (k2 === undefined) k2 = k;
o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
__setModuleDefault(result, mod);
return result;
};
var __rest = (this && this.__rest) || function (s, e) {
var t = {};
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
t[p] = s[p];
if (s != null && typeof Object.getOwnPropertySymbols === "function")
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
t[p[i]] = s[p[i]];
}
return t;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.TimePicker = void 0;
const React = __importStar(require("react"));
const react_native_1 = require("react-native");
const picker_1 = require("@react-native-picker/picker");
const zeroPad_1 = require("./utils/zeroPad");
const utils_1 = require("@react-stately/utils");
const MAX_MINUTES = 59;
const MAX_SECONDS = 59;
function TimePicker(_a) {
var { defaultValue, value, onChange = () => { }, hoursUnit, minutesUnit, secondsUnit, zeroPadding = false, textColor = '', hoursInterval = 1, minutesInterval = 1, secondsInterval = 1, pickerShows = ['hours', 'minutes'], emptyLabel, isAmpm, ampmLocalization = {
am: 'am',
pm: 'pm',
} } = _a, others = __rest(_a, ["defaultValue", "value", "onChange", "hoursUnit", "minutesUnit", "secondsUnit", "zeroPadding", "textColor", "hoursInterval", "minutesInterval", "secondsInterval", "pickerShows", "emptyLabel", "isAmpm", "ampmLocalization"]);
let MAX_HOURS = 23;
let MIN_HOURS = 0;
if (isAmpm) {
MAX_HOURS = 12;
MIN_HOURS = 1;
}
if (hoursInterval > MAX_HOURS ||
minutesInterval > MAX_MINUTES ||
secondsInterval > MAX_SECONDS) {
throw new Error('value of hoursInterval, minutesInterval or secondsInterval is invalid.');
}
const [internalValue, setInternalValue] = (0, utils_1.useControlledState)(value, Object.assign({ hours: 1, minutes: 0, seconds: 0 }, defaultValue), onChange);
const getLabel = (i, unit) => {
const numString = zeroPadding ? (0, zeroPad_1.zeroPad)(i) : i.toString();
return `${numString} ${unit !== null && unit !== void 0 ? unit : ''}`;
};
const getHoursItems = () => {
const items = [];
if (!pickerShows.includes('hours')) {
return items;
}
if (emptyLabel != null) {
items.push(<picker_1.Picker.Item testID="hoursItem" key="nullHoursItem" value="" label={emptyLabel} color={textColor}/>);
}
for (let i = MIN_HOURS; i <= MAX_HOURS; i += hoursInterval) {
items.push(<picker_1.Picker.Item testID="hoursItem" key={i} value={i} label={getLabel(i, hoursUnit)} color={textColor}/>);
}
return items;
};
const getMinutesItems = () => {
const items = [];
if (!pickerShows.includes('minutes')) {
return items;
}
if (emptyLabel != null) {
items.push(<picker_1.Picker.Item testID="minutesItem" key="nullMinutesItem" value="" label={emptyLabel} color={textColor}/>);
}
for (let i = 0; i <= MAX_MINUTES; i += minutesInterval) {
items.push(<picker_1.Picker.Item testID="minutesItem" key={i} value={i} label={getLabel(i, minutesUnit)} color={textColor}/>);
}
return items;
};
const getSecondsItems = () => {
const items = [];
if (!pickerShows.includes('seconds')) {
return items;
}
if (emptyLabel != null) {
items.push(<picker_1.Picker.Item testID="secondsItem" key="nullSecondsItem" value="" label={emptyLabel} color={textColor}/>);
}
for (let i = 0; i <= MAX_SECONDS; i += secondsInterval) {
items.push(<picker_1.Picker.Item testID="secondsItem" key={i} value={i} label={getLabel(i, secondsUnit)} color={textColor}/>);
}
return items;
};
const handleChangeHours = React.useCallback((hours) => {
setInternalValue((prev) => (Object.assign(Object.assign({}, prev), { hours })));
}, [setInternalValue]);
const handleChangeMinutes = React.useCallback((minutes) => {
setInternalValue((prev) => (Object.assign(Object.assign({}, prev), { minutes })));
}, [setInternalValue]);
const handleChangeSeconds = React.useCallback((seconds) => {
setInternalValue((prev) => (Object.assign(Object.assign({}, prev), { seconds })));
}, [setInternalValue]);
const handleChangeAmpm = React.useCallback((ampm) => {
setInternalValue((prev) => (Object.assign(Object.assign({}, prev), { ampm })));
}, [setInternalValue]);
return (<react_native_1.View style={styles.container}>
{pickerShows.includes('hours') && (<picker_1.Picker {...others} testID="hoursPicker" style={styles.picker} selectedValue={internalValue === null || internalValue === void 0 ? void 0 : internalValue.hours} onValueChange={handleChangeHours}>
{getHoursItems()}
</picker_1.Picker>)}
{pickerShows.includes('minutes') && (<picker_1.Picker {...others} testID="minutesPicker" style={styles.picker} selectedValue={internalValue === null || internalValue === void 0 ? void 0 : internalValue.minutes} onValueChange={handleChangeMinutes}>
{getMinutesItems()}
</picker_1.Picker>)}
{pickerShows.includes('seconds') && (<picker_1.Picker {...others} testID="secondsPicker" style={styles.picker} selectedValue={internalValue === null || internalValue === void 0 ? void 0 : internalValue.seconds} onValueChange={handleChangeSeconds}>
{getSecondsItems()}
</picker_1.Picker>)}
{isAmpm && (<picker_1.Picker {...others} testID="ampmPicker" style={styles.picker} selectedValue={internalValue === null || internalValue === void 0 ? void 0 : internalValue.ampm} onValueChange={handleChangeAmpm}>
<picker_1.Picker.Item testID="amItem" value="am" label={ampmLocalization.am} color={textColor}/>
<picker_1.Picker.Item testID="pmItem" value="pm" label={ampmLocalization.pm} color={textColor}/>
</picker_1.Picker>)}
</react_native_1.View>);
}
exports.TimePicker = TimePicker;
const styles = react_native_1.StyleSheet.create({
container: {
flexDirection: 'row',
},
picker: {
flex: 1,
},
});
//# sourceMappingURL=TimePicker.js.map