feat: Add AutoSuggestBox support css-in-js

myxvisual · Aug 8, 2017 · 44a33fb · 44a33fb
1 parent f2b9126
commit 44a33fb
Show file tree

Hide file tree

Showing 2 changed files with 30 additions and 22 deletions.
diff --git a/src/AppBarButton/index.tsx b/src/AppBarButton/index.tsx
@@ -58,8 +58,9 @@ export class AppBarButtonButton extends React.Component<AppBarButtonButtonProps>
       style: styles.root.style,
       className: theme.classNames(className, styles.root.className)
     };
-    const normalRender = (
-      <div {...rootProps}>
+
+    const getNormalRender = (props?: any) => (
+      <div {...props}>
         <Icon {...styles.icon}>
           {icon}
         </Icon>
@@ -68,11 +69,12 @@ export class AppBarButtonButton extends React.Component<AppBarButtonButtonProps>
         </p>}
       </div>
     );
+
     return theme.useInlineStyle ? (
       <PseudoClassesComponent {...rootProps}>
-        {normalRender}
+        {getNormalRender()}
       </PseudoClassesComponent>
-    ) : normalRender;
+    ) : getNormalRender(rootProps);
   }
 }
 

diff --git a/src/AutoSuggestBox/index.tsx b/src/AutoSuggestBox/index.tsx
@@ -206,20 +206,31 @@ export class AutoSuggestBox extends React.Component<AutoSuggestBoxProps, AutoSug
       listSource, // tslint:disable-line:no-unused-variable
       iconSize, // tslint:disable-line:no-unused-variable
       children, // tslint:disable-line:no-unused-variable
+      className,
       background,
       ...attributes
     } = this.props;
     const {
       typing,
       focusListSourceIndex
     } = this.state;
-    const styles = getStyles(this);
+    const { theme } = this.context;
+
+    const styles = theme.prepareStyles({
+      styles: getStyles(this),
+      className: "autosuggest-box"
+    });
+
+    const rootProps = {
+      ...attributes,
+      style: styles.root.style,
+      className: theme.classNames(className, styles.root.className)
+    };
 
     return (
       <TextBox
-        {...attributes}
+        {...rootProps}
         ref={textBox => this.textBox = textBox}
-        style={styles.root}
         onClick={this.showListSource}
         onKeyDown={this.handleInputKeyDown}
         rightNode={(
@@ -236,7 +247,7 @@ export class AutoSuggestBox extends React.Component<AutoSuggestBoxProps, AutoSug
         {listSource && listSource.length > 0 && (
           <ListView
             ref={listView => this.listView = listView}
-            style={styles.listView}
+            {...styles.listView}
             listSource={listSource.map((itemNode, index) => ({
               itemNode,
               focus: index === focusListSourceIndex
@@ -255,10 +266,7 @@ export class AutoSuggestBox extends React.Component<AutoSuggestBoxProps, AutoSug
 function getStyles(autoSuggestBox: AutoSuggestBox): {
   root?: React.CSSProperties;
   listView?: React.CSSProperties;
-  iconsStyles?: {
-    style?: React.CSSProperties;
-    hoverStyle?: React.CSSProperties;
-  }
+  iconsStyles?: React.CSSProperties;
 } {
   const { context, props: {
     style,
@@ -286,16 +294,14 @@ function getStyles(autoSuggestBox: AutoSuggestBox): {
       transition: "all .25s"
     }),
     iconsStyles: {
-      style: {
-        position: "absolute",
-        top: 0,
-        right: 0,
-        cursor: "pointer",
-        height: iconSize,
-        width: iconSize,
-        color: "#a9a9a9"
-      },
-      hoverStyle: {
+      position: "absolute",
+      top: 0,
+      right: 0,
+      cursor: "pointer",
+      height: iconSize,
+      width: iconSize,
+      color: "#a9a9a9",
+      "&:hover": {
         color: theme.accent
       }
     }