feat: Add Toast support css-in-js

myxvisual · Aug 8, 2017 · 376c7d2 · 376c7d2
1 parent d501b60
commit 376c7d2
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 31 deletions.
diff --git a/src/Toast/ToastWrapper.tsx b/src/Toast/ToastWrapper.tsx
@@ -31,36 +31,40 @@ export class ToastWrapper extends React.Component<ToastWrapperProps, ToastWrappe
   }
 
   render() {
-    const { style, ...attributes } = this.props;
+    const { style, className, ...attributes } = this.props;
     const { toasts } = this.state;
     const { theme } = this.context;
 
+    const rootStyleWithClassName = theme.prepareStyle({
+      className: "toast-wrapper",
+      style: theme.prefixStyle({
+        top: 0,
+        right: 0,
+        height: "100%",
+        width: 360,
+        padding: "10px 4px",
+        position: "fixed",
+        display: "flex",
+        flexDirection: "column-reverse",
+        alignItems: "flex-end",
+        justifyContent: "flex-start",
+        pointerEvents: "none",
+        overflowY: "auto",
+        overflowX: "hidden",
+        zIndex: theme.zIndex.toast,
+        ...style
+      }),
+      extendsClassName: className
+    });
+
     return (
       toasts && toasts.length > 0 ? (
-        <div
-          {...attributes}
-          style={theme.prefixStyle({
-            top: 0,
-            right: 0,
-            height: "100%",
-            width: 360,
-            padding: "10px 4px",
-            position: "fixed",
-            display: "flex",
-            flexDirection: "column-reverse",
-            alignItems: "flex-end",
-            justifyContent: "flex-start",
-            pointerEvents: "none",
-            overflowY: "auto",
-            overflowX: "hidden",
-            zIndex: theme.zIndex.toast,
-            ...style
-          })}
-        >
+        <div {...attributes} {...rootStyleWithClassName}>
           {[toasts]}
         </div>
       ) : null
     );
   }
 }
+
 export default ToastWrapper;
diff --git a/src/Toast/index.tsx b/src/Toast/index.tsx
@@ -150,31 +150,38 @@ export class Toast extends React.Component<ToastProps, ToastState> {
       onToggleShowToast,
       closeDelay,
       showCloseIcon,
+      className,
       ...attributes
     } = this.props;
     const { theme } = this.context;
+
     const styles = getStyles(this);
+    const styleWithClassNames = theme.prepareStyles({
+      className: "toast",
+      styles
+    });
 
     return (
       <CustomAnimate
         {...slideRightInProps}
         leaveStyle={slideRightInProps}
         appearAnimate={false}
-        wrapperStyle={styles.wrapper}
+        wrapperStyle={styles.root}
         ref={customAnimate => this.customAnimate = customAnimate}
       >
       <div
         {...attributes}
-        style={styles.root}
+        style={styleWithClassNames.wrapper.style}
+        className={theme.classNames(styleWithClassNames.wrapper.className, className)}
       >
-        <div style={styles.card}>
+        <div {...styleWithClassNames.card}>
           {logoNode}
-          <span style={styles.descContent}>
-            <p style={styles.title}>{title}</p>
+          <span {...styleWithClassNames.descContent}>
+            <p {...styleWithClassNames.title}>{title}</p>
             {typeof description === "string" ? (
-              <p style={styles.description}>{description}</p>
+              <p {...styleWithClassNames.description}>{description}</p>
             ) : (description && description.map((desc, index) => (
-              <p style={styles.description} key={`${index}`}>
+              <p {...styleWithClassNames.description} key={`${index}`}>
                 {desc}
               </p>
             )))}
@@ -201,8 +208,8 @@ export class Toast extends React.Component<ToastProps, ToastState> {
 }
 
 function getStyles(Toast: Toast): {
-  wrapper?: React.CSSProperties;
   root?: React.CSSProperties;
+  wrapper?: React.CSSProperties;
   closeIcon?: React.CSSProperties;
   card?: React.CSSProperties;
   descContent?: React.CSSProperties;
@@ -217,15 +224,15 @@ function getStyles(Toast: Toast): {
   const { prefixStyle } = theme;
 
   return {
-    wrapper: {
+    root: {
       display: "inherit",
       overflow: "hidden",
       transition: "transform .75s, opacity .75s",
       margin: "10px 0",
       opacity: showToast ? 1 : .5,
       transform: `translate3d(${showToast ? 0 : "100%"}, 0, 0)`
     },
-    root: prefixStyle({
+    wrapper: prefixStyle({
       width: 320,
       padding: 10,
       position: "relative",