amotify 0.0.59 → 0.0.62

package/src/molecules/Accordion/parts.tsx

@@ -1,12 +1,12 @@
 import {
   useStore,
   React
-} from '@global';
+} from '@global'
 import {
   Box
-} from '@atoms';
+} from '@atoms'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
 const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
   params = { ...params }
@@ -16,41 +16,41 @@ const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
     defaultOpen = false,
     override = false,
     ...others
-  } = params;
+  } = params
 
-  let [ val_wrapID ] = React.useState( $.uuidGen() );
-  let [ val_contentID ] = React.useState( $.uuidGen() );
-  let [ val_open,set_open ] = React.useState( defaultOpen );
+  let [ val_wrapID ] = React.useState( $.uuidGen() )
+  let [ val_contentID ] = React.useState( $.uuidGen() )
+  let [ val_open,set_open ] = React.useState( defaultOpen )
 
   if ( val_open != defaultOpen ) {
-    if ( override ) set_open( defaultOpen );
+    if ( override ) set_open( defaultOpen )
   }
 
-  let Query = '[data-accordion-content-id="' + val_contentID + '"]';
+  let Query = '[data-accordion-content-id="' + val_contentID + '"]'
 
-  const mounted = React.useRef( false );
+  const mounted = React.useRef( false )
   React.useEffect( () => {
-    let Content = $( Query )[ 0 ];
+    let Content = $( Query )[ 0 ]
     if ( Content ) {
-      let contentHeight = Content.offsetHeight;
-      let transitionTime = 0;
+      let contentHeight = Content.offsetHeight
+      let transitionTime = 0
       if ( slideAnimation == 'fast' ) {
-        transitionTime = contentHeight / 1000;
-        transitionTime = Math.max( transitionTime,.2 );
+        transitionTime = contentHeight / 1000
+        transitionTime = Math.max( transitionTime,.2 )
       } else if ( slideAnimation == 'slow' ) {
-        transitionTime = contentHeight / 300;
+        transitionTime = contentHeight / 300
       }
       $( '#' + val_wrapID ).css( {
         transition: transitionTime + 's'
       } )
     }
-  },[] );
+  },[] )
   React.useEffect( () => {
-    let Wrap = $( '#' + val_wrapID );
-    let Content = $( Query )[ 0 ];
+    let Wrap = $( '#' + val_wrapID )
+    let Content = $( Query )[ 0 ]
     if ( mounted.current ) {
       if ( Content ) {
-        let contentHeight = Content.offsetHeight;
+        let contentHeight = Content.offsetHeight
         if ( $.is.exist( contentHeight ) ) {
           if ( val_open ) {
             Wrap.css( {
@@ -58,21 +58,21 @@ const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
             } ).await( 200 ).css( {
               maxHeight: 'unset',
               overflow: ( params.overflow as any ) || 'unset'
-            } );
+            } )
           } else {
             Wrap.css( {
               maxHeight: ( contentHeight + 1 ) + 'px',
             } ).await( 100 ).css( {
               maxHeight: 0 + 'px',
               overflow: 'hidden'
-            } );
+            } )
           }
         }
       }
     } else {
-      mounted.current = true;
+      mounted.current = true
       if ( Content ) {
-        let contentHeight = Content.offsetHeight;
+        let contentHeight = Content.offsetHeight
         if ( $.is.exist( contentHeight ) ) {
           if ( val_open ) {
             Wrap.css( {
@@ -80,37 +80,37 @@ const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
             } ).await( 200 ).css( {
               maxHeight: 'unset',
               overflow: ( params.overflow as any ) || 'unset'
-            } );
+            } )
           } else {
             Wrap
               .css( {
                 maxHeight: 0 + 'px',
                 overflow: 'hidden'
-              } );
+              } )
           }
         }
       }
     }
-  },[ val_open ] );
+  },[ val_open ] )
 
   if ( accordionID ) {
     useStore.set( {
       key: 'Accordion-' + accordionID,
       value: {
         open: () => {
-          set_open( true );
-          // params.open = true;
+          set_open( true )
+          // params.open = true
         },
         close: () => {
-          set_open( false );
-          // params.open = false;
+          set_open( false )
+          // params.open = false
         },
         toggle: () => {
-          set_open( !val_open );
-          // params.open = !val_open;
+          set_open( !val_open )
+          // params.open = !val_open
         }
       }
-    } );
+    } )
   }
 
   return <Box
@@ -124,22 +124,22 @@ const Component: React.FC<amotify.mols.Accordion.Params> = ( params ) => {
       data-accordion-content-id={ val_contentID }
       { ...others }
     />
-  </Box>;
+  </Box>
 }
 
 const Accordion: amotify.mols.Accordion.SetParams = Component as any
 Accordion.fn = {
   open: ( id ) => {
-    let component = useStore.get( 'Accordion-' + id );
-    !component || component.open();
+    let component = useStore.get( 'Accordion-' + id )
+    !component || component.open()
   },
   close: ( id ) => {
-    let component = useStore.get( 'Accordion-' + id );
-    !component || component.close();
+    let component = useStore.get( 'Accordion-' + id )
+    !component || component.close()
   },
   toggle: ( id ) => {
-    let component = useStore.get( 'Accordion-' + id );
-    !component || component.toggle();
+    let component = useStore.get( 'Accordion-' + id )
+    !component || component.toggle()
   }
 }
 

package/src/molecules/LinkifyText/parts.tsx

@@ -1,37 +1,37 @@
-import React from 'react';
+import React from 'react'
 import {
   FAI
-} from '@atoms';
+} from '@atoms'
 import {
   Buttons
-} from '@fn';
+} from '@fn'
 
 const {
   Anchor
-} = Buttons;
+} = Buttons
 
 export const LinkifyText: React.FC<amotify.mols.LinkifyTextProps> = ( props ) => {
   let {
     text,
     placeholder
-  } = props;
+  } = props
 
-  let Description: ReactElement[] = [];
+  let Description: ReactElement[] = []
 
   if ( text ) {
-    let urls: string[] = [];
+    let urls: string[] = []
 
     text = text.replace( /https?:\/\/[^\s|\n|\r]*/ig,( ...args: any ) => {
-      let url = args[ 0 ];
-      urls.push( url );
+      let url = args[ 0 ]
+      urls.push( url )
 
-      return '[$_url]';
-    } );
-    let parts = text.split( '[$_url]' );
+      return '[$_url]'
+    } )
+    let parts = text.split( '[$_url]' )
     for ( let index = 0; index <= parts.length - 1; index++ ) {
-      let part = parts[ index ];
-      let url = urls[ index ];
-      Description.push( part );
+      let part = parts[ index ]
+      let url = urls[ index ]
+      Description.push( part )
       if ( index < parts.length - 1 ) {
         Description.push( <Anchor.Link
           key={ 'Link-' + index }
@@ -39,14 +39,14 @@ export const LinkifyText: React.FC<amotify.mols.LinkifyTextProps> = ( props ) =>
           newTab
         >
           { url }
-        </Anchor.Link> );
+        </Anchor.Link> )
       }
     }
   } else if ( placeholder ) {
-    Description = [ placeholder ];
+    Description = [ placeholder ]
   }
 
   return <>
     { Description }
-  </>;
+  </>
 }

package/src/molecules/List.tsx

@@ -1,31 +1,31 @@
-import React from 'react';
+import React from 'react'
 import {
   Flex
-} from '@atoms';
+} from '@atoms'
 
 export const List: React.FC<amotify.mols.List.Params> = ( params ) => {
   let {
     rows,
     rowStyles: DefaultRowStyles,
     ...others
-  } = params;
+  } = params
 
   let rowArray = rows.map( ( row ) => {
     let {
       children,
       ...others
-    } = row;
+    } = row
 
     return <Flex
       { ...DefaultRowStyles }
       { ...others }
       children={ children }
-    />;
+    />
   } )
 
   return <Flex
     { ...others }
     flexType='col'
     children={ rowArray }
-  />;
+  />
 }

package/src/preload.tsx

@@ -1,4 +1,4 @@
-import { launchID } from './@variables';
+import { launchID } from './@variables'
 
 let tags: Jsmin.CreateElement.Args[] = [
   {
@@ -24,48 +24,8 @@ let tags: Jsmin.CreateElement.Args[] = [
     <div class="AMOTIFY_be AMOTIFY_be_root"></div>
     `
   }
-];
+]
 for ( let tag of tags ) {
-  if ( tag.id && $( '#' + tag.id )[ 0 ] ) continue;
-  $.createElement( tag );
-}
-
-// ( () => {
-//   let amotifyRoot = document.createElement( 'amotify-app' );
-//   amotifyRoot.id = launchID;
-//   let shadow = amotifyRoot.attachShadow( { mode: 'open' } );
-
-//   let link = document.createElement( 'link' );
-//   link.href = 'https://public.comun.jp/@env/amotify/v3.1.7/amotify.min.css';
-//   link.rel = 'stylesheet';
-
-//   let sheetDIV = document.createElement( 'div' );
-//   sheetDIV.className = 'AMOTIFY_be AMOTIFY_be_sheet';
-
-//   let snackbar = document.createElement( 'div' );
-//   snackbar.className = 'AMOTIFY_be AMOTIFY_be_snackbar';
-//   snackbar.innerHTML = 'HELLO';
-
-//   let loader = document.createElement( 'div' );
-//   loader.className = 'AMOTIFY_be AMOTIFY_be_loader';
-
-//   let root = document.createElement( 'div' );
-//   root.className = 'AMOTIFY_be AMOTIFY_be_root';
-
-//   shadow.appendChild( link );
-//   shadow.appendChild( sheetDIV );
-//   shadow.appendChild( snackbar );
-//   shadow.appendChild( loader );
-//   shadow.appendChild( root );
-
-//   document.body.appendChild( amotifyRoot );
-
-//   // amotifyRoot.shadowRoot.get
-
-//   setTimeout( () => {
-//     let a = amotifyRoot.shadowRoot!.querySelectorAll( '.AMOTIFY_be_snackbar' );
-
-//     a[ 0 ].innerHTML = 'AAAA';
-//     console.log( '======' );
-//   },1000 );
-// } )();
+  if ( tag.id && $( '#' + tag.id )[ 0 ] ) continue
+  $.createElement( tag )
+}

package/src/templates/PlayGround/parts.tsx

@@ -1,18 +1,18 @@
-import React from 'react';
+import React from 'react'
 import {
   Box
-} from '@atoms';
+} from '@atoms'
 import {
   Column
-} from '@mols';
+} from '@mols'
 import {
   Buttons,
   Input,
   Inputs,
   Table
-} from '@fn';
+} from '@fn'
 
-import style from './style.module.scss';
+import style from './style.module.scss'
 
 export const PlayGround: React.FC<{}> = () => {
   return <>
@@ -46,7 +46,7 @@ export const PlayGround: React.FC<{}> = () => {
           },
         ] }
         onUpdateValidValue={ ( { value } ) => {
-          console.log( value );
+          console.log( value )
         } }
       />
 
@@ -54,7 +54,7 @@ export const PlayGround: React.FC<{}> = () => {
         submitOption={ {
           formName: 'test',
           callback: ( form ) => {
-            console.log( form );
+            console.log( form )
           }
         } }
       >
@@ -92,5 +92,5 @@ export const PlayGround: React.FC<{}> = () => {
         />
       </Box>
     </Column>
-  </>;
+  </>
 }

package/webpack.config.js

@@ -1,11 +1,11 @@
 module.exports = ( () => {
-  let path = require( 'path' );
-  let MinCss = require( 'mini-css-extract-plugin' );
-  let RemoveWasteFiles = require( 'webpack-remove-empty-scripts' );
-  let webpack = require( 'webpack' );
-  let TerserPlugin = require( 'terser-webpack-plugin' );
-  let BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' ).BundleAnalyzerPlugin;
-  let BrowserSync = require( 'browser-sync-webpack-plugin' );
+  let path = require( 'path' )
+  let MinCss = require( 'mini-css-extract-plugin' )
+  let RemoveWasteFiles = require( 'webpack-remove-empty-scripts' )
+  let webpack = require( 'webpack' )
+  let TerserPlugin = require( 'terser-webpack-plugin' )
+  let BundleAnalyzerPlugin = require( 'webpack-bundle-analyzer' ).BundleAnalyzerPlugin
+  let BrowserSync = require( 'browser-sync-webpack-plugin' )
   let BrowserSync_option = {
     host: 'localhost',
     // port: 10201,
@@ -25,7 +25,7 @@ module.exports = ( () => {
   let entry = {
     'amotify': './src/launch.tsx'
   }
-  console.log( entry );
+  console.log( entry )
   return {
     mode: 'development',
     entry: entry,
@@ -143,4 +143,4 @@ module.exports = ( () => {
       }
     },
   }
-} )();
+} )()