amotify 0.0.4 → 0.0.6

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

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

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

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

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

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

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