Reactサンプルアプリ開発 プラニングポーカー (2) モーダルダイアログ
プレイヤーのカードをクリックするとモーダルダイアログでデッキを表示するようにする。
モーダルダイアログにはreact-modalを使う。
$yarn add react-modal
$yarn add @types/react-modalModalをインポート。
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>
</divModalコンポーネントを配置する。
<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>
)
}