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

refactor(all): using ComponentInterface

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-09-14 18:45:39 +02:00
parent 9ad05d85cd
commit c49d896e08
99 changed files with 208 additions and 224 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
core/src/components/fab-button/fab-button.tsx
View File

@ -1,7 +1,7 @@
import { Component, Element, Prop } from '@stencil/core';
import { Component, ComponentInterface, Element, Prop } from '@stencil/core';
import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
import { createColorClasses, openURL } from '../../utils/theme';
import { Color, Mode, RouterDirection } from '../../interface';
import { createColorClasses, hostContext, openURL } from '../../utils/theme';
@Component({
tag: 'ion-fab-button',
@ -11,8 +11,7 @@ import { createColorClasses, openURL } from '../../utils/theme';
},
shadow: true
})
export class FabButton {
private inList = false;
export class FabButton implements ComponentInterface {
@Prop({ context: 'window' }) win!: Window;
@ -63,31 +62,16 @@ export class FabButton {
*/
@Prop() show = false;
componentWillLoad() {
const parentNode = this.el.parentNode;
const parentTag = parentNode ? parentNode.nodeName : null;
this.inList = parentTag === 'ION-FAB-LIST';
}
/**
* Get the classes for fab buttons in lists
*/
private getFabClassMap(): CssClassMap {
return {
'fab-button-in-list': this.inList,
'fab-button-translucent-in-list': this.inList && this.translucent,
'fab-button-close-active': this.activated,
'fab-button-show': this.show
};
}
hostData() {
const inList = hostContext('ion-fab-list', this.el);
return {
'ion-activatable': true,
class: {
...createColorClasses(this.color),
...this.getFabClassMap(),
'fab-button-in-list': inList,
'fab-button-translucent-in-list': inList && this.translucent,
'fab-button-close-active': this.activated,
'fab-button-show': this.show,
'fab-button-disabled': this.disabled,
'fab-button-translucent': this.translucent
}