amotify 0.0.6 → 0.0.8

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

@@ -0,0 +1,596 @@
+import {
+  useStore
+} from '~/Global/@export';
+const {
+  useEffect,
+  useState
+} = React;
+import {
+  Box,
+  Flex,
+  FAIcon
+} from '~/Atoms/@export';
+import {
+  Column,
+  Row,
+  Text
+} from '~/Molecules/@export';
+import {
+  Input,
+  Buttons,
+  SnackBar
+} from '~/Functions/@export';
+
+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

@@ -0,0 +1,34 @@
+@use 'src/@styles/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

@@ -0,0 +1,18 @@
+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'
+  /> );
+}