8000 Modernize date-picker component by vladucu · Pull Request #619 · smile-io/ember-polaris · GitHub
[go: up one dir, main page]
More Web Proxy on the site http://driver.im/
Skip to content
This repository was archived by the owner on Aug 2, 2024. It is now read-only.

Modernize date-picker component #619

Merged
merged 8 commits into from
Jun 23, 2020
Merged

Modernize date-picker component #619

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
81a463b
Convert date-picker component to ES6 class
vladucu Jun 23, 2020
e74608d
Convert date-picker component to angle-bracket
vladucu Jun 23, 2020
6731efd
Misc js cleanup
vladucu Jun 23, 2020
478aad6
Misc template cleanup
vladucu Jun 23, 2020
a8097cc
Convert date-picker to tagless components
vladucu Jun 23, 2020
b2db472
Minor tweaks
vladucu Jun 23, 2020
e483d52
Skip some tests
vladucu Jun 23, 2020
e7cdec1
Skip another test temporarily
vladucu Jun 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
300 changes: 121 additions & 179 deletions addon/components/polaris-date-picker.js
View file
Open in desktop

Large diffs are not rendered by default.

265 changes: 101 additions & 164 deletions addon/components/polaris-date-picker/day.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Component from '@ember/component';
import { computed } from '@ember/object';
import { tagName, layout as templateLayout } from '@ember-decorators/component';
import layout from '../../templates/components/polaris-date-picker/day';
import {
monthsArray,
Expand All @@ -10,232 +11,168 @@ import {
isDateAfter,
} from '../../utils/dates';

export default Component.extend({
tagName: '',

layout,

@tagName('')
@templateLayout(layout)
export default class PolarisDatePickerDay extends Component {
/**
* @property focusedDate
* @public
* @type {Date}
* @default null
* @public
*/
focusedDate: null,
focusedDate = null;

/**
* @property day
* @public
* @type {Date}
* @default null
* @public
*/
day: null,
day = null;

/**
* @property selectedDates
* @public
* @type {Object}
* @default null
* @public
*/
selectedDates: null,
selectedDates = null;

/**
* @property disableDatesBefore
* @public
* @type {Date}
* @default null
* @public
*/
disableDatesBefore: null,
disableDatesBefore = null;

/**
* @property disableDatesAfter
* @public
* @type {Date}
* @default null
* @public
*/
disableDatesAfter: null,
disableDatesAfter = null;

/**
* @property allowRange
* @public
* @type {Boolean}
* @default false
* @public
*/
allowRange: false,
allowRange = false;

/**
* @property onClick
* @public
* @type {Function}
* @default noop
* @public
*/
onClick(/* day */) {},
onClick /* day */() {}

/**
* @property onHover
* @public
* @type {Function}
* @default noop
* @public
*/
onHover(/* day */) {},
onHover /* day */() {}

/**
* @property onFocus
* @public
* @type {Function}
* @default noop
* @public
*/
onFocus(/* day */) {},

dayButtonClasses: computed(
'selected',
'disabled',
'isDateToday',
'inHoveringRange',
'inRange',
function() {
let classNames = ['Polaris-DatePicker__Day'];
let {
selected,
disabled,
isDateToday,
inHoveringRange,
inRange,
} = this.getProperties(
'selected',
'disabled',
'isDateToday',
'inHoveringRange',
'inRange'
);

if (selected) {
classNames.push('Polaris-DatePicker__Day--selected');
}

if (disabled) {
classNames.push('Polaris-DatePicker__Day--disabled');
}

if (isDateToday) {
classNames.push('Polaris-DatePicker__Day--today');
}

if (inHoveringRange || inRange) {
classNames.push('Polaris-DatePicker__Day--inRange');
}

return classNames.join(' ');
onFocus /* day */() {}

@computed('selected', 'disabled', 'isDateToday', 'inHoveringRange', 'inRange')
get dayButtonClasses() {
let classNames = ['Polaris-DatePicker__Day'];
let { selected, disabled, isDateToday, inHoveringRange, inRange } = this;

if (selected) {
classNames.push('Polaris-DatePicker__Day--selected');
}
).readOnly(),

date: computed('day', function() {
let day = this.get('day');
return day.getDate();
}).readOnly(),
if (disabled) {
classNames.push('Polaris-DatePicker__Day--disabled');
}

isDateToday: computed('day', function() {
let day = this.get('day');
return isSameDay(new Date(), day);
}).readOnly(),
if (isDateToday) {
classNames.push('Polaris-DatePicker__Day--today');
}

if (inHoveringRange || inRange) {
classNames.push('Polaris-DatePicker__Day--inRange');
}

focused: computed('focusedDate', 'day', function() {
let { focusedDate, day } = this.getProperties('focusedDate', 'day');
return classNames.join(' ');
}

return focusedDate != null && isSameDay(day, focusedDate);
}).readOnly(),
@computed('day')
get date() {
return this.day.getDate();
}

selected: computed('selectedDates', 'day', function() {
let { selectedDates, day } = this.getProperties('selectedDates', 'day');
@computed('day')
get isDateToday() {
return isSameDay(new Date(), this.day);
}

@computed('focusedDate', 'day')
get focused() {
let { focusedDate, day } = this;
return focusedDate != null && isSameDay(day, focusedDate);
}

@computed('selectedDates', 'day')
get selected() {
let { selectedDates, day } = this;
return selectedDates != null && dateIsSelected(day, selectedDates);
}).readOnly(),
}

inRange: computed('selectedDates', 'day', function() {
let selectedDates = this.get('selectedDates');
let day = this.get('day');
@computed('selectedDates', 'day')
get inRange() {
let { selectedDates, day } = this;
return selectedDates != null && dateIsInRange(day, selectedDates);
}).readOnly(),

disabled: computed(
'day',
'disableDatesBefore',
'disableDatesAfter',
function() {
let { day, disableDatesBefore, disableDatesAfter } = this.getProperties(
'day',
'disableDatesBefore',
'disableDatesAfter'
);

return (
(disableDatesBefore && isDateBefore(day, disableDatesBefore)) ||
(disableDatesAfter && isDateAfter(day, disableDatesAfter))
);
}
).readOnly(),
}

@computed('day', 'disableDatesBefore', 'disableDatesAfter')
get disabled() {
let { day, disableDatesBefore, disableDatesAfter } = this;

return (
(disableDatesBefore && isDateBefore(day, disableDatesBefore)) ||
(disableDatesAfter && isDateAfter(day, disableDatesAfter))
);
}

ariaLabel: computed('day', 'isDateToday', 'date', function() {
let isDateToday = this.get('isDateToday');
let day = this.get('day');
@computed('day', 'isDateToday', 'date')
get ariaLabel() {
let { isDateToday, day, date } = this;
let month = monthsArray[day.getMonth()];
let date = this.get('date');
let year = day.getFullYear();

return `${isDateToday ? 'Today ' : ''}${month} ${date} ${year}`;
}).readOnly(),

tabIndex: computed(
'focused',
'selected',
'disabled',
'date',
'isDateToday',
function() {
let {
focused,
selected,
disabled,
date,
isDateToday,
} = this.getProperties(
'focused',
'selected',
'disabled',
'date',
'isDateToday'
);

return (focused || selected || isDateToday || date === 1) && !disabled
? 0
: -1;
}
).readOnly(),

inHoveringRange: computed(
'day',
'selectedDates',
'hoverDate',
'allowRange',
function() {
let { day, allowRange } = this.getProperties('day', 'allowRange');
}

if (!allowRange || day === null) {
return false;
}
@computed('focused', 'selected', 'disabled', 'date', 'isDateToday')
get tabIndex() {
let { focused, selected, disabled, date, isDateToday } = this;

let { selectedDates = {}, hoverDate } = this.getProperties(
'selectedDates',
'hoverDate'
);
return (focused || selected || isDateToday || date === 1) && !disabled
? 0
: -1;
}

const { start, end } = selectedDates;
@computed('day', 'selectedDates', 'hoverDate', 'allowRange')
get inHoveringRange() {
let { day, allowRange } = this;

return isSameDay(start, end) && day > start && day <= hoverDate;
if (!allowRange || day === null) {
return false;
}
).readOnly(),

dataTestDatePickerDate: computed('day', function() {
return this.get('day').toISOString();
}).readOnly(),
});
let { selectedDates = {}, hoverDate } = this;
const { start, end } = selectedDates;

return isSameDay(start, end) && day > start && day <= hoverDate;
}

@computed('day')
get dataTestDatePickerDate() {
return this.day.toISOString();
}
}
Loading
0