amotify 0.0.2 → 0.0.4

package/src/Functions/Sheet/parts.tsx

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