amotify 0.0.17 → 0.0.19

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 = {

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

@@ -26,7 +26,7 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
       },
     }
 
-    return ( <Core appearance={ ( params as any ).tone || 'Auto' } { ...params } /> );
+    return <Core appearance={ ( params as any ).tone || 'Auto' } { ...params } />;
   },
   Normal: ( params ) => {
     params = { ...params };
@@ -52,7 +52,7 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
     };
     ( params as any ).tone = 'ThemeBorder';
 
-    return ( <Core appearance={ 'Border' } { ...params } /> );
+    return <Core appearance={ 'Border' } { ...params } />;
   },
   Cloud: ( params ) => {
     params = { ...params };
@@ -73,31 +73,31 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
       },
     }
 
-    return ( <Core appearance={ ( params as any ).tone || 'Cloud' } { ...params } /> );
+    return <Core appearance={ ( params as any ).tone || 'Cloud' } { ...params } />;
   },
   Cloud2: ( params ) => {
     params = { ...params };
     ( params as any ).tone = 'WhiteCloud';
-    return ( <Segmented.Cloud
+    return <Segmented.Cloud
       fontColor='3.blur'
       { ...params }
       cellCheckedStyles={ {
         fontColor: '1.clear',
         ...params.cellCheckedStyles
       } }
-    /> );
+    />;
   },
   Cloud3: ( params ) => {
     params = { ...params };
     ( params as any ).tone = 'ThemeCloud';
-    return ( <Segmented.Cloud
+    return <Segmented.Cloud
       backgroundColor='tcOpFew'
       fontColor='theme'
       { ...params }
       cellStyles={ {
         ...params.cellStyles
       } }
-    /> );
+    />;
   },
   Border: ( params ) => {
     params = { ...params };
@@ -121,7 +121,7 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
       },
     }
 
-    return ( <Core appearance={ ( params as any ).tone || 'Border' } { ...params } /> );
+    return <Core appearance={ ( params as any ).tone || 'Border' } { ...params } />;
   },
   Border2: ( params ) => {
     params = { ...params };
@@ -148,7 +148,7 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
     };
     ( params as any ).tone = 'ThemeBorder';
 
-    return ( <Core appearance={ 'Border' } { ...params } /> );
+    return <Core appearance={ 'Border' } { ...params } />;
   },
   BottomLine: ( params ) => {
     params = { ...params };
@@ -168,7 +168,7 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
       }
     }
 
-    return ( <Core appearance={ 'BottomLine' } { ...params } /> );
+    return <Core appearance={ 'BottomLine' } { ...params } />;
   },
 }
 
@@ -200,7 +200,7 @@ const Core: React.FC<CoreParams> = ( params ) => {
     set_value( value );
   }
 
-  return ( <ListInputs.Radio
+  return <ListInputs.Radio
     // hideInput
     defaultActiveStyling={ false }
     flexWrap={ false }
@@ -242,5 +242,5 @@ const Core: React.FC<CoreParams> = ( params ) => {
         set_value( args.value[ 0 ] );
       }
     } }
-  /> );
+  />;
 }

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

@@ -69,12 +69,11 @@ export const SelectInput: React.FC<amotify.fn.Input.Select.PlainParams> = ( para
   if ( !SelectedExist ) value = null;
   let DefaultValue = JSON.stringify( value );
 
-  return ( <Core
+  return <Core
     { ...params }
     value={ DefaultValue }
     options={ DefaultOptions }
-  />
-  );
+  />;
 }
 
 const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
@@ -136,7 +135,7 @@ const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
     if ( Selected ) SelectedElement = Selected.displayLabel ?? Selected.label;
   }
 
-  return ( <BoxWrapper
+  return <BoxWrapper
     val_status={ val_status }
     set_status={ set_status }
     val_validate={ val_validate }
@@ -182,7 +181,7 @@ const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
         <Options params={ params } />
       </select>
     </Box>
-  </BoxWrapper> );
+  </BoxWrapper>;
 }
 
 const Options: React.FC<{ params: amotify.fn.Input.Select.PlainParams }> = ( props ) => {
@@ -217,7 +216,7 @@ const Options: React.FC<{ params: amotify.fn.Input.Select.PlainParams }> = ( pro
     /> );
   }
 
-  return ( <>
+  return <>
     { Options }
-  </> );
+  </>;
 }

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

@@ -252,7 +252,7 @@ const Comps = {
       }
     },[] );
 
-    return ( <Flex
+    return <Flex
       className={ style.Labels }
       verticalAlign='center'
       horizontalAlign='between'
@@ -269,7 +269,7 @@ const Comps = {
         bottom={ 0 }
         children={ Labels }
       />
-    </Flex> );
+    </Flex>;
   },
   Rail: ( props: {
     color: amotify.fn.Input.Slider.ColorTypes
@@ -290,7 +290,7 @@ const Comps = {
       componentID
     } = val_status;
 
-    return ( <Flex
+    return <Flex
       className={ style.Rail }
       position='relative'
       paddingLeft={ '1/2' }
@@ -379,7 +379,7 @@ const Comps = {
           } }
         />
       </Box>
-    </Flex> );
+    </Flex>;
   }
 }