From eabd16e01b870f45542b957320b2a6723493a39d Mon Sep 17 00:00:00 2001 From: Mike Wu Date: Mon, 29 May 2023 13:52:51 +0900 Subject: [PATCH] feat(`AccessCodeTable`): add search --- .../ui/AccessCodeTable/AccessCodeTable.tsx | 21 +++++++++++++++++-- src/styles/_access-code-table.scss | 4 ++++ 2 files changed, 23 insertions(+), 2 deletions(-) diff --git a/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx b/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx index 78d56bcc0..5d3d369c1 100644 --- a/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx +++ b/src/lib/ui/AccessCodeTable/AccessCodeTable.tsx @@ -19,6 +19,7 @@ import { TableCell } from 'lib/ui/Table/TableCell.js' import { TableHeader } from 'lib/ui/Table/TableHeader.js' import { TableRow } from 'lib/ui/Table/TableRow.js' import { TableTitle } from 'lib/ui/Table/TableTitle.js' +import { SearchTextField } from 'lib/ui/TextField/SearchTextField.js' import { Caption } from 'lib/ui/typography/Caption.js' import { Title } from 'lib/ui/typography/Title.js' @@ -38,6 +39,7 @@ export function AccessCodeTable( const [selectedAccessCode, selectAccessCode] = useState( null ) + const [searchTerm, setSearchTerm] = useState('') if (selectedAccessCode != null) { return ( @@ -54,16 +56,31 @@ export function AccessCodeTable( return null } + const filteredCodes = accessCodes.filter((accessCode) => { + if (searchTerm === '') { + return true + } + + return new RegExp(searchTerm, 'i').test(accessCode.name ?? '') + }) + + const accessCodeCount = accessCodes.length + return (
- {t.accessCodes} ({accessCodes.length}) + {t.accessCodes} ({accessCodeCount}) + - +
) diff --git a/src/styles/_access-code-table.scss b/src/styles/_access-code-table.scss index ebe5339b3..5af4e4966 100644 --- a/src/styles/_access-code-table.scss +++ b/src/styles/_access-code-table.scss @@ -2,6 +2,10 @@ @mixin all { .seam-access-code-table { + .seam-search-text-field { + width: 170px; + } + .seam-table-row { cursor: pointer;