Web: Components: paging: Added theme support, moved styles to a separate file.

packages/asc-web-components/src/components/paging/index.js

@@ -1,49 +1,9 @@
 import React from "react";
-import styled from "styled-components";
 import PropTypes from "prop-types";
 
 import Button from "../button";
 import ComboBox from "../combobox";
-
-const StyledPaging = styled.div`
-  display: flex;
-  flex-direction: row;
-  justify-content: flex-start;
-
-  & > button {
-    margin-right: 8px;
-    max-width: 110px;
-  }
-
-  .buttonCustomStyle {
-    padding: 6px 8px 10px;
-  }
-`;
-
-const StyledOnPage = styled.div`
-  margin-left: auto;
-  margin-right: 0px;
-
-  .hideDisabled {
-    div[disabled] {
-      display: none;
-    }
-  }
-
-  @media (max-width: 450px) {
-    display: none;
-  }
-`;
-
-const StyledPage = styled.div`
-  margin-right: 8px;
-
-  .manualWidth {
-    .dropdown-container {
-      width: 110%;
-    }
-  }
-`;
+import { StyledPage, StyledOnPage, StyledPaging } from "./styled-paging";
 
 const Paging = (props) => {
   //console.log("Paging render");

packages/asc-web-components/src/components/paging/styled-paging.js

@@ -0,0 +1,47 @@
+import styled from "styled-components";
+import { Base } from "../../themes";
+
+const StyledPaging = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-start;
+
+  & > button {
+    margin-right: ${(props) => props.theme.paging.button.marginRight};
+    max-width: ${(props) => props.theme.paging.button.maxWidth};
+  }
+
+  .buttonCustomStyle {
+    padding: ${(props) => props.theme.paging.button.padding};
+  }
+`;
+StyledPaging.defaultProps = { theme: Base };
+
+const StyledOnPage = styled.div`
+  margin-left: ${(props) => props.theme.paging.comboBox.marginLeft};
+  margin-right: ${(props) => props.theme.paging.comboBox.marginRight};
+
+  .hideDisabled {
+    div[disabled] {
+      display: none;
+    }
+  }
+
+  @media (max-width: 450px) {
+    display: none;
+  }
+`;
+StyledOnPage.defaultProps = { theme: Base };
+
+const StyledPage = styled.div`
+  margin-right: ${(props) => props.theme.paging.page.marginRight};
+
+  .manualWidth {
+    .dropdown-container {
+      width: ${(props) => props.theme.paging.page.width};
+    }
+  }
+`;
+StyledPage.defaultProps = { theme: Base };
+
+export { StyledPage, StyledOnPage, StyledPaging };

packages/asc-web-components/src/themes/base.js

@@ -374,6 +374,24 @@ const Base = {
     },
   },
 
+  paging: {
+    button: {
+      marginRight: "8px",
+      maxWidth: "110px",
+      padding: "6px 8px 10px",
+    },
+
+    page: {
+      marginRight: "8px",
+      width: "110%",
+    },
+
+    comboBox: {
+      marginLeft: "auto",
+      marginRight: "0px",
+    },
+  },
+
   input: {
     color: "#333333",
     disableColor: "#A3A9AE",