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

fix(fab): fix fab activation

Browse Source
This commit is contained in:
Manu Mtz.-Almeida
2018-04-11 20:57:50 +02:00
parent 49e5b7e016
commit a203534b27
13 changed files with 95 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

32
core/src/components/fab-button/fab-button.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, Prop, State } from '@stencil/core';
import { Component, Element, Prop } from '@stencil/core';
import { createThemedClasses, getElementClassMap } from '../../utils/theme';
import { CssClassMap } from '../../index';
@ -11,12 +11,11 @@ import { CssClassMap } from '../../index';
}
})
export class FabButton {
private inList = false;
@Element() private el: HTMLElement;
@State() private inContainer = false;
@State() private inList = false;
/**
* The color to use from your Sass `$colors` map.
* Default options are: `"primary"`, `"secondary"`, `"tertiary"`, `"success"`, `"warning"`, `"danger"`, `"light"`, `"medium"`, and `"dark"`.
@ -45,37 +44,26 @@ export class FabButton {
* Contains a URL or a URL fragment that the hyperlink points to.
* If this property is set, an anchor tag will be rendered.
*/
@Prop() href: string;
@Prop() href: string | undefined;
/**
* If true, the fab button will be translucent. Defaults to `false`.
*/
@Prop() translucent = false;
@Prop() toggleActive: Function;
@Prop() show = false;
componentDidLoad() {
componentWillLoad() {
const parentNode = this.el.parentNode;
const parentTag = parentNode ? parentNode.nodeName : null;
this.inList = (parentTag === 'ION-FAB-LIST');
this.inContainer = (parentTag === 'ION-FAB');
}
clickedFab() {
if (this.inContainer) {
this.toggleActive();
}
}
/**
* Get the classes for fab buttons in lists
*/
getFabClassMap(): CssClassMap {
private getFabClassMap(): CssClassMap {
return {
'fab-button-in-list': this.inList,
[`fab-button-${this.mode}-in-list`]: this.inList,
@ -89,10 +77,7 @@ export class FabButton {
const themedClasses = createThemedClasses(this.mode, this.color, 'fab-button');
const translucentClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'fab-button-translucent') : {};
const hostClasses = getElementClassMap(this.el.classList);
const TagType = this.href ? 'a' : 'button';
const fabClasses = {
...this.getFabClassMap(),
...themedClasses,
@ -104,8 +89,7 @@ export class FabButton {
<TagType
class={fabClasses}
disabled={this.disabled}
href={this.href}
onClick={this.clickedFab.bind(this)}>
href={this.href}>
<ion-icon name='close' class='fab-button-close-icon'></ion-icon>
<span class='fab-button-inner'>
<slot></slot>