amotify 0.0.64 → 0.0.66

package/src/functions/Sheet/parts.tsx

@@ -1,994 +0,0 @@
-import {
-  launchID,
-  React,
-  LaunchSubApplication,
-  useStore,
-} from '@global'
-import {
-  Img,
-  Box,
-  Flex,
-  FAI
-} from '@atoms'
-import {
-  Column,
-  Row,
-  Text
-} from '@mols'
-import {
-  Buttons,
-  Input,
-  Layout
-} from '@fn'
-
-import style from './style.module.scss'
-
-type Params = amotify.fn.Sheet.Params & {
-  type: amotify.fn.Sheet.SheetTypes
-}
-
-const Comps = {
-  contents: {} as {
-    [ key: string ]: {
-      open: boolean
-      hold_state: boolean
-      params: Params
-      created_at: Time.Methods
-    }
-  },
-  Launch: function ( params: Params ) {
-    params = {
-      sheetID: $.uuidGen(),
-      sheetGroups: params.sheetGroups || [],
-      backgroundEffect: true,
-      overwrap: params.type == 'custom' ? true : false,
-      hold_state: false,
-      ...params,
-      close_option: {
-        pageTransit: true,
-        escapeKeyDown: true,
-        aroundClick: params.type == 'custom',
-        ...params.close_option
-      },
-    }
-
-    if ( this.contents[ params.sheetID! ] ) {
-      /** open Exist Sheet */
-      let component = useStore.get( params.sheetID! )
-      if ( component && component.refresh ) component.refresh( params,true )
-      return
-    }
-    /** create Sheet */
-    let Content = <Comps.Core { ...params } />
-
-    this.contents[ params.sheetID! ] = {
-      open: true,
-      hold_state: !!params.hold_state,
-      params: params,
-      created_at: $.Time()
-    }
-
-    $( '#' + launchID + ' .AMOTIFY_be_sheet' )
-      .append( `<div id="Sheet-${ params.sheetID }"></div>` )
-      .callback( () => {
-        LaunchSubApplication( {
-          isRoot: false,
-          baseElement: '#Sheet-' + params.sheetID,
-          reactElement: Content,
-        } )
-      } )
-  },
-  mainSheetScrolls: 0,
-  subSheetLength: 0,
-  currentIndex: 0,
-  Core: ( params: Params ) => {
-    let [ val_componentID ] = React.useState( $.uuidGen() )
-    let [ val_params,set_params ] = React.useState( params )
-    let [ val_open,set_open ] = React.useState( true )
-
-    let {
-      type,
-      sheetID,
-      openAfter,
-      closeAfter,
-    } = val_params
-
-    let isNewSheet = !params.overwrap
-
-    let ContentFC: any = Comps.Types[ {
-      'normal.topLeft': 'Normal',
-      'normal.topCenter': 'Normal',
-      'normal.topRight': 'Normal',
-      'normal.middleLeft': 'Normal',
-      'normal.middleCenter': 'Normal',
-      'normal.middleRight': 'Normal',
-      'normal.bottomLeft': 'Normal',
-      'normal.bottomCenter': 'Normal',
-      'normal.bottomRight': 'Normal',
-      'image': 'Normal',
-
-      'drawer.left': 'Edge',
-      'drawer.right': 'Edge',
-      'drawer.bottom': 'Bottom',
-
-      'custom': 'Custom',
-    }[ type ] as 'Normal' ]
-
-    React.useEffect( () => {
-      useStore.set( {
-        key: sheetID!,
-        value: {
-          refresh: ( params: Params,open?: boolean ) => {
-            set_params( params )
-            set_open( open ?? false )
-          },
-          resize: ( size: string ) => {
-            if ( type == 'drawer.bottom' ) {
-              let component = useStore.get( val_componentID )
-              if ( component && component.resize ) component.resize( size )
-            } else if (
-              val_params.type.includes( 'normal' ) ||
-              val_params.type.includes( 'drawer' )
-            ) {
-              set_params( {
-                ...val_params,
-                size: size
-              } as any )
-            }
-          },
-          close: ( force: boolean ) => {
-            Comps.contents[ sheetID! ].open = false
-
-            set_open( false )
-          },
-          open: () => {
-            Comps.contents[ sheetID! ].open = true
-
-            set_open( true )
-          }
-        }
-      } )
-    } )
-    React.useEffect( () => {
-      Comps.currentIndex++
-
-      let {
-        close_option
-      } = params
-
-      $.fnScope( () => {
-        if ( !close_option?.elementBlur ) return
-        let element = $( close_option.elementBlur )
-        if ( !element[ 0 ] ) return
-        $( element ).addEvent( {
-          eventID: 'SheetClosation-' + sheetID!,
-          eventType: 'mouseout',
-          callback: () => {
-            Sheet.close( sheetID! )
-
-            $().removeEvent( 'SheetClosation-' + sheetID! )
-          }
-        } )
-      } )
-    },[] )
-    React.useEffect( () => {
-      $.fnScope( () => {
-        if ( !isNewSheet ) return
-        if ( !params.backgroundEffect ) return
-
-        Comps.subSheetLength = Comps.subSheetLength + ( val_open ? 1 : -1 )
-        if ( val_open ) {
-          let html = $( 'html' )
-
-          if ( Comps.subSheetLength == 1 ) {
-            let scroll = html[ 0 ].scrollTop
-            Comps.mainSheetScrolls = scroll
-          }
-          if ( !amotify.config.device.isPhone ) {
-            html
-              .abort()
-              .addClass( style.FixHeight )
-              .callback( () => {
-                $( '#' + launchID + ' .AMOTIFY_be_root' )
-                  .addClass( style.FixScroll )
-                [ 0 ].scrollTop = Comps.mainSheetScrolls
-              } )
-              .addClass( [
-                style.FloatMainSheet,
-                style[ 'Type_' + type ]
-              ] )
-            [ 0 ].scrollTop = 0
-          }
-        } else {
-          if ( Comps.subSheetLength != 0 ) return
-          if ( amotify.config.device.isPhone ) return
-          let html = $( 'html' )
-          html
-            .abort()
-            .removeClass( style.FloatMainSheet )
-            .await( 251 )
-            .removeClass( style.FixHeight )
-            .callback( ( html ) => {
-              html[ 0 ].scrollTop = Comps.mainSheetScrolls | 0
-              $( '#' + launchID + ' .AMOTIFY_be_root' )[ 0 ].scrollTop = 0
-            } )
-        }
-      } )
-      $.fnScope( () => {
-        if ( val_open ) {
-          $( '#' + val_componentID )
-            .abort()
-            .await( 10 )
-            .removeClass( style.Hide )
-            .await( 10 )
-            .addClass( style.Open )
-            .callback( () => {
-              if ( openAfter ) openAfter()
-            } )
-        } else {
-          $( '#' + val_componentID )
-            .abort()
-            .await( 10 )
-            .removeClass( style.Open )
-            .await( 251 )
-            .addClass( style.Hide )
-            .callback( () => {
-              !closeAfter || closeAfter()
-
-              if ( params.hold_state ) {
-                return
-              }
-              delete Comps.contents[ sheetID! ]
-              $( '#Sheet-' + sheetID ).remove()
-              $().removeEvent( 'SheetClosation-' + sheetID! )
-            } )
-        }
-      } )
-    },[ val_open ] )
-
-    let [ Tcate,Tpos ] = type.split( '.' )
-
-    return <Box
-      className={ [
-        style.Wrap,
-        style[ 'Tcate_' + Tcate ],
-        style[ 'Tpos_' + Tpos ],
-        style[ 'isNewSheet_' + isNewSheet ],
-      ].join( ' ' ) }
-      width={ 1 }
-      height={ 0 }
-      ssAbsoluteCovered
-      freeCSS={ {
-        zIndex: Comps.currentIndex + 1
-      } }
-      id={ val_componentID }
-    >
-      <Column
-        className={ style.Content }
-        gap={ 0 }
-        height={ 'viewHeight' }
-        overflow={ 'auto' }
-        transition='middle'
-      >
-        { isNewSheet ? <Comps.TapSensor
-          sheetID={ sheetID! }
-          delegateAroundClick={ params.close_option?.aroundClick }
-        /> : null }
-        <ContentFC
-          componentID={ val_componentID }
-          { ...val_params }
-        />
-      </Column>
-    </Box>
-  },
-  Types: {
-    Normal: ( params: amotify.fn.Sheet.NormalParams ) => {
-      let {
-        sheetID,
-        sheetGroups,
-        content: Content,
-        className = '',
-        type,
-        size = 'R',
-        freeCSS,
-        openAfter,
-        hold_state,
-        overwrap,
-        ...styles
-      } = params
-      let [ Tcate,Tpos ] = type.split( '.' )
-
-      let SysStyles: amotifyUniStyleParams = {}
-      let transformOrigins: string[] = []
-
-      if ( Tpos.match( /top/ ) ) {
-        transformOrigins.push( 'top' )
-
-        SysStyles.marginBottom = 'auto'
-      } else if ( Tpos.match( /middle/ ) ) {
-        transformOrigins.push( 'center' )
-
-        SysStyles.marginTop = 'auto'
-        SysStyles.marginBottom = 'auto'
-      } else if ( Tpos.match( /bottom/ ) ) {
-        transformOrigins.push( 'bottom' )
-
-        SysStyles.marginTop = 'auto'
-      }
-
-      if ( Tpos.match( /left/i ) ) {
-        transformOrigins.push( 'left' )
-
-        SysStyles.marginRight = 'auto'
-      } else if ( Tpos.match( /center/i ) ) {
-        transformOrigins.push( 'center' )
-
-        SysStyles.marginLeft = 'auto'
-        SysStyles.marginRight = 'auto'
-      } else if ( Tpos.match( /right/i ) ) {
-        transformOrigins.push( 'right' )
-
-        SysStyles.marginLeft = 'auto'
-      }
-
-      return <Box
-        className={ [
-          style.BB,
-          className
-        ].join( ' ' ) }
-
-        transition='long'
-        opacity='trans'
-        { ...SysStyles }
-        { ...styles }
-        freeCSS={ {
-          width: {
-            'S': '26rem',
-            'R': '36rem',
-            'L': '44rem',
-            '2L': '60rem',
-            '3L': '72rem',
-            'MAX': '95vw'
-          }[ size ],
-          maxWidth: '96vw',
-          transformOrigin: transformOrigins.join( ' ' ),
-          ...freeCSS
-        } }
-        children={ $.is.function( Content ) ? <Content /> : Content }
-      />
-    },
-    Edge: ( params: amotify.fn.Sheet.NormalParams ) => {
-      let {
-        sheetID,
-        sheetGroups,
-        type,
-        content: Content,
-        className = '',
-        size = 'R',
-        freeCSS,
-        close_option,
-        hold_state,
-        overwrap,
-        ...styles
-      } = params
-
-      return <Box
-        opacity='trans'
-        transition='long'
-        position='relative'
-        backgroundColor={ '1.layer.base' }
-        flexSizing={ 'none' }
-        minHeight={ 'viewHeight' }
-        boxShadow={ '3.remark' }
-        className={ [
-          style.BB,
-          className
-        ].join( ' ' ) }
-        { ...type == 'drawer.right' ? {
-          marginLeft: 'auto'
-        } : type == 'drawer.left' ? {
-          marginRight: 'auto'
-        } : {} }
-        { ...styles }
-        freeCSS={ {
-          width: {
-            'S': '20rem',
-            'R': '27rem',
-            'L': '32rem',
-            '2L': '40rem',
-            '3L': '58rem',
-            'MAX': '95vw'
-          }[ size ],
-          ...freeCSS
-        } }
-        children={ $.is.function( Content ) ? <Content /> : Content }
-      />
-    },
-    Bottom: ( params: amotify.fn.Sheet.Bottom.Params ) => {
-      let {
-        componentID,
-        sheetID,
-        sheetGroups,
-        content: Content,
-        size = 'R',
-        sizeChanged,
-        baseStyles,
-        close_option: {
-          swipeDown = true,
-        } = {},
-        hold_state,
-        overwrap,
-        ...styles
-      } = params
-      let screen = $.getScreenSize()
-
-      let sizeArray = [ 0,.2,.6,.95 ]
-      let SizeSets = {
-        'ZERO': 0,
-        'S': 1,
-        'R': 2,
-        'L': 3
-      }
-
-      let [ val_stableSize,set_stableSize ] = React.useState( size as any )
-      let [ val_edit,set_edit ] = React.useState( {
-        process: false,
-        processStart: 0,
-        originY: 0,
-        originValue: 0,
-        viewHeight: 0,
-        value: sizeArray[ SizeSets[ size ] ]
-      } )
-
-      useStore.update( {
-        key: componentID!,
-        value: {
-          val_edit,
-          resize: ( size: amotify.fn.Sheet.Bottom.Sizes ) => {
-            let Size = sizeArray[ SizeSets[ size ] ]
-            set_edit( {
-              ...val_edit,
-              value: Size
-            } )
-            set_stableSize( size )
-          }
-        }
-      } )
-
-      const Effects = {
-        Start: ( event: any ) => {
-          $( document )
-            .addEvent( { eventID: 'BottomSheetMouseMove',eventType: 'mousemove',callback: Effects.Move } )
-            .addEvent( { eventID: 'BottomSheetTouchMove',eventType: 'touchmove',callback: Effects.Move } )
-            .addEvent( { eventID: 'BottomSheetMouseUp',eventType: 'mouseup',callback: Effects.End } )
-            .addEvent( { eventID: 'BottomSheetTouchEnd',eventType: 'touchend',callback: Effects.End } )
-
-          let cursor = $.getCursor( event )
-          let newEditInfo = {
-            ...val_edit,
-            process: true,
-            processStart: new Date().getTime(),
-            originY: cursor.y,
-            originValue: val_edit.value,
-            viewHeight: $.getScreenSize().height,
-          }
-          useStore.update( {
-            key: componentID!,
-            value: {
-              val_edit: newEditInfo
-            }
-          } )
-          set_edit( newEditInfo )
-        },
-        Move: ( event: any ) => {
-          let editInfo = useStore.get( componentID! )?.val_edit as typeof val_edit
-          if ( !editInfo.process ) return
-
-          let margin = $.getCursor( event ).y - editInfo.originY
-          let marginRate = margin / editInfo.viewHeight
-          let newRate = editInfo.originValue - marginRate
-
-          if ( newRate > .95 ) {
-            let margin = newRate - .95
-            newRate = .95 + margin * .5
-          } else if ( newRate < .2 ) {
-            let margin = .2 - newRate
-            margin -= .1
-            newRate = .1 + ( .1 - margin ) * .5
-          }
-
-          set_edit( {
-            ...editInfo,
-            value: newRate
-          } )
-        },
-        End: ( event: any ) => {
-          let editInfo = useStore.get( componentID! )?.val_edit as typeof val_edit
-          if ( !editInfo.process ) return
-          $( document ).removeEvent( [
-            'BottomSheetMouseMove',
-            'BottomSheetTouchMove',
-            'BottomSheetMouseUp',
-            'BottomSheetTouchEnd'
-          ] )
-
-          let sizeIndex = 0
-          if ( editInfo.value < .1 ) {
-          } else if ( editInfo.value < .5 ) {
-            sizeIndex = 1
-          } else if ( editInfo.value > .75 ) {
-            sizeIndex = 3
-          } else {
-            sizeIndex = 2
-          }
-
-          let ms = new Date().getTime() - editInfo.processStart
-          if ( ms < 300 ) {
-            let margin = $.getCursor( event ).y - editInfo.originY
-            if ( Math.abs( margin ) >= 20 ) {
-              let dir = Number( margin < 0 ) * 2 - 1
-              sizeIndex += dir
-              sizeIndex = Math.min( Math.max( sizeIndex,0 ),sizeArray.length - 1 )
-            }
-          }
-
-          if ( sizeIndex == 0 ) {
-            if ( !swipeDown ) sizeIndex = 1
-          }
-          set_stableSize( [ 'ZERO','S','R','L' ][ sizeIndex ] as any )
-          set_edit( {
-            ...editInfo,
-            value: sizeArray[ sizeIndex ],
-            process: false
-          } )
-        }
-      }
-
-      const mounted = React.useRef( false )
-      React.useEffect( () => {
-        if ( mounted.current ) {
-          if ( val_stableSize == 'ZERO' ) {
-            if ( swipeDown ) Sheet.close( sheetID! )
-          } else {
-            setTimeout( () => {
-              if ( params.sizeChanged ) params.sizeChanged( val_stableSize )
-            },250 )
-          }
-        } else {
-          mounted.current = true
-        }
-      },[ val_stableSize ] )
-
-      return <Box
-        className={ style.BB }
-        margin={ [ 0,'auto' ] }
-        marginTop={ 'auto' }
-        opacity='trans'
-        width={ 1 }
-        transition='long'
-        freeCSS={ {
-          maxWidth: 12 * 60,
-          height: screen.height * val_edit.value,
-          ...val_edit.process ? {
-            transition: '0s'
-          } : {},
-        } }
-      >
-        <Column
-          gap={ 0 }
-          flexSizing={ 'none' }
-          borderTopLeftRadius={ '1.tone.primary' }
-          borderTopRightRadius={ '1.tone.primary' }
-          border
-          borderBottom='unset'
-          boxShadow={ '3.remark' }
-          position='relative'
-          overflow={ 'hidden' }
-          height={ 1 }
-          { ...baseStyles }
-        >
-          <Row.Separate
-            padding={ '1/2' }
-            backgroundColor='1.layer.base'
-            position='relative'
-            freeCSS={ {
-              userSelect: 'none'
-            } }
-          >
-            <Row.Center
-              flexSizing={ 0 }
-              padding={ '2/3' }
-              onMouseDown={ Effects.Start }
-              onTouchStart={ Effects.Start }
-              ssPushable
-              isRounded
-              freeCSS={ {
-                cursor: 'grab',
-                userSelect: 'none'
-              } }
-            >
-              <Box
-                unitWidth={ 6 }
-                unitHeight={ '1/2' }
-                backgroundColor='5.layer.darker'
-                isRounded
-                className={ style.DragBar }
-              />
-            </Row.Center>
-
-            <Buttons.Button.Sub.R
-              color='cloud'
-              ssSphere={ 2 }
-              onClick={ () => {
-                Sheet.close( sheetID! )
-              } }
-            >
-              <FAI.Times />
-            </Buttons.Button.Sub.R>
-          </Row.Separate>
-          <Box
-            backgroundColor={ '1.layer.base' }
-            flexSizing={ 0 }
-            overflow={ 'auto' }
-            { ...styles }
-          >
-            { $.is.function( Content ) ? <Content /> : Content }
-          </Box>
-        </Column>
-      </Box>
-    },
-    Custom: ( params: amotify.fn.Sheet.CustomParams ) => {
-      let {
-        sheetID,
-        sheetGroups,
-        parent,
-        gravityPoint: GPT = 22,
-        content: Content,
-        close_option,
-        hold_state,
-        overwrap,
-        openAfter,
-        closeAfter,
-        ...others
-      } = params
-
-      let [ val_componentID ] = React.useState( $.uuidGen() )
-      let Parent = $( parent )
-      let Query = '[data-sheet-id="' + val_componentID + '"]'
-      let ContentQuery = '[data-sheet-content="' + val_componentID + '"]'
-
-      GPT = GPT!
-      let column = GPT % 5 || 5
-      let row = Math.ceil( GPT / 5 )
-
-      const getWrapperCSS = () => {
-        let WrapperCSS: React.CSSProperties = {}
-        let { top,right,bottom,left,height,width } = Parent.position()
-
-        if ( [ 1,2 ].includes( column ) ) {
-          WrapperCSS.left = left
-        } else if ( column == 3 ) {
-          WrapperCSS.left = left + width / 2
-        } else if ( [ 4,5 ].includes( column ) ) {
-          WrapperCSS.left = right
-        }
-
-        if ( GPT <= 10 ) {
-          WrapperCSS.top = top
-        } else if ( GPT <= 15 ) {
-          WrapperCSS.top = top + height / 2
-        } else if ( GPT <= 25 ) {
-          WrapperCSS.top = bottom
-        }
-        return WrapperCSS
-      }
-
-      let [ val_Styles,set_Styles ] = React.useState( getWrapperCSS() )
-      const AdjustExtrusion = () => {
-        let BaseRect = $( Query ).position()
-        let ContentRect = $( ContentQuery ).position()
-        let screen = $.getScreenSize()
-
-        let newStyles = { ...val_Styles }
-        if ( ContentRect.top < 0 ) {
-          newStyles.top = BaseRect.top - ContentRect.top
-        }
-        if ( ContentRect.left < 0 ) {
-          newStyles.left = BaseRect.left - ContentRect.left
-        }
-        if ( ContentRect.right > screen.width ) {
-          newStyles.left = BaseRect.left - ( ContentRect.right - screen.width )
-        }
-        if ( ContentRect.bottom > screen.height ) {
-          newStyles.top = BaseRect.top - ( ContentRect.bottom - screen.height )
-        }
-
-        return newStyles
-      }
-
-      React.useEffect( () => {
-        $( Query )
-          .await( 10 )
-          .addClass( style.Open )
-          .await( 250 )
-          .callback( () => {
-            set_Styles( AdjustExtrusion() )
-          } )
-
-        useStore.update( {
-          key: 'customSheet-' + params.sheetID!,
-          value: {
-            reposition: () => {
-              setTimeout( () => {
-                set_Styles( AdjustExtrusion() )
-              },200 )
-            }
-          }
-        } )
-      },[] )
-
-      if ( !Parent[ 0 ] ) return null
-
-      return <Box
-        className={ [
-          style.BB,
-          style.CustomSheet
-        ].join( ' ' ) }
-        data-sheet-id={ val_componentID }
-        transition='long'
-        opacity='trans'
-        position='absolute'
-        width={ 0 }
-        height={ 0 }
-        flexCenter
-        freeCSS={ val_Styles }
-      >
-        <Flex
-          className={ [
-            style.GPT,
-            style[ 'GPT_' + GPT ],
-            style[ 'Col_' + column ],
-            style[ 'Row_' + row ],
-          ].join( ' ' ) }
-          position='absolute'
-        >
-          <Box
-            flexSizing={ 'none' }
-            data-sheet-content={ val_componentID }
-            maxHeight={ 'viewHeight' }
-            overflow={ 'auto' }
-            padding={ 1 }
-            { ...others }
-            freeCSS={ {
-              maxWidth: '98vw',
-              ...others.freeCSS
-            } }
-          >
-            { $.is.function( Content ) ? <Content /> : Content }
-          </Box>
-        </Flex>
-      </Box>
-    },
-  },
-  TapSensor: ( params: {
-    sheetID: string
-    delegateAroundClick?: boolean
-  } ) => ( <Buttons.Button.Plain
-    className={ style.TapSensor }
-    onClick={ () => {
-      if ( params.delegateAroundClick ?? false ) Sheet.close( params.sheetID )
-    } }
-    freeCSS={ {
-      cursor: 'default'
-    } }
-  >
-    <Box
-      className={ style.TapContent }
-    />
-  </Buttons.Button.Plain> )
-}
-
-$( document )
-  .addEvent( {
-    eventType: 'keyup',
-    callback: function ( event ) {
-      let { key,metaKey } = event as any
-      if ( key == 'Escape' || key == ',' && metaKey ) {
-        let OpenSheets = Object.values( Comps.contents ).filter( ( elm ) => elm.open )
-        if ( !OpenSheets.length ) return
-        let latestSheet = OpenSheets.reduce( ( a,b ) => {
-          return a.created_at.value > b.created_at.value ? a : b
-        } )
-        Sheet.close( latestSheet.params.sheetID!,key )
-      }
-    }
-  } )
-  .addEvent( {
-    eventType: 'click',
-    callback: function ( event ) {
-      let customSheets = Object.values( Comps.contents ).filter( ( elm ) => elm.params.type == 'custom' )
-      if ( !customSheets.length ) return
-      let isParent = !!customSheets.find( ( customSheet ) => {
-        let { params } = customSheet
-        let Parent = $( ( params as amotify.fn.Sheet.CustomParams ).parent )
-        let Target = $( event.target )
-        return Parent[ 0 ] == Target[ 0 ] || !!Parent.find( Target ).length
-      } )
-      if ( isParent ) return
-      if ( event.target?.closest( '.' + style.CustomSheet ) ) return
-
-      customSheets.forEach( ( customSheets ) => {
-        if ( !!customSheets.params.close_option?.aroundClick ) {
-          Sheet.close( customSheets.params.sheetID! )
-        }
-      } )
-    }
-  } )
-
-const Sheet: amotify.fn.Sheet.Methods = {
-  open: ( params ) => {
-    params.sheetID = ( params.sheetID || '' ).replace( /\./g,'-' )
-    if ( params.type == 'image' ) {
-      let {
-        type,
-        sheetID = $.uuidGen(),
-        src,
-        ...others
-      } = params as amotify.fn.Sheet.ImageParams
-
-      Sheet.open( {
-        type: 'normal.topCenter',
-        sheetID: sheetID,
-        backgroundColor: 'trans',
-        boxShadow: 'none',
-        ...others,
-        close_option: {
-          ...params.close_option,
-        },
-        freeCSS: {
-          maxWidth: '96vw',
-          transformOrigin: 'top'
-        },
-        content: () => {
-          let [ val_image ] = React.useState( $.flatArray( src ) )
-          let [ val_viewIndex,set_viewIndex ] = React.useState( 0 )
-
-          let Radio: amotify.fn.Input.List.OptionParams[] = []
-          let Slides: ReactElement[] = []
-          val_image.forEach( ( src,index ) => {
-            Radio.push( {
-              value: index,
-              label: <Img
-                src={ $.flatArray( src )[ 0 ] }
-                width={ 'auto' }
-                height={ 1 }
-                freeCSS={ {
-                  maxHeight: 12 * 3
-                } }
-              />
-            } )
-            Slides.push( <Img
-              width={ 1 }
-              height={ 'auto' }
-              src={ $.flatArray( src )[ 0 ] }
-            /> )
-          } )
-          return <Column
-            gap={ 0 }
-          >
-            <Row.Separate
-              gap={ 2 }
-              padding={ 1 }
-              backgroundColor='1.layer.base'
-              borderTopLeftRadius={ '1.tone.primary' }
-              borderTopRightRadius={ '1.tone.primary' }
-            >
-              <Input.Radio
-                tone='border'
-                icon={ false }
-                value={ val_viewIndex }
-                override='force'
-                horizontalAlign='center'
-                onUpdateValidValue={ ( { value } ) => {
-                  set_viewIndex( value[ 0 ] )
-                } }
-                cellStyles={ {
-                  borderWidth: 2,
-                  padding: '1/3'
-                } }
-                options={ Radio }
-              />
-              <Buttons.Button.Sub.R
-                color='cloud'
-                ssSphere={ 3 }
-                fontSize={ '4.thirdTitle' }
-                onClick={ () => {
-                  Sheet.close( sheetID! )
-                } }
-              >
-                <FAI.Times />
-              </Buttons.Button.Sub.R>
-            </Row.Separate>
-            <Layout.SwipeView
-              slideIndex={ val_viewIndex }
-              options={ {
-                loop: val_image.length > 1,
-                onSlideCallback: ( index ) => {
-                  set_viewIndex( index )
-                }
-              } }
-              slides={ Slides }
-              wrapper={ ( View ) => ( <Box
-                borderBottomLeftRadius={ '1.tone.primary' }
-                borderBottomRightRadius={ '1.tone.primary' }
-              >
-                { View }
-              </Box> ) }
-            />
-          </Column>
-        },
-      } )
-      return
-    }
-    Comps.Launch( params )
-  },
-  refresh: ( params,open ) => {
-    params.sheetID = ( params.sheetID || '' ).replace( /\./g,'-' )
-
-    let component = useStore.get( params.sheetID! )
-    if ( component && component.refresh ) component.refresh( params,open )
-  },
-  resize: ( params ) => {
-    params.sheetID = ( params.sheetID || '' ).replace( /\./g,'-' )
-    let component = useStore.get( params.sheetID! )
-    if ( component && component.resize ) component.resize( params.size )
-  },
-  reposition: ( sheetID ) => {
-    let Comps = useStore.get( 'customSheet-' + sheetID )
-    if ( Comps && Comps.reposition ) Comps.reposition()
-  },
-  close: function ( sheetID,et,force ) {
-    let Content
-    sheetID = sheetID?.replace( /\./g,'-' )
-    Content = Comps.contents[ sheetID ]
-
-    if ( !Content ) return
-    if ( et == 'Escape' && !Content.params.close_option?.escapeKeyDown ) return
-
-    {
-      let { params } = Content
-      let { sheetID } = params
-
-      let component = useStore.get( sheetID! )
-      component && component.close && component.close( force )
-    }
-  },
-  closeGroup: ( sheetGroup ) => {
-    sheetGroup = ( sheetGroup || '' ).replace( /\./g,'-' )
-
-    for ( let [ key,value ] of Object.entries( Comps.contents ) ) {
-      if ( value.params.sheetGroups?.includes( sheetGroup ) ) Sheet.close( key )
-    }
-  },
-  closeAll: ( pageTransit ) => {
-    for ( let [ key,value ] of Object.entries( Comps.contents ) ) {
-      if ( pageTransit ) {
-        if ( value.params.close_option?.pageTransit == false ) continue
-      }
-      Sheet.close( key,'pageTransit',true )
-    }
-  },
-  Comps: {
-    Body: ( params ) => ( <Box
-      className={ style.BaseBody }
-      backgroundColor='1.layer.base'
-      borderRadius={ '1.tone.primary' }
-      position='relative'
-      boxShadow={ '3.remark' }
-      transition='long'
-      { ...params }
-    /> ),
-  }
-}
-
-export { Sheet }