Fix RotateLoader Margin prop issue (#141)

* fix issue #139 rotate loader margin

* update demo site

* update test

* update webpack to split up npm modules, rebuild demo site

* update remove:demo script

__tests__/RotateLoader-tests.tsx

@@ -29,7 +29,6 @@ describe("RotateLoader", () => {
     expect(loader).toHaveStyleRule("background-color", defaultColor);
     expect(loader).toHaveStyleRule("height", `${defaultSize}${defaultUnit}`);
     expect(loader).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-    expect(loader).toHaveStyleRule("margin", `${defaultMargin}${defaultUnit}`);
 
     for (let i: number = 0; i < 2; i++) {
       expect(loader.find("div div").at(i)).toHaveStyleRule("background-color", defaultColor);
@@ -38,10 +37,9 @@ describe("RotateLoader", () => {
         `${defaultSize}${defaultUnit}`
       );
       expect(loader.find("div div").at(i)).toHaveStyleRule("width", `${defaultSize}${defaultUnit}`);
-      expect(loader.find("div div").at(i)).toHaveStyleRule(
-        "margin",
-        `${defaultMargin}${defaultUnit}`
-      );
+      let leftDefault: number = (i % 2 ? 1 : -1) * (26 + defaultMargin);
+
+      expect(loader.find("div div").at(i)).toHaveStyleRule("left", `${leftDefault}${defaultUnit}`);
     }
   });
 
@@ -171,31 +169,32 @@ describe("RotateLoader", () => {
       let margin: number = 18;
       loader = mount(<RotateLoader margin={margin} />);
 
-      expect(loader).not.toHaveStyleRule("margin", `${defaultMargin}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("margin", `${margin}${defaultUnit}`);
-
       for (let i: number = 0; i < 2; i++) {
+        let leftDefault: number = (i % 2 ? 1 : -1) * (26 + defaultMargin);
         expect(loader.find("div div").at(i)).not.toHaveStyleRule(
-          "margin",
-          `${defaultMargin}${defaultUnit}`
+          "left",
+          `${leftDefault}${defaultUnit}`
         );
-        expect(loader.find("div div").at(i)).toHaveStyleRule("margin", `${margin}${defaultUnit}`);
+
+        let left: number = (i % 2 ? 1 : -1) * (26 + margin);
+        expect(loader.find("div div").at(i)).toHaveStyleRule("left", `${left}${defaultUnit}`);
       }
     });
 
     it("should render the margin as is when margin is a string with valid css unit", () => {
-      let margin: string = "18px";
+      let length: number = 18;
+      let unit: string = "px";
+      let margin: string = `${length}${unit}`;
       loader = mount(<RotateLoader margin={margin} />);
 
-      expect(loader).not.toHaveStyleRule("margin", `${defaultMargin}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("margin", `${margin}`);
-
       for (let i: number = 0; i < 2; i++) {
+        let leftDefault: number = (i % 2 ? 1 : -1) * (26 + defaultMargin);
         expect(loader.find("div div").at(i)).not.toHaveStyleRule(
-          "margin",
-          `${defaultMargin}${defaultUnit}`
+          "left",
+          `${leftDefault}${defaultUnit}`
         );
-        expect(loader.find("div div").at(i)).toHaveStyleRule("margin", `${margin}`);
+        let left: number = (i % 2 ? 1 : -1) * (26 + length);
+        expect(loader.find("div div").at(i)).toHaveStyleRule("left", `${left}${unit}`);
       }
     });
 
@@ -205,15 +204,14 @@ describe("RotateLoader", () => {
       let margin: string = `${length}${unit}`;
       loader = mount(<RotateLoader margin={margin} />);
 
-      expect(loader).not.toHaveStyleRule("margin", `${defaultMargin}${defaultUnit}`);
-      expect(loader).toHaveStyleRule("margin", `${length}${defaultUnit}`);
-
       for (let i: number = 0; i < 2; i++) {
+        let leftDefault: number = (i % 2 ? 1 : -1) * (26 + defaultMargin);
         expect(loader.find("div div").at(i)).not.toHaveStyleRule(
-          "margin",
-          `${defaultMargin}${defaultUnit}`
+          "left",
+          `${leftDefault}${defaultUnit}`
         );
-        expect(loader.find("div div").at(i)).toHaveStyleRule("margin", `${length}${defaultUnit}`);
+        let left: number = (i % 2 ? 1 : -1) * (26 + length);
+        expect(loader.find("div div").at(i)).toHaveStyleRule("left", `${left}${defaultUnit}`);
       }
     });
   });

__tests__/__snapshots__/RotateLoader-tests.tsx.snap

@@ -25,7 +25,6 @@ exports[`RotateLoader should match snapshot 1`] = `
   background-color: #000000;
   width: 15px;
   height: 15px;
-  margin: 2px;
   border-radius: 100%;
   display: inline-block;
   position: relative;
@@ -39,7 +38,6 @@ exports[`RotateLoader should match snapshot 1`] = `
   background-color: #000000;
   width: 15px;
   height: 15px;
-  margin: 2px;
   border-radius: 100%;
   opacity: 0.8;
   position: absolute;
@@ -51,12 +49,11 @@ exports[`RotateLoader should match snapshot 1`] = `
   background-color: #000000;
   width: 15px;
   height: 15px;
-  margin: 2px;
   border-radius: 100%;
   opacity: 0.8;
   position: absolute;
   top: 0;
-  left: 25px;
+  left: 28px;
 }
 
 <Loader

docs/index.html

@@ -37,7 +37,7 @@
     ga('send', 'pageview');
 
   </script>
-<script type="text/javascript" src="vendors~main-3b9edc600a5b0df894ac.js"></script><script type="text/javascript" src="main-3b9edc600a5b0df894ac.js"></script></head>
+<script type="text/javascript" src="javascripts/npm-lodash-45d218605c4e1ba9346f.js"></script><script type="text/javascript" src="javascripts/npm-react-color-519aa2daa6e8df6ee6d8.js"></script><script type="text/javascript" src="javascripts/npm-emotion-ffccee56bd9e060dc459.js"></script><script type="text/javascript" src="javascripts/npm-reactcss-215a4a2388c369367835.js"></script><script type="text/javascript" src="javascripts/npm-react-dom-592e36a0fc36eb37c017.js"></script><script type="text/javascript" src="javascripts/npm-tinycolor2-9b6501c167566e1417f7.js"></script><script type="text/javascript" src="javascripts/vendors~main-6c988d79c98762b02ce1.js"></script><script type="text/javascript" src="javascripts/main-8cfd22ecdb17159e6c3f.js"></script></head>
 
 <body>
   <header id='header'>