Merge pull request #6 from wakuwaku3/dev-form

 Formコンポーネントを作成

src/components/forms-controls/button.tsx

@@ -3,7 +3,7 @@ import * as React from 'react';
 import { Button as MuiButton, createStyles } from '@material-ui/core';
 import { ButtonProps as MuiButtonProps } from '@material-ui/core/Button';
 import { ThemeColorScope } from '../styles/theme-color-scope';
-import { decorate } from 'src/common/styles/styles-helper';
+import { decorate, getInjectClasses } from 'src/common/styles/styles-helper';
 import { resolve } from 'src/common/di/service-provider';
 
 const styles = createStyles({
@@ -15,7 +15,8 @@ export interface ButtonProps {
   themeColor?: keyof Colors;
 }
 export const Button = decorate(styles)<ButtonProps & MuiButtonProps>(props => {
-  const { themeColor, classes } = props;
+  const { themeColor } = props;
+  const classes = getInjectClasses(props);
   const { root } = classes;
   const pProps = resolve('componentHelper').createPropagationProps(
     props,

src/components/forms-controls/form.tsx

@@ -0,0 +1,28 @@
+import { decorate, getInjectClasses } from 'src/common/styles/styles-helper';
+import { createStyles } from '@material-ui/core';
+import { resolve } from 'src/common/service-provider';
+import * as React from 'react';
+
+const styles = createStyles({
+  root: {},
+});
+export interface FormProps {
+  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+}
+export const Form = decorate(styles)<FormProps>(props => {
+  const { onSubmit } = props;
+  const classes = getInjectClasses(props);
+  const { root } = classes;
+  const pProps = resolve('componentHelper').createPropagationProps(
+    props,
+    'onSubmit',
+  );
+  const onSubmitInner = (e: React.FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    if (onSubmit) {
+      onSubmit(e);
+    }
+    return false;
+  };
+  return <form {...pProps} className={root} onSubmit={onSubmitInner} />;
+});

src/pages/shared/sign-in.tsx

@@ -10,6 +10,7 @@ import { resolve } from 'src/common/di/service-provider';
 import { Resources } from 'src/common/location/resources';
 import { getCultureInfo } from 'src/common/location/localize-provider';
 import { messagesActionCreators } from 'src/stores/messages/messages-reducer';
+import { Form } from 'src/components/forms-controls/form';
 
 const styles = createStyles({
   root: {},
@@ -41,7 +42,7 @@ class Inner extends StyledComponentBase<typeof styles, Props & Events, State> {
     const { signIn, resources } = this.props;
     const { email, password } = this.state.model;
     return (
-      <form>
+      <Form onSubmit={e => signIn(this.state.model)}>
         <TextBox
           value={email}
           type="email"
@@ -54,10 +55,8 @@ class Inner extends StyledComponentBase<typeof styles, Props & Events, State> {
           type="password"
           onChange={this.onChange('password')}
         />
-        <Button onClick={e => signIn(this.state.model)}>
-          {resources.SignIn}
-        </Button>
-      </form>
+        <Button type="submit">{resources.SignIn}</Button>
+      </Form>
     );
   }
 }