BackgroundJobsPanel

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { action } from '@storybook/addon-actions'
import { Story } from '@storybook/react'
import React, { useState } from 'react'
import styled from 'styled-components'
import { BackgroundJobsList } from './BackgroundJobsList'
import { BackgroundJobsPanel, JobProps } from './BackgroundJobsPanel'
export default {
title: 'Data Display(データ表示)/BackgroundJobsPanel',
component: BackgroundJobsPanel,
subcomponents: {
BackgroundJobsList,
},
}
export const PanelView: Story = () => {
return (
<List>
<dt>Normal</dt>
<dd>
<BackgroundJobsPanel
title="Jobs panel"
jobs={[
{
id: 1,
status: 'processing',
name: 'Job 1',
description: 'Processing',
isCancelable: true,
},
{
id: 2,
status: 'downloading',
name: 'Job 2',
description: 'Downloading',
},
{
id: 3,
status: 'warning',
name: 'Job 3',
description: 'Warning',
},
{
id: 4,
status: 'error',
name: 'Job 4',
description: 'Error',
},
{
id: 5,
status: 'done',
name: 'Job 5',
description: 'Done',
},
]}
onClickExpansion={action('click expansion')}
onClickCancelJob={action('click cancel')}
onClickClose={action('click close')}
isExpanded
/>
</dd>
<dt>Closed</dt>
<dd>
<BackgroundJobsPanel
title="Closed panel"
jobs={[
{
id: 1,
status: 'processing',
name: 'Job 1',
description: 'Processing',
isCancelable: true,
},
]}
onClickExpansion={action('click expansion')}
onClickClose={action('click close')}
isExpanded={false}
/>
</dd>
<dt>Toggle expansion</dt>
<dd>
<BackgroundJobsPanel
title="can toggle by maximize/minimize button"
jobs={[
{
id: 1,
status: 'processing',
name: 'Job 1',
description: 'Processing',
isCancelable: true,
},
{
id: 2,
status: 'downloading',
name: 'Job 2',
description: 'Downloading',
},
{
id: 3,
status: 'warning',
name: 'Job 3',
description: 'Warning',
},
{
id: 4,
status: 'error',
name: 'Job 4',
description: 'Error',
},
{
id: 5,
status: 'done',
name: 'Job 5',
description: 'Done',
},
]}
onClickExpansion={action('click expansion')}
onClickCancelJob={action('click cancel')}
onClickClose={action('click close')}
/>
</dd>
<dt>Long text ellipsis</dt>
<dd>
<BackgroundJobsPanel
title="Ellipsis"
jobs={[
{
id: 1,
status: 'downloading',
name: 'long long long long long long long long long long long long name',
description:
'long long long long long long long long long long long long description',
},
{
id: 2,
status: 'downloading',
name: 'long long long long long long long long long long long long name',
description:
'long long long long long long long long long long long long description',
isCancelable: true,
},
]}
onClickExpansion={action('click expansion')}
onClickCancelJob={action('click cancel')}
onClickClose={action('click close')}
/>
</dd>
</List>
)
}
PanelView.storyName = 'panel'
export const ListView: Story = () => {
const [panels, setPanels] = useState<
Array<{
seq: number
jobs: JobProps[]
}>
>([])
const [panelSeq, setPanelSeq] = useState(1)
return (
<Wrapper>
<button
onClick={() => {
setPanels(
panels.concat({
seq: panelSeq,
jobs: [
{
id: 1,
status: 'processing',
name: 'Job 1',
description: 'Processing',
isCancelable: true,
},
{
id: 2,
status: 'downloading',
name: 'Job 2',
description: 'Downloading',
},
],
}),
)
setPanelSeq(panelSeq + 1)
}}
>
Add panel
</button>
<BackgroundJobsList>
{panels.map(({ seq, jobs }) => (
<BackgroundJobsList.Item key={seq}>
<BackgroundJobsPanel
title={`Jobs panel ${seq}`}
jobs={jobs}
onClickClose={() => {
setPanels(panels.filter((panel) => panel.seq !== seq))
}}
/>
</BackgroundJobsList.Item>
))}
</BackgroundJobsList>
</Wrapper>
)
}
ListView.storyName = 'list'
const List = styled.dl`
list-style: none;
margin: 0;
padding: 2rem;
dt {
margin-bottom: 1rem;
}
dd {
margin: 0 0 2rem;
}
`
const Wrapper = styled.div`
padding: 2rem;
`
処理中

Props

BackgroundJobsPanel props

title必須
string

パネルのタイトル

jobs必須
JobProps[]

バックグラウンドジョブデータの配列

isExpanded
falsetrue

パネルを広げるかどうか

onClickCancelJob
(jobId: JobId) => void

ジョブのキャンセルボタンクリックのハンドラ

onClickExpansion
(isExpanded: boolean) => void

パネルの開閉ボタンクリックのハンドラ

onClickClose
() => void

パネルの閉じるボタンクリックのハンドラ

padding
0"XXS""XS""S""M""L""XL""XXL"0.250.50.7511.251.522.533.548-0.25-0.5-0.75-1-1.25-1.5-2-2.5-3-3.5-4-8"X3S""X3L"SeparatePadding

境界とコンテンツの間の余白

overflow
"auto""hidden""inherit"string & {}"-moz-initial""initial""revert""unset""clip""visible""-moz-hidden-unscrollable""scroll"{ x: OverflowX; y: OverflowY; }

コンテンツが要素内に収まらない場合の処理方法

radius
"s""m"

角丸のサイズ

layer
01234

レイヤの重なり方向の高さ(影の付き方に影響する)