fix: loading indicator position

hosseinmd · Dec 3, 2021 · 6de5d01 · 6de5d01
1 parent c981912
commit 6de5d01
Show file tree

Hide file tree

Showing 9 changed files with 84 additions and 3 deletions.
diff --git a/package.json b/package.json
@@ -18,7 +18,7 @@
     "lint-commit": "cross-env COMMIT=true eslint . --ext tsx,ts  --fix",
     "test": "yarn lerna-clean && yarn lerna-build && react-app-rewired test --silent --detectOpenHandles",
     "prettierAll": "prettier --write .",
-    "storybook": "concurrently \"start-storybook --no-manager-cache -p 6006 -s \" \"yarn workspace reactjs-view watch\" \"yarn workspace reactjs-view-core watch\" --kill-others",
+    "storybook": "concurrently \"start-storybook --no-manager-cache -p 6006 -s public \" \"yarn workspace reactjs-view watch\" \"yarn workspace reactjs-view-core watch\" --kill-others",
     "build-storybook": "yarn lerna-clean && yarn lerna-build && build-storybook -s",
     "release": "yarn lerna-clean && yarn lerna-build && yarn lint-commit && yarn compile && react-app-rewired test --silent --watchAll=false && npx lerna publish",
     "lerna-build": "lerna run compile --stream",

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#fff" />
+    <meta name="description" content="Payamgostar" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <title>Payamgostar</title>
+  </head>
+  <style>
+    /* These styles make the body full-height */
+    html,
+    body {
+      height: 100%;
+    }
+
+    /* These styles disable body scrolling if you are using <ScrollView> */
+    body {
+      overflow: hidden;
+    }
+
+    /* These styles make the root element full-height */
+    #root {
+      display: flex;
+      height: 100%;
+    }
+  </style>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -0,0 +1,25 @@
+{
+  "short_name": "Payamgostar",
+  "name": "Payamgostar",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}
diff --git a/public/robots.txt b/public/robots.txt
@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:
diff --git a/src/component/src/molecules/loadingView/loader/index.tsx b/src/component/src/molecules/loadingView/loader/index.tsx
@@ -1,3 +1,6 @@
+import classNames from "classnames";
+import { createUseStyles } from "react-jss";
+import { CommonStyles, generateIndex } from "reactjs-view-core";
 import { View } from "../../../atoms";
 
 interface LoaderProps {
@@ -70,9 +73,24 @@ export const Spin = ({ size = 0.6, color }: SpinProps) => {
 };
 
 export const Loader = ({ size = 0.6, color, className }: LoaderProps) => {
+  const classes = useStyles();
+
   return (
-    <View {...{ className }} style={{ flex: 1, height: 40 }}>
+    <View className={classNames(classes.loaderContainer, className)}>
       <Spin size={size} color={color} />
     </View>
   );
 };
+
+const useStyles = createUseStyles(
+  {
+    loaderContainer: {
+      flex: 1,
+      minHeight: 40,
+      ...CommonStyles.center,
+    },
+  },
+  {
+    index: generateIndex("molecules", "coreModule"),
+  },
+);
diff --git a/src/stories/src/base/loadingView/loadingView.stories.tsx b/src/stories/src/base/loadingView/loadingView.stories.tsx
@@ -9,7 +9,7 @@ export default {
 
 const Template: Story<LoadingViewProps> = (args) => (
   <StoryContainer>
-    <LoadingView {...args} style={{ flex: 1 }}>
+    <LoadingView {...args} style={{ flex: 1, width: 300 }}>
       <Text>
         لورم ایپسوم متن ساختگی با تولید سادگی نامفهوم از صنعت چاپ، و با استفاده
         از طراحان گرافیک است، چاپگرها و متون بلکه روزنامه و مجله در ستون و
@@ -39,4 +39,5 @@ const Template: Story<LoadingViewProps> = (args) => (
 export const Primary = Template.bind({});
 Primary.args = {
   isLoading: true,
+  isLazy: false,
 };