From 21d8a601936ae48278e668e320b03123dd0043b6 Mon Sep 17 00:00:00 2001 From: Brandy Carney Date: Wed, 25 Oct 2017 15:34:51 -0400 Subject: [PATCH] refactor(datetime): change capitalization from DateTime to Datetime --- packages/core/src/components.d.ts | 2 +- .../src/components/datetime/datetime-util.ts | 26 ++++----- .../src/components/datetime/datetime.ios.scss | 12 ++--- .../src/components/datetime/datetime.md.scss | 12 ++--- .../src/components/datetime/datetime.scss | 2 +- .../core/src/components/datetime/datetime.tsx | 54 +++++++++---------- .../src/components/datetime/datetime.wp.scss | 18 +++---- .../src/components/datetime/test/basic.html | 2 +- packages/ionic-angular/BREAKING.md | 18 +++++++ 9 files changed, 82 insertions(+), 64 deletions(-) diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts index 4378d4e565..7fa01e3701 100644 --- a/packages/core/src/components.d.ts +++ b/packages/core/src/components.d.ts @@ -601,7 +601,7 @@ declare global { } } -import { DateTime as IonDatetime } from './components/datetime/datetime'; +import { Datetime as IonDatetime } from './components/datetime/datetime'; interface HTMLIonDatetimeElement extends IonDatetime, HTMLElement { } diff --git a/packages/core/src/components/datetime/datetime-util.ts b/packages/core/src/components/datetime/datetime-util.ts index 9c7af53c1d..05c5ce4dfc 100644 --- a/packages/core/src/components/datetime/datetime-util.ts +++ b/packages/core/src/components/datetime/datetime-util.ts @@ -1,7 +1,7 @@ import { isArray, isBlank, isString } from '../../utils/helpers'; -export function renderDateTime(template: string, value: DateTimeData, locale: LocaleData) { +export function renderDatetime(template: string, value: DatetimeData, locale: LocaleData) { if (isBlank(value)) { return ''; } @@ -35,7 +35,7 @@ export function renderDateTime(template: string, value: DateTimeData, locale: Lo } -export function renderTextFormat(format: string, value: any, date: DateTimeData, locale: LocaleData): string { +export function renderTextFormat(format: string, value: any, date: DatetimeData, locale: LocaleData): string { if (format === FORMAT_DDDD || format === FORMAT_DDD) { try { @@ -98,7 +98,7 @@ export function renderTextFormat(format: string, value: any, date: DateTimeData, } -export function dateValueRange(format: string, min: DateTimeData, max: DateTimeData): any[] { +export function dateValueRange(format: string, min: DatetimeData, max: DatetimeData): any[] { let opts: any[] = []; let i: number; @@ -154,7 +154,7 @@ export function dateSortValue(year: number, month: number, day: number, hour: nu return parseInt(`1${fourDigit(year)}${twoDigit(month)}${twoDigit(day)}${twoDigit(hour)}${twoDigit(minute)}`, 10); } -export function dateDataSortValue(data: DateTimeData): number { +export function dateDataSortValue(data: DatetimeData): number { if (data) { return dateSortValue(data.year, data.month, data.day, data.hour, data.minute); } @@ -173,7 +173,7 @@ export function isLeapYear(year: number): boolean { const ISO_8601_REGEXP = /^(\d{4}|[+\-]\d{6})(?:-(\d{2})(?:-(\d{2}))?)?(?:T(\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/; const TIME_REGEXP = /^((\d{2}):(\d{2})(?::(\d{2})(?:\.(\d{3}))?)?(?:(Z)|([+\-])(\d{2})(?::(\d{2}))?)?)?$/; -export function parseDate(val: any): DateTimeData { +export function parseDate(val: any): DatetimeData { // manually parse IS0 cuz Date.parse cannot be trusted // ISO 8601 format: 1994-12-15T13:47:20Z let parse: any[]; @@ -229,22 +229,22 @@ export function parseDate(val: any): DateTimeData { } -export function updateDate(existingData: DateTimeData, newData: any): boolean { +export function updateDate(existingData: DatetimeData, newData: any): boolean { if (newData && newData !== '') { if (isString(newData)) { // new date is a string, and hopefully in the ISO format - // convert it to our DateTimeData if a valid ISO + // convert it to our DatetimeData if a valid ISO newData = parseDate(newData); if (newData) { - // successfully parsed the ISO string to our DateTimeData + // successfully parsed the ISO string to our DatetimeData Object.assign(existingData, newData); return true; } } else if ((newData.year || newData.hour || newData.month || newData.day || newData.minute || newData.second)) { // newData is from of a datetime picker's selected values - // update the existing DateTimeData data with the new values + // update the existing DatetimeData data with the new values // do some magic for 12-hour values if (newData.ampm && newData.hour) { @@ -257,7 +257,7 @@ export function updateDate(existingData: DateTimeData, newData: any): boolean { } // merge new values from the picker's selection - // to the existing DateTimeData values + // to the existing DatetimeData values for (var k in newData) { (existingData)[k] = newData[k].value; } @@ -312,7 +312,7 @@ export function parseTemplate(template: string): string[] { } -export function getValueFromFormat(date: DateTimeData, format: string) { +export function getValueFromFormat(date: DatetimeData, format: string) { if (format === FORMAT_A || format === FORMAT_a) { return (date.hour < 12 ? 'am' : 'pm'); } @@ -333,7 +333,7 @@ export function convertFormatToKey(format: string): string { } -export function convertDataToISO(data: DateTimeData): string { +export function convertDataToISO(data: DatetimeData): string { // https://www.w3.org/TR/NOTE-datetime let rtn = ''; @@ -460,7 +460,7 @@ function fourDigit(val: number): string { } -export interface DateTimeData { +export interface DatetimeData { [key: string]: any; year?: number; month?: number; diff --git a/packages/core/src/components/datetime/datetime.ios.scss b/packages/core/src/components/datetime/datetime.ios.scss index 6bba4321cc..4abb5bfc1f 100644 --- a/packages/core/src/components/datetime/datetime.ios.scss +++ b/packages/core/src/components/datetime/datetime.ios.scss @@ -1,22 +1,22 @@ @import "../../themes/ionic.globals.ios"; @import "./datetime"; -// iOS DateTime +// iOS Datetime // -------------------------------------------------- -/// @prop - Padding top of the DateTime component +/// @prop - Padding top of the Datetime component $datetime-ios-padding-top: $item-ios-padding-top !default; -/// @prop - Padding end of the DateTime component +/// @prop - Padding end of the Datetime component $datetime-ios-padding-end: ($item-ios-padding-end / 2) !default; -/// @prop - Padding bottom of the DateTime component +/// @prop - Padding bottom of the Datetime component $datetime-ios-padding-bottom: $item-ios-padding-bottom !default; -/// @prop - Padding start of the DateTime component +/// @prop - Padding start of the Datetime component $datetime-ios-padding-start: $item-ios-padding-start !default; -/// @prop - Color of the DateTime placeholder +/// @prop - Color of the Datetime placeholder $datetime-ios-placeholder-color: #999 !default; diff --git a/packages/core/src/components/datetime/datetime.md.scss b/packages/core/src/components/datetime/datetime.md.scss index 75e4140675..f29e269873 100644 --- a/packages/core/src/components/datetime/datetime.md.scss +++ b/packages/core/src/components/datetime/datetime.md.scss @@ -1,22 +1,22 @@ @import "../../themes/ionic.globals.md"; @import "./datetime"; -// Material Design DateTime +// Material Design Datetime // -------------------------------------------------- -/// @prop - Padding top of the DateTime component +/// @prop - Padding top of the Datetime component $datetime-md-padding-top: $item-md-padding-top !default; -/// @prop - Padding end of the DateTime component +/// @prop - Padding end of the Datetime component $datetime-md-padding-end: ($item-md-padding-end / 2) !default; -/// @prop - Padding bottom of the DateTime component +/// @prop - Padding bottom of the Datetime component $datetime-md-padding-bottom: $item-md-padding-bottom !default; -/// @prop - Padding start of the DateTime component +/// @prop - Padding start of the Datetime component $datetime-md-padding-start: $item-md-padding-start !default; -/// @prop - Color of the DateTime placeholder +/// @prop - Color of the Datetime placeholder $datetime-md-placeholder-color: #999 !default; diff --git a/packages/core/src/components/datetime/datetime.scss b/packages/core/src/components/datetime/datetime.scss index bd3dd010dc..2bd06cc2a4 100644 --- a/packages/core/src/components/datetime/datetime.scss +++ b/packages/core/src/components/datetime/datetime.scss @@ -1,6 +1,6 @@ @import "../../themes/ionic.globals"; -// DateTime +// Datetime // -------------------------------------------------- ion-datetime { diff --git a/packages/core/src/components/datetime/datetime.tsx b/packages/core/src/components/datetime/datetime.tsx index 1e1441aab4..0e0d1475dc 100644 --- a/packages/core/src/components/datetime/datetime.tsx +++ b/packages/core/src/components/datetime/datetime.tsx @@ -1,20 +1,20 @@ import { Component, CssClassMap, Event, EventEmitter, Prop, PropDidChange, State } from '@stencil/core'; -import { convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, DateTimeData, dateValueRange, daysInMonth, getValueFromFormat, LocaleData, parseDate, parseTemplate, renderTextFormat, renderDateTime, updateDate } from './datetime-util'; +import { convertFormatToKey, convertToArrayOfNumbers, convertToArrayOfStrings, dateDataSortValue, dateSortValue, DatetimeData, dateValueRange, daysInMonth, getValueFromFormat, LocaleData, parseDate, parseTemplate, renderTextFormat, renderDatetime, updateDate } from './datetime-util'; import { clamp, isBlank, isObject } from '../../utils/helpers'; import { Picker, PickerColumn, PickerController, PickerOptions } from '../../index'; /** - * @name DateTime + * @name Datetime * @description - * The DateTime component is used to present an interface which makes it easy for + * The Datetime component is used to present an interface which makes it easy for * users to select dates and times. Tapping on `` will display a picker * interface that slides up from the bottom of the page. The picker then displays * scrollable columns that can be used to individually select years, months, days, - * hours and minute values. The DateTime component is similar to the native - * `` element, however, Ionic's DateTime component makes + * hours and minute values. The Datetime component is similar to the native + * `` element, however, Ionic's Datetime component makes * it easy to display the date and time in a preferred format, and manage the datetime * values. * @@ -28,7 +28,7 @@ import { Picker, PickerColumn, PickerController, PickerOptions } from '../../ind * * ## Display and Picker Formats * - * The DateTime component displays the values in two places: in the `` + * The Datetime component displays the values in two places: in the `` * component, and in the interface that is presented from the bottom of the screen. * The following chart lists all of the formats that can be used. * @@ -172,7 +172,7 @@ import { Picker, PickerColumn, PickerController, PickerOptions } from '../../ind * At this time, there is no one-size-fits-all standard to automatically choose the correct * language/spelling for a month name, or day of the week name, depending on the language * or locale. Good news is that there is an - * [Intl.DateTimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DateTimeFormat) + * [Intl.DatetimeFormat](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/DatetimeFormat) * standard which *most* browsers have adopted. However, at this time the standard has not * been fully implemented by all popular browsers so Ionic is unavailable to take advantage * of it *yet*. Additionally, Angular also provides an internationalization service, but it @@ -254,7 +254,7 @@ import { Picker, PickerColumn, PickerController, PickerOptions } from '../../ind theme: 'datetime' } }) -export class DateTime { +export class Datetime { [key: string]: any; private datetimeId: string; @@ -262,9 +262,9 @@ export class DateTime { private picker: Picker; locale: LocaleData = {}; - dateTimeMin: DateTimeData = {}; - dateTimeMax: DateTimeData = {}; - dateTimeValue: DateTimeData = {}; + datetimeMin: DatetimeData = {}; + datetimeMax: DatetimeData = {}; + datetimeValue: DatetimeData = {}; @State() text: any; @@ -448,7 +448,7 @@ export class DateTime { * Update the datetime text and datetime value */ updateValue() { - updateDate(this.dateTimeValue, this.value); + updateDate(this.datetimeValue, this.value); this.updateText(); } @@ -546,7 +546,7 @@ export class DateTime { values = convertToArrayOfNumbers(this[key + 'Values'], key); } else { // use the default date part values - values = dateValueRange(format, this.dateTimeMin, this.dateTimeMax); + values = dateValueRange(format, this.datetimeMin, this.datetimeMax); } const column: PickerColumn = { @@ -562,7 +562,7 @@ export class DateTime { // cool, we've loaded up the columns with options // preselect the option for this column - const optValue = getValueFromFormat(this.dateTimeValue, format); + const optValue = getValueFromFormat(this.datetimeValue, format); const selectedIndex = column.options.findIndex(opt => opt.value === optValue); if (selectedIndex >= 0) { // set the select index for this column's options @@ -574,8 +574,8 @@ export class DateTime { }); // Normalize min/max - const min = this.dateTimeMin; - const max = this.dateTimeMax; + const min = this.datetimeMin; + const max = this.datetimeMax; ['month', 'day', 'hour', 'minute'] .filter(name => !columns.find(column => column.name === name)) .forEach(name => { @@ -594,8 +594,8 @@ export class DateTime { */ validate() { const today = new Date(); - const minCompareVal = dateDataSortValue(this.dateTimeMin); - const maxCompareVal = dateDataSortValue(this.dateTimeMax); + const minCompareVal = dateDataSortValue(this.datetimeMin); + const maxCompareVal = dateDataSortValue(this.datetimeMax); const yearCol = this.picker.getColumn('year'); let selectedYear: number = today.getFullYear(); @@ -665,8 +665,8 @@ export class DateTime { this.max = todaysYear.toString(); } } - const min = this.dateTimeMin = parseDate(this.min); - const max = this.dateTimeMax = parseDate(this.max); + const min = this.datetimeMin = parseDate(this.min); + const max = this.datetimeMax = parseDate(this.max); min.year = min.year || todaysYear; max.year = max.year || todaysYear; @@ -783,14 +783,14 @@ export class DateTime { updateText() { // create the text of the formatted data const template = this.displayFormat || this.pickerFormat || DEFAULT_FORMAT; - this.text = renderDateTime(template, this.dateTimeValue, this.locale); + this.text = renderDatetime(template, this.datetimeValue, this.locale); } /** * @hidden */ hasValue(): boolean { - const val = this.dateTimeValue; + const val = this.datetimeValue; return val && isObject(val) && Object.keys(val).length > 0; @@ -808,19 +808,19 @@ export class DateTime { let addPlaceholderClass = false; // If selected text has been passed in, use that first - let dateTimeText = this.text; - if (!dateTimeText && this.placeholder) { - dateTimeText = this.placeholder; + let datetimeText = this.text; + if (!datetimeText && this.placeholder) { + datetimeText = this.placeholder; addPlaceholderClass = true; } - const dateTimeTextClasses: CssClassMap = { + const datetimeTextClasses: CssClassMap = { 'datetime-text': true, 'datetime-placeholder': addPlaceholderClass }; return [ -
{ dateTimeText }
, +
{ datetimeText }
,