amotify 0.0.4 → 0.0.5

package/src/Functions/Loader/parts.tsx

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

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

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