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

fix(buttons): custom cssClass

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-02-03 19:16:37 +01:00
parent ba9327979a
commit 6d52b722e4
12 changed files with 157 additions and 271 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
packages/core/src/components/chip-button/chip-button.tsx
View File

@ -1,6 +1,5 @@
import { Component, CssClassMap, Element, Prop } from '@stencil/core';
import { getElementClassObject } from '../../utils/theme';
import { getButtonClassMap, getElementClassMap } from '../../utils/theme';
@Component({
tag: 'ion-chip-button',
@ -40,60 +39,24 @@ export class ChipButton {
*/
@Prop() href: string;
/**
* Get the classes based on the button type
* e.g. alert-button, action-sheet-button
*/
private getButtonClassList(buttonType: string, mode: string): string[] {
if (!buttonType) {
return [];
}
return [
buttonType,
`${buttonType}-${mode}`
];
}
/**
* Get the classes for the color
*/
private getColorClassList(color: string, buttonType: string, style: string, mode: string): string[] {
const className = (style === 'default') ? `${buttonType}` : `${buttonType}-${style}`;
return [`${className}-${mode}`].concat(
style !== 'default' ? `${className}` : [],
color ? `${className}-${mode}-${color}` : []
);
}
/**
* Get the classes for the style
* Chip buttons can only be clear or default (solid)
*/
private getStyleClassList(buttonType: string): string[] {
return this.getColorClassList(this.color, buttonType, this.fill || 'default', this.mode);
private getStyleClassMap(buttonType: string): CssClassMap {
return getColorClassMap(this.color, buttonType, this.fill || 'default', this.mode);
}
render() {
const buttonType = 'chip-button';
const hostClasses = getElementClassObject(this.el.classList);
const elementClasses: CssClassMap = []
.concat(
this.getButtonClassList(buttonType, this.mode),
this.getStyleClassList(buttonType)
)
.reduce((prevValue, cssClass) => {
prevValue[cssClass] = true;
return prevValue;
}, {});
const hostClasses = getElementClassMap(this.el.classList);
const TagType = this.href ? 'a' : 'button';
const buttonClasses = {
...hostClasses,
...elementClasses
...getButtonClassMap(buttonType, this.mode),
...this.getStyleClassMap(buttonType),
};
return (
@ -109,3 +72,19 @@ export class ChipButton {
);
}
}
/**
* Get the classes for the color
*/
function getColorClassMap(color: string, buttonType: string, style: string, mode: string): CssClassMap {
const className = (style === 'default') ? `${buttonType}` : `${buttonType}-${style}`;
const map: CssClassMap = {
[className]: true,
[`${className}-${mode}`]: true
};
if (color) {
map[`${className}-${mode}-${color}`] = true;
}
return map;
}