amotify 0.0.59 → 0.0.62

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

@@ -1,45 +1,45 @@
 import {
   React
-} from '@global';
+} from '@global'
 import {
   Box,
   Flex,
   FAI
-} from '@atoms';
+} from '@atoms'
 import {
   Input,
   Buttons
-} from '@fn';
+} from '@fn'
 import {
   BoxWrapper,
   CommonEffects,
   SubmitForm
-} 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 { value,params } = props
   let {
     type,
     required,
     minSelect = 0
-  } = params as amotify.fn.Input.List.OriginParams;
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+  } = params as amotify.fn.Input.List.OriginParams
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
 
   if ( required ) {
     if ( !value.length ) {
       if ( type == 'radio' ) {
-        notice.push( { type: 'invalid',label: '選択されていません' } );
+        notice.push( { type: 'invalid',label: '選択されていません' } )
       }
     }
   }
 
   if ( minSelect ) {
     if ( value.length < minSelect ) {
-      notice.push( { type: 'invalid',label: `${ minSelect }個以上選択してください` } );
+      notice.push( { type: 'invalid',label: `${ minSelect }個以上選択してください` } )
     }
   }
 
@@ -50,30 +50,30 @@ function DefaultValidation( props: {
 }
 
 export const ListInput: React.FC<amotify.fn.Input.List.OriginParams> = ( props ) => {
-  let { value,options = [] } = props;
-  let Values = $.is.exist( value ) ? $.flatArray( value ) : [];
+  let { value,options = [] } = props
+  let Values = $.is.exist( value ) ? $.flatArray( value ) : []
   let DefaultOptions = options.map( ( option ) => {
-    let { value,label } = option;
+    let { value,label } = option
 
     return {
       ...option,
       value: JSON.stringify( value ),
       label
     }
-  } );
-  let DefaultValues: string[] = [];
+  } )
+  let DefaultValues: string[] = []
   Values.forEach( ( value ) => {
-    let Val = JSON.stringify( value );
-    let Index = DefaultOptions.findIndex( ( option ) => option.value == Val );
-    if ( Index == -1 ) return;
-    DefaultValues.push( Val );
-  } );
+    let Val = JSON.stringify( value )
+    let Index = DefaultOptions.findIndex( ( option ) => option.value == Val )
+    if ( Index == -1 ) return
+    DefaultValues.push( Val )
+  } )
 
   return <Core
     { ...props }
     value={ DefaultValues }
     options={ DefaultOptions }
-  />;
+  />
 }
 
 const Core: React.FC<amotify.fn.Input.List.OriginParams> = ( params ) => {
@@ -104,7 +104,7 @@ const Core: React.FC<amotify.fn.Input.List.OriginParams> = ( params ) => {
     cellCheckedStyles,cellCheckedClassName,
 
     ...others
-  } = params;
+  } = params
 
   let Default_Status: amotify.fn.Input.Status.Plain = {
     componentID,
@@ -112,11 +112,11 @@ const Core: React.FC<amotify.fn.Input.List.OriginParams> = ( params ) => {
     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( {
     type: 'list',
@@ -127,7 +127,7 @@ const Core: React.FC<amotify.fn.Input.List.OriginParams> = ( params ) => {
     set_validate,
     onUpdateValue,onUpdateValidValue,
     DefaultValidation
-  } );
+  } )
 
   return <BoxWrapper
     val_status={ val_status }
@@ -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<{
@@ -160,7 +160,7 @@ const CellList: React.FC<{
     params,
     val_status,
     set_status
-  } = props;
+  } = props
 
   let {
     componentID,
@@ -182,16 +182,16 @@ const CellList: React.FC<{
 
     enableFormSubmit,
     defaultActiveStyling = true
-  } = params;
+  } = params
   let {
     dataValue
-  } = val_status;
+  } = val_status
 
   let IconBox = icon ? <Box
     flexSizing={ 'none' }
     children={ params.iconType == 'radio' ? <Comps.RadioIcon /> :
       params.iconType == 'checkbox' ? <Comps.CheckboxIcon /> : null }
-  /> : null;
+  /> : null
 
   let Cells = options.map( ( option,index ) => {
     let {
@@ -202,10 +202,10 @@ const CellList: React.FC<{
       checkedStyles,
       checkedClassName = '',
       ...styles
-    } = option;
+    } = option
 
-    let CellID = $.uuidGen();
-    let Checked = dataValue.findIndex( ( v: string ) => v === value ) != -1;
+    let CellID = $.uuidGen()
+    let Checked = dataValue.findIndex( ( v: string ) => v === value ) != -1
 
     let Styles = {
       ...DefaultCellStyles,
@@ -216,7 +216,7 @@ const CellList: React.FC<{
       style[ 'defaultActiveStyling_' + !!defaultActiveStyling ],
       DefaultCellClassName,
       className
-    ];
+    ]
 
     if ( Checked ) {
       Styles = {
@@ -235,7 +235,7 @@ const CellList: React.FC<{
         ...ClassName,
         DefaultCellCheckedClassName,
         checkedClassName
-      ];
+      ]
     }
 
     return [
@@ -254,32 +254,32 @@ const CellList: React.FC<{
         disabled={ disabled }
         checked={ Checked }
         onFocus={ ( event ) => {
-          if ( disabled ) return;
-          if ( type != 'radio' ) return;
-          if ( val_status.dataValue.length ) return;
-          let { value,checked } = event.target;
-          let nextValue: any = [ value ];
+          if ( disabled ) return
+          if ( type != 'radio' ) return
+          if ( val_status.dataValue.length ) return
+          let { value,checked } = event.target
+          let nextValue: any = [ value ]
 
           set_status( {
             ...val_status,
             dataValue: nextValue,
             eventType: 'update',
             eventID: $.uuidGen()
-          } );
+          } )
         } }
         onChange={ ( event ) => {
-          if ( disabled ) return;
-          let { value,checked } = event.target;
-          let nextValue = [];
+          if ( disabled ) return
+          let { value,checked } = event.target
+          let nextValue = []
           if ( type == 'radio' ) {
-            nextValue = [ value ];
+            nextValue = [ value ]
           } else if ( type == 'checkbox' || type == 'checker' ) {
             if ( checked ) {
-              nextValue = [ ...val_status.dataValue,value ];
+              nextValue = [ ...val_status.dataValue,value ]
             } else {
-              let prevValue = [ ...val_status.dataValue ];
-              prevValue.splice( val_status.dataValue.findIndex( ( v: any ) => v == value ),1 );
-              nextValue = prevValue;
+              let prevValue = [ ...val_status.dataValue ]
+              prevValue.splice( val_status.dataValue.findIndex( ( v: any ) => v == value ),1 )
+              nextValue = prevValue
             }
           }
 
@@ -288,29 +288,29 @@ const CellList: React.FC<{
             dataValue: nextValue,
             eventType: 'update',
             eventID: $.uuidGen()
-          } );
+          } )
         } }
         onKeyDown={ ( event ) => {
-          let { key,shiftKey } = event;
+          let { key,shiftKey } = event
           if ( type == 'checkbox' || type == 'checker' ) {
             if ( key == 'Tab' ) {
               if ( shiftKey ) { } else { }
             } else if ( key.match( /Arrow/ ) ) {
-              event.preventDefault();
+              event.preventDefault()
 
-              let dir = [ 'ArrowLeft','ArrowUp' ].includes( key ) ? -1 : 1;
-              let nextIndex = index + dir;
+              let dir = [ 'ArrowLeft','ArrowUp' ].includes( key ) ? -1 : 1
+              let nextIndex = index + dir
 
               if ( nextIndex < 0 ) {
-                nextIndex = options.length - 1;
+                nextIndex = options.length - 1
               } else if ( nextIndex >= options.length ) {
-                nextIndex = 0;
+                nextIndex = 0
               }
-              $( `input[data-list-index="${ componentID }-${ nextIndex }"]` ).focus();
+              $( `input[data-list-index="${ componentID }-${ nextIndex }"]` ).focus()
             }
           }
 
-          if ( enableFormSubmit ) SubmitForm( event );
+          if ( enableFormSubmit ) SubmitForm( event )
         } }
         tabIndex={ tabIndex }
       />,
@@ -329,8 +329,8 @@ const CellList: React.FC<{
         { IconBox }
         { $.is.string( label ) ? <Box children={ label } /> : label }
       </Buttons.Label.Plain>
-    ];
-  } );
+    ]
+  } )
 
   return <Flex
     flexSizing={ 'auto' }
@@ -345,7 +345,7 @@ const CellList: React.FC<{
       style[ 'Tone_' + tone ]
     ].join( ' ' ) }
     children={ Cells }
-  />;
+  />
 }
 
 const Comps = {

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

@@ -1,28 +1,28 @@
 import {
   React,
-} from '@global';
+} from '@global'
 
 import {
   Box
-} from '@atoms';
+} from '@atoms'
 import {
   Column
-} from '@mols';
+} from '@mols'
 import {
   BoxWrapper,
   SubmitForm,
   ValidationCheck,
   CommonEffects
-} from '../core';
+} from '../core'
 import {
   Input,
   Tooltips,
   Buttons
-} from '@fn';
+} from '@fn'
 
 
-import style from './style.module.scss';
-import coreStyle from '../style.module.scss';
+import style from './style.module.scss'
+import coreStyle from '../style.module.scss'
 
 function DefaultValidation( props: {
   value: any
@@ -31,16 +31,16 @@ function DefaultValidation( props: {
   let {
     value,
     params
-  } = props;
+  } = props
   let {
     required,
     options
-  } = params as amotify.fn.Input.RichSelect.PlainParams;
-  let notice: amotify.fn.Input.Validation.NoticeTypes[] = [];
+  } = params as amotify.fn.Input.RichSelect.PlainParams
+  let notice: amotify.fn.Input.Validation.NoticeTypes[] = []
 
   if ( required ) {
     if ( !options.length || ( options.length && $.is.nullish( JSON.parse( value ) ) ) ) {
-      notice.push( { type: 'invalid',label: '必須項目です' } );
+      notice.push( { type: 'invalid',label: '必須項目です' } )
     }
   }
 
@@ -55,30 +55,30 @@ export const RichSelectInput: React.FC<amotify.fn.Input.RichSelect.PlainParams>
     value = null,
     placeholder,
     options = []
-  } = params;
+  } = params
 
-  let SelectedExist = 0;
-  let SelectedValue = JSON.stringify( value );
+  let SelectedExist = 0
+  let SelectedValue = JSON.stringify( value )
   let DefaultOptions = options.map( ( option ) => {
-    let { type,value } = option;
-    let Value = JSON.stringify( value );
-    let Selected = Value == SelectedValue;
-    SelectedExist |= Number( Selected );
+    let { type,value } = option
+    let Value = JSON.stringify( value )
+    let Selected = Value == SelectedValue
+    SelectedExist |= Number( Selected )
 
     return {
       ...option,
       type: type || 'button',
       value: Value
     }
-  } );
-  if ( !SelectedExist ) value = null;
-  let DefaultValue = JSON.stringify( value );
+  } )
+  if ( !SelectedExist ) value = null
+  let DefaultValue = JSON.stringify( value )
 
   return <Core
     { ...params }
     value={ DefaultValue }
     options={ DefaultOptions }
-  />;
+  />
 }
 
 const Core: React.FC<amotify.fn.Input.RichSelect.PlainParams> = ( params ) => {
@@ -108,7 +108,7 @@ const Core: React.FC<amotify.fn.Input.RichSelect.PlainParams> = ( params ) => {
 
     gravityPoint,
     ...others
-  } = params;
+  } = params
 
   let Default_Status: amotify.fn.Input.Status.Plain = {
     componentID: params.componentID || '',
@@ -116,12 +116,12 @@ const Core: React.FC<amotify.fn.Input.RichSelect.PlainParams> = ( params ) => {
     eventType: 'init',
     eventID: $.uuidGen()
   }
-  let [ val_tipID ] = React.useState( $.uuid.gen() );
-  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_tipID ] = React.useState( $.uuid.gen() )
+  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( {
     type: 'richSelect',
@@ -137,13 +137,13 @@ const Core: React.FC<amotify.fn.Input.RichSelect.PlainParams> = ( params ) => {
     DefaultValidation,
     onUpdateValue,
     onUpdateValidValue
-  } );
+  } )
 
-  let SelectedElement: ReactElement = <Box fontColor='4.thin' textAlign='left'>{ placeholder || '選択' }</Box>;
+  let SelectedElement: ReactElement = <Box fontColor='4.thin' textAlign='left'>{ placeholder || '選択' }</Box>
   if ( val_status.dataValue ) {
-    let Selected = options.find( ( option ) => option.type == 'button' && option.value == val_status.dataValue );
+    let Selected = options.find( ( option ) => option.type == 'button' && option.value == val_status.dataValue )
     if ( Selected ) {
-      SelectedElement = Selected.selectedLabel || Selected.label;
+      SelectedElement = Selected.selectedLabel || Selected.label
     }
   }
 
@@ -179,7 +179,7 @@ const Core: React.FC<amotify.fn.Input.RichSelect.PlainParams> = ( params ) => {
                 type,
                 value,
                 label
-              } = option;
+              } = option
 
               if ( type == 'button' ) {
                 return <Buttons.Button.Clear.R
@@ -194,17 +194,17 @@ const Core: React.FC<amotify.fn.Input.RichSelect.PlainParams> = ( params ) => {
                       dataValue: value,
                       eventType: 'update',
                       eventID: $.uuidGen()
-                    } );
-                    Tooltips.close( val_tipID );
+                    } )
+                    Tooltips.close( val_tipID )
                   } }
                   { ...cellStyles }
                 >
                   { label }
                 </Buttons.Button.Clear.R>
               } else {
-                return label;
+                return label
               }
-            } );
+            } )
             return <Column
               ssCardBox
               padding={ [ 1,0 ] }
@@ -219,12 +219,12 @@ const Core: React.FC<amotify.fn.Input.RichSelect.PlainParams> = ( params ) => {
               } }
             >
               { Options }
-            </Column>;
+            </Column>
           }
-        } );
+        } )
       } }
     >
       { SelectedElement }
     </button>
-  </BoxWrapper>;
+  </BoxWrapper>
 }

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

@@ -1,14 +1,14 @@
 import {
   React
-} from '@global';
+} from '@global'
 
-import { ListInputs } from '../_';
+import { ListInputs } from '../_'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
 export const Segmented: amotify.fn.Input.Segmented.Types = {
   Auto: ( params ) => {
-    params = { ...params };
+    params = { ...params }
     params = {
       padding: '1/3',
       gap: '1/3',
@@ -26,10 +26,10 @@ 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 };
+    params = { ...params }
     params = {
       border: true,
       borderColor: 'theme',
@@ -50,12 +50,12 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
         ...params.cellCheckedStyles
       }
     };
-    ( params as any ).tone = 'ThemeBorder';
+    ( params as any ).tone = 'ThemeBorder'
 
-    return <Core appearance={ 'Border' } { ...params } />;
+    return <Core appearance={ 'Border' } { ...params } />
   },
   Cloud: ( params ) => {
-    params = { ...params };
+    params = { ...params }
     params = {
       padding: '1/3',
       gap: '1/3',
@@ -73,11 +73,11 @@ 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';
+    ( params as any ).tone = 'WhiteCloud'
     return <Segmented.Cloud
       fontColor='3.blur'
       { ...params }
@@ -85,11 +85,11 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
         fontColor: '1.clear',
         ...params.cellCheckedStyles
       } }
-    />;
+    />
   },
   Cloud3: ( params ) => {
     params = { ...params };
-    ( params as any ).tone = 'ThemeCloud';
+    ( params as any ).tone = 'ThemeCloud'
     return <Segmented.Cloud
       backgroundColor='tcOpFew'
       fontColor='theme'
@@ -97,10 +97,10 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
       cellStyles={ {
         ...params.cellStyles
       } }
-    />;
+    />
   },
   Border: ( params ) => {
-    params = { ...params };
+    params = { ...params }
     params = {
       backgroundColor: '1.layer.base',
       border: '2.normal',
@@ -121,10 +121,10 @@ 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 };
+    params = { ...params }
     params = {
       border: true,
       borderColor: 'theme',
@@ -146,12 +146,12 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
         ...params.cellCheckedStyles
       }
     };
-    ( params as any ).tone = 'ThemeBorder';
+    ( params as any ).tone = 'ThemeBorder'
 
-    return <Core appearance={ 'Border' } { ...params } />;
+    return <Core appearance={ 'Border' } { ...params } />
   },
   BottomLine: ( params ) => {
-    params = { ...params };
+    params = { ...params }
     params = {
       gap: 0,
       fontColor: '3.blur',
@@ -168,7 +168,7 @@ export const Segmented: amotify.fn.Input.Segmented.Types = {
       }
     }
 
-    return <Core appearance={ 'BottomLine' } { ...params } />;
+    return <Core appearance={ 'BottomLine' } { ...params } />
   },
 }
 
@@ -189,15 +189,15 @@ const Core: React.FC<CoreParams> = ( params ) => {
     cellCheckedClassName,
     cellCheckedStyles,
     ...others
-  } = params;
+  } = params
 
-  let [ val_componentID ] = React.useState( $.uuidGen() );
+  let [ val_componentID ] = React.useState( $.uuidGen() )
 
-  let [ val_defValue,set_defValue ] = React.useState( value );
-  let [ val_value,set_value ] = React.useState( val_defValue );
+  let [ val_defValue,set_defValue ] = React.useState( value )
+  let [ val_value,set_value ] = React.useState( val_defValue )
   if ( val_defValue != value ) {
-    set_defValue( value );
-    set_value( value );
+    set_defValue( value )
+    set_value( value )
   }
 
   return <ListInputs.Radio
@@ -237,10 +237,10 @@ const Core: React.FC<CoreParams> = ( params ) => {
     tone={ 'custom' as any }
     onUpdateValue={ onUpdateValue }
     onUpdateValidValue={ ( args ) => {
-      if ( onUpdateValidValue ) onUpdateValidValue( args );
+      if ( onUpdateValidValue ) onUpdateValidValue( args )
       if ( appearance == 'BottomLine' ) {
-        set_value( args.value[ 0 ] );
+        set_value( args.value[ 0 ] )
       }
     } }
-  />;
+  />
 }