amotify 0.0.65 → 0.0.67

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

@@ -1,375 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  Box,
-  Flex
-} from '@atoms'
-
-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: React.FC<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 ] = React.useState( $.uuidGen() )
-  let [ val_event,set_event ] = React.useState( {
-    eventType: 'init',
-    index: params.slideIndex
-  } as SlideEventProps )
-
-  React.useEffect( () => {
-    useStore.set( {
-      key: 'SwipeTimer-' + val_swipeID,
-      value: null
-    } )
-  },[] )
-
-  const mounted = React.useRef( false )
-  React.useEffect( () => {
-    set_event( {
-      eventType: 'usr',
-      index: 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 )
-
-    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,20 +0,0 @@
-@use '@props' as *;
-.Rail {
-  &.ShowOther_true {
-    > .Child {
-      opacity: 100% !important;
-    }
-  }
-  .Child {
-    opacity: 0%;
-    transition: .3s;
-    height: 0;
-    &.Display {
-      opacity: 100%;
-      height: auto;
-    }
-    &.LoopAdjusting {
-      transition: 0s !important;
-    }
-  }
-}

package/src/functions/Layout/TabBar.tsx

@@ -1,60 +0,0 @@
-import {
-  React,
-} from '@global'
-import {
-  Box,
-  Flex
-} from '@atoms'
-import {
-  Row
-} from '@mols'
-import {
-  Input
-} from '@fn'
-
-export const TabBar: React.FC<amotify.fn.Layout.TabBar.Params> = ( params ) => {
-  let {
-    tabIndex,
-    tabs,
-    onTabChange,
-    componentDidMount,
-    ...others
-  } = params
-
-  React.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,74 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  Box,
-  Flex
-} from '@atoms'
-
-import style from './style.module.scss'
-
-import { memoryID } from './parts'
-
-export const Corner = () => {
-  let [ val_active,set_active ] = React.useState( false )
-
-  React.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='dark'
-    position='fixed'
-    boxShadow={ '1.remark' }
-    left={ '50%' }
-    top={ 1 }
-    opacity='trans'
-    transition='short'
-    isRounded
-    freeCSS={ {
-      pointerEvents: 'none',
-      transform: 'translateX(-50%)'
-    } }
-  >
-    <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'
-      isSemiBoldFont
-    >
-      Loading
-    </Box>
-  </Flex>
-}

package/src/functions/Loader/mini.tsx

@@ -1,114 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  Row
-} from '@mols'
-
-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 ] = React.useState( loaderID )
-  let [ val_componentID ] = React.useState( $.uuidGen() )
-  let [ val_active,set_active ] = React.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 + '"]'
-  React.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 ] )
-
-  React.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>
-}