zent
Version:
一套前端设计语言和基于React的实现
157 lines (145 loc) • 3.22 kB
Markdown
order: 4
zh-CN:
title: 多选
hide: 隐藏选择框
show: 显示选择框
toSingle: 切换单选
toMultiple: 切换多选
errorTips: 你最多选择两个
product: 商品
productName: 商品名
uv: 访问量
stock: 库存
babyProducts: 母婴商品
petProducts: 宠物商品
reason: '禁用原因'
en-US:
title: Selection
hide: Hide
show: Show
toSingle: To single mode
toMultiple: To multiple mode
errorTips: You can choose up to two
product: Product
productName: Product Name
uv: uv
stock: stock
babyProducts: Baby Products
petProducts: Pet Products
reason: Reason of disabled
```jsx
import { Grid, Notify, Button } from 'zent';
const columns = [
{
title: '{i18n.productName}',
name: 'name',
},
{
title: '{i18n.uv}',
name: 'uv',
},
{
title: '{i18n.stock}',
name: 'stock',
},
];
const pageSize = 5;
const totalItem = 10;
const datasets = [];
const datasets2 = [];
for (let i = 0; i < 5; i++) {
datasets.push({
id: `f-${i}`,
name: `{i18n.babyProducts} ${i}`,
uv: 20,
stock: 5,
});
datasets2.push({
id: `s-${i}`,
name: `{i18n.petProducts} ${i}`,
uv: 20,
stock: 5,
});
}
class Selection extends React.Component {
state = {
selectedRowKeys: ['f-0'],
datasets,
current: 1,
showSelection: true,
isSingle: false,
};
onChange = ({ current }) => {
this.setState({
current,
datasets: current === 1 ? datasets : datasets2,
});
};
toggleSelection = () => {
this.setState({
showSelection: !this.state.showSelection,
});
};
toggleSelectionMode = () => {
this.setState({
isSingle: !this.state.isSingle,
selectedRowKeys: [this.state.selectedRowKeys[0]],
});
};
render() {
return (
<>
<Button onClick={this.toggleSelection} style={{ marginBottom: 12 }}>
{this.state.showSelection ? '{i18n.hide}' : '{i18n.show}'}
</Button>
{this.state.showSelection && (
<Button onClick={this.toggleSelectionMode} style={{ marginBottom: 12 }}>
{ this.state.isSingle ? '{i18n.toMultiple}' : '{i18n.toSingle}' }
</Button>
)}
<Grid
columns={columns}
datasets={this.state.datasets}
pageInfo={{
pageSize: pageSize,
total: totalItem,
current: this.state.current,
}}
paginationType="lite"
selection={
this.state.showSelection
? {
selectedRowKeys: this.state.selectedRowKeys,
isSingleSelection: this.state.isSingle,
onSelect: (selectedRowKeys, selectedRows, currentRow) => {
if (selectedRowKeys.length > 2) {
Notify.error('{i18n.errorTips}');
this.setState({
selectedRowKeys: [].concat(this.state.selectedRowKeys),
});
} else {
this.setState({
selectedRowKeys,
});
}
},
getSelectionProps: data => ({
disabled: data.name === '{i18n.babyProducts} 1',
indeterminate: data.id === 'f-2' && this.state.selectedRowKeys.includes('f-2'),
reason: '{i18n.reason}',
}),
}
: undefined
}
rowKey="id"
onChange={this.onChange}
size="large"
/>
</>
);
}
}
ReactDOM.render(<Selection />, mountNode);
```