amotify 0.0.4 → 0.0.5

package/src/Functions/Layout/PageRouter.tsx

@@ -1,107 +0,0 @@
-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

@@ -1,32 +0,0 @@
-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

@@ -1,30 +0,0 @@
-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

@@ -1,290 +0,0 @@
-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

@@ -1,24 +0,0 @@
-@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;
-    }
-  }
-}