From 0fdece298adbd054b9eaeb7f991094bd24645573 Mon Sep 17 00:00:00 2001 From: myxvisual Date: Fri, 28 Jul 2017 11:43:48 +0800 Subject: [PATCH] feat: Add components support css-in-js --- src/AppBarButton/index.tsx | 30 +++--- src/AutoSuggestBox/index.tsx | 30 ++---- src/Button/index.tsx | 70 ++++++------- src/DatePicker/index.tsx | 187 +++++++++++++++++------------------ src/ElementState.tsx | 28 +++--- src/Icon/index.tsx | 56 +++++------ src/IconButton/index.tsx | 18 ++-- src/ListView/index.tsx | 104 +++++++++---------- src/PseudoClasses.tsx | 24 +++-- src/TimePicker/index.tsx | 80 +++++++++------ src/TreeView/index.tsx | 103 ++++++++++--------- src/styles/getTheme.ts | 5 +- 12 files changed, 371 insertions(+), 364 deletions(-) diff --git a/src/AppBarButton/index.tsx b/src/AppBarButton/index.tsx index 7137b693..0656a80b 100644 --- a/src/AppBarButton/index.tsx +++ b/src/AppBarButton/index.tsx @@ -60,22 +60,22 @@ export class AppBarButtonButton extends React.Component className: theme.classNames(className, styles.root.className) }; - const getNormalRender = (props?: any) => ( -
- - {icon} - - {labelPosition !== "collapsed" &&

- {label} -

} -
- ); - - return theme.useInlineStyle ? ( - - {getNormalRender()} + return ( + +
+ + {icon} + + {labelPosition !== "collapsed" &&

+ {label} +

} +
- ) : getNormalRender(rootProps); + ); } } diff --git a/src/AutoSuggestBox/index.tsx b/src/AutoSuggestBox/index.tsx index fa8a1e36..12d781fd 100644 --- a/src/AutoSuggestBox/index.tsx +++ b/src/AutoSuggestBox/index.tsx @@ -223,33 +223,21 @@ export class AutoSuggestBox extends React.Component ( - - {typing ? "CancelLegacy" : "Search"} - - ); - return ( this.textBox = textBox} onClick={this.showListSource} onKeyDown={this.handleInputKeyDown} - rightNode={theme.useInlineStyle ? ( - - {getIcon()} + rightNode={ + + + {typing ? "CancelLegacy" : "Search"} + - ) : getIcon(iconProps)} + } background={background} onChange={this.handleChange} > diff --git a/src/Button/index.tsx b/src/Button/index.tsx index 21f8afc2..6b5612ce 100644 --- a/src/Button/index.tsx +++ b/src/Button/index.tsx @@ -78,7 +78,7 @@ export class Button extends React.Component { } = this.props; const { theme } = this.context; - const rootAttributes = theme.prepareStyle({ + const buttonStyles = theme.prepareStyle({ className: "button-root", style: { display: "inline-block", @@ -106,7 +106,7 @@ export class Button extends React.Component { extendsClassName: className }); - const iconAttributes = theme.prepareStyle({ + const iconStyles = theme.prepareStyle({ className: "button-icon", style: { padding: "0 4px", @@ -115,46 +115,36 @@ export class Button extends React.Component { } }); - const rootProps = { - ...attributes, - disabled, - ...rootAttributes - }; - - let normalRender = ( - icon ? (iconPosition === "right" ? ( - - ) : ( - - )) : ( - - ) + const normalRender = ( + + {( + icon ? (iconPosition === "right" ? ( + + ) : ( + + )) : ( + + ) + )} + ); - if (theme.useInlineStyle) { - normalRender = ( - - {normalRender} - - ); - } - return tooltip ? ( {normalRender} diff --git a/src/DatePicker/index.tsx b/src/DatePicker/index.tsx index 91b99f54..333573ef 100644 --- a/src/DatePicker/index.tsx +++ b/src/DatePicker/index.tsx @@ -65,7 +65,7 @@ export class DatePicker extends React.Component { this.setState({ showPicker: false @@ -181,103 +181,95 @@ export class DatePicker extends React.Component { - if (!theme.useInlineStyle) { - this.pseudoClasses = { rootElm } as any; - } - }} - > -
-
- this.monthListView = monthListView} - style={inlineStyles.listView} - listItemStyle={styles.listItem} - defaultFocusListIndex={currMonth} - listSource={monthArray} - onChooseItem={month => { - this.setDate(void 0, month, void 0); - }} - /> - this.dateListView = dateListView} - style={inlineStyles.listView} - listItemStyle={styles.listItem} - defaultFocusListIndex={this.dateIndex} - listSource={dateArray} - onChooseItem={dayIndex => { - this.setDate(dayIndex + 1, void 0, void 0); - }} - /> - this.yearListView = yearListView} - style={inlineStyles.listView} - listItemStyle={styles.listItem} - defaultFocusListIndex={this.yearIndex} - listSource={yearArray} - onChooseItem={yearIndex => { - this.setDate(void 0, void 0, minYear + yearIndex); - }} - /> -
-
- { - onChangeDate(currDate); - this.setState({ showPicker: false }); - }} - > - AcceptLegacy - - { - this.setState({ currDate: this.prevDate, showPicker: false }); - }} - > - ClearLegacy - -
-
- - {monthList[currMonth]} - - {separator} - - {currDateNumb} - - {separator} - - {currYear} - - - ); - return theme.useInlineStyle ? ( + return ( this.pseudoClasses = pseudoClasses} + {...styles.root} > - {normalRender} +
this.rootElm = rootElm} + > +
+
+ this.monthListView = monthListView} + style={inlineStyles.listView} + listItemStyle={inlineStyles.listItem} + defaultFocusListIndex={currMonth} + listSource={monthArray} + onChooseItem={month => { + this.setDate(void 0, month, void 0); + }} + /> + this.dateListView = dateListView} + style={inlineStyles.listView} + listItemStyle={inlineStyles.listItem} + defaultFocusListIndex={this.dateIndex} + listSource={dateArray} + onChooseItem={dayIndex => { + this.setDate(dayIndex + 1, void 0, void 0); + }} + /> + this.yearListView = yearListView} + style={inlineStyles.listView} + listItemStyle={inlineStyles.listItem} + defaultFocusListIndex={this.yearIndex} + listSource={yearArray} + onChooseItem={yearIndex => { + this.setDate(void 0, void 0, minYear + yearIndex); + }} + /> +
+
+ { + onChangeDate(currDate); + this.setState({ showPicker: false }); + }} + > + AcceptLegacy + + { + this.setState({ currDate: this.prevDate, showPicker: false }); + }} + > + ClearLegacy + +
+
+ + {monthList[currMonth]} + + {separator} + + {currDateNumb} + + {separator} + + {currYear} + +
- ) : normalRender; + ); } } @@ -288,6 +280,7 @@ function getStyles(datePicker: DatePicker): { listViews?: React.CSSProperties; listView?: React.CSSProperties; listItem?: React.CSSProperties; + iconButtonGroup?: React.CSSProperties; iconButton?: React.CSSProperties; } { const { @@ -376,6 +369,10 @@ function getStyles(datePicker: DatePicker): { lineHeight: `${inputItemHeight - 4}px`, padding: `0 ${inputItemHeight - 4}px` }, + iconButtonGroup: { + boxShadow: `inset 0 0 0 1px ${theme.baseLow}`, + zIndex: theme.zIndex.flyout + 1 + }, iconButton: { verticalAlign: "top", width: "50%", diff --git a/src/ElementState.tsx b/src/ElementState.tsx index 0dc9f781..c95e8bf9 100644 --- a/src/ElementState.tsx +++ b/src/ElementState.tsx @@ -138,15 +138,15 @@ export default class ElementState extends React.Component onMouseDown, onMouseUp, onClick, - onHover, // tslint:disable-line:no-unused-variable + onHover, onFocus, - onActive, // tslint:disable-line:no-unused-variable - onVisited, // tslint:disable-line:no-unused-variable - unHover, // tslint:disable-line:no-unused-variable - unFocus, // tslint:disable-line:no-unused-variable - unActive, // tslint:disable-line:no-unused-variable - unVisited, // tslint:disable-line:no-unused-variable - visited, // tslint:disable-line:no-unused-variable + onActive, + onVisited, + unHover, + unFocus, + unActive, + unVisited, + visited, children, disabled, ...attributes @@ -159,12 +159,12 @@ export default class ElementState extends React.Component ...style, ...(disabled ? disabledStyle : void 0) }), - onMouseEnter: hoverStyle ? this.hover : onMouseEnter, - onMouseLeave: hoverStyle ? this.unHover : onMouseLeave, - onMouseDown: activeStyle ? this.active : onMouseDown, - onMouseUp: activeStyle ? this.unActive : onMouseUp, - onClick: visitedStyle ? this.visited : onClick, - onFocus: focusStyle ? this.focus : onFocus + onMouseEnter: (hoverStyle && !disabled) ? this.hover : onMouseEnter, + onMouseLeave: (hoverStyle && !disabled) ? this.unHover : onMouseLeave, + onMouseDown: (activeStyle && !disabled) ? this.active : onMouseDown, + onMouseUp: (activeStyle && !disabled) ? this.unActive : onMouseUp, + onClick: (visitedStyle && !disabled) ? this.visited : onClick, + onFocus: (focusStyle && !disabled) ? this.focus : onFocus }); } } diff --git a/src/Icon/index.tsx b/src/Icon/index.tsx index 2a74aaea..ef2dca04 100644 --- a/src/Icon/index.tsx +++ b/src/Icon/index.tsx @@ -73,40 +73,40 @@ export class Icon extends React.Component { const { theme } = this.context; const { hovered } = this.state; + const inlineStyle = theme.prefixStyle({ + display: "inline-block", + textAlign: "center", + verticalAlign: "middle", + fontFamily: theme.fonts.segoeMDL2Assets, + transition: "all .25s", + border: "none", + outline: "none", + userSelect: "none", + width: size, + height: size, + lineHeight: size ? `${size}px` : "inherit", + fontSize: size || "inherit", + color: "inherit", + ...style, + "&:hover": hovered ? hoverStyle : void 0 + }); + const styleWithClasses = theme.prepareStyle({ className: "icon", - style: theme.prefixStyle({ - display: "inline-block", - textAlign: "center", - verticalAlign: "middle", - fontFamily: theme.fonts.segoeMDL2Assets, - transition: "all .25s", - border: "none", - outline: "none", - userSelect: "none", - width: size, - height: size, - lineHeight: size ? `${size}px` : "inherit", - fontSize: size || "inherit", - color: "inherit", - ...style, - "&:hover": hovered ? hoverStyle : void 0 - }), + style: inlineStyle, extendsClassName: className }); - const props = { - ...attributes, - onMouseEnter: this.handleMouseEnter, - onMouseLeave: this.handleMouseLeave, - ...styleWithClasses - }; - const getIcon = (props?: any) => React.createElement(useSVGElement ? "text" as "span" : "span", props, icons[children as any] || children); - return theme.useInlineStyle ? ( - - {getIcon()} + return ( + + {React.createElement(useSVGElement ? "text" as "span" : "span", {}, icons[children as any] || children)} - ) : getIcon(props); + ); } } diff --git a/src/IconButton/index.tsx b/src/IconButton/index.tsx index 5317cdf2..c16dd88f 100644 --- a/src/IconButton/index.tsx +++ b/src/IconButton/index.tsx @@ -1,7 +1,7 @@ import * as React from "react"; import * as PropTypes from "prop-types"; -import ElementState from "../ElementState"; +import PseudoClasses from "../PseudoClasses"; import Icon from "../Icon"; export interface DataProps { @@ -45,7 +45,7 @@ export class IconButton extends React.Component { const { theme } = this.context; return ( - { flexShrink: 0, lineHeight: `${size}px`, transition: "background .25s ease-in-out", + "&:hover": disabled ? void 0 : hoverStyle || { + background: theme.listLow + }, + "&:active": disabled ? void 0 : activeStyle || { + background: theme.baseLow + }, ...style }} - hoverStyle={disabled ? void 0 : hoverStyle || { - background: theme.listLow - }} - activeStyle={disabled ? void 0 : activeStyle || { - background: theme.baseLow - }} > {children} - + ); } } diff --git a/src/ListView/index.tsx b/src/ListView/index.tsx index c7fefdc1..28bfbb0a 100644 --- a/src/ListView/index.tsx +++ b/src/ListView/index.tsx @@ -1,11 +1,9 @@ import * as React from "react"; import * as PropTypes from "prop-types"; +import PseudoClasses from "../PseudoClasses"; import vendors from "../common/browser/vendors"; -vendors.pop(); -vendors.map(vendor => vendor[0].toUpperCase() + vendor.slice(1)); - export interface ListItem { itemNode?: React.ReactNode; disabled?: boolean; @@ -13,6 +11,7 @@ export interface ListItem { style?: React.CSSProperties; onClick?: (e?: React.MouseEvent) => void; } + export interface DataProps { /** * ListSource Data. @@ -55,6 +54,10 @@ export class ListView extends React.Component { static contextTypes = { theme: PropTypes.object }; context: { theme: ReactUWP.ThemeType }; rootElm: HTMLDivElement; + inlineStyles: { + [key: string]: React.CSSProperties; + } = null; + componentWillReceiveProps(nextProps: ListViewProps) { if (nextProps.defaultFocusListIndex !== this.state.focusIndex) { this.setState({ focusIndex: nextProps.defaultFocusListIndex }); @@ -62,7 +65,7 @@ export class ListView extends React.Component { } getItemNode = (itemNode: any, index: number, disabled?: boolean, focus?: boolean, style?: React.CSSProperties, onClick?: () => void) => { - const styles = getStyles(this); + const { inlineStyles } = this; const { theme } = this.context; const { onChooseItem, background } = this.props; const { focusIndex } = this.state; @@ -71,66 +74,62 @@ export class ListView extends React.Component { const defaultBG = isFocus ? theme.listAccentLow : "none"; const focusBG = isFocus ? theme.listAccentHigh : (theme.useFluentDesign ? theme.acrylicTexture40.background : theme.listLow); const clickBG = isFocus ? theme.accent : theme.chromeHigh; + + const itemStyles = theme.prepareStyle({ + className: "list-view-item", + style: theme.prefixStyle({ + background: defaultBG, + color: disabled ? theme.baseLow : theme.baseHigh, + "&:hover": { + background: focusBG + }, + "&:active": { + transform: "scale(0.99)" + }, + ...inlineStyles.item, + ...style + }) + }); + return ( -
{ - e.currentTarget.style.background = focusBG; - }} - onMouseLeave={disabled ? void(0) : (e) => { - e.currentTarget.style.background = defaultBG; - }} - onMouseDown={disabled ? void(0) : (e) => { - this.setState({ focusIndex: index }); - for (const vendor of vendors) { - e.currentTarget.style[`${vendor}Transform` as any] = "scale(0.99)"; - } - onChooseItem(index); - e.currentTarget.style.transform = "scale(0.99)"; - e.currentTarget.style.background = clickBG; - }} - onMouseUp={disabled ? void(0) : (e) => { - for (const vendor of vendors) { - e.currentTarget.style[`${vendor}Transform` as any] = "scale(1)"; - } - e.currentTarget.style.transform = "scale(1)"; - e.currentTarget.style.background = defaultBG; - }} - > - {itemNode} -
+ +
{ + onChooseItem(index); + }} + > + {itemNode} +
+ ); } render() { const { - listSource, // tslint:disable-line:no-unused-variable - listItemStyle, // tslint:disable-line:no-unused-variable + listSource, + listItemStyle, onChooseItem, background, defaultFocusListIndex, ...attributes } = this.props; const { theme } = this.context; - const styles = getStyles(this); + const inlineStyles = getStyles(this); + const styles = theme.prepareStyles({ + className: "list-view", + styles: inlineStyles + }); + this.inlineStyles = inlineStyles; - let listSourceAny: any = listSource; + const listSourceAny: any = listSource; return (
this.rootElm = rootElm} {...attributes} - style={{ - ...styles.root, - ...theme.prefixStyle(attributes.style) - }} + {...styles.root} > {listSourceAny && listSourceAny.map((listItem: any, index: number) => { if (React.isValidElement(listItem)) { @@ -155,12 +154,12 @@ function getStyles(listView: ListView): { root?: React.CSSProperties; item?: React.CSSProperties; } { - const { context, props: { listItemStyle, background } } = listView; + const { context, props: { listItemStyle, background, style } } = listView; const { theme } = context; const { prefixStyle } = theme; return { - root: { + root: theme.prefixStyle({ width: 320, display: "inline-block", verticalAlign: "middle", @@ -169,15 +168,16 @@ function getStyles(listView: ListView): { color: theme.baseMediumHigh, border: `1px solid ${theme.useFluentDesign ? theme.listLow : theme.altHigh}`, background: background || (theme.useFluentDesign ? theme.acrylicTexture60.background : theme.chromeLow), - transition: "all .25s" - }, - item: { + transition: "all .25s", + ...style + }), + item: theme.prefixStyle({ cursor: "default", padding: 8, width: "100%", transition: "all 0.25s", ...listItemStyle - } + }) }; } diff --git a/src/PseudoClasses.tsx b/src/PseudoClasses.tsx index 309b5302..27b9aad0 100644 --- a/src/PseudoClasses.tsx +++ b/src/PseudoClasses.tsx @@ -1,4 +1,5 @@ import * as React from "react"; +import { findDOMNode } from "react-dom"; import * as PropTypes from "prop-types"; import ElementState, { ElementStateProps } from "./ElementState"; @@ -10,17 +11,24 @@ export class PseudoClasses extends React.Component { static contextTypes = { theme: PropTypes.object }; context: { theme: ReactUWP.ThemeType }; - rootElm: HTMLElement; + rootElm: HTMLElement = null; + + componentDidMount() { + const { context: { theme }, props: { style, children } } = this; + if (theme.useInlineStyle || style) { + this.rootElm = findDOMNode(this); + } + } render () { const { style, children, ...attributes } = this.props; - if (style) { + if (this.context.theme.useInlineStyle && style) { const { primaryObject, secondaryObject } = spreadObject(style, pseudoClassesNames); return ( this.rootElm = elementState.rootElm} + ref={elementState => this.rootElm = elementState ? elementState.rootElm : null} style={primaryObject} {...{ hoverStyle: secondaryObject["&:hover"], @@ -34,11 +42,11 @@ export class PseudoClasses extends React.Component { ); } else { - return ( - - {children} - - ); + return React.cloneElement(children, { + ...children.props, + ...attributes, + style + }); } } } diff --git a/src/TimePicker/index.tsx b/src/TimePicker/index.tsx index eade1b3c..25e9c39c 100644 --- a/src/TimePicker/index.tsx +++ b/src/TimePicker/index.tsx @@ -5,7 +5,7 @@ import { codes } from "keycode"; import AddBlurEvent from "../common/AddBlurEvent"; import Separator from "../Separator"; import IconButton from "../IconButton"; -import ElementState from "../ElementState"; +import PseudoClasses from "../PseudoClasses"; import ListView from "../ListView"; import scrollToYEasing from "../common/browser/scrollToYEasing"; @@ -66,7 +66,7 @@ export class TimePicker extends React.Component { this.addBlurEvent.setConfig({ addListener: this.state.showPicker, - clickExcludeElm: this.elementState.rootElm, + clickExcludeElm: this.rootElm, blurCallback: () => { this.setState({ showPicker: false @@ -140,13 +140,14 @@ export class TimePicker extends React.Component; const currTimeType = currHour < 13 ? "AM" : "PM"; @@ -168,29 +173,32 @@ export class TimePicker extends React.Component this.elementState = elementState} + {...styles.root} > -
-
-
+
this.rootElm = rootElm} + > +
+
this.hourListView = hourListView} - style={styles.listView} - listItemStyle={styles.listItem} + style={inlineStyles.listView} + listItemStyle={inlineStyles.listItem} defaultFocusListIndex={this.hourIndex} listSource={hourArray} onChooseItem={hourIndex => { - this.setState({ currHour: currHour > 12 ? 13 + hourIndex : hourIndex + 1}); + this.setState({ currHour: currHour > 12 ? 13 + hourIndex : hourIndex + 1 }); }} /> this.minuteListView = minuteListView} - style={styles.listView} - listItemStyle={styles.listItem} + style={inlineStyles.listView} + listItemStyle={inlineStyles.listItem} defaultFocusListIndex={this.minuteIndex} listSource={minuteArray} onChooseItem={minuteIndex => { @@ -199,8 +207,8 @@ export class TimePicker extends React.Component this.timeTypeListView = timeTypeListView} - style={styles.listView} - listItemStyle={styles.listItem} + style={inlineStyles.listView} + listItemStyle={inlineStyles.listItem} defaultFocusListIndex={this.timeTypeIndex} listSource={timeTypeArray} onChooseItem={timeTypeIndex => { @@ -213,9 +221,9 @@ export class TimePicker extends React.Component
-
+
{ this.setState({ showPicker: false }); @@ -225,7 +233,7 @@ export class TimePicker extends React.Component { const { currHour, currMinute } = this.prevState; @@ -238,27 +246,27 @@ export class TimePicker extends React.Component
{currHour > 12 ? currHour - 12 : currHour} {separator} {currMinute} {separator} {currTimeType}
- + ); } } @@ -270,6 +278,7 @@ function getStyles(TimePicker: TimePicker): { listViews?: React.CSSProperties; listView?: React.CSSProperties; listItem?: React.CSSProperties; + iconButtonGroup?: React.CSSProperties; iconButton?: React.CSSProperties; } { const { @@ -301,6 +310,9 @@ function getStyles(TimePicker: TimePicker): { lineHeight: `${inputItemHeight}px`, position: "relative", transition: "all .25s ease-in-out", + "&:hover": { + boxShadow: `inset 0 0 0 2px ${theme.baseMediumHigh}` + }, ...style }), pickerModal: prefixStyle({ @@ -355,6 +367,10 @@ function getStyles(TimePicker: TimePicker): { lineHeight: `${inputItemHeight - 4}px`, padding: `0 ${inputItemHeight - 4}px` }, + iconButtonGroup: { + boxShadow: `inset 0 0 0 1px ${theme.baseLow}`, + zIndex: theme.zIndex.flyout + 1 + }, iconButton: { verticalAlign: "top", width: "50%", diff --git a/src/TreeView/index.tsx b/src/TreeView/index.tsx index 798ff701..e52f5f5f 100644 --- a/src/TreeView/index.tsx +++ b/src/TreeView/index.tsx @@ -183,55 +183,56 @@ export class TreeView extends React.Component { const isRight = iconDirection === "right"; const isVisited = (visited && !haveChild) || (visited && init); + const inlineStyles = hidden ? null : { + root: { + paddingLeft: isChild ? (isRight ? itemHeight / 2.8 : itemPadding || itemHeight * 2 / 3) : void 0 + } as React.CSSProperties, + title: { + color: disabled ? theme.baseLow : void 0, + ...styles.title + }, + titleNode: { + cursor: disabled ? "not-allowed" : "pointer", + pointerEvents: disabled ? "none" : void 0, + paddingLeft: isRight ? 0 : (haveChild ? iconPadding : itemHeight / 8), + fontSize: itemHeight / 2.25, + height: "100%", + lineHeight: `${itemHeight}px`, + ...styles.titleNode, + ...style + }, + icon: { + cursor: disabled ? "not-allowed" : "pointer", + color: disabled ? theme.baseLow : void 0, + fontSize: itemHeight / 2, + lineHeight: `${itemHeight / 2}px`, + width: itemHeight / 2, + height: itemHeight / 2, + flex: "0 0 auto", + zIndex: 1, + transform: `rotateZ(${expanded ? "-180deg" : (isRight ? "0deg" : "-90deg")})` + }, + behindBG: { + cursor: disabled ? "not-allowed" : "pointer", + transition: "all 0.25s", + zIndex: 0, + background: (focus && showFocus) ? theme.accent : ( + isVisited ? theme.listAccentLow : "none" + ), + ...styles.behindBG + }, + child: haveChild ? theme.prefixStyle({ + height: "auto", + overflow: expanded ? void 0 : "hidden", + opacity: expanded ? 1 : 0, + transform: `translateY(${expanded ? 0 : -10 }px)`, + transformOrigin: "top", + transition: "all .25s" + }) : void 0 + }; const listStyles = hidden ? null : theme.prepareStyles({ className: "tree-view", - styles: { - root: { - paddingLeft: isChild ? (isRight ? itemHeight / 2.8 : itemPadding || itemHeight * 2 / 3) : void 0 - } as React.CSSProperties, - title: { - color: disabled ? theme.baseLow : void 0, - ...styles.title - }, - titleNode: { - cursor: disabled ? "not-allowed" : "pointer", - pointerEvents: disabled ? "none" : void 0, - paddingLeft: isRight ? 0 : (haveChild ? iconPadding : itemHeight / 8), - fontSize: itemHeight / 2.25, - height: "100%", - lineHeight: `${itemHeight}px`, - ...styles.titleNode, - ...style - }, - icon: { - cursor: disabled ? "not-allowed" : "pointer", - color: disabled ? theme.baseLow : void 0, - fontSize: itemHeight / 2, - lineHeight: `${itemHeight / 2}px`, - width: itemHeight / 2, - height: itemHeight / 2, - flex: "0 0 auto", - zIndex: 1, - transform: `rotateZ(${expanded ? "-180deg" : (isRight ? "0deg" : "-90deg")})` - }, - behindBG: { - cursor: disabled ? "not-allowed" : "pointer", - transition: "all 0.25s", - zIndex: 0, - background: (focus && showFocus) ? theme.accent : ( - isVisited ? theme.listAccentLow : "none" - ), - ...styles.behindBG - }, - child: haveChild ? theme.prefixStyle({ - height: "auto", - overflow: expanded ? void 0 : "hidden", - opacity: expanded ? 1 : 0, - transform: `translateY(${expanded ? 0 : -10 }px)`, - transformOrigin: "top", - transition: "all .25s" - }) : void 0 - } + styles: inlineStyles }); return hidden ? null : ( @@ -282,7 +283,13 @@ export class TreeView extends React.Component { this.setChooseItem(item); if (onClick) onClick(e as any); }} - {...listStyles.behindBG} + className={listStyles.behindBG.className} + style={{ + ...listStyles.behindBG.style, + background: (focus && showFocus) ? theme.accent : ( + isVisited ? theme.listAccentLow : "none" + ) + }} ref={elm => behindElm = elm} />
diff --git a/src/styles/getTheme.ts b/src/styles/getTheme.ts index ee239e51..a933b6ee 100644 --- a/src/styles/getTheme.ts +++ b/src/styles/getTheme.ts @@ -142,10 +142,11 @@ export default function getTheme(themeConfig?: ThemeConfig): ReactUWP.ThemeType prepareStyles(config, callback) { if (this.useInlineStyle) { const { styles } = config; + const result: any = {}; for (let key in styles) { - styles[key] = { style: styles[key] }; + result[key] = { style: styles[key] }; } - return config.styles; + return result; } else { const styleWithClasses = this.styleManager.setStylesToManager(config, callback); return styleWithClasses;