88 lines
2.7 KiB
Python
88 lines
2.7 KiB
Python
import React, { Fragment } from 'react';
|
|
import useBulkSelect from '../../hooks/useBulkSelect';
|
|
import rawEmails from '../../data/email/emails';
|
|
import classNames from 'classnames';
|
|
import { Card, CardBody } from 'reactstrap';
|
|
import Flex from '../common/Flex';
|
|
import FalconEditor from '../common/FalconEditor';
|
|
import PageHeader from '../common/PageHeader';
|
|
|
|
const bulkSelectCode = `function BulkSelectExample() {
|
|
const emailIds = rawEmails.map(email => email.id);
|
|
|
|
const {
|
|
selectedItems,
|
|
isSelectedItem,
|
|
isAllSelected,
|
|
isIndeterminate,
|
|
toggleSelectedItem,
|
|
toggleIsAllSelected
|
|
} = useBulkSelect(emailIds);
|
|
|
|
return (
|
|
<Card>
|
|
<CardBody className="p-0">
|
|
<Table className="mb-0">
|
|
<thead>
|
|
<tr>
|
|
<th>
|
|
<CustomInput
|
|
id="checkbox-bulk"
|
|
type="checkbox"
|
|
checked={isAllSelected}
|
|
onChange={() => toggleIsAllSelected()}
|
|
innerRef={input => input && (input.indeterminate = isIndeterminate)}
|
|
/>
|
|
</th>
|
|
<th>Sender</th>
|
|
<th>Subject</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
{rawEmails.map(({ id, user, title, img }) => (
|
|
<tr className={classNames({ 'bg-light': isSelectedItem(id) })} key={id} >
|
|
<td>
|
|
<Flex>
|
|
<CustomInput
|
|
id={'checkbox-'+id}
|
|
type="checkbox"
|
|
checked={isSelectedItem(id)}
|
|
onChange={() => toggleSelectedItem(id)}
|
|
/>
|
|
</Flex>
|
|
</td>
|
|
<th className="text-nowrap">
|
|
<Media>
|
|
<img src={img} alt={user} width={20} />
|
|
<Media body className="ml-2 align-items-center">
|
|
{user}
|
|
</Media>
|
|
</Media>
|
|
</th>
|
|
<td>{title}</td>
|
|
</tr>
|
|
))}
|
|
</tbody>
|
|
</Table>
|
|
</CardBody>
|
|
</Card>
|
|
);
|
|
}`;
|
|
|
|
const BulkSelect = () => (
|
|
<Fragment>
|
|
<PageHeader
|
|
title="Bulk Select"
|
|
description="You can use <code>useBulkSelect</code> hook to add the functionality of bulk selection. These are the exports of this hook: <code>selectedItems, isSelectedItem, isAllSelected, isIndeterminate, toggleSelectedItem, toggleIsAllSelected</code>"
|
|
className="mb-3"
|
|
/>
|
|
<Card className="mb-0">
|
|
<CardBody className="p-0">
|
|
<FalconEditor code={bulkSelectCode} scope={{ useBulkSelect, rawEmails, classNames, Flex }} />
|
|
</CardBody>
|
|
</Card>
|
|
</Fragment>
|
|
);
|
|
|
|
export default BulkSelect;
|