amotify 0.0.59 → 0.0.62

package/src/functions/Input/core.tsx

@@ -1,23 +1,23 @@
 import {
   useStore,
   React
-} from '@global';
+} from '@global'
 import {
   Box,
   Flex,
   FAI
-} from '@atoms';
+} from '@atoms'
 import {
   Column,
   Row,
   Text
-} from '@mols';
+} from '@mols'
 import {
   Buttons,
   Tooltips
-} from '@fn';
+} from '@fn'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
 type BoxWrapperParams = {
   val_status: any
@@ -34,15 +34,15 @@ export const BoxWrapper: React.FC<BoxWrapperParams> = ( props ) => {
     set_status,
     val_validate,
     params
-  } = props;
+  } = props
   let {
     clearButton,
     rightIcon,
     leftIcon,
     wrapStyles
-  } = params;
+  } = params
 
-  if ( val_status.eventType == 'init' && !params.checkValidationAtFirst ) val_validate.notice = [];
+  if ( val_status.eventType == 'init' && !params.checkValidationAtFirst ) val_validate.notice = []
 
   return <Box
     position='relative'
@@ -80,7 +80,7 @@ export const BoxWrapper: React.FC<BoxWrapperParams> = ( props ) => {
               formatValue: '',
               eventType: 'update',
               eventID: $.uuidGen()
-            } as any );
+            } as any )
           } }
         >
           <FAI.Times />
@@ -92,36 +92,36 @@ export const BoxWrapper: React.FC<BoxWrapperParams> = ( props ) => {
       notice={ val_validate.notice }
       val_status={ val_status }
     />
-  </Box>;
+  </Box>
 }
 const GenNotices: React.FC<{
   notice: amotify.fn.Input.Validation.NoticeTypes[]
   val_status: amotify.fn.Input.Status.Plain
 }> = ( params ) => {
-  let { notice,val_status } = params;
+  let { notice,val_status } = params
   let {
     componentID,
     eventType
-  } = val_status;
+  } = val_status
 
-  $.interval.clear( 'NoticeTimer-' + componentID );
-  $.interval.clear( 'NoticeTimerClose-' + componentID );
+  $.interval.clear( 'NoticeTimer-' + componentID )
+  $.interval.clear( 'NoticeTimerClose-' + componentID )
 
-  let parentID = 'notice-' + params.val_status.componentID;
-  let tipsID = 'notice-tips-' + params.val_status.componentID;
+  let parentID = 'notice-' + params.val_status.componentID
+  let tipsID = 'notice-tips-' + params.val_status.componentID
 
   if ( !notice.length ) {
-    Tooltips.close( tipsID );
-    return null;
+    Tooltips.close( tipsID )
+    return null
   }
 
   let Notices = notice.map( ( cell ) => {
-    let { type,label } = cell;
+    let { type,label } = cell
 
     let ICON =
       type == 'invalid' ? FAI.Times :
         type == 'warn' ? FAI.Exclamation :
-          FAI.Check;
+          FAI.Check
 
     return <Row.Left
       gap={ 0 }
@@ -141,8 +141,8 @@ const GenNotices: React.FC<{
       >
         { label }
       </Box>
-    </Row.Left>;
-  } );
+    </Row.Left>
+  } )
 
   $.interval.standBy(
     'NoticeTimer-' + componentID,
@@ -180,21 +180,21 @@ const GenNotices: React.FC<{
             { Notices }
           </Column>
         </Tooltips.Comps.Body>
-      } );
+      } )
 
       $.interval.standBy(
         'NoticeTimerClose-' + componentID,
         7500,
         () => {
-          Tooltips.close( tipsID );
+          Tooltips.close( tipsID )
         }
       )
-    } );
+    } )
 
   return <Box
     className={ style.Notices }
     id={ parentID }
-  />;
+  />
 }
 
 export const CommonEffects: {
@@ -224,13 +224,13 @@ export const CommonEffects: {
     DefaultValidation,
     onUpdateValue,
     onUpdateValidValue
-  } = props;
+  } = props
   params = { ...params }
   let {
     componentID
-  } = val_status;
+  } = val_status
 
-  let [ val_refresh,set_refresh ] = React.useState( $.uuidGen() );
+  let [ val_refresh,set_refresh ] = React.useState( $.uuidGen() )
 
   React.useEffect( () => {
     useStore.update( {
@@ -239,58 +239,58 @@ export const CommonEffects: {
         ResolveRefresh: null,
         Refresh: () => {
           return new Promise( ( res,rej ) => {
-            useStore.get( componentID ).ResolveRefresh = res;
-            set_refresh( $.uuidGen() );
-          } );
+            useStore.get( componentID ).ResolveRefresh = res
+            set_refresh( $.uuidGen() )
+          } )
         },
         GenNotice: ( props: { ok: boolean,notice: amotify.fn.Input.Validation.NoticeTypes[] } ) => {
-          let { ok,notice } = props;
-          set_validate( { ok,notice } );
+          let { ok,notice } = props
+          set_validate( { ok,notice } )
         },
         ...ExtraStoreParams
       }
-    } );
+    } )
     return () => {
-      useStore.delete( componentID );
+      useStore.delete( componentID )
     }
-  },[] );
+  },[] )
 
-  const mounted = React.useRef( false );
+  const mounted = React.useRef( false )
   React.useEffect( () => {
     if ( mounted.current ) {
       set_status( {
         ...val_status,
         eventType: 'refresh',
         eventID: $.uuidGen()
-      } );
+      } )
     } else {
-      mounted.current = true;
+      mounted.current = true
     }
-  },[ val_refresh ] );
+  },[ val_refresh ] )
   React.useEffect( () => {
-    params.value = val_status.dataValue;
+    params.value = val_status.dataValue
 
-    $.interval.clear( 'ValidationTimer-' + componentID );
+    $.interval.clear( 'ValidationTimer-' + componentID )
 
     ValidationCheck( {
       val_status,
       set_validate,
       DefaultValidation,
       params
-    } );
+    } )
   },[ val_status.eventID ] );
 
   ( () => {
     let {
       override
-    } = params;
-    if ( override == 'never' ) return;
+    } = params
+    if ( override == 'never' ) return
     if ( override == 'beforeModified' ) {
-      if ( ![ 'init','override' ].includes( val_status.eventType ) ) return;
+      if ( ![ 'init','override' ].includes( val_status.eventType ) ) return
     }
 
-    let component = useStore.get( val_status.componentID );
-    if ( !component ) return;
+    let component = useStore.get( val_status.componentID )
+    if ( !component ) return
     if (
       params.value != val_status.dataValue &&
       params.status_id != component.status_id
@@ -301,36 +301,36 @@ export const CommonEffects: {
         ...ExtraOverrideParams,
         eventType: 'override',
         eventID: $.uuidGen()
-      } );
+      } )
     }
-    component.status_id = params.status_id;
-  } )();
+    component.status_id = params.status_id
+  } )()
 
   React.useEffect( () => {
     let {
       componentID,
       eventType,
       dataValue
-    } = val_status;
-    let Value = dataValue;
+    } = val_status
+    let Value = dataValue
     if ( type == 'list' ) {
       Value = dataValue.map( ( value: any ) => JSON.parse( value ) )
     } else if ( type == 'select' ) {
-      Value = JSON.parse( dataValue );
+      Value = JSON.parse( dataValue )
     } else if ( type == 'richSelect' ) {
-      Value = JSON.parse( dataValue );
+      Value = JSON.parse( dataValue )
     } else if ( type == 'file' ) {
       useStore.update( {
         key: componentID,
         value: {
           Files: val_status.dataValue
         }
-      } );
+      } )
     }
 
     if ( eventType == 'refresh' ) {
-      let comp = useStore.get( componentID );
-      if ( comp && comp.ResolveRefresh ) comp.ResolveRefresh( null );
+      let comp = useStore.get( componentID )
+      if ( comp && comp.ResolveRefresh ) comp.ResolveRefresh( null )
     }
 
     if ( eventType == 'update' ) {
@@ -339,21 +339,21 @@ export const CommonEffects: {
         value: Value,
         storeData: useStore.get( componentID ),
         eventType: eventType
-      } );
+      } )
 
       $.fnScope( () => {
-        if ( !val_validate.ok ) return;
-        // if ( $.is.nullish( Value ) ) return;
-        if ( !onUpdateValidValue ) return;
+        if ( !val_validate.ok ) return
+        // if ( $.is.nullish( Value ) ) return
+        if ( !onUpdateValidValue ) return
         onUpdateValidValue( {
           componentID,
           value: Value,
           storeData: useStore.get( componentID ),
           eventType: eventType
-        } );
-      } );
+        } )
+      } )
     }
-  },[ val_validate ] );
+  },[ val_validate ] )
 }
 
 export const ValidationCheck: {
@@ -369,27 +369,27 @@ export const ValidationCheck: {
     params,
     set_validate,
     DefaultValidation
-  } = props;
+  } = props
 
   let result = DefaultValidation( {
     value: val_status.dataValue,
     params: params
-  } );
+  } )
 
   if ( !result.ok ) {
-    set_validate( result );
-    return;
+    set_validate( result )
+    return
   }
-  let sysDefaultNotice = result.notice;
+  let sysDefaultNotice = result.notice
 
   const FN = async () => {
-    if ( !params.onValidate ) return;
+    if ( !params.onValidate ) return
 
     let result = await params.onValidate( {
       value: val_status.dataValue,
       eventType: val_status.eventType,
       props: props
-    } );
+    } )
     if ( !result.ok ) {
       set_validate( {
         ok: false,
@@ -397,8 +397,8 @@ export const ValidationCheck: {
           ...sysDefaultNotice,
           ...result.notice
         ]
-      } );
-      return;
+      } )
+      return
     }
     set_validate( {
       ok: true,
@@ -406,18 +406,18 @@ export const ValidationCheck: {
         ...sysDefaultNotice,
         ...result.notice
       ]
-    } );
+    } )
   }
 
   if ( params.onValidate ) {
     if ( val_status.eventType == 'refresh' ) {
-      FN();
+      FN()
     } else {
       $.interval.standBy(
         'ValidationTimer-' + val_status.componentID,
         450,
         FN
-      );
+      )
     }
   } else {
     set_validate( {
@@ -430,27 +430,27 @@ export const ValidationCheck: {
 export const SubmitForm = (
   event: React.KeyboardEvent
 ) => {
-  let input = event.target as HTMLInputElement;
-  let { form,formName } = input.dataset;
-  form = formName || form;
-  let complete = false;
+  let input = event.target as HTMLInputElement
+  let { form,formName } = input.dataset
+  form = formName || form
+  let complete = false
 
-  let Button = $( `[data-form-submit-button="${ form }"]` )[ 0 ];
-  if ( !Button ) return complete;
+  let Button = $( `[data-form-submit-button="${ form }"]` )[ 0 ]
+  if ( !Button ) return complete
 
-  let gestures = Button.dataset.sdfike || '';
-  let key = event.key;
-  let auxKey = event.ctrlKey || event.metaKey;
+  let gestures = Button.dataset.sdfike || ''
+  let key = event.key
+  let auxKey = event.ctrlKey || event.metaKey
 
   $.fnScope( () => {
     if ( gestures.includes( 'enter' ) ) {
-      if ( key != 'Enter' ) return;
+      if ( key != 'Enter' ) return
 
-      let isComposing = event.nativeEvent.isComposing;
-      if ( isComposing ) return;
+      let isComposing = event.nativeEvent.isComposing
+      if ( isComposing ) return
 
       if ( amotify.config.device.browserIs == 'safari' ) {
-        if ( event.keyCode == 229 ) return;
+        if ( event.keyCode == 229 ) return
       }
     }
 
@@ -462,12 +462,12 @@ export const SubmitForm = (
         key == ' ' && gestures.includes( 'space' )
       )
     ) {
-      Button.click();
-      event.preventDefault();
+      Button.click()
+      event.preventDefault()
     }
 
-    complete = true;
-  } );
+    complete = true
+  } )
 
-  return complete;
+  return complete
 }

package/src/functions/Inputs/_.tsx

@@ -1,4 +1,4 @@
-import { TextInput } from './text';
+import { TextInput } from './text'
 
 export const Inputs = {
   TextInput

package/src/functions/Inputs/text.tsx

@@ -1,11 +1,11 @@
-import React from 'react';
+import React from 'react'
 import {
   StyleConverter
-} from '@global';
+} from '@global'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
-import { TextInputs } from './types';
+import { TextInputs } from './types'
 
 let ToneStyles: {
   common: amotifyBasicElement
@@ -49,5 +49,5 @@ export const TextInput = ( params: TextInputs.Text.Params ) => {
     placeholder='fvdgsbsfgdvs'
     // value={ 'AAAA' }
     { ...StyleConverter.ToClassName( params ) }
-  />;
+  />
 }

package/src/functions/Layout/PageNotFound.tsx

@@ -1,20 +1,20 @@
-import React from 'react';
+import React from 'react'
 import {
   Box,
   FAI
-} from '@atoms';
+} from '@atoms'
 import {
   Column,
   Row,
   Text
-} from '@mols';
+} from '@mols'
 import {
   Buttons
-} from '@fn';
+} from '@fn'
 
 export const PageNotFound: React.FC<{}> = () => {
 
-  let { href } = location;
+  let { href } = location
 
   return <Row.Center
     padding={ [ 4,1 ] }
@@ -74,5 +74,5 @@ export const PageNotFound: React.FC<{}> = () => {
         children={ 'ホームに戻る' }
       />
     </Column>
-  </Row.Center>;
+  </Row.Center>
 }

package/src/functions/Layout/PageRouter.tsx

@@ -1,10 +1,10 @@
 import {
   useStore,
   React
-} from '@global';
+} from '@global'
 import {
   Layout
-} from '@fn';
+} from '@fn'
 
 import {
   useNavigate,
@@ -12,72 +12,56 @@ import {
   BrowserRouter,
   Routes,
   Route,
-} from 'react-router-dom';
+} from 'react-router-dom'
 
 const userEffect = ( beforeCallback?: Function,afterCallback?: Function,afterFirstCallback?: Function ) => {
-  const mounted = React.useRef( false );
-  let location = useLocation();
-  let navigate = useNavigate();
+  const mounted = React.useRef( false )
+  let location = useLocation()
+  let navigate = useNavigate()
   useStore.set( {
     key: 'navigate',
     value: navigate
-  } );
+  } )
 
   React.useEffect( () => {
     if ( mounted.current ) {
-      amotify.fn.Sheet.closeAll( true );
-      $( '#TopNavigation' )
-        .callback( ( topHeader ) => {
-          let Body = $( document.body );
-          if ( topHeader[ 0 ] ) {
-            Body.setStyleProperty( '--topNavHeight',topHeader.position().height + 'px' );
-          } else {
-            Body.setStyleProperty( '--topNavHeight','0px' );
-          }
-        } );
-      $( '#FooterNavigation' )
-        .callback( ( footerHeader ) => {
-          let Body = $( document.body );
-          if ( footerHeader[ 0 ] ) {
-            Body.setStyleProperty( '--footerNavHeight',footerHeader.position().height + 'px' );
-          } else {
-            Body.setStyleProperty( '--footerNavHeight','0px' );
-          }
-        } );
+      amotify.fn.Sheet.closeAll( true )
+
+      Layout.RootViewController.fn.updateCSSProperty.reset()
     } else {
-      mounted.current = true;
+      mounted.current = true
     }
-  },[ location.pathname ] );
+  },[ location.pathname ] )
 
-  if ( beforeCallback ) beforeCallback( location );
+  if ( beforeCallback ) beforeCallback( location )
 
   React.useEffect( () => {
-    if ( afterFirstCallback ) afterFirstCallback( location );
-  },[] );
+    if ( afterFirstCallback ) afterFirstCallback( location )
+  },[] )
   React.useEffect( () => {
     setTimeout( () => {
-      window.dispatchEvent( new Event( 'resize' ) );
-    },200 );
-    if ( afterCallback ) afterCallback( location );
-  },[ location ] );
+      window.dispatchEvent( new Event( 'resize' ) )
+    },200 )
+    if ( afterCallback ) afterCallback( location )
+  },[ location ] )
 }
 
 const Switcher: React.FC<amotify.fn.Layout.PageRouter.RoutesSwitchProps> = ( props ) => {
-  let { routes,beforeCallBack,afterCallBack,afterFirstCallBack } = props;
+  let { routes,beforeCallBack,afterCallBack,afterFirstCallBack } = props
 
-  userEffect( beforeCallBack,afterCallBack,afterFirstCallBack );
+  userEffect( beforeCallBack,afterCallBack,afterFirstCallBack )
 
   let Routing = routes.map( ( page ) => {
-    let { path,content } = page;
-    path = '/' + path.replace( /^\//,'' );
+    let { path,content } = page
+    path = '/' + path.replace( /^\//,'' )
 
 
     return <Route
       key={ path }
       path={ path }
       element={ content }
-    />;
-  } );
+    />
+  } )
 
   return <Routes>
     { Routing }
@@ -85,7 +69,7 @@ const Switcher: React.FC<amotify.fn.Layout.PageRouter.RoutesSwitchProps> = ( pro
       path='*'
       element={ <Layout.PageNotFound /> }
     />
-  </Routes>;
+  </Routes>
 }
 
 export const PageRouter: React.FC<amotify.fn.Layout.PageRouter.RouterProps> = ( props ) => {
@@ -94,12 +78,12 @@ export const PageRouter: React.FC<amotify.fn.Layout.PageRouter.RouterProps> = (
     beforeCallBack,
     afterCallBack,
     afterFirstCallBack
-  } = props;
+  } = props
 
   return <Switcher
     routes={ pages }
     beforeCallBack={ beforeCallBack }
     afterCallBack={ afterCallBack }
     afterFirstCallBack={ afterFirstCallBack }
-  />;
+  />
 }

package/src/functions/Layout/PageViewController/parts.tsx

@@ -1,10 +1,10 @@
 import {
   React
-} from '@global';
+} from '@global'
 
 import {
   Effects
-} from '@fn';
+} from '@fn'
 
 export const PageViewController: React.FC<amotify.fn.Layout.PageViewController.Params> = ( params ) => {
   let {
@@ -15,13 +15,13 @@ export const PageViewController: React.FC<amotify.fn.Layout.PageViewController.P
       animationTime={ 400 }
       children={ body }
     /> )
-  } = params;
-  viewIndex = Math.min( Math.max( viewIndex,0 ),views.length );
+  } = params
+  viewIndex = Math.min( Math.max( viewIndex,0 ),views.length )
 
-  let [ val_index,set_index ] = React.useState( viewIndex );
-  if ( val_index != viewIndex ) set_index( viewIndex );
+  let [ val_index,set_index ] = React.useState( viewIndex )
+  if ( val_index != viewIndex ) set_index( viewIndex )
 
   return <>
     { wrapper( views[ viewIndex ] ) }
-  </>;
+  </>
 }

package/src/functions/Layout/Plate.tsx

@@ -1,13 +1,13 @@
-import React from 'react';
+import React from 'react'
 import {
   Box
-} from '@atoms';
+} from '@atoms'
 
 export const Plate: React.FC<amotify.fn.Layout.Plate.Params> = ( props ) => {
   let {
     size = 'R',
     ...others
-  } = props;
+  } = props
 
   let Size = {
     'XS': 48,
@@ -16,7 +16,7 @@ export const Plate: React.FC<amotify.fn.Layout.Plate.Params> = ( props ) => {
     'L': 84,
     'XL': 100,
     'MAX': 120,
-  }[ size ];
+  }[ size ]
 
   return <Box
     margin={ [ 0,'auto' ] }
@@ -26,5 +26,5 @@ export const Plate: React.FC<amotify.fn.Layout.Plate.Params> = ( props ) => {
       maxWidth: 12 * Size,
       ...others.freeCSS
     } }
-  />;
+  />
 }