amotify 0.0.8 → 0.0.10

package/src/{Functions → functions}/Input/Chips/_.tsx

@@ -1,25 +1,20 @@
 import {
-  useRecycle,
-  useStore
-} from '~/Global/@export';
-const {
-  useEffect,
-  useState
-} = React;
+  React
+} from '@global';
 import {
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Column,
   Row,
   Text
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Input,
   Buttons,
   Loader,
   Sheet
-} from '~/Functions/@export';
+} from '@fn';
 
 import {
   BoxWrapper,
@@ -57,7 +52,7 @@ function DefaultValidation( props: {
   }
 }
 
-const DataWrapping: FNC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
+const DataWrapping: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
   let DefaultValues = [ ...( params.value || [] ) ];
   let Values = DefaultValues.splice( 0,params.limit || 65535 );
 
@@ -99,7 +94,7 @@ const DataWrapping: FNC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
   /> );
 }
 
-const Core: FNC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
+const Core: React.FC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
   let {
     required,
     form,
@@ -118,19 +113,19 @@ const Core: FNC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
   } = params;
   AddButtonComponent = AddButtonComponent!;
 
-  let [ val_selectorID ] = useState( $.uuidGen() );
-  let [ val_status,set_status ] = useState( {
+  let [ val_selectorID ] = React.useState( $.uuidGen() );
+  let [ val_status,set_status ] = React.useState( {
     componentID: params.componentID || '',
     dataValue: value.map( ( val: any ) => val ),
     eventID: $.uuidGen(),
     eventType: 'init'
   } as amotify.fn.Input.Status.Plain );
-  let [ val_validate,set_validate ] = useState( {
+  let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
   } as amotify.fn.Input.Validation.Result );
 
-  let [ val_selected,set_selected ] = useState( [ ...value ] );
+  let [ val_selected,set_selected ] = React.useState( [ ...value ] );
 
   CommonEffects( {
     params,
@@ -179,7 +174,7 @@ const Core: FNC<amotify.fn.Input.Chips.PlainParams> = ( params ) => {
   let isFully = limit && limit <= val_selected.length;
 
   const mounted = React.useRef( false );
-  useEffect( () => {
+  React.useEffect( () => {
     if ( mounted.current ) {
       if ( isFully ) {
         Sheet.close( val_selectorID );

package/src/functions/Input/Chips/style.module.scss

@@ -0,0 +1,6 @@
+@use '@props' as *;
+@use'@styleSet' as *;
+
+.SelectorWrapper {
+  @include OriginScrollBar();
+}

package/src/{Functions → functions}/Input/DigitCharacters.tsx

@@ -1,16 +1,12 @@
 import {
   React
-} from '~/Global/@export';
-const {
-  useState
-} = React;
-
+} from '@global';
 import {
   Flex
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Input
-} from '~/Functions/@export';
+} from '@fn';
 import {
   BoxWrapper,
   SubmitForm,
@@ -71,7 +67,7 @@ const formatToData = ( value: any = '' ) => {
 }
 
 
-export const DigitCharactersInput: FNC<amotify.fn.Input.DigitCharacters.PlainParams> = ( params ) => {
+export const DigitCharactersInput: React.FC<amotify.fn.Input.DigitCharacters.PlainParams> = ( params ) => {
   let {
     tone,
     required,
@@ -108,8 +104,8 @@ export const DigitCharactersInput: FNC<amotify.fn.Input.DigitCharacters.PlainPar
     eventID: $.uuidGen()
   }
 
-  let [ val_status,set_status ] = useState( Default_Status );
-  let [ val_validate,set_validate ] = useState( {
+  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
   } as amotify.fn.Input.Validation.Result );

package/src/{Functions → functions}/Input/File/_.tsx

@@ -1,25 +1,22 @@
 import {
-  useStore
-} from '~/Global/@export';
-const {
-  useEffect,
-  useState
-} = React;
+  useStore,
+  React
+} from '@global';
 import {
   Box,
   Flex,
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Column,
   Row,
   Text
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Input,
   Buttons,
   SnackBar
-} from '~/Functions/@export';
+} from '@fn';
 
 import {
   BoxWrapper,
@@ -47,7 +44,7 @@ function DefaultValidation( props: {
   }
 }
 
-const FileComponent: FNC<amotify.fn.Input.Filer.PlainParams> = ( params ) => {
+const FileComponent: React.FC<amotify.fn.Input.Filer.PlainParams> = ( params ) => {
   let {
     tone,
     required,
@@ -76,8 +73,8 @@ const FileComponent: FNC<amotify.fn.Input.Filer.PlainParams> = ( params ) => {
     eventType: 'init',
     eventID: $.uuidGen()
   }
-  let [ val_status,set_status ] = useState( Default_Status );
-  let [ val_validate,set_validate ] = useState( {
+  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
   } as amotify.fn.Input.Validation.Result );
@@ -202,7 +199,7 @@ const FileComponent: FNC<amotify.fn.Input.Filer.PlainParams> = ( params ) => {
   );
 }
 
-const FileList: FNC<{
+const FileList: React.FC<{
   files: File[]
   params: amotify.fn.Input.Filer.PlainParams
   val_status: amotify.fn.Input.Status.Plain
@@ -290,7 +287,7 @@ const FileList: FNC<{
   );
 }
 
-const FileCell: FNC<{
+const FileCell: React.FC<{
   index: number
   file: File
   className?: string
@@ -312,7 +309,7 @@ const FileCell: FNC<{
     type,
   } = file;
 
-  let [ val_edit,set_edit ] = useState( false );
+  let [ val_edit,set_edit ] = React.useState( false );
   let FileID = $.uuidGen();
   let Size = size.rank();
   let [ name,extension ] = fileName
@@ -385,7 +382,7 @@ const FileCell: FNC<{
     }
   }
 
-  useEffect( () => {
+  React.useEffect( () => {
     if ( val_edit ) {
       setTimeout( () => {
         $( '#' + FileID )[ 0 ].focus();

package/src/{Functions → functions}/Input/File/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 
 .Input:focus {
   + .List .AddButton {

package/src/{Functions → functions}/Input/Hidden.tsx

@@ -1,4 +1,5 @@
-export const HiddenInput: FNC<amotify.fn.Input.Hidden.PlainParams> = ( params ) => {
+import React from 'react';
+export const HiddenInput: React.FC<amotify.fn.Input.Hidden.PlainParams> = ( params ) => {
   let {
     componentID = '',
     form,
@@ -6,7 +7,7 @@ export const HiddenInput: FNC<amotify.fn.Input.Hidden.PlainParams> = ( params )
     ...others
   } = params;
 
-  return ( <input
+  return <input
     value={ JSON.stringify( value ) }
     data-input-type={ 'hidden' }
     data-form={ form }
@@ -14,5 +15,5 @@ export const HiddenInput: FNC<amotify.fn.Input.Hidden.PlainParams> = ( params )
     data-value={ JSON.stringify( value ) }
     { ...others }
     type='hidden'
-  /> );
+  />;
 }

package/src/{Functions → functions}/Input/List/_.tsx

@@ -1,19 +1,15 @@
 import {
   React
-} from '~/Global/@export';
-const {
-  useState
-} = React;
-
+} from '@global';
 import {
   Box,
   Flex,
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Input,
   Buttons
-} from '~/Functions/@export';
+} from '@fn';
 import {
   BoxWrapper,
   CommonEffects,
@@ -53,7 +49,7 @@ function DefaultValidation( props: {
   }
 }
 
-export const ListInput: FNC<amotify.fn.Input.List.OriginParams> = ( props ) => {
+export const ListInput: React.FC<amotify.fn.Input.List.OriginParams> = ( props ) => {
   let { value,options = [] } = props;
   let Values = $.is.exist( value ) ? $.flatArray( value ) : [];
   let DefaultOptions = options.map( ( option ) => {
@@ -80,7 +76,7 @@ export const ListInput: FNC<amotify.fn.Input.List.OriginParams> = ( props ) => {
   />;
 }
 
-const Core: FNC<amotify.fn.Input.List.OriginParams> = ( params ) => {
+const Core: React.FC<amotify.fn.Input.List.OriginParams> = ( params ) => {
   let {
     type,
     tone,
@@ -114,8 +110,8 @@ const Core: FNC<amotify.fn.Input.List.OriginParams> = ( params ) => {
     eventType: 'init',
     eventID: $.uuidGen()
   }
-  let [ val_status,set_status ] = useState( Default_Status );
-  let [ val_validate,set_validate ] = useState( {
+  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
   } as amotify.fn.Input.Validation.Result );
@@ -153,7 +149,7 @@ const Core: FNC<amotify.fn.Input.List.OriginParams> = ( params ) => {
   </BoxWrapper> );
 }
 
-const CellList: FNC<{
+const CellList: React.FC<{
   params: amotify.fn.Input.List.OriginParams
   val_status: amotify.fn.Input.Status.Plain
   set_status: React.Dispatch<React.SetStateAction<amotify.fn.Input.Status.Plain>>

package/src/{Functions → functions}/Input/List/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 .CellBase {
   &.HideInput_true .Input {
     display: none;

package/src/{Functions → functions}/Input/Segmented/_.tsx

@@ -1,6 +1,6 @@
 import {
   React
-} from '~/Global/@export';
+} from '@global';
 
 import { ListInputs } from '../_';
 
@@ -168,7 +168,7 @@ type CoreParams = amotify.fn.Input.Segmented.Params & {
   appearance: amotify.fn.Input.Segmented.Tones
 }
 
-const Core: FNC<CoreParams> = ( params ) => {
+const Core: React.FC<CoreParams> = ( params ) => {
   let {
     tone,
     appearance,

package/src/{Functions → functions}/Input/Segmented/style.module.scss

@@ -1,5 +1,5 @@
-@use 'src/@styles/props' as *;
-@use'src/@styles/styleSet' as *;
+@use '@props' as *;
+@use'@styleSet' as *;
 .Label {
   user-select: none;
   -webkit-user-select: none;

package/src/{Functions → functions}/Input/Select/_.tsx

@@ -1,13 +1,10 @@
 import {
   React,
-} from '~/Global/@export';
-const {
-  useState
-} = React;
+} from '@global';
 
 import {
   Box
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   BoxWrapper,
   SubmitForm,
@@ -16,7 +13,7 @@ import {
 } from '../core';
 import {
   Buttons
-} from '~/Functions/@export';
+} from '@fn';
 
 
 import style from './style.module.scss';
@@ -48,7 +45,7 @@ function DefaultValidation( props: {
   }
 }
 
-export const SelectInput: FNC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
+export const SelectInput: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
   let {
     value = null,
     placeholder,
@@ -80,7 +77,7 @@ export const SelectInput: FNC<amotify.fn.Input.Select.PlainParams> = ( params )
   );
 }
 
-const Core: FNC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
+const Core: React.FC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
   let {
     tone,
     required,
@@ -110,8 +107,8 @@ const Core: FNC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
     eventType: 'init',
     eventID: $.uuidGen()
   }
-  let [ val_status,set_status ] = useState( Default_Status );
-  let [ val_validate,set_validate ] = useState( {
+  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
   } as amotify.fn.Input.Validation.Result );
@@ -187,7 +184,7 @@ const Core: FNC<amotify.fn.Input.Select.PlainParams> = ( params ) => {
   </BoxWrapper> );
 }
 
-const Options: FNC<{ params: amotify.fn.Input.Select.PlainParams }> = ( props ) => {
+const Options: React.FC<{ params: amotify.fn.Input.Select.PlainParams }> = ( props ) => {
   let {
     value,
     options = [],

package/src/{Functions → functions}/Input/Select/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 .Select {
   position: absolute;
   top: 0;

package/src/{Functions → functions}/Input/Slider/_.tsx

@@ -1,14 +1,15 @@
 import {
-  useStore
-} from '~/Global/@export';
+  useStore,
+  React
+} from '@global';
 import {
   Box,
   Flex,
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Input,
   Buttons
-} from '~/Functions/@export';
+} from '@fn';
 
 import {
   BoxWrapper,
@@ -16,10 +17,6 @@ import {
   CommonEffects
 } from '../core';
 import style from './style.module.scss';
-const {
-  useState,
-  useEffect
-} = React;
 
 function DefaultValidation( props: {
   value: any
@@ -68,7 +65,7 @@ const DataLeveling: {
   };
 }
 
-export const SliderInput: FNC<amotify.fn.Input.Slider.PlainParams> = ( params ) => {
+export const SliderInput: React.FC<amotify.fn.Input.Slider.PlainParams> = ( params ) => {
   let {
     color = 'theme',
     required,
@@ -100,8 +97,8 @@ export const SliderInput: FNC<amotify.fn.Input.Slider.PlainParams> = ( params )
     eventType: 'init',
     eventID: $.uuidGen(),
   }
-  let [ val_status,set_status ] = useState( Default_Status );
-  let [ val_validate,set_validate ] = useState( {
+  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
   } as amotify.fn.Input.Validation.Result );
@@ -224,7 +221,7 @@ const Comps = {
       /> );
     }
 
-    useEffect( () => {
+    React.useEffect( () => {
       const LabelLeveling = () => {
         let Labels = $( '#Labels-' + componentID );
         let {

package/src/{Functions → functions}/Input/Slider/style.module.scss

@@ -1,5 +1,5 @@
-@use 'src/@styles/props' as *;
-@use'src/@styles/styleSet' as *;
+@use '@props' as *;
+@use'@styleSet' as *;
 .Label {
   &:before {
     content: "";

package/src/{Functions → functions}/Input/Switch/_.tsx

@@ -1,16 +1,16 @@
 import {
   React
-} from '~/Global/@export';
+} from '@global';
 import {
   Box,
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Row
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Buttons
-} from '~/Functions/@export';
+} from '@fn';
 import {
   BoxWrapper,
   SubmitForm,
@@ -19,10 +19,6 @@ import {
 } from '../core';
 import style from './style.module.scss';
 
-const {
-  useState
-} = React;
-
 function DefaultValidation( props: {
   value: any
   params: any
@@ -41,7 +37,7 @@ function DefaultValidation( props: {
   }
 }
 
-export const SwitchInput: FNC<amotify.fn.Input.Switch.PlainParams> = ( params ) => {
+export const SwitchInput: React.FC<amotify.fn.Input.Switch.PlainParams> = ( params ) => {
   let {
     componentID,
     color = 'posi',
@@ -68,8 +64,8 @@ export const SwitchInput: FNC<amotify.fn.Input.Switch.PlainParams> = ( params )
     eventType: 'init',
     eventID: $.uuidGen()
   }
-  let [ val_status,set_status ] = useState( Default_Status );
-  let [ val_validate,set_validate ] = useState( {
+  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
   } as amotify.fn.Input.Validation.Result );

package/src/{Functions → functions}/Input/Switch/style.module.scss

@@ -1,4 +1,4 @@
-@use 'src/@styles/props' as *;
+@use '@props' as *;
 .Input {
   position: absolute;
   height: 0;

package/src/{Functions → functions}/Input/Text.tsx

@@ -1,14 +1,9 @@
 import {
   React,
-} from '~/Global/@export';
-const {
-  useEffect,
-  useState,
-} = React;
-
+} from '@global';
 import {
   Box,
-} from '~/Atoms/@export';
+} from '@atoms';
 
 import {
   BoxWrapper,
@@ -251,7 +246,7 @@ function DefaultValidation( props: {
   }
 }
 
-export const TextInput: FNC<amotify.fn.Input.Text.OriginParams> = ( params ) => {
+export const TextInput: React.FC<amotify.fn.Input.Text.OriginParams> = ( params ) => {
   let {
     componentID,
     tone,
@@ -294,8 +289,8 @@ export const TextInput: FNC<amotify.fn.Input.Text.OriginParams> = ( params ) =>
     caretFrom: null as any,
     caretTo: null as any
   }
-  let [ val_status,set_status ] = useState( Default_Status );
-  let [ val_validate,set_validate ] = useState( {
+  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
   } as amotify.fn.Input.Validation.Result );
@@ -318,7 +313,7 @@ export const TextInput: FNC<amotify.fn.Input.Text.OriginParams> = ( params ) =>
     }
   } );
 
-  useEffect( () => {
+  React.useEffect( () => {
     setSelection( { id: params.id,restrict,val_status } );
   },[ val_status ] );
 

package/src/{Functions → functions}/Input/TextArea.tsx

@@ -1,10 +1,6 @@
 import {
   React,
-} from '~/Global/@export';
-const {
-  useState
-} = React;
-
+} from '@global';
 import {
   BoxWrapper,
   SubmitForm,
@@ -32,7 +28,7 @@ function DefaultValidation( props: {
   }
 }
 
-export const TextAreaInput: FNC<amotify.fn.Input.TextArea.PlainParams> = ( params ) => {
+export const TextAreaInput: React.FC<amotify.fn.Input.TextArea.PlainParams> = ( params ) => {
   let {
     componentID,
     tone,
@@ -58,8 +54,8 @@ export const TextAreaInput: FNC<amotify.fn.Input.TextArea.PlainParams> = ( param
     eventType: 'init',
     eventID: $.uuidGen()
   }
-  let [ val_status,set_status ] = useState( Default_Status );
-  let [ val_validate,set_validate ] = useState( {
+  let [ val_status,set_status ] = React.useState( Default_Status );
+  let [ val_validate,set_validate ] = React.useState( {
     ok: false,
     notice: []
   } as amotify.fn.Input.Validation.Result );

package/src/{Functions → functions}/Input/Time/Picker.tsx

@@ -1,27 +1,22 @@
 import {
   React
-} from '~/Global/@export';
+} from '@global';
 import {
   Grid,
   Box,
   Flex,
   FAIcon
-} from '~/Atoms/@export';
+} from '@atoms';
 import {
   Column,
   Row,
   Text
-} from '~/Molecules/@export';
+} from '@mols';
 import {
   Buttons,
   Input,
   Tooltips
-} from '~/Functions/@export';
-const {
-  useEffect,
-  useRef,
-  useState
-} = React;
+} from '@fn';
 
 import style from './style.module.scss';
 
@@ -70,7 +65,7 @@ type SendParams<T> = amotify.fn.Input.Time.PickerParams & {
   set_value: React.Dispatch<React.SetStateAction<T>>
 }
 
-export const Picker: FNC<amotify.fn.Input.Time.PickerParams> = ( params ) => {
+export const Picker: React.FC<amotify.fn.Input.Time.PickerParams> = ( params ) => {
   let {
     restrict,
     defaultValue = ''
@@ -78,9 +73,9 @@ export const Picker: FNC<amotify.fn.Input.Time.PickerParams> = ( params ) => {
 
   params.tipsID = params.tipsID || $.uuidGen();
 
-  const mounted = useRef( false );
+  const mounted = React.useRef( false );
 
-  let [ val_value,set_value ] = useState( ( () => {
+  let [ val_value,set_value ] = React.useState( ( () => {
     if ( restrict == 'clock' ) {
       let partValues: any = String( defaultValue ).split( /[^\d]/ );
 
@@ -133,7 +128,7 @@ export const Picker: FNC<amotify.fn.Input.Time.PickerParams> = ( params ) => {
     return {}
   } )() as any );
 
-  useEffect( () => {
+  React.useEffect( () => {
     if ( mounted.current ) {
       if ( val_value.modifiedType == 'update' ) {
         let sendValue = '';
@@ -209,10 +204,10 @@ const Comps = {
         set_value
       } = params;
 
-      let [ val_ampm,set_ampm ] = useState( val_value.hour > 12 ? 2 : 1 );
-      let [ val_unit,set_unit ] = useState( Number( localStorage.getItem( 'timePickerUnit' ) || 5 ) );
+      let [ val_ampm,set_ampm ] = React.useState( val_value.hour > 12 ? 2 : 1 );
+      let [ val_unit,set_unit ] = React.useState( Number( localStorage.getItem( 'timePickerUnit' ) || 5 ) );
 
-      useEffect( () => {
+      React.useEffect( () => {
         localStorage.setItem( 'timePickerUnit',String( val_unit ) );
       },[ val_unit ] );