amotify 0.0.4 → 0.0.5

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

@@ -1,596 +0,0 @@
-import {
-  useStore
-} from '@global';
-const {
-  useEffect,
-  useState
-} = React;
-import {
-  Box,
-  Flex,
-  FAIcon
-} from '@atoms';
-import {
-  Column,
-  Row,
-  Text
-} from '@mols';
-import {
-  Input,
-  Buttons,
-  SnackBar
-} from '@functions';
-
-import {
-  BoxWrapper,
-  SubmitForm,
-  ValidationCheck,
-  CommonEffects
-} from '../core';
-import style from './style.module.scss';
-
-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: FNC<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,
-
-    ...others
-  } = params;
-
-  let Default_Status: amotify.fn.Input.Status.Plain = {
-    componentID: params.componentID || '',
-    dataValue: value,
-    eventType: 'init',
-    eventID: $.uuidGen()
-  }
-  let [ val_status,set_status ] = useState( Default_Status );
-  let [ val_validate,set_validate ] = 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: FNC<{
-  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(
-      <Buttons.Label.Plain
-        key={ 'AddButton' }
-        className={ [ params.cellClassName,style.AddButton ].join( ' ' ) }
-        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 }
-          >
-            <FAIcon
-              d={ 'cloud-arrow-up' }
-              className={ style.Icon }
-              fontColor={ 'theme' }
-              backgroundColor={ 'tcOpLow' }
-              padding={ 0 }
-              unitWidth={ 4 }
-              unitHeight={ 4 }
-              isRounded
-            />
-          </Box>
-          <Box>
-            <Box
-              children={ 'ファイルを選択' + `（${ Left }）` }
-              fontColor={ 'theme' }
-              fontSize={ '2.normal' }
-              isBoldFont
-            />
-            <Box
-              children={ 'または、ファイルをドロップ' }
-              fontColor={ '4.thin' }
-              fontSize={ '0.xs' }
-            />
-          </Box>
-        </Row.Center>
-      </Buttons.Label.Plain>
-    )
-  }
-
-  return ( <Column
-    flexSizing={ 'auto' }
-    className={ params.className }
-    children={ Files }
-  />
-  );
-}
-
-const FileCell: FNC<{
-  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 ] = useState( false );
-  let FileID = $.uuidGen();
-  let Size = size.rank();
-  let [ name,extension ] = fileName
-    .replace( /\s/,'' )
-    .replace( /(.*)\.(.*)$/,'$1 $2' ).split( ' ' );
-
-  let FileType = {
-    name: '不明',
-    icon: 'fal file'
-  }
-  if ( type.match( /image/ ) ) {
-    FileType = {
-      name: type.replace( /image\//,'' ),
-      icon: 'image'
-    }
-  } else if ( type.match( /pdf/ ) ) {
-    FileType = {
-      name: 'PDF',
-      icon: 'file-pdf'
-    }
-  } else if ( type.match( /csv/ ) ) {
-    FileType = {
-      name: 'CSV',
-      icon: 'file-csv'
-    }
-  } else if ( type.match( /spreadsheet/ ) ) {
-    FileType = {
-      name: 'SpreadSheet',
-      icon: 'file-excel'
-    }
-  } else if ( type.match( /presentation/ ) ) {
-    FileType = {
-      name: 'PowerPoint',
-      icon: 'file-powerpoint'
-    }
-  } else if ( type.match( /word/ ) ) {
-    FileType = {
-      name: 'Word',
-      icon: 'file-word'
-    }
-  } else if ( type.match( /zip/ ) ) {
-    FileType = {
-      name: 'Zip',
-      icon: 'file-zipper'
-    }
-  } else if ( type.match( /powerpoint/ ) ) {
-    FileType = {
-      name: 'PowerPoint',
-      icon: 'file-powerpoint'
-    }
-  } else if ( type.match( /html/ ) ) {
-    FileType = {
-      name: 'HTML',
-      icon: 'fab html5'
-    }
-  } else if ( type.match( /js/ ) ) {
-    FileType = {
-      name: 'JS',
-      icon: 'fab js-square'
-    }
-  } else if ( type.match( /css/ ) ) {
-    FileType = {
-      name: 'CSS',
-      icon: 'fab css3-alt'
-    }
-  } else if ( type.match( /text\/plain/ ) ) {
-    FileType = {
-      name: 'テキスト',
-      icon: 'file-lines'
-    }
-  }
-
-  useEffect( () => {
-    if ( val_edit ) {
-      setTimeout( () => {
-        $( '#' + FileID )[ 0 ].focus();
-      },100 );
-    }
-  },[ val_edit ] );
-
-  return (
-    <Flex
-      verticalAlign='center'
-      flexWrap={ false }
-      gap={ 1 }
-      className={ className }
-    >
-      <FAIcon
-        fontSize={ '4.thirdTitle' }
-        fontColor={ 'theme' }
-        d={ FileType.icon }
-      />
-      <Box flexSizing={ 0 }>
-        <Box>
-          <Flex
-            verticalAlign='center'
-            gap={ '2/3' }
-            flexWrap={ false }
-            className={ style.FileName }
-            children={ !val_edit ? <>
-              { fileName }
-              { fileNameEdit ?
-                <Buttons.Button.Clear.R
-                  padding={ '1/3' }
-                  ssEffectsOnActive={ 'expand' }
-                  children={ <FAIcon d='pen' /> }
-                  onClick={ () => {
-                    set_edit( true );
-                  } }
-                /> : 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,
-                      submitDelegationKey: 'auxEnter',
-                      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={ FileType.name + 'ファイル / ' + Size + 'B' }
-          />
-        </> : null }
-      </Box>
-      <Buttons.Button.Sub.R
-        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(),
-          } )
-        } }
-      >
-        <FAIcon.Times />
-      </Buttons.Button.Sub.R>
-    </Flex>
-  );
-}
-
-
-( 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 { inputComponentId } = Target.dataset;
-          let component = useStore.get( inputComponentId! );
-          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 '@uniVar' 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,18 +0,0 @@
-export const HiddenInput: FNC<amotify.fn.Input.Hidden.PlainParams> = ( params ) => {
-  let {
-    componentID = '',
-    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'
-  /> );
-}