Poll history - filter by active or ended (#10098)
* wip * remove dupe * use poll model relations in all cases * update mpollbody tests to use poll instance * update poll fetching login in pinned messages card * add pinned polls to room polls state * add spinner while relations are still loading * handle no poll in end poll dialog * strict errors * render a poll body that errors for poll end events * add fetching logic to pollend tile * extract poll testing utilities * test mpollend * strict fix * more strict fix * strict fix for forwardref * add filter component * update poll test utils * add unstyled filter tab group * filtertabgroup snapshot * lint * update test util setupRoomWithPollEvents to allow testing multiple polls in one room * style filter tabs * test error message for past polls * sort polls list by latest * move FilterTabGroup into generic components * comments * Update src/components/views/dialogs/polls/types.ts Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> * Apply suggestions from code review Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com> --------- Co-authored-by: Richard van der Hoff <1389908+richvdh@users.noreply.github.com>
This commit is contained in:
parent
f0f50485d7
commit
18ab325eaf
15 changed files with 388 additions and 61 deletions
57
src/components/views/elements/FilterTabGroup.tsx
Normal file
57
src/components/views/elements/FilterTabGroup.tsx
Normal file
|
@ -0,0 +1,57 @@
|
|||
/*
|
||||
Copyright 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import React, { FieldsetHTMLAttributes, ReactNode } from "react";
|
||||
|
||||
export type FilterTab<T> = {
|
||||
label: string | ReactNode;
|
||||
id: T;
|
||||
};
|
||||
type FilterTabGroupProps<T extends string = string> = FieldsetHTMLAttributes<any> & {
|
||||
// group name used for radio buttons
|
||||
name: string;
|
||||
onFilterChange: (id: T) => void;
|
||||
// active tab's id
|
||||
value: T;
|
||||
// tabs to display
|
||||
tabs: FilterTab<T>[];
|
||||
};
|
||||
|
||||
/**
|
||||
* React component which styles a set of content filters as tabs
|
||||
*
|
||||
* This is used in displays which show a list of content items, and the user can select between one of several
|
||||
* filters for those items. For example, in the Poll History dialog, the user can select between "Active" and "Ended"
|
||||
* polls.
|
||||
*
|
||||
* Type `T` is used for the `value` attribute for the buttons in the radio group.
|
||||
*/
|
||||
export const FilterTabGroup = <T extends string = string>({
|
||||
name,
|
||||
value,
|
||||
tabs,
|
||||
onFilterChange,
|
||||
...rest
|
||||
}: FilterTabGroupProps<T>): JSX.Element => (
|
||||
<fieldset {...rest} className="mx_FilterTabGroup">
|
||||
{tabs.map(({ label, id }) => (
|
||||
<label data-testid={`filter-tab-${name}-${id}`} key={id}>
|
||||
<input type="radio" name={name} value={id} onChange={() => onFilterChange(id)} checked={value === id} />
|
||||
<span>{label}</span>
|
||||
</label>
|
||||
))}
|
||||
</fieldset>
|
||||
);
|
Loading…
Add table
Add a link
Reference in a new issue