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

refactor(button): using createColorClasses

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-09-06 23:00:50 +02:00
parent 104f5aaf70
commit fc87875b8f
1 changed files with 3 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/c
import { Color, CssClassMap, Mode, RouterDirection } from '../../interface'; import { Color, CssClassMap, Mode, RouterDirection } from '../../interface';
import { hasShadowDom } from '../../utils/helpers'; import { hasShadowDom } from '../../utils/helpers';
import { openURL } from '../../utils/theme'; import { createColorClasses, openURL } from '../../utils/theme';
@Component({ @Component({
tag: 'ion-button', tag: 'ion-button',
@ -150,12 +150,13 @@ export class Button {
return { return {
class: { class: {
...createColorClasses(color),
...getButtonClassMap(buttonType, mode), ...getButtonClassMap(buttonType, mode),
...getButtonTypeClassMap(buttonType, expand, mode), ...getButtonTypeClassMap(buttonType, expand, mode),
...getButtonTypeClassMap(buttonType, size, mode), ...getButtonTypeClassMap(buttonType, size, mode),
...getButtonTypeClassMap(buttonType, shape, mode), ...getButtonTypeClassMap(buttonType, shape, mode),
...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode), ...getButtonTypeClassMap(buttonType, strong ? 'strong' : undefined, mode),
...getColorClassMap(buttonType, color, fill, mode), ...getButtonTypeClassMap(buttonType, fill, mode),
'focused': this.keyFocus, 'focused': this.keyFocus,
}, },
'ion-activable': true, 'ion-activable': true,
@ -218,21 +219,3 @@ function getButtonTypeClassMap(buttonType: string, type: string | undefined, mod
[`${buttonType}-${type}-${mode}`]: true [`${buttonType}-${type}-${mode}`]: true
}; };
} }
function getColorClassMap(buttonType: string, color: string | undefined, fill: string | undefined, mode: Mode): CssClassMap {
let className = buttonType;
if (fill !== undefined) {
className += `-${fill.toLowerCase()}`;
}
const map: CssClassMap = {
[className]: true,
[`${className}-${mode}`]: true,
};
if (color !== undefined) {
map[`ion-color`] = true;
map[`ion-color-${color}`] = true;
}
return map;
}