amotify 0.2.96 → 0.2.98

package/demo/esbuild/app.tsx

@@ -30,235 +30,56 @@ import {
   DesignBook
 } from './designBook'
 
-const OpenSheetA = () => {
-  Sheet.open( {
-    sheetID: 'sheetA',
-    type: 'normal.middleCenter',
-    hold_state: true,
-    content: <Sheet.Body>
-      <Column padding={ 1 }>
-        <Button.Sub
-          color='cloud'
-          ssSphere={ 3 }
-          onClick={ () => {
-            Sheet.close( 'sheetA' )
-          } }
-        ><FAI.Times /></Button.Sub>
-        <Input.TextField
-        />
-        <Text.Paragraph>SheetA(holdState)</Text.Paragraph>
-      </Column>
-    </Sheet.Body>
-  } )
-}
-const OpenSheetB = () => {
-  Sheet.open( {
-    sheetID: 'sheetB',
-    type: 'drawer.left',
-    content: () => {
-      return <Column padding={ 1 }>
-        <Button.Sub
-          color='cloud'
-          ssSphere={ 3 }
-          onClick={ () => {
-            Sheet.close( 'sheetB' )
-          } }
-        ><FAI.Times /></Button.Sub>
-        <Text.Paragraph>SheetB</Text.Paragraph>
-        <Input.TextField.Email
-        />
-        <Input.Time.Clock
-        />
-        <Button.Border
-          onClick={ () => {
-            OpenSheetA()
-          } }
-        >
-          Open SheetA
-        </Button.Border>
-      </Column>
-    }
-  } )
-}
 let Test = () => {
   let optionElms: ReactElement[] = []
   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 )
+  },[] )
+
+  let Options: Input.Autocomplete.Option[] = []
+  for ( let i = 0; i < 100; i++ ) {
+    Options.push( { value: 'option' + i,label: 'オプション-' + i } )
+  }
+  for ( let i = 0; i < 100; i++ ) {
+    Options.push( { value: 'optionJP' + i,label: '選択肢-' + i } )
+  }
+
   return <>
-    <DesignBook
-    />
+    {/* <DesignBook
+    /> */}
     <Row.Center
       flexCenter
       freeCSS={ {
         height: '100vh'
       } }
     >
-      <Column gap={ 2 }>
-        <Box
-          // unitWidth={ 8 }
-          padding={ '1/4' }
-          backgroundColor='nega'
-        >
-          <Input.Time.Clock
-            unitWidth={ 8 }
-            // flexSizing={ 'none' }
-            wrapStyles={ {
-              // unitWidth: 8
-            } }
-          />
-        </Box>
-        <Box
-          // unitWidth={ 8 }
-          padding={ '1/4' }
-          backgroundColor='nega'
-        >
-          <Input.Select
-            unitWidth={ 8 }
-            wrapStyles={ {
-              unitWidth: 8
-            } }
-            options={ [
-              { value: 1,label: 'Option1' },
-              { value: 2,label: 'Option2' },
-            ] }
-          />
-        </Box>
-        <Box
-          // unitWidth={ 8 }
-          padding={ '1/4' }
-          backgroundColor='nega'
-        >
-          <Input.TextField
-            wrapStyles={ {
-              unitWidth: 8
-            } }
-          />
-        </Box>
-        <Row.Left>
-          <Input.Switch.S
-            icon={ <FAI.Check /> }
-          />
-          <Input.Switch
-            icon={ <FAI.Check /> }
-          />
-          <Input.Switch.L
-            icon={ <FAI.Check /> }
-          />
-        </Row.Left>
-        <Row.Left>
-          <Input.Switch.S
-            isApply
-            icon={ <FAI.Check /> }
-          />
-          <Input.Switch
-            isApply
-            icon={ <FAI.Check /> }
-          />
-          <Input.Switch.L
-            isApply
-            icon={ <FAI.Check /> }
-          />
-        </Row.Left>
-
-        <Input.Radio
-          gap={ 1 }
-          iconSize='small'
-          iconColor='posi'
-          value={ 1 }
-          options={ [ { value: 1,label: "Option1" },{ value: 2,label: "Option2" },{ value: 3,label: "Option3" } ] }
-        />
-        <Input.Radio
-          gap={ 1 }
-          // iconSize='large'
-          iconColor='nega'
-          value={ 1 }
-          options={ [ { value: 1,label: "Option1" },{ value: 2,label: "Option2" },{ value: 3,label: "Option3" } ] }
-        />
-        <Input.Radio
-          gap={ 1 }
-          iconSize='large'
-          iconColor='warn'
-          value={ 1 }
-          options={ [
-            { value: 1,label: <Box>Option1</Box> },
-            { value: 2,label: <Box>Option2</Box> },
-            { value: 3,label: <Box>Option3</Box> }
-          ] }
-        />
-        <Input.Checkbox
-          gap={ 1 }
-          iconSize='small'
-          value={ 1 }
-          options={ [ { value: 1,label: "Option1" },{ value: 2,label: "Option2" },{ value: 3,label: "Option3" } ] }
-        />
-        <Input.Checkbox
-          gap={ 1 }
-          value={ 1 }
-          iconColor='theater'
-          options={ [ { value: 1,label: "Option1" },{ value: 2,label: "Option2" },{ value: 3,label: "Option3" } ] }
-        />
-        <Input.Checkbox
-          gap={ 1 }
-          iconSize='large'
-          value={ 1 }
-          iconColor='tree3'
-          options={ [ { value: 1,label: "Option1" },{ value: 2,label: "Option2" },{ value: 3,label: "Option3" } ] }
-        />
-
-        <Row.Center>
-          <Button.Prime
-            onClick={ () => {
-              Sheet.open( {
-                type: 'normal.middleCenter',
-                hold_state: true,
-                content: () => {
-                  return <Sheet.Body>
-                    <Column
-                      padding={ 2 }
-                    >
-                      <Button.Sub
-                        ssEffectsOnActive='ripple.theme'
-                        onClick={ ( e ) => {
-                          Tooltips.open( {
-                            parent: e.currentTarget,
-                            closeAtParentBlur: false,
-                            content: <Tooltips.Body>
-                              <Column
-                                padding={ 4 }
-                              >
-                                AAAA
-                              </Column>
-                            </Tooltips.Body>
-                          } )
-                        } }
-                      >
-                        Open Tooltips
-                      </Button.Sub>
-                    </Column>
-                  </Sheet.Body>
-                }
-              } )
-            } }
-          >
-            Submit
-          </Button.Prime>
-          <Button.Prime
-            onClick={ () => {
-              OpenSheetA()
-            } }
-          >
-            Sheet A
-          </Button.Prime>
-          <Button.Prime
-            onClick={ () => {
-              OpenSheetB()
-            } }
-          >
-            Sheet B
-          </Button.Prime>
-        </Row.Center>
-      </Column>
+      <Input.Search
+        freeCSS={ { minWidth: 12 * 12 } }
+        name='search'
+        label='Input.Search'
+        required
+        options={ Options }
+      // DynamicOptionsOnSearch={ async ( keyword ) => {
+      //   console.log( 'keyword',keyword )
+      //   let options: Input.Autocomplete.Option[] = []
+      //   for ( let i = 0; i < 100; i++ ) {
+      //     options.push( {
+      //       value: i,
+      //       label: String( i ),
+      //       searchValue: keyword
+      //     } )
+      //   }
+      //   return options
+      // } }
+      />
     </Row.Center>
   </>
 }

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 )
       } )
     },[] )