Skip to content

Commit

Permalink
fix: mobile select requires double tap
Browse files Browse the repository at this point in the history
  • Loading branch information
Omar Zunic committed Sep 28, 2023
1 parent bc0547f commit 75a3c23
Show file tree
Hide file tree
Showing 2 changed files with 68 additions and 49 deletions.
104 changes: 60 additions & 44 deletions app/(dashboard)/news/client.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,14 +5,31 @@ import React, { useEffect, useState } from 'react';
import { useDebounce } from '@lib/hooks';
import { cn } from '@lib/utils';
import { Input } from '@components/ui/input';
import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@components/ui/table';
import {
Table,
TableBody,
TableCell,
TableHead,
TableHeader,
TableRow,
} from '@components/ui/table';
import { Checkbox } from '@components/ui/checkbox';
import Image from 'next/image';
import { disableFeature, setNewsSites, updateChannel, updateSettings } from '@app/(dashboard)/news/actions';
import {
disableFeature,
setNewsSites,
updateChannel,
updateSettings,
} from '@app/(dashboard)/news/actions';
import { Tabs, TabsList, TabsTrigger } from '@components/ui/tabs';
import { Setting, SettingGroup } from '@components/ui/setting';
import { RESTGetAPIGuildChannelsResult } from 'discord.js';
import { Select, SelectContent, SelectItem, SelectTrigger } from '@components/ui/select';
import {
Select,
SelectContent,
SelectItem,
SelectTrigger,
} from '@components/ui/select';
import toast from 'react-hot-toast';
import { FaHashtag } from 'react-icons/fa';
import { Button } from '@components/ui/button';
Expand All @@ -33,18 +50,18 @@ export interface NewsSitesSettings {
}

export default function Client({
newsSites,
enabledNewsSites,
guild,
channels,
}: ClientProps) {
newsSites,
enabledNewsSites,
guild,
channels,
}: ClientProps) {
const [selectedNewsSites, setSelectedNewsSites] = useState<NewsSite[]>(
newsSites.map(a => ({
...a,
selected: enabledNewsSites.some(
e => e.news_site_id === a.news_site_id,
e => e.news_site_id === a.news_site_id
),
})),
}))
);

const [settings, setSettings] = useState<NewsSitesSettings>({
Expand All @@ -71,7 +88,7 @@ export default function Client({
}, [debounced]);

const filtered = selectedNewsSites.filter(
a => a.news_site_name?.toLowerCase().includes(searchQuery.toLowerCase()),
a => a.news_site_name?.toLowerCase().includes(searchQuery.toLowerCase())
);

return (
Expand Down Expand Up @@ -117,14 +134,14 @@ export default function Client({
updateChannel(String(guild.guild_id), value).catch(
() => {
toast.error('Failed to save.');
},
}
);
}}
>
<SelectTrigger className='w-full md:w-fit-content md:max-w-[350px]'>
{(() => {
const chan = channels.find(
channel => channel.id === selectedChannelID,
channel => channel.id === selectedChannelID
);
if (chan) {
return (
Expand All @@ -137,15 +154,14 @@ export default function Client({
return 'No channel selected';
})()}
</SelectTrigger>
<SelectContent>
<SelectContent
onCloseAutoFocus={e => {
e.preventDefault();
e.stopPropagation();
}}
>
{channels.map(channel => (
<SelectItem
key={channel.id}
onClick={() => {
console.log(channel);
}}
value={channel.id}
>
<SelectItem key={channel.id} value={channel.id}>
<FaHashtag className='inline-block mr-2' />
{channel.name}
</SelectItem>
Expand All @@ -156,7 +172,7 @@ export default function Client({
<Setting
label={'Exclusion Mode'}
description={
'When on \'Exclude\' mode, all news sites will be used except for the ones you select. When on \'Include\' mode, only the news sites you select will be used.'
"When on 'Exclude' mode, all news sites will be used except for the ones you select. When on 'Include' mode, only the news sites you select will be used."
}
active={settings.whitelist}
disabled={guild.news_channel_id === null}
Expand Down Expand Up @@ -203,7 +219,7 @@ export default function Client({
className='grid place-items-center h-6 w-6 m-2 rounded-[5px]'
checked={
selectedNewsSites.every(
a => a.selected,
a => a.selected
) && selectedNewsSites.length > 0
}
onClick={e => {
Expand All @@ -213,7 +229,7 @@ export default function Client({
prev.map(p => ({
...p,
selected: !p.selected,
})),
}))
);
}}
/>
Expand All @@ -228,7 +244,7 @@ export default function Client({
'hover:bg-foreground align-middle w-full h-8 h-18 hover:bg-muted/50',
{
'bg-muted/30': a.selected,
},
}
)}
onMouseDown={e => {
if (e.button === 0) {
Expand All @@ -238,12 +254,12 @@ export default function Client({
p.news_site_id ===
a.news_site_id
? {
...p,
selected:
!p.selected,
}
: p,
),
...p,
selected:
!p.selected,
}
: p
)
);
}
}}
Expand All @@ -255,12 +271,12 @@ export default function Client({
p.news_site_id ===
a.news_site_id
? {
...p,
selected:
!p.selected,
}
: p,
),
...p,
selected:
!p.selected,
}
: p
)
);
}
}}
Expand Down Expand Up @@ -302,13 +318,13 @@ export default function Client({
p.news_site_id ===
a.news_site_id
? {
...p,
selected:
(checked as boolean) ??
false,
}
: p,
),
...p,
selected:
(checked as boolean) ??
false,
}
: p
)
);
}}
/>
Expand Down
13 changes: 8 additions & 5 deletions components/ui/select.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@ const SelectTrigger = React.forwardRef<
ref={ref}
className={cn(
'flex h-10 w-full items-center justify-between rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
className
)}
{...props}
>
Expand All @@ -42,9 +42,9 @@ const SelectContent = React.forwardRef<
className={cn(
'relative z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
position === 'popper' &&
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
className,
'max-h-[20rem] overflow-y-auto',
'max-h-[20rem] overflow-y-auto'
)}
position={position}
{...props}
Expand All @@ -53,7 +53,7 @@ const SelectContent = React.forwardRef<
className={cn(
'p-1',
position === 'popper' &&
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]',
'h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]'
)}
>
{children}
Expand Down Expand Up @@ -83,9 +83,12 @@ const SelectItem = React.forwardRef<
ref={ref}
className={cn(
'relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
className,
className
)}
{...props}
onClick={e => {
e.preventDefault();
}}
>
<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
<SelectPrimitive.ItemIndicator>
Expand Down

0 comments on commit 75a3c23

Please sign in to comment.