@instawork/design-system
Version:
The design system for Instawork's web apps
82 lines • 3.72 kB
JavaScript
import * as $ from 'jquery';
import { CustomComponent, DateUtil } from '../common';
import { TimeRangeComponent } from './time-range.component';
import TEMPLATE from './time-range-display.component.pug';
import INFO_POPOVER_TEMPLATE from './time-range-display.info-popover.component.pug';
import INFO_ITEM_TEMPLATE from './time-range-display.info-item.component.pug';
import './time-range-display.component.scss';
const COMPONENT_SELECTOR = 'iw-time-range-display';
const ATTR_SRC = 'src';
const ATTR_MSG_INFO_CROSSES_MIDNIGHT = 'msg-info-crosses-midnight';
const ATTR_EMPTY_STATE = 'empty-state';
export class TimeRangeDisplayComponent extends CustomComponent {
constructor($el) {
super($el);
this.$src = $(this.srcSelector);
this.srcCtrl = CustomComponent.getController(this.$src);
if (!this.srcCtrl || !(this.srcCtrl instanceof TimeRangeComponent)) {
throw new Error(`TimeRangeDisplayComponent: expected the "src" element to have a ${TimeRangeComponent.COMPONENT_SELECTOR} instance`);
}
this.$current = this.$el.find('.iw-time-range__current');
this.$diff = this.$el.find('.iw-time-range__diff');
this.$info = this.$el.find('.iw-time-range__info');
this.$infoPopoverButton = this.$info.find('button');
this.$src.on('change', this.onSrcChange.bind(this));
this.onSrcChange();
}
static loadPlugin() {
super.loadPlugin();
if (!$.fn.iwTimeRangeDisplay) {
$.fn.iwTimeRangeDisplay = this.jQueryPlugin('TimeRangeDisplayComponent');
}
}
get srcSelector() {
return this.$el.attr(ATTR_SRC);
}
get msgInfoCrossesMidnight() {
return this.$el.attr(ATTR_MSG_INFO_CROSSES_MIDNIGHT) || 'Crosses into the next day';
}
get emptyState() {
return this.$el.attr(ATTR_EMPTY_STATE) || '';
}
onSrcChange() {
const state = this.srcCtrl.value;
this.updateCurrentHours(state === null || state === void 0 ? void 0 : state.current);
this.updateDiffHours(state === null || state === void 0 ? void 0 : state.diff);
this.updateInfo(state);
}
updateCurrentHours(duration) {
this.$current.text(duration ? DateUtil.formatHours(duration.as('hours')) : this.emptyState);
}
updateDiffHours(duration) {
const hasDiff = duration !== undefined && duration.valueOf() !== 0;
this.$diff
.text(DateUtil.formatHoursDiff(duration))
.toggle(hasDiff);
}
updateInfo(state) {
// required to reset the HTML content in the popover
this.$infoPopoverButton.popover('dispose');
if (!(state === null || state === void 0 ? void 0 : state.info)) {
this.$info.hide();
return;
}
const infoItems = [];
if (state.info.crossesMidnight) {
infoItems.push(this.infoMessageContent('crosses-midnight', this.msgInfoCrossesMidnight));
}
if (state.info.offsetChange) {
infoItems.push(this.infoMessageContent('offset-change', DateUtil.formatDstChange(state.info.offsetChange)));
}
this.$info.show();
const $popoverContent = $(INFO_POPOVER_TEMPLATE).append(infoItems);
const popoverContentHtml = $('<div></div>').append($popoverContent).html();
this.$infoPopoverButton.popover({ content: popoverContentHtml });
}
infoMessageContent(type, msg) {
return $(INFO_ITEM_TEMPLATE).addClass(`iw-time-range__info__popover__item--${type}`).text(msg);
}
}
TimeRangeDisplayComponent.COMPONENT_SELECTOR = COMPONENT_SELECTOR;
TimeRangeDisplayComponent.TEMPLATE = TEMPLATE;
//# sourceMappingURL=time-range-display.component.js.map