yujunjun/AppFlowy
1
0
Fork 0
mirror of https://github.com/AppFlowy-IO/AppFlowy.git synced 2025-12-10 14:42:39 +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

11
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 React, { useMemo } from 'react';
function PreviewImage ({ file, onClick }: { file: FileMediaCellDataItem, onClick: () => void }) {
function PreviewImage({ file, onClick }: { file: FileMediaCellDataItem; onClick: () => void }) {
const thumb = useMemo(() => {
const url = new URL(file.url);
@ -12,13 +12,14 @@ function PreviewImage ({ file, onClick }: { file: FileMediaCellDataItem, onClick
}, [file.url]);
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
src={thumb} alt={file.name}
className={'w-fit h-full object-cover border border-line-divider rounded-[8px] overflow-hidden'}
src={thumb}
alt={file.name}
className={'aspect-square w-[60px] overflow-hidden rounded-[8px] border border-line-divider object-cover'}
/>
</div>
);
}
export default PreviewImage;
export default PreviewImage;

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