amotify 0.0.64 → 0.0.66

package/src/functions/Layout/PageNotFound.tsx

@@ -1,78 +0,0 @@
-import React from 'react'
-import {
-  Box,
-  FAI
-} from '@atoms'
-import {
-  Column,
-  Row,
-  Text
-} from '@mols'
-import {
-  Buttons
-} from '@fn'
-
-export const PageNotFound: React.FC<{}> = () => {
-
-  let { href } = location
-
-  return <Row.Center
-    padding={ [ 4,1 ] }
-  >
-    <Column
-      ssCardBox
-      gap={ 2 }
-      padding={ [ 3,2 ] }
-      textAlign='center'
-      width={ 1 }
-      freeCSS={ {
-        maxWidth: 12 * 30
-      } }
-    >
-      <FAI.LinkSlash
-        fontColor={ 'theme' }
-        freeCSS={ {
-          fontSize: '3rem'
-        } }
-      />
-      <Box>
-        <Text.Paragraph>
-          このページはご利用いただけません。
-        </Text.Paragraph>
-        <Text.Supplement
-          fontColor='3.blur'
-        >
-          入力されたリンクのページは存在しませんでした。
-        </Text.Supplement>
-      </Box>
-
-      <Column>
-        <Text.Normal
-          textAlign='left'
-          ssCardBox='cloud'
-          isSemiBoldFont
-          padding={ 1 }
-        >
-          ・リンクが正しいか
-          <Box margin={ [ '1/2',0 ] } borderBottom />
-          ・リンクの有効期限
-          <Box margin={ [ '1/2',0 ] } borderBottom />
-          ・アクセス権限等が正しいか
-        </Text.Normal>
-        などをもう一度確認してください。
-      </Column>
-
-      <Buttons.Anchor.Link
-        newTab
-        href={ href }
-      >
-        { href }
-      </Buttons.Anchor.Link>
-      <Buttons.Anchor.BorderToFill.R
-        href='/'
-        width={ 1 }
-        children={ 'ホームに戻る' }
-      />
-    </Column>
-  </Row.Center>
-}

package/src/functions/Layout/PageRouter.tsx

@@ -1,89 +0,0 @@
-import {
-  useStore,
-  React
-} from '@global'
-import {
-  Layout
-} from '@fn'
-
-import {
-  useNavigate,
-  useLocation,
-  BrowserRouter,
-  Routes,
-  Route,
-} from 'react-router-dom'
-
-const userEffect = ( beforeCallback?: Function,afterCallback?: Function,afterFirstCallback?: Function ) => {
-  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 )
-
-      Layout.RootViewController.fn.updateCSSProperty.reset()
-    } else {
-      mounted.current = true
-    }
-  },[ location.pathname ] )
-
-  if ( beforeCallback ) beforeCallback( location )
-
-  React.useEffect( () => {
-    if ( afterFirstCallback ) afterFirstCallback( location )
-  },[] )
-  React.useEffect( () => {
-    setTimeout( () => {
-      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
-
-  userEffect( beforeCallBack,afterCallBack,afterFirstCallBack )
-
-  let Routing = routes.map( ( page ) => {
-    let { path,content } = page
-    path = '/' + path.replace( /^\//,'' )
-
-
-    return <Route
-      key={ path }
-      path={ path }
-      element={ content }
-    />
-  } )
-
-  return <Routes>
-    { Routing }
-    <Route
-      path='*'
-      element={ <Layout.PageNotFound /> }
-    />
-  </Routes>
-}
-
-export const PageRouter: React.FC<amotify.fn.Layout.PageRouter.RouterProps> = ( props ) => {
-  let {
-    pages,
-    beforeCallBack,
-    afterCallBack,
-    afterFirstCallBack
-  } = props
-
-  return <Switcher
-    routes={ pages }
-    beforeCallBack={ beforeCallBack }
-    afterCallBack={ afterCallBack }
-    afterFirstCallBack={ afterFirstCallBack }
-  />
-}

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

@@ -1,27 +0,0 @@
-import {
-  React
-} from '@global'
-
-import {
-  Effects
-} from '@fn'
-
-export const PageViewController: React.FC<amotify.fn.Layout.PageViewController.Params> = ( params ) => {
-  let {
-    viewIndex = 0,
-    views,
-    wrapper = ( body ) => ( <Effects.FadeIn
-      key={ viewIndex }
-      animationTime={ 400 }
-      children={ body }
-    /> )
-  } = 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 )
-
-  return <>
-    { wrapper( views[ viewIndex ] ) }
-  </>
-}

package/src/functions/Layout/Plate.tsx

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

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

@@ -1,300 +0,0 @@
-import {
-  React,
-  useRecycle,
-  pageTransit
-} from '@global'
-import {
-  Box,
-  Flex,
-} from '@atoms'
-import {
-  Column
-} from '@mols'
-import {
-  Buttons
-} from '@fn'
-
-import style from './style.module.scss'
-
-export const RootViewController: amotify.fn.Layout.RootViewController.Methods = {
-  Base: ( params ) => {
-    let {
-      topNavigation,
-      sideNavigation,
-      footerNavigation,
-      children,
-      className,
-      ...others
-    } = params
-    let Key = useRecycle.set( 'RootViewController' )
-
-    React.useEffect( () => {
-      RootViewController.fn.updateCSSProperty.reset()
-      setTimeout( () => {
-        RootViewController.fn.updateCSSProperty.reset()
-      },100 )
-
-      let getSideNavigationHeight = 'ResizeCB'
-      let beforeunload = 'RemovePageEventCB'
-
-      $( window ).addEvent( {
-        eventType: 'resize',
-        eventID: getSideNavigationHeight,
-        callback: () => {
-          if ( amotify.config.device.isPhonepoint() ) return;
-          $.interval.clear( '__RVC_calcHeights' )
-          $.interval.standBy( '__RVC_calcHeights',300,() => {
-            RootViewController.fn.updateCSSProperty.reset()
-          } )
-        }
-      } )
-      return () => {
-        $( window ).removeEvent( beforeunload )
-        $( window ).removeEvent( getSideNavigationHeight )
-      }
-    },[] )
-
-    let Chilren: ReactElement = children
-
-    return <Column
-      key={ Key }
-      className={ [
-        className,
-        style.Root,
-      ].join( ' ' ) }
-      backgroundColor='1.layer.base'
-      gap={ 0 }
-      minHeight={ 'viewHeight' }
-      { ...others }
-    >
-      { topNavigation }
-      <Flex
-        className={ style.Body }
-        flexWrap={ false }
-        position='relative'
-        flexSizing={ 0 }
-      >
-        { sideNavigation }
-        <Box
-          className={ style.Content }
-          position='relative'
-          flexSizing={ 0 }
-          width={ 0 }
-          UnderBreakPointStyles={ {
-            width: 'auto'
-          } }
-        >
-          { Chilren }
-        </Box>
-      </Flex>
-      { footerNavigation }
-    </Column>
-  },
-  TopNavigation: ( params ) => {
-    let {
-      className,
-      children,
-      ...others
-    } = params
-
-    let [ val_componentID ] = React.useState( $.uuidGen() )
-
-    React.useEffect( () => {
-      RootViewController.fn.updateCSSProperty.topNav()
-    },[] )
-
-    return <Flex
-      key={ val_componentID }
-      data-id={ val_componentID }
-      flexSizing={ 'none' }
-      flexType='col'
-      position='sticky'
-      top={ 0 }
-      backgroundColor='1.layer.base'
-      { ...others }
-      id='__RVC_TopNavigation'
-      className={ [
-        className,
-        style.TopNav
-      ].join( ' ' ) }
-    >
-      { children }
-    </Flex>
-  },
-  SideNavigation: ( params ) => {
-    let {
-      className = '',
-      baseStyles,
-      ...others
-    } = params
-
-    return <Box
-      flexSizing={ 'none' }
-      className={ [
-        className,
-        style.SideNav
-      ].join( ' ' ) }
-      minHeight='sideNavigationHeight'
-      { ...others }
-    />
-  },
-  FooterNavigation: ( params ) => {
-    let {
-      className = '',
-      baseStyles,
-      ...others
-    } = params
-    let [ val_componentID ] = React.useState( $.uuidGen() )
-
-    React.useEffect( () => {
-      RootViewController.fn.updateCSSProperty.footer()
-    },[] )
-
-    return <Flex
-      data-id={ val_componentID }
-      borderTop
-      position='sticky'
-      bottom={ 0 }
-      overflow={ 'auto' }
-      backgroundColor='1.layer.base'
-      paddingBottom={ 'safeAreaBottom' }
-      { ...baseStyles }
-      id='__RVC_FooterNavigation'
-      className={ [
-        style.FooterNav,
-        className
-      ].join( ' ' ) }
-    >
-      <Flex
-        gap={ 1 }
-        flexWrap={ false }
-        padding={ '2/3' }
-        margin={ 'auto' }
-        { ...others }
-      />
-    </Flex>
-  },
-  Comps: {
-    Button: ( params ) => {
-      let {
-        isActive,
-        uri,
-        uriGroup,
-        activeClassName = '',
-        ...others
-      } = params
-
-      let groups = $.flatArray( uriGroup )
-
-      let currentURL = location.pathname
-
-      {
-        let isCurrentURL = false
-        if ( $.is.exist( uri ) && $.is.string( uri ) ) {
-          let url = [
-            location.origin,
-            uri.replace( /\//,'' )
-          ].join( '/' )
-          isCurrentURL = currentURL == new URL( url ).pathname
-        }
-
-        if ( !isCurrentURL ) {
-          if ( groups.length ) {
-            for ( let group of groups ) {
-              if ( $.is.nullish( group ) ) continue
-              if ( !!currentURL.match( new RegExp( group ) ) ) isCurrentURL = true
-            }
-          }
-        }
-        isActive = isActive ?? isCurrentURL
-      }
-
-      return <Buttons.Button.Clear.R
-        padding={ [ '3/4',1 ] }
-        display='flex'
-        gap='1/2'
-        fontColor='inherit'
-        width={ 1 }
-        flexSizing={ 'none' }
-        flexWrap={ false }
-        ssEffectsOnActive='ripple.cloud'
-        verticalAlign='center'
-        textAlign='left'
-        isSemiBoldFont
-        isActive={ isActive }
-        isActiveStyles={ {
-          fontColor: 'theme',
-          backgroundColor: 'cloud'
-        } }
-        onClick={ ( event ) => {
-          if ( $.is.exist( uri ) && $.is.string( uri ) ) pageTransit.push( uri,event.ctrlKey || event.metaKey )
-        } }
-        color={ 'cloud' }
-        { ...others }
-      />
-    },
-    Bar: ( params ) => ( <Box
-      flexSizing={ 'none' }
-      backgroundColor={ 'lcOpMiddle' }
-      unitHeight={ '1/3' }
-      margin={ [ '2/3',1 ] }
-      borderRadius='sphere'
-      { ...params }
-    /> ),
-    Title: ( params ) => ( <Box
-      fontSize='3.paragraph'
-      isSemiBoldFont
-      padding={ [ 0,1 ] }
-      { ...params }
-    /> ),
-  },
-  fn: {
-    updateCSSProperty: {
-      topNav: () => {
-        let Body = $( document.body )
-        let TopNav = $( '#__RVC_TopNavigation' )
-        let topNavHeight = TopNav.position().height || 0
-        let topBase = topNavHeight
-
-        if ( TopNav.getStyleProperty( 'position' ) != 'sticky' ) {
-          topBase = 0
-        }
-
-        Body
-          .setStyleProperty( '--topNavHeight',topNavHeight + 'px' )
-          .setStyleProperty( '--topBase',topBase + 'px' )
-      },
-      footer: () => {
-        let Body = $( document.body )
-        let Footer = $( '#__RVC_FooterNavigation' )
-        let footerHeight = Footer.position().height || 0
-
-        Body
-          .setStyleProperty( '--footerNavHeight',footerHeight + 'px' )
-      },
-      reset: () => {
-        let Body = $( document.body )
-        let TopNav = $( '#__RVC_TopNavigation' )
-        let Footer = $( '#__RVC_FooterNavigation' )
-        let topNavHeight = TopNav.position().height || 0
-        let topBase = topNavHeight
-        let footerHeight = Footer.position().height || 0
-
-        if ( TopNav.getStyleProperty( 'position' ) != 'sticky' ) {
-          topBase = 0
-        }
-
-        let viewHeight = window.innerHeight
-        let contentHeight = viewHeight - topNavHeight - footerHeight
-
-        Body
-          .setStyleProperty( '--topNavHeight',topNavHeight + 'px' )
-          .setStyleProperty( '--topBase',topBase + 'px' )
-          .setStyleProperty( '--footerNavHeight',footerHeight + 'px' )
-          .setStyleProperty( '--viewHeight',viewHeight + 'px' )
-          .setStyleProperty( '--sideNavHeight',contentHeight + 'px' )
-          .setStyleProperty( '--contentHeight',contentHeight + 'px' )
-      },
-    }
-  }
-}

package/src/functions/Layout/RootViewController/style.module.scss

@@ -1,23 +0,0 @@
-@use '@props' as *;
-.Content {
-  @media (max-width:$breakPoint ) {
-    min-height: calc($viewHeight - $topNavigationHeight - $footerNavigationHeight );
-  }
-}
-.Root {
-  .TopNav {
-    z-index: 5;
-  }
-  .FooterNav {
-    z-index: 4;
-  }
-  .Body {
-    .SideNav {
-      z-index: 3;
-      .Wrap {}
-    }
-    .Content {
-      z-index: 2;
-    }
-  }
-}