vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-08-10 14:23:18 +02:00
Code Issues Packages Projects Releases Wiki Activity

Replace @emotion/styled with styled-components

Browse Source
This commit is contained in:
jeffvli
2022-11-06 01:53:31 -08:00
parent de91f75203
commit 6ac949bf88
38 changed files with 519 additions and 418 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/button/index.tsx
+1 -1
View File
@@ -1,11 +1,11 @@
import React, { forwardRef, Ref } from 'react';
import styled from '@emotion/styled';
import {
Button as MantineButton,
ButtonProps as MantineButtonProps,
createPolymorphicComponent,
TooltipProps,
} from '@mantine/core';
import styled from 'styled-components';
import { Tooltip } from '@/renderer/components/tooltip';
interface ButtonProps extends MantineButtonProps {
src/renderer/components/date-picker/index.tsx
+1 -1
View File
@@ -1,8 +1,8 @@
import styled from '@emotion/styled';
import {
DatePicker as MantineDatePicker,
DatePickerProps as MantineDatePickerProps,
} from '@mantine/dates';
import styled from 'styled-components';
interface DatePickerProps extends MantineDatePickerProps {
maxWidth?: number | string;
src/renderer/components/dropdown-menu/index.tsx
+6 -6
View File
@@ -1,4 +1,3 @@
import styled from '@emotion/styled';
import {
Menu as MantineMenu,
MenuProps as MantineMenuProps,
@@ -9,12 +8,13 @@ import {
createPolymorphicComponent,
} from '@mantine/core';
import { RiArrowLeftLine } from 'react-icons/ri';
import styled from 'styled-components';
type MenuProps = MantineMenuProps;
type MenuLabelProps = MantineMenuLabelProps;
interface MenuItemProps extends MantineMenuItemProps {
$isActive?: boolean;
children: React.ReactNode;
isActive?: boolean;
}
type MenuDividerProps = MantineMenuDividerProps;
type MenuDropdownProps = MantineMenuDropdownProps;
@@ -40,7 +40,7 @@ const StyledMenuItem = styled(MantineMenu.Item)<MenuItemProps>`
}
& .mantine-Menu-itemLabel {
color: ${({ isActive }) => isActive && 'var(--primary-color)'};
color: ${({ $isActive }) => $isActive && 'var(--primary-color)'};
font-weight: 500;
font-size: 1em;
}
@@ -70,12 +70,12 @@ const MenuLabel = ({ children, ...props }: MenuLabelProps) => {
return <StyledMenuLabel {...props}>{children}</StyledMenuLabel>;
};
const pMenuItem = ({ isActive, children, ...props }: MenuItemProps) => {
const pMenuItem = ({ $isActive, children, ...props }: MenuItemProps) => {
return (
<StyledMenuItem
isActive={isActive && isActive}
$isActive={$isActive}
rightSection={
isActive && <RiArrowLeftLine color="var(--primary-color)" />
$isActive && <RiArrowLeftLine color="var(--primary-color)" />
}
{...props}
>
src/renderer/components/input/index.tsx
+1 -1
View File
@@ -1,5 +1,4 @@
import React, { forwardRef } from 'react';
import styled from '@emotion/styled';
import {
TextInput as MantineTextInput,
TextInputProps as MantineTextInputProps,
@@ -10,6 +9,7 @@ import {
FileInput as MantineFileInput,
FileInputProps as MantineFileInputProps,
} from '@mantine/core';
import styled from 'styled-components';
interface TextInputProps extends MantineTextInputProps {
children?: React.ReactNode;
src/renderer/components/paper/index.tsx
+1 -1
View File
@@ -1,8 +1,8 @@
import styled from '@emotion/styled';
import {
Paper as MantinePaper,
PaperProps as MantinePaperProps,
} from '@mantine/core';
import styled from 'styled-components';
export interface PaperProps extends MantinePaperProps {
children: React.ReactNode;
src/renderer/components/popover/index.tsx
+1 -1
View File
@@ -1,9 +1,9 @@
import styled from '@emotion/styled';
import {
Popover as MantinePopover,
PopoverProps as MantinePopoverProps,
PopoverDropdownProps as MantinePopoverDropdownProps,
} from '@mantine/core';
import styled from 'styled-components';
type PopoverProps = MantinePopoverProps;
type PopoverDropdownProps = MantinePopoverDropdownProps;
src/renderer/components/scroll-area/index.tsx
+1 -1
View File
@@ -1,8 +1,8 @@
import styled from '@emotion/styled';
import {
ScrollArea as MantineScrollArea,
ScrollAreaProps as MantineScrollAreaProps,
} from '@mantine/core';
import styled from 'styled-components';
interface ScrollAreaProps extends MantineScrollAreaProps {
children: React.ReactNode;
src/renderer/components/segmented-control/index.tsx
+1 -1
View File
@@ -1,9 +1,9 @@
import { forwardRef } from 'react';
import styled from '@emotion/styled';
import {
SegmentedControl as MantineSegmentedControl,
SegmentedControlProps as MantineSegmentedControlProps,
} from '@mantine/core';
import styled from 'styled-components';
type SegmentedControlProps = MantineSegmentedControlProps;
src/renderer/components/select/index.tsx
+1 -1
View File
@@ -1,8 +1,8 @@
import styled from '@emotion/styled';
import {
Select as MantineSelect,
SelectProps as MantineSelectProps,
} from '@mantine/core';
import styled from 'styled-components';
interface SelectProps extends MantineSelectProps {
maxWidth?: number | string;
src/renderer/components/switch/index.tsx
+1 -1
View File
@@ -1,8 +1,8 @@
import styled from '@emotion/styled';
import {
Switch as MantineSwitch,
SwitchProps as MantineSwitchProps,
} from '@mantine/core';
import styled from 'styled-components';
type SwitchProps = MantineSwitchProps;
src/renderer/components/text/index.tsx
+15 -15
View File
@@ -1,34 +1,34 @@
import { ComponentPropsWithoutRef, ReactNode } from 'react';
import styled from '@emotion/styled';
import {
createPolymorphicComponent,
Text as MantineText,
TextProps as MantineTextProps,
} from '@mantine/core';
import styled from 'styled-components';
import { Font, textEllipsis } from '@/renderer/styles';
type MantineTextDivProps = MantineTextProps & ComponentPropsWithoutRef<'div'>;
interface TextProps extends MantineTextDivProps {
$link?: boolean;
$noSelect?: boolean;
$secondary?: boolean;
children: ReactNode;
font?: Font;
link?: boolean;
noSelect?: boolean;
overflow?: 'hidden' | 'visible';
secondary?: boolean;
to?: string;
weight?: number;
}
const BaseText = styled(MantineText)<any>`
const BaseText = styled(MantineText)<TextProps>`
color: ${(props) =>
props.secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
props.$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
font-family: ${(props) => props.font};
user-select: ${(props) => (props.noSelect ? 'none' : 'auto')};
user-select: ${(props) => (props.$noSelect ? 'none' : 'auto')};
${(props) => props.overflow === 'hidden' && textEllipsis}
&:hover {
text-decoration: ${(props) => (props.link ? 'underline' : 'none')};
text-decoration: ${(props) => (props.$link ? 'underline' : 'none')};
}
`;
@@ -36,18 +36,18 @@ const StyledText = styled(BaseText)<TextProps>``;
export const _Text = ({
children,
secondary,
$secondary,
overflow,
font,
noSelect,
$noSelect,
...rest
}: TextProps) => {
return (
<StyledText
$noSelect={$noSelect}
$secondary={$secondary}
font={font}
noSelect={noSelect && noSelect}
overflow={overflow}
secondary={secondary && secondary}
{...rest}
>
{children}
@@ -58,11 +58,11 @@ export const _Text = ({
export const Text = createPolymorphicComponent<'div', TextProps>(_Text);
_Text.defaultProps = {
$link: false,
$noSelect: false,
$secondary: false,
font: undefined,
link: false,
noSelect: false,
overflow: 'visible',
secondary: false,
to: '',
weight: 500,
};
src/renderer/components/tooltip/index.tsx
+1 -1
View File
@@ -1,5 +1,5 @@
import styled from '@emotion/styled';
import { Tooltip as MantineTooltip, TooltipProps } from '@mantine/core';
import styled from 'styled-components';
const StyledTooltip = styled(MantineTooltip)`
& .mantine-Tooltip-tooltip {
src/renderer/components/virtual-grid/grid-card/default-card.tsx
+5 -5
View File
@@ -117,14 +117,14 @@ const DetailSection = styled.div`
flex-direction: column;
`;
const Row = styled.div<{ secondary?: boolean }>`
const Row = styled.div<{ $secondary?: boolean }>`
width: 100%;
max-width: 100%;
height: 25px;
padding: 0 0.2rem;
overflow: hidden;
color: ${({ secondary }) =>
secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
color: ${({ $secondary }) =>
$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
white-space: nowrap;
text-overflow: ellipsis;
`;
@@ -216,7 +216,7 @@ export const DefaultCard = ({
return (
<Row
key={`row-${row.property}-${columnIndex}`}
secondary={index > 0}
$secondary={index > 0}
>
{data[row.property].map(
(item: any, itemIndex: number) => (
@@ -345,7 +345,7 @@ export const DefaultCard = ({
return (
<Row
key={`row-${row.property}-${columnIndex}`}
secondary={index > 0}
$secondary={index > 0}
>
{data[row.property].map((item: any, itemIndex: number) => (
<React.Fragment key={`${data.id}-${item.id}`}>
src/renderer/components/virtual-grid/grid-card/grid-card-controls.tsx
+1 -1
View File
@@ -1,5 +1,4 @@
import React, { MouseEvent } from 'react';
import styled from '@emotion/styled';
import { Group, UnstyledButtonProps } from '@mantine/core';
import { motion } from 'framer-motion';
import {
@@ -8,6 +7,7 @@ import {
RiHeartFill,
RiHeartLine,
} from 'react-icons/ri';
import styled from 'styled-components';
import { Button } from '@/renderer/components/button';
import { DropdownMenu } from '@/renderer/components/dropdown-menu';
import { Play } from '@/renderer/types';
src/renderer/components/virtual-grid/grid-card/poster-card.tsx
+4 -4
View File
@@ -112,14 +112,14 @@ const DetailSection = styled.div`
flex-direction: column;
`;
const Row = styled.div<{ secondary?: boolean }>`
const Row = styled.div<{ $secondary?: boolean }>`
width: 100%;
max-width: 100%;
height: 25px;
padding: 0 0.2rem;
overflow: hidden;
color: ${({ secondary }) =>
secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
color: ${({ $secondary }) =>
$secondary ? 'var(--main-fg-secondary)' : 'var(--main-fg)'};
white-space: nowrap;
text-overflow: ellipsis;
`;
@@ -235,7 +235,7 @@ export const PosterCard = ({
return (
<Row
key={`row-${row.property}-${columnIndex}`}
secondary={index > 0}
$secondary={index > 0}
>
{data[row.property].map((item: any, itemIndex: number) => (
<React.Fragment key={`${data.id}-${item.id}`}>
src/renderer/components/virtual-grid/virtual-grid-wrapper.tsx
+1 -1
View File
@@ -1,6 +1,6 @@
import { Ref, useMemo } from 'react';
import styled from '@emotion/styled';
import { FixedSizeList, FixedSizeListProps } from 'react-window';
import styled from 'styled-components';
import { GridCard } from '@/renderer/components/virtual-grid/grid-card';
import { usePlayQueueHandler } from '@/renderer/features/player/hooks/use-playqueue-handler';
import {