amotify 0.0.58 → 0.0.60

package/src/functions/Layout/Plate.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React from 'react'
 import {
   Box
-} from '@atoms';
+} from '@atoms'
 
 export const Plate: React.FC<amotify.fn.Layout.Plate.Params> = ( props ) => {
   let {
     size = 'R',
     ...others
-  } = props;
+  } = props
 
   let Size = {
     'XS': 48,
@@ -16,7 +16,7 @@ export const Plate: React.FC<amotify.fn.Layout.Plate.Params> = ( props ) => {
     'L': 84,
     'XL': 100,
     'MAX': 120,
-  }[ size ];
+  }[ size ]
 
   return <Box
     margin={ [ 0,'auto' ] }
@@ -26,5 +26,5 @@ export const Plate: React.FC<amotify.fn.Layout.Plate.Params> = ( props ) => {
       maxWidth: 12 * Size,
       ...others.freeCSS
     } }
-  />;
+  />
 }

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

@@ -2,19 +2,19 @@ import {
   React,
   useRecycle,
   pageTransit
-} from '@global';
+} from '@global'
 import {
   Box,
   Flex,
-} from '@atoms';
+} from '@atoms'
 import {
   Column
-} from '@mols';
+} from '@mols'
 import {
   Buttons
-} from '@fn';
+} from '@fn'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
 export const RootViewController: amotify.fn.Layout.RootViewController.Methods = {
   Base: ( params ) => {
@@ -25,32 +25,32 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
       children,
       className,
       ...others
-    } = params;
-    let Key = useRecycle.set( 'RootViewController' );
+    } = params
+    let Key = useRecycle.set( 'RootViewController' )
 
     React.useEffect( () => {
-      calcHeights();
+      calcHeights()
       setTimeout( () => {
-        calcHeights();
-      },100 );
+        calcHeights()
+      },100 )
 
-      let getSideNavigationHeight = 'ResizeCB';
-      let beforeunload = 'RemovePageEventCB';
+      let getSideNavigationHeight = 'ResizeCB'
+      let beforeunload = 'RemovePageEventCB'
 
       $( window ).addEvent( {
         eventType: 'resize',
         eventID: getSideNavigationHeight,
         callback: () => {
-          if ( !amotify.config.device.isPhonepoint() ) calcHeights();
+          if ( !amotify.config.device.isPhonepoint() ) calcHeights()
         }
       } )
       return () => {
-        $( window ).removeEvent( beforeunload );
-        $( window ).removeEvent( getSideNavigationHeight );
+        $( window ).removeEvent( beforeunload )
+        $( window ).removeEvent( getSideNavigationHeight )
       }
-    },[] );
+    },[] )
 
-    let Chilren: ReactElement = children;
+    let Chilren: ReactElement = children
 
     return <Column
       key={ Key }
@@ -84,30 +84,30 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
         </Box>
       </Flex>
       { footerNavigation }
-    </Column>;
+    </Column>
   },
   TopNavigation: ( params ) => {
     let {
       className,
       children,
       ...others
-    } = params;
+    } = params
 
-    let [ val_componentID ] = React.useState( $.uuidGen() );
+    let [ val_componentID ] = React.useState( $.uuidGen() )
 
     React.useEffect( () => {
-      let { height } = $( `[data-id="${ val_componentID }"]` ).position();
-      height = height | 0;
-      let topBase = height;
+      let { height } = $( `[data-id="${ val_componentID }"]` ).position()
+      height = height | 0
+      let topBase = height
 
       if ( $( '#TopNavigation' ).getStyleProperty( 'position' ) != 'sticky' ) {
-        topBase = 0;
+        topBase = 0
       }
 
       $( document.body )
         .setStyleProperty( '--topNavHeight',height + 'px' )
-        .setStyleProperty( '--topBase',topBase + 'px' );
-    },[] );
+        .setStyleProperty( '--topBase',topBase + 'px' )
+    },[] )
 
     return <Flex
       key={ val_componentID }
@@ -125,14 +125,14 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
       ].join( ' ' ) }
     >
       { children }
-    </Flex>;
+    </Flex>
   },
   SideNavigation: ( params ) => {
     let {
       className = '',
       baseStyles,
       ...others
-    } = params;
+    } = params
 
     return <Box
       flexSizing={ 'none' }
@@ -142,21 +142,21 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
       ].join( ' ' ) }
       minHeight='sideNavigationHeight'
       { ...others }
-    />;
+    />
   },
   FooterNavigation: ( params ) => {
     let {
       className = '',
       baseStyles,
       ...others
-    } = params;
-    let [ val_componentID ] = React.useState( $.uuidGen() );
+    } = 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' );
-    },[] );
+      let { height } = $( `[data-id="${ val_componentID }"]` ).position()
+      height = height | 0
+      $( document.body ).setStyleProperty( '--footerNavHeight',height + 'px' )
+    },[] )
 
     return <Flex
       data-id={ val_componentID }
@@ -168,6 +168,7 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
       paddingBottom={ 'safeAreaBottom' }
       display='none'
       { ...baseStyles }
+      id='footerNavigation'
       UnderBreakPointStyles={ {
         display: 'flex',
         ...baseStyles?.UnderBreakPointStyles
@@ -184,7 +185,7 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
         margin={ 'auto' }
         { ...others }
       />
-    </Flex>;
+    </Flex>
   },
   Comps: {
     Button: ( params ) => {
@@ -194,31 +195,31 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
         uriGroup,
         activeClassName = '',
         ...others
-      } = params;
+      } = params
 
-      let groups = $.flatArray( uriGroup );
+      let groups = $.flatArray( uriGroup )
 
-      let currentURL = location.pathname;
+      let currentURL = location.pathname
 
       {
-        let isCurrentURL = false;
+        let isCurrentURL = false
         if ( $.is.exist( uri ) && $.is.string( uri ) ) {
           let url = [
             location.origin,
             uri.replace( /\//,'' )
-          ].join( '/' );
-          isCurrentURL = currentURL == new URL( url ).pathname;
+          ].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;
+              if ( $.is.nullish( group ) ) continue
+              if ( !!currentURL.match( new RegExp( group ) ) ) isCurrentURL = true
             }
           }
         }
-        isActive = isActive ?? isCurrentURL;
+        isActive = isActive ?? isCurrentURL
       }
 
       return <Buttons.Button.Clear.R
@@ -239,11 +240,11 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
           backgroundColor: 'cloud'
         } }
         onClick={ ( event ) => {
-          if ( $.is.exist( uri ) && $.is.string( uri ) ) pageTransit.push( uri,event.ctrlKey || event.metaKey );
+          if ( $.is.exist( uri ) && $.is.string( uri ) ) pageTransit.push( uri,event.ctrlKey || event.metaKey )
         } }
         color={ 'cloud' }
         { ...others }
-      />;
+      />
     },
     Bar: ( params ) => ( <Box
       flexSizing={ 'none' }
@@ -263,14 +264,14 @@ export const RootViewController: amotify.fn.Layout.RootViewController.Methods =
 }
 
 const calcHeights = () => {
-  let Body = $( document.body );
-  let viewHeight = window.innerHeight;
+  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;
+  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' );
+    .setStyleProperty( '--contentHeight',contentHeight + 'px' )
 }

package/src/functions/Layout/SwipeView/parts.tsx

@@ -1,13 +1,13 @@
 import {
   useStore,
   React
-} from '@global';
+} from '@global'
 import {
   Box,
   Flex
-} from '@atoms';
+} from '@atoms'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
 type SlideEventProps = {
   eventType: 'usr' | 'sys' | 'init' | 'adjustLoop'
@@ -31,7 +31,7 @@ export const SwipeView = ( params: amotify.fn.Layout.SwipeView.Params ) => {
   return <Core
     { ...params }
     slideIndex={ Math.max( Math.min( params.slideIndex!,params.slides.length - 1 ),0 ) }
-  />;
+  />
 }
 export const Core: React.FC<amotify.fn.Layout.SwipeView.Params> = ( params ) => {
   let {
@@ -46,40 +46,40 @@ export const Core: React.FC<amotify.fn.Layout.SwipeView.Params> = ( params ) =>
     wrapper = ( slide ) => ( slide ),
     slides = [],
     ...others
-  } = params;
+  } = params
 
-  let [ val_swipeID ] = React.useState( $.uuidGen() );
+  let [ val_swipeID ] = React.useState( $.uuidGen() )
   let [ val_event,set_event ] = React.useState( {
     eventType: 'init',
     index: params.slideIndex
-  } as SlideEventProps );
+  } as SlideEventProps )
 
   React.useEffect( () => {
     useStore.set( {
       key: 'SwipeTimer-' + val_swipeID,
       value: null
-    } );
-  },[] );
+    } )
+  },[] )
 
-  const mounted = React.useRef( false );
+  const mounted = React.useRef( false )
   React.useEffect( () => {
     set_event( {
       eventType: 'usr',
       index: params.slideIndex!
-    } );
+    } )
 
-    if ( !mounted.current ) mounted.current = true;
-  },[ params.slideIndex ] );
+    if ( !mounted.current ) mounted.current = true
+  },[ params.slideIndex ] )
 
   React.useEffect( () => {
-    let Index = val_event.index + ( loop ? 1 : 0 );
-    let CopyIndex = [ -1,slides.length ].includes( val_event.index );
+    let Index = val_event.index + ( loop ? 1 : 0 )
+    let CopyIndex = [ -1,slides.length ].includes( val_event.index )
 
     if ( !CopyIndex ) if ( onSlideCallback ) setTimeout( () => {
-      onSlideCallback!( val_event.index );
-    },300 );
+      onSlideCallback!( val_event.index )
+    },300 )
 
-    let Base = $( '#Swiper-' + val_swipeID );
+    let Base = $( '#Swiper-' + val_swipeID )
     if ( val_event.eventType == 'adjustLoop' ) {
       Base
         .await( 250 )
@@ -91,7 +91,7 @@ export const Core: React.FC<amotify.fn.Layout.SwipeView.Params> = ( params ) =>
         .removeClass( style.Display )
         .parent().children( Index )
         .addClass( [ style.Display,style.LoopAdjusting ] )
-        .await( 100 ).removeClass( style.LoopAdjusting );
+        .await( 100 ).removeClass( style.LoopAdjusting )
     } else if ( val_event.eventType == 'sys' ) {
       Base
         .await( 250 )
@@ -101,7 +101,7 @@ export const Core: React.FC<amotify.fn.Layout.SwipeView.Params> = ( params ) =>
         .children()
         .removeClass( style.Display )
         .parent().children( Index )
-        .addClass( style.Display );
+        .addClass( style.Display )
     } else {
       Base
         .children()
@@ -113,35 +113,35 @@ export const Core: React.FC<amotify.fn.Layout.SwipeView.Params> = ( params ) =>
           transition: '0.3s',
           transform: FNs.TrasformString( Index )
         } )
-        .await( 250 ).css( { transition: '0s' } );
+        .await( 250 ).css( { transition: '0s' } )
 
       if ( CopyIndex ) {
-        let ajastIndex = val_event.index == -1 ? slides.length - 1 : 0;
+        let ajastIndex = val_event.index == -1 ? slides.length - 1 : 0
         set_event( {
           eventType: 'adjustLoop',
           index: ajastIndex
-        } );
+        } )
       }
     }
 
     if ( autoSwipeSeconds && !CopyIndex ) {
-      $.interval.clear( 'SwipeTimer-' + val_swipeID );
+      $.interval.clear( 'SwipeTimer-' + val_swipeID )
       $.interval.standBy(
         'SwipeTimer-' + val_swipeID,
         autoSwipeSeconds - ( val_event.eventType == 'sys' ? 310 : 0 ),
         () => {
-          let newIndex = val_event.index + 1;
+          let newIndex = val_event.index + 1
 
-          if ( !loop && newIndex > slides.length - 1 ) newIndex = 0;
+          if ( !loop && newIndex > slides.length - 1 ) newIndex = 0
 
           set_event( {
             eventType: 'usr',
             index: newIndex
-          } );
+          } )
         }
-      );
+      )
     }
-  },[ val_event ] );
+  },[ val_event ] )
 
   let Slides = slides.map( ( slide,index ) => <Box
     key={ index }
@@ -150,11 +150,11 @@ export const Core: React.FC<amotify.fn.Layout.SwipeView.Params> = ( params ) =>
     height={ 0 }
     className={ style.Child }
     children={ wrapper( slide ) }
-  /> );
+  /> )
 
   if ( loop ) {
-    Slides.push( Slides[ 0 ] );
-    Slides.unshift( Slides[ Slides.length - 2 ] );
+    Slides.push( Slides[ 0 ] )
+    Slides.unshift( Slides[ Slides.length - 2 ] )
   }
 
   let info: SliderInfoProps = {
@@ -171,7 +171,7 @@ export const Core: React.FC<amotify.fn.Layout.SwipeView.Params> = ( params ) =>
     set_event: set_event
   }
 
-  let Index = val_event.index + ( loop ? 1 : 0 );
+  let Index = val_event.index + ( loop ? 1 : 0 )
 
   return <Box
     overflow='hidden'
@@ -183,14 +183,14 @@ export const Core: React.FC<amotify.fn.Layout.SwipeView.Params> = ( params ) =>
     } }
     data-swipe-id={ val_swipeID }
     onMouseDown={ ( event ) => {
-      if ( disableMousedrag ) return;
-      if ( event.buttons != 1 ) return;
-      FNs.EffectStart( event,info );
+      if ( disableMousedrag ) return
+      if ( event.buttons != 1 ) return
+      FNs.EffectStart( event,info )
     } }
     onTouchStart={ ( event ) => {
-      if ( disableTouch ) return;
-      if ( event.touches?.length != 1 ) return;
-      FNs.EffectStart( event as any,info );
+      if ( disableTouch ) return
+      if ( event.touches?.length != 1 ) return
+      FNs.EffectStart( event as any,info )
     } }
   >
     <Flex
@@ -209,7 +209,7 @@ export const Core: React.FC<amotify.fn.Layout.SwipeView.Params> = ( params ) =>
       } }
       children={ Slides }
     />
-  </Box>;
+  </Box>
 }
 
 const FNs = {
@@ -217,10 +217,10 @@ const FNs = {
   EffectStart: ( event: React.MouseEvent<HTMLDivElement,MouseEvent>,info: SliderInfoProps ) => {
     let {
       x,y
-    } = $.getCursor( event as any );
-    let eventTarget = event.currentTarget;
-    let target = event.target as HTMLElement;
-    if ( [ 'SELECT','BUTTON','LABEL','INPUT' ].includes( target.tagName ) ) return;
+    } = $.getCursor( event as any )
+    let eventTarget = event.currentTarget
+    let target = event.target as HTMLElement
+    if ( [ 'SELECT','BUTTON','LABEL','INPUT' ].includes( target.tagName ) ) return
 
     info = {
       ...info,
@@ -230,119 +230,119 @@ const FNs = {
       width: $( '#Swiper-' + info.id ).position().width
     }
 
-    let { swipeId } = eventTarget.dataset;
+    let { swipeId } = eventTarget.dataset
     if ( swipeId == info.id ) {
       $( document )
         .addEvent( {
           eventID: 'SwipeMouseMove',eventType: 'mousemove',
-          callback: ( event ) => { FNs.EffectCheck( event,info ); },
+          callback: ( event ) => { FNs.EffectCheck( event,info ) },
           option: { passive: false }
         } )
         .addEvent( {
           eventID: 'SwipeTouchMove',eventType: 'touchmove',
-          callback: ( event ) => { FNs.EffectCheck( event,info ); },
+          callback: ( event ) => { FNs.EffectCheck( event,info ) },
           option: { passive: false }
         } )
         .addEvent( {
           eventID: 'SwipeMouseUp',eventType: 'mouseup',
-          callback: ( event ) => { FNs.EffectEnd( event,info ); },
+          callback: ( event ) => { FNs.EffectEnd( event,info ) },
           option: { passive: false }
         } )
         .addEvent( {
           eventID: 'SwipeTouchEnd',eventType: 'touchend',
-          callback: ( event ) => { FNs.EffectEnd( event,info ); },
+          callback: ( event ) => { FNs.EffectEnd( event,info ) },
           option: { passive: false }
-        } );
+        } )
     }
   },
   EffectCheck: ( event: any,info: SliderInfoProps ) => {
-    if ( info.process ) return;
+    if ( info.process ) return
     let {
       x,y
-    } = $.getCursor( event );
+    } = $.getCursor( event )
 
-    let X = Math.abs( x - info.x + window.scrollX );
-    let Y = Math.abs( y - info.y + window.scrollY );
+    let X = Math.abs( x - info.x + window.scrollX )
+    let Y = Math.abs( y - info.y + window.scrollY )
 
-    if ( event.touches && event.touches.length > 1 ) return;
-    if ( Y + X < 15 ) return;
+    if ( event.touches && event.touches.length > 1 ) return
+    if ( Y + X < 15 ) return
     if ( Y > X / 2 ) {
       $( document ).removeEvent( [
         'SwipeMouseMove',
         'SwipeTouchMove'
-      ] );
+      ] )
     } else {
-      info.process = true;
+      info.process = true
 
-      let Index = info.index + ( info.loop ? 1 : 0 );
-      $( '#Swiper-' + info.id ).children( Index - 1 ).addClass( style.Display );
-      $( '#Swiper-' + info.id ).children( Index + 1 ).addClass( style.Display );
+      let Index = info.index + ( info.loop ? 1 : 0 )
+      $( '#Swiper-' + info.id ).children( Index - 1 ).addClass( style.Display )
+      $( '#Swiper-' + info.id ).children( Index + 1 ).addClass( style.Display )
 
       $( document )
         .addEvent( {
           eventID: 'SwipeCheckMouseMove',eventType: 'mousemove',
-          callback: ( event ) => { FNs.EffectMove( event,info ); },
+          callback: ( event ) => { FNs.EffectMove( event,info ) },
           option: { passive: false }
         } )
         .addEvent( {
           eventID: 'SwipeCheckTouchMove',eventType: 'touchmove',
-          callback: ( event ) => { FNs.EffectMove( event,info ); },
+          callback: ( event ) => { FNs.EffectMove( event,info ) },
           option: { passive: false }
         } )
 
-      event.preventDefault();
-      return;
+      event.preventDefault()
+      return
     }
   },
   EffectMove: ( event: any,info: SliderInfoProps ) => {
-    if ( event.touches && event.touches.length > 1 ) return;
+    if ( event.touches && event.touches.length > 1 ) return
 
     let {
       x
-    } = $.getCursor( event );
+    } = $.getCursor( event )
 
-    let X = x - info.x + window.scrollX;
+    let X = x - info.x + window.scrollX
 
-    let Index = info.index + ( info.loop ? 1 : 0 );
-    let rate = Index - X / info.width;
+    let Index = info.index + ( info.loop ? 1 : 0 )
+    let rate = Index - X / info.width
 
     if ( rate < 0 ) {
-      rate /= 2;
+      rate /= 2
     } else if ( rate > info.maxIndex ) {
-      let excess = rate - info.maxIndex;
-      rate = info.maxIndex + excess / 2;
+      let excess = rate - info.maxIndex
+      rate = info.maxIndex + excess / 2
     }
 
     $( '#Swiper-' + info.id ).css( {
       transition: '0s',
       transform: FNs.TrasformString( rate )
-    } );
+    } )
 
-    event.preventDefault();
-    return;
+    event.preventDefault()
+    return
   },
   EffectEnd: ( event: Event,info: SliderInfoProps ) => {
     if ( info.process ) {
-      let cursor = $.getCursor( event );
-      let X = cursor.x - info.x + window.scrollX;
+      let cursor = $.getCursor( event )
+      let X = cursor.x - info.x + window.scrollX
 
-      let current = new Date().getTime();
+      let current = new Date().getTime()
 
-      let totalTime = current - info.effectStartAt;
+      let totalTime = current - info.effectStartAt
 
-      let Index = info.index + ( info.loop ? 1 : 0 );
+      let Index = info.index + ( info.loop ? 1 : 0 )
 
-      let newIndex = 0;
+      let newIndex = 0
       if ( totalTime < 400 ) {
-        newIndex = Index - ( Number( X > 0 ) * 2 - 1 );
+        newIndex = Index - ( Number( X > 0 ) * 2 - 1 )
       } else {
-        newIndex = Math.round( Index - X / info.width );
+        newIndex = Math.round( Index - X / info.width )
       }
-      newIndex = Math.max( Math.min( newIndex,info.maxIndex ),info.minIndex );
+      newIndex = Math.max( Math.min( newIndex,info.maxIndex ),info.minIndex )
 
-      info.process = false;
+      info.process = false
       if ( Index === newIndex ) {
-        info.effectStartAt = current;
+        info.effectStartAt = current
 
         $( '#Swiper-' + info.id )
           .css( {
@@ -354,12 +354,12 @@ const FNs = {
             transition: '0s'
           } )
           .children().removeClass( style.Display )
-          .parent().children( Index ).addClass( style.Display );
+          .parent().children( Index ).addClass( style.Display )
       } else {
         info.set_event( {
           eventType: 'usr',
           index: newIndex + info.minIndex
-        } );
+        } )
       }
     }
 
@@ -370,6 +370,6 @@ const FNs = {
       'SwipeCheckTouchMove',
       'SwipeMouseUp',
       'SwipeTouchEnd'
-    ] );
+    ] )
   }
 }