amotify 0.0.17 → 0.0.18

package/src/functions/Effects/Fade.tsx

@@ -30,14 +30,14 @@ export const FadeEffects: amotify.fn.Effects.Methods = {
       },animationDelay );
     },[] );
 
-    return ( <Box
+    return <Box
       { ...others }
       freeCSS={ {
         ...others.freeCSS,
         opacity: 0,
       } }
       componentID={ val_componentID }
-    /> );
+    />;
   },
   FadeUp: ( params ) => {
     let {
@@ -63,7 +63,7 @@ export const FadeEffects: amotify.fn.Effects.Methods = {
       },animationDelay );
     },[] );
 
-    return ( <Box
+    return <Box
       paddingTop={ 2 }
       { ...others }
       freeCSS={ {
@@ -71,6 +71,6 @@ export const FadeEffects: amotify.fn.Effects.Methods = {
         opacity: 0,
       } }
       componentID={ val_componentID }
-    /> );
+    />;
   }
 }

package/src/functions/Effects/style.module.scss

@@ -8,7 +8,7 @@
     &.Color_ {
       &white .RippleWrap {}
       &cloud .RippleWrap .Wave {
-        background-color: rgba(var(--color-dark-rgb), .4) !important;
+        background-color: rgba(var(--color-dark-rgb), .25) !important;
       }
       &theme .RippleWrap .Wave {
         background-color: $color-theme-lighter !important;
@@ -79,5 +79,13 @@
       transition: $animation-time-short;
       transform: scale(0.97);
     }
+    &push {
+      &:active {
+        box-shadow: $shadow2 inset, 0 0 0 transparent !important;
+      }
+      &:focus {
+        box-shadow: 0 0 0 transparent inset, $shadow3;
+      }
+    }
   }
 }

package/src/functions/Input/Chips/Selector.tsx

@@ -238,7 +238,7 @@ const Selector = ( params: {
     ];
   }
 
-  return ( <>
+  return <>
     <Column
       padding={ '2/3' }
       gap={ '2/3' }
@@ -364,7 +364,7 @@ const Selector = ( params: {
       { List }
     </Column>
     { params.bottomContent }
-  </> );
+  </>;
 }
 
 export const ChipsInputFNs: amotify.fn.Input.Chips.FNs = {

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

@@ -56,7 +56,7 @@ const DataWrapping: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) =>
   let DefaultValues = [ ...( params.value || [] ) ];
   let Values = DefaultValues.splice( 0,params.limit || 65535 );
 
-  return ( <Core
+  return <Core
     SelectedCellComponent={ ( params ) => {
       let {
         value,
@@ -91,7 +91,7 @@ const DataWrapping: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) =>
     } }
     { ...params }
     value={ Values }
-  /> );
+  />;
 }
 
 const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
@@ -229,7 +229,7 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
     />
   } );
 
-  return ( <BoxWrapper
+  return <BoxWrapper
     val_status={ val_status }
     set_status={ set_status }
     val_validate={ val_validate }
@@ -280,7 +280,7 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
       /> : null }
       { Selected }
     </button>
-  </BoxWrapper> );
+  </BoxWrapper>;
 }
 
 const ChipsInput: amotify.fn.Input.Chips.Methods = DataWrapping as any;

package/src/functions/Input/DigitCharacters.tsx

@@ -207,7 +207,7 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
     /> );
   }
 
-  return ( <BoxWrapper
+  return <BoxWrapper
     val_status={ val_status }
     set_status={ set_status }
     val_validate={ val_validate }
@@ -231,5 +231,5 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
     >
       { Digits }
     </Flex>
-  </BoxWrapper> );
+  </BoxWrapper>;
 }

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

@@ -146,62 +146,60 @@ const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) =
     else Accept = accept;
   }
 
-  return (
-    <BoxWrapper
+  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 }
-      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>
-  );
+    /> : null }
+  </BoxWrapper>;
 }
 
 const FileList: React.FC<{
@@ -219,17 +217,15 @@ const FileList: React.FC<{
   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 }
-      />
-    );
+    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 ) {
@@ -282,12 +278,11 @@ const FileList: React.FC<{
     )
   }
 
-  return ( <Column
+  return <Column
     flexSizing={ 'auto' }
     className={ params.className }
     children={ Files }
-  />
-  );
+  />;
 }
 
 const FileCell: React.FC<{
@@ -354,155 +349,153 @@ const FileCell: React.FC<{
     }
   },[ 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 );
+  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'
                   } }
-                >
-                  <FAI.Pen />
-                </Buttons.Button.Clear.R> : null
-              }
-            </> : <>
-              <Column
-                gap={ '1/2' }
-                flexSizing={ 0 }
+                  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 }
               >
-                <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={ () => {
+                <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
-                    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={ FileName + 'ファイル / ' + Size + 'B' }
-          />
-        </> : null }
+                    }
+                  } }
+                >
+                  決定
+                </Buttons.Button.Prime.R>
+              </Flex>
+            </Column>
+          </>
+          }
+        />
       </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>
-  );
+      { !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>;
 }
 
 

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

@@ -129,7 +129,7 @@ const Core: React.FC<amotify.fn.Input.List.OriginParams> = ( params ) => {
     DefaultValidation
   } );
 
-  return ( <BoxWrapper
+  return <BoxWrapper
     val_status={ val_status }
     set_status={ set_status }
     val_validate={ val_validate }
@@ -148,7 +148,7 @@ const Core: React.FC<amotify.fn.Input.List.OriginParams> = ( params ) => {
       val_status={ val_status }
       set_status={ set_status }
     />
-  </BoxWrapper> );
+  </BoxWrapper>;
 }
 
 const CellList: React.FC<{
@@ -332,7 +332,7 @@ const CellList: React.FC<{
     ];
   } );
 
-  return ( <Flex
+  return <Flex
     flexSizing={ 'auto' }
     freeCSS={ {
       ...params.freeCSS
@@ -345,7 +345,7 @@ const CellList: React.FC<{
       style[ 'Tone_' + tone ]
     ].join( ' ' ) }
     children={ Cells }
-  /> );
+  />;
 }
 
 const Comps = {