style(components): update types to remove any

This commit is contained in:
Brandy Carney
2018-02-06 10:14:22 -05:00
parent deb28f0e90
commit 3c82b1f639
13 changed files with 100 additions and 93 deletions

View File

@ -780,24 +780,24 @@ declare global {
namespace JSXElements { namespace JSXElements {
export interface IonDatetimeAttributes extends HTMLAttributes { export interface IonDatetimeAttributes extends HTMLAttributes {
cancelText?: string; cancelText?: string;
dayNames?: any; dayNames?: string[] | string;
dayShortNames?: any; dayShortNames?: string[] | string;
dayValues?: any; dayValues?: number[] | number | string;
disabled?: boolean; disabled?: boolean;
displayFormat?: string; displayFormat?: string;
doneText?: string; doneText?: string;
hourValues?: any; hourValues?: number[] | number | string;
max?: string; max?: string;
min?: string; min?: string;
minuteValues?: any; minuteValues?: number[] | number | string;
monthNames?: any; monthNames?: string[] | string;
monthShortNames?: any; monthShortNames?: string[] | string;
monthValues?: any; monthValues?: number[] | number | string;
pickerFormat?: string; pickerFormat?: string;
pickerOptions?: PickerOptions; pickerOptions?: PickerOptions;
placeholder?: string; placeholder?: string;
value?: string; value?: string;
yearValues?: any; yearValues?: number[] | number | string;
} }
} }
} }

View File

@ -394,7 +394,7 @@ export function convertDataToISO(data: DatetimeData): string {
* Use to convert a string of comma separated strings or * Use to convert a string of comma separated strings or
* an array of strings, and clean up any user input * an array of strings, and clean up any user input
*/ */
export function convertToArrayOfStrings(input: any, type: string): string[] { export function convertToArrayOfStrings(input: string | string[] | undefined | null, type: string): string[] {
if (!input) { if (!input) {
return null; return null;
} }
@ -408,7 +408,7 @@ export function convertToArrayOfStrings(input: any, type: string): string[] {
let values: string[]; let values: string[];
if (isArray(input)) { if (isArray(input)) {
// trim up each string value // trim up each string value
values = input.map((val: string) => val.trim()); values = input.map(val => val.toString().trim());
} }
if (!values || !values.length) { if (!values || !values.length) {
@ -423,7 +423,7 @@ export function convertToArrayOfStrings(input: any, type: string): string[] {
* Use to convert a string of comma separated numbers or * Use to convert a string of comma separated numbers or
* an array of numbers, and clean up any user input * an array of numbers, and clean up any user input
*/ */
export function convertToArrayOfNumbers(input: any, type: string): number[] { export function convertToArrayOfNumbers(input: any[] | string | number, type: string): number[] {
if (isString(input)) { if (isString(input)) {
// convert the string to an array of strings // convert the string to an array of strings
// auto remove any whitespace and [] characters // auto remove any whitespace and [] characters
@ -436,6 +436,8 @@ export function convertToArrayOfNumbers(input: any, type: string): number[] {
values = input values = input
.map((num: any) => parseInt(num, 10)) .map((num: any) => parseInt(num, 10))
.filter(isFinite); .filter(isFinite);
} else {
values = [input];
} }
if (!values || !values.length) { if (!values || !values.length) {

View File

@ -104,72 +104,72 @@ export class Datetime {
/** /**
* Values used to create the list of selectable years. By default * Values used to create the list of selectable years. By default
* the year values range between the `min` and `max` datetime inputs. However, to * the year values range between the `min` and `max` datetime inputs. However, to
* control exactly which years to display, the `yearValues` input can take either an array * control exactly which years to display, the `yearValues` input can take a number, an array
* of numbers, or string of comma separated numbers. For example, to show upcoming and * of numbers, or string of comma separated numbers. For example, to show upcoming and
* recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. * recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
*/ */
@Prop() yearValues: any; @Prop() yearValues: number[] | number | string;
/** /**
* Values used to create the list of selectable months. By default * Values used to create the list of selectable months. By default
* the month values range from `1` to `12`. However, to control exactly which months to * the month values range from `1` to `12`. However, to control exactly which months to
* display, the `monthValues` input can take either an array of numbers, or string of * display, the `monthValues` input can take a number, an array of numbers, or a string of
* comma separated numbers. For example, if only summer months should be shown, then this * comma separated numbers. For example, if only summer months should be shown, then this
* input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a * input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a
* zero-based index, meaning January's value is `1`, and December's is `12`. * zero-based index, meaning January's value is `1`, and December's is `12`.
*/ */
@Prop() monthValues: any; @Prop() monthValues: number[] | number | string;
/** /**
* Values used to create the list of selectable days. By default * Values used to create the list of selectable days. By default
* every day is shown for the given month. However, to control exactly which days of * every day is shown for the given month. However, to control exactly which days of
* the month to display, the `dayValues` input can take either an array of numbers, or * the month to display, the `dayValues` input can take a number, an array of numbers, or
* string of comma separated numbers. Note that even if the array days have an invalid * a string of comma separated numbers. Note that even if the array days have an invalid
* number for the selected month, like `31` in February, it will correctly not show * number for the selected month, like `31` in February, it will correctly not show
* days which are not valid for the selected month. * days which are not valid for the selected month.
*/ */
@Prop() dayValues: any; @Prop() dayValues: number[] | number | string;
/** /**
* Values used to create the list of selectable hours. By default * Values used to create the list of selectable hours. By default
* the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, * the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,
* to control exactly which hours to display, the `hourValues` input can take either an * to control exactly which hours to display, the `hourValues` input can take a number, an
* array of numbers, or string of comma separated numbers. * array of numbers, or a string of comma separated numbers.
*/ */
@Prop() hourValues: any; @Prop() hourValues: number[] | number | string;
/** /**
* Values used to create the list of selectable minutes. By default * Values used to create the list of selectable minutes. By default
* the mintues range from `0` to `59`. However, to control exactly which minutes to display, * the mintues range from `0` to `59`. However, to control exactly which minutes to display,
* the `minuteValues` input can take either an array of numbers, or string of comma separated * the `minuteValues` input can take a number, an array of numbers, or a string of comma
* numbers. For example, if the minute selections should only be every 15 minutes, then * separated numbers. For example, if the minute selections should only be every 15 minutes,
* this input value would be `minuteValues="0,15,30,45"`. * then this input value would be `minuteValues="0,15,30,45"`.
*/ */
@Prop() minuteValues: any; @Prop() minuteValues: number[] | number | string;
/** /**
* Full names for each month name. This can be used to provide * Full names for each month name. This can be used to provide
* locale month names. Defaults to English. * locale month names. Defaults to English.
*/ */
@Prop() monthNames: any; @Prop() monthNames: string[] | string;
/** /**
* Short abbreviated names for each month name. This can be used to provide * Short abbreviated names for each month name. This can be used to provide
* locale month names. Defaults to English. * locale month names. Defaults to English.
*/ */
@Prop() monthShortNames: any; @Prop() monthShortNames: string[] | string;
/** /**
* Full day of the week names. This can be used to provide * Full day of the week names. This can be used to provide
* locale names for each day in the week. Defaults to English. * locale names for each day in the week. Defaults to English.
*/ */
@Prop() dayNames: any; @Prop() dayNames: string[] | string;
/** /**
* Short abbreviated day of the week names. This can be used to provide * Short abbreviated day of the week names. This can be used to provide
* locale names for each day in the week. Defaults to English. * locale names for each day in the week. Defaults to English.
*/ */
@Prop() dayShortNames: any; @Prop() dayShortNames: string[] | string;
/** /**
* Any additional options that the picker interface can accept. * Any additional options that the picker interface can accept.

View File

@ -224,7 +224,7 @@ The text to display on the picker's cancel button. Default: `Cancel`.
#### dayNames #### dayNames
any
Full day of the week names. This can be used to provide Full day of the week names. This can be used to provide
locale names for each day in the week. Defaults to English. locale names for each day in the week. Defaults to English.
@ -232,7 +232,7 @@ locale names for each day in the week. Defaults to English.
#### dayShortNames #### dayShortNames
any
Short abbreviated day of the week names. This can be used to provide Short abbreviated day of the week names. This can be used to provide
locale names for each day in the week. Defaults to English. locale names for each day in the week. Defaults to English.
@ -240,12 +240,12 @@ locale names for each day in the week. Defaults to English.
#### dayValues #### dayValues
any
Values used to create the list of selectable days. By default Values used to create the list of selectable days. By default
every day is shown for the given month. However, to control exactly which days of every day is shown for the given month. However, to control exactly which days of
the month to display, the `dayValues` input can take either an array of numbers, or the month to display, the `dayValues` input can take a number, an array of numbers, or
string of comma separated numbers. Note that even if the array days have an invalid a string of comma separated numbers. Note that even if the array days have an invalid
number for the selected month, like `31` in February, it will correctly not show number for the selected month, like `31` in February, it will correctly not show
days which are not valid for the selected month. days which are not valid for the selected month.
@ -277,12 +277,12 @@ The text to display on the picker's "Done" button. Default: `Done`.
#### hourValues #### hourValues
any
Values used to create the list of selectable hours. By default Values used to create the list of selectable hours. By default
the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,
to control exactly which hours to display, the `hourValues` input can take either an to control exactly which hours to display, the `hourValues` input can take a number, an
array of numbers, or string of comma separated numbers. array of numbers, or a string of comma separated numbers.
#### max #### max
@ -311,18 +311,18 @@ Defaults to the beginning of the year, 100 years ago from today.
#### minuteValues #### minuteValues
any
Values used to create the list of selectable minutes. By default Values used to create the list of selectable minutes. By default
the mintues range from `0` to `59`. However, to control exactly which minutes to display, the mintues range from `0` to `59`. However, to control exactly which minutes to display,
the `minuteValues` input can take either an array of numbers, or string of comma separated the `minuteValues` input can take a number, an array of numbers, or a string of comma
numbers. For example, if the minute selections should only be every 15 minutes, then separated numbers. For example, if the minute selections should only be every 15 minutes,
this input value would be `minuteValues="0,15,30,45"`. then this input value would be `minuteValues="0,15,30,45"`.
#### monthNames #### monthNames
any
Full names for each month name. This can be used to provide Full names for each month name. This can be used to provide
locale month names. Defaults to English. locale month names. Defaults to English.
@ -330,7 +330,7 @@ locale month names. Defaults to English.
#### monthShortNames #### monthShortNames
any
Short abbreviated names for each month name. This can be used to provide Short abbreviated names for each month name. This can be used to provide
locale month names. Defaults to English. locale month names. Defaults to English.
@ -338,11 +338,11 @@ locale month names. Defaults to English.
#### monthValues #### monthValues
any
Values used to create the list of selectable months. By default Values used to create the list of selectable months. By default
the month values range from `1` to `12`. However, to control exactly which months to the month values range from `1` to `12`. However, to control exactly which months to
display, the `monthValues` input can take either an array of numbers, or string of display, the `monthValues` input can take a number, an array of numbers, or a string of
comma separated numbers. For example, if only summer months should be shown, then this comma separated numbers. For example, if only summer months should be shown, then this
input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a
zero-based index, meaning January's value is `1`, and December's is `12`. zero-based index, meaning January's value is `1`, and December's is `12`.
@ -385,11 +385,11 @@ the value of the datetime.
#### yearValues #### yearValues
any
Values used to create the list of selectable years. By default Values used to create the list of selectable years. By default
the year values range between the `min` and `max` datetime inputs. However, to the year values range between the `min` and `max` datetime inputs. However, to
control exactly which years to display, the `yearValues` input can take either an array control exactly which years to display, the `yearValues` input can take a number, an array
of numbers, or string of comma separated numbers. For example, to show upcoming and of numbers, or string of comma separated numbers. For example, to show upcoming and
recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.
@ -405,7 +405,7 @@ The text to display on the picker's cancel button. Default: `Cancel`.
#### day-names #### day-names
any
Full day of the week names. This can be used to provide Full day of the week names. This can be used to provide
locale names for each day in the week. Defaults to English. locale names for each day in the week. Defaults to English.
@ -413,7 +413,7 @@ locale names for each day in the week. Defaults to English.
#### day-short-names #### day-short-names
any
Short abbreviated day of the week names. This can be used to provide Short abbreviated day of the week names. This can be used to provide
locale names for each day in the week. Defaults to English. locale names for each day in the week. Defaults to English.
@ -421,12 +421,12 @@ locale names for each day in the week. Defaults to English.
#### day-values #### day-values
any
Values used to create the list of selectable days. By default Values used to create the list of selectable days. By default
every day is shown for the given month. However, to control exactly which days of every day is shown for the given month. However, to control exactly which days of
the month to display, the `dayValues` input can take either an array of numbers, or the month to display, the `dayValues` input can take a number, an array of numbers, or
string of comma separated numbers. Note that even if the array days have an invalid a string of comma separated numbers. Note that even if the array days have an invalid
number for the selected month, like `31` in February, it will correctly not show number for the selected month, like `31` in February, it will correctly not show
days which are not valid for the selected month. days which are not valid for the selected month.
@ -458,12 +458,12 @@ The text to display on the picker's "Done" button. Default: `Done`.
#### hour-values #### hour-values
any
Values used to create the list of selectable hours. By default Values used to create the list of selectable hours. By default
the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However, the hour values range from `0` to `23` for 24-hour, or `1` to `12` for 12-hour. However,
to control exactly which hours to display, the `hourValues` input can take either an to control exactly which hours to display, the `hourValues` input can take a number, an
array of numbers, or string of comma separated numbers. array of numbers, or a string of comma separated numbers.
#### max #### max
@ -492,18 +492,18 @@ Defaults to the beginning of the year, 100 years ago from today.
#### minute-values #### minute-values
any
Values used to create the list of selectable minutes. By default Values used to create the list of selectable minutes. By default
the mintues range from `0` to `59`. However, to control exactly which minutes to display, the mintues range from `0` to `59`. However, to control exactly which minutes to display,
the `minuteValues` input can take either an array of numbers, or string of comma separated the `minuteValues` input can take a number, an array of numbers, or a string of comma
numbers. For example, if the minute selections should only be every 15 minutes, then separated numbers. For example, if the minute selections should only be every 15 minutes,
this input value would be `minuteValues="0,15,30,45"`. then this input value would be `minuteValues="0,15,30,45"`.
#### month-names #### month-names
any
Full names for each month name. This can be used to provide Full names for each month name. This can be used to provide
locale month names. Defaults to English. locale month names. Defaults to English.
@ -511,7 +511,7 @@ locale month names. Defaults to English.
#### month-short-names #### month-short-names
any
Short abbreviated names for each month name. This can be used to provide Short abbreviated names for each month name. This can be used to provide
locale month names. Defaults to English. locale month names. Defaults to English.
@ -519,11 +519,11 @@ locale month names. Defaults to English.
#### month-values #### month-values
any
Values used to create the list of selectable months. By default Values used to create the list of selectable months. By default
the month values range from `1` to `12`. However, to control exactly which months to the month values range from `1` to `12`. However, to control exactly which months to
display, the `monthValues` input can take either an array of numbers, or string of display, the `monthValues` input can take a number, an array of numbers, or a string of
comma separated numbers. For example, if only summer months should be shown, then this comma separated numbers. For example, if only summer months should be shown, then this
input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a input value would be `monthValues="6,7,8"`. Note that month numbers do *not* have a
zero-based index, meaning January's value is `1`, and December's is `12`. zero-based index, meaning January's value is `1`, and December's is `12`.
@ -566,11 +566,11 @@ the value of the datetime.
#### year-values #### year-values
any
Values used to create the list of selectable years. By default Values used to create the list of selectable years. By default
the year values range between the `min` and `max` datetime inputs. However, to the year values range between the `min` and `max` datetime inputs. However, to
control exactly which years to display, the `yearValues` input can take either an array control exactly which years to display, the `yearValues` input can take a number, an array
of numbers, or string of comma separated numbers. For example, to show upcoming and of numbers, or string of comma separated numbers. For example, to show upcoming and
recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`. recent leap years, then this input's value would be `yearValues="2024,2020,2016,2012,2008"`.

View File

@ -23,7 +23,7 @@ export class Fab {
} }
render() { render() {
const fab: any = this.el.querySelector('ion-fab-button'); const fab = this.el.querySelector('ion-fab-button');
fab.toggleActive = this.toggleActive; fab.toggleActive = this.toggleActive;
fab.activated = this.activated; fab.activated = this.activated;

View File

@ -26,10 +26,10 @@ export interface InputBaseComponent {
value: string; value: string;
// Shared Methods // Shared Methods
inputBlurred: (ev: any) => void; inputBlurred: (ev: Event) => void;
inputChanged: (ev: any) => void; inputChanged: (ev: Event) => void;
inputFocused: (ev: any) => void; inputFocused: (ev: Event) => void;
inputKeydown: (ev: any) => void; inputKeydown: (ev: Event) => void;
} }
export interface InputComponent extends InputBaseComponent { export interface InputComponent extends InputBaseComponent {

View File

@ -236,20 +236,20 @@ export class Input implements InputComponent {
}); });
} }
inputBlurred(ev: any) { inputBlurred(ev: Event) {
this.ionBlur.emit(ev); this.ionBlur.emit(ev);
this.focusChange(this.hasFocus()); this.focusChange(this.hasFocus());
this.emitStyle(); this.emitStyle();
} }
inputChanged(ev: any) { inputChanged(ev: Event) {
this.value = ev.target && ev.target.value; this.value = ev.target && (ev.target as HTMLInputElement).value;
this.ionInput.emit(ev); this.ionInput.emit(ev);
this.emitStyle(); this.emitStyle();
} }
inputFocused(ev: any) { inputFocused(ev: Event) {
this.ionFocus.emit(ev); this.ionFocus.emit(ev);
this.focusChange(this.hasFocus()); this.focusChange(this.hasFocus());
@ -263,15 +263,14 @@ export class Input implements InputComponent {
} }
} }
inputKeydown(ev: any) { inputKeydown(ev: Event) {
this.checkClearOnEdit(ev); this.checkClearOnEdit(ev);
} }
/** /**
* Check if we need to clear the text input if clearOnEdit is enabled * Check if we need to clear the text input if clearOnEdit is enabled
*/ */
checkClearOnEdit(ev: any) { checkClearOnEdit(ev: Event) {
if (!this.clearOnEdit) { if (!this.clearOnEdit) {
return; return;
} }
@ -286,7 +285,7 @@ export class Input implements InputComponent {
this.didBlurAfterEdit = false; this.didBlurAfterEdit = false;
} }
clearTextInput(ev: any) { clearTextInput(ev: Event) {
this.value = ''; this.value = '';
this.ionInput.emit(ev); this.ionInput.emit(ev);
} }
@ -313,6 +312,7 @@ export class Input implements InputComponent {
autoCorrect={this.autocorrect} autoCorrect={this.autocorrect}
autoFocus={this.autofocus} autoFocus={this.autofocus}
checked={this.checked} checked={this.checked}
class={themedClasses}
disabled={this.disabled} disabled={this.disabled}
inputMode={this.inputmode} inputMode={this.inputmode}
min={this.min} min={this.min}
@ -331,7 +331,6 @@ export class Input implements InputComponent {
size={this.size} size={this.size}
type={this.type} type={this.type}
value={this.value} value={this.value}
class={themedClasses}
onBlur={this.inputBlurred.bind(this)} onBlur={this.inputBlurred.bind(this)}
onInput={this.inputChanged.bind(this)} onInput={this.inputChanged.bind(this)}
onFocus={this.inputFocused.bind(this)} onFocus={this.inputFocused.bind(this)}

View File

@ -39,8 +39,8 @@ export class ItemOption {
// } // }
} }
clickedOptionButton(ev: any): boolean { clickedOptionButton(ev: Event): boolean {
const el = ev.target.closest('ion-item-option'); const el = (ev.target as HTMLElement).closest('ion-item-option');
return !!el; return !!el;
} }

View File

@ -242,7 +242,7 @@ export class Loading {
}); });
} }
const loadingInner: any[] = []; const loadingInner: JSX.Element[] = [];
if (this.spinner !== 'hide') { if (this.spinner !== 'hide') {
loadingInner.push( loadingInner.push(

View File

@ -416,7 +416,7 @@ export class PickerColumnCmp {
}) })
.filter(clientInformation => clientInformation !== null); .filter(clientInformation => clientInformation !== null);
const results: any[] = []; const results: JSX.Element[] = [];
if (col.prefix) { if (col.prefix) {
results.push( results.push(

View File

@ -2,6 +2,12 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop, State, W
import { BaseInputComponent, GestureDetail } from '../../index'; import { BaseInputComponent, GestureDetail } from '../../index';
import { clamp, debounce } from '../../utils/helpers'; import { clamp, debounce } from '../../utils/helpers';
interface Tick {
ratio: number | (() => number);
left: string;
active?: boolean;
}
@Component({ @Component({
tag: 'ion-range', tag: 'ion-range',
styleUrls: { styleUrls: {
@ -28,7 +34,7 @@ export class Range implements BaseInputComponent {
@State() valB = 0; @State() valB = 0;
@State() ratioA = 0; @State() ratioA = 0;
@State() ratioB = 0; @State() ratioB = 0;
@State() ticks: any[] = []; @State() ticks: Tick[] = [];
@State() activeB: boolean; @State() activeB: boolean;
@State() rect: ClientRect; @State() rect: ClientRect;

View File

@ -40,7 +40,7 @@ export class TapClick {
} }
@Listen('document:click', {passive: false, capture: true}) @Listen('document:click', {passive: false, capture: true})
onBodyClick(ev: any) { onBodyClick(ev: Event) {
if (this.shouldCancel()) { if (this.shouldCancel()) {
ev.preventDefault(); ev.preventDefault();
ev.stopPropagation(); ev.stopPropagation();

View File

@ -179,39 +179,39 @@ export class Textarea implements TextareaComponent {
}); });
} }
clearTextInput(ev: any) { clearTextInput(ev: Event) {
this.value = ''; this.value = '';
this.ionInput.emit(ev); this.ionInput.emit(ev);
} }
inputBlurred(ev: any) { inputBlurred(ev: Event) {
this.ionBlur.emit(ev); this.ionBlur.emit(ev);
this.focusChange(this.hasFocus()); this.focusChange(this.hasFocus());
this.emitStyle(); this.emitStyle();
} }
inputChanged(ev: any) { inputChanged(ev: Event) {
this.value = ev.target && ev.target.value; this.value = ev.target && (ev.target as HTMLInputElement).value;
this.ionInput.emit(ev); this.ionInput.emit(ev);
this.emitStyle(); this.emitStyle();
} }
inputFocused(ev: any) { inputFocused(ev: Event) {
this.ionFocus.emit(ev); this.ionFocus.emit(ev);
this.focusChange(this.hasFocus()); this.focusChange(this.hasFocus());
this.emitStyle(); this.emitStyle();
} }
inputKeydown(ev: any) { inputKeydown(ev: Event) {
this.checkClearOnEdit(ev); this.checkClearOnEdit(ev);
} }
/** /**
* Check if we need to clear the text input if clearOnEdit is enabled * Check if we need to clear the text input if clearOnEdit is enabled
*/ */
checkClearOnEdit(ev: any) { checkClearOnEdit(ev: Event) {
if (!this.clearOnEdit) { if (!this.clearOnEdit) {
return; return;
} }