javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-08 23:58:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

style(all): adds tslint-ionic-rules

Browse Source
This commit is contained in:
Manuel Mtz-Almeida
2017-09-17 04:13:37 -04:00
parent 612947c072
commit fffa9b5460
70 changed files with 337 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
packages/core/src/components/action-sheet/action-sheet.tsx
View File

@ -1,5 +1,5 @@
import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
import { AnimationBuilder, Animation, AnimationController, Config } from '../../index';
import { Animation, AnimationBuilder, AnimationController, Config } from '../../index';
import iOSEnterAnimation from './animations/ios.enter';
import iOSLeaveAnimation from './animations/ios.leave';
@ -176,22 +176,22 @@ export class ActionSheet {
return [
<ion-backdrop
onClick={this.backdropClick.bind(this)}
class="action-sheet-backdrop"
class='action-sheet-backdrop'
/>,
<div class="action-sheet-wrapper" role="dialog">
<div class="action-sheet-container">
<div class="action-sheet-group">
<div class='action-sheet-wrapper' role='dialog'>
<div class='action-sheet-container'>
<div class='action-sheet-group'>
{this.title
? <div class="action-sheet-title">{this.title}</div>
? <div class='action-sheet-title'>{this.title}</div>
: null}
{this.subTitle
? <div class="action-sheet-sub-title">{this.subTitle}</div>
? <div class='action-sheet-sub-title'>{this.subTitle}</div>
: null}
{buttons.map(b =>
<button class={this.buttonClass(b)} onClick={() => this.click(b)}>
<span class="button-inner">
<span class='button-inner'>
{b.icon
? <ion-icon name={b.icon} class="action-sheet-icon" />
? <ion-icon name={b.icon} class='action-sheet-icon' />
: null}
{b.text}
</span>
@ -199,7 +199,7 @@ export class ActionSheet {
)}
</div>
{cancelButton
? <div class="action-sheet-group">
? <div class='action-sheet-group'>
<button
class={this.buttonClass(cancelButton)}
onClick={() => this.click(cancelButton)}
@ -207,7 +207,7 @@ export class ActionSheet {
{cancelButton.icon
? <ion-icon
name={cancelButton.icon}
class="action-sheet-icon"
class='action-sheet-icon'
/>
: null}
{cancelButton.text}

50
packages/core/src/components/alert/alert.tsx
View File

@ -1,6 +1,6 @@
import { Component, CssClassMap, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
import { AnimationBuilder, Animation, AnimationController, Config } from '../../index';
import { Animation, AnimationBuilder, AnimationController, Config } from '../../index';
import iOSEnterAnimation from './animations/ios.enter';
import iOSLeaveAnimation from './animations/ios.leave';
@ -233,12 +233,12 @@ export class Alert {
if (inputs.length === 0) return null;
return (
<div class="alert-checkbox-group">
<div class='alert-checkbox-group'>
{ inputs.map(i => (
<button onClick={() => this.cbClick(i)} aria-checked={i.checked} id={i.id} disabled={i.disabled} role="checkbox" class="alert-tappable alert-checkbox alert-checkbox-button">
<div class="button-inner">
<div class="alert-checkbox-icon"><div class="alert-checkbox-inner"></div></div>
<div class="alert-checkbox-label">
<button onClick={() => this.cbClick(i)} aria-checked={i.checked} id={i.id} disabled={i.disabled} role='checkbox' class='alert-tappable alert-checkbox alert-checkbox-button'>
<div class='button-inner'>
<div class='alert-checkbox-icon'><div class='alert-checkbox-inner'></div></div>
<div class='alert-checkbox-label'>
{i.label}
</div>
</div>
@ -254,12 +254,12 @@ export class Alert {
if (inputs.length === 0) return null;
return (
<div class="alert-radio-group" role="radiogroup" aria-labelledby={hdrId} aria-activedescendant={this.activeId}>
<div class='alert-radio-group' role='radiogroup' aria-labelledby={hdrId} aria-activedescendant={this.activeId}>
{ inputs.map(i => (
<button onClick={() => this.rbClick(i)} aria-checked={i.checked} disabled={i.disabled} id={i.id} class="alert-radio-button alert-tappable alert-radio" role="radio">
<div class="button-inner">
<div class="alert-radio-icon"><div class="alert-radio-inner"></div></div>
<div class="alert-radio-label">
<button onClick={() => this.rbClick(i)} aria-checked={i.checked} disabled={i.disabled} id={i.id} class='alert-radio-button alert-tappable alert-radio' role='radio'>
<div class='button-inner'>
<div class='alert-radio-icon'><div class='alert-radio-inner'></div></div>
<div class='alert-radio-label'>
{i.label}
</div>
</div>
@ -273,9 +273,9 @@ export class Alert {
if (inputs.length === 0) return null;
return (
<div class="alert-input-group">
<div class='alert-input-group'>
{ inputs.map(i => (
<div class="alert-input-wrapper">
<div class='alert-input-wrapper'>
<input
placeholder={i.placeholder}
value={i.value}
@ -283,7 +283,7 @@ export class Alert {
min={i.min}
max={i.max}
id={i.id}
class="alert-input"/>
class='alert-input'/>
</div>
))}
</div>
@ -336,7 +336,7 @@ export class Alert {
if (inputTypes.indexOf(i.type) < 0) {
inputTypes.push(i.type);
}
})
});
if (inputTypes.length > 1 && (inputTypes.indexOf('checkbox') > -1 || inputTypes.indexOf('radio') > -1)) {
console.warn(`Alert cannot mix input types: ${(inputTypes.join('/'))}. Please see alert docs for more info.`);
@ -347,21 +347,21 @@ export class Alert {
return [
<ion-backdrop
onClick={this.backdropClick.bind(this)}
class="alert-backdrop"
class='alert-backdrop'
/>,
<div class="alert-wrapper">
<div class="alert-head">
<div class='alert-wrapper'>
<div class='alert-head'>
{this.title
? <h2 id={hdrId} class="alert-title">{this.title}</h2>
? <h2 id={hdrId} class='alert-title'>{this.title}</h2>
: null}
{this.subTitle
? <h2 id={subHdrId} class="alert-sub-title">{this.subTitle}</h2>
? <h2 id={subHdrId} class='alert-sub-title'>{this.subTitle}</h2>
: null}
</div>
<div id={msgId} class="alert-message" innerHTML={this.message}></div>
<div id={msgId} class='alert-message' innerHTML={this.message}></div>
{(() => {
switch(this.inputType) {
switch (this.inputType) {
case 'checkbox':
return this.renderCheckbox(this.inputs);
@ -370,13 +370,13 @@ export class Alert {
default:
return this.renderInput(this.inputs);
};
}
})()}
<div class={alertButtonGroupClass}>
{buttons.map(b =>
<button class={this.buttonClass(b)} onClick={() => this.btnClick(b)}>
<span class="button-inner">
<span class='button-inner'>
{b.text}
</span>
</button>
@ -418,7 +418,7 @@ export interface AlertButton {
role?: string;
cssClass?: string;
handler?: (value: any) => boolean|void;
};
}
export interface AlertEvent {
detail: {

2
packages/core/src/components/animation-controller/animator.tsx
View File

@ -1,5 +1,5 @@
import { AnimationOptions, EffectProperty, EffectState, PlayOptions } from './animation-interface';
import { CSS_PROP, CSS_VALUE_REGEX, DURATION_MIN, TRANSITION_END_FALLBACK_PADDING_MS, TRANSFORM_PROPS } from './constants';
import { CSS_PROP, CSS_VALUE_REGEX, DURATION_MIN, TRANSFORM_PROPS, TRANSITION_END_FALLBACK_PADDING_MS } from './constants';
import { transitionEnd } from './transition-end';

2
packages/core/src/components/app/app-interfaces.ts
View File

@ -2,4 +2,4 @@ import { Config } from '../..';
export interface App {
element?: HTMLElement;
config?: Config;
}
}

2
packages/core/src/components/app/app.tsx
View File

@ -1,4 +1,4 @@
import { Element, Component, Listen, Prop } from '@stencil/core';
import { Component, Element, Listen, Prop } from '@stencil/core';
import { Nav, NavContainer, OverlayPortal } from '../../navigation/nav-interfaces';
import { Config } from '../..';
import { App } from './app-interfaces';

4
packages/core/src/components/button/button.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, Prop, CssClassMap } from '@stencil/core';
import { Component, CssClassMap, Element, Prop } from '@stencil/core';
import { getElementClassObject } from '../../utils/theme';
@ -202,7 +202,7 @@ export class Button {
const buttonClasses = {
...hostClasses,
...elementClasses
}
};
return (
<TagType class={buttonClasses} disabled={this.disabled}>

2
packages/core/src/components/chip-button/chip-button.tsx
View File

@ -92,7 +92,7 @@ export class ChipButton {
const buttonClasses = {
...hostClasses,
...elementClasses
}
};
return (
<TagType class={buttonClasses} disabled={this.disabled}>

2
packages/core/src/components/content/content.tsx
View File

@ -111,7 +111,7 @@ export class Content {
...themedClasses,
...hostClasses,
'statusbar-padding': this.config.getBoolean('statusbarPadding')
}
};
return (
<ion-scroll style={scrollStyle} props={props} class={scrollClasses}>

2
packages/core/src/components/datetime/datetime-util.ts
View File

@ -5,4 +5,4 @@ export interface LocaleData {
monthShortNames?: string[];
dayNames?: string[];
dayShortNames?: string[];
}
}

8
packages/core/src/components/datetime/datetime.tsx
View File

@ -1,4 +1,4 @@
import { Component, CssClassMap, Prop, Event, EventEmitter } from '@stencil/core';
import { Component, CssClassMap, Event, EventEmitter, Prop } from '@stencil/core';
import { LocaleData } from './datetime-util';
@ -481,12 +481,12 @@ export class DateTime {
return [
<div class={ dateTimeTextClasses }>{ dateTimeText }</div>,
<button
aria-haspopup="true"
aria-haspopup='true'
id={this.id}
aria-labelledby={this.labelId}
aria-disabled={this.disabled ? "true" : false}
aria-disabled={this.disabled ? 'true' : false}
onClick={this.open.bind(this)}
class="item-cover">
class='item-cover'>
</button>
];
}

2
packages/core/src/components/fab/fab-container.tsx
View File

@ -104,4 +104,4 @@ export class FabContainer {
);
}
}
}

6
packages/core/src/components/fab/fab.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, CssClassMap, Method, Prop, State } from '@stencil/core';
import { Component, CssClassMap, Element, Method, Prop, State } from '@stencil/core';
import { createThemedClasses, getElementClassObject } from '../../utils/theme';
@ -171,11 +171,11 @@ export class FabButton {
...themedClasses,
...hostClasses,
...elementClasses
}
};
return (
<TagType class={fabClasses} onClick={this.clickedFab.bind(this)} disabled={this.disabled}>
<ion-icon name="close" class="fab-close-icon"></ion-icon>
<ion-icon name='close' class='fab-close-icon'></ion-icon>
<span class='button-inner'>
<slot></slot>
</span>

6
packages/core/src/components/gesture/gesture.tsx
View File

@ -1,5 +1,5 @@
import { applyStyles, getElementReference, ElementRef, updateDetail, assert } from '../../utils/helpers';
import { BlockerDelegate, GestureController, GestureDelegate, BLOCK_ALL } from '../gesture-controller/gesture-controller';
import { ElementRef, applyStyles, assert, getElementReference, updateDetail } from '../../utils/helpers';
import { BLOCK_ALL, BlockerDelegate, GestureController, GestureDelegate } from '../gesture-controller/gesture-controller';
import { Component, Element, Event, EventEmitter, Listen, Prop, PropDidChange } from '@stencil/core';
import { PanRecognizer } from './recognizers';
@ -148,7 +148,7 @@ export class Gesture {
assert(this.hasFiredStart, 'fired start must be false');
assert(!this.hasStartedPan, 'pan can be started at this point');
assert(!this.hasCapturedPan, 'pan can be started at this point')
assert(!this.hasCapturedPan, 'pan can be started at this point');
assert(!this.isMoveQueued, 'some move is still queued');
assert(this.positions.length === 0, 'positions must be emprty');

10
packages/core/src/components/icon/icon.tsx
View File

@ -112,13 +112,13 @@ export class Icon {
render() {
if (this.isServer) {
return <div class="icon-inner">{/* ssr */}</div>;
return <div class='icon-inner'>{/* ssr */}</div>;
}
const iconName = this.iconName;
if (!iconName) {
// we don't have good data
return <div class="icon-inner">{/* invalid svg */}</div>;
return <div class='icon-inner'>{/* invalid svg */}</div>;
}
const svgContent = svgContents[iconName];
@ -126,7 +126,7 @@ export class Icon {
// we've already loaded up this svg at one point
// and the svg content we've loaded and assigned checks out
// render this svg!!
return <div class="icon-inner" innerHTML={svgContent}></div>;
return <div class='icon-inner' innerHTML={svgContent}></div>;
}
// haven't loaded this svg yet
@ -138,7 +138,7 @@ export class Icon {
});
// actively requesting the svg, so let's just render a div for now
return <div class="icon-inner">{/* loading svg */}</div>;
return <div class='icon-inner'>{/* loading svg */}</div>;
}
}
@ -201,7 +201,7 @@ const svgContents: {[iconName: string]: string} = {};
// remove this url from the active requests
delete activeRequests[iconName];
svgContents[iconName] = svgContent
svgContents[iconName] = svgContent;
// find any callbacks waiting on this icon
const svgLoadCallbacks = loadCallbacks[iconName];

2
packages/core/src/components/input/input-base.tsx
View File

@ -60,4 +60,4 @@ export interface TextareaComponent extends InputBaseComponent {
cols: number;
rows: number;
wrap: string;
}
}

4
packages/core/src/components/input/input.tsx
View File

@ -358,10 +358,10 @@ export class Input implements InputComponent {
/>,
<button
hidden={this.clearInput !== true}
class="text-input-clear-icon"
class='text-input-clear-icon'
onClick={this.clearTextInput.bind(this)}
onMouseDown={this.clearTextInput.bind(this)}>
</button>
]
];
}
}

2
packages/core/src/components/input/textarea.tsx
View File

@ -326,6 +326,6 @@ export class Textarea implements TextareaComponent {
>
{this.value}
</textarea>
)
);
}
}

2
packages/core/src/components/item-sliding/item-option.tsx
View File

@ -49,4 +49,4 @@ export class ItemOption {
);
}
}
}

2
packages/core/src/components/item-sliding/item-options.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
import { isRightSide, Side } from '../../utils/helpers';
import { Side, isRightSide } from '../../utils/helpers';
/**

16
packages/core/src/components/item-sliding/item-sliding.tsx
View File

@ -317,12 +317,13 @@ export class ItemSliding {
default: console.warn('invalid ItemSideFlags value', this.sides); break;
}
let optsWidth;
if (openAmount > this.optsWidthRightSide) {
var optsWidth = this.optsWidthRightSide;
optsWidth = this.optsWidthRightSide;
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
} else if (openAmount < -this.optsWidthLeftSide) {
var optsWidth = -this.optsWidthLeftSide;
optsWidth = -this.optsWidthLeftSide;
openAmount = optsWidth + (openAmount - optsWidth) * ELASTIC_FACTOR;
}
@ -374,13 +375,13 @@ export class ItemSliding {
this.optsWidthRightSide = 0;
if (this.rightOptions) {
this.optsWidthRightSide = this.rightOptions.width();
this.optsWidthRightSide == 0 && console.warn('optsWidthRightSide should not be zero');
this.optsWidthRightSide === 0 && console.warn('optsWidthRightSide should not be zero');
}
this.optsWidthLeftSide = 0;
if (this.leftOptions) {
this.optsWidthLeftSide = this.leftOptions.width();
this.optsWidthLeftSide == 0 && console.warn('optsWidthLeftSide should not be zero');
this.optsWidthLeftSide === 0 && console.warn('optsWidthLeftSide should not be zero');
}
this.optsDirty = false;
}
@ -396,15 +397,16 @@ export class ItemSliding {
this.item.style.transition = '';
} else {
var state;
if (openAmount > 0) {
var state = (openAmount >= (this.optsWidthRightSide + SWIPE_MARGIN))
state = (openAmount >= (this.optsWidthRightSide + SWIPE_MARGIN))
? SlidingState.Right | SlidingState.SwipeRight
: SlidingState.Right;
this.setState(state);
} else if (openAmount < 0) {
var state = (openAmount <= (-this.optsWidthLeftSide - SWIPE_MARGIN))
state = (openAmount <= (-this.optsWidthLeftSide - SWIPE_MARGIN))
? SlidingState.Left | SlidingState.SwipeLeft
: SlidingState.Left;
@ -480,7 +482,7 @@ export class ItemSliding {
'active-swipe-right': !!(this.state & SlidingState.SwipeRight),
'active-swipe-left': !!(this.state & SlidingState.SwipeLeft)
}
}
};
}
render() {

4
packages/core/src/components/item/item.tsx
View File

@ -136,7 +136,7 @@ export class Item {
: null
}
</div>
<div class="button-effect"></div>
<div class='button-effect'></div>
</TagType>
);
}
@ -195,4 +195,4 @@ export class Item {
// }
}
var itemId = -1;
var itemId = -1;

6
packages/core/src/components/keyboard-controller/keyboard-controller.tsx
View File

@ -1,4 +1,4 @@
import { Component, Prop, Event, EventEmitter} from '@stencil/core';
import { Component, Event, EventEmitter, Prop} from '@stencil/core';
import { KeyboardController } from './keyboard-interfaces';
import { Config } from '../..';
import { focusOutActiveElement, getDocument, getWindow, hasFocusedTextInput } from '../../utils/helpers';
@ -94,12 +94,12 @@ export function listenV2(win: Window, keyboardController: KeyboardController) {
export function listenV1(win: Window, keyboardController: KeyboardController) {
v1keyboardHide = () => {
blurActiveInput(true, keyboardController);
}
};
win.addEventListener('native.keyboardhide', v1keyboardHide);
v1keyboardShow = () => {
blurActiveInput(false, keyboardController);
}
};
win.addEventListener('native.keyboardshow', v1keyboardShow);
}

4
packages/core/src/components/loading/loading.tsx
View File

@ -217,5 +217,5 @@ export interface LoadingOptions {
export interface LoadingEvent extends Event {
detail: {
loading: Loading;
}
}
};
}

2
packages/core/src/components/menu/animations/overlay.ts
View File

@ -27,7 +27,7 @@ export default function(Animation: Animation, _: HTMLElement, menu: Menu): Anima
const backdropApi = new Animation()
.addElement(menu.getBackdropElement())
.fromTo('opacity', 0.01, 0.35)
.fromTo('opacity', 0.01, 0.35);
return baseAnimation(Animation)
.add(menuAni)

2
packages/core/src/components/menu/menu-controller.ts
View File

@ -1,4 +1,4 @@
import { Menu, AnimationController, AnimationBuilder, Animation } from '../../index';
import { Animation, AnimationBuilder, AnimationController, Menu } from '../../index';
import { Component, Method, Prop } from '@stencil/core';
import MenuOverlayAnimation from './animations/overlay';

14
packages/core/src/components/menu/menu.tsx
View File

@ -1,11 +1,11 @@
import { Component, Element, Event, EventEmitter, Prop, PropDidChange, Listen } from '@stencil/core';
import { Config, Animation, SplitPaneAlert } from '../../index';
import { Component, Element, Event, EventEmitter, Listen, Prop, PropDidChange } from '@stencil/core';
import { Animation, Config, SplitPaneAlert } from '../../index';
import { MenuController } from './menu-controller';
import { isRightSide, Side, assert, checkEdgeSide } from '../../utils/helpers';
import { Side, assert, checkEdgeSide, isRightSide } from '../../utils/helpers';
export type Lazy<T> = T &
{ componentOnReady(): Promise<T> } &
{ componentOnReady(done: (cmp: T) => void): void }
{ componentOnReady(done: (cmp: T) => void): void };
@Component({
tag: 'ion-menu',
@ -127,7 +127,7 @@ export class Menu {
* @hidden
*/
ionViewDidLoad() {
assert(!!this.menuCtrl, "menucontroller was not initialized");
assert(!!this.menuCtrl, 'menucontroller was not initialized');
this._menuInnerEle = this.el.querySelector('.menu-inner') as HTMLElement;
this._backdropEle = this.el.querySelector('.menu-backdrop') as HTMLElement;
@ -185,7 +185,7 @@ export class Menu {
<div class='menu-inner'>
<slot></slot>
</div>,
<ion-backdrop class="menu-backdrop"></ion-backdrop> ,
<ion-backdrop class='menu-backdrop'></ion-backdrop> ,
<ion-gesture props={{
'canStart': this.canStart.bind(this),
'onWillStart': this._swipeWillStart.bind(this),
@ -271,7 +271,7 @@ export class Menu {
assert(this._isOpen, 'menu cannot be closed');
this._isAnimating = true;
this._startAnimation(false, false)
this._startAnimation(false, false);
this._after(false);
}

4
packages/core/src/components/modal/modal.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
import { AnimationBuilder, AnimationController, Animation } from '../../index';
import { Animation, AnimationBuilder, AnimationController } from '../../index';
import { createThemedClasses } from '../../utils/theme';
import iOSEnterAnimation from './animations/ios.enter';
@ -187,5 +187,5 @@ export interface ModalOptions {
export interface ModalEvent extends Event {
detail: {
modal: Modal;
}
};
}

4
packages/core/src/components/nav-controller/nav-controller.tsx
View File

@ -96,7 +96,7 @@ export class NavControllerImpl implements NavController {
}
@Method()
setPages(nav: Nav, componentDataPairs: ComponentDataPair[], opts? : NavOptions): Promise<any> {
setPages(nav: Nav, componentDataPairs: ComponentDataPair[], opts?: NavOptions): Promise<any> {
return hydrateDelegateAndAnimation(this).then(([delegate, animation]) => {
return setPagesImpl(nav, delegate, animation, componentDataPairs, opts);
});
@ -126,4 +126,4 @@ export function hydrateDelegate(navController: NavController): Promise<Framework
export function hydrateAnimationController(animationController: AnimationController): Promise<Animation> {
return animationController.create();
}
}

2
packages/core/src/components/nav-controller/stencil-nav-delegate.tsx
View File

@ -27,4 +27,4 @@ export class StencilNavDelegate implements FrameworkDelegate {
nav.element.removeChild(leavingView.element);
return Promise.resolve();
}
}
}

6
packages/core/src/components/nav/nav.tsx
View File

@ -89,7 +89,7 @@ export class IonNav implements Nav {
}
@Method()
setPages(componentDataPairs: ComponentDataPair[], opts? : NavOptions): Promise<any> {
setPages(componentDataPairs: ComponentDataPair[], opts?: NavOptions): Promise<any> {
return setPagesImpl(this, componentDataPairs, opts);
}
@ -191,7 +191,7 @@ export function removeViewImpl(nav: Nav, viewController: ViewController, opts?:
});
}
export function setPagesImpl(nav: Nav, componentDataPairs: ComponentDataPair[], opts? : NavOptions) {
export function setPagesImpl(nav: Nav, componentDataPairs: ComponentDataPair[], opts?: NavOptions) {
return getNavController(nav).then(() => {
return nav.navController.setPages(nav, componentDataPairs, opts);
});
@ -216,4 +216,4 @@ export function navInitializedImpl(potentialParent: Nav, event: CustomEvent) {
// kill the event so it doesn't propagate further
event.stopPropagation();
}
}
}

4
packages/core/src/components/nav/page-one.tsx
View File

@ -28,6 +28,6 @@ export class PageOne {
<ion-button onClick={() => this.nextPage()}>Go to Page Two</ion-button>
</div>
</ion-content>
]
];
}
}
}

4
packages/core/src/components/nav/page-three.tsx
View File

@ -28,6 +28,6 @@ export class PageThree {
<ion-button onClick={() => this.pop()}>Go Back</ion-button>
</div>
</ion-content>
]
];
}
}
}

4
packages/core/src/components/nav/page-two.tsx
View File

@ -36,6 +36,6 @@ export class PageTwo {
<ion-button onClick={() => this.pop()}>Go Back</ion-button>
</div>
</ion-content>
]
];
}
}
}

6
packages/core/src/components/overlay-portal/overlay-portal.tsx
View File

@ -16,11 +16,11 @@ export class IonOverlayPortal implements NavContainer, OverlayPortal {
@Event() registerPortal: EventEmitter;
getActiveChildNavs(): NavContainer[] {
throw new Error("Method not implemented.");
throw new Error('Method not implemented.');
}
getAllChildNavs?(): NavContainer[] {
throw new Error("Method not implemented.");
throw new Error('Method not implemented.');
}
getType(): string {
@ -42,4 +42,4 @@ export class IonOverlayPortal implements NavContainer, OverlayPortal {
export function componentWillLoadImpl(overlayPortal: OverlayPortal) {
overlayPortal.registerPortal.emit(overlayPortal);
}
}

2
packages/core/src/components/popover-controller/popover-controller.tsx
View File

@ -1,5 +1,5 @@
import { Component, Listen, Method } from '@stencil/core';
import { PopoverEvent, PopoverOptions, Popover } from '../../index';
import { Popover, PopoverEvent, PopoverOptions } from '../../index';
@Component({

22
packages/core/src/components/popover/popover.tsx
View File

@ -1,5 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Prop, State } from '@stencil/core';
import { AnimationBuilder, Animation, AnimationController, Config } from '../../index';
import { Animation, AnimationBuilder, AnimationController, Config } from '../../index';
import { createThemedClasses } from '../../utils/theme';
@ -71,20 +71,20 @@ export class Popover {
let origin = {
y: 'top',
x: 'left'
}
};
// Popover content width and height
const popover = {
width: contentEl.getBoundingClientRect().width,
height: contentEl.getBoundingClientRect().height
}
};
// Window body width and height
// TODO need to check if portrait/landscape?
const body = {
width: window.screen.width,
height: window.screen.height
}
};
// If ev was passed, use that for target element
let targetDim = this.ev && this.ev.target && (this.ev.target as HTMLElement).getBoundingClientRect();
@ -108,7 +108,7 @@ export class Popover {
const arrow = {
width: arrowDim.width,
height: arrowDim.height
}
};
let arrowCSS = {
top: target.top + target.height,
@ -122,7 +122,7 @@ export class Popover {
// If the popover should be centered to the target
if (props.centerTarget) {
popoverCSS.left = target.left + (target.width / 2) - (popover.width / 2)
popoverCSS.left = target.left + (target.width / 2) - (popover.width / 2);
}
// If the popover left is less than the padding it is off screen
@ -276,12 +276,12 @@ export class Popover {
return [
<ion-backdrop
onClick={this.backdropClick.bind(this)}
class="popover-backdrop"
class='popover-backdrop'
/>,
<div class={wrapperClasses} style={wrapperStyle}>
<div class="popover-arrow"/>
<div class="popover-content">
<div class="popover-viewport">
<div class='popover-arrow'/>
<div class='popover-content'>
<div class='popover-viewport'>
<ThisComponent
props={this.componentProps}
class={this.cssClass}
@ -329,4 +329,4 @@ export const POPOVER_POSITION_PROPERTIES: any = {
showArrow: false,
centerTarget: false
}
}
};

4
packages/core/src/components/radio/radio.tsx
View File

@ -191,5 +191,5 @@ export class Radio {
export interface RadioEvent extends Event {
detail: {
radio: Radio;
}
}
};
}

2
packages/core/src/components/router/route.tsx
View File

@ -18,7 +18,7 @@ export class Route {
// The instance of the router
@Prop() router: any;
//@Prop() match: any;
// @Prop() match: any;
@State() match: any = {};
ionViewWillLoad() {

2
packages/core/src/components/router/router.tsx
View File

@ -17,7 +17,7 @@ export class Router {
@Prop()
get match() {
return this.routeMatch
return this.routeMatch;
}
/*

16
packages/core/src/components/searchbar/searchbar.tsx
View File

@ -351,17 +351,17 @@ export class Searchbar {
return [
<div class='searchbar-input-container'>
<ion-button
mode="md"
mode='md'
onClick={this.cancelSearchbar.bind(this)}
onMousedown={this.cancelSearchbar.bind(this)}
clear
color="dark"
class="searchbar-md-cancel">
<ion-icon name="md-arrow-back"></ion-icon>
color='dark'
class='searchbar-md-cancel'>
<ion-icon name='md-arrow-back'></ion-icon>
</ion-button>
<div class="searchbar-search-icon"></div>
<div class='searchbar-search-icon'></div>
<input
class="searchbar-input"
class='searchbar-input'
onInput={this.inputChanged.bind(this)}
onBlur={this.inputBlurred.bind(this)}
onFocus={this.inputFocused.bind(this)}
@ -373,7 +373,7 @@ export class Searchbar {
spellCheck={this.spellcheck}/>
<ion-button
clear
class="searchbar-clear-icon"
class='searchbar-clear-icon'
onClick={this.clearInput.bind(this)}
onMousedown={this.clearInput.bind(this)}>
</ion-button>
@ -383,7 +383,7 @@ export class Searchbar {
clear
onClick={this.cancelSearchbar.bind(this)}
onMousedown={this.cancelSearchbar.bind(this)}
class="searchbar-ios-cancel">
class='searchbar-ios-cancel'>
{this.cancelButtonText}
</ion-button>
];

2
packages/core/src/components/segment/segment.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, HostElement, Listen, Prop, PropDidChange, EventEmitter, Event } from '@stencil/core';
import { Component, Element, Event, EventEmitter, HostElement, Listen, Prop, PropDidChange } from '@stencil/core';
import { SegmentButtonEvent } from '../../index';

2
packages/core/src/components/select/select-popover.tsx
View File

@ -52,7 +52,7 @@ export class SelectPopover {
render() {
return (
<ion-list no-lines={this.mode == 'md'}>
<ion-list no-lines={this.mode === 'md'}>
<ion-radio-group value={this.value}>
{this.options.map(option =>
<ion-item>

20
packages/core/src/components/select/select.tsx
View File

@ -116,7 +116,7 @@ export class Select {
option.value = option.getText();
}
this.options.push(option.$instance);
})
});
const values = this.getValues();
@ -243,13 +243,13 @@ export class Select {
selectOptions.buttons = selectOptions.buttons.concat({
text: this.okText,
handler: (selectedValues: any) => this.value = selectedValues
})
});
// create the alert instance from our built up selectOptions
const alertOptions = {
cssClass: selectCssClass,
...selectOptions
}
};
console.debug('Built Select: Alert with', alertOptions);
return this.alertCtrl.create(alertOptions);
@ -277,7 +277,7 @@ export class Select {
const actionSheetOptions = {
cssClass: selectCssClass,
...selectOptions
}
};
console.debug('Built Select: Action Sheet with', actionSheetOptions);
return this.actionSheetCtrl.create(actionSheetOptions);
@ -311,7 +311,7 @@ export class Select {
},
cssClass: selectCssClass,
ev: event
}
};
console.debug('Built Select: Popover with', popoverOptions);
return this.popoverCtrl.create(popoverOptions);
@ -385,16 +385,16 @@ export class Select {
return [
<div class={ selectTextClasses }>{ selectText }</div>,
<div class="select-icon">
<div class="select-icon-inner"></div>
<div class='select-icon'>
<div class='select-icon-inner'></div>
</div>,
<button
aria-haspopup="true"
aria-haspopup='true'
id={this.id}
aria-labelledby={this.labelId}
aria-disabled={this.disabled ? "true" : false}
aria-disabled={this.disabled ? 'true' : false}
onClick={this.open.bind(this)}
class="item-cover">
class='item-cover'>
</button>
];
}

2
packages/core/src/components/slides/slides.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, Event, Prop, EventEmitter } from '@stencil/core';
import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core';
import { Swiper } from './vendor/swiper';

6
packages/core/src/components/spinner/spinner.tsx
View File

@ -160,7 +160,7 @@ export class Spinner {
const spinnerClasses = {
...themedClasses,
'spinner-paused': this.paused
}
};
return {
class: spinnerClasses
@ -201,7 +201,7 @@ function buildCircle(spinner: SpinnerConfig, duration: number, index: number, to
return (
<svg viewBox='0 0 64 64' style={data.style}>
<circle transform="translate(32,32)" r={data.r}></circle>
<circle transform='translate(32,32)' r={data.r}></circle>
</svg>
);
}
@ -213,7 +213,7 @@ function buildLine(spinner: SpinnerConfig, duration: number, index: number, tota
return (
<svg viewBox='0 0 64 64' style={data.style}>
<line transform="translate(32,32)" y1={data.y1} y2={data.y2}></line>
<line transform='translate(32,32)' y1={data.y1} y2={data.y2}></line>
</svg>
);
}

4
packages/core/src/components/split-pane/split-pane.tsx
View File

@ -1,4 +1,4 @@
import { Component, State, Element, Event, EventEmitter, Prop, Method, PropDidChange } from '@stencil/core';
import { Component, Element, Event, EventEmitter, Method, Prop, PropDidChange, State } from '@stencil/core';
// import { assert } from '../../utils/helpers';
const SPLIT_PANE_MAIN = 'split-pane-main';
@ -274,7 +274,7 @@ export class SplitPane {
export interface SplitPaneAlert {
detail: {
splitPane: SplitPane
}
};
}
function setPaneClass(ele: HTMLElement, isMain: boolean) {

2
packages/core/src/components/tabs/tab-bar.tsx
View File

@ -18,7 +18,7 @@ export class TabBar {
/**
* @prop {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
*/
@Prop() tabsLayout: string = 'icon-top'
@Prop() tabsLayout: string = 'icon-top';
/*
hostData() {

26
packages/core/src/components/tabs/tab-button.tsx
View File

@ -18,7 +18,7 @@ export class TabButton {
hostData() {
const tab = this.tab;
if(!tab) return {};
if (!tab) return {};
// attr.id
// attr.aria-controls
@ -34,7 +34,7 @@ export class TabButton {
return {
attrs: {
'aria-selected': this.selectedIndex == this.index
'aria-selected': this.selectedIndex === this.index
},
class: {
'has-title': hasTitle,
@ -47,11 +47,11 @@ export class TabButton {
}
render() {
if(!this.tab) {
if (!this.tab) {
return null;
}
const tab = this.tab
const tab = this.tab;
// TODO: Apply these on host?
/*
@ -59,22 +59,22 @@ export class TabButton {
iconOnly, hasBadge, disableHover, tabDisabled, tabHidden } = {};
*/
const items = []
const items = [];
if(tab.tabIcon) {
items.push(<ion-icon class="tab-button-icon" name={tab.tabIcon}></ion-icon>);
if (tab.tabIcon) {
items.push(<ion-icon class='tab-button-icon' name={tab.tabIcon}></ion-icon>);
}
if(tab.tabTitle) {
items.push(<span class="tab-button-text">{tab.tabTitle}</span>);
if (tab.tabTitle) {
items.push(<span class='tab-button-text'>{tab.tabTitle}</span>);
}
if(tab.tabBadge) {
items.push(<ion-badge class="tab-badge" color={tab.tabBadgeStyle}>{tab.tabBadge}</ion-badge>);
if (tab.tabBadge) {
items.push(<ion-badge class='tab-badge' color={tab.tabBadgeStyle}>{tab.tabBadge}</ion-badge>);
}
items.push(<div class="button-effect"></div>);
items.push(<div class='button-effect'></div>);
return (items)
return (items);
}
}

14
packages/core/src/components/tabs/tab.tsx
View File

@ -76,8 +76,8 @@ export class Tab {
},
attrs: {
'role': 'tabpanel'
//'id': _tabId,
//aria-labelledby: _btnId
// 'id': _tabId,
// aria-labelledby: _btnId
},
class: {
}
@ -86,19 +86,19 @@ export class Tab {
ionViewDidLoad() {
setTimeout(() => {
this.ionTabDidLoad.emit({ tab: this })
}, 0)
this.ionTabDidLoad.emit({ tab: this });
}, 0);
}
ionViewDidUnload() {
this.ionTabDidLoad.emit({ tab: this })
this.ionTabDidLoad.emit({ tab: this });
}
render() {
const RootComponent = this.root;
return [
<RootComponent />,
<div class="nav-decor"></div>
]
<div class='nav-decor'></div>
];
}
}

16
packages/core/src/components/tabs/tabs.tsx
View File

@ -1,4 +1,4 @@
import { Component, State, Prop, Listen, PropDidChange } from '@stencil/core';
import { Component, Listen, Prop, PropDidChange, State } from '@stencil/core';
@Component({
@ -14,7 +14,7 @@ import { Component, State, Prop, Listen, PropDidChange } from '@stencil/core';
})
export class Tabs {
// Current list of tabs
@State() tabs: any
@State() tabs: any;
/**
* @state {number} The selected tab
@ -29,7 +29,7 @@ export class Tabs {
/**
* @prop {string} Set the tabbar layout: `icon-top`, `icon-start`, `icon-end`, `icon-bottom`, `icon-hide`, `title-hide`.
*/
@Prop() tabsLayout: string = 'icon-top'
@Prop() tabsLayout: string = 'icon-top';
/**
* @prop {string} Set position of the tabbar: `top`, `bottom`.
@ -52,7 +52,7 @@ export class Tabs {
*/
@PropDidChange('selectedIndex')
handleSelectedIndexChanged() {
this.selectedTab = this.tabs[this.selectedIndex]
this.selectedTab = this.tabs[this.selectedIndex];
}
@Listen('ionTabDidLoad')
@ -60,7 +60,7 @@ export class Tabs {
const tab = ev.detail.tab;
// First tab? Select it
if(this.tabs.length == 0) {
if (this.tabs.length === 0) {
this.handleOnTabSelected(tab, 0);
}
@ -69,7 +69,7 @@ export class Tabs {
@Listen('ionTabDidUnload')
tabDidUnload(ev: any) {
this.tabs = this.tabs.filter((t: any) => t !== ev.detail.tab)
this.tabs = this.tabs.filter((t: any) => t !== ev.detail.tab);
}
handleOnTabSelected(tab: any, index: number) {
@ -82,7 +82,7 @@ export class Tabs {
this.selectedIndex = index;
// Fire a change event
this.ionChange && this.ionChange(tab)
this.ionChange && this.ionChange(tab);
}
render() {
@ -92,6 +92,6 @@ export class Tabs {
onTabSelected={this.handleOnTabSelected.bind(this)}
selectedIndex={this.selectedIndex} />,
<slot></slot>
]
];
}
}

2
packages/core/src/components/toast-controller/toast-controller.tsx
View File

@ -1,5 +1,5 @@
import { Component, Listen, Method } from '@stencil/core';
import { ToastEvent, ToastOptions, Toast } from '../../index';
import { Toast, ToastEvent, ToastOptions } from '../../index';
@Component({
tag: 'ion-toast-controller'

2
packages/core/src/components/toast/animations/ios.enter.ts
View File

@ -11,7 +11,7 @@ export default function iOSEnterAnimation(
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();
const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement
const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
wrapperAnimation.addElement(wrapperEle);
switch (position) {

2
packages/core/src/components/toast/animations/ios.leave.ts
View File

@ -11,7 +11,7 @@ export default function iOSLeaveAnimation(
const baseAnimation = new Animation();
const wrapperAnimation = new Animation();
const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement
const wrapperEle = baseElm.querySelector('.toast-wrapper') as HTMLElement;
wrapperAnimation.addElement(wrapperEle);
switch (position) {
case 'top':

20
packages/core/src/components/toast/toast.tsx
View File

@ -1,7 +1,5 @@
import { Component, Element, Event, EventEmitter, Listen, Prop, State } from '@stencil/core';
import { AnimationBuilder, Animation, AnimationController, Config, CssClassMap } from '../../index';
import { createThemedClasses } from '../../utils/theme';
import { Component, Element, Event, EventEmitter, Listen, Prop } from '@stencil/core';
import { Animation, AnimationBuilder, AnimationController, Config, CssClassMap } from '../../index';
import iOSEnterAnimation from './animations/ios.enter';
import iOSLeaveAnimation from './animations/ios.leave';
@ -129,10 +127,10 @@ export class Toast {
protected ionViewDidEnter() {
this.ionToastDidPresent.emit({ toast: this });
if(this.duration){
setTimeout(()=>{
if (this.duration) {
setTimeout(() => {
this.dismiss();
}, this.duration)
}, this.duration);
}
}
@ -144,12 +142,12 @@ export class Toast {
return (
<div class={this.wrapperClass()}>
<div class="toast-container">
<div class='toast-container'>
{this.message
? <div class="toast-message">{this.message}</div>
? <div class='toast-message'>{this.message}</div>
: null}
{this.showCloseButton
? <ion-button clear color="light" class="toast-button" onClick={()=>this.dismiss()}>
? <ion-button clear color='light' class='toast-button' onClick={() => this.dismiss()}>
{this.closeButtonText || 'Close'}
</ion-button>
: null}
@ -160,7 +158,7 @@ export class Toast {
wrapperClass(): CssClassMap {
let wrapperClass: string[] = !this.position
? ['toast-wrapper','toast-bottom']
? ['toast-wrapper', 'toast-bottom']
: [`toast-wrapper`, `toast-${this.position}`];
return wrapperClass.reduce((prevValue: any, cssClass: any) => {
prevValue[cssClass] = true;

3
packages/core/src/components/util/util.tsx
View File

@ -11,5 +11,4 @@ export class IonUtils {
}
}
}
}