vanja/feishin
1
0
Fork 0
mirror of https://github.com/jeffvli/feishin.git synced 2026-06-15 16:04: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
+44 -32
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,13 +212,15 @@ 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 ( return (
<Row secondary={index > 0}> <Row
key={`row-${row.property}-${columnIndex}`}
secondary={index > 0}
>
{data[row.property].map( {data[row.property].map(
(item: any, itemIndex: number) => ( (item: any, itemIndex: number) => (
<> <React.Fragment key={`${data.id}-${item.id}`}>
{itemIndex > 0 && ( {itemIndex > 0 && (
<Text <Text
sx={{ sx={{
@@ -229,17 +232,16 @@ export const DefaultCard = ({
</Text> </Text>
)}{' '} )}{' '}
<Text <Text
link $link
$secondary={index > 0}
component={Link} component={Link}
overflow="hidden" overflow="hidden"
secondary={index > 0}
to={generatePath( to={generatePath(
row.route!.route, row.route!.route,
row.route!.slugs?.reduce((acc, slug) => { row.route!.slugs?.reduce((acc, slug) => {
return { return {
...acc, ...acc,
[slug.slugProperty]: [slug.slugProperty]: data[slug.idProperty],
data[slug.idProperty],
}; };
}, {}) }, {})
)} )}
@@ -247,17 +249,22 @@ export const DefaultCard = ({
> >
{row.arrayProperty && item[row.arrayProperty]} {row.arrayProperty && item[row.arrayProperty]}
</Text> </Text>
</> </React.Fragment>
) )
)} )}
</Row> </Row>
); );
} }
if (row.arrayProperty) {
return ( return (
<Row> <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,13 +341,14 @@ 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 ( return (
<Row secondary={index > 0}> <Row
{data[row.property].map( key={`row-${row.property}-${columnIndex}`}
(item: any, itemIndex: number) => ( secondary={index > 0}
<> >
{data[row.property].map((item: any, itemIndex: number) => (
<React.Fragment key={`${data.id}-${item.id}`}>
{itemIndex > 0 && ( {itemIndex > 0 && (
<Text <Text
sx={{ sx={{
@@ -352,10 +360,10 @@ export const DefaultCard = ({
</Text> </Text>
)}{' '} )}{' '}
<Text <Text
link $link
$secondary={index > 0}
component={Link} component={Link}
overflow="hidden" overflow="hidden"
secondary={index > 0}
to={generatePath( to={generatePath(
row.route!.route, row.route!.route,
row.route!.slugs?.reduce((acc, slug) => { row.route!.slugs?.reduce((acc, slug) => {
@@ -369,17 +377,21 @@ export const DefaultCard = ({
> >
{row.arrayProperty && item[row.arrayProperty]} {row.arrayProperty && item[row.arrayProperty]}
</Text> </Text>
</> </React.Fragment>
) ))}
)}
</Row> </Row>
); );
} }
if (row.arrayProperty) {
return ( return (
<Row> <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
+24 -18
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,13 +231,14 @@ 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 ( return (
<Row secondary={index > 0}> <Row
{data[row.property].map( key={`row-${row.property}-${columnIndex}`}
(item: any, itemIndex: number) => ( secondary={index > 0}
<> >
{data[row.property].map((item: any, itemIndex: number) => (
<React.Fragment key={`${data.id}-${item.id}`}>
{itemIndex > 0 && ( {itemIndex > 0 && (
<Text <Text
sx={{ sx={{
@@ -248,10 +250,10 @@ export const PosterCard = ({
</Text> </Text>
)}{' '} )}{' '}
<Text <Text
link $link
$secondary={index > 0}
component={Link} component={Link}
overflow="hidden" overflow="hidden"
secondary={index > 0}
to={generatePath( to={generatePath(
row.route!.route, row.route!.route,
row.route!.slugs?.reduce((acc, slug) => { row.route!.slugs?.reduce((acc, slug) => {
@@ -264,17 +266,21 @@ export const PosterCard = ({
> >
{row.arrayProperty && item[row.arrayProperty]} {row.arrayProperty && item[row.arrayProperty]}
</Text> </Text>
</> </React.Fragment>
) ))}
)}
</Row> </Row>
); );
} }
if (row.arrayProperty) {
return ( return (
<Row> <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}