added SplashScreen component

virtualvivek · virtualvivek · commit d81e9391a751 · 2021-11-19T17:32:58.000+05:30
diff --git a/src/demo/App.js b/src/demo/App.js
@@ -1,6 +1,6 @@
 import React from 'react'
 import { HashRouter as Router, Switch, Route } from 'react-router-dom'
-import { NavBar, NavBarLink,NavBarSubMenu, NavSearchBox,
+import { AppTheme, SplashScreen, NavBar, NavBarLink,NavBarSubMenu, NavSearchBox,
          TransitionToLeft } from '../lib/src'
 
 import Home from './pages/Home'
@@ -10,9 +10,9 @@ import Texts from './pages/Texts'
 import Tables from './pages/Tables'
 import Icons from './pages/Icons'
 
-import NavBarDocs from './docs/NavBar_docs'
-import NavBarSubMenuDocs from './docs/NavBarSubMenu_docs'
-import NavPageContainerDocs from './docs/NavPageContainer_docs'
+import NavBarDocs from './docs/Navigation_docs/NavBar_docs'
+import NavBarSubMenuDocs from './docs/Navigation_docs/NavBarSubMenu_docs'
+import NavPageContainerDocs from './docs/Navigation_docs/NavPageContainer_docs'
 
 import AccordionDocs from './docs/Accordion_docs'
 import AlertDocs from './docs/Alert_docs'
@@ -60,6 +60,7 @@ class App extends React.Component {
   constructor() {
     super();
     this.state = {
+      showSplash: true,
       data: NavBarItem,
       filteredData: NavBarItem
     }
@@ -83,14 +84,21 @@ class App extends React.Component {
   return (
     <>
     <Router basename={'/'}> {/* basename={process.env.PUBLIC_URL} */}
+
+      <SplashScreen
+        isVisible={this.state.showSplash}
+        title={"react-windows-ui"}
+      />
+
+      <AppTheme
+        scheme="system"
+        onMount={()=> this.setState({ showSplash: false})}
+      />
       
       <TransitionToLeft />
 
       <NavBar
-        showThemeSwitch={false}
         title="React Windows UI"
-        titleShort={<i className="icons10-windows"></i>}
-      //titleShort="R" render text or icons
        //mobileHasIcons={true}
         shadowOnScroll={true}>
 
@@ -102,7 +110,7 @@ class App extends React.Component {
         /> */}
 
       <NavSearchBox
-        placeholder="Search Docs pre v4.x"
+        placeholder="Search Docs pre v4.x.x"
         onChange={this.handleInputSearch}/>
       <NavBarLink
         exact={true}
diff --git a/src/demo/docs/LoadersDocs/index.js b/src/demo/docs/LoadersDocs/index.js
@@ -148,7 +148,7 @@ render() {
     </SyntaxHighlighter>
 
     <div className="app-hr"></div>
-    <h2>LoaderBusy <p className="app-code">Fullscreen Custom Background Color</p> :</h2>
+    <h2>LoaderBusy <p className="app-code">Fullscreen</p>&nbsp;<p className="app-code">Custom Background Color</p> :</h2>
 
     <LoaderBusy
       isLoading={this.state.showLoaderBusyFullCustom}
diff --git a/src/demo/docs/Navigation_docs/NavBarSubMenu_docs/codes.js b/src/demo/docs/Navigation_docs/NavBarSubMenu_docs/codes.js
diff --git a/src/demo/docs/Navigation_docs/NavBarSubMenu_docs/index.js b/src/demo/docs/Navigation_docs/NavBarSubMenu_docs/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { NavPageContainer,NavBarSubMenu } from '../../../lib/src'
+import { NavPageContainer,NavBarSubMenu } from '../../../../lib/src'
 import { Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import { NavBarSubMenuImportCode,NavBarSubMenuUsageCode } from './codes'
diff --git a/src/demo/docs/Navigation_docs/NavBarSubMenu_docs/props-view.js b/src/demo/docs/Navigation_docs/NavBarSubMenu_docs/props-view.js
diff --git a/src/demo/docs/Navigation_docs/NavBar_docs/codes.js b/src/demo/docs/Navigation_docs/NavBar_docs/codes.js
@@ -7,7 +7,7 @@ const NavBarLinkImportCode =
 const NavBarUsageCode =
 `<NavBar 
   title="NavBar"
-  titleShort={<i className="icons10-windows"></i>}
+//mobileHasIcons={true}
   shadowOnScroll={true}>
   .....
   <NavBarLink
@@ -49,10 +49,10 @@ const NavBarLinkBadgeUsageCode =
 
 
 export {
-    NavBarImportCode,
-    NavBarUsageCode,
-    NavBarLinkUsageCode,
-    NavBarLinkImportCode,
-    NavBarLinkImgUsageCode,
-    NavBarLinkBadgeUsageCode
+  NavBarImportCode,
+  NavBarUsageCode,
+  NavBarLinkUsageCode,
+  NavBarLinkImportCode,
+  NavBarLinkImgUsageCode,
+  NavBarLinkBadgeUsageCode
 }
diff --git a/src/demo/docs/Navigation_docs/NavBar_docs/css/navbar-custom.css b/src/demo/docs/Navigation_docs/NavBar_docs/css/navbar-custom.css
@@ -1,6 +1,6 @@
 @media only screen and (max-width: 760px) {
   .app-nav-wrap nav.animate.custom {
-    height: 90px;
+    height: 70px;
     z-index: 1;
   }
   .app-nav-wrap nav.animate.custom .app-switch {
diff --git a/src/demo/docs/Navigation_docs/NavBar_docs/index.js b/src/demo/docs/Navigation_docs/NavBar_docs/index.js
@@ -1,13 +1,13 @@
 import React from 'react'
-import { NavPageContainer, LinkCompound } from '../../../lib/src'
+import { NavPageContainer, LinkCompound } from '../../../../lib/src'
 import { Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import { NavBarImportCode,NavBarUsageCode,NavBarLinkImportCode,
   NavBarLinkUsageCode,NavBarLinkImgUsageCode,NavBarLinkBadgeUsageCode } from './codes'
 import PropsView from './props-view'
 import PropsViewNavItem from './props-view-navitem'
-import Img1 from '../../assets/illustration/macos.jpg'
-import Img2 from '../../assets/illustration/2.jpg'
+import Img1 from '../../../assets/illustration/macos.jpg'
+import Img2 from '../../../assets/illustration/2.jpg'
 import './css/navbar-custom.css'
 
 class NavBarDocs extends React.Component {
@@ -23,18 +23,9 @@ render() {
 
     <div className="app-nav-wrap">
     <nav className="animate custom" style={{position:'relative'}}>
-      <div style={{position:'absolute'}}>
-        <span className="app-name">NavBar</span>
-        <span className="app-name-short">
-          <i className="icons10-windows"></i>
-        </span>
-      </div>
-      <div style={{position:'absolute'}}>
-        <a className="app-nav-toggle" href="#/navbar"><span style={{display:'none'}}></span></a>
-        <label className="app-switch">
-          <input type="checkbox" id="app-day-night-switch"/>
-          <div dataoff="Day" dataon="Night"></div>
-        </label>
+      <div class="app-nav-header" style={{position:'absolute'}}>
+        <span class="app-nav-toggle"></span>
+        <span class="app-name">React Windows UI</span>
       </div>
       <ul style={{padding:0}}>
         <li>
diff --git a/src/demo/docs/Navigation_docs/NavBar_docs/props-view-navitem.js b/src/demo/docs/Navigation_docs/NavBar_docs/props-view-navitem.js
diff --git a/src/demo/docs/Navigation_docs/NavBar_docs/props-view.js b/src/demo/docs/Navigation_docs/NavBar_docs/props-view.js
@@ -19,12 +19,6 @@ const PropsView = () => {
           <td>null</td>
           <td>Set's NavBar title</td>
         </tr>
-        <tr>
-          <td><p className="app-code">titleShort</p></td>
-          <td>ReactNode | SVG | FontIcon</td>
-          <td>null</td>
-          <td>Set's NavBar title on collapsed</td>
-        </tr>
         <tr>
           <td><p className="app-code">shadowOnScroll</p></td>
           <td>boolean</td>
@@ -37,12 +31,6 @@ const PropsView = () => {
           <td>false</td>
           <td>Set's NavBar show icons instead of text on small device</td>
         </tr>
-        <tr>
-          <td><p className="app-code">showThemeSwitch</p></td>
-          <td>boolean</td>
-          <td>true</td>
-          <td>Toggle NavBar's Theme Switch visiblity</td>
-        </tr>
         <tr>
           <td><p className="app-code">children</p></td>
           <td>ReactNode</td>
diff --git a/src/demo/docs/Navigation_docs/NavPageContainer_docs/codes.js b/src/demo/docs/Navigation_docs/NavPageContainer_docs/codes.js
diff --git a/src/demo/docs/Navigation_docs/NavPageContainer_docs/css/navpagecontainer-view.css b/src/demo/docs/Navigation_docs/NavPageContainer_docs/css/navpagecontainer-view.css
diff --git a/src/demo/docs/Navigation_docs/NavPageContainer_docs/index.js b/src/demo/docs/Navigation_docs/NavPageContainer_docs/index.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import { NavPageContainer } from '../../../lib/src'
+import { NavPageContainer } from '../../../../lib/src'
 import { Prism as SyntaxHighlighter} from 'react-syntax-highlighter'
 import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism'
 import { NavPageContainerImportCode,NavPageContainerUsageCode } from './codes'
diff --git a/src/demo/docs/Navigation_docs/NavPageContainer_docs/props-view.js b/src/demo/docs/Navigation_docs/NavPageContainer_docs/props-view.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import {Link} from '../../../lib/src'
+import {Link} from '../../../../lib/src'
 
 const PropsView = () => {
   return (
@@ -18,13 +18,20 @@ const PropsView = () => {
           <td><p className="app-code">hasPadding</p></td>
           <td>boolean</td>
           <td>true</td>
-          <td>Set's NavPageContainer default padding</td>
+          <td>Set's NavPageContainer default horizontal padding,
+            <br/>set to false if you want to render component with 100% view width.
+            <br/>If <span class="app-code">false</span> use <b>{`<NavPageContainerInner />`}</b> to render child component with padding
+          </td>
         </tr>
         <tr>
           <td><p className="app-code">animateTransition</p></td>
           <td>boolean</td>
           <td>false</td>
-          <td>Set's NavPageContainer animate on visible<br/>when setting <b>{`<TransitionToLeft />`} <br/><Link to="/AppJsDefault">View implementation<br/>of {`<TransitionToLeft />`}</Link></b></td>
+          <td>Set's NavPageContainer animate on visible
+            <br/>when setting <b>{`<TransitionToLeft />`} 
+            <br/><Link to="/AppJsDefault">View implementation
+            <br/>of {`<TransitionToLeft />`}</Link></b>
+          </td>
         </tr>
       </tbody>
     </table>
diff --git a/src/demo/templates/appjs-default/codes.js b/src/demo/templates/appjs-default/codes.js
@@ -13,8 +13,6 @@ const App = () => {
 
           <NavBar 
             title="React Windows UI"
-            titleShort={<i className="icons10-windows"></i>}
-          //titleShort="R" render text or icons
           //mobileHasIcons={true}
             shadowOnScroll={true}>
 
diff --git a/src/demo/templates/appjs-searchable/codes.js b/src/demo/templates/appjs-searchable/codes.js
@@ -55,8 +55,6 @@ class App extends React.Component {
 
           <NavBar 
             title="React Windows UI"
-            titleShort={<i className="icons10-windows"></i>}
-          //titleShort="R" render text or icons
           //mobileHasIcons={true}
             shadowOnScroll={true}>
 
diff --git a/src/lib/dist/react-windows-ui.min.css b/src/lib/dist/react-windows-ui.min.css
diff --git a/src/lib/src/components/AppTheme/index.d.ts b/src/lib/src/components/AppTheme/index.d.ts
@@ -3,6 +3,7 @@ import React from 'react'
 export interface AppThemeProps {
   color ?: any;
   scheme ?: 'light' | 'dark' | 'system';
+  onMount ?: Function;
   onColorChange ?: Function;
   onSchemeChange ?: Function;
 }
diff --git a/src/lib/src/components/AppTheme/index.js b/src/lib/src/components/AppTheme/index.js
@@ -4,29 +4,37 @@ import ThemeManager from '../utils/ThemeManager'
 
 const AppTheme = React.memo(
   (props) => {
+    const {onMount, scheme} = props;
+
+    useEffect(() => {
+      onMount();
+      // eslint-disable-next-line react-hooks/exhaustive-deps
+    },[]);
+
     useEffect(() => {
-      if(props.scheme === 'system') {
+      if(scheme === 'system') {
         if (window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches) {
           Appearance.setDarkScheme();
         }
       }
-    });
+    },[scheme]);
+
 
-    if(props.scheme === "system") {
+    if(scheme === "system") {
       window.matchMedia("(prefers-color-scheme: dark)")
         .addEventListener("change", e => {
-      const newColorScheme = e.matches ? "dark" : "light";
+        const newColorScheme = e.matches ? "dark" : "light";
 
-      if(newColorScheme === "dark") {
-        Appearance.setDarkScheme();
-      }
-      else {
-        Appearance.setLightScheme();
-      }
-    })
-  }
+        if(newColorScheme === "dark") {
+          Appearance.setDarkScheme();
+        }
+        else {
+          Appearance.setLightScheme();
+        }
+      })
+    }
 
-    return "";
+    return <>{/* ... */}</>;
   }, (prevProps, nextProps) => {
 
     let navSwitch = document.getElementById("app-day-night-switch");
@@ -61,6 +69,7 @@ const AppTheme = React.memo(
 AppTheme.defaultProps = {
   onSchemeChange: () => {},
   onColorChange: () => {},
+  onMount: () => {},
   scheme: 'system'
 }
 
diff --git a/src/lib/src/components/SplashScreen/index.d.ts b/src/lib/src/components/SplashScreen/index.d.ts
@@ -0,0 +1,12 @@
+import React from 'react'
+
+export interface SplashScreenProps {
+  isVisible ?: boolean;
+  duration ?: number;
+  title ?: any;
+  subtitle ?: any;
+  backgroundColor ?: string;  
+}
+declare const SplashScreen: React.FC<SplashScreenProps>
+
+export default SplashScreen
diff --git a/src/lib/src/components/SplashScreen/index.js b/src/lib/src/components/SplashScreen/index.js
@@ -0,0 +1,34 @@
+import React,{ useState,useEffect } from 'react'
+
+const SplashScreen = (props) => {
+  const [isOpen, setOpen] = useState(true);
+
+  useEffect(() => {
+
+    setTimeout(()=>{
+      props.isVisible ? setOpen(true) : setOpen(false);
+    }, props.duration);
+  }, [props.isVisible,props.duration])
+  
+  return (
+    <div
+      style={
+        isOpen ?
+          {display:'flex', backgroundColor: props.backgroundColor}
+        : {display:'none'}
+      }
+      className="app-splash-screen app-flex-center">
+      <h1 className="color-white">{props.title}</h1>
+      {props.subtitle && (<h3 className="color-white">{props.subtitle}</h3>)}
+    </div>
+  )
+}
+
+SplashScreen.defaultProps = {
+  isVisible: false,
+  title: "",
+  subtitle: "",
+  duration: 1000
+}
+
+export default SplashScreen
diff --git a/src/lib/src/index.js b/src/lib/src/index.js
@@ -38,6 +38,7 @@ import ProgressBar from './components/ProgressBar'
 import ProgressBarIndeterminate from './components/ProgressBarIndeterminate'
 import RadioButton from './components/RadioButton'
 import SliderBar from './components/SliderBar'
+import SplashScreen from './components/SplashScreen'
 import Select from './components/Select'
 import SelectBox from './components/SelectBox'
 import StickyHeader from './components/StickyHeader'
@@ -89,6 +90,7 @@ export {
     ProgressBarIndeterminate,
     RadioButton,
     SliderBar,
+    SplashScreen,
     Select,
     SelectBox,
     StickyHeader,
diff --git a/src/source/stylesheet/components/AppNavBar/sub-items/Nav_Li.scss b/src/source/stylesheet/components/AppNavBar/sub-items/Nav_Li.scss
@@ -55,8 +55,9 @@
     img {
       width: 20px;
       height: 20px;
-      border-radius: 4px;
       margin: 2px;
+      border-radius: 4px;
+      background-color: var(--color_link_bg_hover);
     }
   }
 }
diff --git a/src/source/stylesheet/components/SplashScreen.scss b/src/source/stylesheet/components/SplashScreen.scss
@@ -0,0 +1,9 @@
+.app-splash-screen {
+  @extend .app-overlay;
+
+  background-color: var(--PrimaryColor);
+  display: flex;
+  flex-direction: column;
+  z-index: 999;
+
+}
diff --git a/src/source/stylesheet/components/_base/_colors.scss b/src/source/stylesheet/components/_base/_colors.scss
diff --git a/src/source/stylesheet/main.scss b/src/source/stylesheet/main.scss

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`@media only screen and (max-width: 760px) {`
`2`	`2`	`.app-nav-wrap nav.animate.custom {`
`3`		`- height: 90px;`
	`3`	`+ height: 70px;`
`4`	`4`	`z-index: 1;`
`5`	`5`	`}`
`6`	`6`	`.app-nav-wrap nav.animate.custom .app-switch {`