quick-picker
Version:
A plug and Play picker for React Native
142 lines (141 loc) • 6.25 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, StyleSheet, Platform } from 'react-native';
import Touchable from '@appandflow/touchable';
import pickerStore, { ANIMATION_DURATION, } from './PickerStore';
import IosPicker from './IosPicker';
import AndroidPicker from './AndroidPicker';
var QuickPicker = /** @class */ (function (_super) {
__extends(QuickPicker, _super);
function QuickPicker() {
var _this = _super !== null && _super.apply(this, arguments) || this;
_this.state = {
isOpen: false,
opacity: new Animated.Value(0),
};
_this._iosPicker = null;
_this._androidPicker = null;
_this._open = function () {
_this.setState({ isOpen: true }, function () {
var _a, _b;
_this._animateOpen();
(_a = _this._iosPicker) === null || _a === void 0 ? void 0 : _a._animateOpen();
(_b = _this._androidPicker) === null || _b === void 0 ? void 0 : _b._animateOpen();
});
};
_this._close = function () {
var _a, _b;
_this._animateClose();
(_a = _this._iosPicker) === null || _a === void 0 ? void 0 : _a._animateClose();
(_b = _this._androidPicker) === null || _b === void 0 ? void 0 : _b._animateClose();
setTimeout(function () { return _this.setState({ isOpen: false }); }, ANIMATION_DURATION);
};
_this._animateOpen = function () {
if (Platform.OS === 'android' &&
pickerStore.pickerOptions.pickerType !== 'normal') {
return;
}
Animated.timing(_this.state.opacity, {
toValue: 0.4,
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();
};
_this._onPressDone = function () {
var pickerOptions = pickerStore.pickerOptions;
if (pickerOptions.onPressDone && pickerOptions.item) {
pickerOptions.onPressDone(pickerOptions.item);
}
else if (pickerOptions.onPressDone && pickerOptions.date) {
pickerOptions.onPressDone(pickerOptions.date);
}
QuickPicker.close();
};
_this._onChange = function (item) {
var pickerOptions = pickerStore.pickerOptions;
if (pickerOptions.onChange && item) {
pickerOptions.onChange(item);
if (item.label) {
pickerOptions.item = item;
}
else {
pickerOptions.date = item;
}
}
if (Platform.OS === 'android') {
if (pickerOptions.onPressDone && pickerOptions.item) {
pickerOptions.onPressDone(pickerOptions.item);
}
else if (pickerOptions.onPressDone && pickerOptions.date) {
pickerOptions.onPressDone(pickerOptions.date);
}
QuickPicker.close();
}
};
return _this;
}
QuickPicker.open = function (options) {
pickerStore.open(options);
};
QuickPicker.close = function () {
pickerStore.close();
};
QuickPicker.prototype.componentDidMount = function () {
pickerStore.pickerComponent = this;
};
QuickPicker.prototype.render = function () {
var _this = this;
var isOpen = this.state.isOpen;
var pickerOptions = pickerStore.pickerOptions;
if (!isOpen) {
return null;
}
if (Platform.OS === 'android') {
return (React.createElement(AndroidPicker, { date: pickerOptions.date || new Date(), getRef: function (_androidPicker) { return (_this._androidPicker = _androidPicker); }, onChange: this._onChange, onCancel: QuickPicker.close, item: pickerOptions.item }));
}
return (React.createElement(View, { style: __assign({ flex: 1, position: 'absolute' }, StyleSheet.absoluteFillObject) },
React.createElement(Touchable, { feedback: "none", native: false, style: { flex: 1 }, onPress: pickerOptions.onTapOut || QuickPicker.close },
React.createElement(Animated.View, { style: [
{
opacity: this.state.opacity,
flex: 1,
backgroundColor: 'black',
},
] })),
React.createElement(IosPicker, { onPressDone: this._onPressDone, getRef: function (iosPicker) { return (_this._iosPicker = iosPicker); }, onChange: this._onChange })));
};
return QuickPicker;
}(React.Component));
export default QuickPicker;