antebudimir/feishin
1
0
Fork 0
mirror of https://github.com/antebudimir/feishin.git synced 2026-01-02 10:53:33 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Lint all files

Browse source
This commit is contained in:
jeffvli 2023-07-01 19:10:05 -07:00
parent 22af76b4d6
commit 30e52ebb54
334 changed files with 76519 additions and 75932 deletions
Download patch file Download diff file Expand all files Collapse all files

132
src/renderer/features/sidebar/components/collapsed-sidebar-item.tsx
View file

@ -6,27 +6,27 @@ import styled from 'styled-components';
import { Text } from '/@/renderer/components';
const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
position: relative;
width: 100%;
padding: 0.9rem 0.3rem;
border-right: var(--sidebar-border);
cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
opacity: ${(props) => props.$disabled && 0.6};
user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
pointer-events: ${(props) => (props.$disabled ? 'none' : 'all')};
position: relative;
width: 100%;
padding: 0.9rem 0.3rem;
border-right: var(--sidebar-border);
cursor: ${(props) => (props.$disabled ? 'default' : 'pointer')};
opacity: ${(props) => props.$disabled && 0.6};
user-select: ${(props) => (props.$disabled ? 'none' : 'initial')};
pointer-events: ${(props) => (props.$disabled ? 'none' : 'all')};
svg {
fill: ${(props) => (props.$active ? 'var(--primary-color)' : 'var(--sidebar-fg)')};
}
svg {
fill: ${(props) => (props.$active ? 'var(--primary-color)' : 'var(--sidebar-fg)')};
}
&:focus-visible {
background-color: var(--sidebar-bg-hover);
outline: none;
}
&:focus-visible {
background-color: var(--sidebar-bg-hover);
outline: none;
}
${(props) =>
!props.$disabled &&
`
${(props) =>
!props.$disabled &&
`
&:hover {
background-color: var(--sidebar-bg-hover);
@ -42,65 +42,65 @@ const Container = styled(Flex)<{ $active?: boolean; $disabled?: boolean }>`
`;
const TextWrapper = styled.div`
width: 100%;
overflow: hidden;
white-space: nowrap;
text-align: center;
text-overflow: ellipsis;
width: 100%;
overflow: hidden;
white-space: nowrap;
text-align: center;
text-overflow: ellipsis;
`;
const ActiveTabIndicator = styled(motion.div)`
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 3px;
width: 2px;
height: 80%;
margin-top: auto;
margin-bottom: auto;
background: var(--primary-color);
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 3px;
width: 2px;
height: 80%;
margin-top: auto;
margin-bottom: auto;
background: var(--primary-color);
`;
interface CollapsedSidebarItemProps {
activeIcon: React.ReactNode;
disabled?: boolean;
icon: React.ReactNode;
label: string;
route?: string;
activeIcon: React.ReactNode;
disabled?: boolean;
icon: React.ReactNode;
label: string;
route?: string;
}
const _CollapsedSidebarItem = forwardRef<HTMLDivElement, CollapsedSidebarItemProps>(
({ route, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
const match = useMatch(route || '/null');
const isMatch = Boolean(match);
({ route, activeIcon, icon, label, disabled, ...props }: CollapsedSidebarItemProps, ref) => {
const match = useMatch(route || '/null');
const isMatch = Boolean(match);
return (
<Container
ref={ref}
$active={Boolean(match)}
$disabled={disabled}
align="center"
direction="column"
{...props}
>
{isMatch ? <ActiveTabIndicator /> : null}
{isMatch ? activeIcon : icon}
<TextWrapper>
<Text
$secondary={!isMatch}
fw="600"
overflow="hidden"
size="xs"
>
{label}
</Text>
</TextWrapper>
</Container>
);
},
return (
<Container
ref={ref}
$active={Boolean(match)}
$disabled={disabled}
align="center"
direction="column"
{...props}
>
{isMatch ? <ActiveTabIndicator /> : null}
{isMatch ? activeIcon : icon}
<TextWrapper>
<Text
$secondary={!isMatch}
fw="600"
overflow="hidden"
size="xs"
>
{label}
</Text>
</TextWrapper>
</Container>
);
},
);
export const CollapsedSidebarItem = createPolymorphicComponent<'button', CollapsedSidebarItemProps>(
_CollapsedSidebarItem,
_CollapsedSidebarItem,
);