amotify 0.0.2 → 0.0.4

package/src/Functions/Loader/parts.tsx

@@ -0,0 +1,105 @@
+import {
+  LaunchReactApplication,
+  useStore
+} from '@global';
+const {
+  useEffect,
+  useState,
+} = React;
+
+import style from './style.module.scss';
+
+export const memoryID = $.uuidGen();
+import { Mini } from './mini';
+import { Top } from './top';
+import { Corner } from './corner';
+
+const SizeWrapper: {
+  ( params: {
+    color: amotify.fn.Loader.Colors
+  } ): {
+    S: FNC<amotify.fn.Loader.CompInput>
+    R: FNC<amotify.fn.Loader.CompInput>
+    L: FNC<amotify.fn.Loader.CompInput>
+    XL: FNC<amotify.fn.Loader.CompInput>
+    MAX: FNC<amotify.fn.Loader.CompInput>
+  }
+} = ( params ) => {
+  let color = params.color;
+  return {
+    S: ( params ) => <Mini size='S' color={ color } { ...params } />,
+    R: ( params ) => <Mini size='R' color={ color } { ...params } />,
+    L: ( params ) => <Mini size='L' color={ color } { ...params } />,
+    XL: ( params ) => <Mini size='XL' color={ color } { ...params } />,
+    MAX: ( params ) => <Mini size='MAX' color={ color } { ...params } />,
+  }
+}
+
+const Loader: amotify.fn.Loader.Methods = {
+  __memoryID: memoryID,
+  Theme: SizeWrapper( { color: 'theme' } ),
+  Posi: SizeWrapper( { color: 'posi' } ),
+  Nega: SizeWrapper( { color: 'nega' } ),
+  Warn: SizeWrapper( { color: 'warn' } ),
+  White: SizeWrapper( { color: 'white' } ),
+  Cloud: SizeWrapper( { color: 'cloud' } ),
+  fn: {
+    top: {
+      active: () => {
+        useStore.get( memoryID + '-top' ).active();
+      },
+      stop: () => {
+        useStore.get( memoryID + '-top' ).stop();
+      },
+    },
+    corner: {
+      active: () => {
+        useStore.get( memoryID + '-corner' ).active();
+      },
+      stop: () => {
+        useStore.get( memoryID + '-corner' ).stop();
+      },
+    },
+    mini: {
+      active: ( keyCode = '' ) => {
+        $( '.' + style.MiniLoader ).for( ( elm ) => {
+          let { dataset: { componentId } = {} } = elm;
+          if ( !componentId ) return;
+          let fn = useStore.get( componentId );
+          if ( fn && fn.active ) fn.active( keyCode );
+        } );
+      },
+      stop: ( keyCode = '' ) => {
+        $( '.' + style.MiniLoader ).for( ( elm ) => {
+          let { dataset: { componentId } = {} } = elm;
+          if ( !componentId ) return;
+          let fn = useStore.get( componentId );
+          if ( fn && fn.stop ) fn.stop( keyCode );
+        } );
+      },
+      stopALL: () => {
+        $( '.' + style.MiniLoader ).for( ( elm ) => {
+          let { dataset: { componentId } = {} } = elm;
+          if ( !componentId ) return;
+          let fn = useStore.get( componentId );
+          if ( fn && fn.stopForce ) fn.stopForce();
+        } );
+      },
+    },
+    stopALL: () => {
+      Loader.fn.top.stop();
+      Loader.fn.corner.stop();
+      Loader.fn.mini.stopALL();
+    }
+  }
+}
+export { Loader }
+
+LaunchReactApplication( {
+  baseElement: '#LOADER',
+  reactElement: <>
+    <Top />
+    <Corner />
+  </>,
+  nonRouter: true
+} );

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

@@ -0,0 +1,222 @@
+@use '@uniVar' as *;
+:global {
+  #LOADER {
+    z-index: 10;
+    position: absolute;
+  }
+}
+.TopLoader {
+  z-index: 3000;
+  cursor: not-allowed !important;
+  .Center {
+    width: 10rem;
+    height: 10rem;
+  }
+  .Child {
+    position: absolute;
+    $cubic : cubic-bezier(.61, .48, .61, .76);
+    transform-origin: 0 0;
+    justify-content: flex-end;
+    align-items: center;
+    display: flex;
+    height: 0;
+    background-color: white;
+    .Circle {
+      border-radius: 50%;
+      animation: expander 6s $cubic infinite;
+    }
+    &.Child1 {
+      $size : 20px;
+      width: 3rem;
+      animation: rotation 4s $cubic infinite -2.5s;
+      .Circle {
+        width: $size;
+        height: $size;
+      }
+    }
+    &.Child2 {
+      $size : 10px;
+      width: 45px;
+      animation: rotation 4.7s $cubic infinite -1.4s;
+      .Circle {
+        width: $size;
+        height: $size;
+      }
+    }
+    &.Child3 {
+      $size : 10px;
+      width: 46px;
+      animation: rotation 3s $cubic infinite -3.6s;
+      .Circle {
+        width: $size;
+        height: $size;
+      }
+    }
+    &.Child4 {
+      $size : 6px;
+      width: 32px;
+      animation: rotation 5.3s $cubic infinite -1.4s;
+      .Circle {
+        width: $size;
+        height: $size;
+      }
+    }
+    &.Child5 {
+      $size : 8px;
+      width: 22px;
+      animation: rotation 4.9s $cubic infinite -.9s;
+      .Circle {
+        width: $size;
+        height: $size;
+      }
+    }
+    &.Child6 {
+      $size : 15px;
+      width: 38px;
+      animation: rotation 5.4s $cubic infinite -3.1s;
+      .Circle {
+        width: $size;
+        height: $size;
+      }
+    }
+    &.Child7 {
+      $size : 6px;
+      width: 42px;
+      animation: rotation 6s $cubic infinite -2s;
+      .Circle {
+        width: $size;
+        height: $size;
+      }
+    }
+  }
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    50% {
+      transform: rotate(360deg);
+    }
+    100% {
+      transform: rotate(720deg);
+    }
+  }
+  @keyframes expander {
+    0% {
+      transform: scale(1);
+    }
+    30% {
+      transform: scale(0);
+    }
+    70% {
+      transform: scale(1.4);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
+  &.Active_true {
+    opacity: 1;
+    pointer-events: all;
+  }
+}
+.CornerLoader {
+  @keyframes ldAnm {
+    0% {
+      height: 20%
+    }
+    40% {
+      height: 100%
+    }
+    80% {
+      height: 20%
+    }
+  }
+  .Wrap {
+    height: 1rem;
+    gap: 1px;
+    > div {
+      box-shadow: $shadow2;
+      background-color: white;
+      border-radius: 4px;
+      width: 2px;
+      height: 20%;
+    }
+  }
+  &.Active_true {
+    opacity: 1;
+    .Wrap {
+      > div {
+        animation: 1.2s ldAnm ease infinite;
+        @for $i from 1 to 5 {
+          &.Ld#{ $i } {
+            animation-delay: calc(#{ $i - 1 } * .15s);
+          }
+        }
+      }
+    }
+  }
+}
+@keyframes ldAnm {
+  0% {
+    height: 50%;
+  }
+  25% {
+    height: 100%;
+  }
+  50% {
+    height: 20%;
+  }
+  75% {
+    height: 50%;
+  }
+}
+.MiniLoader {
+  transition: .1s;
+  &.Active_false {
+    display: none !important;
+  }
+  &.Hide {
+    display: none !important;
+  }
+  &:not(.Active) {
+    overflow: hidden;
+    padding: 0 !important;
+    margin: 0 !important;
+    width: 0 !important;
+    height: 0 !important;
+  }
+  > .Core {
+    animation: spin .5s linear infinite;
+  }
+  svg {
+    position: absolute;
+    fill: none;
+  }
+  .SVG1 {
+    stroke-width: 9;
+    stroke-dasharray: 220 220;
+    stroke-linecap: round;
+    animation: loader 1.8s infinite cubic-bezier(.4, 0, .3, 1), loading 1.4s infinite linear;
+    vertical-align: middle;
+  }
+  .SVG2 {
+    stroke-width: 6;
+    opacity: .2;
+  }
+  @keyframes loader {
+    from {
+      stroke-dashoffset: 220;
+    }
+    to {
+      stroke-dashoffset: -220;
+    }
+  }
+  @keyframes loading {
+    from {
+      transform: none;
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}

package/src/Functions/Loader/top.tsx

@@ -0,0 +1,90 @@
+import {
+  useStore
+} from '@global';
+import {
+  Box,
+  Flex
+} from '@atoms';
+import {
+  Row
+} from '@mols';
+const {
+  useEffect,
+  useState,
+} = React;
+
+import style from './style.module.scss';
+
+import { memoryID } from './parts';
+
+export const Top = () => {
+  let [ val_active,set_active ] = useState( false );
+
+  useEffect( () => {
+    useStore.set( {
+      key: memoryID + '-top',
+      value: {
+        active: () => {
+          set_active( true );
+        },
+        stop: () => {
+          set_active( false );
+        }
+      }
+    } );
+  },[] );
+
+  return <Flex
+    className={ [
+      style.TopLoader,
+      style[ 'Active_' + val_active ]
+    ].join( ' ' ) }
+    position='fixed'
+    top={ 0 }
+    left={ 0 }
+    right={ 0 }
+    bottom={ 0 }
+    horizontalAlign='center'
+    transition='long'
+    opacity='trans'
+    backgroundColor='lcOpHigh'
+    freeCSS={ {
+      paddingTop: 12 * 8,
+      pointerEvents: 'none'
+    } }
+  >
+    <Flex flexType='col' position='relative'>
+      <Flex className={ style.Center } flexCenter>
+        <Box>
+          <Box className={ [ style.Child,style.Child1 ].join( ' ' ) }>
+            <Box className={ style.Circle } backgroundColor='tcDarken' />
+          </Box>
+          <Box className={ [ style.Child,style.Child2 ].join( ' ' ) }>
+            <Box className={ style.Circle } backgroundColor='tcDarker' />
+          </Box>
+          <Box className={ [ style.Child,style.Child3 ].join( ' ' ) }>
+            <Box className={ style.Circle } backgroundColor='tcDarkest' />
+          </Box>
+          <Box className={ [ style.Child,style.Child4 ].join( ' ' ) }>
+            <Box className={ style.Circle } backgroundColor='tcLighten' />
+          </Box>
+          <Box className={ [ style.Child,style.Child5 ].join( ' ' ) }>
+            <Box className={ style.Circle } backgroundColor='tcLighter' />
+          </Box>
+          <Box className={ [ style.Child,style.Child6 ].join( ' ' ) }>
+            <Box className={ style.Circle } backgroundColor='tcLightest' />
+          </Box>
+          <Box className={ [ style.Child,style.Child7 ].join( ' ' ) }>
+            <Box className={ style.Circle } backgroundColor='theme' />
+          </Box>
+        </Box>
+      </Flex>
+      <Box
+        flexCenter
+        fontSize={ '2.normal' }
+      >
+        Loading...
+      </Box>
+    </Flex>
+  </Flex>;
+}