feat: Add Toggle support css-in-js

myxvisual · Aug 8, 2017 · d501b60 · d501b60
1 parent 07ffc39
commit d501b60
Show file tree

Hide file tree

Showing 5 changed files with 33 additions and 21 deletions.
diff --git a/src/Theme/getBaseCSSText.tsx b/src/Theme/getBaseCSSText.tsx
@@ -47,6 +47,7 @@ body {
 .${themeClassName} input, .${themeClassName} textarea {
   box-shadow: none;
   border-radius: none;
-}`;
+}
+`;
 
 export default getBaseCSS;
diff --git a/src/Toggle/index.tsx b/src/Toggle/index.tsx
@@ -65,6 +65,7 @@ export class Toggle extends React.Component<ToggleProps, ToggleState> {
   render() {
     const {
       style,
+      className,
       defaultToggled,
       onToggle,
       label,
@@ -73,31 +74,25 @@ export class Toggle extends React.Component<ToggleProps, ToggleState> {
     } = this.props;
     const { currToggled } = this.state;
     const { theme } = this.context;
-    const styles = getStyles(this);
+    const styles = theme.prepareStyles({
+      styles: getStyles(this),
+      className: "toggle"
+    });
 
     return (
       <div
         {...attributes}
-        style={theme.prefixStyle({
-          display: "inline-block",
-          verticalAlign: "middle",
-          cursor: "default",
-           ...style
-          })}
-        >
+        style={styles.root.style}
+        className={theme.classNames(styles.root.className, className)}
+      >
         <div
-          style={styles.root}
+          {...styles.wrapper}
           onClick={this.toggleToggle}
         >
-          <div
-            style={theme.prefixStyle({
-              ...styles.button,
-              ...styles.button
-            })}
-          />
+          <div {...styles.button} />
         </div>
         {label && (
-          <span style={styles.label}>
+          <span {...styles.label}>
             {label}
           </span>
         )}
@@ -108,15 +103,22 @@ export class Toggle extends React.Component<ToggleProps, ToggleState> {
 
 function getStyles(toggle: Toggle): {
   root?: React.CSSProperties;
+  wrapper?: React.CSSProperties;
   button?: React.CSSProperties;
   label?: React.CSSProperties;
 } {
-  const { size, background } = toggle.props;
+  const { size, background, style } = toggle.props;
   const { theme } = toggle.context;
   const { currToggled } = toggle.state;
 
   return {
     root: theme.prefixStyle({
+      display: "inline-block",
+      verticalAlign: "middle",
+      cursor: "default",
+        ...style
+    }),
+    wrapper: theme.prefixStyle({
       userSelect: "none",
       position: "relative",
       display: "inline-block",

diff --git a/src/Tooltip/index.tsx b/src/Tooltip/index.tsx
@@ -198,8 +198,8 @@ export class Tooltip extends React.Component<TooltipProps, TooltipState> {
         onMouseLeave={this.unShowTooltip}
       >
         <span
-          {...attributes}
           ref={tooltipElm => this.tooltipElm = tooltipElm}
+          {...attributes}
           {...theme.prepareStyle({
             className: "tooltip",
             style: this.getTooltipStyle(),

diff --git a/src/TreeView/index.tsx b/src/TreeView/index.tsx
@@ -310,12 +310,21 @@ export class TreeView extends React.Component<TreeViewProps, TreeViewState> {
       background,
       headerIcon,
       itemIcon,
+      className,
+      style,
       ...attributes
     } = this.props;
     const styles = getStyles(this);
 
     return (
-      <div {...attributes} style={styles.root}>
+      <div
+        {...attributes}
+        {...this.context.theme.prepareStyle({
+          style: styles.root,
+          className: "tree-view",
+          extendsClassName: className
+        })}
+      >
         {listSource ? this.renderTree() : null}
       </div>
     );

diff --git a/src/styles/getTheme.ts b/src/styles/getTheme.ts
@@ -152,7 +152,7 @@ export default function getTheme(themeConfig?: ThemeConfig): ReactUWP.ThemeType
       }
     },
     classNames(...classNames) {
-      return classNames.reduce((prev, curr) => (prev || "") + curr ? ` ${curr}` : "");
+      return classNames.reduce((prev, curr) => (prev || "") + (curr ? ` ${curr}` : ""));
     },
 
     toasts: [],