amotify 0.2.172 → 0.2.174

package/demo/esbuild/app.tsx

@@ -16,6 +16,10 @@ import {
   Column,
   Cropper,
   Img,
+  Row,
+  Literal,
+  Sheet,
+  FAI,
 } from 'amotify'
 
 import {
@@ -29,30 +33,87 @@ import {
 } from './designBook'
 
 let Test = () => {
-  return <Box padding={ 4 }>
-    <Input.TextField.Password
-      label="Password"
-    />
-    <DesignBook
-    />
+  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>
 
-    <Box padding={ 2 } backgroundColor='posi'>
-      <Box padding={ 2 } backgroundColor='nega'>
-        <Box padding={ 2 } backgroundColor='warn'
-          onClick={ ( event ) => {
-            $$( event.target )
-              .parent()
-              .parent()
-              .callback( ( input ) => {
-                let Input = input[ 0 ]
-                console.log( "Input",input[ 0 ] )
-              } )
-          } }
-        >
-          Submit
-        </Box>
-      </Box>
-    </Box>
+            <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 }>
+    {/* <DesignBook
+    /> */}
   </Box>
 }