From 6c4ae2ff4b98c9940cbc4af1139bbc279bfb307c Mon Sep 17 00:00:00 2001 From: Dmitriy Shekhovtsov Date: Mon, 19 Jun 2017 17:46:49 +0300 Subject: [PATCH] chore(timepicker): removed old timepicker implementation --- demo/src/ng-api-doc.ts | 303 +++++++++------- src/old-timepicker/index.ts | 3 - src/old-timepicker/timepicker.component.ts | 386 --------------------- src/old-timepicker/timepicker.config.ts | 26 -- src/old-timepicker/timepicker.module.ts | 19 - 5 files changed, 181 insertions(+), 556 deletions(-) delete mode 100644 src/old-timepicker/index.ts delete mode 100644 src/old-timepicker/timepicker.component.ts delete mode 100644 src/old-timepicker/timepicker.config.ts delete mode 100644 src/old-timepicker/timepicker.module.ts diff --git a/demo/src/ng-api-doc.ts b/demo/src/ng-api-doc.ts index 34a2e50736..a2e3cdfa3b 100644 --- a/demo/src/ng-api-doc.ts +++ b/demo/src/ng-api-doc.ts @@ -903,6 +903,13 @@ export const ngdoc: any = { } ] }, + "Action": { + "fileName": "src/mini-ngrx/index.ts", + "className": "Action", + "description": "", + "methods": [], + "properties": [] + }, "ModalBackdropComponent": { "fileName": "src/modal/modal-backdrop.component.ts", "className": "ModalBackdropComponent", @@ -1005,6 +1012,142 @@ export const ngdoc: any = { } ] }, + "TimepickerComponent": { + "fileName": "src/timepicker/timepicker.component.ts", + "className": "TimepickerComponent", + "description": "", + "selector": "timepicker", + "inputs": [ + { + "name": "arrowkeys", + "type": "boolean", + "description": "

if true up/down arrowkeys inside hours and minutes inputs will change time

\n" + }, + { + "name": "hourStep", + "type": "number", + "description": "

hours change step

\n" + }, + { + "name": "max", + "type": "Date", + "description": "

maximum time user can select

\n" + }, + { + "name": "meridians", + "type": "string[]", + "description": "

meridian labels based on locale

\n" + }, + { + "name": "min", + "type": "Date", + "description": "

minimum time user can select

\n" + }, + { + "name": "minuteStep", + "type": "number", + "description": "

hours change step

\n" + }, + { + "name": "mousewheel", + "type": "boolean", + "description": "

if true scroll inside hours and minutes inputs will change time

\n" + }, + { + "name": "readonlyInput", + "type": "boolean", + "description": "

if true hours and minutes fields will be readonly

\n" + }, + { + "name": "secondsStep", + "type": "number", + "description": "

seconds change step

\n" + }, + { + "name": "showMeridian", + "type": "boolean", + "description": "" + }, + { + "name": "showSeconds", + "type": "boolean", + "description": "" + }, + { + "name": "showSpinners", + "type": "boolean", + "description": "

if true spinner arrows above and below the inputs will be shown

\n" + } + ], + "outputs": [], + "properties": [], + "methods": [] + }, + "TimepickerConfig": { + "fileName": "src/timepicker/timepicker.config.ts", + "className": "TimepickerConfig", + "description": "

Provides default configuration values for timepicker

\n", + "methods": [], + "properties": [ + { + "name": "arrowkeys", + "defaultValue": "true", + "type": "boolean", + "description": "

if true up/down arrowkeys inside hours and minutes inputs will change time

\n" + }, + { + "name": "hourStep", + "defaultValue": "1", + "type": "number", + "description": "

hours change step

\n" + }, + { + "name": "max", + "type": "Date", + "description": "

maximum time user can select

\n" + }, + { + "name": "meridians", + "type": "string[]", + "description": "

meridian labels based on locale

\n" + }, + { + "name": "min", + "type": "Date", + "description": "

minimum time user can select

\n" + }, + { + "name": "minuteStep", + "defaultValue": "5", + "type": "number", + "description": "

hours change step

\n" + }, + { + "name": "mousewheel", + "defaultValue": "true", + "type": "boolean", + "description": "

if true scroll inside hours and minutes inputs will change time

\n" + }, + { + "name": "readonlyInput", + "defaultValue": "false", + "type": "boolean", + "description": "

if true hours and minutes fields will be readonly

\n" + }, + { + "name": "showMeridian", + "defaultValue": "true", + "type": "boolean", + "description": "

if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM

\n" + }, + { + "name": "showSpinners", + "defaultValue": "true", + "type": "boolean", + "description": "

if true spinner arrows above and below the inputs will be shown

\n" + } + ] + }, "PagerComponent": { "fileName": "src/pagination/pager.component.ts", "className": "PagerComponent", @@ -1719,131 +1862,47 @@ export const ngdoc: any = { } ] }, - "TimepickerComponent": { - "fileName": "src/timepicker/timepicker.component.ts", - "className": "TimepickerComponent", + "TimepickerActions": { + "fileName": "src/timepicker/reducer/timepicker.actions.ts", + "className": "TimepickerActions", "description": "", - "selector": "timepicker", - "inputs": [ - { - "name": "arrowkeys", - "type": "boolean", - "description": "

if true up/down arrowkeys inside hours and minutes inputs will change time

\n" - }, - { - "name": "hourStep", - "type": "number", - "description": "

hours change step

\n" - }, - { - "name": "max", - "type": "Date", - "description": "

maximum time user can select

\n" - }, - { - "name": "meridians", - "type": "string[]", - "description": "

meridian labels based on locale

\n" - }, - { - "name": "min", - "type": "Date", - "description": "

minimum time user can select

\n" - }, - { - "name": "minuteStep", - "type": "number", - "description": "

hours change step

\n" - }, - { - "name": "mousewheel", - "type": "boolean", - "description": "

if true scroll inside hours and minutes inputs will change time

\n" - }, - { - "name": "readonlyInput", - "type": "boolean", - "description": "

if true hours and minutes fields will be readonly

\n" - }, - { - "name": "showMeridian", - "type": "boolean", - "description": "

if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM

\n" - }, - { - "name": "showSpinners", - "type": "boolean", - "description": "

if true spinner arrows above and below the inputs will be shown

\n" - } - ], - "outputs": [], - "properties": [], - "methods": [] + "methods": [], + "properties": [] }, - "TimepickerConfig": { - "fileName": "src/timepicker/timepicker.config.ts", - "className": "TimepickerConfig", - "description": "

Provides default configuration values for timepicker

\n", + "TimepickerState": { + "fileName": "src/timepicker/reducer/timepicker.reducer.ts", + "className": "TimepickerState", + "description": "", "methods": [], - "properties": [ - { - "name": "arrowkeys", - "defaultValue": "true", - "type": "boolean", - "description": "

if true up/down arrowkeys inside hours and minutes inputs will change time

\n" - }, - { - "name": "hourStep", - "defaultValue": "1", - "type": "number", - "description": "

hours change step

\n" - }, - { - "name": "max", - "type": "number", - "description": "

maximum time user can select

\n" - }, - { - "name": "meridians", - "type": "string[]", - "description": "

meridian labels based on locale

\n" - }, - { - "name": "min", - "type": "number", - "description": "

minimum time user can select

\n" - }, - { - "name": "minuteStep", - "defaultValue": "5", - "type": "number", - "description": "

hours change step

\n" - }, - { - "name": "mousewheel", - "defaultValue": "true", - "type": "boolean", - "description": "

if true scroll inside hours and minutes inputs will change time

\n" - }, - { - "name": "readonlyInput", - "defaultValue": "false", - "type": "boolean", - "description": "

if true hours and minutes fields will be readonly

\n" - }, - { - "name": "showMeridian", - "defaultValue": "true", - "type": "boolean", - "description": "

if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM

\n" - }, - { - "name": "showSpinners", - "defaultValue": "true", - "type": "boolean", - "description": "

if true spinner arrows above and below the inputs will be shown

\n" - } - ] + "properties": [] + }, + "TimepickerStore": { + "fileName": "src/timepicker/reducer/timepicker.store.ts", + "className": "TimepickerStore", + "description": "", + "methods": [], + "properties": [] + }, + "TimeUnit": { + "fileName": "src/timepicker/timepicker.models.ts", + "className": "TimeUnit", + "description": "", + "methods": [], + "properties": [] + }, + "TimepickerControls": { + "fileName": "src/timepicker/timepicker.models.ts", + "className": "TimepickerControls", + "description": "", + "methods": [], + "properties": [] + }, + "TimepickerComponentState": { + "fileName": "src/timepicker/timepicker.models.ts", + "className": "TimepickerComponentState", + "description": "", + "methods": [], + "properties": [] }, "TooltipContainerComponent": { "fileName": "src/tooltip/tooltip-container.component.ts", diff --git a/src/old-timepicker/index.ts b/src/old-timepicker/index.ts deleted file mode 100644 index fe8a961676..0000000000 --- a/src/old-timepicker/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export { TimepickerConfig } from './timepicker.config'; -export { TimepickerComponent } from './timepicker.component'; -export { TimepickerModule } from './timepicker.module'; diff --git a/src/old-timepicker/timepicker.component.ts b/src/old-timepicker/timepicker.component.ts deleted file mode 100644 index 2815233587..0000000000 --- a/src/old-timepicker/timepicker.component.ts +++ /dev/null @@ -1,386 +0,0 @@ -// tslint:disable max-file-line-count -import { Component, Input, OnInit, forwardRef } from '@angular/core'; -import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'; -import { TimepickerConfig } from './timepicker.config'; - -export const TIMEPICKER_CONTROL_VALUE_ACCESSOR: any = { - provide: NG_VALUE_ACCESSOR, - useExisting: forwardRef(() => TimepickerComponent), - multi: true -}; - -// todo: refactor directive has to many functions! (extract to stateless helper) -// todo: use moment js? -// todo: implement `time` validator -// todo: replace increment/decrement blockers with getters, or extract -// todo: unify work with selected -function isDefined(value: any): boolean { - return typeof value !== 'undefined'; -} - -function addMinutes(date: any, minutes: number): Date { - let dt = new Date(date.getTime() + minutes * 60000); - let newDate = new Date(date); - newDate.setHours(dt.getHours(), dt.getMinutes()); - return newDate; -} - -@Component({ - selector: 'timepicker', - template: ` - - - - - - - - - - - - - - - - - - - - - -
 
- - : - -
 
- `, - providers: [TIMEPICKER_CONTROL_VALUE_ACCESSOR] -}) -export class TimepickerComponent implements ControlValueAccessor, OnInit { - /** hours change step */ - @Input() public hourStep: number; - /** hours change step */ - @Input() public minuteStep: number; - /** if true hours and minutes fields will be readonly */ - @Input() public readonlyInput: boolean; - /** if true scroll inside hours and minutes inputs will change time */ - @Input() public mousewheel: boolean; - /** if true up/down arrowkeys inside hours and minutes inputs will change time */ - @Input() public arrowkeys: boolean; - /** if true spinner arrows above and below the inputs will be shown */ - @Input() public showSpinners: boolean; - /** minimum time user can select */ - @Input() public min: Date; - /** maximum time user can select */ - @Input() public max: Date; - /** meridian labels based on locale */ - @Input() public meridians: string[]; - - /** if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM */ - @Input() - public get showMeridian(): boolean { - return this._showMeridian; - } - - public set showMeridian(value: boolean) { - this._showMeridian = value; - // || !this.$error.time - // if (true) { - this.updateTemplate(); - return; - // } - // Evaluate from template - /*let hours = this.getHoursFromTemplate(); - let minutes = this.getMinutesFromTemplate(); - if (isDefined(hours) && isDefined(minutes)) { - this.selected.setHours(hours); - this.refresh(); - }*/ - } - - public onChange: any = Function.prototype; - public onTouched: any = Function.prototype; - - // input values - public hours: string; - public minutes: string; - - // validation - public invalidHours: any; - public invalidMinutes: any; - - public meridian: any; // ?? - - // result value - protected _selected: Date = new Date(); - protected _showMeridian: boolean; - - protected get selected(): Date { - return this._selected; - } - - protected set selected(v: Date) { - if (v) { - this._selected = v; - this.updateTemplate(); - this.onChange(this.selected); - } - } - - protected config: TimepickerConfig; - - public constructor(_config: TimepickerConfig) { - this.config = _config; - Object.assign(this, _config); - } - - // todo: add formatter value to Date object - public ngOnInit(): void { - // todo: take in account $locale.DATETIME_FORMATS.AMPMS; - if (this.mousewheel) { - // this.setupMousewheelEvents(); - } - - if (this.arrowkeys) { - // this.setupArrowkeyEvents(); - } - - // this.setupInputEvents(); - } - - public writeValue(v: any): void { - if (v === this.selected) { - return; - } - if (v && v instanceof Date) { - this.selected = v; - return; - } - this.selected = v ? new Date(v) : void 0; - } - - public registerOnChange(fn: (_: any) => {}): void { - this.onChange = fn; - } - - public registerOnTouched(fn: () => {}): void { - this.onTouched = fn; - } - - public setDisabledState(isDisabled: boolean): void { - this.readonlyInput = isDisabled; - } - - public updateHours(): void { - if (this.readonlyInput) { - return; - } - - let hours = this.getHoursFromTemplate(); - let minutes = this.getMinutesFromTemplate(); - this.invalidHours = !isDefined(hours); - this.invalidMinutes = !isDefined(minutes); - - if (this.invalidHours || this.invalidMinutes) { - // TODO: needed a validation functionality. - return; - // todo: validation? - // invalidate(true); - } - - this.selected.setHours(hours); - this.invalidHours = (this.selected < this.min || this.selected > this.max); - if (this.invalidHours) { - // todo: validation? - // invalidate(true); - return; - } else { - this.refresh(/*'h'*/); - } - } - - public hoursOnBlur(): void { - if (this.readonlyInput) { - return; - } - - // todo: binded with validation - if (!this.invalidHours && parseInt(this.hours, 10) < 10) { - this.hours = this.pad(this.hours); - } - } - - public updateMinutes(): void { - if (this.readonlyInput) { - return; - } - - let minutes = this.getMinutesFromTemplate(); - let hours = this.getHoursFromTemplate(); - this.invalidMinutes = !isDefined(minutes); - this.invalidHours = !isDefined(hours); - - if (this.invalidMinutes || this.invalidHours) { - // TODO: needed a validation functionality. - return; - // todo: validation - // invalidate(undefined, true); - } - - this.selected.setMinutes(minutes); - this.invalidMinutes = (this.selected < this.min || this.selected > this.max); - if (this.invalidMinutes) { - // todo: validation - // invalidate(undefined, true); - return; - } else { - this.refresh(/*'m'*/); - } - } - - public minutesOnBlur(): void { - if (this.readonlyInput) { - return; - } - - if (!this.invalidMinutes && parseInt(this.minutes, 10) < 10) { - this.minutes = this.pad(this.minutes); - } - } - - public incrementHours(): void { - if (!this.noIncrementHours()) { - this.addMinutesToSelected(this.hourStep * 60); - } - } - - public decrementHours(): void { - if (!this.noDecrementHours()) { - this.addMinutesToSelected(-this.hourStep * 60); - } - } - - public incrementMinutes(): void { - if (!this.noIncrementMinutes()) { - this.addMinutesToSelected(this.minuteStep); - } - } - - public decrementMinutes(): void { - if (!this.noDecrementMinutes()) { - this.addMinutesToSelected(-this.minuteStep); - } - } - - public noIncrementHours(): boolean { - let incrementedSelected = addMinutes(this.selected, this.hourStep * 60); - return incrementedSelected > this.max || - (incrementedSelected < this.selected && incrementedSelected < this.min); - } - - public noDecrementHours(): boolean { - let decrementedSelected = addMinutes(this.selected, -this.hourStep * 60); - return decrementedSelected < this.min || - (decrementedSelected > this.selected && decrementedSelected > this.max); - } - - public noIncrementMinutes(): boolean { - let incrementedSelected = addMinutes(this.selected, this.minuteStep); - return incrementedSelected > this.max || - (incrementedSelected < this.selected && incrementedSelected < this.min); - } - - public noDecrementMinutes(): boolean { - let decrementedSelected = addMinutes(this.selected, -this.minuteStep); - return decrementedSelected < this.min || - (decrementedSelected > this.selected && decrementedSelected > this.max); - - } - - public toggleMeridian(): void { - if (!this.noToggleMeridian()) { - let sign = this.selected.getHours() < 12 ? 1 : -1; - this.addMinutesToSelected(12 * 60 * sign); - } - } - - public noToggleMeridian(): boolean { - if (this.readonlyInput) { - return true; - } - - if (this.selected.getHours() < 13) { - return addMinutes(this.selected, 12 * 60) > this.max; - } else { - return addMinutes(this.selected, -12 * 60) < this.min; - } - } - - protected refresh(/*type?:string*/): void { - // this.makeValid(); - this.updateTemplate(); - this.onChange(this.selected); - } - - protected updateTemplate(/*keyboardChange?:any*/): void { - let hours = this.selected.getHours(); - let minutes = this.selected.getMinutes(); - - if (this.showMeridian) { - // Convert 24 to 12 hour system - hours = (hours === 0 || hours === 12) ? 12 : hours % 12; - } - - // this.hours = keyboardChange === 'h' ? hours : this.pad(hours); - // if (keyboardChange !== 'm') { - // this.minutes = this.pad(minutes); - // } - this.hours = this.pad(hours); - this.minutes = this.pad(minutes); - - if (!this.meridians) { - this.meridians = this.config.meridians; - } - - this.meridian = this.selected.getHours() < 12 - ? this.meridians[0] - : this.meridians[1]; - } - - protected getHoursFromTemplate(): number { - let hours = parseInt(this.hours, 10); - let valid = this.showMeridian - ? (hours > 0 && hours < 13) - : (hours >= 0 && hours < 24); - if (!valid) { - return void 0; - } - - if (this.showMeridian) { - if (hours === 12) { - hours = 0; - } - if (this.meridian === this.meridians[1]) { - hours = hours + 12; - } - } - return hours; - } - - protected getMinutesFromTemplate(): number { - let minutes = parseInt(this.minutes, 10); - return (minutes >= 0 && minutes < 60) ? minutes : undefined; - } - - protected pad(value: string|number): string { - return (isDefined(value) && value.toString().length < 2) - ? '0' + value - : value.toString(); - } - - protected addMinutesToSelected(minutes: any): void { - this.selected = addMinutes(this.selected, minutes); - this.refresh(); - } -} diff --git a/src/old-timepicker/timepicker.config.ts b/src/old-timepicker/timepicker.config.ts deleted file mode 100644 index d976e4a588..0000000000 --- a/src/old-timepicker/timepicker.config.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { Injectable } from '@angular/core'; - -/** Provides default configuration values for timepicker */ -@Injectable() -export class TimepickerConfig { - /** hours change step */ - public hourStep: number = 1; - /** hours change step */ - public minuteStep: number = 5; - /** if true works in 12H mode and displays AM/PM. If false works in 24H mode and hides AM/PM */ - public showMeridian: boolean = true; - /** meridian labels based on locale */ - public meridians:string[] = ['AM', 'PM']; - /** if true hours and minutes fields will be readonly */ - public readonlyInput: boolean = false; - /** if true scroll inside hours and minutes inputs will change time */ - public mousewheel: boolean = true; - /** if true up/down arrowkeys inside hours and minutes inputs will change time */ - public arrowkeys: boolean = true; - /** if true spinner arrows above and below the inputs will be shown */ - public showSpinners: boolean = true; - /** minimum time user can select */ - public min: number = void 0; - /** maximum time user can select */ - public max: number = void 0; -} diff --git a/src/old-timepicker/timepicker.module.ts b/src/old-timepicker/timepicker.module.ts deleted file mode 100644 index 3c39a0b4cc..0000000000 --- a/src/old-timepicker/timepicker.module.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { CommonModule } from '@angular/common'; -import { FormsModule } from '@angular/forms'; -import { NgModule, ModuleWithProviders } from '@angular/core'; -import { TimepickerComponent } from './timepicker.component'; -import { TimepickerConfig } from './timepicker.config'; - -@NgModule({ - imports: [CommonModule, FormsModule], - declarations: [TimepickerComponent], - exports: [TimepickerComponent, FormsModule] -}) -export class TimepickerModule { - public static forRoot(): ModuleWithProviders { - return { - ngModule: TimepickerModule, - providers: [TimepickerConfig] - }; - } -}