semantic-ui-riot
Version:
Semantic UI for Riot
1,081 lines (925 loc) • 32.7 kB
JavaScript
import { format, addMinutes, isToday, parseISO, toDate, addMilliseconds, startOfDay, addMonths, differenceInMilliseconds, startOfMonth, addDays, isSameDay, isSameHour, isSameMinute, isDate } from 'date-fns';
let index = 0;
// tag.mixin('semantic-ui')
// ===================================================================================
// Lifecycle
// =========
function onBeforeMount(props, state) {
this.popup = getPopup(this);
state.transitionStatus = this.popup ? 'hidden' : 'visible';
this.weeks = [];
this.pattern = getPattern(this);
this.locale = getLocale(this);
this.tabIndex = getTabindex(this);
this.weekNames = getWeekNames(this);
this.su_id = `su-datepicker-${index++}`;
this.obs.on(`${this.su_id}-reset`, () => { reset(this); });
}
function onMounted(props, state) {
if (!state.value) {
state.value = props.value;
}
state.formattedValue = formatViewDate(this);
if (this.popup) {
this.$('input').value = state.formattedValue;
}
this.lastValue = state.value;
this.lastPropsValue = props.value;
if (state.value || props.currentDate) {
state.currentDate = parseISO(state.value || props.currentDate);
} else {
state.currentDate = new Date();
}
state.months = getMonths(this);
if (props.yearRange && !isNaN(props.yearRange) && props.yearRange > 20) {
this.yearRange = props.yearRange;
}
if (props.startMode === 'year') {
this.selectYear();
}
state.defaultValue = state.value;
this.update();
parentUpdate(this);
}
function onBeforeUpdate(props, state) {
this.readOnly = this.root.classList.contains('read-only') ? 'read-only' : '';
this.disabled = this.root.classList.contains('disabled') ? 'disabled' : '';
let changed = false;
if (!isEqualDatetime(this.lastValue, state.value)) {
this.lastValue = state.value;
changed = true;
} else if (!isEqualDatetime(this.lastPropsValue, props.value)) {
state.value = props.value;
this.lastPropsValue = props.value;
this.lastValue = props.value;
changed = true;
}
state.formattedValue = formatViewDate(this);
if (this.popup) {
this.$('input').value = state.formattedValue;
}
if (changed) {
parentUpdate(this);
}
if (changed && state.value) {
state.currentDate = parseISO(state.value);
}
if (!isEqualDatetime(this.lastPropsCurrentDate, props.currentDate)) {
state.currentDate = parseISO(props.currentDate);
this.lastPropsCurrentDate = props.currentDate;
}
if (!isEqualDatetime(this.lastCurrentDate, state.currentDate)) {
this.lastCurrentDate = toDate(state.currentDate);
generate(this);
}
this.changed = !isEqualDatetime(state.value, state.defaultValue);
}
function reset(tag) {
tag.state.value = tag.state.defaultValue;
tag.update();
parentUpdate(tag);
}
// ===================================================================================
// Event
// =====
function selectMonth() {
this.yearSelecting = false;
this.monthSelecting = !this.monthSelecting;
this.update();
}
function selectYear() {
this.state.years = getYears(this);
this.monthSelecting = false;
this.yearSelecting = !this.yearSelecting;
this.update();
}
function clickDay(day) {
if (this.readOnly || this.disabled) {
return
}
let date = day;
if (this.state.milliseconds) {
date = addMilliseconds(startOfDay(date), this.state.milliseconds);
}
setDate(this, date);
this.update();
parentUpdate(this);
this.dispatch('click', this.state.value);
}
function clickMonth(month) {
this.state.currentDate.setMonth(month.value);
this.monthSelecting = false;
this.update();
}
function clickYear(year) {
this.state.currentDate.setYear(year);
this.selectMonth();
this.update();
}
function clickPrevious() {
if (this.yearSelecting) {
this.state.years = addYear(this.state.years, -this.yearRange);
} else {
this.monthSelecting = false;
this.state.currentDate = addMonths(this.state.currentDate, -1);
}
this.update();
}
function clickNext() {
if (this.yearSelecting) {
this.state.years = addYear(this.state.years, this.yearRange);
} else {
this.monthSelecting = false;
this.state.currentDate = addMonths(this.state.currentDate, 1);
}
this.update();
}
function clickClear() {
this.state.milliseconds = undefined;
setDate(this, null);
this.update();
parentUpdate(this);
this.dispatch('clear', this.state.value);
}
function clickToday() {
const today = new Date();
this.state.milliseconds = differenceInMilliseconds(today, startOfDay(today));
setDate(this, today);
this.update();
parentUpdate(this);
this.dispatch('today', this.state.value);
}
function clickHour(event) {
if (this.readOnly || this.disabled) {
return
}
this.state.milliseconds = getMilliseconds(event.item.index);
if (this.state.value) {
const date = addMilliseconds(startOfDay(this.state.value), this.state.milliseconds);
setDate(this, date);
}
this.update();
parentUpdate(this);
this.dispatch('today', this.state.value);
}
// -----------------------------------------------------
// popup option
// ------------
function toggle() {
if (this.readOnly || this.disabled) {
return
}
if (!this.visibleFlg) {
if (this.props.startMode === 'year') {
this.selectYear();
this.yearSelecting = true;
}
open(this);
} else {
close(this);
}
this.update();
}
function onMouseDown() {
this.itemActivated = true;
this.update();
}
function onMouseUp() {
this.itemActivated = false;
this.update();
}
function onBlur() {
if (this.popup && !this.itemActivated) {
close(this);
this.update();
}
}
function onChangeInput() {
const value = this.$('input').value ? parse(this.$('input').value) : '';
if (value != 'Invalid Date') {
setDate(this, value);
} else {
this.$('input').value = this.state.value;
}
this.update();
}
// ===================================================================================
// Helper
// ======
function getCurrentYear() {
if (this.state.currentDate) {
return this.state.currentDate.getFullYear()
}
}
function getCurrentMonthView() {
if (this.state.currentDate) {
return format(this.state.currentDate, 'MMM', { locale: this.locale })
}
}
function getCurrentMonth() {
return this.state.currentDate.getMonth()
}
function isActive(date) {
return isEqualDay(parseISO(this.state.value), date)
}
function isActiveTime(index) {
return isEqualTime(this.milliseconds, getMilliseconds(index))
}
function isNearlyTime(index) {
const target = getMilliseconds(index);
if (typeof this.milliseconds === 'undefined' || this.milliseconds > target) {
return false
}
return target - this.milliseconds < 30 * 60 * 1000
}
function getMilliseconds(index) {
return index * 30 * 60 * 1000
}
// ===================================================================================
// Logic
// =====
function formatViewDate(tag) {
const viewDate = tag.state.value;
return viewDate ? format(parseISO(viewDate), tag.pattern, { locale: tag.locale }) : null
}
function generate(tag) {
const startDate = startOfMonth(tag.state.currentDate);
const baseDate = addDays(startDate, - startDate.getDay());
tag.state.days = range(42).map((index) => addDays(baseDate, index));
}
function addYear(years, range) {
return years.map(value => {
return value + parseInt(range)
})
}
function getYears(tag) {
const startAt = tag.state.currentDate.getFullYear() - ((tag.yearRange - (tag.yearRange % 2)) / 2 - 1);
return range(parseInt(tag.yearRange), startAt)
}
function getMonths(tag) {
return range(12).map(month => {
return {
label: format(new Date(2018, month, 1), 'MMM', {
locale: getLocale(tag),
}),
value: month,
}
})
}
function open(tag) {
tag.upward = isUpward(tag);
tag.state.transitionStatus = 'visible';
tag.visibleFlg = true;
if (tag.state.value || tag.props.currentDate) {
tag.state.currentDate = parseISO(tag.state.value || tag.props.currentDate);
} else {
tag.state.currentDate = new Date();
}
tag.dispatch('open', tag.state.value);
}
function close(tag) {
tag.state.transitionStatus = 'hidden';
tag.visibleFlg = false;
tag.dispatch('close', tag.state.value);
}
function setDate(tag, date) {
tag.state.value = date ? format(date, 'yyyy-MM-dd') : null;
if (tag.popup && !tag.props.datetime) {
tag.$('input').value = tag.state.value;
close(tag);
}
tag.dispatch('change', tag.state.value);
}
function isEqualDatetime(d1, d2) {
return isEqualDay(d1, d2) && isEqualTime(d1, d2)
}
function isEqualDay(d1, d2) {
if (d1 == d2) {
return true
}
if (!d1 || !d2) {
return false
}
d1 = parse(d1);
d2 = parse(d2);
return isSameDay(d1, d2)
}
function isEqualTime(d1, d2) {
if (d1 == d2) {
return true
}
if (!d1 || !d2) {
return false
}
d1 = parse(d1);
d2 = parse(d2);
return isSameHour(d1, d2) && isSameMinute(d1, d2)
}
function parse(date) {
if (!date) {
return date
}
if (isDate(date)) {
return toDate(date)
}
const parsed = parseISO(date);
if (parsed != 'Invalid Date') {
return parsed
}
return new Date(date)
}
function isUpward(tag) {
if (tag.props.direction == 'upward') {
return true
}
if (tag.props.direction == 'downward') {
return false
}
const inputField = tag.root.getBoundingClientRect();
const windowHeight = document.documentElement.offsetHeight || document.body.offsetHeight;
const menuHeight = tag.root.querySelector('.menu').getBoundingClientRect().height;
const above = menuHeight <= inputField.top;
const below = windowHeight >= inputField.top + inputField.height + menuHeight;
if (below) {
return false
}
if (!below && !above) {
return false
}
return true
}
function getWeekNames(tag) {
return range(7, 1).map(day => format(new Date(2018, 6, day), 'eee', { locale: tag.locale }))
}
function getTabindex(tag) {
if (!tag.popup) {
return false
}
if (tag.props.tabindex) {
return tag.props.tabindex
}
return 0
}
function getPattern(tag) {
if (tag.props.pattern) {
return tag.props.pattern
}
if (tag.defaultOptions && tag.defaultOptions.pattern) {
return tag.defaultOptions.pattern
}
return tag.props.datetime ? 'yyyy-MM-dd HH:mm:ss' : 'yyyy-MM-dd'
}
function getLocale(tag) {
if (tag.props.locale) {
return tag.props.locale
}
if (tag.defaultOptions && tag.defaultOptions.locale) {
return tag.defaultOptions.locale
}
}
function getPopup(tag) {
return tag.props.dataPopup
}
function range(size, startAt = 0) {
return Array.from(Array(size).keys()).map(i => i + startAt)
}
function parentUpdate(tag) {
tag.obs.trigger(`${tag.props.suParentId}-update`);
}
var suDatepicker = {
'css': `su-datepicker .ui.segment,[is="su-datepicker"] .ui.segment{ padding-top: 0.5rem; padding-bottom: 0.5rem; } su-datepicker .ui.dropdown .menu,[is="su-datepicker"] .ui.dropdown .menu{ display: block; } su-datepicker .ui.dropdown,[is="su-datepicker"] .ui.dropdown{ display: block; } su-datepicker .ui.padded.grid>.column:not(.row),[is="su-datepicker"] .ui.padded.grid>.column:not(.row){ padding: 0; } su-datepicker .date-picker,[is="su-datepicker"] .date-picker{ width: 20rem; } su-datepicker .datetime-picker,[is="su-datepicker"] .datetime-picker{ width: 28rem; } su-datepicker .dp-weekday,[is="su-datepicker"] .dp-weekday{ color: rgba(0, 0, 0, 0.6); } su-datepicker .dp-time,[is="su-datepicker"] .dp-time{ height: 25rem; overflow-y: auto; padding-right: 0.2rem; } su-datepicker .dp-time .ui.button,[is="su-datepicker"] .dp-time .ui.button{ padding: 0; height: 2rem; font-weight: normal; } su-datepicker .dp-day .ui.button,[is="su-datepicker"] .dp-day .ui.button,su-datepicker .dp-month .ui.button,[is="su-datepicker"] .dp-month .ui.button{ padding: 0; height: 2.5rem; font-weight: normal; } su-datepicker .ui.button.nearly-time,[is="su-datepicker"] .ui.button.nearly-time,su-datepicker .dp-day .ui.button.today,[is="su-datepicker"] .dp-day .ui.button.today{ background: transparent none; color: rgba(0, 0, 0, 0.6); font-weight: 400; border-radius: 0.28571429rem; text-transform: none; text-shadow: none !important; -webkit-box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; box-shadow: 0 0 0 1px rgba(34, 36, 38, 0.15) inset; } su-datepicker .date-picker .ui.button:not(.primary),[is="su-datepicker"] .date-picker .ui.button:not(.primary){ background-color: transparent; } su-datepicker .date-picker .ui.button:not(.primary):hover,[is="su-datepicker"] .date-picker .ui.button:not(.primary):hover{ background-color: #e0e1e2; } su-datepicker .dp-day .ui.button.disabled,[is="su-datepicker"] .dp-day .ui.button.disabled,su-datepicker .dp-time .ui.button.disabled,[is="su-datepicker"] .dp-time .ui.button.disabled{ pointer-events: all !important; } su-datepicker .dp-navigation,[is="su-datepicker"] .dp-navigation{ width: 100%; margin-bottom: 0.4rem !important; } su-datepicker .dp-navigation .ui.button,[is="su-datepicker"] .dp-navigation .ui.button{ width: 20%; } su-datepicker .dp-navigation .ui.button.year,[is="su-datepicker"] .dp-navigation .ui.button.year,su-datepicker .dp-navigation .ui.button.month,[is="su-datepicker"] .dp-navigation .ui.button.month{ width: 30%; }`,
'exports': {
state: {
currentDate: null,
defaultValue: null,
value: null,
milliseconds: null,
days: [],
hours: range(48).map(index => format(addMinutes(new Date(2020, 3, 22), index * 30), 'HH:mm')),
},
visibleFlg: false,
itemActivated: false,
lastValue: null,
lastPropsValue: null,
lastCurrentDate: null,
lastPropsCurrentDate: null,
yearRange: 20,
onBeforeMount,
onMounted,
onBeforeUpdate,
clickDay,
clickMonth,
clickYear,
clickPrevious,
clickNext,
clickClear,
clickToday,
clickHour,
selectMonth,
selectYear,
toggle,
onMouseDown,
onMouseUp,
onBlur,
onChangeInput,
getCurrentYear,
getCurrentMonthView,
getCurrentMonth,
isActive,
isActiveTime,
isToday,
isNearlyTime
},
'template': function(template, expressionTypes, bindingTypes, getComponent) {
return template(
'<div expr40="expr40"><div expr41="expr41"></div><div expr44="expr44"><div expr45="expr45"><div class="ui buttons dp-navigation"><button expr46="expr46" type="button"><i class="chevron left icon"></i></button><button expr47="expr47" type="button"> </button><button expr48="expr48" type="button"> </button><button expr49="expr49" type="button"><i class="chevron right icon"></i></button></div><div expr50="expr50"></div><div expr60="expr60"></div><div expr63="expr63"></div></div></div></div>',
[{
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'value',
'evaluate': function(scope) {
return scope.state.value;
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'formatted-value',
'evaluate': function(scope) {
return scope.state.formattedValue;
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'changed',
'evaluate': function(scope) {
return scope.changed;
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'id',
'evaluate': function(scope) {
return scope.su_id;
}
}]
}, {
'redundantAttribute': 'expr40',
'selector': '[expr40]',
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['ui ', scope.popup ? 'dropdown' : '', ' ', scope.upward ? 'upward' : ''].join('');
}
}]
}, {
'type': bindingTypes.IF,
'evaluate': function(scope) {
return scope.popup;
},
'redundantAttribute': 'expr41',
'selector': '[expr41]',
'template': template(
'<input expr42="expr42" type="text"/><button expr43="expr43" type="button"><i class="calendar icon"></i></button>',
[{
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['ui action input ', scope.disabled].join('');
}
}]
}, {
'redundantAttribute': 'expr42',
'selector': '[expr42]',
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'placeholder',
'evaluate': function(scope) {
return scope.props.placeholder;
}
}, {
'type': expressionTypes.EVENT,
'name': 'onchange',
'evaluate': function(scope) {
return scope.onChangeInput;
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'tabindex',
'evaluate': function(scope) {
return scope.tabIndex;
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'readonly',
'evaluate': function(scope) {
return scope.readOnly;
}
}]
}, {
'redundantAttribute': 'expr43',
'selector': '[expr43]',
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['ui icon button ', scope.disabled].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onclick',
'evaluate': function(scope) {
return scope.toggle;
}
}, {
'type': expressionTypes.EVENT,
'name': 'onblur',
'evaluate': function(scope) {
return scope.onBlur;
}
}]
}]
)
}, {
'redundantAttribute': 'expr44',
'selector': '[expr44]',
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['menu transition ', scope.state.transitionStatus].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onmousedown',
'evaluate': function(scope) {
return scope.onMouseDown;
}
}, {
'type': expressionTypes.EVENT,
'name': 'onmouseup',
'evaluate': function(scope) {
return scope.onMouseUp;
}
}, {
'type': expressionTypes.EVENT,
'name': 'onblur',
'evaluate': function(scope) {
return scope.onBlur;
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'tabindex',
'evaluate': function(scope) {
return scope.tabIndex;
}
}]
}, {
'redundantAttribute': 'expr45',
'selector': '[expr45]',
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return [
'ui center aligned segment date-picker ',
scope.props.datetime ? 'datetime-picker' : ''
].join('');
}
}]
}, {
'redundantAttribute': 'expr46',
'selector': '[expr46]',
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['icon tiny ui button ', scope.disabled, ' prev'].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onclick',
'evaluate': function(scope) {
return scope.clickPrevious;
}
}]
}, {
'redundantAttribute': 'expr47',
'selector': '[expr47]',
'expressions': [{
'type': expressionTypes.TEXT,
'childNodeIndex': 0,
'evaluate': function(scope) {
return scope.getCurrentMonthView();
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['ui button ', scope.disabled, ' month'].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onclick',
'evaluate': function(scope) {
return scope.selectMonth;
}
}]
}, {
'redundantAttribute': 'expr48',
'selector': '[expr48]',
'expressions': [{
'type': expressionTypes.TEXT,
'childNodeIndex': 0,
'evaluate': function(scope) {
return scope.getCurrentYear();
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['ui button ', scope.disabled, ' year'].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onclick',
'evaluate': function(scope) {
return scope.selectYear;
}
}]
}, {
'redundantAttribute': 'expr49',
'selector': '[expr49]',
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['icon tiny ui button ', scope.disabled, ' next'].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onclick',
'evaluate': function(scope) {
return scope.clickNext;
}
}]
}, {
'type': bindingTypes.IF,
'evaluate': function(scope) {
return !scope.yearSelecting && !scope.monthSelecting;
},
'redundantAttribute': 'expr50',
'selector': '[expr50]',
'template': template(
'<div class="ui grid"><div expr51="expr51"><div class="ui seven column padded grid dp-weekday"><div expr52="expr52" class="column"></div></div><div class="ui divider"></div><div class="ui seven column padded grid dp-day"><div expr53="expr53" class="column"></div></div><div class="ui divider"></div><div class="ui two column grid"><div class="column dp-clear"><button expr55="expr55" type="button"><i class="times icon"></i></button></div><div class="column dp-today"><button expr56="expr56" type="button"><i class="calendar check icon"></i></button></div></div></div><div expr57="expr57" class="six wide column"></div></div>',
[{
'redundantAttribute': 'expr51',
'selector': '[expr51]',
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return [scope.props.datetime ? 'ten' : 'sixteen', ' wide column'].join('');
}
}]
}, {
'type': bindingTypes.EACH,
'getKey': null,
'condition': null,
'template': template(' ', [{
'expressions': [{
'type': expressionTypes.TEXT,
'childNodeIndex': 0,
'evaluate': function(scope) {
return scope.week;
}
}]
}]),
'redundantAttribute': 'expr52',
'selector': '[expr52]',
'itemName': 'week',
'indexName': null,
'evaluate': function(scope) {
return scope.weekNames;
}
}, {
'type': bindingTypes.EACH,
'getKey': null,
'condition': null,
'template': template('<button expr54="expr54" type="button"> </button>', [{
'redundantAttribute': 'expr54',
'selector': '[expr54]',
'expressions': [{
'type': expressionTypes.TEXT,
'childNodeIndex': 0,
'evaluate': function(scope) {
return scope.day.getDate();
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return [
'fluid ui button ',
scope.isToday(scope.day) ? 'today' : '',
' ',
scope.isActive(scope.day) ? 'primary' : 'non-active',
' ',
scope.day.getMonth() != scope.getCurrentMonth() || scope.disabled ? 'disabled' : ''
].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onclick',
'evaluate': function(scope) {
return () => scope.clickDay(scope.day);
}
}]
}]),
'redundantAttribute': 'expr53',
'selector': '[expr53]',
'itemName': 'day',
'indexName': null,
'evaluate': function(scope) {
return scope.state.days;
}
}, {
'redundantAttribute': 'expr55',
'selector': '[expr55]',
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['ui icon fluid button ', scope.disabled].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onclick',
'evaluate': function(scope) {
return scope.clickClear;
}
}]
}, {
'redundantAttribute': 'expr56',
'selector': '[expr56]',
'expressions': [{
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['ui icon fluid button ', scope.disabled].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onclick',
'evaluate': function(scope) {
return scope.clickToday;
}
}]
}, {
'type': bindingTypes.IF,
'evaluate': function(scope) {
return scope.props.datetime;
},
'redundantAttribute': 'expr57',
'selector': '[expr57]',
'template': template(
'<div class="ui two column padded grid dp-time"><div expr58="expr58" class="column"></div></div>',
[{
'type': bindingTypes.EACH,
'getKey': null,
'condition': null,
'template': template('<button expr59="expr59" type="button"> </button>', [{
'redundantAttribute': 'expr59',
'selector': '[expr59]',
'expressions': [{
'type': expressionTypes.TEXT,
'childNodeIndex': 0,
'evaluate': function(scope) {
return [scope.hour].join('');
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return [
'fluid ui button ',
scope.isNearlyTime(scope.index) && ! scope.isActiveTime(scope.index) ? 'nearly-time' : '',
' ',
scope.isActiveTime(scope.index) ? 'primary': '',
' ',
scope.disabled
].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onclick',
'evaluate': function(scope) {
return scope.clickHour;
}
}]
}]),
'redundantAttribute': 'expr58',
'selector': '[expr58]',
'itemName': 'hour',
'indexName': 'index',
'evaluate': function(scope) {
return scope.state.hours;
}
}]
)
}]
)
}, {
'type': bindingTypes.IF,
'evaluate': function(scope) {
return scope.monthSelecting;
},
'redundantAttribute': 'expr60',
'selector': '[expr60]',
'template': template(
'<div class="ui divider"></div><div class="ui four column padded grid dp-month"><div expr61="expr61" class="column"></div></div>',
[{
'type': bindingTypes.EACH,
'getKey': null,
'condition': null,
'template': template('<button expr62="expr62" type="button"> </button>', [{
'redundantAttribute': 'expr62',
'selector': '[expr62]',
'expressions': [{
'type': expressionTypes.TEXT,
'childNodeIndex': 0,
'evaluate': function(scope) {
return scope.month.label;
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['fluid ui button ', scope.disabled].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onclick',
'evaluate': function(scope) {
return () => scope.clickMonth(scope.month);
}
}]
}]),
'redundantAttribute': 'expr61',
'selector': '[expr61]',
'itemName': 'month',
'indexName': null,
'evaluate': function(scope) {
return scope.state.months;
}
}]
)
}, {
'type': bindingTypes.IF,
'evaluate': function(scope) {
return scope.yearSelecting;
},
'redundantAttribute': 'expr63',
'selector': '[expr63]',
'template': template(
'<div class="ui divider"></div><div class="ui four column padded grid dp-month"><div expr64="expr64" class="column"></div></div>',
[{
'type': bindingTypes.EACH,
'getKey': null,
'condition': null,
'template': template('<button expr65="expr65" type="button"> </button>', [{
'redundantAttribute': 'expr65',
'selector': '[expr65]',
'expressions': [{
'type': expressionTypes.TEXT,
'childNodeIndex': 0,
'evaluate': function(scope) {
return scope.year;
}
}, {
'type': expressionTypes.ATTRIBUTE,
'name': 'class',
'evaluate': function(scope) {
return ['fluid ui button ', scope.disabled].join('');
}
}, {
'type': expressionTypes.EVENT,
'name': 'onclick',
'evaluate': function(scope) {
return () => scope.clickYear(scope.year);
}
}]
}]),
'redundantAttribute': 'expr64',
'selector': '[expr64]',
'itemName': 'year',
'indexName': null,
'evaluate': function(scope) {
return scope.state.years;
}
}]
)
}]
);
},
'name': 'su-datepicker'
};
export default suDatepicker;