refactor(components): move icon to .tsx

This commit is contained in:
Brandy Carney
2017-06-13 15:20:34 -04:00
parent 30cd5454a1
commit e5b658c36b

View File

@ -1,6 +1,5 @@
import { Component, h, Ionic, Prop } from '../index'; import { Component, h, Ionic, Prop, State } from '../index';
type CssClassObject = { [className: string]: boolean }; import { CssClassObject, VNodeData } from '../../util/interfaces';
@Component({ @Component({
tag: 'ion-icon', tag: 'ion-icon',
@ -9,20 +8,24 @@ type CssClassObject = { [className: string]: boolean };
md: 'icon.md.scss', md: 'icon.md.scss',
wp: 'icon.wp.scss' wp: 'icon.wp.scss'
}, },
shadow: false host: {
theme: 'icon'
}
}) })
export class Icon { export class Icon {
mode: string; mode: string;
@Prop() color: string;
/** /**
* @input {string} Specifies the label to use for accessibility. Defaults to the icon name. * @input {string} Specifies the label to use for accessibility. Defaults to the icon name.
*/ */
@Prop() label: string = ''; @State() label: string = '';
/** /**
* @input {string} Specifies the mode to use for the icon. * @input {string} Specifies the mode to use for the icon.
*/ */
@Prop() iconMode: string = ''; @State() iconMode: string = '';
/** /**
* @input {string} Specifies which icon to use. The appropriate icon will be used based on the mode. * @input {string} Specifies which icon to use. The appropriate icon will be used based on the mode.
@ -45,20 +48,14 @@ export class Icon {
* An active icon is filled in, and an inactive icon is the outline of the icon. * An active icon is filled in, and an inactive icon is the outline of the icon.
* The `isActive` property is largely used by the tabbar. Only affects `ios` icons. * The `isActive` property is largely used by the tabbar. Only affects `ios` icons.
*/ */
@Prop() isActive: boolean = false; @Prop() isActive: boolean = null;
/** /**
* @input {boolean} If true, the icon is hidden. * @input {boolean} If true, the icon is hidden.
*/ */
@Prop() hidden: boolean = false; @Prop() hidden: boolean = false;
getElementClass(): string {
constructor() {
// TODO set the right iconMode based on the platform
this.iconMode = this.mode || Ionic.config.get('iconMode', 'ios');
}
getElementClassList() {
let iconName: string; let iconName: string;
// If no name was passed set iconName to null // If no name was passed set iconName to null
@ -82,13 +79,13 @@ export class Icon {
if ((iconName === null) || (this.hidden === true)) { if ((iconName === null) || (this.hidden === true)) {
console.warn('Icon is hidden.'); console.warn('Icon is hidden.');
return ['hide']; return 'hide';
} }
let iconMode = iconName.split('-', 2)[0]; let iconMode = iconName.split('-', 2)[0];
if ( if (
iconMode === 'ios' && iconMode === 'ios' &&
!this.isActive && this.isActive === false &&
iconName.indexOf('logo-') < 0 && iconName.indexOf('logo-') < 0 &&
iconName.indexOf('-outline') < 0) { iconName.indexOf('-outline') < 0) {
iconName += '-outline'; iconName += '-outline';
@ -103,23 +100,29 @@ export class Icon {
return `ion-${iconName}`; return `ion-${iconName}`;
} }
render() { hostData(): VNodeData {
// TODO set the right iconMode based on the config
let iconMode = this.mode === 'md' ? 'md' : 'ios';
this.iconMode = iconMode || Ionic.config.get('iconMode');
const iconClasses: CssClassObject = [] const iconClasses: CssClassObject = []
.concat( .concat(
this.getElementClassList(), this.getElementClass(),
) )
.reduce((prevValue, cssClass) => { .reduce((prevValue, cssClass) => {
prevValue[cssClass] = true; prevValue[cssClass] = true;
return prevValue; return prevValue;
}, {}); }, {});
return h(this, Ionic.theme(this, 'icon', { return {
class: iconClasses,
attrs: { attrs: {
role: 'img', 'role': 'img'
'aria-label': this.label }
}, };
class: iconClasses
}));
} }
render() {
return <slot></slot>;
}
} }