amotify 0.0.59 → 0.0.62

package/src/functions/Input/File/_.tsx

@@ -1,43 +1,43 @@
 import {
   useStore,
   React
-} from '@global';
+} from '@global'
 import {
   Box,
   Flex,
   FAI
-} from '@atoms';
+} from '@atoms'
 import {
   Column,
   Row,
   Text
-} from '@mols';
+} from '@mols'
 import {
   Input,
   Buttons,
   SnackBar
-} from '@fn';
+} from '@fn'
 
 import {
   BoxWrapper,
   SubmitForm,
   ValidationCheck,
   CommonEffects
-} from '../core';
-import style from './style.module.scss';
+} from '../core'
+import style from './style.module.scss'
 
-import { faCloudArrowUp } from '@fortawesome/free-solid-svg-icons/faCloudArrowUp';
+import { faCloudArrowUp } from '@fortawesome/free-solid-svg-icons/faCloudArrowUp'
 
 function DefaultValidation( props: {
   value: any
   params: any
 } ): amotify.fn.Input.Validation.Result {
-  let { value,params } = props;
-  let { required } = params as amotify.fn.Input.Filer.PlainParams;
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+  let { value,params } = props
+  let { required } = params as amotify.fn.Input.Filer.PlainParams
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
 
   if ( required && !value.length ) {
-    notice.push( { type: 'invalid',label: '必須項目です' } );
+    notice.push( { type: 'invalid',label: '必須項目です' } )
   }
 
   return {
@@ -70,7 +70,7 @@ const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) =
     enableFormSubmit,
 
     ...others
-  } = params;
+  } = params
 
   let Default_Status: amotify.fn.Input.Status.Plain = {
     componentID: params.componentID || '',
@@ -78,11 +78,11 @@ const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) =
     eventType: 'init',
     eventID: $.uuidGen()
   }
-  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_status,set_status ] = React.useState( Default_Status )
   let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
-  } as amotify.fn.Input.Validation.Result );
+  } as amotify.fn.Input.Validation.Result )
 
   CommonEffects( {
     type: 'file',
@@ -99,11 +99,11 @@ const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) =
     },
     ExtraStoreParams: {
       AddFiles: async ( files: any[] ) => {
-        let currentFiles = useStore.get( val_status.componentID ).Files;
-        let newFiles = [];
+        let currentFiles = useStore.get( val_status.componentID ).Files
+        let newFiles = []
         for ( var i = 0; i < files?.length; i++ ) {
-          let file = files[ i ];
-          let { type,name } = file;
+          let file = files[ i ]
+          let { type,name } = file
 
           if ( i + 1 + currentFiles.length > limit ) {
             SnackBar.add( {
@@ -111,8 +111,8 @@ const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) =
               secondsToClose: 12000,
               children: `ファイル選択上限を超えたため、${ name }}は追加できません。`,
               backgroundColor: 'nega'
-            } );
-            continue;
+            } )
+            continue
           }
 
           if ( accept ) {
@@ -123,27 +123,27 @@ const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) =
                   secondsToClose: 12000,
                   children: `ファイル形式が異なるため、${ name } は追加できません。`,
                   backgroundColor: 'nega'
-                } );
-                continue;
+                } )
+                continue
               }
             }
           }
-          newFiles.push( file );
+          newFiles.push( file )
         }
         set_status( {
           ...val_status,
           dataValue: [ ...currentFiles,...newFiles ],
           eventType: 'update',
           eventID: $.uuidGen(),
-        } );
+        } )
       }
     }
-  } );
+  } )
 
-  let Accept = '';
+  let Accept = ''
   if ( accept ) {
-    if ( accept == 'image' ) Accept = 'image/png,image/jpeg';
-    else Accept = accept;
+    if ( accept == 'image' ) Accept = 'image/png,image/jpeg'
+    else Accept = accept
   }
 
   return <BoxWrapper
@@ -162,13 +162,13 @@ const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) =
       accept={ Accept }
       multiple={ limit == 1 ? false : true }
       onChange={ async ( event ) => {
-        let Input = event.target;
-        let files = Input.files as any;
-        let newFiles = [];
+        let Input = event.target
+        let files = Input.files as any
+        let newFiles = []
         for ( var i = 0; i < files?.length; i++ ) {
-          let file = files[ i ];
-          let fileName = file.name;
-          file.id = $.uuidGen();
+          let file = files[ i ]
+          let fileName = file.name
+          file.id = $.uuidGen()
 
           if ( i + 1 + val_status.dataValue.length > limit ) {
             SnackBar.add( {
@@ -176,18 +176,18 @@ const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) =
               secondsToClose: 12000,
               children: `ファイル登録数を超えたため、${ fileName }}は追加できませんでした。`,
               backgroundColor: 'nega'
-            } );
-            continue;
+            } )
+            continue
           }
-          newFiles.push( file );
+          newFiles.push( file )
         }
         set_status( {
           ...val_status,
           dataValue: [ ...val_status.dataValue,...newFiles ],
           eventType: 'update',
           eventID: $.uuidGen(),
-        } );
-        Input.value = '';
+        } )
+        Input.value = ''
       } }
       { ...others }
       tabIndex={ -1 }
@@ -199,7 +199,7 @@ const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) =
       val_status={ val_status }
       set_status={ set_status }
     /> : null }
-  </BoxWrapper>;
+  </BoxWrapper>
 }
 
 const FileList: React.FC<{
@@ -213,8 +213,8 @@ const FileList: React.FC<{
     params,
     val_status,
     set_status
-  } = props;
-  let Left = ( params.limit || 1 ) - val_status.dataValue.length;
+  } = props
+  let Left = ( params.limit || 1 ) - val_status.dataValue.length
 
   let Files = files.map( ( file,index ) => {
     return <FileCell
@@ -225,8 +225,8 @@ const FileList: React.FC<{
       val_status={ val_status }
       set_status={ set_status }
       fileNameEdit={ params.fileNameEdit }
-    />;
-  } );
+    />
+  } )
 
   if ( Left > 0 ) {
     Files.push( <label
@@ -236,10 +236,10 @@ const FileList: React.FC<{
       htmlFor={ params.id }
       tabIndex={ params.tabIndex }
       onKeyDown={ ( event ) => {
-        let { key } = event;
+        let { key } = event
         if ( params.tabIndex != -1 ) {
           if ( [ ' ','Enter' ].includes( key ) ) {
-            $( '#' + params.id ).click();
+            $( '#' + params.id ).click()
           }
         }
       } }
@@ -276,14 +276,14 @@ const FileList: React.FC<{
           </Box>
         </Box>
       </Row.Center>
-    </label> );
+    </label> )
   }
 
   return <Column
     flexSizing={ 'auto' }
     className={ params.className }
     children={ Files }
-  />;
+  />
 }
 
 const FileCell: React.FC<{
@@ -301,54 +301,54 @@ const FileCell: React.FC<{
     val_status,
     set_status,
     fileNameEdit = true
-  } = props;
+  } = props
   let {
     name: fileName,
     size,
     type,
-  } = file;
+  } = file
 
-  let [ val_edit,set_edit ] = React.useState( false );
-  let FileID = $.uuidGen();
-  let Size = size.rank();
+  let [ val_edit,set_edit ] = React.useState( false )
+  let FileID = $.uuidGen()
+  let Size = size.rank()
   let [ name,extension ] = fileName
     .replace( /\s/,'' )
-    .replace( /(.*)\.(.*)$/,'$1 $2' ).split( ' ' );
+    .replace( /(.*)\.(.*)$/,'$1 $2' ).split( ' ' )
 
-  let FileName = 'ファイル';
+  let FileName = 'ファイル'
   if ( type.match( /image/ ) ) {
-    FileName = type.replace( /image\//,'' );
+    FileName = type.replace( /image\//,'' )
   } else if ( type.match( /pdf/ ) ) {
-    FileName = 'PDF';
+    FileName = 'PDF'
   } else if ( type.match( /csv/ ) ) {
-    FileName = 'CSV';
+    FileName = 'CSV'
   } else if ( type.match( /spreadsheet/ ) ) {
-    FileName = 'SpreadSheet';
+    FileName = 'SpreadSheet'
   } else if ( type.match( /presentation/ ) ) {
-    FileName = 'PowerPoint';
+    FileName = 'PowerPoint'
   } else if ( type.match( /word/ ) ) {
-    FileName = 'Word';
+    FileName = 'Word'
   } else if ( type.match( /zip/ ) ) {
-    FileName = 'Zip';
+    FileName = 'Zip'
   } else if ( type.match( /powerpoint/ ) ) {
-    FileName = 'PowerPoint';
+    FileName = 'PowerPoint'
   } else if ( type.match( /html/ ) ) {
-    FileName = 'HTML';
+    FileName = 'HTML'
   } else if ( type.match( /js/ ) ) {
-    FileName = 'JavaScript';
+    FileName = 'JavaScript'
   } else if ( type.match( /css/ ) ) {
-    FileName = 'CSS';
+    FileName = 'CSS'
   } else if ( type.match( /text\/plain/ ) ) {
-    FileName = 'テキスト';
+    FileName = 'テキスト'
   }
 
   React.useEffect( () => {
     if ( val_edit ) {
       setTimeout( () => {
-        $( '#' + FileID )[ 0 ].focus();
-      },100 );
+        $( '#' + FileID )[ 0 ].focus()
+      },100 )
     }
-  },[ val_edit ] );
+  },[ val_edit ] )
 
   return <Flex
     verticalAlign='center'
@@ -378,7 +378,7 @@ const FileCell: React.FC<{
                 padding={ '1/3' }
                 ssEffectsOnActive={ 'expand' }
                 onClick={ () => {
-                  set_edit( true );
+                  set_edit( true )
                 } }
               >
                 <FAI.Pen />
@@ -406,8 +406,8 @@ const FileCell: React.FC<{
                   enableFormSubmit
                   value={ name }
                   onKeyDown={ ( event ) => {
-                    let { key } = event;
-                    if ( key == 'Escape' ) set_edit( false );
+                    let { key } = event
+                    if ( key == 'Escape' ) set_edit( false )
                   } }
                 />
                 <Box>
@@ -423,7 +423,7 @@ const FileCell: React.FC<{
                   padding={ [ '2/3',1 ] }
                   children={ '閉じる' }
                   onClick={ () => {
-                    set_edit( false );
+                    set_edit( false )
                   } }
                 />
                 <Buttons.Button.Prime.R
@@ -431,30 +431,30 @@ const FileCell: React.FC<{
                   submitOption={ {
                     formName: 'form-' + FileID,
                     callback: async ( form ) => {
-                      let { name } = form;
-                      let nextFiles = [ ...val_status.dataValue ];
-                      let prevFile = nextFiles[ index ];
-                      let id = prevFile.id;
-                      if ( !prevFile ) return;
+                      let { name } = form
+                      let nextFiles = [ ...val_status.dataValue ]
+                      let prevFile = nextFiles[ index ]
+                      let id = prevFile.id
+                      if ( !prevFile ) return
 
-                      let { target } = await prevFile.read();
-                      if ( !target ) return;
-                      let dataUrl = String( target.result );
+                      let { target } = await prevFile.read()
+                      if ( !target ) return
+                      let dataUrl = String( target.result )
 
                       let newBlob = await dataUrl.toBlob( file.type )
-                      if ( !newBlob ) return;
-                      let newFile: any = new File( [ newBlob ],name + '.' + extension,{ type: prevFile.type } );
-                      newFile.id = id;
+                      if ( !newBlob ) return
+                      let newFile: any = new File( [ newBlob ],name + '.' + extension,{ type: prevFile.type } )
+                      newFile.id = id
 
-                      nextFiles[ index ] = newFile;
+                      nextFiles[ index ] = newFile
 
                       set_status( {
                         ...val_status,
                         dataValue: nextFiles,
                         eventType: 'update',
                         eventID: $.uuidGen(),
-                      } );
-                      set_edit( false );
+                      } )
+                      set_edit( false )
                     }
                   } }
                 >
@@ -480,11 +480,11 @@ const FileCell: React.FC<{
       fontColor='4.thin'
       ssSphere={ 3 }
       onClick={ () => {
-        let nextFiles = [ ...val_status.dataValue ];
-        let prevFile = nextFiles[ index ];
-        if ( !prevFile ) return;
+        let nextFiles = [ ...val_status.dataValue ]
+        let prevFile = nextFiles[ index ]
+        if ( !prevFile ) return
 
-        nextFiles.splice( index,1 );
+        nextFiles.splice( index,1 )
         set_status( {
           ...val_status,
           dataValue: nextFiles,
@@ -495,15 +495,15 @@ const FileCell: React.FC<{
     >
       <FAI.Times />
     </Buttons.Button.Sub.R>
-  </Flex>;
+  </Flex>
 }
 
 $.fnScope( async () => {
   $( document ).addEvent( {
     eventType: 'dragover',
     callback: ( event ) => {
-      event.preventDefault();
-      $( '.' + style.AddButton ).addClass( style.Draggable );
+      event.preventDefault()
+      $( '.' + style.AddButton ).addClass( style.Draggable )
     },
     option: {
       passive: false
@@ -511,21 +511,21 @@ $.fnScope( async () => {
   } ).addEvent( {
     eventType: 'drop',
     callback: ( event: any ) => {
-      event.preventDefault();
-      $( '.' + style.AddButton ).removeClass( style.Draggable );
-      let Files = event.dataTransfer.files;
+      event.preventDefault()
+      $( '.' + style.AddButton ).removeClass( style.Draggable )
+      let Files = event.dataTransfer.files
       if ( Files.length ) {
-        let Target = event.target as HTMLElement;
+        let Target = event.target as HTMLElement
         if ( $( Target ).hasClass( style.AddButton ) ) {
-          let { componentId } = Target.dataset;
-          let component = useStore.get( componentId! );
-          if ( component && component.AddFiles ) component.AddFiles( Files );
+          let { componentId } = Target.dataset
+          let component = useStore.get( componentId! )
+          if ( component && component.AddFiles ) component.AddFiles( Files )
         }
       }
     },
     option: { passive: false }
-  } );
-} );
+  } )
+} )
 
 const FileInput: amotify.fn.Input.Filer.Methods = FileComponent as any
 FileInput.fn = {
@@ -533,21 +533,21 @@ FileInput.fn = {
     let {
       multiple,
       accept
-    } = params;
+    } = params
 
     return new Promise( resolve => {
-      const input = document.createElement( 'input' );
-      input.type = 'file';
-      input.multiple = multiple ?? true;
+      const input = document.createElement( 'input' )
+      input.type = 'file'
+      input.multiple = multiple ?? true
       if ( accept ) {
-        if ( accept == 'image' ) input.accept = 'image/png,image/jpeg';
-        else input.accept = accept;
+        if ( accept == 'image' ) input.accept = 'image/png,image/jpeg'
+        else input.accept = accept
       }
       input.onchange = ( event: any ) => {
-        resolve( event.target.files );
-      };
-      input.click();
-    } );
+        resolve( event.target.files )
+      }
+      input.click()
+    } )
   }
 }
 export { FileInput }

package/src/functions/Input/Hidden.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React from 'react'
 export const HiddenInput: React.FC<amotify.fn.Input.Hidden.PlainParams> = ( params ) => {
   let {
     componentID = '',
@@ -7,7 +7,7 @@ export const HiddenInput: React.FC<amotify.fn.Input.Hidden.PlainParams> = ( para
     form,
     value = '',
     ...others
-  } = params;  
+  } = params  
 
   return <input
     value={ JSON.stringify( value ) }
@@ -17,5 +17,5 @@ export const HiddenInput: React.FC<amotify.fn.Input.Hidden.PlainParams> = ( para
     data-value={ JSON.stringify( value ) }
     { ...others }
     type='hidden'
-  />;
+  />
 }