Add option to filter PeopleDrawer

Signed-off-by: Ajay Bura <ajbura@gmail.com>
This commit is contained in:
Ajay Bura 2021-10-23 15:27:54 +05:30
parent 59eec5241a
commit f11e4f6626
2 changed files with 42 additions and 1 deletions

View file

@ -17,6 +17,7 @@ import IconButton from '../../atoms/button/IconButton';
import Button from '../../atoms/button/Button'; import Button from '../../atoms/button/Button';
import ScrollView from '../../atoms/scroll/ScrollView'; import ScrollView from '../../atoms/scroll/ScrollView';
import Input from '../../atoms/input/Input'; import Input from '../../atoms/input/Input';
import SegmentedControl from '../../atoms/segmented-controls/SegmentedControls';
import PeopleSelector from '../../molecules/people-selector/PeopleSelector'; import PeopleSelector from '../../molecules/people-selector/PeopleSelector';
import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg'; import AddUserIC from '../../../../public/res/ic/outlined/add-user.svg';
@ -64,6 +65,7 @@ function PeopleDrawer({ roomId }) {
const [itemCount, setItemCount] = useState(PER_PAGE_MEMBER); const [itemCount, setItemCount] = useState(PER_PAGE_MEMBER);
const [membership, setMembership] = useState('join'); const [membership, setMembership] = useState('join');
window.setMemberShip = setMembership;
const [memberList, setMemberList] = useState([]); const [memberList, setMemberList] = useState([]);
const [searchedMembers, setSearchedMembers] = useState(null); const [searchedMembers, setSearchedMembers] = useState(null);
const searchRef = useRef(null); const searchRef = useRef(null);
@ -127,6 +129,10 @@ function PeopleDrawer({ roomId }) {
setItemCount(PER_PAGE_MEMBER); setItemCount(PER_PAGE_MEMBER);
asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchData); asyncSearch.removeListener(asyncSearch.RESULT_SENT, handleSearchData);
}; };
}, [roomId, membership]);
useEffect(() => {
setMembership('join');
}, [roomId]); }, [roomId]);
const mList = searchedMembers !== null ? searchedMembers.data : memberList.slice(0, itemCount); const mList = searchedMembers !== null ? searchedMembers.data : memberList.slice(0, itemCount);
@ -145,6 +151,27 @@ function PeopleDrawer({ roomId }) {
<div className="people-drawer__scrollable"> <div className="people-drawer__scrollable">
<ScrollView autoHide> <ScrollView autoHide>
<div className="people-drawer__content"> <div className="people-drawer__content">
<SegmentedControl
selected={
(() => {
const getSegmentIndex = {
join: 0,
invite: 1,
ban: 2,
};
return getSegmentIndex[membership];
})()
}
segments={[{ text: 'Joined' }, { text: 'Invited' }, { text: 'Banned' }]}
onSelect={(index) => {
const selectSegment = [
() => setMembership('join'),
() => setMembership('invite'),
() => setMembership('ban'),
];
selectSegment[index]?.();
}}
/>
{ {
mList.map((member) => ( mList.map((member) => (
<PeopleSelector <PeopleSelector
@ -158,7 +185,7 @@ function PeopleDrawer({ roomId }) {
)) ))
} }
{ {
searchedMembers?.data.length === 0 (searchedMembers?.data.length === 0 || memberList.length === 0)
&& ( && (
<div className="people-drawer__noresult"> <div className="people-drawer__noresult">
<Text variant="b2">No result found!</Text> <Text variant="b2">No result found!</Text>

View file

@ -85,6 +85,20 @@
.people-drawer__content { .people-drawer__content {
padding-top: var(--sp-extra-tight); padding-top: var(--sp-extra-tight);
padding-bottom: calc(2 * var(--sp-normal)); padding-bottom: calc(2 * var(--sp-normal));
& .segmented-controls {
display: flex;
margin-bottom: var(--sp-extra-tight);
margin-left: var(--sp-extra-tight);
[dir=rtl] & {
margin-left: unset;
margin-right: var(--sp-extra-tight);
}
}
& .segment-btn {
flex: 1;
padding: var(--sp-ultra-tight) 0;
}
} }
.people-drawer__load-more { .people-drawer__load-more {
padding: var(--sp-normal); padding: var(--sp-normal);