ngx-bootstrap
Version:
Native Angular Bootstrap Components
127 lines • 6.05 kB
JavaScript
import { Component, EventEmitter, Input, Output } from '@angular/core';
import { BsDatepickerStore } from '../../reducer/bs-datepicker.store';
import { BsDatepickerActions } from '../../reducer/bs-datepicker.actions';
import 'rxjs/add/operator/filter';
var BsDaterangepickerContainerComponent = (function () {
function BsDaterangepickerContainerComponent(_bsDatepickerStore, _actions) {
var _this = this;
this._bsDatepickerStore = _bsDatepickerStore;
this._actions = _actions;
this.valueChange = new EventEmitter();
this._rangeStack = [];
// data binding state <--> model
this._bsDatepickerStore.select(function (state) { return state.flaggedMonths; })
.filter(function (months) { return !!months; })
.subscribe(function (months) { return _this.months = months; });
this._bsDatepickerStore.select(function (state) { return state.renderOptions; })
.filter(function (options) { return !!options; })
.subscribe(function (options) { return _this.options = options; });
// set render options
this._bsDatepickerStore.dispatch(this._actions.renderOptions({
displayMonths: 2,
showWeekNumbers: true
}));
// on selected date change
this._bsDatepickerStore.select(function (state) { return state.selectedRange; })
.subscribe(function (date) { return _this.valueChange.emit(date); });
// TODO: extract effects
// calculate month model on view model change
this._bsDatepickerStore
.select(function (state) { return state.viewDate; })
.subscribe(function (viewDate) {
return _this._bsDatepickerStore.dispatch(_this._actions.calculate(viewDate));
});
// format calendar values on month model change
this._bsDatepickerStore
.select(function (state) { return state.monthsModel; })
.filter(function (monthModel) { return !!monthModel; })
.subscribe(function (month) {
return _this._bsDatepickerStore.dispatch(_this._actions.format());
});
// flag day values
this._bsDatepickerStore
.select(function (state) { return state.formattedMonths; })
.filter(function (month) { return !!month; })
.subscribe(function (month) {
return _this._bsDatepickerStore.dispatch(_this._actions.flag());
});
// flag day values
this._bsDatepickerStore.select(function (state) { return state.selectedRange; })
.filter(function (selectedRange) { return !!selectedRange; })
.subscribe(function (selectedRange) {
return _this._bsDatepickerStore.dispatch(_this._actions.flag());
});
// on hover
this._bsDatepickerStore.select(function (state) { return state.hoveredDate; })
.filter(function (hoveredDate) { return !!hoveredDate; })
.subscribe(function (hoveredDate) {
return _this._bsDatepickerStore.dispatch(_this._actions.flag());
});
}
Object.defineProperty(BsDaterangepickerContainerComponent.prototype, "value", {
set: function (value) {
this._bsDatepickerStore.dispatch(this._actions.selectRange(value || []));
},
enumerable: true,
configurable: true
});
BsDaterangepickerContainerComponent.prototype.ngOnInit = function () {
// this._bsDatepickerStore.dispatch(this._actions.init());
};
BsDaterangepickerContainerComponent.prototype.navigateTo = function (event) {
this._bsDatepickerStore.dispatch(this._actions.navigateStep(event.step));
};
BsDaterangepickerContainerComponent.prototype.hoverHandler = function (event) {
if (event.day.isOtherMonth) {
return;
}
this._bsDatepickerStore.dispatch(this._actions.hover(event));
event.day.isHovered = event.isHovered;
};
BsDaterangepickerContainerComponent.prototype.selectHandler = function (day) {
if (day.isOtherMonth) {
return;
}
if (this._rangeStack.length === 1) {
if (day.date >= this._rangeStack[0]) {
this._rangeStack = [this._rangeStack[0], day.date];
}
else {
this._rangeStack = [day.date];
}
}
if (this._rangeStack.length === 0) {
this._rangeStack = [day.date];
}
this._bsDatepickerStore.dispatch(this._actions.selectRange(this._rangeStack));
if (this._rangeStack.length === 2) {
this._rangeStack = [];
}
};
BsDaterangepickerContainerComponent.prototype._stopPropagation = function (event) {
event.stopPropagation();
};
BsDaterangepickerContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'bs-daterangepicker-container',
providers: [BsDatepickerStore],
template: "\n <bs-datepicker-view\n *ngIf=\"months && options\"\n [months]=\"months\"\n [options]=\"options\"\n (onNavigate)=\"navigateTo($event)\"\n (onHover)=\"hoverHandler($event)\"\n (onSelect)=\"selectHandler($event)\"\n ></bs-datepicker-view>\n ",
host: {
'(click)': '_stopPropagation($event)',
style: 'position: absolute; display: block;'
}
},] },
];
/** @nocollapse */
BsDaterangepickerContainerComponent.ctorParameters = function () { return [
{ type: BsDatepickerStore, },
{ type: BsDatepickerActions, },
]; };
BsDaterangepickerContainerComponent.propDecorators = {
'value': [{ type: Input },],
'valueChange': [{ type: Output },],
};
return BsDaterangepickerContainerComponent;
}());
export { BsDaterangepickerContainerComponent };
//# sourceMappingURL=bs-daterangepicker-container.component.js.map