filecoin-project/slate
1
1
Fork 0
mirror of https://github.com/filecoin-project/slate.git synced 2024-11-26 13:45:30 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat(GlobalCarousel/Jumper/EditChannels): use RovingTabIndex to navigate tags via the arrow keys

Browse Source
This commit is contained in:
Aminejv 2022-01-03 19:01:11 +01:00
parent a2009595c6
commit 8a442d5cad
1 changed files with 46 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

84
components/system/components/GlobalCarousel/jumpers/EditChannels.js
View File

@ -10,6 +10,7 @@ import * as MobileJumper from "~/components/system/components/fragments/MobileJu
import * as Strings from "~/common/strings"; import * as Strings from "~/common/strings";
import * as Validations from "~/common/validations"; import * as Validations from "~/common/validations";
import * as Events from "~/common/custom-events"; import * as Events from "~/common/custom-events";
import * as RovingTabIndex from "~/components/core/RovingTabIndex";
import { Show } from "~/components/utility/Show"; import { Show } from "~/components/utility/Show";
import { css } from "@emotion/react"; import { css } from "@emotion/react";
@ -31,10 +32,11 @@ const STYLES_CHANNEL_BUTTON_SELECTED = (theme) => css`
background-color: ${theme.semantic.bgGrayLight4}; background-color: ${theme.semantic.bgGrayLight4};
`; `;
function ChannelButton({ children, isSelected, css, ...props }) { const ChannelButton = React.forwardRef(({ children, isSelected, css, ...props }, ref) => {
return ( return (
<System.ButtonPrimitive <System.ButtonPrimitive
{...props} {...props}
ref={ref}
css={[STYLES_CHANNEL_BUTTON, isSelected && STYLES_CHANNEL_BUTTON_SELECTED, css]} css={[STYLES_CHANNEL_BUTTON, isSelected && STYLES_CHANNEL_BUTTON_SELECTED, css]}
> >
<System.P2 nbrOflines={1} as="span"> <System.P2 nbrOflines={1} as="span">
@ -42,7 +44,7 @@ function ChannelButton({ children, isSelected, css, ...props }) {
</System.P2> </System.P2>
</System.ButtonPrimitive> </System.ButtonPrimitive>
); );
} });
/* -----------------------------------------------------------------------------------------------*/ /* -----------------------------------------------------------------------------------------------*/
@ -200,43 +202,49 @@ function Channels({
</Show> </Show>
<AnimateSharedLayout> <AnimateSharedLayout>
<div css={STYLES_CHANNEL_BUTTONS_WRAPPER}> <RovingTabIndex.Provider axis="horizontal">
{channels.map((channel) => ( <RovingTabIndex.List>
<motion.div layoutId={`jumper-${channel.id}`} initial={false} key={channel.id}> <div css={STYLES_CHANNEL_BUTTONS_WRAPPER}>
<ChannelButton {channels.map((channel, index) => (
isSelected={channel.doesContainFile} <motion.div layoutId={`jumper-${channel.id}`} initial={false} key={channel.id}>
onClick={() => onAddFileToChannel(channel, channel.doesContainFile)} <RovingTabIndex.Item index={index}>
title={channel.slatename} <ChannelButton
style={{ maxWidth: "48ch" }} isSelected={channel.doesContainFile}
> onClick={() => onAddFileToChannel(channel, channel.doesContainFile)}
{channel.slatename} title={channel.slatename}
</ChannelButton> style={{ maxWidth: "48ch" }}
</motion.div> >
))} {channel.slatename}
</ChannelButton>
</RovingTabIndex.Item>
</motion.div>
))}
<Show when={isCreatingChannel}> <Show when={isCreatingChannel}>
<motion.div initial={{ opacity: 0.5, y: 4 }} animate={{ opacity: 1, y: 0 }}> <motion.div initial={{ opacity: 0.5, y: 4 }} animate={{ opacity: 1, y: 0 }}>
<ChannelButton <ChannelButton
css={Styles.HORIZONTAL_CONTAINER_CENTERED} css={Styles.HORIZONTAL_CONTAINER_CENTERED}
onClick={(e) => (e.stopPropagation(), onCreateChannel(searchQuery))} onClick={(e) => (e.stopPropagation(), onCreateChannel(searchQuery))}
title={searchQuery} title={searchQuery}
> >
<SVG.Plus <SVG.Plus
width={16} width={16}
height={16} height={16}
style={{ style={{
position: "relative", position: "relative",
top: -1, top: -1,
verticalAlign: "middle", verticalAlign: "middle",
pointerEvents: "none", pointerEvents: "none",
display: "inline", display: "inline",
}} }}
/> />
<span style={{ marginLeft: 4 }}>{searchQuery}</span> <span style={{ marginLeft: 4 }}>{searchQuery}</span>
</ChannelButton> </ChannelButton>
</motion.div> </motion.div>
</Show> </Show>
</div> </div>
</RovingTabIndex.List>
</RovingTabIndex.Provider>
</AnimateSharedLayout> </AnimateSharedLayout>
</div> </div>
) : null; ) : null;