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

refactor(components): move function to get classes from host to utils

Browse Source 
Moved getElementClassObject function to utils/theme and updated the
components with child buttons to use this function to get the host
classes.

Adds the ability to pass classes down from host to child for content
and segment button

closes ionic-team/stencil#84
This commit is contained in:
Brandy Carney
2017-08-11 13:26:10 -04:00
parent 319d38ac1a
commit 4dcb174245
11 changed files with 80 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
packages/core/src/components/segment-button/segment-button.tsx
View File

@ -1,7 +1,7 @@
import { Component, Event, EventEmitter, Prop, State } from '@stencil/core';
import { Component, Element, Event, EventEmitter, Prop, State } from '@stencil/core';
import { CssClassMap } from '../../index';
import { createThemedClasses } from '../../utils/theme';
import { createThemedClasses, getElementClassObject } from '../../utils/theme';
/**
@ -49,6 +49,8 @@ export class SegmentButton {
mode: string;
color: string;
@Element() el: HTMLElement;
@Event() ionClick: EventEmitter;
@State() activated: boolean = false;
@ -92,7 +94,7 @@ export class SegmentButton {
/**
* @hidden
* Get the element classes to add to the child element
* Get the classes for the segment button state
*/
getElementClassList() {
let classList = [].concat(
@ -104,9 +106,10 @@ export class SegmentButton {
}
render() {
const segmentButtonCss = createThemedClasses(this.mode, this.color, 'segment-button');
const themedClasses = createThemedClasses(this.mode, this.color, 'segment-button');
const hostClasses = getElementClassObject(this.el.classList);
var segmentButtonClasses: CssClassMap = []
const elementClasses: CssClassMap = []
.concat(
this.getElementClassList()
)
@ -115,10 +118,14 @@ export class SegmentButton {
return prevValue;
}, {});
segmentButtonClasses = Object.assign(segmentButtonClasses, segmentButtonCss);
const buttonClasses = {
...themedClasses,
...hostClasses,
...elementClasses
};
return [
<button onClick={this.segmentButtonClick.bind(this)} class={segmentButtonClasses} aria-pressed={this.activated}>
<button onClick={this.segmentButtonClick.bind(this)} class={buttonClasses} aria-pressed={this.activated}>
<slot></slot>
</button>
];