yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-12-13 08:01:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

fix: fixed image size for media cell (#6325)

Browse Source
This commit is contained in:
Kilu.He 2024-09-16 23:24:09 +08:00 committed by GitHub
parent 2bc9753f60
commit f303674737
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 21 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

9
frontend/appflowy_web_app/src/components/database/components/cell/file-media/PreviewImage.tsx
View File

@ -1,7 +1,7 @@
import { FileMediaCellDataItem } from '@/application/database-yjs/cell.type'; import { FileMediaCellDataItem } from '@/application/database-yjs/cell.type';
import React, { useMemo } from 'react'; import React, { useMemo } from 'react';
function PreviewImage ({ file, onClick }: { file: FileMediaCellDataItem, onClick: () => void }) { function PreviewImage({ file, onClick }: { file: FileMediaCellDataItem; onClick: () => void }) {
const thumb = useMemo(() => { const thumb = useMemo(() => {
const url = new URL(file.url); const url = new URL(file.url);
@ -12,10 +12,11 @@ function PreviewImage ({ file, onClick }: { file: FileMediaCellDataItem, onClick
}, [file.url]); }, [file.url]);
return ( return (
<div onClick={onClick} className={'p-1 cursor-pointer hover:scale-110 transform transition-all duration-200'}> <div onClick={onClick} className={'transform cursor-pointer transition-all duration-200 hover:scale-110'}>
<img <img
src={thumb} alt={file.name} src={thumb}
className={'w-fit h-full object-cover border border-line-divider rounded-[8px] overflow-hidden'} alt={file.name}
className={'aspect-square w-[60px] overflow-hidden rounded-[8px] border border-line-divider object-cover'}
/> />
</div> </div>
); );

21
frontend/appflowy_web_app/src/components/editor/components/blocks/table/Table.tsx
View File

@ -5,12 +5,15 @@ import { Grid } from '@atlaskit/primitives';
import './table.scss'; import './table.scss';
import isEqual from 'lodash-es/isEqual'; import isEqual from 'lodash-es/isEqual';
import { ReactEditor, useSlateStatic } from 'slate-react'; import { ReactEditor, useSlateStatic } from 'slate-react';
import { useEditorContext } from '@/components/editor/EditorContext';
const Table = memo( const Table = memo(
forwardRef<HTMLDivElement, EditorElementProps<TableNode>>(({ node, children, className, ...attributes }, ref) => { forwardRef<HTMLDivElement, EditorElementProps<TableNode>>(({ node, children, className, ...attributes }, ref) => {
const context = useEditorContext();
const readSummary = context.readSummary;
const { rowsLen, colsLen, rowDefaultHeight, colsHeight } = node.data; const { rowsLen, colsLen, rowDefaultHeight, colsHeight } = node.data;
const cells = node.children as TableCellNode[]; const cells = node.children as TableCellNode[];
const [width, setWidth] = React.useState(0); const [width, setWidth] = React.useState<number | undefined>(undefined);
const offsetLeftRef = useRef(0); const offsetLeftRef = useRef(0);
const columnGroup = useMemo(() => { const columnGroup = useMemo(() => {
@ -44,7 +47,6 @@ const Table = memo(
const editor = useSlateStatic(); const editor = useSlateStatic();
const calcTableWidth = useCallback((editorDom: HTMLElement, scrollContainer: HTMLElement) => { const calcTableWidth = useCallback((editorDom: HTMLElement, scrollContainer: HTMLElement) => {
const scrollRect = scrollContainer.getBoundingClientRect(); const scrollRect = scrollContainer.getBoundingClientRect();
setWidth(scrollRect.width); setWidth(scrollRect.width);
@ -52,6 +54,7 @@ const Table = memo(
}, []); }, []);
useEffect(() => { useEffect(() => {
if (readSummary) return;
const editorDom = ReactEditor.toDOMNode(editor, editor); const editorDom = ReactEditor.toDOMNode(editor, editor);
const scrollContainer = getScrollParent(editorDom) as HTMLElement; const scrollContainer = getScrollParent(editorDom) as HTMLElement;
@ -67,7 +70,7 @@ const Table = memo(
return () => { return () => {
resizeObserver.disconnect(); resizeObserver.disconnect();
}; };
}, [calcTableWidth, editor]); }, [calcTableWidth, editor, readSummary]);
return ( return (
<div <div
@ -82,15 +85,17 @@ const Table = memo(
left: -offsetLeftRef.current, left: -offsetLeftRef.current,
}} }}
> >
<div className={'h-full w-full overflow-x-auto overflow-y-hidden'} style={{ <div
className={'h-full w-full overflow-x-auto overflow-y-hidden'}
style={{
paddingLeft: offsetLeftRef.current + 'px', paddingLeft: offsetLeftRef.current + 'px',
}} }}
> >
<Grid <Grid
id={`table-${node.blockId}`} id={`table-${node.blockId}`}
rowGap="space.0" rowGap='space.0'
autoFlow="column" autoFlow='column'
columnGap="space.0" columnGap='space.0'
templateRows={templateRows} templateRows={templateRows}
templateColumns={templateColumns} templateColumns={templateColumns}
> >
@ -100,7 +105,7 @@ const Table = memo(
</div> </div>
); );
}), }),
(prevProps, nextProps) => isEqual(prevProps.node, nextProps.node), (prevProps, nextProps) => isEqual(prevProps.node, nextProps.node)
); );
export default Table; export default Table;