refactor(reorder): using fallback slot

This commit is contained in:
Manu Mtz.-Almeida
2018-04-23 23:29:16 +02:00
parent b3a9c7f819
commit d06409a2bd
3 changed files with 14 additions and 39 deletions

View File

@ -2325,7 +2325,7 @@
}, },
"onetime": { "onetime": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz", "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=", "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
"dev": true "dev": true
}, },
@ -6559,7 +6559,7 @@
}, },
"onetime": { "onetime": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz", "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=", "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
"dev": true "dev": true
}, },
@ -6712,7 +6712,7 @@
}, },
"onetime": { "onetime": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz", "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=", "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
"dev": true "dev": true
}, },
@ -8068,7 +8068,7 @@
}, },
"onetime": { "onetime": {
"version": "1.1.0", "version": "1.1.0",
"resolved": "https://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz", "resolved": "http://registry.npmjs.org/onetime/-/onetime-1.1.0.tgz",
"integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=", "integrity": "sha1-ofeDj4MUxRbwXs78vEzP4EtO14k=",
"dev": true "dev": true
}, },

View File

@ -1,4 +1,4 @@
import { Component, Element, Prop } from '@stencil/core'; import { Component, Prop } from '@stencil/core';
import { Config } from '../../index'; import { Config } from '../../index';
@Component({ @Component({
@ -13,8 +13,6 @@ import { Config } from '../../index';
}) })
export class MenuButton { export class MenuButton {
private custom = true;
@Prop({ context: 'config' }) config!: Config; @Prop({ context: 'config' }) config!: Config;
/** /**
@ -27,20 +25,14 @@ export class MenuButton {
*/ */
@Prop() autoHide = true; @Prop() autoHide = true;
@Element() el!: HTMLElement;
componentWillLoad() {
this.custom = this.el.childElementCount > 0;
}
render() { render() {
const menuIcon = this.config.get('menuIcon', 'menu'); const menuIcon = this.config.get('menuIcon', 'menu');
return ( return (
<ion-menu-toggle menu={this.menu} autoHide={this.autoHide}> <ion-menu-toggle menu={this.menu} autoHide={this.autoHide}>
<ion-button> <ion-button>
{this.custom <slot>
? <slot/> <ion-icon slot="icon-only" name={menuIcon}/>
: <ion-icon slot="icon-only" name={menuIcon}/>} </slot>
</ion-button> </ion-button>
</ion-menu-toggle> </ion-menu-toggle>
); );

View File

@ -1,5 +1,4 @@
import { Component, Element } from '@stencil/core'; import { Component } from '@stencil/core';
@Component({ @Component({
tag: 'ion-reorder', tag: 'ion-reorder',
@ -13,28 +12,12 @@ import { Component, Element } from '@stencil/core';
}) })
export class Reorder { export class Reorder {
private custom = true;
@Element() el!: HTMLElement;
componentWillLoad() {
this.custom = this.el.childElementCount > 0;
}
hostData() {
const hostClasses = {
'reorder-custom': this.custom
};
return {
class: hostClasses
};
}
render() { render() {
return (this.custom) return (
? <slot/> <slot>
: <ion-icon class="reorder-icon" name="reorder"/>; <ion-icon class="reorder-icon" name="reorder"/>
</slot>
);
} }
} }