RightFixedNote

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { action } from '@storybook/addon-actions'
import { Story } from '@storybook/react'
import * as React from 'react'
import { RightFixedNote } from './RightFixedNote'
export default {
title: 'Data Display(データ表示)/RightFixedNote',
component: RightFixedNote,
}
const sampleItems = [
{
id: 'id-1',
text: 'コメントテキストテキストテキストテキストテキストテキスト',
date: '2020/4/15 16:20:00',
author: 'test@smarthr.co.jp',
},
{
id: 'id-2',
text: 'コメントテキストテキストテキストテキストテキストテキスト',
date: '2020/4/15 16:20:00',
author: 'test@smarthr.co.jp',
},
{
id: 'id-3',
text: 'コメントテキストテキストテキストテキストテキストテキスト',
date: '2020/4/15 16:20:00',
author: 'test@smarthr.co.jp',
},
]
export const All: Story = () => (
<RightFixedNote
title="RightFixedNote"
items={sampleItems}
onSubmit={action('submit!')}
onClickEdit={action('click edit!!')}
textareaLabel="コメント"
/>
)
All.storyName = 'all'
export const WithoutTextareaLabel: Story = () => (
<RightFixedNote
title="RightFixedNote"
items={sampleItems}
onSubmit={action('submit!')}
onClickEdit={action('click edit!!')}
/>
)
WithoutTextareaLabel.storyName = 'without textarea label'
export const WithoutItems: Story = () => (
<RightFixedNote
title="RightFixedNote"
onSubmit={action('submit!')}
onClickEdit={action('click edit!!')}
textareaLabel="コメント"
/>
)
WithoutItems.storyName = 'without items'
export const WithoutItemsAndTextareaLabel: Story = () => (
<RightFixedNote
title="RightFixedNote"
onSubmit={action('submit!')}
onClickEdit={action('click edit!!')}
/>
)
WithoutItemsAndTextareaLabel.storyName = 'without items and textarea label'
処理中

Props

RightFixedNote props

NameRequiredTypeDescription
titletruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalコンポーネントのタイトル
items-ItemProps[]表示するアイテムの配列
width-numberコンポーネントの幅
textareaLabel-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortaltextarea のラベル
onClickEdittrueOnClickEditedit ボタンを押下したときに発火するコールバック関数
onSubmittrue(e: FormEvent<HTMLFormElement>, text: string) => voidsubmit ボタンを押下したときに発火するコールバック関数
className-stringコンポーネントに適用するクラス名
decorators-DecoratorsType<"submitLabel">コンポーネント内の文言を変更するための関数を設定

RightFixedNoteItem props

NameRequiredTypeDescription
texttruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortal表示するテキスト
date-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalこのアイテムが追加された日付
author-string, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalこのアイテムの著者
editLabel-stringedit ボタンの aria-label
className-stringこのコンポーネントに適用するクラス名
onClickEdittrueOnClickEdit