amotify 0.0.2 → 0.0.4

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

@@ -0,0 +1,380 @@
+import {
+  useStore
+} from '@global';
+import {
+  Box,
+  Flex
+} from '@atoms';
+const {
+  useState,
+  useEffect,
+  useRef,
+} = React;
+
+import style from './style.module.scss';
+
+
+type SlideEventProps = {
+  eventType: 'usr' | 'sys' | 'init' | 'adjustLoop'
+  index: number
+}
+type SliderInfoProps = {
+  x: number
+  y: number
+  effectStartAt: number
+  process: boolean
+  loop: boolean
+  id: string
+  index: number
+  minIndex: number
+  maxIndex: number
+  width: number
+  set_event: React.Dispatch<React.SetStateAction<SlideEventProps>>
+}
+
+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: FNC<amotify.fn.Layout.SwipeView.Params> = ( params ) => {
+  let {
+    options: {
+      onSlideCallback,
+      visibilitySurroundSlide = true,
+      autoSwipeSeconds = 0,
+      loop = false,
+      disableMousedrag = false,
+      disableTouch = false,
+    } = {},
+    wrapper = ( slide ) => ( slide ),
+    slides = [],
+    ...others
+  } = params;
+
+  let [ val_swipeID ] = useState( $.uuidGen() );
+  let [ val_event,set_event ] = useState( {
+    eventType: 'init',
+    index: params.slideIndex
+  } as SlideEventProps );
+
+  useEffect( () => {
+    useStore.set( {
+      key: 'SwipeTimer-' + val_swipeID,
+      value: null
+    } );
+  },[] );
+
+  const mounted = useRef( false );
+  useEffect( () => {
+    set_event( {
+      eventType: 'usr',
+      index: params.slideIndex!
+    } );
+
+    if ( !mounted.current ) mounted.current = true;
+  },[ params.slideIndex ] );
+
+  useEffect( () => {
+    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 );
+
+    let Base = $( '#Swiper-' + val_swipeID );
+    if ( val_event.eventType == 'adjustLoop' ) {
+      Base
+        .await( 250 )
+        .css( {
+          transition: '0s',
+          transform: FNs.TrasformString( Index )
+        } )
+        .children()
+        .removeClass( style.Display )
+        .parent().children( Index )
+        .addClass( [ style.Display,style.LoopAdjusting ] )
+        .await( 100 ).removeClass( style.LoopAdjusting );
+    } else if ( val_event.eventType == 'sys' ) {
+      Base
+        .await( 250 )
+        .css( {
+          transform: FNs.TrasformString( Index )
+        } )
+        .children()
+        .removeClass( style.Display )
+        .parent().children( Index )
+        .addClass( style.Display );
+    } else {
+      Base
+        .children()
+        .removeClass( style.Display )
+        .parent().children( Index )
+        .addClass( style.Display )
+        .parent()
+        .css( {
+          transition: '0.3s',
+          transform: FNs.TrasformString( Index )
+        } )
+        .await( 250 ).css( { transition: '0s' } );
+
+      if ( CopyIndex ) {
+        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.standBy(
+        'SwipeTimer-' + val_swipeID,
+        autoSwipeSeconds - ( val_event.eventType == 'sys' ? 310 : 0 ),
+        () => {
+          let newIndex = val_event.index + 1;
+
+          if ( !loop && newIndex > slides.length - 1 ) newIndex = 0;
+
+          set_event( {
+            eventType: 'usr',
+            index: newIndex
+          } );
+        }
+      );
+    }
+  },[ val_event ] );
+
+  let Slides = slides.map( ( slide,index ) => <Box
+    key={ index }
+    flexSizing={ 'none' }
+    width={ 1 }
+    height={ 0 }
+    className={ style.Child }
+    children={ wrapper( slide ) }
+  /> );
+
+  if ( loop ) {
+    Slides.push( Slides[ 0 ] );
+    Slides.unshift( Slides[ Slides.length - 2 ] );
+  }
+
+  let info: SliderInfoProps = {
+    x: 0,
+    y: 0,
+    process: false,
+    effectStartAt: 0,
+    id: val_swipeID,
+    loop,
+    index: val_event.index,
+    minIndex: loop ? -1 : 0,
+    maxIndex: slides.length + ( loop ? 1 : -1 ),
+    width: 0,
+    set_event: set_event
+  }
+
+  let Index = val_event.index + ( loop ? 1 : 0 );
+
+  return ( <Box
+    overflow='hidden'
+    position='relative'
+    { ...others }
+    freeCSS={ {
+      zIndex: 1,
+      ...others.freeCSS
+    } }
+    data-swipe-id={ val_swipeID }
+    onMouseDown={ ( event ) => {
+      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 );
+    } }
+  >
+    <Flex
+      flexWrap={ false }
+      gap={ 1 }
+      transition='long'
+      className={ [
+        style.Rail,
+        style[ 'ShowOther_' + visibilitySurroundSlide ]
+      ].join( ' ' ) }
+      id={ 'Swiper-' + val_swipeID }
+      freeCSS={ {
+        ...!mounted.current ? {
+          transform: FNs.TrasformString( Index )
+        } : {}
+      } }
+      children={ Slides }
+    />
+  </Box> );
+}
+
+const FNs = {
+  TrasformString: ( Index: number ) => ( `translateX( calc( ${ -100 * Index }%  - ${ 12 * ( Index ) }px ) )` ),
+  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;
+
+    info = {
+      ...info,
+      x: x - info.x + window.scrollX,
+      y: y - info.y + window.scrollY,
+      effectStartAt: new Date().getTime(),
+      width: $( '#Swiper-' + info.id ).position().width
+    }
+
+    let { swipeId } = eventTarget.dataset;
+    if ( swipeId == info.id ) {
+      $( document )
+        .addEvent( {
+          eventID: 'SwipeMouseMove',eventType: 'mousemove',
+          callback: ( event ) => { FNs.EffectCheck( event,info ); },
+          option: { passive: false }
+        } )
+        .addEvent( {
+          eventID: 'SwipeTouchMove',eventType: 'touchmove',
+          callback: ( event ) => { FNs.EffectCheck( event,info ); },
+          option: { passive: false }
+        } )
+        .addEvent( {
+          eventID: 'SwipeMouseUp',eventType: 'mouseup',
+          callback: ( event ) => { FNs.EffectEnd( event,info ); },
+          option: { passive: false }
+        } )
+        .addEvent( {
+          eventID: 'SwipeTouchEnd',eventType: 'touchend',
+          callback: ( event ) => { FNs.EffectEnd( event,info ); },
+          option: { passive: false }
+        } );
+    }
+  },
+  EffectCheck: ( event: any,info: SliderInfoProps ) => {
+    if ( info.process ) return;
+    let {
+      x,y
+    } = $.getCursor( event );
+
+    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 ( Y > X / 2 ) {
+      $( document ).removeEvent( [
+        'SwipeMouseMove',
+        'SwipeTouchMove'
+      ] );
+    } else {
+      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 );
+
+      $( document )
+        .addEvent( {
+          eventID: 'SwipeCheckMouseMove',eventType: 'mousemove',
+          callback: ( event ) => { FNs.EffectMove( event,info ); },
+          option: { passive: false }
+        } )
+        .addEvent( {
+          eventID: 'SwipeCheckTouchMove',eventType: 'touchmove',
+          callback: ( event ) => { FNs.EffectMove( event,info ); },
+          option: { passive: false }
+        } )
+
+      event.preventDefault();
+      return;
+    }
+  },
+  EffectMove: ( event: any,info: SliderInfoProps ) => {
+    if ( event.touches && event.touches.length > 1 ) return;
+
+    let {
+      x
+    } = $.getCursor( event );
+
+    let X = x - info.x + window.scrollX;
+
+    let Index = info.index + ( info.loop ? 1 : 0 );
+    let rate = Index - X / info.width;
+
+    if ( rate < 0 ) {
+      rate /= 2;
+    } else if ( rate > info.maxIndex ) {
+      let excess = rate - info.maxIndex;
+      rate = info.maxIndex + excess / 2;
+    }
+
+    $( '#Swiper-' + info.id ).css( {
+      transition: '0s',
+      transform: FNs.TrasformString( rate )
+    } );
+
+    event.preventDefault();
+    return;
+  },
+  EffectEnd: ( event: Event,info: SliderInfoProps ) => {
+    if ( info.process ) {
+      let cursor = $.getCursor( event );
+      let X = cursor.x - info.x + window.scrollX;
+
+      let current = new Date().getTime();
+
+      let totalTime = current - info.effectStartAt;
+
+      let Index = info.index + ( info.loop ? 1 : 0 );
+
+      let newIndex = 0;
+      if ( totalTime < 400 ) {
+        newIndex = Index - ( Number( X > 0 ) * 2 - 1 );
+      } else {
+        newIndex = Math.round( Index - X / info.width );
+      }
+      newIndex = Math.max( Math.min( newIndex,info.maxIndex ),info.minIndex );
+
+      info.process = false;
+      if ( Index === newIndex ) {
+        info.effectStartAt = current;
+
+        $( '#Swiper-' + info.id )
+          .css( {
+            transition: '.2s',
+            transform: FNs.TrasformString( newIndex )
+          } )
+          .await( 310 )
+          .css( {
+            transition: '0s'
+          } )
+          .children().removeClass( style.Display )
+          .parent().children( Index ).addClass( style.Display );
+      } else {
+        info.set_event( {
+          eventType: 'usr',
+          index: newIndex + info.minIndex
+        } );
+      }
+    }
+
+    $( document ).removeEvent( [
+      'SwipeMouseMove',
+      'SwipeTouchMove',
+      'SwipeCheckMouseMove',
+      'SwipeCheckTouchMove',
+      'SwipeMouseUp',
+      'SwipeTouchEnd'
+    ] );
+  }
+}

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

@@ -0,0 +1,19 @@
+@use '@uniVar' as *;
+.Rail {
+  &.ShowOther_true {
+    > .Child {
+      opacity: 100% !important;
+    }
+  }
+  .Child {
+    opacity: 0%;
+    transition: .3s;
+    &.Display {
+      opacity: 100%;
+      height: auto;
+    }
+    &.LoopAdjusting {
+      transition: 0s !important;
+    }
+  }
+}

package/src/Functions/Layout/TabBar.tsx

@@ -0,0 +1,64 @@
+import {
+  React,
+} from '@global';
+import {
+  Box,
+  Flex
+} from '@atoms';
+import {
+  Row
+} from '@mols';
+import {
+  Input
+} from '@functions';
+const {
+  useEffect,
+  useState
+} = React;
+
+export const TabBar: FNC<amotify.fn.Layout.TabBar.Params> = ( params ) => {
+  let {
+    tabIndex,
+    tabs,
+    onTabChange,
+    componentDidMount,
+    ...others
+  } = params;
+
+  useEffect( () => {
+    if ( componentDidMount ) componentDidMount();
+  },[] );
+
+  return ( <Flex
+    position='relative'
+    overflow={ 'auto' }
+    flexWrap={ false }
+    { ...others }
+    freeCSS={ {
+      zIndex: 3,
+      whiteSpace: 'nowrap',
+      ...others.freeCSS
+    } }
+  >
+    <Box
+      margin={ [ 0,'auto' ] }
+    >
+      <Input.Segmented.BottomLine
+        value={ tabIndex }
+        fontColor='inherit'
+        override='force'
+        gap={ 0 }
+        options={ tabs.map( ( tab,index ) => {
+          return {
+            value: index,
+            label: tab
+          }
+        } ) }
+        onUpdateValidValue={ ( args ) => {
+          let value = args.value[ 0 ];
+          if ( onTabChange ) onTabChange( value );
+        } }
+      />
+    </Box>
+  </Flex> );
+}

package/src/Functions/Layout/_.tsx

@@ -0,0 +1,20 @@
+import { SwipeView } from './SwipeView/parts';
+import { PageViewController } from './PageViewController/parts';
+import { TabBar } from './TabBar';
+import { Plate } from './Plate';
+import { PageNotFound } from './PageNotFound';
+import { PageRouter } from './PageRouter';
+
+import { RootViewController } from './RootViewController/parts';
+
+const Layout: amotify.fn.Layout.Methods = {
+  PageViewController,
+  TabBar,
+  Plate,
+  SwipeView,
+  PageRouter,
+  PageNotFound,
+  RootViewController
+}
+
+export { Layout }

package/src/Functions/Loader/corner.tsx

@@ -0,0 +1,78 @@
+import {
+  useStore
+} from '@global';
+import {
+  Box,
+  Flex
+} from '@atoms';
+import {
+  Row
+} from '@mols';
+const {
+  useEffect,
+  useState,
+} = React;
+
+import style from './style.module.scss';
+
+import { memoryID } from './parts';
+
+export const Corner = () => {
+  let [ val_active,set_active ] = useState( false );
+
+  useEffect( () => {
+    useStore.set( {
+      key: memoryID + '-corner',
+      value: {
+        active: () => {
+          set_active( true );
+        },
+        stop: () => {
+          set_active( false );
+        }
+      }
+    } );
+  },[] );
+
+  return <Flex
+    className={ [
+      style.CornerLoader,
+      style[ 'Active_' + val_active ]
+    ].join( ' ' ) }
+    gap={ '1/2' }
+    padding={ [ '1/2','3/4' ] }
+    borderRadius={ '2/3' }
+    backgroundColor='theme'
+    position='fixed'
+    boxShadow={ 2 }
+    right={ 1 }
+    bottom={ 1 }
+    opacity='trans'
+    transition='short'
+    freeCSS={ {
+      pointerEvents: 'none'
+    } }
+  >
+    <Flex
+      className={ style.Wrap }
+      flexWrap={ false }
+      verticalAlign='center'
+      horizontalAlign='center'
+    >
+      <Box className={ style.Ld4 } />
+      <Box className={ style.Ld3 } />
+      <Box className={ style.Ld2 } />
+      <Box className={ style.Ld1 } />
+      <Box className={ style.Ld2 } />
+      <Box className={ style.Ld3 } />
+      <Box className={ style.Ld4 } />
+    </Flex>
+    <Box
+      fontColor='white'
+      fontSize='0.xs'
+      isBoldFont
+    >
+      Loading
+    </Box>
+  </Flex>;
+}

package/src/Functions/Loader/mini.tsx

@@ -0,0 +1,117 @@
+import {
+  useStore
+} from '@global';
+import {
+  Row
+} from '@mols';
+const {
+  useEffect,
+  useState,
+} = React;
+
+import style from './style.module.scss';
+
+export const Mini = ( params: amotify.fn.Loader.CompInput & {
+  color?: amotify.fn.Loader.Colors
+  size?: amotify.fn.Loader.Sizes
+} ) => {
+  let {
+    color = 'theme',
+    size = 'R',
+    showInitial = false,
+    loaderID = '',
+    ...props
+  } = params;
+  let [ val_key ] = useState( loaderID );
+  let [ val_componentID ] = useState( $.uuidGen() );
+  let [ val_active,set_active ] = useState( showInitial );
+
+  let Size: amotify.UniStyles.Sizes.SizeParams = 0;
+  if ( size == 'S' ) {
+    Size = 1;
+  } else if ( size == 'R' ) {
+    Size = 1.5;
+  } else if ( size == 'L' ) {
+    Size = 3;
+  } else if ( size == 'XL' ) {
+    Size = 4;
+  } else if ( size == 'MAX' ) {
+    Size = 6;
+  }
+  let BorderColor = {
+    'theme': 'hsl( var( --color-theme-hsl ) )',
+    'posi': 'var( --color-positive )',
+    'nega': 'var( --color-negative )',
+    'warn': 'var( --color-warning )',
+    'cloud': 'hsl( var( --color-layer5-hsl ) )',
+    'white': 'white',
+  }[ color as 'theme' ];
+
+  let QuerySelector = '[data-component-id="' + val_componentID + '"]';
+  useEffect( () => {
+    if ( val_active ) {
+      $( QuerySelector )
+        .removeClass( style.Hide )
+        .await( 10 )
+        .addClass( style.Active );
+    } else {
+      $( QuerySelector )
+        .removeClass( style.Active )
+        .await( 210 )
+        .addClass( style.Hide )
+    }
+  },[ val_active ] );
+
+  useEffect( () => {
+    useStore.set( {
+      key: val_componentID,
+      value: {
+        active: ( keyCode: string ) => {
+          if ( val_key != keyCode ) return;
+          set_active( true );
+        },
+        stop: ( keyCode: string ) => {
+          if ( val_key != keyCode ) return;
+          set_active( false );
+        },
+        stopForce: () => {
+          set_active( false );
+        }
+      }
+    } );
+  },[] );
+
+  return <Row.Center
+    ssSphere={ Size }
+    className={ [
+      style.MiniLoader,
+      showInitial ? '' : style.Hide
+    ].join( ' ' ) }
+    componentID={ val_componentID }
+    position='relative'
+    { ...props }
+  >
+    <svg
+      className={ style.SVG1 }
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+      style={ {
+        stroke: BorderColor
+      } }
+    >
+      <circle cx="50" cy="50" r="40" />
+    </svg>
+    <svg
+      className={ style.SVG2 }
+      width="100"
+      height="100"
+      viewBox="0 0 100 100"
+      style={ {
+        stroke: BorderColor
+      } }
+    >
+      <circle cx="50" cy="50" r="40" />
+    </svg>
+  </Row.Center>;
+}