375e3a5a3b
## 概要 [Task2908: 画面実装（代行操作中表示コンポーネント＋代行操作中に表示する画面のデザイン）](https://paruru.nds-tyo.co.jp:8443/tfs/ReciproCollection/fa4924a4-d079-4fab-9fb5-a9a11eb205f0/_workitems/edit/2908) - 代行操作中に表示する画面に対して、代行操作中のデザインを反映 - 代行操作中に画面上部に表示するバーのコンポーネントを作成 - 代行操作用のトークンをauthStateに追加 ## レビューポイント - 代行操作バーのコンポーネントに表示する会社名をpropsとしたが良いか - このコンポーネントを表示する画面で会社名を取得して、会社名とトークンがあれば表示するという風にしたいから - 代行操作用トークンはauthStateでよいと思っているが認識会うか ## UIの変更 - https://ndstokyo.sharepoint.com/:f:/r/sites/Piranha/Shared%20Documents/General/OMDS/%E3%82%B9%E3%82%AF%E3%83%AA%E3%83%BC%E3%83%B3%E3%82%B7%E3%83%A7%E3%83%83%E3%83%88/Task2908?csf=1&web=1&e=Cr5NCL ## 動作確認状況 - ローカルで確認 ## 補足 - 相談、参考資料などがあれば
37 lines
1.1 KiB
TypeScript
37 lines
1.1 KiB
TypeScript
// 代行操作中に表示するコンポーネント
|
|
// ------------------------------------------------------
|
|
import React from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { useTranslation } from "react-i18next";
|
|
import styles from "../../styles/app.module.scss";
|
|
import exit from "../../assets/images/exit.svg";
|
|
import reportWhite from "../../assets/images/report_white.svg";
|
|
import { getTranslationID } from "translation";
|
|
|
|
interface DelegationBarProps {
|
|
delegatedCompanyName: string;
|
|
}
|
|
|
|
export const DelegationBar: React.FC<DelegationBarProps> = (
|
|
porps
|
|
): JSX.Element => {
|
|
const { delegatedCompanyName } = porps;
|
|
const { t } = useTranslation();
|
|
|
|
return (
|
|
<div className={styles.manageInfo}>
|
|
<img src={reportWhite} className={styles.manageIcon} alt="report" />
|
|
<p className={styles.txNormal}>
|
|
{t(getTranslationID("common.label.operationInsteadOf"))}
|
|
<span>{delegatedCompanyName}</span>
|
|
</p>
|
|
<img
|
|
src={exit}
|
|
className={styles.manageIconClose}
|
|
alt="Exit"
|
|
title="Exit"
|
|
/>
|
|
</div>
|
|
);
|
|
};
|