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

chore(button): minification tricks

Browse Source
This commit is contained in:
Adam Bradley
2017-08-09 17:53:29 -05:00
parent 19c535c419
commit 814268b31e
1 changed files with 105 additions and 111 deletions
Download Patch File Download Diff File Expand all files Collapse all files

136
packages/core/src/components/button/button.tsx
View File

@ -161,12 +161,60 @@ export class Button {
*/
@Prop() color: string;
render() {
const buttonType = this.buttonType;
const mode = this.mode;
const size =
(this.large ? 'large' : null) ||
(this.small ? 'small' : null) ||
(this.default ? 'default' : null);
const shape = (this.round ? 'round' : null);
const display =
(this.block ? 'block' : null) ||
(this.full ? 'full' : null);
const decorator = (this.strong ? 'strong' : null);
const buttonClasses: CssClassMap = []
.concat(
getButtonClassList(buttonType, mode),
getClassList(buttonType, shape, mode),
getClassList(buttonType, display, mode),
getClassList(buttonType, size, mode),
getClassList(buttonType, decorator, mode),
getStyleClassList(mode, this.color, buttonType, this.outline, this.clear, this.solid),
getItemClassList(this.itemButton, size),
getElementClassList(this.el.classList)
)
.reduce((prevValue, cssClass) => {
prevValue[cssClass] = true;
return prevValue;
}, {});
const TagType = this.href ? 'a' : 'button';
return (
<TagType class={buttonClasses} disabled={this.disabled}>
<span class='button-inner'>
<slot name='icon-only'></slot>
<slot name='start'></slot>
<slot></slot>
<slot name='end'></slot>
</span>
<div class='button-effect'></div>
</TagType>
);
}
}
/**
* @hidden
* Get the classes based on the button type
* e.g. alert-button, action-sheet-button
*/
private getButtonClassList(buttonType: string, mode: string): string[] {
function getButtonClassList(buttonType: string, mode: string): string[] {
if (!buttonType) {
return [];
}
@ -178,11 +226,10 @@ export class Button {
/**
* @hidden
* Get the classes based on the type
* e.g. block, full, round, large
*/
private getClassList(buttonType: string, type: string, mode: string): string[] {
function getClassList(buttonType: string, type: string, mode: string): string[] {
if (!type) {
return [];
}
@ -194,11 +241,11 @@ export class Button {
}
/**
* @hidden
* Get the classes for the color
*/
private getColorClassList(color: string, buttonType: string, style: string, mode: string): string[] {
function getColorClassList(color: string, buttonType: string, style: string, mode: string): string[] {
style = (buttonType !== 'bar-button' && style === 'solid') ? 'default' : style;
let className =
buttonType +
((style && style !== 'default') ?
@ -222,90 +269,37 @@ export class Button {
}
/**
* @hidden
* Get the classes for the style
* e.g. outline, clear, solid
*/
private getStyleClassList(buttonType: string): string[] {
function getStyleClassList(mode: string, color: string, buttonType: string, outline: boolean, clear: boolean, solid: boolean): string[] {
let classList = [].concat(
this.outline ? this.getColorClassList(this.color, buttonType, 'outline', this.mode) : [],
this.clear ? this.getColorClassList(this.color, buttonType, 'clear', this.mode) : [],
this.solid ? this.getColorClassList(this.color, buttonType, 'solid', this.mode) : []
outline ? getColorClassList(color, buttonType, 'outline', mode) : [],
clear ? getColorClassList(color, buttonType, 'clear', mode) : [],
solid ? getColorClassList(color, buttonType, 'solid', mode) : []
);
if (classList.length === 0) {
classList = this.getColorClassList(this.color, buttonType, 'default', this.mode);
classList = getColorClassList(color, buttonType, 'default', mode);
}
return classList;
}
/**
* @hidden
* Get the item classes for the button
*/
private getItemClassList(size: string) {
let classList = [].concat(
this.itemButton && !size ? 'item-button' : []
);
return classList;
function getItemClassList(itemButton: boolean, size: string) {
return itemButton && !size ? ['item-button'] : [];
}
/**
* @hidden
* Get the element classes to add to the child element
*/
private getElementClassList() {
let classList = [].concat(
this.el.className.length ? this.el.className.split(' ') : []
);
function getElementClassList(elmClassList: DOMTokenList) {
const classList: string[] = [];
for (var i = 0; i < elmClassList.length; i++) {
classList.push(elmClassList.item(i));
}
return classList;
}
render() {
const size =
(this.large ? 'large' : null) ||
(this.small ? 'small' : null) ||
(this.default ? 'default' : null);
const shape = (this.round ? 'round' : null);
const display =
(this.block ? 'block' : null) ||
(this.full ? 'full' : null);
const decorator = (this.strong ? 'strong' : null);
const buttonClasses: CssClassMap = []
.concat(
this.getButtonClassList(this.buttonType, this.mode),
this.getClassList(this.buttonType, shape, this.mode),
this.getClassList(this.buttonType, display, this.mode),
this.getClassList(this.buttonType, size, this.mode),
this.getClassList(this.buttonType, decorator, this.mode),
this.getStyleClassList(this.buttonType),
this.getItemClassList(size),
this.getElementClassList()
)
.reduce((prevValue, cssClass) => {
prevValue[cssClass] = true;
return prevValue;
}, {});
const TagType = this.href ? 'a' : 'button';
return (
<TagType class={buttonClasses} disabled={this.disabled}>
<span class='button-inner'>
<slot name='icon-only'></slot>
<slot name='start'></slot>
<slot></slot>
<slot name='end'></slot>
</span>
<div class='button-effect'></div>
</TagType>
);
}
}