amotify 0.0.4 → 0.0.5

package/src/Functions/Sheet/parts.tsx

@@ -1,972 +0,0 @@
-import {
-  LaunchReactApplication,
-  useStore
-} from '@global';
-import {
-  Img,
-  Box,
-  Flex,
-  FAIcon
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-import {
-  Buttons,
-  Input,
-  Layout
-} from '@functions';
-const {
-  useEffect,
-  useState,
-} = React;
-
-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
-      holdState: boolean
-      params: Params
-      created_at: Time.Method
-    }
-  },
-  Launch: function ( params: Params ) {
-    params = {
-      sheetID: $.uuidGen(),
-      sheetGroups: params.sheetGroups || [],
-      overwrap: params.type == 'custom' ? true : false,
-      holdState: false,
-      ...params,
-      closeOption: {
-        pageTransit: true,
-        escapeKeyDown: true,
-        aroundClick: false,
-        ...params.closeOption
-      },
-    }
-
-    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,
-      holdState: !!params.holdState,
-      params: params,
-      created_at: $.Time()
-    }
-
-    $( '#SHEET' )
-      .append( `<div id="Sheet-${ params.sheetID }"></div>` )
-      .callback( () => {
-        LaunchReactApplication( {
-          baseElement: '#Sheet-' + params.sheetID,
-          reactElement: Content,
-        } );
-      } );
-  },
-  mainSheetScrolls: 0,
-  subSheetLength: 0,
-  Core: ( params: Params ) => {
-    let [ val_componentID ] = useState( $.uuidGen() );
-    let [ val_params,set_params ] = useState( params );
-    let [ val_open,set_open ] = 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' ];
-
-    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: () => {
-            Comps.contents[ sheetID! ].open = false;
-
-            set_open( false );
-          },
-          open: () => {
-            Comps.contents[ sheetID! ].open = true;
-
-            set_open( true );
-          }
-        }
-      } );
-    } );
-    useEffect( () => {
-      let {
-        closeOption
-      } = params;
-
-      $.fnScope( () => {
-        if ( !closeOption?.elementBlur ) return;
-        let element = $( closeOption.elementBlur );
-        if ( !element[ 0 ] ) return;
-        $( element ).addEvent( {
-          eventID: 'SheetClosation-' + sheetID!,
-          eventType: 'mouseout',
-          callback: () => {
-            Sheet.close( sheetID! );
-
-            $().removeEvent( 'SheetClosation-' + sheetID! );
-          }
-        } );
-      } );
-    },[] );
-    useEffect( () => {
-      $.fnScope( () => {
-        // #ROOT
-        if ( !isNewSheet ) 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.isBreakpoint() ) {
-            html
-              .abort()
-              .addClass( style.FixHeight )
-              .callback( () => {
-                $( '#ROOT' )[ 0 ].scrollTop = Comps.mainSheetScrolls;
-              } )
-              .addClass( [
-                style.FloatMainSheet,
-                style[ 'Type_' + type ]
-              ] )
-            [ 0 ].scrollTop = 0;
-          }
-        } else {
-          if ( Comps.subSheetLength != 0 ) return;
-          if ( amotify.config.device.isBreakpoint() ) return;
-          let html = $( 'html' );
-          html
-            .abort()
-            .removeClass( style.FloatMainSheet )
-            .await( 251 )
-            .removeClass( style.FixHeight )
-            .callback( ( html ) => {
-              html[ 0 ].scrollTop = Comps.mainSheetScrolls | 0;
-              $( '#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();
-              params.holdState || $.fnScope( () => {
-                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: Object.keys( Comps.contents ).length + 1
-      } }
-      id={ val_componentID }
-    >
-      <Column
-        className={ style.Content }
-        gap={ 0 }
-        height={ 'viewHeight' }
-        overflow={ 'auto' }
-        transition='middle'
-      >
-        { isNewSheet ? <Comps.TapSensor
-          sheetID={ sheetID! }
-          delegateAroundClick={ params.closeOption?.aroundClick }
-        /> : null }
-        <ContentFC
-          componentID={ val_componentID }
-          { ...val_params }
-        />
-      </Column>
-    </Box> );
-  },
-  Types: {
-    Normal: ( params: amotify.fn.Sheet.NormalParams ) => {
-      let {
-        sheetID,
-        content: Content,
-        className = '',
-        type,
-        size = 'R',
-        freeCSS,
-        ...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,
-        type,
-        content: Content,
-        className = '',
-        size = 'R',
-        freeCSS,
-        ...styles
-      } = params;
-
-      return ( <Box
-        opacity='trans'
-        transition='long'
-        position='relative'
-        backgroundColor={ '1.layer.base' }
-        flexSizing={ 'none' }
-        minHeight={ 'viewHeight' }
-        boxShadow={ 3 }
-        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,
-        content: Content,
-        size = 'R',
-        sizeChanged,
-        baseStyles,
-        closeOption: {
-          swipeDown = true,
-        } = {},
-        ...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 ] = useState( size as any );
-      let [ val_edit,set_edit ] = 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 );
-      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 }
-          position='relative'
-          overflow={ 'hidden' }
-          height={ 1 }
-          { ...baseStyles }
-        >
-          <Flex
-            verticalAlign='center'
-            flexChilds='even'
-            padding={ '1/2' }
-            backgroundColor='1.layer.base'
-            position='relative'
-            freeCSS={ {
-              userSelect: 'none'
-            } }
-          >
-            <Row.Center>
-              <Box
-                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 }
-                />
-              </Box>
-            </Row.Center>
-            <Row.Right>
-              <Buttons.Button.Sub.R
-                color='cloud'
-                ssSphere={ 2 }
-                onClick={ () => {
-                  Sheet.close( sheetID! );
-                } }
-              >
-                <FAIcon.Times />
-              </Buttons.Button.Sub.R>
-            </Row.Right>
-          </Flex>
-          <Box
-            backgroundColor={ '1.layer.base' }
-            flexSizing={ 0 }
-            overflow={ 'auto' }
-            { ...styles }
-            children={ $.is.function( Content ) ? <Content /> : Content }
-          />
-        </Column>
-      </Box> );
-    },
-    Custom: ( params: amotify.fn.Sheet.CustomParams ) => {
-      let {
-        sheetID,
-        parent,
-        gravityPoint: GPT = 22,
-        content: Content,
-        ...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 ContentRect = $( ContentQuery ).position();
-        let screen = $.getScreenSize();
-
-        let newStyles = { ...val_Styles }
-        if ( ContentRect.top < 0 ) {
-          if ( ContentRect.height < screen.height ) {
-            newStyles.top = ContentRect.top - ContentRect.top;
-          }
-        }
-        if ( ContentRect.left < 0 ) {
-          if ( ContentRect.width < screen.width ) {
-            newStyles.left = ContentRect.left - ContentRect.left;
-          }
-        }
-        if ( ContentRect.right > screen.width ) {
-          if ( ContentRect.width < screen.width ) {
-            let shift = ContentRect.right - screen.width;
-            newStyles.left = ContentRect.left - shift;
-          }
-        }
-        if ( ContentRect.bottom > screen.height ) {
-          if ( ContentRect.height < screen.height ) {
-            let shift = ContentRect.bottom - screen.height;
-            newStyles.top = ContentRect.top - shift;
-          }
-        }
-        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 }
-            { ...others }
-            children={ $.is.function( Content ) ? <Content /> : Content }
-          />
-        </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! );
-      }
-    }
-  } )
-  .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.closeOption?.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,
-        closeOption: {
-          ...params.closeOption,
-        },
-        freeCSS: {
-          maxWidth: '96vw',
-          transformOrigin: 'top'
-        },
-        content: () => {
-          let [ val_image ] = useState( $.flatArray( src ) );
-          let [ val_viewIndex,set_viewIndex ] = 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! );
-                } }
-              >
-                <FAIcon.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 ) {
-    let Content;
-    sheetID = sheetID?.replace( /\./g,'-' );
-    Content = Comps.contents[ sheetID ];
-
-    if ( !Content ) return;
-    if ( et == 'escape' && !Content.params.closeOption?.escapeKeyDown ) return;
-
-    {
-      let { params } = Content;
-      let { sheetID } = params;
-
-      let component = useStore.get( sheetID! );
-      if ( component && component.close ) component.close();
-    }
-  },
-  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.closeOption?.pageTransit == false ) continue;
-      }
-      Sheet.close( key,'pageTransit' );
-    }
-  },
-  Comps: {
-    Body: ( params ) => ( <Box
-      className={ style.BaseBody }
-      backgroundColor='1.layer.base'
-      borderRadius={ '1.tone.primary' }
-      position='relative'
-      boxShadow={ 3 }
-      transition='long'
-      { ...params }
-    /> ),
-  }
-}
-
-export { Sheet }