amotify 0.0.17 → 0.0.19

package/src/functions/Cropper/parts.tsx

@@ -765,7 +765,7 @@ const Comps: {
       }
     },[ val_grayScale,val_tone,val_rotate ] );
 
-    return ( <Sheet.Comps.Body>
+    return <Sheet.Comps.Body>
       <Flex
         className={ [ style.Wrap,'Use_' + use ].join( ' ' ) }
         flexWrap={ false }
@@ -883,7 +883,7 @@ const Comps: {
           </Flex>
         </Column>
       </Flex>
-    </Sheet.Comps.Body> );
+    </Sheet.Comps.Body>;
   },
   SettingRegion: ( params ) => {
     let ToneList: amotify.fn.Input.List.OptionParams[] = [];
@@ -907,126 +907,124 @@ const Comps: {
       } );
     }
 
-    return (
-      <>
-        <Column gap={ '1/3' } >
-          <Box>
-            <FAI.Rotate
-              fontSize='3.paragraph'
-              fontColor='4.thin'
-            /> Rotate
-          </Box>
-          <Row.Separate
-            flexChilds='even'
-            paddingLeft={ 2 }
+    return <>
+      <Column gap={ '1/3' } >
+        <Box>
+          <FAI.Rotate
+            fontSize='3.paragraph'
+            fontColor='4.thin'
+          /> Rotate
+        </Box>
+        <Row.Separate
+          flexChilds='even'
+          paddingLeft={ 2 }
+        >
+          <Buttons.Button.Border.R
+            onClick={ () => {
+              let next = params.val_rotate - 90;
+              if ( next < 0 ) next += 360;
+              params.set_rotate( next );
+            } }
           >
-            <Buttons.Button.Border.R
-              onClick={ () => {
-                let next = params.val_rotate - 90;
-                if ( next < 0 ) next += 360;
-                params.set_rotate( next );
-              } }
-            >
-              <FAI icon={ faRotateLeft } /> 左に回転
-            </Buttons.Button.Border.R>
-            <Buttons.Button.Border.R
-              onClick={ () => {
-                params.set_rotate( ( params.val_rotate + 90 ) % 360 );
-              } }
-            >
-              右に回転 <FAI icon={ faRotateRight } />
-            </Buttons.Button.Border.R>
-          </Row.Separate>
-        </Column>
-        <Column gap={ '1/3' } >
-          <Box>
-            <FAI.Search
-              fontSize='3.paragraph'
-              fontColor='4.thin'
-            /> Zoom
-          </Box>
-          <Box paddingLeft={ 2 }>
-            <Input.Slider
-              override='force'
-              value={ params.val_scale - 100 }
-              min={ params.DefaultOptions.scale.min - 100 }
-              max={ params.DefaultOptions.scale.max - 100 }
-              step={ 25 }
-              onUpdateValidValue={ ( { eventType,value } ) => {
-                params.set_scale( value + 100 );
-              } }
-              legends={ {
-                enable: true,
-                custom: ( value ) => {
-                  let scale = Math.round( 100 + value );
-                  return 'x' + scale / 100;
-                }
-              } }
-            />
-          </Box>
-        </Column>
-        <Column gap={ '1/3' } >
-          <Box>
-            <FAI
-              icon={ faPalette }
-              fontSize='3.paragraph'
-              fontColor='4.thin'
-            /> Gray Scale
-          </Box>
-          <Box paddingLeft={ 2 }>
-            <Input.Slider
-              value={ params.val_grayScale }
-              min={ 0 }
-              max={ 100 }
-              step={ 25 }
-              onUpdateValidValue={ ( { value } ) => {
-                params.set_grayScale( value );
-              } }
-              legends={ {
-                enable: true,
-                custom: ( value ) => ( value + '%' )
-              } }
-            />
-          </Box>
-        </Column>
-        <Column gap={ '1/3' }>
-          <Box>
-            <FAI
-              icon={ faBarsStaggered }
-              fontSize='3.paragraph'
-              fontColor='4.thin'
-            /> Tone
-          </Box>
-          <Box paddingLeft={ 2 }>
-            <Input.Radio
-              value={ params.val_tone }
-              gap={ '1/2' }
-              cellStyles={ {
-                isRounded: true,
-                borderWidth: 2,
-                borderColor: '1.thin',
-                padding: '1/2',
-                paddingRight: 1,
-                fontSize: '1.mini',
-                gap: '1/3',
-                flexSizing: 'auto'
-              } }
-              options={ [
-                {
-                  value: 0,label: 'なし',
-                  padding: [ '1/2',1 ],
-                  flexCenter: true
-                },
-                ...ToneList
-              ] }
-              onUpdateValidValue={ ( { value } ) => {
-                params.set_tone( value[ 0 ] );
-              } }
-            />
-          </Box>
-        </Column>
-      </>
-    );
+            <FAI icon={ faRotateLeft } /> 左に回転
+          </Buttons.Button.Border.R>
+          <Buttons.Button.Border.R
+            onClick={ () => {
+              params.set_rotate( ( params.val_rotate + 90 ) % 360 );
+            } }
+          >
+            右に回転 <FAI icon={ faRotateRight } />
+          </Buttons.Button.Border.R>
+        </Row.Separate>
+      </Column>
+      <Column gap={ '1/3' } >
+        <Box>
+          <FAI.Search
+            fontSize='3.paragraph'
+            fontColor='4.thin'
+          /> Zoom
+        </Box>
+        <Box paddingLeft={ 2 }>
+          <Input.Slider
+            override='force'
+            value={ params.val_scale - 100 }
+            min={ params.DefaultOptions.scale.min - 100 }
+            max={ params.DefaultOptions.scale.max - 100 }
+            step={ 25 }
+            onUpdateValidValue={ ( { eventType,value } ) => {
+              params.set_scale( value + 100 );
+            } }
+            legends={ {
+              enable: true,
+              custom: ( value ) => {
+                let scale = Math.round( 100 + value );
+                return 'x' + scale / 100;
+              }
+            } }
+          />
+        </Box>
+      </Column>
+      <Column gap={ '1/3' } >
+        <Box>
+          <FAI
+            icon={ faPalette }
+            fontSize='3.paragraph'
+            fontColor='4.thin'
+          /> Gray Scale
+        </Box>
+        <Box paddingLeft={ 2 }>
+          <Input.Slider
+            value={ params.val_grayScale }
+            min={ 0 }
+            max={ 100 }
+            step={ 25 }
+            onUpdateValidValue={ ( { value } ) => {
+              params.set_grayScale( value );
+            } }
+            legends={ {
+              enable: true,
+              custom: ( value ) => ( value + '%' )
+            } }
+          />
+        </Box>
+      </Column>
+      <Column gap={ '1/3' }>
+        <Box>
+          <FAI
+            icon={ faBarsStaggered }
+            fontSize='3.paragraph'
+            fontColor='4.thin'
+          /> Tone
+        </Box>
+        <Box paddingLeft={ 2 }>
+          <Input.Radio
+            value={ params.val_tone }
+            gap={ '1/2' }
+            cellStyles={ {
+              isRounded: true,
+              borderWidth: 2,
+              borderColor: '1.thin',
+              padding: '1/2',
+              paddingRight: 1,
+              fontSize: '1.mini',
+              gap: '1/3',
+              flexSizing: 'auto'
+            } }
+            options={ [
+              {
+                value: 0,label: 'なし',
+                padding: [ '1/2',1 ],
+                flexCenter: true
+              },
+              ...ToneList
+            ] }
+            onUpdateValidValue={ ( { value } ) => {
+              params.set_tone( value[ 0 ] );
+            } }
+          />
+        </Box>
+      </Column>
+    </>;
   }
 }
 

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>;
 }