diff --git a/packages/core/src/components/action-sheet/action-sheet.tsx b/packages/core/src/components/action-sheet/action-sheet.tsx index f5039680c8..98789e1d2d 100644 --- a/packages/core/src/components/action-sheet/action-sheet.tsx +++ b/packages/core/src/components/action-sheet/action-sheet.tsx @@ -10,7 +10,7 @@ import { } from '../../index'; import { domControllerAsync, isDef, playAnimationAsync } from '../../utils/helpers'; -import { createThemedClasses } from '../../utils/theme'; +import { createThemedClasses, getClassMap } from '../../utils/theme'; import iosEnterAnimation from './animations/ios.enter'; import iosLeaveAnimation from './animations/ios.leave'; @@ -208,22 +208,6 @@ export class ActionSheet { } } - buttonClass(button: ActionSheetButton): CssClassMap { - const buttonClass: string[] = !button.role - ? ['action-sheet-button'] - : [`action-sheet-button`, `action-sheet-${button.role}`]; - - if (button.cssClass) { - const customClass = button.cssClass.split(' ').filter(b => b.trim() !== '').join(' '); - buttonClass.push(customClass); - } - - return buttonClass.reduce((prevValue: any, cssClass: any) => { - prevValue[cssClass] = true; - return prevValue; - }, {}); - } - protected buttonClick(button: ActionSheetButton) { let shouldDismiss = true; if (button.handler) { @@ -239,22 +223,15 @@ export class ActionSheet { hostData() { const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'action-sheet-translucent') : {}; - const hostClasses = { - ...themedClasses - }; - return { - class: hostClasses + class: { + ...themedClasses, + ...getClassMap(this.cssClass) + } }; } render() { - if (this.cssClass) { - this.cssClass.split(' ').forEach(cssClass => { - if (cssClass.trim() !== '') this.el.classList.add(cssClass); - }); - } - let cancelButton: ActionSheetButton; const buttons = this.buttons .map(b => { @@ -289,7 +266,7 @@ export class ActionSheet { : null} {buttons.map(b => - @@ -351,28 +352,24 @@ export class Picker { ]; } - - buttonWrapperClass(button: PickerButton): CssClassMap { - const buttonClass: string[] = !button.role - ? ['picker-toolbar-button'] - : [`picker-toolbar-button`, `picker-toolbar-${button.role}`]; - return buttonClass.reduce((prevValue: any, cssClass: any) => { - prevValue[cssClass] = true; - return prevValue; - }, {}); - } - - buttonClass(button: PickerButton): CssClassMap { - const buttonClass: string[] = !button.cssClass - ? ['picker-button'] - : [`picker-button`, `${button.cssClass}`]; - return buttonClass.reduce((prevValue: any, cssClass: any) => { - prevValue[cssClass] = true; - return prevValue; - }, {}); - } } +function buttonWrapperClass(button: PickerButton): CssClassMap { + const buttonClass: CssClassMap = { + 'picker-toolbar-button': true, + }; + if (button.role) { + buttonClass[`picker-toolbar-${button.role}`] = true; + } + return buttonClass; +} + +function buttonClass(button: PickerButton): CssClassMap { + return { + 'picker-button': true, + ...getClassMap(button.cssClass) + }; +} export interface PickerButton { text?: string; diff --git a/packages/core/src/components/segment-button/segment-button.tsx b/packages/core/src/components/segment-button/segment-button.tsx index 248d890714..ed6170a780 100644 --- a/packages/core/src/components/segment-button/segment-button.tsx +++ b/packages/core/src/components/segment-button/segment-button.tsx @@ -1,6 +1,5 @@ import { Component, Element, Event, EventEmitter, Prop } from '@stencil/core'; -import { CssClassMap } from '../../index'; -import { createThemedClasses, getElementClassObject } from '../../utils/theme'; +import { createThemedClasses, getElementClassMap } from '../../utils/theme'; @Component({ @@ -62,35 +61,16 @@ export class SegmentButton { }); } - /** - * Get the classes for the segment button state - */ - getElementClassList() { - const classList = [].concat( - this.disabled ? 'segment-button-disabled' : [], - this.activated ? 'segment-activated' : [], - ); - - return classList; - } render() { const themedClasses = createThemedClasses(this.mode, this.color, 'segment-button'); - const hostClasses = getElementClassObject(this.el.classList); - - const elementClasses: CssClassMap = [] - .concat( - this.getElementClassList() - ) - .reduce((prevValue, cssClass) => { - prevValue[cssClass] = true; - return prevValue; - }, {}); + const hostClasses = getElementClassMap(this.el.classList); const buttonClasses = { + 'segment-button-disabled': this.disabled, + 'segment-activated': this.activated, ...themedClasses, ...hostClasses, - ...elementClasses }; const TagType = this.href ? 'a' : 'button'; diff --git a/packages/core/src/components/toast/toast.tsx b/packages/core/src/components/toast/toast.tsx index a1b36bca0f..4905e16893 100644 --- a/packages/core/src/components/toast/toast.tsx +++ b/packages/core/src/components/toast/toast.tsx @@ -2,7 +2,7 @@ import { Component, Element, Event, EventEmitter, Listen, Method, Prop } from '@ import { Animation, AnimationBuilder, AnimationController, Config, CssClassMap, DomController, OverlayDismissEvent, OverlayDismissEventDetail } from '../../index'; import { domControllerAsync, playAnimationAsync } from '../../utils/helpers'; -import { createThemedClasses } from '../../utils/theme'; +import { createThemedClasses, getClassMap } from '../../utils/theme'; import iosEnterAnimation from './animations/ios.enter'; import iosLeaveAnimation from './animations/ios.leave'; @@ -157,35 +157,26 @@ export class Toast { this.dismiss(); } - wrapperClass(): CssClassMap { - const wrapperClass: string[] = !this.position - ? ['toast-wrapper', 'toast-bottom'] - : [`toast-wrapper`, `toast-${this.position}`]; - return wrapperClass.reduce((prevValue: any, cssClass: any) => { - prevValue[cssClass] = true; - return prevValue; - }, {}); + private wrapperClass(): CssClassMap { + const position = this.position ? this.position : 'bottom'; + return { + 'toast-wrapper': true, + [`toast-${position}`]: true + }; } hostData() { const themedClasses = this.translucent ? createThemedClasses(this.mode, this.color, 'toast-translucent') : {}; - const hostClasses = { - ...themedClasses - }; - return { - class: hostClasses + class: { + ...themedClasses, + ...getClassMap(this.cssClass) + } }; } render() { - if (this.cssClass) { - this.cssClass.split(' ').forEach(cssClass => { - if (cssClass.trim() !== '') this.el.classList.add(cssClass); - }); - } - return (
diff --git a/packages/core/src/components/virtual-scroll/test/virtual-scroll-utils.spec.ts b/packages/core/src/components/virtual-scroll/test/virtual-scroll-utils.spec.ts index affbbe0397..4d0f7d6328 100644 --- a/packages/core/src/components/virtual-scroll/test/virtual-scroll-utils.spec.ts +++ b/packages/core/src/components/virtual-scroll/test/virtual-scroll-utils.spec.ts @@ -1,4 +1,4 @@ -import { CellType, HeaderFn, ItemHeightFn, VirtualNode, calcCells, calcHeightIndex, getRange, getViewport, resizeBuffer, updateVDom, ItemRenderFn, Range, getShouldUpdate, positionForIndex } from '../virtual-scroll-utils'; +import { CellType, HeaderFn, ItemHeightFn, Range, VirtualNode, calcCells, calcHeightIndex, getRange, getShouldUpdate, getViewport, positionForIndex, resizeBuffer, updateVDom } from '../virtual-scroll-utils'; describe('getViewport', () => { diff --git a/packages/core/src/utils/theme.ts b/packages/core/src/utils/theme.ts index 9b953232ad..0cf59d6d87 100644 --- a/packages/core/src/utils/theme.ts +++ b/packages/core/src/utils/theme.ts @@ -26,7 +26,7 @@ export function createThemedClasses(mode: string, color: string, classes: string /** * Get the classes from a class list and return them as an object */ -export function getElementClassObject(classList: DOMTokenList | string[]): CssClassMap { +export function getElementClassMap(classList: DOMTokenList | string[]): CssClassMap { const classObj: CssClassMap = {}; for (let i = 0; i < classList.length; i++) { @@ -35,3 +35,30 @@ export function getElementClassObject(classList: DOMTokenList | string[]): CssCl return classObj; } + +/** + * Get the classes based on the button type + * e.g. alert-button, action-sheet-button + */ +export function getButtonClassMap(buttonType: string, mode: string): CssClassMap { + if (!buttonType) { + return {}; + } + return { + [buttonType]: true, + [`${buttonType}-${mode}`]: true + }; +} + + +export function getClassMap(classes: string): CssClassMap { + const map: CssClassMap = {}; + if (classes) { + classes + .split(' ') + .filter(c => c.trim() !== '') + .forEach(c => map[c] = true); + } + return map; +} +