amotify 0.0.6 → 0.0.7

package/src/Functions/Layout/PageRouter.tsx

@@ -0,0 +1,107 @@
+import {
+  useStore,
+  ReactRouterDom
+} from '@global';
+import {
+  Layout
+} from '@functions';
+const {
+  useEffect,
+  useRef,
+} = React;
+
+const {
+  useHistory,
+  useLocation,
+  BrowserRouter,
+  Switch,
+  Route,
+} = ReactRouterDom;
+
+const userEffect = ( beforeCallback?: Function,afterCallback?: Function,afterFirstCallback?: Function ) => {
+  const mounted = useRef( false );
+  let location = useLocation();
+  let history = useHistory();
+  useStore.set( {
+    key: 'history',
+    value: history
+  } );
+
+  amotify.fn.Sheet.closeAll( true );
+
+  useEffect( () => {
+    if ( mounted.current ) {
+      $( '#TopNavigation' )
+        .callback( ( topHeader ) => {
+          let Body = $( document.body );
+          if ( topHeader[ 0 ] ) {
+            Body.setStyleProperty( '--topNavHeight',topHeader.position().height + 'px' );
+          } else {
+            Body.setStyleProperty( '--topNavHeight','0px' );
+          }
+        } );
+    } else {
+      mounted.current = true;
+    }
+  },[ location ] );
+
+  if ( beforeCallback ) beforeCallback( location );
+
+  useEffect( () => {
+    if ( afterFirstCallback ) afterFirstCallback( location );
+  },[] );
+  useEffect( () => {
+    setTimeout( () => {
+      window.dispatchEvent( new Event( 'resize' ) );
+    },200 );
+    if ( afterCallback ) afterCallback( location );
+  },[ location ] );
+}
+
+const Switcher: React.FC<amotify.fn.Layout.PageRouter.RoutesSwitchProps> = ( props ) => {
+  let { routes,beforeCallBack,afterCallBack,afterFirstCallBack } = props;
+
+  userEffect( beforeCallBack,afterCallBack,afterFirstCallBack );
+
+  let Routes = routes.map( ( page ) => {
+    let { path,content } = page;
+    path = '/' + path.replace( /^\//,'' );
+
+    return (
+      <Route
+        key={ path }
+        exact
+        path={ path }
+        render={ () => ( <>{ content }</> ) }
+      />
+    );
+  } );
+
+  return (
+    <Switch>
+      { Routes }
+      <Route
+        path='*'
+        render={ () => ( <><Layout.PageNotFound /></> ) }
+      />
+    </Switch>
+  );
+}
+
+export const PageRouter: React.FC<amotify.fn.Layout.PageRouter.RouterProps> = ( props ) => {
+  let {
+    pages,
+    beforeCallBack,
+    afterCallBack,
+    afterFirstCallBack
+  } = props;
+
+  return (
+    <Switcher
+      routes={ pages }
+      beforeCallBack={ beforeCallBack }
+      afterCallBack={ afterCallBack }
+      afterFirstCallBack={ afterFirstCallBack }
+    />
+  );
+}

package/src/Functions/Layout/PageViewController/parts.tsx

@@ -0,0 +1,32 @@
+import {
+  React
+} from '@global';
+
+const {
+  useState,
+  useEffect
+} = React;
+
+import { Effects } from '@functions';
+
+export const PageViewController: FNC<amotify.fn.Layout.PageViewController.Params> = ( params ) => {
+  let {
+    viewIndex = 0,
+    views,
+    wrapper = ( body ) => ( <Effects.FadeIn
+      key={ viewIndex }
+      animationTime={ 400 }
+      children={ body }
+    /> )
+  } = params;
+  viewIndex = Math.min( Math.max( viewIndex,0 ),views.length );
+
+  let [ val_index,set_index ] = useState( viewIndex );
+  if ( val_index != viewIndex ) set_index( viewIndex );
+
+  return (
+    <>
+      { wrapper( views[ viewIndex ] ) }
+    </>
+  );
+}

package/src/Functions/Layout/Plate.tsx

@@ -0,0 +1,30 @@
+import {
+  Box
+} from '@atoms';
+
+export const Plate: FNC<amotify.fn.Layout.Plate.Params> = ( props ) => {
+  let {
+    size = 'R',
+    ...others
+  } = props;
+
+  let Size = {
+    'XS': 48,
+    'S': 60,
+    'R': 72,
+    'L': 84,
+    'XL': 100,
+    'MAX': 120,
+  }[ size ];
+
+  return ( <Box
+    margin={ [ 0,'auto' ] }
+    width={ 1 }
+    { ...others }
+    freeCSS={ {
+      maxWidth: 12 * Size,
+      ...others.freeCSS
+    } }
+  />
+  );
+}

package/src/Functions/Layout/RootViewController/parts.tsx

@@ -0,0 +1,290 @@
+import {
+  React,
+  useRecycle,
+  pageTransit
+} from '@global';
+import {
+  Box,
+  Flex,
+} from '@atoms';
+import {
+  Column,
+  Row
+} from '@mols';
+import {
+  Buttons,
+  Input
+} from '@functions';
+
+import style from './style.module.scss';
+
+export const RootViewController: amotify.fn.Layout.RootViewController.Methods = {
+  Base: ( params ) => {
+    let {
+      topNavigation,
+      sideNavigation,
+      footerNavigation,
+      children,
+      className,
+      ...others
+    } = params;
+    let Key = useRecycle.set( 'RootViewController' );
+
+    React.useEffect( () => {
+      calcHeights();
+      setTimeout( () => {
+        calcHeights();
+      },100 );
+
+      let getSideNavigationHeight = 'ResizeCB';
+      let beforeunload = 'RemovePageEventCB';
+
+      $( window ).addEvent( {
+        eventType: 'resize',
+        eventID: getSideNavigationHeight,
+        callback: () => {
+          if ( !amotify.config.device.isPhonepoint() ) calcHeights();
+        }
+      } )
+      return () => {
+        $( window ).removeEvent( beforeunload );
+        $( window ).removeEvent( getSideNavigationHeight );
+      }
+    },[] );
+
+    let Chilren: ReactElement = children;
+
+    return ( <Column
+      key={ Key }
+      className={ [
+        className,
+        style.Root,
+      ].join( ' ' ) }
+      backgroundColor='1.layer.base'
+      { ...others }
+      gap={ 0 }
+      minHeight={ 'viewHeight' }
+    >
+      { topNavigation }
+      <Flex
+        className={ style.Body }
+        flexWrap={ false }
+        position='relative'
+        flexSizing={ 0 }
+      >
+        { sideNavigation }
+        <Box
+          className={ style.Content }
+          position='relative'
+          flexSizing={ 0 }
+          width={ 0 }
+          UnderBreakPointStyles={ {
+            width: 1
+          } }
+        >
+          { Chilren }
+        </Box>
+      </Flex>
+      { footerNavigation }
+    </Column> );
+  },
+  TopNavigation: ( params ) => {
+    let {
+      className,
+      children,
+      ...others
+    } = params;
+
+    let [ val_componentID ] = React.useState( $.uuidGen() );
+
+    React.useEffect( () => {
+      let { height } = $( `[data-id="${ val_componentID }"]` ).position();
+      height = height | 0;
+      let topBase = height;
+
+      if ( $( '#TopNavigation' ).getStyleProperty( 'position' ) != 'sticky' ) {
+        topBase = 0;
+      }
+
+      $( document.body )
+        .setStyleProperty( '--topNavHeight',height + 'px' )
+        .setStyleProperty( '--topBase',topBase + 'px' );
+    },[] );
+
+    return ( <Flex
+      key={ val_componentID }
+      data-id={ val_componentID }
+      flexSizing={ 'none' }
+      flexType='col'
+      position='sticky'
+      top={ 0 }
+      backgroundColor='1.layer.base'
+      { ...others }
+      id='TopNavigation'
+      className={ [
+        className,
+        style.TopNav
+      ].join( ' ' ) }
+    >
+      <Box
+        position='absolute'
+        left={ 0 }
+        right={ 0 }
+        backgroundColor='inherit'
+        className={ style.TopCover }
+        freeCSS={ {
+          top: '-1rem',
+          height: '2rem',
+          zIndex: -1
+        } }
+      />
+      { children }
+    </Flex> );
+  },
+  SideNavigation: ( params ) => {
+    let {
+      className = '',
+      baseStyles,
+      ...others
+    } = params;
+
+    return ( <Box
+      flexSizing={ 'none' }
+      className={ [
+        className,
+        style.SideNav
+      ].join( ' ' ) }
+      minHeight='sideNavigationHeight'
+      { ...others }
+    /> );
+  },
+  FooterNavigation: ( params ) => {
+    let {
+      className = '',
+      baseStyles,
+      ...others
+    } = params;
+    let [ val_componentID ] = React.useState( $.uuidGen() );
+
+    React.useEffect( () => {
+      let { height } = $( `[data-id="${ val_componentID }"]` ).position();
+      height = height | 0;
+      $( document.body ).setStyleProperty( '--footerNavHeight',height + 'px' );
+    },[] );
+
+    return ( <Flex
+      data-id={ val_componentID }
+      borderTop
+      position='sticky'
+      bottom={ 0 }
+      overflow={ 'auto' }
+      backgroundColor='1.layer.base'
+      paddingBottom={ 'safeAreaBottom' }
+      display='none'
+      { ...baseStyles }
+      UnderBreakPointStyles={ {
+        display: 'flex',
+        ...baseStyles?.UnderBreakPointStyles
+      } }
+      className={ [
+        style.FooterNav,
+        className
+      ].join( ' ' ) }
+    >
+      <Flex
+        gap={ 1 }
+        flexWrap={ false }
+        padding={ '2/3' }
+        margin={ 'auto' }
+        { ...others }
+      />
+    </Flex> );
+  },
+  Comps: {
+    Button: ( params ) => {
+      let {
+        isActive,
+        uri,
+        uriGroup,
+        activeClassName = '',
+        ...others
+      } = params;
+
+      let groups = $.flatArray( uriGroup );
+
+      let currentURL = location.pathname + location.search;
+
+      {
+        let isCurrentURL = false;
+        if ( $.is.exist( uri ) && $.is.string( uri ) ) {
+          let url = [
+            location.origin,
+            uri.replace( /\//,'' )
+          ].join( '/' );
+
+          isCurrentURL = currentURL == new URL( url ).pathname;
+        }
+
+        if ( !isCurrentURL ) {
+          if ( groups.length ) {
+            for ( let group of groups ) {
+              if ( $.is.nullish( group ) ) continue;
+              if ( !!currentURL.match( new RegExp( group ) ) ) isCurrentURL = true;
+            }
+          }
+        }
+        isActive = isActive ?? isCurrentURL;
+      }
+
+      return <Buttons.Button.Clear.R
+        padding={ [ '3/4',1 ] }
+        display='flex'
+        gap='1/2'
+        fontColor='inherit'
+        width={ 1 }
+        flexSizing={ 'none' }
+        flexWrap={ false }
+        ssEffectsOnActive='ripple.cloud'
+        verticalAlign='center'
+        textAlign='left'
+        isBoldFont
+        isActive={ isActive }
+        isActiveStyles={ {
+          fontColor: 'theme',
+          backgroundColor: 'cloud'
+        } }
+        onClick={ ( event ) => {
+          if ( $.is.exist( uri ) && $.is.string( uri ) ) pageTransit.push( uri,event.ctrlKey || event.metaKey );
+        } }
+        color={ 'cloud' }
+        { ...others }
+      />;
+    },
+    Bar: ( params ) => ( <Box
+      backgroundColor={ 'lcOpMiddle' }
+      unitHeight={ '1/3' }
+      margin={ [ '2/3',1 ] }
+      borderRadius='sphere'
+      { ...params }
+    /> ),
+    Title: ( params ) => ( <Box
+      fontSize='3.paragraph'
+      isBoldFont
+      padding={ [ 0,1 ] }
+      { ...params }
+    /> ),
+  }
+}
+
+const calcHeights = () => {
+  let Body = $( document.body );
+  let viewHeight = window.innerHeight;
+
+  let topNavHeight = Number( Body.getStyleProperty( '--topNavHeight' ).removeLetters() );
+  let footerNavHeight = Number( Body.getStyleProperty( '--footerNavHeight' ).removeLetters() );
+  let contentHeight = viewHeight - topNavHeight - footerNavHeight;
+
+  Body.setStyleProperty( '--viewHeight',viewHeight + 'px' )
+    .setStyleProperty( '--sideNavHeight',contentHeight + 'px' )
+    .setStyleProperty( '--contentHeight',contentHeight + 'px' );
+}

package/src/Functions/Layout/RootViewController/style.module.scss

@@ -0,0 +1,24 @@
+@use '@uniVar' as *;
+.Content {
+  @media (max-width:$breakPoint ) {
+    min-height: calc($viewHeight - $topNavigationHeight - $footerNavigationHeight );
+  }
+}
+.Root {
+  .TopNav {
+    z-index: 5;
+  }
+  .FooterNav {
+    z-index: 4;
+  }
+  .Body {
+    .SideNav {
+      z-index: 3;
+      .Wrap {}
+    }
+    .Content {
+      z-index: 2;
+      padding-bottom: $footerNavigationHeight;
+    }
+  }
+}