vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-12 23:32:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

Fix card keys

Browse Source
This commit is contained in:
jeffvli
2022-11-06 01:25:53 -08:00
parent d69221f8a4
commit de91f75203
2 changed files with 163 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/components/virtual-grid/grid-card/default-card.tsx
+109 -97
View File
@@ -1,9 +1,10 @@
import styled from '@emotion/styled'; import React from 'react';
import { Center, Skeleton } from '@mantine/core'; import { Center, Skeleton } from '@mantine/core';
import { RiAlbumFill } from 'react-icons/ri'; import { RiAlbumFill } from 'react-icons/ri';
import { generatePath, useNavigate } from 'react-router'; import { generatePath, useNavigate } from 'react-router';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { ListChildComponentProps } from 'react-window'; import { ListChildComponentProps } from 'react-window';
import styled from 'styled-components';
import { Text } from '@/renderer/components/text'; import { Text } from '@/renderer/components/text';
import { GridCardControls } from '@/renderer/components/virtual-grid/grid-card/grid-card-controls'; import { GridCardControls } from '@/renderer/components/virtual-grid/grid-card/grid-card-controls';
import { fadeIn } from '@/renderer/styles'; import { fadeIn } from '@/renderer/styles';
@@ -211,53 +212,59 @@ export const DefaultCard = ({
</ImageSection> </ImageSection>
<DetailSection> <DetailSection>
{cardRows.map((row: CardRow, index: number) => { {cardRows.map((row: CardRow, index: number) => {
if (row.arrayProperty) { if (row.arrayProperty && row.route) {
if (row.route) {
return (
<Row secondary={index > 0}>
{data[row.property].map(
(item: any, itemIndex: number) => (
<>
{itemIndex > 0 && (
<Text
sx={{
display: 'inline-block',
padding: '0 2px 0 1px',
}}
>
,
</Text>
)}{' '}
<Text
link
component={Link}
overflow="hidden"
secondary={index > 0}
to={generatePath(
row.route!.route,
row.route!.slugs?.reduce((acc, slug) => {
return {
...acc,
[slug.slugProperty]:
data[slug.idProperty],
};
}, {})
)}
onClick={(e) => e.stopPropagation()}
>
{row.arrayProperty && item[row.arrayProperty]}
</Text>
</>
)
)}
</Row>
);
}
return ( return (
<Row> <Row
key={`row-${row.property}-${columnIndex}`}
secondary={index > 0}
>
{data[row.property].map(
(item: any, itemIndex: number) => (
<React.Fragment key={`${data.id}-${item.id}`}>
{itemIndex > 0 && (
<Text
sx={{
display: 'inline-block',
padding: '0 2px 0 1px',
}}
>
,
</Text>
)}{' '}
<Text
$link
$secondary={index > 0}
component={Link}
overflow="hidden"
to={generatePath(
row.route!.route,
row.route!.slugs?.reduce((acc, slug) => {
return {
...acc,
[slug.slugProperty]: data[slug.idProperty],
};
}, {})
)}
onClick={(e) => e.stopPropagation()}
>
{row.arrayProperty && item[row.arrayProperty]}
</Text>
</React.Fragment>
)
)}
</Row>
);
}
if (row.arrayProperty) {
return (
<Row key={`row-${row.property}-${columnIndex}`}>
{data[row.property].map((item: any) => ( {data[row.property].map((item: any) => (
<Text overflow="hidden" secondary={index > 0}> <Text
key={`${data.id}-${item.id}`}
$secondary={index > 0}
overflow="hidden"
>
{row.arrayProperty && item[row.arrayProperty]} {row.arrayProperty && item[row.arrayProperty]}
</Text> </Text>
))} ))}
@@ -266,10 +273,10 @@ export const DefaultCard = ({
} }
return ( return (
<Row key={row.property}> <Row key={`row-${row.property}-${columnIndex}`}>
{row.route ? ( {row.route ? (
<Text <Text
link $link
component={Link} component={Link}
overflow="hidden" overflow="hidden"
to={generatePath( to={generatePath(
@@ -286,7 +293,7 @@ export const DefaultCard = ({
{data && data[row.property]} {data && data[row.property]}
</Text> </Text>
) : ( ) : (
<Text overflow="hidden" secondary={index > 0}> <Text $secondary={index > 0} overflow="hidden">
{data && data[row.property]} {data && data[row.property]}
</Text> </Text>
)} )}
@@ -334,52 +341,57 @@ export const DefaultCard = ({
</ImageSection> </ImageSection>
<DetailSection> <DetailSection>
{cardRows.map((row: CardRow, index: number) => { {cardRows.map((row: CardRow, index: number) => {
if (row.arrayProperty) { if (row.arrayProperty && row.route) {
if (row.route) {
return (
<Row secondary={index > 0}>
{data[row.property].map(
(item: any, itemIndex: number) => (
<>
{itemIndex > 0 && (
<Text
sx={{
display: 'inline-block',
padding: '0 2px 0 1px',
}}
>
,
</Text>
)}{' '}
<Text
link
component={Link}
overflow="hidden"
secondary={index > 0}
to={generatePath(
row.route!.route,
row.route!.slugs?.reduce((acc, slug) => {
return {
...acc,
[slug.slugProperty]: data[slug.idProperty],
};
}, {})
)}
onClick={(e) => e.stopPropagation()}
>
{row.arrayProperty && item[row.arrayProperty]}
</Text>
</>
)
)}
</Row>
);
}
return ( return (
<Row> <Row
key={`row-${row.property}-${columnIndex}`}
secondary={index > 0}
>
{data[row.property].map((item: any, itemIndex: number) => (
<React.Fragment key={`${data.id}-${item.id}`}>
{itemIndex > 0 && (
<Text
sx={{
display: 'inline-block',
padding: '0 2px 0 1px',
}}
>
,
</Text>
)}{' '}
<Text
$link
$secondary={index > 0}
component={Link}
overflow="hidden"
to={generatePath(
row.route!.route,
row.route!.slugs?.reduce((acc, slug) => {
return {
...acc,
[slug.slugProperty]: data[slug.idProperty],
};
}, {})
)}
onClick={(e) => e.stopPropagation()}
>
{row.arrayProperty && item[row.arrayProperty]}
</Text>
</React.Fragment>
))}
</Row>
);
}
if (row.arrayProperty) {
return (
<Row key={`row-${row.property}-${columnIndex}`}>
{data[row.property].map((item: any) => ( {data[row.property].map((item: any) => (
<Text overflow="hidden" secondary={index > 0}> <Text
key={`${data.id}-${item.id}`}
$secondary={index > 0}
overflow="hidden"
>
{row.arrayProperty && item[row.arrayProperty]} {row.arrayProperty && item[row.arrayProperty]}
</Text> </Text>
))} ))}
@@ -388,10 +400,10 @@ export const DefaultCard = ({
} }
return ( return (
<Row key={row.property}> <Row key={`row-${row.property}-${columnIndex}`}>
{row.route ? ( {row.route ? (
<Text <Text
link $link
component={Link} component={Link}
overflow="hidden" overflow="hidden"
to={generatePath( to={generatePath(
@@ -408,7 +420,7 @@ export const DefaultCard = ({
{data && data[row.property]} {data && data[row.property]}
</Text> </Text>
) : ( ) : (
<Text overflow="hidden" secondary={index > 0}> <Text $secondary={index > 0} overflow="hidden">
{data && data[row.property]} {data && data[row.property]}
</Text> </Text>
)} )}
@@ -435,7 +447,7 @@ export const DefaultCard = ({
<DetailSection> <DetailSection>
{cardRows.map((row: CardRow, index: number) => ( {cardRows.map((row: CardRow, index: number) => (
<Skeleton <Skeleton
key={`row-${row.property}`} key={`row-${row.property}-${columnIndex}`}
my={2} my={2}
radius="md" radius="md"
visible={!data} visible={!data}
src/renderer/components/virtual-grid/grid-card/poster-card.tsx
+54 -48
View File
@@ -1,9 +1,10 @@
import styled from '@emotion/styled'; import React from 'react';
import { Center, Skeleton } from '@mantine/core'; import { Center, Skeleton } from '@mantine/core';
import { RiAlbumFill } from 'react-icons/ri'; import { RiAlbumFill } from 'react-icons/ri';
import { generatePath } from 'react-router'; import { generatePath } from 'react-router';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { ListChildComponentProps } from 'react-window'; import { ListChildComponentProps } from 'react-window';
import styled from 'styled-components';
import { Text } from '@/renderer/components/text'; import { Text } from '@/renderer/components/text';
import { GridCardControls } from '@/renderer/components/virtual-grid/grid-card/grid-card-controls'; import { GridCardControls } from '@/renderer/components/virtual-grid/grid-card/grid-card-controls';
import { fadeIn } from '@/renderer/styles'; import { fadeIn } from '@/renderer/styles';
@@ -230,51 +231,56 @@ export const PosterCard = ({
)} )}
<DetailSection> <DetailSection>
{cardRows.map((row: CardRow, index: number) => { {cardRows.map((row: CardRow, index: number) => {
if (row.arrayProperty) { if (row.arrayProperty && row.route) {
if (row.route) {
return (
<Row secondary={index > 0}>
{data[row.property].map(
(item: any, itemIndex: number) => (
<>
{itemIndex > 0 && (
<Text
sx={{
display: 'inline-block',
padding: '0 2px 0 1px',
}}
>
,
</Text>
)}{' '}
<Text
link
component={Link}
overflow="hidden"
secondary={index > 0}
to={generatePath(
row.route!.route,
row.route!.slugs?.reduce((acc, slug) => {
return {
...acc,
[slug.slugProperty]: data[slug.idProperty],
};
}, {})
)}
>
{row.arrayProperty && item[row.arrayProperty]}
</Text>
</>
)
)}
</Row>
);
}
return ( return (
<Row> <Row
key={`row-${row.property}-${columnIndex}`}
secondary={index > 0}
>
{data[row.property].map((item: any, itemIndex: number) => (
<React.Fragment key={`${data.id}-${item.id}`}>
{itemIndex > 0 && (
<Text
sx={{
display: 'inline-block',
padding: '0 2px 0 1px',
}}
>
,
</Text>
)}{' '}
<Text
$link
$secondary={index > 0}
component={Link}
overflow="hidden"
to={generatePath(
row.route!.route,
row.route!.slugs?.reduce((acc, slug) => {
return {
...acc,
[slug.slugProperty]: data[slug.idProperty],
};
}, {})
)}
>
{row.arrayProperty && item[row.arrayProperty]}
</Text>
</React.Fragment>
))}
</Row>
);
}
if (row.arrayProperty) {
return (
<Row key={`row-${row.property}-${columnIndex}`}>
{data[row.property].map((item: any) => ( {data[row.property].map((item: any) => (
<Text overflow="hidden" secondary={index > 0}> <Text
key={`${data.id}-${item.id}`}
$secondary={index > 0}
overflow="hidden"
>
{row.arrayProperty && item[row.arrayProperty]} {row.arrayProperty && item[row.arrayProperty]}
</Text> </Text>
))} ))}
@@ -283,10 +289,10 @@ export const PosterCard = ({
} }
return ( return (
<Row key={row.property}> <Row key={`row-${row.property}-${columnIndex}`}>
{row.route ? ( {row.route ? (
<Text <Text
link $link
component={Link} component={Link}
overflow="hidden" overflow="hidden"
to={generatePath( to={generatePath(
@@ -302,7 +308,7 @@ export const PosterCard = ({
{data && data[row.property]} {data && data[row.property]}
</Text> </Text>
) : ( ) : (
<Text overflow="hidden" secondary={index > 0}> <Text $secondary={index > 0} overflow="hidden">
{data && data[row.property]} {data && data[row.property]}
</Text> </Text>
)} )}
@@ -329,7 +335,7 @@ export const PosterCard = ({
<DetailSection> <DetailSection>
{cardRows.map((row: CardRow, index: number) => ( {cardRows.map((row: CardRow, index: number) => (
<Skeleton <Skeleton
key={`row-${row.property}`} key={`row-${row.property}-${columnIndex}`}
my={2} my={2}
radius="md" radius="md"
visible={!data} visible={!data}