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

Separate sidebar icons to new component

Browse source 
- Fixes react render issue
This commit is contained in:
jeffvli 2023-10-17 05:46:42 -07:00
parent 3675146f1f
commit cbeb4ab7d8
3 changed files with 109 additions and 173 deletions
Download patch file Download diff file Expand all files Collapse all files

116
src/renderer/features/sidebar/components/sidebar.tsx
View file

@ -1,45 +1,20 @@
import { MouseEvent, useMemo } from 'react';
import { Box, Center, Divider, Group, Stack } from '@mantine/core';
import { closeAllModals, openModal } from '@mantine/modals';
import { AnimatePresence, motion } from 'framer-motion';
import { IconType } from 'react-icons';
import {
RiAddFill,
RiAlbumFill,
RiAlbumLine,
RiArrowDownSLine,
RiDiscLine,
RiFlag2Fill,
RiFlagLine,
RiFolder3Fill,
RiFolder3Line,
RiHome6Fill,
RiHome6Line,
RiListUnordered,
RiMusic2Fill,
RiMusic2Line,
RiPlayLine,
RiSearchFill,
RiUserVoiceFill,
RiUserVoiceLine,
RiSearchLine,
RiPlayFill,
RiSettings2Line,
RiSettings2Fill,
RiPlayListLine,
RiPlayListFill,
} from 'react-icons/ri';
import { generatePath, Link, useLocation } from 'react-router-dom';
import { MouseEvent, useMemo } from 'react';
import { RiAddFill, RiArrowDownSLine, RiDiscLine, RiListUnordered } from 'react-icons/ri';
import { Link, useLocation } from 'react-router-dom';
import styled from 'styled-components';
import {
SidebarItemType,
useGeneralSettings,
useWindowSettings,
} from '../../../store/settings.store';
import { LibraryItem, PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
import { PlaylistListSort, ServerType, SortOrder } from '/@/renderer/api/types';
import { Button, MotionStack, Spinner, Tooltip } from '/@/renderer/components';
import { CreatePlaylistForm, usePlaylistList } from '/@/renderer/features/playlists';
import { ActionBar } from '/@/renderer/features/sidebar/components/action-bar';
import { SidebarIcon } from '/@/renderer/features/sidebar/components/sidebar-icon';
import { SidebarItem } from '/@/renderer/features/sidebar/components/sidebar-item';
import { SidebarPlaylistList } from '/@/renderer/features/sidebar/components/sidebar-playlist-list';
import { useContainerQuery } from '/@/renderer/hooks';
@ -92,49 +67,6 @@ const SidebarImage = styled.img`
background: var(--placeholder-bg);
`;
const sidebarItemMap = {
[AppRoute.HOME]: {
activeIcon: RiHome6Fill,
icon: RiHome6Line,
},
[AppRoute.LIBRARY_ALBUMS]: {
activeIcon: RiAlbumFill,
icon: RiAlbumLine,
},
[AppRoute.LIBRARY_ALBUM_ARTISTS]: {
activeIcon: RiUserVoiceFill,
icon: RiUserVoiceLine,
},
[AppRoute.PLAYLISTS]: {
activeIcon: RiPlayListFill,
icon: RiPlayListLine,
},
[AppRoute.LIBRARY_SONGS]: {
activeIcon: RiMusic2Fill,
icon: RiMusic2Line,
},
[AppRoute.LIBRARY_FOLDERS]: {
activeIcon: RiFolder3Fill,
icon: RiFolder3Line,
},
[AppRoute.LIBRARY_GENRES]: {
activeIcon: RiFlag2Fill,
icon: RiFlagLine,
},
[generatePath(AppRoute.SEARCH, { itemType: LibraryItem.SONG })]: {
activeIcon: RiSearchFill,
icon: RiSearchLine,
},
[AppRoute.SETTINGS]: {
activeIcon: RiSettings2Fill,
icon: RiSettings2Line,
},
[AppRoute.NOW_PLAYING]: {
activeIcon: RiPlayFill,
icon: RiPlayLine,
},
};
export const Sidebar = () => {
const location = useLocation();
const sidebar = useSidebarStore();
@ -180,17 +112,13 @@ export const Sidebar = () => {
const { sidebarItems } = useGeneralSettings();
const sidebarItemsWithRoute: (SidebarItemType & {
activeIcon: IconType;
icon: IconType;
})[] = useMemo(() => {
const sidebarItemsWithRoute: SidebarItemType[] = useMemo(() => {
if (!sidebarItems) return [];
const items = sidebarItems
.filter((item) => !item.disabled)
.map((item) => ({
...item,
...sidebarItemMap[item.route as keyof typeof sidebarItemMap],
}));
return items;
@ -214,21 +142,23 @@ export const Sidebar = () => {
sx={{ maxHeight: showImage ? `calc(100% - ${sidebar.leftWidth})` : '100%' }}
>
<Stack spacing={0}>
{sidebarItemsWithRoute.map((item) => (
<SidebarItem
key={`sidebar-${item.route}`}
to={item.route}
>
<Group spacing="sm">
{location.pathname === item.route ? (
<item.activeIcon size="1.1em" />
) : (
<item.icon size="1.1em" />
)}
{item.label}
</Group>
</SidebarItem>
))}
{sidebarItemsWithRoute.map((item) => {
return (
<SidebarItem
key={`sidebar-${item.route}`}
to={item.route}
>
<Group spacing="sm">
<SidebarIcon
active={location.pathname === item.route}
route={item.route}
size="1.1em"
/>
{item.label}
</Group>
</SidebarItem>
);
})}
</Stack>
<Divider
mx="1rem"