amotify 0.0.59 → 0.0.62

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

@@ -1,34 +1,34 @@
 import {
   React
-} from '@global';
+} from '@global'
 import {
   Box,
   FAI
-} from '@atoms';
+} from '@atoms'
 import {
   Row
-} from '@mols';
+} from '@mols'
 import {
   Buttons
-} from '@fn';
+} from '@fn'
 import {
   BoxWrapper,
   SubmitForm,
   ValidationCheck,
   CommonEffects
-} from '../core';
-import style from './style.module.scss';
+} 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.TextArea.PlainParams;
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+  let { value,params } = props
+  let { required } = params as amotify.fn.Input.TextArea.PlainParams
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
 
   if ( required && !value ) {
-    notice.push( { type: 'invalid',label: 'ONになっていません' } );
+    notice.push( { type: 'invalid',label: 'ONになっていません' } )
   }
 
   return {
@@ -56,7 +56,7 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
     appearance = 'material',
 
     ...others
-  } = params;
+  } = params
 
   let Default_Status: amotify.fn.Input.Status.Plain = {
     componentID: params.componentID || '',
@@ -64,12 +64,12 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
     eventType: 'init',
     eventID: $.uuidGen()
   }
-  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_status,set_status ] = React.useState( Default_Status )
   let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
-  } as amotify.fn.Input.Validation.Result );
-  let isChecked = !!val_status.dataValue;
+  } as amotify.fn.Input.Validation.Result )
+  let isChecked = !!val_status.dataValue
 
   CommonEffects( {
     params,
@@ -83,7 +83,7 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
       dataValue: value,
       formatValue: value
     },
-  } );
+  } )
 
   return <BoxWrapper
     val_status={ val_status }
@@ -102,19 +102,19 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
       className={ style.Input }
       id={ id }
       onKeyDown={ ( event ) => {
-        if ( onKeyDown ) onKeyDown( event );
-        if ( enableFormSubmit ) SubmitForm( event );
+        if ( onKeyDown ) onKeyDown( event )
+        if ( enableFormSubmit ) SubmitForm( event )
       } }
       onChange={ ( event ) => {
-        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } )
         set_status( {
           ...val_status,
           dataValue: event.target.checked,
           eventType: 'update',
           eventID: $.uuidGen(),
-        } );
+        } )
 
-        if ( onChange ) onChange( event );
+        if ( onChange ) onChange( event )
       } }
       { ...others }
     />
@@ -172,5 +172,5 @@ export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( para
         </Row.Center>
       </Box>
     </Buttons.Label.Plain>
-  </BoxWrapper>;
+  </BoxWrapper>
 }

package/src/functions/Input/Text.tsx

@@ -1,17 +1,15 @@
 import {
   React,
-} from '@global';
+} from '@global'
 import {
   Box,
-} from '@atoms';
+} from '@atoms'
 
 import {
   BoxWrapper,
   SubmitForm,
   CommonEffects
-} from './core';
-
-import style from './style.module.scss';
+} from './core'
 
 const ValidateTypes: {
   [ key: string ]: {
@@ -37,7 +35,7 @@ const ValidateTypes: {
     reason: '半角数字で入力してください'
   },
   fileName: {
-    reg: /[¥\/;:*\?\"\'\|\.\s\n\r\<\>]/g,exist: false,
+    reg: /[¥\/:*\?\"\'\|\.\s\n\r\<\>]/g,exist: false,
     reason: '空白または一部の特殊文字は使用できません'
   },
   creditCard: {
@@ -88,80 +86,80 @@ const DataLeveling = ( params: {
   let {
     restrict,
     value = ''
-  } = params;
+  } = params
 
-  let dataValue = String( value );
-  let minus = false;
+  let dataValue = String( value )
+  let minus = false
   if ( [ 'tel','number','digitNumber','test','postal','creditCard' ].includes( restrict ) ) {
-    dataValue = dataValue.zen2hanNumber();
+    dataValue = dataValue.zen2hanNumber()
   }
   if ( restrict == 'katakana' ) {
-    dataValue = dataValue.replace( /[^ァ-ヶー 　ｦ-ﾟ　 ]/ig,'' );
+    dataValue = dataValue.replace( /[^ァ-ヶー 　ｦ-ﾟ　 ]/ig,'' )
   }
   if ( restrict == 'hankaku.katakana' ) {
-    dataValue = dataValue.replace( /[^ｦ-ﾟ　 ]/ig,'' );
+    dataValue = dataValue.replace( /[^ｦ-ﾟ　 ]/ig,'' )
   }
   if ( [ 'postal','creditCard' ].includes( restrict ) ) {
-    dataValue = dataValue.removeLetters();
+    dataValue = dataValue.removeLetters()
   }
   if ( [ 'number','digitNumber' ].includes( restrict ) ) {
     if ( dataValue ) {
       if ( dataValue == '-' ) {
 
       } else if ( dataValue == '0-' ) {
-        dataValue = '-';
+        dataValue = '-'
       } else {
-        if ( dataValue[ 0 ] == '-' ) minus = true;
-        dataValue = dataValue.replace( /[^0-9\.]/ig,'' );
+        if ( dataValue[ 0 ] == '-' ) minus = true
+        dataValue = dataValue.replace( /[^0-9\.]/ig,'' )
 
-        let Amount = Number( dataValue );
-        if ( Amount === 0 ) minus = false;
-        if ( minus ) Amount = -1 * Amount;
+        let Amount = Number( dataValue )
+        if ( Amount === 0 ) minus = false
+        if ( minus ) Amount = -1 * Amount
 
         if ( $.is.exist( params.min ) ) {
-          Amount = Math.max( Amount,Number( params.min ) );
+          Amount = Math.max( Amount,Number( params.min ) )
         }
         if ( $.is.exist( params.max ) ) {
-          Amount = Math.min( Amount,Number( params.max ) );
+          Amount = Math.min( Amount,Number( params.max ) )
         }
-        dataValue = String( Math.abs( Amount ) );
+        dataValue = String( Math.abs( Amount ) )
       }
     }
   }
 
-  let formatValue = dataValue;
+  let formatValue = dataValue
   if ( restrict == 'digitNumber' ) {
     if ( dataValue && dataValue != '-' ) {
-      let arrary = [];
+      let arrary = []
       for ( let index = dataValue.length - 1; index >= 0; index-- ) {
-        arrary.unshift( dataValue[ index ] );
-        let Index = ( dataValue.length - 1 ) - index + 1;
+        arrary.unshift( dataValue[ index ] )
+        let Index = ( dataValue.length - 1 ) - index + 1
         if (
           index != 0 && Index % 3 == 0 ) {
-          arrary.unshift( ',' );
+          arrary.unshift( ',' )
         }
       }
-      formatValue = arrary.join( '' );
+      formatValue = arrary.join( '' )
     }
   } else if ( restrict == 'postal' ) {
     if ( dataValue.length >= 4 ) {
-      formatValue = dataValue.clip( 0,3 ) + '-' + dataValue.clip( 3 );
+      formatValue = dataValue.clip( 0,3 ) + '-' + dataValue.clip( 3 )
     }
   } else if ( restrict == 'creditCard' ) {
-    formatValue = dataValue.replace( /.{4}(?=.)/g,"$& " );
+    formatValue = dataValue.replace( /.{4}(?=.)/g,"$& " )
   }
 
   if ( [ 'number','digitNumber' ].includes( restrict ) ) {
     if ( minus ) {
-      dataValue = '-' + dataValue;
-      formatValue = '-' + formatValue;
+      dataValue = '-' + dataValue
+      formatValue = '-' + formatValue
     }
   }
 
   return {
     formatValue,
     dataValue
-  };
+  }
 }
 
 const setSelection: {
@@ -175,39 +173,43 @@ const setSelection: {
     id,
     restrict,
     val_status
-  } = props;
+  } = props
 
-  let input = $( '#' + id )[ 0 ] as HTMLInputElement;
+  let input = $( '#' + id )[ 0 ] as HTMLInputElement
   if ( input ) {
     if ( val_status.prevValue && val_status.formatValue ) {
       let {
         formatValue: currentValue,
         prevValue,
         caretFrom,caretTo
-      } = val_status;
+      } = val_status
 
       if ( restrict == 'creditCard' ) {
         if ( currentValue.length >= prevValue.length ) {
           if ( caretFrom % 5 == 0 ) {
-            caretFrom++; caretTo++;
+            caretFrom++
+            caretTo++
           }
         }
-        input.setSelectionRange( caretFrom,caretTo );
+        input.setSelectionRange( caretFrom,caretTo )
       } else if ( restrict == 'postal' ) {
         if ( currentValue.length == 5 && prevValue.length == 3 ) {
-          caretFrom++; caretTo++;
+          caretFrom++
+          caretTo++
         }
-        input.setSelectionRange( caretFrom,caretTo );
+        input.setSelectionRange( caretFrom,caretTo )
       } else if ( restrict == 'digitNumber' ) {
-        let margin = currentValue.length - prevValue.length;
+        let margin = currentValue.length - prevValue.length
 
         if ( margin == 2 ) {
-          caretFrom++; caretTo++;
+          caretFrom++
+          caretTo++
         }
         if ( margin == -2 ) {
-          caretFrom--; caretTo--;
+          caretFrom--
+          caretTo--
         }
-        input.setSelectionRange( caretFrom,caretTo );
+        input.setSelectionRange( caretFrom,caretTo )
       }
     }
   }
@@ -218,19 +220,19 @@ export const TextValidate = ( value: any,restrict: amotify.fn.Input.Text.Restric
     body: '' as any
   };
   ( () => {
-    let kit = ValidateTypes[ restrict ];
-    if ( !kit ) return;
+    let kit = ValidateTypes[ restrict ]
+    if ( !kit ) return
 
-    let reason = kit.reason;
+    let reason = kit.reason
     if ( kit ) {
-      let valid = Boolean( Number( !!value.match( kit.reg ) ) ^ Number( !kit.exist ) );
+      let valid = Boolean( Number( !!value.match( kit.reg ) ) ^ Number( !kit.exist ) )
       response = {
         ok: valid,
         body: valid ? '' : reason
       }
     }
-  } )();
-  return response;
+  } )()
+  return response
 }
 
 function DefaultValidation( props: {
@@ -240,24 +242,24 @@ function DefaultValidation( props: {
   let {
     value,
     params
-  } = props;
+  } = props
   let {
     restrict = 'text',
     maxLength = 255,
     required
   } = params as amotify.fn.Input.Text.OriginParams
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
 
   if ( $.is.exist( maxLength ) ) {
     if ( value.length >= Number( maxLength ) ) {
-      notice.push( { type: 'invalid',label: maxLength + '字以内で入力してください' } );
+      notice.push( { type: 'invalid',label: maxLength + '字以内で入力してください' } )
     }
   }
   if ( value ) {
-    let Valid = TextValidate( value,restrict );
-    if ( !Valid.ok ) notice.push( { type: 'invalid',label: Valid.body } );
+    let Valid = TextValidate( value,restrict )
+    if ( !Valid.ok ) notice.push( { type: 'invalid',label: Valid.body } )
   } else if ( required ) {
-    notice.push( { type: 'invalid',label: '必須項目です' } );
+    notice.push( { type: 'invalid',label: '必須項目です' } )
   }
 
   return {
@@ -290,10 +292,10 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
     min,
     max,
     ...others
-  } = params;
+  } = params
 
-  let inputType = restrict == 'password' ? 'password' : 'text';
-  let inputMode: 'numeric' | 'text' | 'email' = [ 'number','digitNumber','creditCard' ].includes( restrict ) ? 'numeric' : restrict == 'email' ? 'email' : 'text';
+  let inputType = restrict == 'password' ? 'password' : 'text'
+  let inputMode: 'numeric' | 'text' | 'email' = [ 'number','digitNumber','creditCard' ].includes( restrict ) ? 'numeric' : restrict == 'email' ? 'email' : 'text'
 
   let Default_Status: amotify.fn.Input.Status.Text = {
     componentID: componentID!,
@@ -308,12 +310,12 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
     caretFrom: null as any,
     caretTo: null as any
   }
-  let [ val_isComposing,set_isComposing ] = React.useState( false );
-  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_isComposing,set_isComposing ] = React.useState( false )
+  let [ val_status,set_status ] = React.useState( Default_Status )
   let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
-  } as amotify.fn.Input.Validation.Result );
+  } as amotify.fn.Input.Validation.Result )
 
   CommonEffects( {
     params,
@@ -331,11 +333,11 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
         value
       } )
     }
-  } );
+  } )
 
   React.useEffect( () => {
-    setSelection( { id: params.id,restrict,val_status } );
-  },[ val_status ] );
+    setSelection( { id: params.id,restrict,val_status } )
+  },[ val_status ] )
 
   return <BoxWrapper
     val_status={ val_status }
@@ -355,31 +357,31 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
       autoComplete={ autoComplete }
       autoCapitalize={ autoCapitalize }
       onKeyDown={ ( event ) => {
-        let { key,target } = event;
+        let { key,target } = event
 
         {
-          let input = target as HTMLInputElement;
-          let { selectionStart,selectionEnd } = input;
-          let caretFrom = Number( selectionStart );
+          let input = target as HTMLInputElement
+          let { selectionStart,selectionEnd } = input
+          let caretFrom = Number( selectionStart )
           let caretTo = Number( selectionEnd )
 
-          let _v = val_status.formatValue[ Number( caretFrom ) ];
-          let v_ = val_status.formatValue[ Number( caretFrom ) - 1 ];
+          let _v = val_status.formatValue[ Number( caretFrom ) ]
+          let v_ = val_status.formatValue[ Number( caretFrom ) - 1 ]
           if ( key == 'Delete' && (
             ( restrict == 'creditCard' && _v == ' ' ) ||
             ( restrict == 'postal' && _v == '-' ) ||
             ( restrict == 'digitNumber' && _v == ',' )
           ) ) {
-            input.setSelectionRange( caretFrom + 1,caretTo + 1 );
-            event.preventDefault();
+            input.setSelectionRange( caretFrom + 1,caretTo + 1 )
+            event.preventDefault()
           }
           if ( key == 'Backspace' && (
             ( restrict == 'creditCard' && v_ == ' ' ) ||
             ( restrict == 'postal' && v_ == '-' ) ||
             ( restrict == 'digitNumber' && v_ == ',' )
           ) ) {
-            input.setSelectionRange( caretFrom - 1,caretTo - 1 );
-            event.preventDefault();
+            input.setSelectionRange( caretFrom - 1,caretTo - 1 )
+            event.preventDefault()
           }
           if ( key == 'Enter' || key == 'Tab' ) {
 
@@ -399,10 +401,10 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
         }
         if ( [ 'number','digitNumber' ].includes( restrict ) ) {
           if ( [ 'ArrowUp','ArrowDown' ].includes( key ) ) {
-            let direction = Number( key == 'ArrowUp' ) * 2 - 1;
-            let Value = String( Number( val_status.dataValue ) + direction );
+            let direction = Number( key == 'ArrowUp' ) * 2 - 1
+            let Value = String( Number( val_status.dataValue ) + direction )
             if ( val_validate.ok ) {
-              set_validate( { ok: false,notice: [] } );
+              set_validate( { ok: false,notice: [] } )
             }
             set_status( {
               ...val_status,
@@ -413,32 +415,32 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
               } ),
               eventType: 'update',
               eventID: $.uuidGen(),
-            } );
-            event.preventDefault();
+            } )
+            event.preventDefault()
           }
         }
 
-        if ( onKeyDown ) onKeyDown( event );
-        if ( enableFormSubmit ) SubmitForm( event );
+        if ( onKeyDown ) onKeyDown( event )
+        if ( enableFormSubmit ) SubmitForm( event )
       } }
       onChange={ ( event ) => {
         let {
           value: rawValue,
           selectionStart,
           selectionEnd
-        } = event.target;
+        } = event.target
 
         let value = DataLeveling( {
           min,max,
           restrict,
           value: rawValue
-        } );
+        } )
 
-        if ( val_isComposing ) value.formatValue = rawValue;
+        if ( val_isComposing ) value.formatValue = rawValue
 
-        if ( value.formatValue == val_status.formatValue ) return;
+        if ( value.formatValue == val_status.formatValue ) return
 
-        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } )
 
         set_status( {
           ...val_status,
@@ -448,27 +450,27 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
           eventID: $.uuidGen(),
           caretFrom: Number( selectionStart ),
           caretTo: Number( selectionEnd )
-        } );
+        } )
 
-        if ( onChange ) onChange( event );
+        if ( onChange ) onChange( event )
       } }
       { ...others }
       onCompositionStart={ ( event ) => {
-        others?.onCompositionStart && others?.onCompositionStart( event );
-        set_isComposing( true );
+        others?.onCompositionStart && others?.onCompositionStart( event )
+        set_isComposing( true )
       } }
       onCompositionEnd={ ( event ) => {
-        others?.onCompositionEnd && others?.onCompositionEnd( event );
+        others?.onCompositionEnd && others?.onCompositionEnd( event )
 
         if ( restrict == 'text' ) {
-          return;
+          return
         }
 
         let value = DataLeveling( {
           min,max,
           restrict,
           value: val_status.formatValue
-        } );
+        } )
         set_status( {
           ...val_status,
           ...value,
@@ -477,9 +479,9 @@ export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params
           eventID: $.uuidGen(),
           caretFrom: Number( val_status.formatValue.length + 1 ),
           caretTo: Number( val_status.formatValue.length + 1 )
-        } );
-        set_isComposing( false );
+        } )
+        set_isComposing( false )
       } }
     />
-  </BoxWrapper>;
+  </BoxWrapper>
 }

package/src/functions/Input/TextArea.tsx

@@ -1,6 +1,6 @@
 import {
   React,
-} from '@global';
+} from '@global'
 import {
   BoxWrapper,
   SubmitForm,
@@ -8,18 +8,18 @@ import {
   CommonEffects
 } from './core'
 
-import style from './style.module.scss';
+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.TextArea.PlainParams;
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+  let { value,params } = props
+  let { required } = params as amotify.fn.Input.TextArea.PlainParams
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
 
   if ( required && !value ) {
-    notice.push( { type: 'invalid',label: '必須項目です' } );
+    notice.push( { type: 'invalid',label: '必須項目です' } )
   }
 
   return {
@@ -46,7 +46,7 @@ export const TextAreaInput: React.FC<amotify.fn.Input.TextArea.PlainParams> = (
     leftIndicator,rightIndicator,leftIcon,rightIcon,
 
     ...others
-  } = params;
+  } = params
 
   let Default_Status: amotify.fn.Input.Status.Plain = {
     componentID: componentID!,
@@ -54,11 +54,11 @@ export const TextAreaInput: React.FC<amotify.fn.Input.TextArea.PlainParams> = (
     eventType: 'init',
     eventID: $.uuidGen()
   }
-  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_status,set_status ] = React.useState( Default_Status )
   let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
-  } as amotify.fn.Input.Validation.Result );
+  } as amotify.fn.Input.Validation.Result )
 
   CommonEffects( {
     params,
@@ -69,7 +69,7 @@ export const TextAreaInput: React.FC<amotify.fn.Input.TextArea.PlainParams> = (
     onUpdateValue,
     onUpdateValidValue,
     DefaultValidation
-  } );
+  } )
 
   return <BoxWrapper
     val_status={ val_status }
@@ -85,25 +85,25 @@ export const TextAreaInput: React.FC<amotify.fn.Input.TextArea.PlainParams> = (
       data-component-id={ val_status.componentID }
       value={ val_status.dataValue }
       onKeyDown={ ( event ) => {
-        if ( onKeyDown ) onKeyDown( event );
-        if ( enableFormSubmit ) SubmitForm( event );
+        if ( onKeyDown ) onKeyDown( event )
+        if ( enableFormSubmit ) SubmitForm( event )
       } }
       onChange={ ( event ) => {
         let {
           value
-        } = event.target;
+        } = event.target
 
-        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } )
         set_status( {
           ...val_status,
           dataValue: value,
           eventType: 'update',
           eventID: $.uuidGen(),
-        } );
+        } )
 
-        if ( onChange ) onChange( event );
+        if ( onChange ) onChange( event )
       } }
       { ...others }
     />
-  </BoxWrapper>;
+  </BoxWrapper>
 }