FlashMessage(非推奨)

FlashMessageは気づきにくいため、安易な使用はお勧めしません。NotificationBarDialogの使用を検討してください。

FlashMessageコンポーネントは、インターフェイス上に表示されるメッセージパネルです。
ユーザー操作やシステムの処理結果を、ユーザーに素早くフィードバックするために使います。

SmartHR UIではFlashMessageです。

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { Story } from '@storybook/react'
import * as React from 'react'
import styled from 'styled-components'
import { Button } from '../Button'
import { FlashMessage, Props, animationTypes, messageTypes } from './FlashMessage'
import { FlashMessageListProvider, useFlashMessageList } from '.'
export default {
title: 'States(状態)/FlashMessage(非推奨)',
component: FlashMessage,
}
const Template: Story = (arg) => {
return (
<List>
{messageTypes.map((messageType) => (
<li key={messageType}>
<FlashMessage
type={messageType}
visible={true}
text={
messageType === 'success'
? '成功しました'
: messageType === 'info'
? '開始しました'
: messageType === 'warning'
? '保存されていない可能性があります'
: messageType === 'error'
? '9 件のエラーがあります'
: ''
}
animation={arg.animation}
onClose={() => {
console.log('close')
}}
/>
</li>
))}
<li>
<FlashMessage
type="success"
visible={true}
animation={arg.animation}
text="長いテキスト:編集内容を自動保存したので何卒ご確認のほどよろしくお願いいたします。編集内容を自動保存したので何卒ご確認のほどよろしくお願いいたします。編集内容を自動保存したので何卒ご確認のほどよろしくお願いいたします。"
onClose={() => {
console.log('close')
}}
/>
</li>
</List>
)
}
export const Bounce = Template.bind({})
Bounce.args = { animation: 'bounce' }
export const Fade = Template.bind({})
Fade.args = { animation: 'fade' }
export const None = Template.bind({})
None.args = { animation: 'none' }
export const Demo: Story = () => {
const [visible, setVisible] = React.useState<boolean>(true)
const [autoClose, setAutoClose] = React.useState<boolean>(true)
const [type, setType] = React.useState<Props['type']>('success')
const [animation, setAnimation] = React.useState<Props['animation']>('bounce')
const [text, setText] = React.useState<string>('自動保存しました')
const handleTypeChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setType(event.currentTarget.value as Props['type'])
}
const handleAnimationChange = (event: React.ChangeEvent<HTMLInputElement>) => {
setAnimation(event.currentTarget.value as Props['animation'])
}
return (
<div style={{ padding: '20px' }}>
<p>
<label>
<input
type="checkbox"
name="visible"
checked={visible}
onChange={() => setVisible(!visible)}
/>
visible
</label>
</p>
<p>
<label>
text
<input
name="text"
type="text"
value={text}
onChange={(e) => setText(e.currentTarget.value)}
/>
</label>
</p>
<p>
<label>
<input
type="checkbox"
name="autoClose"
checked={autoClose}
onChange={(e) => setAutoClose(e.target.checked)}
/>
auto close
</label>
</p>
<fieldset>
<legend>type</legend>
{messageTypes.map((messageType) => (
<label key={messageType}>
<input
name="messageType"
type="radio"
onChange={handleTypeChange}
value={messageType}
checked={type === messageType}
/>
{messageType}
</label>
))}
</fieldset>
<hr />
<fieldset>
<legend>animation</legend>
{animationTypes.map((animationType) => (
<label key={animationType}>
<input
name="animationType"
type="radio"
onChange={handleAnimationChange}
value={animationType}
checked={animation === animationType}
/>
{animationType}
</label>
))}
</fieldset>
<FlashMessage
visible={visible}
autoClose={autoClose}
type={type}
text={text}
animation={animation}
onClose={() => {
setVisible(false)
}}
/>
</div>
)
}
let messageCount = 1
const ListInner = () => {
const { enqueueMessage } = useFlashMessageList()
const handleClick = () => {
enqueueMessage({
type: 'success',
text: `success ${messageCount++}`,
})
}
return <Button onClick={handleClick}>Add message</Button>
}
export const FlashMessageList: Story = () => {
return (
<FlashMessageListProvider>
<ListInner />
</FlashMessageListProvider>
)
}
const List = styled.ul`
margin: 40px;
padding-left: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: 16px;
& > li {
min-height: 60px;
position: relative;
}
/* overwrite FlashMessage style */
& > li > div {
position: static;
display: inline-flex;
}
`
処理中

メッセージの書き方

  • 表示するメッセージが複数行になると可読性を下げるため、テキストは1行に収めます。
  • 1文のみの場合でも、文章には句点をつけます。
  • 単語のみ/体言止め(「など」で終わる場合も含む)は句点を省略します。

FlashMessageを使う際の注意

他の操作に影響を及ぼさない便利な反面、アテンションとして強くはありません。ユーザーに大きな影響を及ぼす更新の通知をしたい場合は、Dialogコンポーネントを使うことを検討してください。

種類

補足

各挙動

表示・非表示

FlashMessageは8秒表示されると自動的に非表示となります。

FlashMessageの上にカーソルが置かれている間は、FlashMessageが消えることはありません。 カーソルがFlashMessageから離れると、FlashMessageのタイムアウトが再開されます。

表示位置

配置位置は、ウィンドウを基準とした「右上」「右下」「左上」「左下」の4パターンです。

外部サービス(ChatPlus、KARTEなど)の影響、機能ごとの画面レイアウト都合で表示位置を変えなければならない場合は、調整してください。

【閉じる】ボタン

「×(閉じる)」ボタンを押して手動でFlashMessageの表示を消すこともできます。

Props

NameRequiredTypeDescription
visibletruefalse, truetrue のときに FlashMessage を表示する
typetrue"error", "warning", "info", "success"表示するアイコンのタイプ
texttruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalメッセージの内容
animation-"none", "bounce", "fade"アニメーションのタイプ
role-"alert", "status"コンポーネントに適用する role 属性
className-stringコンポーネントに適用するクラス名
onClosetrue() => void閉じるボタンを押下、または表示してから8秒後に発火するコールバック関数
autoClose-false, trueFlashMessage が表示されてから一定時間後に自動で閉じるかどうか