InputFile

処理中
ドラッグして幅を変更
ドラッグして高さを変更
import { action } from '@storybook/addon-actions'
import { Story } from '@storybook/react'
import * as React from 'react'
import styled from 'styled-components'
import { InputFile } from './InputFile'
export default {
title: 'Forms(フォーム)/InputFile',
component: InputFile,
}
export const All: Story = () => {
return (
<List>
<dt>Default</dt>
<dd>
<InputFile name="default" label="ファイルを選択" onChange={action('onChange')} multiple />
</dd>
<dt>Size S</dt>
<dd>
<InputFile
name="size"
label="ファイルを選択"
onChange={action('onChange')}
size="s"
multiple
/>
</dd>
<dt>Disabled file list</dt>
<dd>
<InputFile
name="hasFileList"
label="ファイルを選択"
onChange={action('onChange')}
hasFileList={false}
/>
</dd>
<dt>Disabled input</dt>
<dd>
<InputFile name="disabled" label="ファイルを選択" disabled />
</dd>
<dt>エラー</dt>
<dd>
<InputFile name="error" label="ファイルを選択" error />
</dd>
<dt>decoratorで文言変更</dt>
<dd>
<InputFile
name="decorator"
label="select file."
decorators={{ destroy: (text) => `delete(${text})` }}
/>
</dd>
</List>
)
}
All.storyName = 'all'
const List = styled.dl`
margin: 1rem;
& > dt {
margin-bottom: 0.5rem;
}
& > dd {
margin: 0 0 1rem;
}
`
処理中

Props

NameRequiredTypeDescription
className-stringコンポーネントに適用するクラス名
size-"default", "s"コンポーネントの大きさ
labeltruestring, number, false, true, ReactElement<any, string | JSXElementConstructor<any>>, ReactFragment, ReactPortalフォームのラベル
onChange-(files: File[]) => voidファイルの選択に変更があったときに発火するコールバック関数
error-false, true`true` の時、フォームの枠の色が `DANGER` になる
hasFileList-false, trueファイルリストを表示するかどうか
decorators-DecoratorsType<"destroy">コンポーネント内のテキストを変更する関数