amotify 0.0.2 → 0.0.4

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

@@ -0,0 +1,235 @@
+@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

@@ -0,0 +1,215 @@
+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

@@ -0,0 +1,25 @@
+@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);
+  }
+}