Add rtl support

sallykeating · Mar 9, 2018 · 7056b2a · 7056b2a
1 parent 422b45f
commit 7056b2a
Show file tree

Hide file tree

Showing 10 changed files with 141 additions and 34 deletions.
diff --git a/.gitignore b/.gitignore
@@ -3,4 +3,5 @@ node_modules/
 lib/
 .sass-cache/
 npm-debug.log
-coverage/
+coverage/
+yarn-error.log
diff --git a/dist/ReactToastify.min.js b/dist/ReactToastify.min.js
diff --git a/dist/ReactToastify.min.js.map b/dist/ReactToastify.min.js.map
diff --git a/src/ProgressBar.js b/src/ProgressBar.js
@@ -10,11 +10,10 @@ const trackProgress = css.keyframes({
   '100%': { width: 0 }
 });
 
-const styles = (type, isRunning, hide, delay) =>
+const styles = (type, isRunning, hide, delay, rtl) =>
   css({
     position: 'absolute',
     bottom: 0,
-    left: 0,
     width: 0,
     height: '5px',
     zIndex: defaultStyle.zIndex,
@@ -24,16 +23,30 @@ const styles = (type, isRunning, hide, delay) =>
     animationDuration: `${delay}ms`,
     backgroundColor: 'rgba(255,255,255,.7)',
     ...(type === 'default'
-      ? { background: defaultStyle.colorProgressDefault }
-      : {})
+      ? {
+        // uumm, ok I was lazy
+          background: rtl
+            ? defaultStyle.colorProgressDefault.replace('to right', 'to left')
+            : defaultStyle.colorProgressDefault
+        }
+      : {}),
+    ...(rtl ? { right: 0 } : { left: 0 })
   });
 
-function ProgressBar({ delay, isRunning, closeToast, type, hide, className }) {
+function ProgressBar({
+  delay,
+  isRunning,
+  closeToast,
+  type,
+  hide,
+  className,
+  rtl
+}) {
   return (
     <div
       {...(typeof className !== 'string'
-        ? css(styles(type, isRunning, hide, delay), className)
-        : styles(type, isRunning, hide, delay))}
+        ? css(styles(type, isRunning, hide, delay, rtl), className)
+        : styles(type, isRunning, hide, delay, rtl))}
       {...typeof className === 'string' && { className }}
       onAnimationEnd={closeToast}
     />

diff --git a/src/Toast.js b/src/Toast.js
@@ -12,7 +12,7 @@ import {
 } from './util/propValidator';
 
 const styles = {
-  container: type =>
+  container: (type, rtl) =>
     css({
       position: 'relative',
       minHeight: '48px',
@@ -32,7 +32,8 @@ const styles = {
       ...(type === 'default' ? { color: '#aaa' } : {}),
       [`@media ${defaultStyle.mobile}`]: {
         marginBottom: 0
-      }
+      },
+      direction: rtl ? 'rtl' : 'ltr'
     }),
   body: css({
     margin: 'auto 0',
@@ -51,6 +52,7 @@ class Toast extends Component {
     closeOnClick: PropTypes.bool.isRequired,
     transition: PropTypes.func.isRequired,
     isDocumentHidden: PropTypes.bool.isRequired,
+    rtl: PropTypes.bool.isRequired,
     in: PropTypes.bool,
     onExited: PropTypes.func,
     hideProgressBar: PropTypes.bool,
@@ -141,7 +143,8 @@ class Toast extends Component {
       bodyClassName,
       progressClassName,
       updateId,
-      role
+      role,
+      rtl
     } = this.props;
 
     return (
@@ -154,8 +157,8 @@ class Toast extends Component {
       >
         <div
           {...(typeof className !== 'string'
-            ? css(styles.container(type), className)
-            : styles.container(type))}
+            ? css(styles.container(type, rtl), className)
+            : styles.container(type, rtl))}
           {...this.getToastProps()}
         >
           <div
@@ -173,6 +176,7 @@ class Toast extends Component {
           {autoClose !== false && (
             <ProgressBar
               key={`pb-${updateId}`}
+              rtl={rtl}
               delay={autoClose}
               isRunning={this.state.isRunning}
               closeToast={closeToast}

diff --git a/src/ToastContainer.js b/src/ToastContainer.js
@@ -124,12 +124,18 @@ class ToastContainer extends Component {
     /**
      * Define enter and exit transition using react-transition-group
      */
-    transition: PropTypes.func
+    transition: PropTypes.func,
+
+    /**
+     * Support rtl display
+     */
+    rtl: PropTypes.bool
   };
 
   static defaultProps = {
     position: POSITION.TOP_RIGHT,
     transition: DefaultTransition,
+    rtl: false,
     autoClose: 5000,
     hideProgressBar: false,
     closeButton: <DefaultCloseButton />,
@@ -231,6 +237,7 @@ class ToastContainer extends Component {
       type: options.type,
       closeToast: closeToast,
       updateId: options.updateId,
+      rtl: this.props.rtl,
       position: options.position || this.props.position,
       transition: options.transition || this.props.transition,
       className: options.className || this.props.toastClassName,

diff --git a/src/__tests__/Toast.js b/src/__tests__/Toast.js
@@ -19,7 +19,8 @@ const REQUIRED_PROPS = {
   position: POSITION.TOP_RIGHT,
   pauseOnHover: true,
   closeOnClick: true,
-  isDocumentHidden: false
+  isDocumentHidden: false,
+  rtl: false
 };
 
 describe('Toast', () => {
@@ -54,6 +55,20 @@ describe('Toast', () => {
     expect(toJson(component)).toMatchSnapshot();
   });
 
+  it('Should support Rtl display', () => {
+    const component = shallow(
+      <Toast
+        {...REQUIRED_PROPS}
+        autoClose={false}
+        rtl
+      >
+        FooBar
+      </Toast>
+    );
+
+    expect(toJson(component)).toMatchSnapshot();
+  });
+
   it('Should not render ProgressBar if autoClose prop is set to false', () => {
     const component = shallow(
       <Toast {...REQUIRED_PROPS} autoClose={false}>

diff --git a/src/__tests__/__snapshots__/ProgressBar.js.snap b/src/__tests__/__snapshots__/ProgressBar.js.snap
@@ -1,11 +1,10 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`ProgressBar Should allow glamor rule as className 1`] = `
-.css-11myqvn,
-[data-css-11myqvn] {
+.css-de8zyl,
+[data-css-de8zyl] {
   position: absolute;
   bottom: 0;
-  left: 0;
   width: 0;
   height: 5px;
   z-index: 9999;
@@ -15,23 +14,23 @@ exports[`ProgressBar Should allow glamor rule as className 1`] = `
   animation-duration: 5000ms;
   background-color: rgba(255,255,255,.7);
   background: red;
+  left: 0;
   -webkit-animation: animation_91emau linear 1;
   -webkit-animation-play-state: running;
   -webkit-animation-duration: 5000ms;
 }
 
 <div
-  data-css-11myqvn=""
+  data-css-de8zyl=""
   onAnimationEnd={[Function]}
 />
 `;
 
 exports[`ProgressBar Should be able to hide the progress bar 1`] = `
-.css-7lq92a,
-[data-css-7lq92a] {
+.css-1pnfg55,
+[data-css-1pnfg55] {
   position: absolute;
   bottom: 0;
-  left: 0;
   width: 0;
   height: 5px;
   z-index: 9999;
@@ -43,24 +42,24 @@ exports[`ProgressBar Should be able to hide the progress bar 1`] = `
   background: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
   background: -moz-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
   background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
+  left: 0;
   -webkit-animation: animation_91emau linear 1;
   -webkit-animation-play-state: running;
   -webkit-animation-duration: 5000ms;
 }
 
 <div
   className=""
-  data-css-7lq92a=""
+  data-css-1pnfg55=""
   onAnimationEnd={[Function]}
 />
 `;
 
 exports[`ProgressBar Should be able to pause animation 1`] = `
-.css-9z8rkz,
-[data-css-9z8rkz] {
+.css-efhk71,
+[data-css-efhk71] {
   position: absolute;
   bottom: 0;
-  left: 0;
   width: 0;
   height: 5px;
   z-index: 9999;
@@ -72,14 +71,15 @@ exports[`ProgressBar Should be able to pause animation 1`] = `
   background: -webkit-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
   background: -moz-linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
   background: linear-gradient(to right, #4cd964, #5ac8fa, #007aff, #34aadc, #5856d6, #ff2d55);
+  left: 0;
   -webkit-animation: animation_91emau linear 1;
   -webkit-animation-play-state: paused;
   -webkit-animation-duration: 5000ms;
 }
 
 <div
   className=""
-  data-css-9z8rkz=""
+  data-css-efhk71=""
   onAnimationEnd={[Function]}
 />
 `;
diff --git a/src/__tests__/__snapshots__/Toast.js.snap b/src/__tests__/__snapshots__/Toast.js.snap
@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`Toast Should allow glamor rule as className 1`] = `
-.css-zhwiot,
-[data-css-zhwiot] {
+.css-1qyflue,
+[data-css-1qyflue] {
   position: relative;
   min-height: 48px;
   margin-bottom: 1rem;
@@ -21,6 +21,7 @@ exports[`Toast Should allow glamor rule as className 1`] = `
   cursor: pointer;
   background: red;
   color: #aaa;
+  direction: ltr;
   -webkit-box-pack: justify;
   -webkit-justify-content: space-between;
 }
@@ -34,8 +35,8 @@ exports[`Toast Should allow glamor rule as className 1`] = `
 }
 
 @media only screen and (max-width : 480px) {
-  .css-zhwiot,
-  [data-css-zhwiot] {
+  .css-1qyflue,
+  [data-css-1qyflue] {
     margin-bottom: 0;
   }
 }
@@ -47,7 +48,7 @@ exports[`Toast Should allow glamor rule as className 1`] = `
   unmountOnExit={true}
 >
   <div
-    data-css-zhwiot=""
+    data-css-1qyflue=""
     onClick={[Function]}
   >
     <div
@@ -62,3 +63,68 @@ exports[`Toast Should allow glamor rule as className 1`] = `
   </div>
 </DefaultTransition>
 `;
+
+exports[`Toast Should support Rtl display 1`] = `
+.css-w74h2a,
+[data-css-w74h2a] {
+  margin: auto 0;
+  flex: 1;
+  -webkit-flex: 1;
+}
+
+.css-1nz94ll,
+[data-css-1nz94ll] {
+  position: relative;
+  min-height: 48px;
+  margin-bottom: 1rem;
+  padding: 8px;
+  border-radius: 1px;
+  box-shadow: 0 1px 10px 0 rgba(0, 0, 0, .1), 0 2px 15px 0 rgba(0, 0, 0, .05);
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -webkit-flex;
+  display: flex;
+  justify-content: space-between;
+  max-height: 800px;
+  overflow: hidden;
+  font-family: sans-serif;
+  cursor: pointer;
+  background: #fff;
+  color: #aaa;
+  direction: rtl;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+}
+
+@media only screen and (max-width : 480px) {
+  .css-1nz94ll,
+  [data-css-1nz94ll] {
+    margin-bottom: 0;
+  }
+}
+
+<DefaultTransition
+  appear={true}
+  in={true}
+  position="top-right"
+  unmountOnExit={true}
+>
+  <div
+    className=""
+    data-css-1nz94ll=""
+    onClick={[Function]}
+  >
+    <div
+      className=""
+      data-css-w74h2a=""
+      role="alert"
+    >
+      FooBar
+    </div>
+    <DefaultCloseButton
+      ariaLabel="close"
+    />
+  </div>
+</DefaultTransition>
+`;
diff --git a/src/__tests__/__snapshots__/ToastContainer.js.snap b/src/__tests__/__snapshots__/ToastContainer.js.snap
@@ -25,6 +25,7 @@ exports[`ToastContainer Should allow glamor rule as className 1`] = `
   pauseOnHover={true}
   position="top-right"
   progressClassName=""
+  rtl={false}
   style={null}
   toastClassName=""
   transition={[Function]}