Add responsive utillity

Depok-Kita · Jul 27, 2022 · aec20f8 · aec20f8
1 parent 51d079c
commit aec20f8
Show file tree

Hide file tree

Showing 6 changed files with 94 additions and 38 deletions.
diff --git a/components/typography/Body.tsx b/components/typography/Body.tsx
@@ -1,6 +1,6 @@
-import { VIEWPORTS } from "@constants";
 import { WindowSize } from "@components/hooks";
 import { ReactNode } from "react";
+import { responsive } from "@utils";
 
 type BodyPreset = "p1" | "p2" | "p3" | "b1" | "b2" | "b3";
 
@@ -44,13 +44,11 @@ export const BodyResponsive = ({
   windowSize,
   ...props
 }: BodyResponsiveProps) => {
-  let presetResponsive: BodyPreset;
-  if (windowSize.width >= VIEWPORTS.DESKTOP && presetDesktop) {
-    presetResponsive = presetDesktop;
-  } else if (windowSize.width >= VIEWPORTS.TABLET && presetTablet) {
-    presetResponsive = presetTablet;
-  } else {
-    presetResponsive = preset;
-  }
+  const presetResponsive = responsive<BodyPreset>(
+    windowSize,
+    preset,
+    presetTablet,
+    presetDesktop
+  );
   return <Body preset={presetResponsive} {...props} />;
 };
diff --git a/components/typography/Header.tsx b/components/typography/Header.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from "react";
-import { useWindowSize, WindowSize } from "@components/hooks/useWindowsSize";
-import { VIEWPORTS } from "@constants";
+import { WindowSize } from "@components/hooks/";
+import { responsive } from "utils";
 
 type HeaderPreset =
   | "decorative"
@@ -65,13 +65,11 @@ export const HeaderResponsive = ({
   windowSize,
   ...props
 }: HeaderResponsiveProps) => {
-  let presetResponsive: HeaderPreset;
-  if (windowSize.width >= VIEWPORTS.DESKTOP && presetDesktop) {
-    presetResponsive = presetDesktop;
-  } else if (windowSize.width >= VIEWPORTS.TABLET && presetTablet) {
-    presetResponsive = presetTablet;
-  } else {
-    presetResponsive = preset;
-  }
+  const presetResponsive = responsive<HeaderPreset>(
+    windowSize,
+    preset,
+    presetTablet,
+    presetDesktop
+  );
   return <Header preset={presetResponsive} {...props} />;
 };
diff --git a/pages/arutala.tsx b/pages/arutala.tsx
@@ -20,8 +20,9 @@ import {
   ArrowDownIcon,
 } from "@heroicons/react/outline";
 import { InputField, SelectField, FormLabel } from "@components/input-field";
-import { Checkbox, Divider, FormControl, Stack } from "@chakra-ui/react";
+import { Checkbox, FormControl, Stack } from "@chakra-ui/react";
 import { ChevronUpIcon } from "@heroicons/react/outline";
+import { responsive } from "@utils";
 
 const Arutala: NextPage = () => {
   const errorToast = Toast({
@@ -566,9 +567,12 @@ function TypographyResponsiveSection({
         presetTablet="p2"
         presetDesktop="p1"
       >
-        Ukuran teks ini akan berganti sesuai dengan viewport. Lorem ipsum dolor
-        sit amet consectetur adipisicing elit. Doloremque iure officiis ex
-        laboriosam, eius illo? Ipsum quod obcaecati quidem maiores?
+        {responsive<string>(
+          windowSize,
+          "This is Mobile",
+          "This is Tablet",
+          "This is Desktop"
+        )}
       </BodyResponsive>
     </div>
   );

diff --git a/tsconfig.json b/tsconfig.json
@@ -1,7 +1,11 @@
 {
   "compilerOptions": {
     "target": "es5",
-    "lib": ["dom", "dom.iterable", "esnext"],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
     "allowJs": true,
     "skipLibCheck": true,
     "strict": true,
@@ -16,19 +20,50 @@
     "incremental": true,
     "baseUrl": ".",
     "paths": {
-      "@api/*": ["api/*"],
-      "@components": ["components"],
-      "@components/*": ["components/*"],
-      "@constants": ["constants"],
-      "@icons/*": ["public/assets/icons/*"],
-      "@images/*": ["public/assets/images/*"],
-      "@models": ["models"],
-      "@styles/*": ["styles/*"],
-      "@pages/*": ["pages/*"],
-      "@hooks": ["components/hooks"],
-      "@hooks/*": ["components/hooks/*"]
+      "@api/*": [
+        "api/*"
+      ],
+      "@components": [
+        "components"
+      ],
+      "@components/*": [
+        "components/*"
+      ],
+      "@constants": [
+        "constants"
+      ],
+      "@icons/*": [
+        "public/assets/icons/*"
+      ],
+      "@images/*": [
+        "public/assets/images/*"
+      ],
+      "@models": [
+        "models"
+      ],
+      "@styles/*": [
+        "styles/*"
+      ],
+      "@utils": [
+        "utils"
+      ],
+      "@pages/*": [
+        "pages/*"
+      ],
+      "@hooks": [
+        "components/hooks"
+      ],
+      "@hooks/*": [
+        "components/hooks/*"
+      ]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
-}
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}
diff --git a/utils/index.tsx b/utils/index.tsx
@@ -0,0 +1 @@
+export * from "./responsive";
diff --git a/utils/responsive.tsx b/utils/responsive.tsx
@@ -0,0 +1,20 @@
+import { WindowSize } from "@components/hooks";
+import { VIEWPORTS } from "@constants";
+
+/** Return responsive value according to viewport.*/
+export function responsive<Type>(
+  windowSize: WindowSize,
+  mobile: Type,
+  tablet?: Type,
+  desktop?: Type
+): Type {
+  let value: Type;
+  if (windowSize.width >= VIEWPORTS.DESKTOP && desktop) {
+    value = desktop;
+  } else if (windowSize.width >= VIEWPORTS.TABLET && tablet) {
+    value = tablet;
+  } else {
+    value = mobile;
+  }
+  return value;
+}