@jonstuebe/react-native-week-selector
Version:
React Native week selector
135 lines (134 loc) • 6.47 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 (b.hasOwnProperty(p)) d[p] = b[p]; };
return extendStatics(d, b);
};
return function (d, b) {
extendStatics(d, b);
function __() { this.constructor = d; }
d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
};
})();
var __importStar = (this && this.__importStar) || function (mod) {
if (mod && mod.__esModule) return mod;
var result = {};
if (mod != null) for (var k in mod) if (Object.hasOwnProperty.call(mod, k)) result[k] = mod[k];
result["default"] = mod;
return result;
};
var __importDefault = (this && this.__importDefault) || function (mod) {
return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
var react_1 = __importStar(require("react"));
var react_native_1 = require("react-native");
var start_of_today_1 = __importDefault(require("date-fns/start_of_today"));
var start_of_week_1 = __importDefault(require("date-fns/start_of_week"));
var end_of_week_1 = __importDefault(require("date-fns/end_of_week"));
var add_weeks_1 = __importDefault(require("date-fns/add_weeks"));
var sub_weeks_1 = __importDefault(require("date-fns/sub_weeks"));
var is_before_1 = __importDefault(require("date-fns/is_before"));
var is_after_1 = __importDefault(require("date-fns/is_after"));
var is_same_day_1 = __importDefault(require("date-fns/is_same_day"));
var format_1 = __importDefault(require("date-fns/format"));
var WeekSelector = /** @class */ (function (_super) {
__extends(WeekSelector, _super);
function WeekSelector(props) {
var _this = _super.call(this, props) || this;
_this.renderPreviousSelector = function (currentDate, startDate) {
if (is_same_day_1.default(currentDate, startDate) || is_before_1.default(currentDate, startDate)) {
return null;
}
var renderPreviousSelector = _this.props.renderPreviousSelector;
return (<react_native_1.TouchableOpacity onPress={_this.onPreviousPress}>
{renderPreviousSelector ? (renderPreviousSelector()) : (<react_native_1.Image source={require('./images/left-arrow-black.png')}/>)}
</react_native_1.TouchableOpacity>);
};
_this.renderNextSelector = function (currentDate, endDate) {
if (is_same_day_1.default(currentDate, endDate) || is_after_1.default(currentDate, endDate)) {
return null;
}
var renderNextSelector = _this.props.renderNextSelector;
return (<react_native_1.TouchableOpacity onPress={_this.onNextPress}>
{renderNextSelector ? (renderNextSelector()) : (<react_native_1.Image source={require('./images/right-arrow-black.png')}/>)}
</react_native_1.TouchableOpacity>);
};
_this.renderDisplayText = function (date, weekStartsOn) {
var _a = _this.props, dayFormat = _a.dayFormat, monthFormat = _a.monthFormat, textStyle = _a.textStyle;
var firstDayOfWeek = start_of_week_1.default(date, { weekStartsOn: weekStartsOn });
var lastDayOfWeek = end_of_week_1.default(date, { weekStartsOn: weekStartsOn });
var firstDay = format_1.default(firstDayOfWeek, dayFormat);
var firstMonth = format_1.default(firstDayOfWeek, monthFormat);
var lastDay = format_1.default(lastDayOfWeek, dayFormat);
var lastMonth = format_1.default(lastDayOfWeek, monthFormat);
var firstMonthText = firstMonth !== lastMonth ? " " + firstMonth : '';
var text = "" + firstDay + firstMonthText + " - " + lastDay + " " + lastMonth;
return <react_native_1.Text style={[styles.text, textStyle]}>{text}</react_native_1.Text>;
};
_this.onPreviousPress = function () {
_this.setState(function (state) { return ({
date: sub_weeks_1.default(state.date, 1)
}); }, function () {
_this.onWeekChanged();
});
};
_this.onNextPress = function () {
_this.setState(function (state) { return ({
date: add_weeks_1.default(state.date, 1)
}); }, function () {
_this.onWeekChanged();
});
};
_this.onWeekChanged = function () {
var date = _this.state.date;
var onWeekChanged = _this.props.onWeekChanged;
onWeekChanged && onWeekChanged(start_of_week_1.default(date));
};
_this.state = {
date: props.date || start_of_today_1.default()
};
return _this;
}
WeekSelector.prototype.render = function () {
var date = this.state.date;
var _a = this.props, containerStyle = _a.containerStyle, dateContainerStyle = _a.dateContainerStyle, selectorContainerStyle = _a.selectorContainerStyle, whitelistRange = _a.whitelistRange, weekStartsOn = _a.weekStartsOn;
var startDate = whitelistRange[0], endDate = whitelistRange[1];
return (<react_native_1.View style={[styles.container, containerStyle]}>
<react_native_1.View style={[styles.selectorContainer, selectorContainerStyle]}>
{this.renderPreviousSelector(date, startDate)}
</react_native_1.View>
<react_native_1.View style={[styles.dateContainer, dateContainerStyle]}>
{this.renderDisplayText(date, weekStartsOn)}
</react_native_1.View>
<react_native_1.View style={[styles.selectorContainer, selectorContainerStyle]}>
{this.renderNextSelector(date, endDate)}
</react_native_1.View>
</react_native_1.View>);
};
WeekSelector.defaultProps = {
dayFormat: 'DD',
monthFormat: 'MMMM',
weekStartsOn: 1,
whitelistRange: []
};
return WeekSelector;
}(react_1.PureComponent));
var styles = react_native_1.StyleSheet.create({
container: {
flex: 1,
height: 34,
flexDirection: 'row',
alignItems: 'center'
},
selectorContainer: {
width: 32
},
dateContainer: {},
text: {
alignSelf: 'center'
}
});
exports.default = WeekSelector;