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

fix(button): use class instead of reflect

Browse Source 
fixes #15623
This commit is contained in:
Manu Mtz.-Almeida
2018-10-08 16:02:00 -05:00
parent e2ea08b29b
commit e189cc6ec2
2 changed files with 12 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
core/src/components/button/button.scss
View File

@ -62,7 +62,7 @@
font-kerning: none;
}
:host([disabled]) {
:host(.button-disabled) {
pointer-events: none;
}

48
core/src/components/button/button.tsx
View File

@ -1,6 +1,6 @@
import { Component, ComponentInterface, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
import { Color, Mode, RouterDirection } from '../../interface';
import { hasShadowDom } from '../../utils/helpers';
import { createColorClasses, openURL } from '../../utils/theme';
@ -146,19 +146,21 @@ export class Button implements ComponentInterface {
}
hostData() {
const { buttonType, color, expand, fill, mode, shape, size, strong } = this;
const { buttonType, keyFocus, disabled, color, expand, fill, shape, size, strong } = this;
return {
'ion-activatable': true,
class: {
...createColorClasses(color),
...getButtonClassMap(buttonType, mode),
...getButtonTypeClassMap(buttonType, expand, mode),
...getButtonTypeClassMap(buttonType, size, mode),
...getButtonTypeClassMap(buttonType, shape, mode),
...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode),
...getButtonTypeClassMap(buttonType, fill, mode),
'focused': this.keyFocus,
[buttonType]: true,
[`${buttonType}-${expand}`]: !!expand,
[`${buttonType}-${size}`]: !!size,
[`${buttonType}-${shape}`]: !!shape,
[`${buttonType}-${fill}`]: !!fill,
[`${buttonType}-strong`]: strong,
'focused': keyFocus,
'button-disabled': disabled
}
};
}
@ -191,31 +193,3 @@ export class Button implements ComponentInterface {
);
}
}
/**
* Get the classes based on the button type
* e.g. alert-button, action-sheet-button
*/
function getButtonClassMap(buttonType: string | undefined, mode: Mode): CssClassMap {
if (buttonType === undefined) {
return {};
}
return {
[buttonType]: true,
[`${buttonType}-${mode}`]: true
};
}
/**
* Get the classes based on the type
* e.g. block, full, round, large
*/
function getButtonTypeClassMap(buttonType: string, type: string | undefined, mode: Mode): CssClassMap {
if (type === undefined) {
return {};
}
return {
[`${buttonType}-${type}`]: true,
[`${buttonType}-${type}-${mode}`]: true
};
}