amotify 0.0.59 → 0.0.60

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

@@ -1,33 +1,33 @@
 import {
   React
-} from '@global';
+} from '@global'
 import {
   FAI
-} from '@atoms';
+} from '@atoms'
 import {
   Column,
   Row,
   Text
-} from '@mols';
+} from '@mols'
 import {
   Input,
   Buttons,
   Loader,
   Sheet
-} from '@fn';
+} from '@fn'
 
 import {
   BoxWrapper,
   SubmitForm,
   ValidationCheck,
   CommonEffects
-} from '../core';
+} from '../core'
 
 import {
   ChipsInputFNs
-} from './Selector';
+} from './Selector'
 
-import coreStyle from '../style.module.scss';
+import coreStyle from '../style.module.scss'
 
 function DefaultValidation( props: {
   value: any
@@ -36,14 +36,14 @@ function DefaultValidation( props: {
   let {
     value,
     params
-  } = props;
+  } = props
   let {
     required
-  } = params as amotify.fn.Input.Chips.PlainParams;
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+  } = params as amotify.fn.Input.Chips.PlainParams
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
 
   if ( required && !value.length ) {
-    notice.push( { type: 'invalid',label: '一つ以上選択してください' } );
+    notice.push( { type: 'invalid',label: '一つ以上選択してください' } )
   }
 
   return {
@@ -53,8 +53,8 @@ function DefaultValidation( props: {
 }
 
 const DataWrapping: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
-  let DefaultValues = [ ...( params.value || [] ) ];
-  let Values = DefaultValues.splice( 0,params.limit || 65535 );
+  let DefaultValues = [ ...( params.value || [] ) ]
+  let Values = DefaultValues.splice( 0,params.limit || 65535 )
 
   return <Core
     SelectedCellComponent={ ( params ) => {
@@ -62,7 +62,7 @@ const DataWrapping: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) =>
         value,
         label,
         removeCallback
-      } = params;
+      } = params
 
       return <Row.Left
         ssCardBox
@@ -73,25 +73,25 @@ const DataWrapping: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) =>
       >
         { label }
         { params.defaultRemoveButton }
-      </Row.Left>;
+      </Row.Left>
     } }
     AddButtonComponent={ ( props ) => {
-      if ( params.limit && params.limit <= props.selected.length ) return null;
+      if ( params.limit && params.limit <= props.selected.length ) return null
 
       return <Buttons.Button.Sub.R
         color='cloud'
         padding={ '1/2' }
         onClick={ () => {
-          props.openCallback();
+          props.openCallback()
         } }
       >
         <FAI.Plus />
         追加する
-      </Buttons.Button.Sub.R>;
+      </Buttons.Button.Sub.R>
     } }
     { ...params }
     value={ Values }
-  />;
+  />
 }
 
 const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
@@ -116,22 +116,22 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
     enableFormSubmit,
 
     ...others
-  } = params;
-  AddButtonComponent = AddButtonComponent!;
+  } = params
+  AddButtonComponent = AddButtonComponent!
 
-  let [ val_selectorID ] = React.useState( $.uuidGen() );
+  let [ val_selectorID ] = React.useState( $.uuidGen() )
   let [ val_status,set_status ] = React.useState( {
     componentID: params.componentID || '',
     dataValue: value.map( ( val: any ) => val ),
     eventID: $.uuidGen(),
     eventType: 'init'
-  } as amotify.fn.Input.Status.Plain );
+  } as amotify.fn.Input.Status.Plain )
   let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
-  } as amotify.fn.Input.Validation.Result );
+  } as amotify.fn.Input.Validation.Result )
 
-  let [ val_selected,set_selected ] = React.useState( [ ...value ] );
+  let [ val_selected,set_selected ] = React.useState( [ ...value ] )
 
   CommonEffects( {
     params,
@@ -146,16 +146,16 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
     ExtraStoreParams: {
       searchTimer: null
     }
-  } );
+  } )
 
   const UpdateValue = ( values: amotify.fn.Input.Chips.OptionParams[] ) => {
-    set_selected( values );
+    set_selected( values )
     set_status( {
       ...val_status,
       dataValue: values.map( ( val: any ) => val ),
       eventID: $.uuidGen(),
       eventType: 'update'
-    } as amotify.fn.Input.Status.Plain );
+    } as amotify.fn.Input.Status.Plain )
   }
   const OpenSelector = () => {
     ChipsInputFNs.openSelector( {
@@ -168,43 +168,43 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
       limit: params.limit,
       onDynamicSearch: params.onDynamicSearch,
       onUpdated: ( args ) => {
-        UpdateValue( args.values );
+        UpdateValue( args.values )
       },
       onClosed: () => {
-        $( DefaultParentQuerySelector ).focus();
+        $( DefaultParentQuerySelector ).focus()
       }
-    } );
+    } )
   }
 
-  let DefaultParentQuerySelector = `[data-chips-input-wrapper="${ val_selectorID }"]`;
-  let isFully = limit && limit <= val_selected.length;
+  let DefaultParentQuerySelector = `[data-chips-input-wrapper="${ val_selectorID }"]`
+  let isFully = limit && limit <= val_selected.length
 
-  const mounted = React.useRef( false );
+  const mounted = React.useRef( false )
   React.useEffect( () => {
     if ( mounted.current ) {
       if ( isFully ) {
-        Sheet.close( val_selectorID );
-        $( DefaultParentQuerySelector ).focus();
+        Sheet.close( val_selectorID )
+        $( DefaultParentQuerySelector ).focus()
       }
     } else {
-      mounted.current = true;
+      mounted.current = true
     }
-  },[ val_selected ] );
+  },[ val_selected ] )
 
   let Selected = val_selected.map( ( s ) => {
-    let { value,label } = s;
-    SelectedCellComponent = SelectedCellComponent!;
+    let { value,label } = s
+    SelectedCellComponent = SelectedCellComponent!
 
     const removeCallback = () => {
-      let findIndex = val_selected.findIndex( ( v ) => v.value == value );
-      if ( findIndex == -1 ) return;
-      let newSelected = [ ...val_selected ];
-      newSelected.splice( findIndex,1 );
-      UpdateValue( newSelected );
+      let findIndex = val_selected.findIndex( ( v ) => v.value == value )
+      if ( findIndex == -1 ) return
+      let newSelected = [ ...val_selected ]
+      newSelected.splice( findIndex,1 )
+      UpdateValue( newSelected )
       if ( !newSelected.length ) {
         setTimeout( () => {
-          $( DefaultParentQuerySelector ).focus();
-        },200 );
+          $( DefaultParentQuerySelector ).focus()
+        },200 )
       }
     }
     return <SelectedCellComponent
@@ -219,16 +219,16 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
         backgroundColor='cloud'
         isRounded
         onClick={ () => {
-          removeCallback();
+          removeCallback()
         } }
       >
         <FAI.Times />
       </Buttons.Button.Sub.S> }
       openCallback={ () => {
-        OpenSelector();
+        OpenSelector()
       } }
     />
-  } );
+  } )
 
   return <BoxWrapper
     val_status={ val_status }
@@ -248,30 +248,30 @@ const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
     <button
       data-chips-input-wrapper={ val_selectorID }
       onKeyDown={ ( e ) => {
-        let { key,ctrlKey,metaKey,keyCode } = e;
-        let auxKey = ctrlKey || metaKey;
-        let isString = ( keyCode >= 48 && keyCode <= 57 ) || ( keyCode >= 65 && keyCode <= 90 ) || ( keyCode >= 96 && keyCode <= 105 );
+        let { key,ctrlKey,metaKey,keyCode } = e
+        let auxKey = ctrlKey || metaKey
+        let isString = ( keyCode >= 48 && keyCode <= 57 ) || ( keyCode >= 65 && keyCode <= 90 ) || ( keyCode >= 96 && keyCode <= 105 )
 
         if ( isString ) {
-          if ( isFully ) return;
-          OpenSelector();
+          if ( isFully ) return
+          OpenSelector()
         } else if ( key == 'Tab' ) {
 
         } else if ( key == 'Backspace' ) {
-          if ( !val_selected.length ) return;
+          if ( !val_selected.length ) return
           if ( auxKey ) {
-            UpdateValue( [] );
+            UpdateValue( [] )
           } else {
-            let newSelected = [ ...val_selected ];
-            newSelected.pop();
-            UpdateValue( newSelected );
+            let newSelected = [ ...val_selected ]
+            newSelected.pop()
+            UpdateValue( newSelected )
           }
         }
       } }
       onClick={ () => {
-        if ( isFully ) return;
-        // if ( val_selected.length ) return;
-        OpenSelector();
+        if ( isFully ) return
+        // if ( val_selected.length ) return
+        OpenSelector()
       } }
       { ...others }
     >
@@ -281,9 +281,9 @@ 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;
-ChipsInput.fn = ChipsInputFNs;
+const ChipsInput: amotify.fn.Input.Chips.Methods = DataWrapping as any
+ChipsInput.fn = ChipsInputFNs
 export { ChipsInput }

package/src/functions/Input/Contenteditable.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.Contenteditable.PlainParams;
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+  let { value,params } = props
+  let { required } = params as amotify.fn.Input.Contenteditable.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 ContenteditableInput: React.FC<amotify.fn.Input.Contenteditable.Pla
     leftIndicator,rightIndicator,leftIcon,rightIcon,
 
     ...others
-  } = params;
+  } = params
 
   let Default_Status: amotify.fn.Input.Status.Plain = {
     componentID: componentID!,
@@ -54,11 +54,11 @@ export const ContenteditableInput: React.FC<amotify.fn.Input.Contenteditable.Pla
     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 ContenteditableInput: React.FC<amotify.fn.Input.Contenteditable.Pla
     onUpdateValue,
     onUpdateValidValue,
     DefaultValidation
-  } );
+  } )
 
   return <BoxWrapper
     val_status={ val_status }
@@ -86,29 +86,29 @@ export const ContenteditableInput: React.FC<amotify.fn.Input.Contenteditable.Pla
       data-value={ val_status.dataValue }
       data-component-id={ val_status.componentID }
       onKeyDown={ ( event ) => {
-        !!onKeyDown && onKeyDown( event );
-        !!enableFormSubmit && SubmitForm( event );
+        !!onKeyDown && onKeyDown( event )
+        !!enableFormSubmit && SubmitForm( event )
       } }
       onInput={ ( event ) => {
-        let contentEditor = event.currentTarget as HTMLDivElement;
+        let contentEditor = event.currentTarget as HTMLDivElement
         let {
           innerHTML,
           innerText
-        } = contentEditor;
+        } = contentEditor
 
-        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } );
+        if ( val_validate.ok ) set_validate( { ok: false,notice: [] } )
         set_status( {
           ...val_status,
           dataValue: innerText,
           eventType: 'update',
           eventID: $.uuidGen(),
-        } );
+        } )
 
-        onInput && onInput( event );
+        onInput && onInput( event )
       } }
       { ...others }
     >
       { children }
     </div>
-  </BoxWrapper>;
+  </BoxWrapper>
 }

package/src/functions/Input/DigitCharacters.tsx

@@ -1,41 +1,41 @@
 import {
   React
-} from '@global';
+} from '@global'
 import {
   Flex
-} from '@atoms';
+} from '@atoms'
 import {
   Input
-} from '@fn';
+} from '@fn'
 import {
   BoxWrapper,
   SubmitForm,
   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 { value,params } = props
   let {
     required,
     numericOnly = false,
     digits
-  } = params as amotify.fn.Input.DigitCharacters.PlainParams;
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+  } = params as amotify.fn.Input.DigitCharacters.PlainParams
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
 
   if ( required && !value ) {
-    notice.push( { type: 'invalid',label: '必須項目です' } );
+    notice.push( { type: 'invalid',label: '必須項目です' } )
   }
   if ( value ) {
     if ( numericOnly && value.match( /\D/ ) ) {
-      notice.push( { type: 'invalid',label: '数字のみで入力してください' } );
+      notice.push( { type: 'invalid',label: '数字のみで入力してください' } )
     }
     if ( value.length != digits ) {
-      notice.push( { type: 'warn',label: '最後まで入力してください' } );
+      notice.push( { type: 'warn',label: '最後まで入力してください' } )
     }
   }
 
@@ -47,19 +47,19 @@ function DefaultValidation( props: {
 
 
 const dataToFormat = ( digits: number,value: any = '' ) => {
-  let dataValue = String( value );
-  let formatValue: any = [];
+  let dataValue = String( value )
+  let formatValue: any = []
   for ( let index = 0; index < digits; index++ ) {
-    formatValue[ index ] = dataValue[ index ] || '';
+    formatValue[ index ] = dataValue[ index ] || ''
   }
   return {
     formatValue,
     dataValue
-  };
+  }
 }
 const formatToData = ( value: any = '' ) => {
-  let formatValue = value;
-  let dataValue = formatValue.join( '' );
+  let formatValue = value
+  let dataValue = formatValue.join( '' )
   return {
     formatValue,
     dataValue
@@ -91,10 +91,10 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
     componentID,
     listStyles,
     ...others
-  } = params;
+  } = params
 
   if ( numericOnly ) {
-    params.inputMode = params.inputMode || 'numeric';
+    params.inputMode = params.inputMode || 'numeric'
   }
 
   let Default_Status: amotify.fn.Input.Status.DigitCharacters = {
@@ -104,11 +104,11 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
     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,
@@ -119,22 +119,22 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
     onUpdateValue,
     onUpdateValidValue,
     DefaultValidation
-  } );
+  } )
 
-  let Digits = [];
+  let Digits = []
   for ( let index = 0; index < digits; index++ ) {
-    let Character = val_status.formatValue[ index ];
+    let Character = val_status.formatValue[ index ]
 
     let Styles: React.CSSProperties = {}
 
-    let ClassName = className;
+    let ClassName = className
 
     if ( params.combineInput ) {
       ClassName = [
         className,
         style.DigitCharacterCell,
         style.Combined
-      ].join( ' ' );
+      ].join( ' ' )
     }
 
     Digits.push( <input
@@ -153,58 +153,58 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
         let {
           key,
           code
-        } = event;
+        } = event
 
-        if ( key == 'Tab' ) return;
-        event.preventDefault();
-        let nextFocusIndex = null;
+        if ( key == 'Tab' ) return
+        event.preventDefault()
+        let nextFocusIndex = null
 
         if ( key == 'Backspace' ) {
-          let newFormatValue = val_status.formatValue;
-          newFormatValue[ index ] = '';
+          let newFormatValue = val_status.formatValue
+          newFormatValue[ index ] = ''
 
           set_status( {
             ...val_status,
             ...formatToData( newFormatValue ),
             eventType: 'update',
             eventID: $.uuidGen()
-          } );
-          nextFocusIndex = index - 1;
+          } )
+          nextFocusIndex = index - 1
         } else if ( [ 'ArrowLeft','ArrowRight' ].includes( key ) ) {
-          let dir = Number( key == 'ArrowRight' ) * 2 - 1;
-          nextFocusIndex = index + dir;
+          let dir = Number( key == 'ArrowRight' ) * 2 - 1
+          nextFocusIndex = index + dir
         } else {
           if ( enableFormSubmit ) SubmitForm( event );
 
           ( () => {
-            let regExp = code.match( /^(Key(.)|Digit(\d)|Numpad(\d))/ );
-            if ( !regExp ) return;
+            let regExp = code.match( /^(Key(.)|Digit(\d)|Numpad(\d))/ )
+            if ( !regExp ) return
 
-            let newCharacter: string = regExp[ 2 ] || regExp[ 3 ] || regExp[ 4 ];
+            let newCharacter: string = regExp[ 2 ] || regExp[ 3 ] || regExp[ 4 ]
             if ( numericOnly ) {
-              if ( !newCharacter.match( /\d/ ) ) return;
+              if ( !newCharacter.match( /\d/ ) ) return
             }
-            if ( !newCharacter ) return;
+            if ( !newCharacter ) return
 
-            let newFormatValue = val_status.formatValue;
-            newFormatValue[ index ] = newCharacter;
+            let newFormatValue = val_status.formatValue
+            newFormatValue[ index ] = newCharacter
 
             set_status( {
               ...val_status,
               ...formatToData( newFormatValue ),
               eventType: 'update',
               eventID: $.uuidGen()
-            } );
-            nextFocusIndex = index + 1;
-          } )();
+            } )
+            nextFocusIndex = index + 1
+          } )()
         }
 
         if ( $.is.exist( nextFocusIndex ) ) {
-          $( '#Digit-' + nextFocusIndex + '-' + val_status.componentID ).focus();
+          $( '#Digit-' + nextFocusIndex + '-' + val_status.componentID ).focus()
         }
       } }
       onChange={ () => { } }
-    /> );
+    /> )
   }
 
   return <BoxWrapper
@@ -231,5 +231,5 @@ export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.Pla
     >
       { Digits }
     </Flex>
-  </BoxWrapper>;
+  </BoxWrapper>
 }