quick-picker
Version:
A plug and Play picker for React Native
147 lines (146 loc) • 8.01 kB
JavaScript
var __extends = (this && this.__extends) || (function () {
var extendStatics = function (d, b) {
extendStatics = Object.setPrototypeOf ||
({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
function (d, b) { for (var p in b) if (Object.prototype.hasOwnProperty.call(b, p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
if (typeof b !== "function" && b !== null)
throw new TypeError("Class extends value " + String(b) + " is not a constructor or null");
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
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);
};
import * as React from 'react';
import { View, Animated, Text, StyleSheet, FlatList, TouchableOpacity } from 'react-native';
import DateTimePicker from '@react-native-community/datetimepicker';
import pickerStore, { ANIMATION_DURATION } from './PickerStore';
var ANDROID_SECONDARY_VARIANT = '#018786';
var AndroidPicker = /** @class */ (function (_super) {
__extends(AndroidPicker, _super);
function AndroidPicker() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isOpen: true,
opacity: new Animated.Value(0),
windowOpacity: new Animated.Value(0),
date: new Date(),
item: null,
};
_this._animateOpen = function () {
Animated.timing(_this.state.opacity, {
toValue: 0.4,
duration: ANIMATION_DURATION,
useNativeDriver: pickerStore.pickerOptions.useNativeDriver,
}).start();
Animated.timing(_this.state.windowOpacity, {
toValue: 1,
duration: ANIMATION_DURATION,
useNativeDriver: pickerStore.pickerOptions.useNativeDriver,
}).start();
};
_this._animateClose = function () {
Animated.timing(_this.state.opacity, {
toValue: 0,
duration: ANIMATION_DURATION,
useNativeDriver: pickerStore.pickerOptions.useNativeDriver,
}).start();
Animated.timing(_this.state.windowOpacity, {
toValue: 0,
duration: ANIMATION_DURATION,
useNativeDriver: pickerStore.pickerOptions.useNativeDriver,
}).start();
};
return _this;
}
AndroidPicker.prototype.componentDidMount = function () {
this.props.getRef(this);
this.setState({ date: this.props.date, item: this.props.item });
};
AndroidPicker.prototype.render = function () {
var _this = this;
var pickerOptions = pickerStore.pickerOptions;
var doneButtonText = pickerOptions.doneButtonText || 'Ok';
var cancelButtonText = pickerOptions.cancelButtonText || 'Cancel';
if (!this.state.isOpen) {
return null;
}
return pickerOptions.pickerType === 'normal' ? (React.createElement(View, { style: __assign({ flex: 1, position: 'absolute', justifyContent: 'center', alignItems: 'center', paddingHorizontal: '10%' }, StyleSheet.absoluteFillObject) },
React.createElement(TouchableOpacity, { style: __assign({ flex: 1, position: 'absolute' }, StyleSheet.absoluteFillObject), onPress: pickerOptions.onTapOut || this.props.onCancel },
React.createElement(Animated.View, { style: [
{
opacity: this.state.opacity,
flex: 1,
backgroundColor: 'black',
},
] })),
React.createElement(Animated.View, { style: [
{
backgroundColor: 'rgb(250,250,250)',
padding: 20,
minHeight: 270,
width: '100%',
borderRadius: 3,
opacity: this.state.windowOpacity,
shadowColor: '#000',
shadowOffset: {
width: 0,
height: 2,
},
shadowOpacity: 0.25,
shadowRadius: 3.84,
elevation: 5,
},
pickerOptions.androidModalStyle
? pickerOptions.androidModalStyle
: {},
] },
React.createElement(FlatList, { data: pickerOptions.items || [], style: { flex: 1 }, renderItem: function (_a) {
var item = _a.item;
return (React.createElement(RowItem, { style: pickerOptions.androidItemStyle, textStyle: pickerOptions.androidItemTextStyle, selectedStyle: pickerOptions.androidSelectedItemStyle, onPress: function () { return _this.setState({ item: item }); }, label: item.label, selected:
// @ts-ignore
_this.state.item ? item.value === _this.state.item.value : false }));
}, keyExtractor: function (item) { return String(item.value); } }),
React.createElement(View, { style: { alignSelf: 'flex-end', flexDirection: 'row' } },
React.createElement(AndroidButtonText, { text: cancelButtonText, onPress: pickerOptions.onTapOut || this.props.onCancel, style: { marginRight: 30 } }),
React.createElement(AndroidButtonText, { text: doneButtonText, onPress: function () { return _this.props.onChange(_this.state.item); } }))))) : (React.createElement(DateTimePicker, { value: this.state.date,
// @ts-ignore
mode: pickerOptions.mode || 'time', onChange: function (_, date) {
_this.setState({ isOpen: false }, function () { return _this.props.onChange(date); });
}, maximumDate: pickerOptions.maximumDate, minimumDate: pickerOptions.minimumDate, timeZoneOffsetInMinutes: pickerOptions.timeZoneOffsetInMinutes, locale: pickerOptions.locale,
// @ts-ignore
is24Hour: pickerOptions.is24Hour, minuteInterval: pickerOptions.minuteInterval }));
};
return AndroidPicker;
}(React.Component));
export default AndroidPicker;
var AndroidButtonText = function (_a) {
var text = _a.text, onPress = _a.onPress, style = _a.style, containerStyle = _a.containerStyle;
return (React.createElement(TouchableOpacity, { onPress: onPress, style: containerStyle },
React.createElement(Text, { style: [
{
color: ANDROID_SECONDARY_VARIANT,
fontSize: 17,
fontWeight: '400',
},
style,
] }, text)));
};
var RowItem = function (_a) {
var label = _a.label, selected = _a.selected, onPress = _a.onPress, _b = _a.style, style = _b === void 0 ? {} : _b, _c = _a.textStyle, textStyle = _c === void 0 ? {} : _c, _d = _a.selectedStyle, selectedStyle = _d === void 0 ? {} : _d;
return (React.createElement(AndroidButtonText, { text: label, style: __assign({ color: selected ? ANDROID_SECONDARY_VARIANT : '#616161' }, textStyle), onPress: onPress, containerStyle: selected
? __assign(__assign({ marginBottom: 15, height: 35, justifyContent: 'center', minWidth: 40 }, style), selectedStyle) : __assign({ marginBottom: 15, height: 35, justifyContent: 'center', minWidth: 40 }, style) }));
};