@dokuhero/react-native-components
Version:
Sets of React Native components that works with dokuhero/react-native-theme and react-i18next
186 lines (185 loc) • 7.38 kB
JavaScript
import * as tslib_1 from "tslib";
import { withLocaleClass } from '@dokuhero/react-18n-ts-helper';
import { createStyleSheet, SpaceKeys, withThemeClass } from '@dokuhero/react-native-theme';
import React from 'react';
import { Modal, TouchableWithoutFeedback, View } from 'react-native';
import { ButtonGroup, Card } from 'react-native-elements';
import { Utils } from '../utils';
import { Button } from './Button';
import { DropdownPicker } from './DropdownPicker';
import { FormField } from './FormField';
var months = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
var DateFilter = /** @class */ (function (_super) {
tslib_1.__extends(DateFilter, _super);
function DateFilter(props) {
var _this = _super.call(this, props) || this;
_this.hide = _this.hide.bind(_this);
_this.accept = _this.accept.bind(_this);
var start = props.start, end = props.end;
var startYear = start.getFullYear();
var endYear = end.getFullYear();
var years = [];
for (var index = startYear; index <= endYear; index++) {
years.push(index);
}
_this.state = {
showModal: false,
years: years,
year: years[years.length - 1],
month: end.getMonth() + 1,
dates: Utils.getDatesInMonth(end),
date: end.getDate(),
selectedMode: 0
};
return _this;
}
DateFilter.prototype.componentDidMount = function () {
var onLoad = this.props.onLoad;
if (onLoad) {
onLoad(this.getResult());
}
};
DateFilter.prototype.render = function () {
var _this = this;
var _a = this.props, t = _a.t, i18n = _a.i18n, theme = _a.theme;
var _b = this.state, year = _b.year, month = _b.month, date = _b.date, selectedMode = _b.selectedMode;
var title = '';
if (!date) {
title = t('months:' + month) + " " + year;
}
else {
title =
i18n.language === 'en'
? t('months:' + month) + " " + date + ", " + year
: date + " " + t('months:' + month) + " " + year;
}
return (<View>
<ButtonGroup containerStyle={{
marginLeft: 0,
marginRight: 0,
marginTop: 0,
marginBottom: 0,
borderWidth: 0
}}
// @ts-ignore
selectedButtonStyle={{ backgroundColor: theme.primary }} selectedTextStyle={{ color: theme.color.white }} selectedIndex={selectedMode} buttons={[t('today'), t('thisMonth'), title]} onPress={function (mode) {
var now = new Date();
switch (mode) {
case 0:
// today
_this.setState({
year: now.getFullYear(),
month: now.getMonth() + 1,
date: now.getDate(),
selectedMode: mode
}, _this.accept);
break;
case 1:
// this month
_this.setState({
year: now.getFullYear(),
month: now.getMonth() + 1,
date: undefined,
selectedMode: mode
}, _this.accept);
break;
default:
// custom
_this.setState({ showModal: true, selectedMode: mode });
}
}}/>
{this.renderModal()}
</View>);
};
DateFilter.prototype.renderModal = function () {
var _this = this;
var _a = this.state, showModal = _a.showModal, years = _a.years, year = _a.year, month = _a.month, dates = _a.dates, date = _a.date;
var t = this.props.t;
return (<Modal transparent visible={showModal} onRequestClose={this.hide}>
<TouchableWithoutFeedback onPress={this.hide}>
<View style={{
flex: 1,
backgroundColor: 'rgba(0,0,0,0.4)',
justifyContent: 'center'
}}>
<Card title={Utils.toUpper(t('selectDate'))}>
<View style={styles.textContainer}>
<FormField label={t('year')}>
<DropdownPicker fieldContainerStyle={styles.dropdownField} allowClear={false} value={year} options={years} getOptionText={function (y) { return y.toString(); }} onChange={function (v) {
_this.setState({ year: v });
}}/>
</FormField>
<FormField label={t('month')}>
<DropdownPicker fieldContainerStyle={styles.dropdownField} allowClear={false} value={month} options={months} getOptionText={function (m) { return t("months:" + m); }} onChange={function (v) {
_this.setState({
month: v,
dates: Utils.getDatesInMonth(new Date(year, v - 1)),
date: undefined
});
}}/>
</FormField>
<FormField label={t('date')}>
<DropdownPicker fieldContainerStyle={styles.dropdownField} value={date} options={dates} getOptionText={function (m) { return m.toString(); }} onChange={function (v) {
_this.setState({
date: v
});
}} placeholder={t('allDates')}/>
</FormField>
</View>
<View style={styles.buttonContainer}>
<Button containerViewStyle={styles.button} kind="primary" title={t('ok')} onPress={function () {
_this.hide();
_this.accept();
}}/>
<Button containerViewStyle={styles.button} title={t('cancel')} onPress={this.hide}/>
</View>
</Card>
</View>
</TouchableWithoutFeedback>
</Modal>);
};
DateFilter.prototype.accept = function () {
var onAccept = this.props.onAccept;
if (onAccept) {
onAccept(this.getResult());
}
};
DateFilter.prototype.getResult = function () {
var _a = this.state, year = _a.year, month = _a.month, date = _a.date;
var d = new Date(year, month - 1, date || 1);
return {
start: date ? Utils.firstTimeInDate(d) : Utils.firstTimeInMonth(d),
end: date ? Utils.lastTimeInDate(d) : Utils.lastTimeInMonth(d)
};
};
DateFilter.prototype.hide = function () {
this.setState({ showModal: false });
};
DateFilter = tslib_1.__decorate([
withLocaleClass('common'),
withThemeClass(),
tslib_1.__metadata("design:paramtypes", [Object])
], DateFilter);
return DateFilter;
}(React.Component));
export { DateFilter };
var styles = createStyleSheet({
textContainer: {
marginBottom: SpaceKeys.small
},
buttonContainer: {
flexDirection: 'row',
padding: 0
},
button: {
flex: 1,
marginLeft: 0,
marginRight: 0,
padding: 0
},
dropdownField: {
marginLeft: -SpaceKeys.small,
marginRight: -SpaceKeys.small
}
});
//# sourceMappingURL=DateFilter.js.map