Skip to content

Commit

Permalink
refactor(mobile): impl all-docs masonry with css grid, close AF-1598 (#…
Browse files Browse the repository at this point in the history
  • Loading branch information
CatsJuice committed Nov 8, 2024
1 parent 06591db commit d8eda5e
Show file tree
Hide file tree
Showing 4 changed files with 59 additions and 47 deletions.
27 changes: 24 additions & 3 deletions packages/frontend/core/src/mobile/components/doc-card/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,21 +10,36 @@ import {
import type { DocMeta } from '@blocksuite/affine/store';
import { useLiveData, useService, WorkspaceService } from '@toeverything/infra';
import clsx from 'clsx';
import { forwardRef, type ReactNode } from 'react';
import { forwardRef, type ReactNode, useMemo } from 'react';

import * as styles from './styles.css';
import { DocCardTags } from './tag';

const calcRowsById = (id: string) => {
const [MIN, MAX] = [2, 8];

const code = id.charCodeAt(0);
return Math.floor((code % (MAX - MIN)) + MIN);
};

export interface DocCardProps extends Omit<WorkbenchLinkProps, 'to'> {
meta: {
id: DocMeta['id'];
title?: ReactNode;
} & { [key: string]: any };
showTags?: boolean;

/**
* When enabled, preview's height will be calculated based on `meta.id`
*/
autoHeightById?: boolean;
}

export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
function DocCard({ showTags = true, meta, className, ...attrs }, ref) {
function DocCard(
{ showTags = true, meta, className, autoHeightById, ...attrs },
ref
) {
const favAdapter = useService(CompatibleFavoriteItemsAdapter);
const workspace = useService(WorkspaceService).workspace;

Expand All @@ -38,6 +53,12 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
[favAdapter, meta.id]
);

const contentStyle = useMemo(() => {
if (!autoHeightById) return { flex: 1 };
const rows = calcRowsById(meta.id);
return { height: `${rows * 18}px` };
}, [autoHeightById, meta.id]);

return (
<WorkbenchLink
to={`/${meta.id}`}
Expand All @@ -57,7 +78,7 @@ export const DocCard = forwardRef<HTMLAnchorElement, DocCardProps>(
}
/>
</header>
<main className={styles.content}>
<main className={styles.content} style={contentStyle}>
<PagePreview
docCollection={workspace.docCollection}
pageId={meta.id}
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,6 @@ export const untitled = style({
export const content = style([
footnoteRegular,
{
flex: 1,
overflow: 'hidden',
},
]);
Expand Down
Original file line number Diff line number Diff line change
@@ -1,28 +1,13 @@
import { style } from '@vanilla-extract/css';

export const invisibleWrapper = style({
position: 'absolute',
padding: 'inherit',
width: '100%',
height: 0,
overflow: 'hidden',
visibility: 'hidden',
pointerEvents: 'none',
});
export const invisibleList = style({
width: `calc(50% - 17px / 2)`,
});
export const stacks = style({
position: 'relative',
width: '100%',
display: 'flex',
gap: 17,
padding: 16,
export const paddingX = 16;
export const columnGap = 17;

export const masonry = style({
padding: `16px ${paddingX}px`,
columnGap: columnGap,
});
export const stack = style({
width: 0,
flex: 1,
display: 'flex',
flexDirection: 'column',
gap: 10,
export const masonryItem = style({
breakInside: 'avoid',
marginBottom: 10,
});
45 changes: 26 additions & 19 deletions packages/frontend/core/src/mobile/views/all-docs/doc/masonry.tsx
Original file line number Diff line number Diff line change
@@ -1,36 +1,43 @@
import { useGlobalEvent } from '@affine/core/mobile/hooks/use-global-events';
import type { DocMeta } from '@blocksuite/affine/store';
import { useMemo } from 'react';
import { useCallback, useState } from 'react';

import { DocCard } from '../../../components';
import * as styles from './masonry.css';

// TODO(@CatsJuice): Large amount docs performance
const calcColumnCount = () => {
const maxCardWidth = 220;
const windowWidth = window.innerWidth;
const newColumnCount = Math.floor(
(windowWidth - styles.paddingX * 2 - styles.columnGap) / maxCardWidth
);
return Math.max(newColumnCount, 2);
};

export const MasonryDocs = ({
items,
showTags,
}: {
items: DocMeta[];
showTags?: boolean;
}) => {
// card preview is loaded lazily, it's meaningless to calculate height
const stacks = useMemo(() => {
return items.reduce(
(acc, item, i) => {
acc[i % 2].push(item);
return acc;
},
[[], []] as [DocMeta[], DocMeta[]]
);
}, [items]);
const [columnCount, setColumnCount] = useState(calcColumnCount);

const updateColumnCount = useCallback(() => {
setColumnCount(calcColumnCount());
}, []);
useGlobalEvent('resize', updateColumnCount);

return (
<div className={styles.stacks}>
{stacks.map((stack, i) => (
<ul key={i} className={styles.stack}>
{stack.map(item => (
<DocCard showTags={showTags} key={item.id} meta={item} />
))}
</ul>
<div className={styles.masonry} style={{ columnCount }}>
{items.map(item => (
<DocCard
key={item.id}
className={styles.masonryItem}
showTags={showTags}
meta={item}
autoHeightById
/>
))}
</div>
);
Expand Down

0 comments on commit d8eda5e

Please sign in to comment.