amotify 0.2.171 → 0.2.173

package/demo/esbuild/app.tsx

@@ -16,6 +16,10 @@ import {
   Column,
   Cropper,
   Img,
+  Row,
+  Literal,
+  Sheet,
+  FAI,
 } from 'amotify'
 
 import {
@@ -29,22 +33,85 @@ import {
 } from './designBook'
 
 let Test = () => {
+  useEffect( () => {
+    let sheetID = 'passwordChangeSheet'
+    let formName = 'passwordChangeForm'
+    Sheet.open( 'topCenter',{
+      sheetID,
+      size: 'S',
+      content: () => {
+        console.log( 'AAAAA' )
+        // Hkvwtxky73n84
+        return <Sheet.Body>
+          <Column padding={ 2 } gap={ 2 }>
+            <Column>
+              <Row.Separate>
+                <Literal isSemiBoldFont>パスワードを変更</Literal>
+                <Button.Sub
+                  ssSphere={ 3 }
+                  color='cloud'
+                  onClick={ () => {
+                    Sheet.close( sheetID )
+                  } }
+                >
+                  <FAI.X />
+                </Button.Sub>
+              </Row.Separate>
+              <Box>
+                <Literal.Supplement fontColor='nega'>
+                  ※送信後サインアウトされます。
+                </Literal.Supplement>
+              </Box>
+            </Column>
+
+            <Column gap={ 1.5 }>
+              <Input.TextField.Password
+                label='現在のパスワード'
+                required
+                form={ formName }
+                name='currentPassword'
+              />
+              <Input.TextField.Password
+                label='新しいパスワード'
+                required
+                form={ formName }
+                name='newPassword'
+                id='newPassword'
+              />
+              <Input.TextField.Password
+                label='新しいパスワード(確認)'
+                required
+                form={ formName }
+                name='newPasswordConfirm'
+                onValidate={ async value => {
+                  let newPassword = $$( '#newPassword' ).getAttribute( 'value' )
+                  if ( value != newPassword ) {
+                    return {
+                      ok: false,notice: [ { type: 'invalid',label: 'パスワードが一致しません' } ]
+                    }
+                  }
+                  return { ok: true,notice: [] }
+                } }
+              />
+            </Column>
+            <Row.Right>
+              <Button.Prime
+                submitOption={ {
+                  formName,
+                  callback: ( form ) => {
+                    console.log( form )
+                  }
+                } }
+              >
+                <Literal>変更する</Literal>
+              </Button.Prime>
+            </Row.Right>
+          </Column>
+        </Sheet.Body>
+      }
+    } )
+  },[] )
   return <Box padding={ 4 }>
-    <Input.Autocomplete
-      options={ [] }
-      // DynamicOptionsOnSearchDelay={ 1000 }
-      DynamicOptionsOnSearch={ async ( keyword ) => {
-        console.log( "keyword",keyword )
-        return [
-          { value: 0,label: 'AAA' },
-          { value: 1,label: 'BBB' },
-          { value: 2,label: 'CCC' },
-        ]
-      } }
-      onUpdateValidValue={ value => {
-        console.log( "value",value )
-      } }
-    />
     {/* <DesignBook
     /> */}
   </Box>