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

View File

@ -1,5 +1,4 @@
import { Component, Element } from '@stencil/core';
import { Component } from '@stencil/core';
@Component({
tag: 'ion-reorder',
@ -13,28 +12,12 @@ import { Component, Element } from '@stencil/core';
})
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() {
return (this.custom)
? <slot/>
: <ion-icon class="reorder-icon" name="reorder"/>;
return (
<slot>
<ion-icon class="reorder-icon" name="reorder"/>
</slot>
);
}
}