amotify 0.0.64 → 0.0.66

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

@@ -1,553 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  Box,
-  Flex,
-  FAI
-} from '@atoms'
-import {
-  Column,
-  Row,
-  Text
-} from '@mols'
-import {
-  Input,
-  Buttons,
-  SnackBar
-} from '@fn'
-
-import {
-  BoxWrapper,
-  SubmitForm,
-  ValidationCheck,
-  CommonEffects
-} from '../core'
-import style from './style.module.scss'
-
-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[] = []
-
-  if ( required && !value.length ) {
-    notice.push( { type: 'invalid',label: '必須項目です' } )
-  }
-
-  return {
-    ok: !notice.filter( ( { type } ) => type == 'invalid' ).length,
-    notice: notice
-  }
-}
-
-const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) => {
-  let {
-    tone,
-    required,
-    form,
-
-    fileNameEdit = true,
-    systemOnly = false,
-    accept = '*',
-    limit = 1,
-
-    checkValidationAtFirst,
-    onChange,
-    onValidate,
-    onUpdateValue,onUpdateValidValue,
-    value = [],
-    className,
-
-    cellStyles,cellClassName,
-
-    componentID,status_id,
-    enableFormSubmit,
-
-    ...others
-  } = params
-
-  let Default_Status: amotify.fn.Input.Status.Plain = {
-    componentID: params.componentID || '',
-    dataValue: value,
-    eventType: 'init',
-    eventID: $.uuidGen()
-  }
-  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 )
-
-  CommonEffects( {
-    type: 'file',
-    params,
-    val_status,
-    set_status,
-    val_validate,
-    set_validate,
-    DefaultValidation,
-    onUpdateValue,onUpdateValidValue,
-    ExtraOverrideParams: {
-      dataValue: value,
-      formatValue: value,
-    },
-    ExtraStoreParams: {
-      AddFiles: async ( files: any[] ) => {
-        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
-
-          if ( i + 1 + currentFiles.length > limit ) {
-            SnackBar.add( {
-              componentID: name,
-              secondsToClose: 12000,
-              children: `ファイル選択上限を超えたため、${ name }}は追加できません。`,
-              backgroundColor: 'nega'
-            } )
-            continue
-          }
-
-          if ( accept ) {
-            if ( accept == 'image' ) {
-              if ( !type.match( /image/ ) ) {
-                SnackBar.add( {
-                  componentID: name,
-                  secondsToClose: 12000,
-                  children: `ファイル形式が異なるため、${ name } は追加できません。`,
-                  backgroundColor: 'nega'
-                } )
-                continue
-              }
-            }
-          }
-          newFiles.push( file )
-        }
-        set_status( {
-          ...val_status,
-          dataValue: [ ...currentFiles,...newFiles ],
-          eventType: 'update',
-          eventID: $.uuidGen(),
-        } )
-      }
-    }
-  } )
-
-  let Accept = ''
-  if ( accept ) {
-    if ( accept == 'image' ) Accept = 'image/png,image/jpeg'
-    else Accept = accept
-  }
-
-  return <BoxWrapper
-    val_status={ val_status }
-    set_status={ set_status }
-    val_validate={ val_validate }
-    params={ params }
-  >
-    <input
-      type='file'
-      className={ style.Input }
-      data-form={ form }
-      data-input-type={ 'file' }
-      data-component-id={ val_status.componentID }
-      data-validation={ val_validate.ok }
-      accept={ Accept }
-      multiple={ limit == 1 ? false : true }
-      onChange={ async ( event ) => {
-        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()
-
-          if ( i + 1 + val_status.dataValue.length > limit ) {
-            SnackBar.add( {
-              componentID: fileName,
-              secondsToClose: 12000,
-              children: `ファイル登録数を超えたため、${ fileName }}は追加できませんでした。`,
-              backgroundColor: 'nega'
-            } )
-            continue
-          }
-          newFiles.push( file )
-        }
-        set_status( {
-          ...val_status,
-          dataValue: [ ...val_status.dataValue,...newFiles ],
-          eventType: 'update',
-          eventID: $.uuidGen(),
-        } )
-        Input.value = ''
-      } }
-      { ...others }
-      tabIndex={ -1 }
-      value={ '' }
-    />
-    { !systemOnly ? <FileList
-      files={ val_status.dataValue }
-      params={ params }
-      val_status={ val_status }
-      set_status={ set_status }
-    /> : null }
-  </BoxWrapper>
-}
-
-const FileList: React.FC<{
-  files: File[]
-  params: amotify.fn.Input.Filer.PlainParams
-  val_status: amotify.fn.Input.Status.Plain
-  set_status: React.Dispatch<React.SetStateAction<amotify.fn.Input.Status.Plain>>
-}> = ( props ) => {
-  let {
-    files,
-    params,
-    val_status,
-    set_status
-  } = props
-  let Left = ( params.limit || 1 ) - val_status.dataValue.length
-
-  let Files = files.map( ( file,index ) => {
-    return <FileCell
-      key={ file.name }
-      index={ index }
-      file={ file }
-      className={ params.cellClassName }
-      val_status={ val_status }
-      set_status={ set_status }
-      fileNameEdit={ params.fileNameEdit }
-    />
-  } )
-
-  if ( Left > 0 ) {
-    Files.push( <label
-      key={ 'AddButton' }
-      className={ [ params.cellClassName,style.AddButton ].join( ' ' ) }
-      data-component-id={ val_status.componentID }
-      htmlFor={ params.id }
-      tabIndex={ params.tabIndex }
-      onKeyDown={ ( event ) => {
-        let { key } = event
-        if ( params.tabIndex != -1 ) {
-          if ( [ ' ','Enter' ].includes( key ) ) {
-            $( '#' + params.id ).click()
-          }
-        }
-      } }
-    >
-      <Row.Center
-        padding={ [ '1/3',0 ] }
-      >
-        <Box
-          isRounded
-          className={ style.AddIcon }
-        >
-          <FAI
-            icon={ faCloudArrowUp }
-            className={ style.Icon }
-            fontColor={ 'theme' }
-            fontSize='4.thirdTitle'
-            backgroundColor={ 'tcOpLow' }
-            ssSphere={ 4 }
-          />
-        </Box>
-        <Box>
-          <Box
-            children={ 'ファイルを選択' + `（${ Left }）` }
-            fontColor={ 'theme' }
-            fontSize={ '2.normal' }
-            isSemiBoldFont
-          />
-          <Box
-            isSemiBoldFont
-            fontColor={ '4.thin' }
-            fontSize={ '0.xs' }
-          >
-            ファイルをドロップ
-          </Box>
-        </Box>
-      </Row.Center>
-    </label> )
-  }
-
-  return <Column
-    flexSizing={ 'auto' }
-    className={ params.className }
-    children={ Files }
-  />
-}
-
-const FileCell: React.FC<{
-  index: number
-  file: File
-  className?: string
-  val_status: amotify.fn.Input.Status.Plain
-  set_status: React.Dispatch<React.SetStateAction<amotify.fn.Input.Status.Plain>>
-  fileNameEdit?: boolean
-}> = ( props ) => {
-  let {
-    index,
-    file,
-    className,
-    val_status,
-    set_status,
-    fileNameEdit = true
-  } = props
-  let {
-    name: fileName,
-    size,
-    type,
-  } = file
-
-  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( ' ' )
-
-  let FileName = 'ファイル'
-  if ( type.match( /image/ ) ) {
-    FileName = type.replace( /image\//,'' )
-  } else if ( type.match( /pdf/ ) ) {
-    FileName = 'PDF'
-  } else if ( type.match( /csv/ ) ) {
-    FileName = 'CSV'
-  } else if ( type.match( /spreadsheet/ ) ) {
-    FileName = 'SpreadSheet'
-  } else if ( type.match( /presentation/ ) ) {
-    FileName = 'PowerPoint'
-  } else if ( type.match( /word/ ) ) {
-    FileName = 'Word'
-  } else if ( type.match( /zip/ ) ) {
-    FileName = 'Zip'
-  } else if ( type.match( /powerpoint/ ) ) {
-    FileName = 'PowerPoint'
-  } else if ( type.match( /html/ ) ) {
-    FileName = 'HTML'
-  } else if ( type.match( /js/ ) ) {
-    FileName = 'JavaScript'
-  } else if ( type.match( /css/ ) ) {
-    FileName = 'CSS'
-  } else if ( type.match( /text\/plain/ ) ) {
-    FileName = 'テキスト'
-  }
-
-  React.useEffect( () => {
-    if ( val_edit ) {
-      setTimeout( () => {
-        $( '#' + FileID )[ 0 ].focus()
-      },100 )
-    }
-  },[ val_edit ] )
-
-  return <Flex
-    verticalAlign='center'
-    flexWrap={ false }
-    gap={ 1 }
-    className={ className }
-  >
-    <FAI.File
-      fontSize={ '4.thirdTitle' }
-      fontColor={ '4.thin' }
-    />
-    <Box flexSizing={ 0 }>
-      <Box>
-        <Flex
-          verticalAlign='center'
-          gap={ '2/3' }
-          flexWrap={ false }
-          className={ style.FileName }
-          children={ !val_edit ? <>
-            { fileName }
-            { fileNameEdit ?
-              <Buttons.Button.Clear.R
-                ssSphere={ 2.5 }
-                flexSizing={ 'none' }
-                color='cloud'
-                fontColor='4.thin'
-                padding={ '1/3' }
-                ssEffectsOnActive={ 'expand' }
-                onClick={ () => {
-                  set_edit( true )
-                } }
-              >
-                <FAI.Pen />
-              </Buttons.Button.Clear.R> : null
-            }
-          </> : <>
-            <Column
-              gap={ '1/2' }
-              flexSizing={ 0 }
-            >
-              <Flex
-                gap={ '2/3' }
-                verticalAlign='center'
-              >
-                <Input.Text.Normal
-                  tone='border'
-                  wrapStyles={ {
-                    flexSizing: 'auto'
-                  } }
-                  restrict='fileName'
-                  name='name'
-                  required
-                  id={ FileID }
-                  form={ 'form-' + FileID }
-                  enableFormSubmit
-                  value={ name }
-                  onKeyDown={ ( event ) => {
-                    let { key } = event
-                    if ( key == 'Escape' ) set_edit( false )
-                  } }
-                />
-                <Box>
-                  . { extension }
-                </Box>
-              </Flex>
-              <Flex
-                gap={ '2/3' }
-                horizontalAlign='right'
-                flexWrap={ false }
-              >
-                <Buttons.Button.Sub.R
-                  padding={ [ '2/3',1 ] }
-                  children={ '閉じる' }
-                  onClick={ () => {
-                    set_edit( false )
-                  } }
-                />
-                <Buttons.Button.Prime.R
-                  padding={ [ '2/3',1 ] }
-                  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 { 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
-
-                      nextFiles[ index ] = newFile
-
-                      set_status( {
-                        ...val_status,
-                        dataValue: nextFiles,
-                        eventType: 'update',
-                        eventID: $.uuidGen(),
-                      } )
-                      set_edit( false )
-                    }
-                  } }
-                >
-                  決定
-                </Buttons.Button.Prime.R>
-              </Flex>
-            </Column>
-          </>
-          }
-        />
-      </Box>
-      { !val_edit ? <>
-        <Box
-          fontSize={ '1.mini' }
-          fontColor={ '4.thin' }
-          flexSizing={ 0 }
-          children={ FileName + 'ファイル / ' + Size + 'B' }
-        />
-      </> : null }
-    </Box>
-    <Buttons.Button.Sub.R
-      color='cloud'
-      fontColor='4.thin'
-      ssSphere={ 3 }
-      onClick={ () => {
-        let nextFiles = [ ...val_status.dataValue ]
-        let prevFile = nextFiles[ index ]
-        if ( !prevFile ) return
-
-        nextFiles.splice( index,1 )
-        set_status( {
-          ...val_status,
-          dataValue: nextFiles,
-          eventType: 'update',
-          eventID: $.uuidGen(),
-        } )
-      } }
-    >
-      <FAI.Times />
-    </Buttons.Button.Sub.R>
-  </Flex>
-}
-
-$.fnScope( async () => {
-  $( document ).addEvent( {
-    eventType: 'dragover',
-    callback: ( event ) => {
-      event.preventDefault()
-      $( '.' + style.AddButton ).addClass( style.Draggable )
-    },
-    option: {
-      passive: false
-    }
-  } ).addEvent( {
-    eventType: 'drop',
-    callback: ( event: any ) => {
-      event.preventDefault()
-      $( '.' + style.AddButton ).removeClass( style.Draggable )
-      let Files = event.dataTransfer.files
-      if ( Files.length ) {
-        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 )
-        }
-      }
-    },
-    option: { passive: false }
-  } )
-} )
-
-const FileInput: amotify.fn.Input.Filer.Methods = FileComponent as any
-FileInput.fn = {
-  openDialog: ( params ) => {
-    let {
-      multiple,
-      accept
-    } = params
-
-    return new Promise( resolve => {
-      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
-      }
-      input.onchange = ( event: any ) => {
-        resolve( event.target.files )
-      }
-      input.click()
-    } )
-  }
-}
-export { FileInput }

package/src/functions/Input/File/style.module.scss

@@ -1,34 +0,0 @@
-@use '@props' as *;
-
-.Input:focus {
-  + .List .AddButton {
-    background-color: $color-layer3;
-  }
-}
-.FileName {
-  word-break: break-all;
-}
-.AddButton {
-  transition: $animation-time-middle;
-  > * {
-    pointer-events: none;
-  }
-  &:hover {
-    background-color: $color-layer3;
-  }
-  &.Draggable {
-    background-color: $color-layer3;
-    .AddIcon {
-      animation: 1s infinite IconAnimation;
-    }
-  }
-}
-
-@keyframes IconAnimation {
-  0% {
-    box-shadow: 0 0 0 0 $color-theme;
-  }
-  100% {
-    box-shadow: 0 0 0 1rem cAlfa( 0 );
-  }
-}

package/src/functions/Input/Hidden.tsx

@@ -1,21 +0,0 @@
-import React from 'react'
-export const HiddenInput: React.FC<amotify.fn.Input.Hidden.PlainParams> = ( params ) => {
-  let {
-    componentID = '',
-    enableFormSubmit,
- 
-    form,
-    value = '',
-    ...others
-  } = params  
-
-  return <input
-    value={ JSON.stringify( value ) }
-    data-input-type={ 'hidden' }
-    data-form={ form }
-    data-component-id={ componentID }
-    data-value={ JSON.stringify( value ) }
-    { ...others }
-    type='hidden'
-  />
-}