amotify 0.2.96 → 0.2.97

package/demo/esbuild/app.tsx

@@ -85,6 +85,15 @@ let Test = () => {
   for ( let i = 0; i < 100; i++ ) {
     optionElms.push( <option key={ i } value={ i }>{ i }</option> )
   }
+
+  useEffect( () => {
+    let A = $$.interval.once( () => {
+      console.log( 'testInterval' )
+    },1000,'testInterval' )
+
+    console.log( A )
+  },[] )
+
   return <>
     <DesignBook
     />

package/demo/esbuild/bundler.ts

@@ -9,8 +9,8 @@ esbuild.build( {
   target: [ "ES6" ],
   platform: 'node',
   define: {
-    'process.env.NODE_ENV': '"production"',
-    // 'process.env.NODE_ENV': '"development"'
+    // 'process.env.NODE_ENV': '"production"',
+    'process.env.NODE_ENV': '"development"'
   },
 
   entryPoints: [

package/demo/esbuild/designBook.tsx

@@ -2571,7 +2571,7 @@ const Tables = {
         cellStyles={ {
           padding: '1/2'
         } }
-        filter={ [ true ] }
+        filter={ [ true,true ] }
         checker
       />
     </Column>
@@ -2620,6 +2620,23 @@ const Cropping = () => {
         <FAI.Image /> イメージを選択
       </Button>
 
+      <Row.Center>
+        <Button.Prime
+          onClick={ () => {
+            Sheet.open( {
+              type: 'image',
+              src: [
+                'https://png.pngtree.com/background/20210714/original/pngtree-futuristic-shape-abstract-background-chemistry-technology-concept-for-website-picture-image_1250295.jpg',
+                'https://png.pngtree.com/background/20210711/original/pngtree-set-of-instagram-stories-sale-banner-background-instagram-template-photo-can-picture-image_1167343.jpg',
+                'https://png.pngtree.com/background/20210715/original/pngtree-website-banner-abstract-purple-blue-gradient-background-picture-image_1298439.jpg'
+              ]
+            } )
+          } }
+        >
+          Open Image Sheet
+        </Button.Prime>
+      </Row.Center>
+
       <Flex gap={ 1 } verticalAlign='top'>
         { val_ImageUrl1 && <Img
           isRounded
@@ -2685,46 +2702,48 @@ const Cropping = () => {
 const DesignConfig = {
   Darkmode: ( p: Omit<Input.List.Input,'options'> ) => {
     useEffect( () => {
-      Sheet.open( {
-        sheetID: 'darkModeSelector',
-        type: 'custom',
-        parent: document.body,
-        gravityPoint: 19,
-        closeAtAroundClick: false,
-        content: () => {
-          return <Box padding={ 1 }>
-            <Input.Segmented.Cloud
-              cellStyles={ {
-                flexCenter: true,
-                padding: [ '1/4','1/2' ],
-                isRounded: true,
-              } }
-              cellCheckedStyles={ {
-                boxShadow: '2.normal',
-                backgroundColor: 'theme',
-                fontColor: 'white'
-              } }
-              ssCardBox
-              backgroundColor={ 'layer.1' }
-              isRounded
-              gap={ '1/6' }
-              fontColor={ '4.thin' }
-              { ...p }
-              options={ [
-                { value: 'light',label: 'Light' },
-                { value: 'dim',label: 'Dim' },
-                { value: 'dark',label: 'Dark' }
-              ] }
-              value={ Config.get().darkMode }
-              onUpdateValidValue={ ( { value } ) => {
-                let nextValue = value
-                $$.localStrage.set( 'prf.darkMode',nextValue )
-                Config.update.darkMode( nextValue )
-              } }
-            />
-          </Box>
-        }
-      } )
+      $$.interval.once( () => {
+        Sheet.open( {
+          sheetID: 'darkModeSelector',
+          type: 'custom',
+          parent: document.body,
+          gravityPoint: 19,
+          closeAtAroundClick: false,
+          content: () => {
+            return <Box padding={ 1 }>
+              <Input.Segmented.Cloud
+                cellStyles={ {
+                  flexCenter: true,
+                  padding: [ '1/4','1/2' ],
+                  isRounded: true,
+                } }
+                cellCheckedStyles={ {
+                  boxShadow: '2.normal',
+                  backgroundColor: 'theme',
+                  fontColor: 'white'
+                } }
+                ssCardBox
+                backgroundColor={ 'layer.1' }
+                isRounded
+                gap={ '1/6' }
+                fontColor={ '4.thin' }
+                { ...p }
+                options={ [
+                  { value: 'light',label: 'Light' },
+                  { value: 'dim',label: 'Dim' },
+                  { value: 'dark',label: 'Dark' }
+                ] }
+                value={ Config.get().darkMode }
+                onUpdateValidValue={ ( { value } ) => {
+                  let nextValue = value
+                  $$.localStrage.set( 'prf.darkMode',nextValue )
+                  Config.update.darkMode( nextValue )
+                } }
+              />
+            </Box>
+          }
+        } )
+      },100 )
     },[] )
 
     return null
@@ -2840,38 +2859,40 @@ const DesignConfig = {
     }
     useEffect( () => {
       $$.scope( async () => {
-        Sheet.open( {
-          sheetID: 'themeColorSelector',
-          type: 'custom',
-          parent: document.body,
-          gravityPoint: 17,
-          closeAtParentBlur: false,
-          closeAtAroundClick: false,
-          content: () => {
-            return <Box padding={ 1 }>
-              <Button.Border
-                isRounded
-                fontColor='theme'
-                onClick={ ( e ) => {
-                  OpenThemeSheet( {
-                    defaultColor: Config.get().themeColor,
-                    cb: ( newColor ) => { }
-                  } )
-                } }
-              >
-                <Row.Center gap={ '1/3' }>
-                  <Box
-                    boxShadow={ '2.normal' }
-                    ssSquare={ 1 }
-                    borderRadius={ '1/3' }
-                    backgroundColor={ 'theme' }
-                  />
-                  Theme: { Config.get().themeColor.toCapital() }
-                </Row.Center>
-              </Button.Border>
-            </Box>
-          }
-        } )
+        $$.interval.once( () => {
+          Sheet.open( {
+            sheetID: 'themeColorSelector',
+            type: 'custom',
+            parent: document.body,
+            gravityPoint: 17,
+            closeAtParentBlur: false,
+            closeAtAroundClick: false,
+            content: () => {
+              return <Box padding={ 1 }>
+                <Button.Border
+                  isRounded
+                  fontColor='theme'
+                  onClick={ ( e ) => {
+                    OpenThemeSheet( {
+                      defaultColor: Config.get().themeColor,
+                      cb: ( newColor ) => { }
+                    } )
+                  } }
+                >
+                  <Row.Center gap={ '1/3' }>
+                    <Box
+                      boxShadow={ '2.normal' }
+                      ssSquare={ 1 }
+                      borderRadius={ '1/3' }
+                      backgroundColor={ 'theme' }
+                    />
+                    Theme: { Config.get().themeColor.toCapital() }
+                  </Row.Center>
+                </Button.Border>
+              </Box>
+            }
+          } )
+        },100 )
       } )
     },[] )