amotify 0.0.59 → 0.0.60

package/src/functions/Effects/Fade.tsx

@@ -1,9 +1,9 @@
 import {
   React
-} from '@global';
+} from '@global'
 import {
   Box
-} from '@atoms';
+} from '@atoms'
 
 export const FadeEffects: amotify.fn.Effects.Methods = {
   ...{} as any,
@@ -13,22 +13,22 @@ export const FadeEffects: amotify.fn.Effects.Methods = {
       animationTime = 300,
       componentID = $.uuidGen(),
       ...others
-    } = params;
-    let [ val_componentID ] = React.useState( componentID );
+    } = params
+    let [ val_componentID ] = React.useState( componentID )
 
     React.useEffect( () => {
       setTimeout( () => {
-        let Element = $( '[data-component-id="' + val_componentID + '"]' );
-        if ( !Element[ 0 ] ) return;
+        let Element = $( '[data-component-id="' + val_componentID + '"]' )
+        if ( !Element[ 0 ] ) return
         Element.css( {
           transition: animationTime + 'ms'
         } )
           .await( 1 )
           .css( {
             opacity: 1
-          } );
-      },animationDelay );
-    },[] );
+          } )
+      },animationDelay )
+    },[] )
 
     return <Box
       { ...others }
@@ -37,7 +37,7 @@ export const FadeEffects: amotify.fn.Effects.Methods = {
         opacity: 0,
       } }
       componentID={ val_componentID }
-    />;
+    />
   },
   FadeUp: ( params ) => {
     let {
@@ -45,13 +45,13 @@ export const FadeEffects: amotify.fn.Effects.Methods = {
       animationTime = 300,
       componentID = $.uuidGen(),
       ...others
-    } = params;
-    let [ val_componentID ] = React.useState( componentID );
+    } = params
+    let [ val_componentID ] = React.useState( componentID )
 
     React.useEffect( () => {
       setTimeout( () => {
-        let Element = $( '[data-component-id="' + val_componentID + '"]' );
-        if ( !Element[ 0 ] ) return;
+        let Element = $( '[data-component-id="' + val_componentID + '"]' )
+        if ( !Element[ 0 ] ) return
         Element.css( {
           transition: animationTime + 'ms'
         } )
@@ -59,9 +59,9 @@ export const FadeEffects: amotify.fn.Effects.Methods = {
           .css( {
             opacity: 1,
             paddingTop: 0
-          } );
-      },animationDelay );
-    },[] );
+          } )
+      },animationDelay )
+    },[] )
 
     return <Box
       paddingTop={ 2 }
@@ -71,6 +71,6 @@ export const FadeEffects: amotify.fn.Effects.Methods = {
         opacity: 0,
       } }
       componentID={ val_componentID }
-    />;
+    />
   }
 }

package/src/functions/Effects/Ripple.tsx

@@ -1,4 +1,4 @@
-import style from './style.module.scss';
+import style from './style.module.scss'
 
 type InfoProps = {
   RippleElement: Jsmin.Methods
@@ -8,16 +8,16 @@ type InfoProps = {
 
 new class {
   constructor() {
-    this.UserEvent();
+    this.UserEvent()
   }
   UserEvent() {
-    let RippleElementClassName = 'eff_ripple';
+    let RippleElementClassName = 'eff_ripple'
     const EffectStart = ( event: Event ) => {
-      let startedAt = $.Time().time;
-      let target: HTMLElement = event.target as any;
+      let startedAt = $.Time().time
+      let target: HTMLElement = event.target as any
 
-      let RippleElement = $( target.closest( '.' + RippleElementClassName ) );
-      let Color = RippleElement.findClass( /^eff_ripple-/ )[ 0 ].split( '-' )[ 1 ];
+      let RippleElement = $( target.closest( '.' + RippleElementClassName ) )
+      let Color = RippleElement.findClass( /^eff_ripple-/ )[ 0 ].split( '-' )[ 1 ]
 
       let
         ID = 'RippleWrap-' + $.uuidGen(),
@@ -37,7 +37,7 @@ new class {
         } = $.getCursor( event ),
         size = Math.min( width * 1.5,300 ),
         x = Math.max( cursorX - ( left + pageXOffset ),0 ),
-        y = Math.max( cursorY - ( top + pageYOffset ),0 );
+        y = Math.max( cursorY - ( top + pageYOffset ),0 )
 
       let effectInfo: InfoProps = {
         RippleElement,
@@ -49,15 +49,15 @@ new class {
         eventID: 'RippleMouseUp',
         eventType: 'mouseup',
         callback: () => {
-          EffectEnd( effectInfo );
+          EffectEnd( effectInfo )
         }
       } ).addEvent( {
         eventID: 'RippleTouchEnd',
         eventType: 'touchend',
         callback: () => {
           setTimeout( () => {
-            EffectEnd( effectInfo );
-          },20 );
+            EffectEnd( effectInfo )
+          },20 )
         }
       } )
 
@@ -73,7 +73,7 @@ new class {
           eventID: 'RippleMouseOut',
           eventType: 'mouseout',
           callback: ( event ) => {
-            EffectEnd( effectInfo );
+            EffectEnd( effectInfo )
           }
         } )
         .find( '#' + ID )
@@ -85,24 +85,24 @@ new class {
           width: size,
           opacity: '.3',
           transition: '.25s'
-        } );
+        } )
     }
     const EffectEnd = ( effectInfo: InfoProps ) => {
       let {
         RippleElement,
         startedAt,
         size
-      } = effectInfo;
+      } = effectInfo
 
-      let processTime = $.Time().time - startedAt;
-      let transition = processTime <= 400 ? '.75s' : '.55s';
-      let diameter = size * 2.5;
+      let processTime = $.Time().time - startedAt
+      let transition = processTime <= 400 ? '.75s' : '.55s'
+      let diameter = size * 2.5
 
       $( document ).removeEvent( [
         'RippleMouseUp',
         'RippleTouchMove',
         'RippleTouchEnd',
-      ] );
+      ] )
 
       RippleElement
         .removeEvent( [ 'RippleMouseOut' ] )
@@ -117,8 +117,8 @@ new class {
         .await( 750 )
         .parent()
         .callback( ( Parent ) => {
-          Parent.remove();
-        } );
+          Parent.remove()
+        } )
     }
 
     $( document )
@@ -126,16 +126,16 @@ new class {
         eventType: 'touchstart',
         target: '.' + RippleElementClassName,
         callback: ( event ) => {
-          EffectStart( event );
+          EffectStart( event )
         }
       } )
       .addEvent( {
         eventType: 'mousedown',
         target: '.' + RippleElementClassName,
         callback: ( event ) => {
-          if ( amotify.config.device.isTouchDevice ) return;
-          EffectStart( event );
+          if ( amotify.config.device.isTouchDevice ) return
+          EffectStart( event )
         }
-      } );
+      } )
   }
 }

package/src/functions/Effects/_.tsx

@@ -1,7 +1,7 @@
-import './Ripple';
-import style from './style.module.scss';
+import './Ripple'
+import style from './style.module.scss'
 
-import { FadeEffects } from './Fade';
+import { FadeEffects } from './Fade'
 
 const Effects: amotify.fn.Effects.Methods = {
   ...FadeEffects,
@@ -14,7 +14,7 @@ export {
 /** PuddingEffect */
 new class {
   constructor() {
-    this.UserEvent();
+    this.UserEvent()
   }
   UserEvent() {
     $( document ).addEvent( {
@@ -26,7 +26,7 @@ new class {
           .await( 1 )
           .addClass( style.PuddingEffect )
           .await( 510 )
-          .removeClass( style.PuddingEffect );
+          .removeClass( style.PuddingEffect )
       }
     } )
   }

package/src/functions/Input/Chips/Selector.tsx

@@ -1,25 +1,25 @@
 import {
   useStore,
   React
-} from '@global';
+} from '@global'
 import {
   Box,
   FAI,
   Span
-} from '@atoms';
+} from '@atoms'
 import {
   Column,
   Row,
   Text
-} from '@mols';
+} from '@mols'
 import {
   Input,
   Buttons,
   Loader,
   Sheet
-} from '@fn';
+} from '@fn'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
 const Selector = ( params: {
   selectorID: string
@@ -33,115 +33,115 @@ const Selector = ( params: {
   } ): void
   onDynamicSearch?: amotify.fn.Input.Chips.onDynamicSearch
 } ) => {
-  type StatusTypes = 'show' | 'interlude';
-  let [ val_status,set_status ] = React.useState( 'show' as StatusTypes );
-  let [ val_keyword,set_keyword ] = React.useState( '' );
-  let [ val_componentID ] = React.useState( $.uuidGen() );
+  type StatusTypes = 'show' | 'interlude'
+  let [ val_status,set_status ] = React.useState( 'show' as StatusTypes )
+  let [ val_keyword,set_keyword ] = React.useState( '' )
+  let [ val_componentID ] = React.useState( $.uuidGen() )
 
-  let [ val_options,set_options ] = React.useState( params.options );
-  let [ val_focus,set_focus ] = React.useState( val_options[ 0 ] || null );
-  let [ val_selected,set_selected ] = React.useState( params.selected );
-  let [ val_keyEvent,set_keyEvent ] = React.useState( 'init' );
+  let [ val_options,set_options ] = React.useState( params.options )
+  let [ val_focus,set_focus ] = React.useState( val_options[ 0 ] || null )
+  let [ val_selected,set_selected ] = React.useState( params.selected )
+  let [ val_keyEvent,set_keyEvent ] = React.useState( 'init' )
 
   React.useEffect( () => {
     useStore.set( {
       key: params.selectorID,
       value: {
         updateOptions: ( options: amotify.fn.Input.Chips.OptionParams[] ) => {
-          set_options( options );
+          set_options( options )
         },
         updateSelected: ( selected: amotify.fn.Input.Chips.OptionParams[] ) => {
-          set_selected( selected );
+          set_selected( selected )
         }
       }
-    } );
-  },[] );
-  const mountedOptions = React.useRef( false );
+    } )
+  },[] )
+  const mountedOptions = React.useRef( false )
   React.useEffect( () => {
     if ( mountedOptions.current ) {
-      Sheet.reposition( params.selectorID );
+      Sheet.reposition( params.selectorID )
     } else {
-      mountedOptions.current = true;
+      mountedOptions.current = true
     }
-  },[ val_options ] );
-  const mountedKeyword = React.useRef( false );
+  },[ val_options ] )
+  const mountedKeyword = React.useRef( false )
   React.useEffect( () => {
     if ( mountedKeyword.current ) {
-      set_status( 'interlude' );
-      set_focus( val_options[ 0 ] || null );
+      set_status( 'interlude' )
+      set_focus( val_options[ 0 ] || null )
 
       if ( params.onDynamicSearch ) {
-        $.interval.clear( val_componentID + '-dynamicSearch' );
+        $.interval.clear( val_componentID + '-dynamicSearch' )
         $.interval.standBy(
           val_componentID + '-dynamicSearch',
           400,
           async () => {
             let {
               options
-            } = await params.onDynamicSearch!( val_keyword );
-            set_options( options );
-            set_status( 'show' );
+            } = await params.onDynamicSearch!( val_keyword )
+            set_options( options )
+            set_status( 'show' )
           }
-        );
+        )
       } else {
-        $.interval.clear( val_componentID + '-staticSearch' );
+        $.interval.clear( val_componentID + '-staticSearch' )
         $.interval.standBy(
           val_componentID + '-staticSearch',
           400,
           async () => {
-            let regExp = new RegExp( val_keyword,'ig' );
+            let regExp = new RegExp( val_keyword,'ig' )
             let newSelection: amotify.fn.Input.Chips.OptionParams[] = [];
             [ ...params.options ].forEach( ( o ) => {
-              let match = Boolean( !val_keyword || ( String( o.label ) ?? String( o.value ) ).match( regExp ) );
-              if ( match ) newSelection.push( o );
-            } );
+              let match = Boolean( !val_keyword || ( String( o.label ) ?? String( o.value ) ).match( regExp ) )
+              if ( match ) newSelection.push( o )
+            } )
 
-            set_options( newSelection );
-            set_status( 'show' );
+            set_options( newSelection )
+            set_status( 'show' )
           }
-        );
+        )
       }
     } else {
-      mountedKeyword.current = true;
+      mountedKeyword.current = true
     }
-  },[ val_keyword ] );
-  const mountedSelected = React.useRef( false );
+  },[ val_keyword ] )
+  const mountedSelected = React.useRef( false )
   React.useEffect( () => {
     if ( mountedSelected.current ) {
       params.onUpdated( {
         values: val_selected
-      } );
+      } )
     } else {
-      mountedSelected.current = true;
+      mountedSelected.current = true
     }
-  },[ val_selected ] );
+  },[ val_selected ] )
   React.useEffect( () => {
     $.fnScope( () => {
-      if ( $.is.nullish( val_focus ) ) return;
-      if ( val_keyEvent == 'MouseEvent' ) return;
+      if ( $.is.nullish( val_focus ) ) return
+      if ( val_keyEvent == 'MouseEvent' ) return
 
-      let Wrapper = $( '#' + val_componentID + '-Selector-Cell-Wrap' );
-      if ( !Wrapper[ 0 ] ) return;
+      let Wrapper = $( '#' + val_componentID + '-Selector-Cell-Wrap' )
+      if ( !Wrapper[ 0 ] ) return
 
-      let focusCell = $( '[data-chips-selector-cell="' + val_componentID + '-' + JSON.stringify( val_focus?.value || '' ).replace( /\"/ig,'' ) + '"]' );
-      if ( !focusCell[ 0 ] ) return;
+      let focusCell = $( '[data-chips-selector-cell="' + val_componentID + '-' + JSON.stringify( val_focus?.value || '' ).replace( /\"/ig,'' ) + '"]' )
+      if ( !focusCell[ 0 ] ) return
 
-      let { top: pTop,height: pHeight } = Wrapper.position();
-      let { top: cTop,height: cHeight } = focusCell.position();
-      if ( pTop <= cTop && cTop + cHeight <= pTop + pHeight ) return;
+      let { top: pTop,height: pHeight } = Wrapper.position()
+      let { top: cTop,height: cHeight } = focusCell.position()
+      if ( pTop <= cTop && cTop + cHeight <= pTop + pHeight ) return
 
-      let scroll = Wrapper[ 0 ].scrollTop + ( cTop - pTop );
+      let scroll = Wrapper[ 0 ].scrollTop + ( cTop - pTop )
       if ( val_keyEvent == 'ArrowDown' ) {
-        scroll -= ( pHeight - cHeight ) - 20;
+        scroll -= ( pHeight - cHeight ) - 20
       } else if ( val_keyEvent == 'ArrowUp' ) {
-        scroll -= 20;
+        scroll -= 20
       }
 
-      Wrapper[ 0 ].scrollTop = scroll;
-    } );
-  },[ val_focus ] );
+      Wrapper[ 0 ].scrollTop = scroll
+    } )
+  },[ val_focus ] )
 
-  let List: ReactElement[] = [];
+  let List: ReactElement[] = []
 
   if ( val_status == 'interlude' ) {
     List = [ <Row.Center
@@ -158,20 +158,20 @@ const Selector = ( params: {
       >
         検索中...
       </Box>
-    </Row.Center> ];
+    </Row.Center> ]
   } else {
     List = [
       val_options.map( ( option,index ) => {
         let {
           value,label
-        } = option;
+        } = option
 
-        let safeValue = String( JSON.stringify( value ) );
+        let safeValue = String( JSON.stringify( value ) )
 
-        let findIndex = val_selected.findIndex( ( v ) => JSON.stringify( v.value ) == safeValue );
+        let findIndex = val_selected.findIndex( ( v ) => JSON.stringify( v.value ) == safeValue )
 
-        let isSelected = findIndex != -1;
-        let isFocused = JSON.stringify( val_focus?.value || '' ) == safeValue;
+        let isSelected = findIndex != -1
+        let isFocused = JSON.stringify( val_focus?.value || '' ) == safeValue
 
         let styles: amotifyUniStyleParams = {}
         if ( isSelected || isFocused ) {
@@ -205,24 +205,24 @@ const Selector = ( params: {
           isActiveStyles={ styles }
           { ...styles }
           onMouseOver={ () => {
-            set_keyEvent( 'MouseEvent' );
-            set_focus( option );
+            set_keyEvent( 'MouseEvent' )
+            set_focus( option )
           } }
           onClick={ () => {
-            let newSelected = [ ...val_selected ];
+            let newSelected = [ ...val_selected ]
             if ( isSelected ) {
-              newSelected.splice( findIndex,1 );
+              newSelected.splice( findIndex,1 )
             } else {
               newSelected = [
                 ...newSelected,
                 option
-              ];
+              ]
 
               if ( params.limit && newSelected.length > params.limit ) {
-                newSelected.shift();
+                newSelected.shift()
               }
             }
-            set_selected( newSelected );
+            set_selected( newSelected )
           } }
         >
           <params.SelectorCellComponent
@@ -231,9 +231,9 @@ const Selector = ( params: {
             value={ value }
             label={ label }
           />
-        </Buttons.Button.Clear.R>;
+        </Buttons.Button.Clear.R>
       } )
-    ];
+    ]
   }
 
   return <>
@@ -246,7 +246,7 @@ const Selector = ( params: {
         <Input.Text.Normal
           value={ val_keyword }
           onUpdateValidValue={ ( { value } ) => {
-            set_keyword( value );
+            set_keyword( value )
           } }
           id={ params.selectorID + '-KeywordInput' }
           padding={ '2/3' }
@@ -262,45 +262,45 @@ const Selector = ( params: {
             let {
               key,
               metaKey,ctrlKey
-            } = event;
-            let auxKey = metaKey || ctrlKey;
+            } = event
+            let auxKey = metaKey || ctrlKey
 
             if ( [ 'ArrowDown','ArrowUp' ].includes( key ) ) {
-              let dir = Number( key == 'ArrowDown' ) * 2 - 1;
+              let dir = Number( key == 'ArrowDown' ) * 2 - 1
               if ( auxKey ) {
-                let next = val_options[ dir == 1 ? val_options.length - 1 : 0 ];
-                set_focus( next );
+                let next = val_options[ dir == 1 ? val_options.length - 1 : 0 ]
+                set_focus( next )
               } else {
-                let nextIndex = val_options.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) ) + dir;
+                let nextIndex = val_options.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) ) + dir
 
                 if ( val_options[ nextIndex ] ) {
-                  set_focus( val_options[ nextIndex ] );
+                  set_focus( val_options[ nextIndex ] )
                 } else {
-                  set_focus( val_options[ dir == 1 ? 0 : val_options.length - 1 ] || null );
+                  set_focus( val_options[ dir == 1 ? 0 : val_options.length - 1 ] || null )
                 }
               }
             } else if ( key == 'Enter' ) {
-              let selectedIndex = val_selected.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) );
-              let isSelected = selectedIndex != -1;
-              let newSelected = [ ...val_selected ];
+              let selectedIndex = val_selected.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) )
+              let isSelected = selectedIndex != -1
+              let newSelected = [ ...val_selected ]
               if ( isSelected ) {
-                newSelected.splice( selectedIndex,1 );
+                newSelected.splice( selectedIndex,1 )
               } else {
-                let optionsIndex = val_options.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) );
-                if ( optionsIndex == -1 ) return;
+                let optionsIndex = val_options.findIndex( ( v ) => JSON.stringify( v.value ) == JSON.stringify( val_focus?.value || '' ) )
+                if ( optionsIndex == -1 ) return
                 newSelected = [
                   ...newSelected,
                   val_options[ optionsIndex ],
-                ];
+                ]
 
                 if ( params.limit && newSelected.length > params.limit ) {
-                  newSelected.shift();
+                  newSelected.shift()
                 }
               }
 
-              set_selected( newSelected );
+              set_selected( newSelected )
             }
-            set_keyEvent( key );
+            set_keyEvent( key )
           } }
         />
         <Buttons.Button.Border.S
@@ -309,7 +309,7 @@ const Selector = ( params: {
           backgroundColor='cloud'
           borderRadius={ '2.tone.secondary' }
           onClick={ () => {
-            Sheet.close( params.selectorID! );
+            Sheet.close( params.selectorID! )
           } }
         >
           <FAI.Times />
@@ -362,7 +362,7 @@ const Selector = ( params: {
       { List }
     </Column>
     { params.bottomContent }
-  </>;
+  </>
 }
 
 export const ChipsInputFNs: amotify.fn.Input.Chips.FNs = {
@@ -379,8 +379,8 @@ export const ChipsInputFNs: amotify.fn.Input.Chips.FNs = {
       onClosed,
       parent,
       ...sheetarams
-    } = params;
-    let sheetID = selectorID;
+    } = params
+    let sheetID = selectorID
 
     SelectorCellComponent = SelectorCellComponent || ( ( params ) => {
       return <Row.Left>
@@ -390,8 +390,8 @@ export const ChipsInputFNs: amotify.fn.Input.Chips.FNs = {
           fontColor={ params.isSelected ? 'theme' : '6.clear' }
         />
         { params.label }
-      </Row.Left>;
-    } );
+      </Row.Left>
+    } )
 
     Sheet.open( {
       parent,
@@ -424,22 +424,22 @@ export const ChipsInputFNs: amotify.fn.Input.Chips.FNs = {
         />
       </Box>,
       openAfter: () => {
-        $( '#' + params.selectorID + '-KeywordInput' ).focus();
+        $( '#' + params.selectorID + '-KeywordInput' ).focus()
       },
       closeAfter: () => {
-        onClosed();
+        onClosed()
       }
-    } );
+    } )
   },
   closeSelector: ( selectorID ) => {
-    Sheet.close( selectorID );
+    Sheet.close( selectorID )
   },
   updateOptions: ( selectorID,options ) => {
-    let C = useStore.get( selectorID );
-    if ( C && C.updateOptions ) C.updateOptions( options );
+    let C = useStore.get( selectorID )
+    if ( C && C.updateOptions ) C.updateOptions( options )
   },
   updateSelected: ( selectorID,selected ) => {
-    let C = useStore.get( selectorID );
-    if ( C && C.updateSelected ) C.updateSelected( selected );
+    let C = useStore.get( selectorID )
+    if ( C && C.updateSelected ) C.updateSelected( selected )
   }
 }