1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
import FieldGrid from './field-grid'
import { useState } from 'react'
import { Checkbox, CheckboxGroup } from '@react-spectrum/s2/CheckboxGroup'
import { Radio, RadioGroup } from '@react-spectrum/s2/RadioGroup'
import { Switch } from '@react-spectrum/s2/Switch'
import { Picker, PickerItem } from '@react-spectrum/s2/Picker'
import { ComboBox, ComboBoxItem } from '@react-spectrum/s2/ComboBox'
import { SelectBox, SelectBoxGroup, Text, type Selection } from '@react-spectrum/s2/SelectBoxGroup'
import { SegmentedControl, SegmentedControlItem, type Key } from '@react-spectrum/s2/SegmentedControl'
import { ToggleButton, ToggleButtonGroup } from '@react-spectrum/s2/ToggleButtonGroup'
import styles from './form-examples.module.css'
export default function SelectionFields({ disabled }: { disabled: boolean }) {
const [plan, setPlan] = useState<Selection>(new Set(['personal']))
const [view, setView] = useState<Key>('list')
const [format, setFormat] = useState<Selection>(new Set())
const [favorite, setFavorite] = useState(false)
const [partial, setPartial] = useState(true)
const [partialSelected, setPartialSelected] = useState(false)
return (
<section className={styles.section} aria-labelledby="selection-fields-title">
<h2 id="selection-fields-title">选择控件</h2>
<FieldGrid>
<Picker name="region" label="下拉单选" defaultSelectedKey="shanghai">
<PickerItem id="shanghai">上海</PickerItem><PickerItem id="beijing">北京</PickerItem><PickerItem id="shenzhen">深圳</PickerItem>
</Picker>
<ComboBox name="language" label="可搜索下拉框" defaultItems={[{ id: 'ts', name: 'TypeScript' }, { id: 'js', name: 'JavaScript' }, { id: 'py', name: 'Python' }]}>
{(item) => <ComboBoxItem id={item.id}>{item.name}</ComboBoxItem>}
</ComboBox>
<RadioGroup name="contact" label="单选组" defaultValue="email" orientation="horizontal">
<Radio value="email">邮件</Radio><Radio value="phone">电话</Radio>
</RadioGroup>
<CheckboxGroup name="interests" label="复选框组" defaultValue={['design']}>
<Checkbox value="design">设计</Checkbox><Checkbox value="development">开发</Checkbox><Checkbox value="research">研究</Checkbox>
</CheckboxGroup>
<div className={styles.stack}>
<Checkbox name="newsletter" value="yes">订阅邮件</Checkbox>
<Checkbox name="partialSelection" value="yes" isIndeterminate={partial} isSelected={partialSelected} onChange={(value) => { setPartial(false); setPartialSelected(value) }}>部分选中状态</Checkbox>
<Switch name="notifications" value="on" defaultSelected>开启通知</Switch>
</div>
<div className={styles.stack}>
<span id="view-label">分段选择</span>
<SegmentedControl aria-labelledby="view-label" selectedKey={view} onSelectionChange={setView}>
<SegmentedControlItem isDisabled={disabled} id="list">列表</SegmentedControlItem><SegmentedControlItem isDisabled={disabled} id="grid">网格</SegmentedControlItem>
</SegmentedControl>
<input type="hidden" name="view" value={String(view)} />
</div>
<div className={styles.stack}>
<span id="format-label">切换按钮组</span>
<ToggleButtonGroup aria-labelledby="format-label" selectionMode="multiple" selectedKeys={format} onSelectionChange={setFormat}>
<ToggleButton id="bold">粗体</ToggleButton><ToggleButton id="italic">斜体</ToggleButton>
</ToggleButtonGroup>
<input type="hidden" name="format" value={JSON.stringify(format === 'all' ? ['bold', 'italic'] : [...format])} />
<ToggleButton isSelected={favorite} onChange={setFavorite}>收藏</ToggleButton>
<input type="hidden" name="favorite" value={String(favorite)} />
</div>
</FieldGrid>
<div className={styles.stack}>
<span id="plan-label">卡片选择</span>
<SelectBoxGroup isDisabled={disabled} aria-labelledby="plan-label" selectedKeys={plan} onSelectionChange={setPlan}>
<SelectBox id="personal" textValue="个人版"><Text slot="label">个人版</Text><Text slot="description">个人工作空间</Text></SelectBox>
<SelectBox id="team" textValue="团队版"><Text slot="label">团队版</Text><Text slot="description">多人协作空间</Text></SelectBox>
</SelectBoxGroup>
<input type="hidden" name="plan" value={plan === 'all' ? 'all' : [...plan].join(',')} />
</div>
</section>
)
}
|
