ngx-bootstrap
Version:
Native Angular Bootstrap Components
109 lines • 5.28 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 BsDatepickerContainerComponent = (function () {
function BsDatepickerContainerComponent(_bsDatepickerStore, _actions) {
var _this = this;
this._bsDatepickerStore = _bsDatepickerStore;
this._actions = _actions;
this.valueChange = new EventEmitter();
// 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: 1,
showWeekNumbers: true
}));
// on selected date change
this._bsDatepickerStore.select(function (state) { return state.selectedDate; })
.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.selectedDate; })
.filter(function (selectedDate) { return !!selectedDate; })
.subscribe(function (selectedDate) {
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(BsDatepickerContainerComponent.prototype, "value", {
set: function (value) {
this._bsDatepickerStore.dispatch(this._actions.select(value));
},
enumerable: true,
configurable: true
});
BsDatepickerContainerComponent.prototype.navigateTo = function (event) {
this._bsDatepickerStore.dispatch(this._actions.navigateStep(event.step));
};
BsDatepickerContainerComponent.prototype.hoverHandler = function (event) {
if (event.day.isOtherMonth) {
return;
}
this._bsDatepickerStore.dispatch(this._actions.hover(event));
event.day.isHovered = event.isHovered;
};
BsDatepickerContainerComponent.prototype.selectHandler = function (day) {
if (day.isOtherMonth) {
return;
}
this._bsDatepickerStore.dispatch(this._actions.select(day.date));
};
BsDatepickerContainerComponent.prototype._stopPropagation = function (event) {
event.stopPropagation();
};
BsDatepickerContainerComponent.decorators = [
{ type: Component, args: [{
selector: 'bs-datepicker-container',
providers: [BsDatepickerStore],
template: "\n <bs-datepicker-view\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 */
BsDatepickerContainerComponent.ctorParameters = function () { return [
{ type: BsDatepickerStore, },
{ type: BsDatepickerActions, },
]; };
BsDatepickerContainerComponent.propDecorators = {
'value': [{ type: Input },],
'valueChange': [{ type: Output },],
};
return BsDatepickerContainerComponent;
}());
export { BsDatepickerContainerComponent };
//# sourceMappingURL=bs-datepicker-container.component.js.map