amotify 0.2.97 → 0.2.98

package/demo/esbuild/app.tsx

@@ -30,56 +30,6 @@ 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++ ) {
@@ -94,180 +44,42 @@ let Test = () => {
     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>
   </>
 }