Redux FormのサンプルをSemantic UI Reactで書き換える

## 概要

[Redux Form](https://redux-form.com/8.1.0/) 公式のサンプルはBootstrapベースなので、「[Field-level Validation Example](https://redux-form.com/8.1.0/examples/fieldlevelvalidation/)」のサンプルを [Semantic UI React](https://react.semantic-ui.com) で書き換えたというもの。

Redux Formはバリデーションフォームを作る際によく用いられ、他方 Semantic UI React もパーツが充実してきて最近のお気に入りなので、テンプレートおよび備忘録的に残しておく意図で書いたもの。

## リファレンス
- [Field-Level Validation Example](https://redux-form.com/8.1.0/examples/fieldlevelvalidation/)
- [Semantic UI React](https://react.semantic-ui.com/)
- [@mairh/Redux-Form-Semantic-UI-React](https://gist.github.com/mairh/233f6b4ffdbaaed8ec75bb0bef087e8f)

## 出来上がったもの
- ソースコード - [@yamaryu0508/redux-form-semantic-ui](https://github.com/yamaryu0508/redux-form-semantic-ui)
- 公開ページ - [https://yamaryu0508.github.io/redux-form-semantic-ui/](https://yamaryu0508.github.io/redux-form-semantic-ui/)

## ポイント
### `ValidationForm.jsx`
- Semantic UI Reactの`Form`等のコンポーネントと Redux Form の`Field`コンポーネントを組合せて利用する部分。Bootstrapで`form`だった部分を`Form`に変えるだけではあるが、Semantic UI Reactを適用するためのポイントと言える
- `Field`中の`component`部分の定義。`componet`を Semantic UI React のコンポーネントで定義し直す部分。これも`input`を Semantic UI React の`Form.Input`等に置き換えていくだけではあるが、やはり Semantic UI React を適用するためのポイント

```jsx:ValidationForm.jsx
import React from "react";
import { Field, reduxForm } from "redux-form";
import { Button, Form } from "semantic-ui-react";

import { renderText } from "./SemanticFields";
import {
  required,
  maxLength15,
  email,
  aol,
  number,
  minValue13,
  tooYoung
} from "./Validations";

const ValidationForm = props => {
  const { handleSubmit, pristine, reset, submitting } = props;
  return (
    <Form>
      <Field
        required
        name="username"
        type="text"
        component={renderText}
        label="Username"
        validate={[required, maxLength15]}
      />
      <Field
        name="email"
        type="email"
        component={renderText}
        label="Email"
        validate={email}
        warn={aol}
      />
      <Field
        required
        name="age"
        type="number"
        component={renderText}
        label="Age"
        validate={[required, number, minValue13]}
        warn={tooYoung}
      />
      <Form.Group>
        <Button
          color="blue"
          icon="checkmark"
          labelPosition="right"
          content="Submit"
          onClick={handleSubmit}
          disabled={submitting}
        />
        <Button
          content="Clear Values"
          onClick={reset}
          disabled={pristine || submitting}
        />
      </Form.Group>
    </Form>
  );
};

export default reduxForm({
  form: "form"
})(ValidationForm);
```

### `SemanticFields.jsx`

- `Field`中の`component`部分は Semantic UI React の`Form.Input`等に置き換えると良いが、メッセージ表示を行おうとすると、レイアウト等をどうするか一考必要で、今回は`Form.Field`で括ることで解決を図った

```jsx:SemanticFields.jsx
import React from "react";
import { Form } from "semantic-ui-react";

export const renderText = ({
  input,
  type,
  label,
  placeholder,
  meta: { touched, error, warning },
  ...props
}) => (
  <Form.Field>
    <Form.Input
      {...input}
      {...props}
      error={touched && error && true}
      label={label}
      placeholder={placeholder}
    />
    <Form.Field>
      {touched &&
        ((error && <i style={{ color: "#9f3a38" }}>{error}</i>) ||
          (warning && <i style={{ color: "#9f3a38" }}>{warning}</i>))}
    </Form.Field>
  </Form.Field>
);
```