amotify 0.0.64 → 0.0.66

package/src/functions/Sheet/style.module.scss

@@ -1,208 +0,0 @@
-@use '@props' as *;
-:global {
-  .AMOTIFY_be_sheet {
-    position: fixed;
-    // position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 0;
-    pointer-events: none;
-    z-index: 6;
-  }
-}
-html {
-  &.FixHeight {
-    .FixScroll {
-      overflow: hidden !important;
-      min-height: 0 !important;
-      height: calc($viewHeight );
-      width: calc(100vw);
-      transition: $animation-time-long;
-    }
-  }
-  &.FloatMainSheet {
-    @media (max-width:$breakPoint ) {
-      &.Type_bottom {
-        overflow: hidden;
-      }
-    }
-    .FixScroll {
-      opacity: .8 !important;
-      pointer-events: none;
-      transform-origin: center center;
-      transform: scale(.96);
-      border-radius: calc(calc(2vw + 2vh) / 2);
-    }
-  }
-}
-//Sheet
-.Wrap {
-  pointer-events: none !important;
-  .TapSensor {
-    position: sticky;
-    top: 0;
-    height: 0;
-    user-select: none;
-    -webkit-user-select: none;
-    -webkit-touch-callout: none;
-    flex: none;
-    .TapContent {
-      height: $viewHeight;
-      width: 100vw;
-    }
-  }
-  &.Hide {
-    display: none !important;
-  }
-  &.Open {
-    &.isNewSheet_ {
-      &true {
-        .Content {
-          pointer-events: all !important;
-          background-color: rgba(var(--color-dark-rgb), .25);
-        }
-      }
-      &false {
-        .BB {
-          pointer-events: all !important;
-        }
-      }
-    }
-  }
-  &.Tcate_ {
-    &normal {
-      .TapSensor:active + .BB {
-        transform: scale(1.015);
-        transition: $animation-time-short;
-        .BaseBody {
-          transition: $animation-time-short;
-          box-shadow: $shadow4;
-        }
-      }
-      .BB {
-        transform: scale(.75);
-        padding: $unit1;
-        pointer-events: none !important;
-        > * {
-          pointer-events: all;
-        }
-      }
-      &.Open .BB {
-        transform: scale(1);
-        opacity: 1;
-      }
-    }
-    &drawer {
-      $drawer: left, right;
-      @each $type in $drawer {
-        &.Tpos_#{ $type } {
-          .Content {
-            overflow: hidden auto;
-          }
-          .TapSensor:active + .BB {
-            transition: $animation-time-short;
-            #{ $type }: calc(-1 * $unit2 );
-          }
-          .BB {
-            max-width: 100vw;
-            #{ $type }: -10%;
-          }
-          &.Open .BB {
-            #{ $type }: 0;
-            opacity: 1;
-          }
-        }
-      }
-      &.Tpos_bottom {
-        .TapSensor:active + .BB {
-          padding-top: 2vh !important;
-          transition: $animation-time-short !important;
-        }
-        .BB {
-          padding-top: 10vh;
-          .DragBar {
-            position: relative;
-          }
-        }
-        &.Open {
-          .BB {
-            padding-top: 0;
-            opacity: 1 !important;
-            transition: $animation-time-long;
-          }
-        }
-      }
-    }
-    &custom {
-      .TapSensor:active + .BB {
-        transform: scale(1.015);
-        transition: $animation-time-short;
-        box-shadow: $shadow4;
-      }
-      .BB {
-        transform: scale(.95);
-        &.CustomSheet {
-          position: relative;
-        }
-      }
-      .GPT {
-        &.Col_1, &.Col_4 {
-          &.Row_1, &.Row_4 {
-            transform-origin: bottom right;
-          }
-          &.Row_2, &.Row_5 {
-            transform-origin: top right;
-          }
-        }
-        &.Col_2, &.Col_5 {
-          &.Row_1, &.Row_4 {
-            transform-origin: bottom left;
-          }
-          &.Row_2, &.Row_5 {
-            transform-origin: top left;
-          }
-        }
-        &_ {
-          &3, &18 {
-            transform-origin: bottom;
-          }
-          &8, &23 {
-            transform-origin: top;
-          }
-          &11, &14 {
-            transform-origin: right;
-          }
-          &12, &15 {
-            transform-origin: left;
-          }
-        }
-        &.Col_ {
-          &1, &4 {
-            right: 0;
-            justify-content: flex-end;
-          }
-          &2, &5 {
-            left: 0;
-          }
-          &3 {
-            align-items: center;
-            justify-content: center;
-          }
-        }
-        &.Row_ {
-          &1, &4 {
-            bottom: 0;
-          }
-          &2, &5 {
-            top: 0;
-          }
-        }
-      }
-      &.Open .BB {
-        transform: scale(1);
-        opacity: 1;
-      }
-    }
-  }
-}

package/src/functions/SnackBar/parts.tsx

@@ -1,215 +0,0 @@
-import {
-  launchID,
-  LaunchSubApplication,
-  useStore,
-  React
-} from '@global'
-import {
-  Box,
-  Flex,
-  FAI
-} from '@atoms'
-import {
-  Row,
-  Column
-} from '@mols'
-import {
-  Buttons
-} from '@fn'
-
-import style from './style.module.scss'
-
-const SnackBar: amotify.fn.SnackBar.Methods = {
-  __memoryID: $.uuidGen(),
-  add: function ( params ) {
-    useStore.get( 'SnackBar',this.__memoryID ).add( params )
-    return this
-  },
-  remove: function ( val_componentID ) {
-    useStore.get( 'SnackBar',this.__memoryID ).remove( val_componentID )
-    return this
-  }
-}
-
-
-type ElementParams = amotify.fn.SnackBar.AddParams & {
-  snackID: string
-}
-
-const Cell: React.FC<ElementParams> = ( props ) => {
-  let {
-    snackID,
-    secondsToClose = 10,
-    componentID = $.uuidGen(),
-    children: Children,
-    customChildren: CustomChildren,
-    ...others
-  } = props
-
-  let [ val_componentID ] = React.useState( componentID )
-  let [ val_mouseOn,set_mouseOn ] = React.useState( false )
-
-  React.useEffect( () => {
-    let Query = '[data-component-id="' + val_componentID + '"]'
-    setTimeout( () => {
-      $( Query ).addClass( style.FadeIn )
-    },10 )
-
-    useStore.set( {
-      key: 'SnackBar-' + snackID,
-      value: {
-        remove: () => {
-          $( Query ).addClass( style.FadeOut )
-        }
-      }
-    } )
-  },[] )
-
-  React.useEffect( () => {
-    $.interval.clear( 'SnackBar-' + val_componentID )
-    if ( !val_mouseOn ) {
-      setTimeout( () => {
-        $.interval.standBy(
-          'SnackBar-' + val_componentID,
-          secondsToClose * 1000,
-          () => {
-            if ( !val_mouseOn ) SnackBar.remove( snackID )
-          }
-        )
-      },100 )
-    }
-  },[ val_mouseOn ] )
-
-  let Content: ReactElement = <></>
-  if ( CustomChildren ) {
-    Content = <CustomChildren
-      close={ () => {
-        SnackBar.remove( snackID )
-      } }
-    />
-  } else {
-    Content = <Row.Separate
-      verticalAlign='top'
-    >
-      <Box
-        padding={ [ '1/4',0 ] }
-        flexSizing={ 0 }
-      >
-        { $.is.function( Children ) ? <Children /> : Children }
-      </Box>
-      <Buttons.Button.Clear.R
-        color='layer'
-        backgroundColor='lcOpLow'
-        fontColor='white'
-        ssSphere={ 2.5 }
-        onClick={ () => {
-          SnackBar.remove( snackID )
-        } }
-      >
-        <FAI.Times />
-      </Buttons.Button.Clear.R>
-    </Row.Separate>
-  }
-
-  return <Box
-    className={ style.Cell }
-    opacity='trans'
-    width={ 1 }
-    padding={ '2/3' }
-    marginBottom={ 1 }
-    borderRadius={ '1.tone.primary' }
-    fontColor={ 'white' }
-    boxShadow={ '1.remark' }
-    backgroundColor='dark'
-    transition={ 'middle' }
-    componentID={ val_componentID }
-    onMouseOver={ () => {
-      set_mouseOn( true )
-    } }
-    onMouseOut={ () => {
-      set_mouseOn( false )
-    } }
-    { ...others }
-  >
-    { Content }
-  </Box>
-}
-
-let SnackBarElements: ElementParams[] = []
-
-const SnackBarsWrap: React.FC<{}> = () => {
-  let [ val_refresh,set_refresh ] = React.useState( $.uuidGen() )
-
-  React.useEffect( () => {
-    useStore.set( {
-      key: 'SnackBar',
-      privateKey: SnackBar.__memoryID,
-      value: {
-        add: ( params: amotify.fn.SnackBar.AddParams ) => {
-          params.snackID = params.snackID || $.uuidGen()
-          let findIndex = SnackBarElements.findIndex( ( el ) => el.snackID == params.snackID )
-
-          if ( findIndex == -1 ) {
-            SnackBarElements.unshift( {
-              ...params,
-              snackID: params.snackID
-            } )
-          } else {
-            let newList = [ ...SnackBarElements ]
-            newList[ findIndex ] = {
-              ...params,
-              snackID: params.snackID
-            }
-            SnackBarElements = newList
-          }
-          set_refresh( $.uuidGen() )
-        },
-        remove: ( snackID: string ) => {
-          let component = useStore.get( 'SnackBar-' + snackID )
-          if ( component && component.remove ) {
-            component.remove()
-            setTimeout( () => {
-              let findIndex = SnackBarElements.findIndex( ( cell ) => cell.snackID == snackID )
-              if ( findIndex != -1 ) {
-                let newList = [ ...SnackBarElements ]
-                newList.splice( findIndex,1 )
-
-                SnackBarElements = newList
-                set_refresh( $.uuidGen() )
-              }
-            },210 )
-          }
-        }
-      }
-    } )
-  },[] )
-
-  let SnackBars = SnackBarElements.map( ( el ) => { return <Cell { ...el } key={ el.snackID } /> } )
-
-  return <Flex
-    className={ style.SnackBarsWrap }
-    position='fixed'
-    right={ 0 }
-    bottom={ 0 }
-    paddingLeft={ 0 }
-    paddingRight={ 1 }
-    paddingBottom={ 'safeAreaBottom' }
-    verticalAlign='bottom'
-    children={ SnackBars }
-    overflow='auto'
-    UnderBreakPointStyles={ {
-      left: 0,
-      paddingLeft: 1,
-      width: 'auto'
-    } }
-  />
-}
-
-LaunchSubApplication( {
-  isRoot: false,
-  baseElement: '#' + launchID + ' .AMOTIFY_be_snackbar',
-  reactElement: <SnackBarsWrap />,
-  nonRouter: true
-} )
-
-export { SnackBar }

package/src/functions/SnackBar/style.module.scss

@@ -1,25 +0,0 @@
-@use '@props' as *;
-:global {
-  .AMOTIFY_be_snackbar {
-    z-index: 8;
-    position: absolute;
-  }
-}
-.SnackBarsWrap {
-  max-height: $viewHeight;
-  max-width: 100%;
-  width: 25rem;
-}
-.Cell {
-  transform: scale(.3);
-  transform-origin: bottom right;
-  &.FadeIn {
-    transform: scale(1);
-    opacity: 1;
-  }
-  &.FadeOut {
-    transition: .2s !important;
-    opacity: 0;
-    transform: scale(.3);
-  }
-}