Reactサンプルアプリ開発プラニングポーカー (2) モーダルダイアログ

プレイヤーのカードをクリックするとモーダルダイアログでデッキを表示するようにする。

モーダルダイアログにはreact-modalを使う。

$yarn add react-modal
$yarn add @types/react-modal

Modalをインポート。

import Modal from 'react-modal';

オーバーレイを被せる要素をModal.setAppElementで指定する。

Modal.setAppElement('#app');

オーバーレイとダイアログ領域に当てるカスタムスタイルを定義しておく。

const customStyles = {
  overlay: {
    backgroundColor: "rgba(0, 0, 0, 0.7)"
  },
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    padding: 0,
    transform: 'translate(-50%, -50%)'
  }
};

モーダルの開閉状態を表すステートをuseStateを使って宣言する。

export const Player: FunctionComponent<PlayerProps> = (props) => {
  const [modalIsOpen, setModalIsOpen] = useState(false);

モーダル開閉用のハンドラを定義。

  const handleModalOpen = () => {
    setModalIsOpen(true);
  }

  const handleModalClose = () => {
    setModalIsOpen(false);
  }

カード領域のdivのonClickでhandleModalOpenを呼び出すように指定。

      <div className="player-card" onClick={handleModalOpen}>
        <span className="point">{props.bid}</span>
      </div

Modalコンポーネントを配置する。

      <Modal isOpen={modalIsOpen} onRequestClose={handleModalClose}
        contentLabel="test" style={customStyles} >
        <Deck points={points} />
      </Modal>

isOpen属性には、ステート変数modalIsOpenをバインド
onRequestClose属性にモーダルクローズのハンドラhandleModalCloseをバインド
style属性にはカスタムスタイルをバインド
Modalタグの子要素にダイアログのコンテンツを配置する

これでモーダルダイアログの表示が実装できた。
Playerコンポーネントの現在の実装は以下のとおり。

import React, { FunctionComponent, useState } from "react";
import Modal from 'react-modal';
import { Deck } from "./Deck";

Modal.setAppElement('#app');
const customStyles = {
  overlay: {
    backgroundColor: "rgba(0, 0, 0, 0.7)"
  },
  content: {
    top: '50%',
    left: '50%',
    right: 'auto',
    bottom: 'auto',
    marginRight: '-50%',
    padding: 0,
    transform: 'translate(-50%, -50%)'
  }
};

export type PlayerProps = {
  name: string;
  icon: number;
  bid: string;
  open: boolean;
}

export const Player: FunctionComponent<PlayerProps> = (props) => {
  const [modalIsOpen, setModalIsOpen] = useState(false);
  const points = ["0", "1", "2", "3", "5", "8"];

  const handleModalOpen = () => {
    setModalIsOpen(true);
  }

  const handleModalClose = () => {
    setModalIsOpen(false);
  }

  return (
    <div className="player">
      <div className="player-info">
        <div className={"player-icon-" + props.icon}>
        </div>
        <div className="player-name">{props.name}</div>
      </div>
      <div className="player-card" onClick={handleModalOpen}>
        <span className="point">{props.bid}</span>
      </div>
      <Modal isOpen={modalIsOpen} onRequestClose={handleModalClose}
        contentLabel="test" style={customStyles} >
        <Deck points={points} />
      </Modal>
    </div>
  )
}