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

fix(): change fabs so that state is in the container and props are passed down to button and lists.

Browse Source
This commit is contained in:
Josh Thomas
2017-10-18 12:08:37 -05:00
parent d2a07c1371
commit bdee7be365
5 changed files with 7796 additions and 38 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7766
packages/core/package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

9
packages/core/src/components.d.ts vendored
View File

@ -629,7 +629,6 @@ declare global {
mode?: string,
color?: string,
pickerCtrl?: any,
disabled?: boolean,
min?: string,
max?: string,
@ -647,8 +646,7 @@ declare global {
dayNames?: any,
dayShortNames?: any,
pickerOptions?: any,
placeholder?: string,
value?: string
placeholder?: string
}
}
}
@ -708,6 +706,7 @@ declare global {
mode?: string,
color?: string,
activated?: boolean
}
}
}
@ -737,8 +736,10 @@ declare global {
mode?: string,
color?: string,
close?: any,
href?: string,
activated?: boolean,
toggleActive?: any,
show?: boolean,
disabled?: boolean
}
}

20
packages/core/src/components/fab/fab-container.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, Method } from '@stencil/core';
import { Component, Element, Method, State } from '@stencil/core';
/**
@ -89,16 +89,30 @@ import { Component, Element, Method } from '@stencil/core';
export class FabContainer {
@Element() private el: HTMLElement;
@State() activated: boolean = false;
/**
* Close an active FAB list container
*/
@Method()
close() {
const fab: any = this.el.querySelector('ion-fab-button');
fab.close();
this.activated = false;
}
toggleActive = () => {
this.activated = !this.activated;
}
protected render() {
const fab: any = this.el.querySelector('ion-fab-button');
fab.toggleActive = this.toggleActive;
fab.activated = this.activated;
const lists = this.el.querySelectorAll('ion-fab-list');
for (let i = 0, length = lists.length; i < length; i += 1) {
lists[i].activated = this.activated;
}
return (
<slot></slot>
);

4
packages/core/src/components/fab/fab-list.tsx
View File

@ -1,4 +1,4 @@
import { Component, Element, PropDidChange, State } from '@stencil/core';
import { Component, Element, Prop, PropDidChange } from '@stencil/core';
/**
@ -31,7 +31,7 @@ import { Component, Element, PropDidChange, State } from '@stencil/core';
export class FabList {
@Element() private el: HTMLElement;
@State() activated: boolean = false;
@Prop() activated: boolean = false;
@PropDidChange('activated')
activatedChange(activated: boolean) {

35
packages/core/src/components/fab/fab.tsx
View File

@ -1,4 +1,4 @@
import { Component, CssClassMap, Element, Method, Prop, State } from '@stencil/core';
import { Component, CssClassMap, Element, Method, Prop, State, PropDidChange } from '@stencil/core';
import { createThemedClasses, getElementClassObject } from '../../utils/theme';
@ -61,10 +61,11 @@ export class FabButton {
private color: string;
@Prop() href: string;
@Prop() activated: boolean = false;
@Prop() toggleActive: Function = () => {};
@State() show: boolean = false;
@Prop() show: boolean = false;
@State() private activated: boolean = false;
@State() private inContainer: boolean = false;
@State() private inList: boolean = false;
@ -80,37 +81,13 @@ export class FabButton {
this.inContainer = (parentNode === 'ION-FAB');
}
clickedFab() {
if (this.inContainer) {
const activated = !this.activated;
this.setActiveLists(activated);
this.toggleActive();
}
}
/**
* @hidden
*/
setActiveLists(activated: boolean) {
const lists = this.el.parentElement.querySelectorAll('ion-fab-list');
if (lists.length > 0) {
this.activated = activated;
}
for (var i = 0; i < lists.length; i++) {
const list = lists[i];
list.activated = activated;
}
}
/**
* Close an active FAB list container
*/
@Method()
close() {
this.setActiveLists(false);
}
/**
* @hidden
* Get the classes for fab buttons in lists