reactjs - DataTable搜索/过滤器。材料设计

import React, { useState, useEffect } from "react"; import { Select } from "../../components/Select"; import { Grid, GridCell, GridRow } from "../../components/Grid"; import { IconButton } from "../../components/IconButton"; import { MenuSurface } from "../../components/MenuSurface"; import { TextField } from "../TextField"; import { Option } from "../../models/Option"; import { APIDataTable, Column } from "../APIDataTable"; import { Mail } from "../../models/Mail"; import { DatePicker } from "../DatePicker"; import { Organization } from "../../models/Organization"; import { Button } from "../Button"; import { Dialog } from "../../components/Dialog"; import "./index.css"; import { Checkbox } from "../Checkbox"; import { useHistory } from "react-router-dom"; export default () => { const [isOpen, setIsOpen] = useState(false); const [onFocus, setOnFocus] = useState(false); const [onCancelClick, setOnCancelClick] = useState(false); const [onOkClick, setOnOkClick] = useState(false); const [isDialogOpen, setDialogOpen] = useState(false); const [isDataTable, setDataTable] = useState(true); const [isDefaultChecked, setDefaultChecked] = useState(true); const [isChecked, setChecked] = useState(); const [isColumn, setColumn] = useState(true); const localHiddentColumns = JSON.parse(localStorage.getItem("hiddenColumns")); const [hiddenColumns, setHiddenColumns] = useState<string[]>([]); const [Checked, setIsChecked] = useState([]); const [loading, setLoading] = useState(true); useEffect(() => { const localHiddentColumns = JSON.parse( localStorage.getItem("hiddenColumns") ); if (!!localHiddentColumns) { setHiddenColumns(localHiddentColumns); setLoading(false); } }, []); const onCheckboxChange = (key: string, value: boolean) => { console.log(key, value); if (!value) { setHiddenColumns((hiddenColumns) => [...hiddenColumns, key]); } else { setHiddenColumns((hiddenColumns) => { const array = [...hiddenColumns]; array.splice(array.indexOf(key), 1); return array; }); } }; const history = useHistory(); const onRowClick = (mail: Mail) => { history.push({ pathname: "/edm/external/incoming", search: `?id=${mail.id}`, }); }; const columns: Column<Mail>[] = []; if (!hiddenColumns.includes("incomigNumber")) { columns.push( new Column<Mail>({ label: "Входящий номер", render: (row) => { return row.incomingNumberText; }, width: 149, }) ); } if (!hiddenColumns.includes("RegDate")) { columns.push( new Column<Mail>({ label: "Дата регистрации", render: (row) => { return row.incomingDateText; }, width: 155, }) ); } if (!hiddenColumns.includes("organization")) { columns.push( new Column<Mail>({ label: "Наименование организации/ФИО", render: (row) => { return row.organizationNameOrFullName; }, width: 300, }) ); } if (!hiddenColumns.includes("outgoingNumber")) { columns.push( new Column<Mail>({ label: "Исходящий номер", render: (row) => { return row.outgoingNumberText; }, width: 160, }) ); } if (!hiddenColumns.includes("outgoingDate")) { columns.push( new Column<Mail>({ label: "Исходящая дата", render: (row) => { return row.outgoingDateText; }, width: 150, }) ); } if (!hiddenColumns.includes("documentType")) { columns.push( new Column<Mail>({ label: "Вид документа", render: (row) => { return row.documentTypeText; }, }) ); } if (!hiddenColumns.includes("description")) { columns.push( new Column<Mail>({ label: "Краткое содержание", render: (row) => { return row.descriptionText; }, width: 400, }) ); } if (!hiddenColumns.includes("documentStatus")) { columns.push( new Column<Mail>({ label: "Статус документа", render: (row) => { return row.statusText; }, width: 160, }) ); } if (!hiddenColumns.includes("executionDate")) { columns.push( new Column<Mail>({ label: "Дата исполнения", render: (row) => { return row.executionDateText; }, width: 150, }) ); } if (loading) return null; return ( <> <h2 className="head">Журнал регистрации документов</h2> <div className="search-test" id="element"> <label className="mdc-text-field mdc-text-field--filled mdc-text-field--no-label mdc-text-field--with-leading-icon mdc-text-field--with-trailing-icon" htmlFor="input" id="search-menu-surface" > <IconButton density={-1} icon="search" /> <input className="mdc-text-field__input " type="text" placeholder="Поиск" id="searchinput" /> <IconButton density={-1} icon="arrow_drop_down" onClick={() => { setIsOpen(true); }} /> </label> <IconButton onClick={() => { setDialogOpen(true); }} density={-1} icon="settings" /> <Dialog isOpen={isDialogOpen} onOkClick={() => { localStorage.setItem( "hiddenColumns", JSON.stringify(hiddenColumns) ); console.log(hiddenColumns); setDialogOpen(false); }} onCloseClick={() => setDialogOpen(false)} > <div> <Checkbox defaultChecked={!hiddenColumns.includes("incomigNumber")} label="Входящий номер" onChange={(value) => onCheckboxChange("incomigNumber", value)} /> </div> <div> <Checkbox defaultChecked={!hiddenColumns.includes("RegDate")} label="Дата регистрации" onChange={(value) => onCheckboxChange("RegDate", value)} /> </div> <div> <Checkbox defaultChecked={!hiddenColumns.includes("organization")} label="Наименование организации/ФИО" onChange={(value) => onCheckboxChange("organization", value)} /> </div> <div> <Checkbox defaultChecked={!hiddenColumns.includes("outgoingNumber")} label="Исходящий номер" onChange={(value) => onCheckboxChange("outgoingNumber", value)} /> </div> <div> <Checkbox defaultChecked={!hiddenColumns.includes("outgoingDate")} label="Исходящая дата" onChange={(value) => onCheckboxChange("outgoingDate", value)} /> </div> <div> <Checkbox defaultChecked={!hiddenColumns.includes("documentType")} label="Вид документа" onChange={(value) => onCheckboxChange("documentType", value)} /> </div> <div> <Checkbox defaultChecked={!hiddenColumns.includes("description")} label="Краткое содержание" onChange={(value) => onCheckboxChange("description", value)} /> </div> <div> <Checkbox defaultChecked={!hiddenColumns.includes("documentStatus")} label="Статус документа" onChange={(value) => onCheckboxChange("documentStatus", value)} /> </div> <div> <Checkbox defaultChecked={!hiddenColumns.includes("executionDate")} label="Дата исполнения" onChange={(value) => onCheckboxChange("executionDate", value)} /> </div> </Dialog> <div className="filters-menu-surface"> <MenuSurface anchorElementId="search-menu-surface" isOpen={isOpen} onClose={() => setIsOpen(false)} > <Grid> <GridRow> <GridCell span={3}> <Select<Option> type={Option} label="Входящий номер" api="/dicts/edo/incomingNumber" required /> </GridCell> <GridCell span={3}> <DatePicker label="Дата регистрации" required /> </GridCell> <GridCell span={6}> <Select<Organization> label="Наименование организации" api="/organization/correspondents" required search type={Organization} /> </GridCell> </GridRow> <GridRow> <GridCell span={3}> <TextField label="Исходящий номер" required /> </GridCell> <GridCell span={3}> <DatePicker label="Исходящая дата" required /> </GridCell> <GridCell span={3}> <Select<Option> type={Option} label="Вид документа" api="/dicts/edo/document-kinds" required search /> </GridCell> </GridRow> <GridRow> <GridCell span={12}> <TextField textarea label="Краткое содержание" maxLength={512} required /> </GridCell> <GridCell span={3}> <Select<Option> type={Option} label="Статус документа" //api="/dicts/edo/document-kinds" required search /> </GridCell> <GridCell span={3}> <DatePicker label="Дата исполнения" required /> </GridCell> </GridRow> <GridRow> <GridCell span={2}> <Button label="Поиск" raised /> <Button label="Отмена" raised onClick={() => { setIsOpen(false); }} /> </GridCell> </GridRow> </Grid> </MenuSurface> </div> </div> <div> <APIDataTable<Mail> apiPath="/edo/chancellery/maildoc_extinc" params="?registered=true" type={Mail} onRowClick={onRowClick} columns={columns} /> </div> </> ); };