amotify 0.0.4 → 0.0.5

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

@@ -1,235 +0,0 @@
-@use '@uniVar' as *;
-//SheetBase
-:global {
-  #SHEET {
-    // position: absolute;
-    position: sticky;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 0;
-    pointer-events: none;
-    z-index: 6;
-  }
-}
-html {
-  &.FixHeight {
-    :global {
-      #ROOT {
-        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;
-        }
-      }
-    }
-    :global {
-      #ROOT {
-        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: 0 0 0 transparent inset, $shadow4;
-        }
-      }
-      .BB {
-        transform: scale(.75);
-        padding: $unit1;
-        pointer-events: none !important;
-        > * {
-          pointer-events: all;
-        }
-      }
-      @media (max-width:$breakPoint ) {
-        .BB {
-          width: 100vw;
-        }
-      }
-      &.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%;
-            @media (max-width : $breakPoint ) {
-              min-width: 25rem !important;
-              .Footer {
-                padding-bottom: $safe-area-top;
-              }
-            }
-            @media (max-width : $breakPoint ) {
-              min-width: 0 !important;
-              max-width: 85vw !important;
-            }
-          }
-          &.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: 0 0 0 transparent inset, $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;
-          }
-        }
-      }
-      // @media (max-width:$breakPoint ) {
-      //   .BB {
-      //     width: 100vw;
-      //   }
-      // }
-      &.Open .BB {
-        transform: scale(1);
-        opacity: 1;
-      }
-    }
-  }
-}

package/src/Functions/SnackBar/parts.tsx

@@ -1,215 +0,0 @@
-import {
-  LaunchReactApplication,
-  useStore
-} from '@global';
-import {
-  Box,
-  Flex,
-  FAIcon
-} from '@atoms';
-import {
-  Row,
-  Column
-} from '@mols';
-import {
-  Buttons
-} from '@functions';
-const {
-  useEffect,
-  useState,
-} = React;
-
-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: FNC<ElementParams> = ( props ) => {
-  let {
-    snackID,
-    secondsToClose = 10,
-    componentID = $.uuidGen(),
-    children: Children,
-    customChildren: CustomChildren,
-    ...others
-  } = props;
-
-  let [ val_componentID ] = useState( componentID );
-  let [ val_mouseOn,set_mouseOn ] = useState( false );
-
-  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 );
-        }
-      }
-    } );
-  },[] );
-
-  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'
-        ssSphere={ 2.5 }
-        onClick={ () => {
-          SnackBar.remove( snackID );
-        } }
-      >
-        <FAIcon.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={ 2 }
-    backgroundColor='dark'
-    transition={ 'middle' }
-    componentID={ val_componentID }
-    onMouseOver={ () => {
-      set_mouseOn( true );
-    } }
-    onMouseOut={ () => {
-      set_mouseOn( false );
-    } }
-    { ...others }
-  >
-    { Content }
-  </Box>
-}
-
-let SnackBarElements: ElementParams[] = [];
-
-const SnackBarsWrap: FNC<{}> = () => {
-  let [ val_refresh,set_refresh ] = useState( $.uuidGen() );
-
-  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'
-    } }
-  /> );
-}
-
-LaunchReactApplication( {
-  baseElement: '#SNACKBARS',
-  reactElement: <SnackBarsWrap />,
-  nonRouter: true
-} );
-
-export { SnackBar }

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

@@ -1,25 +0,0 @@
-@use '@uniVar' as *;
-:global {
-  #SNACKBARS {
-    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);
-  }
-}