From 43a388e4cbae3df5e7fcb20569919b1dab5aedb9 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Tue, 4 Apr 2023 16:46:44 +0200 Subject: [PATCH 1/2] Clean up ImageBlock --- .../src/blocks/ImageBlock/ImageBlock.tsx | 30 ++++++++----------- 1 file changed, 13 insertions(+), 17 deletions(-) diff --git a/lib/design-system/src/blocks/ImageBlock/ImageBlock.tsx b/lib/design-system/src/blocks/ImageBlock/ImageBlock.tsx index 5ea5f2252a..695eb61736 100644 --- a/lib/design-system/src/blocks/ImageBlock/ImageBlock.tsx +++ b/lib/design-system/src/blocks/ImageBlock/ImageBlock.tsx @@ -10,18 +10,17 @@ type ImageBlockProps = { onImageLoaded?: () => void; } & BlockProps; -export const ImageBlock = (props: ImageBlockProps) => { - const { - showLoader, - image, - by, - variant, - width = 'inherit', - height, - // eslint-disable-next-line unused-imports/no-unused-vars - onImageLoaded, - ...rest - } = props; +export const ImageBlock = ({ + id, + showLoader, + image, + by, + variant, + width = 'inherit', + height, + onImageLoaded, + ...rest +}: ImageBlockProps) => { const [isLoaded, setIsLoaded] = useState(false); const parsedHeight = useMemo( () => @@ -44,9 +43,8 @@ export const ImageBlock = (props: ImageBlockProps) => { ); return ( - + { setIsLoaded(true); } }} - onError={() => { - // setIsError(true); - }} + onError={() => {}} /> {by && ( From c48aa56cb964f55a4c36ce5b3b41b2c00611b904 Mon Sep 17 00:00:00 2001 From: gdbroman <99gustaf@gmail.com> Date: Tue, 4 Apr 2023 17:48:37 +0200 Subject: [PATCH 2/2] Fix jumpy scroll --- app/package.json | 4 +-- .../renderer/apps/Courier/views/ChatLog.tsx | 4 +-- .../WindowedList/WindowedList.styles.tsx | 29 +++++++++++++------ .../src/general/WindowedList/WindowedList.tsx | 21 +++++++++----- .../general/WindowedList/source/Grid/Grid.tsx | 4 --- 5 files changed, 37 insertions(+), 25 deletions(-) diff --git a/app/package.json b/app/package.json index 0dbd324225..afb27c50ff 100644 --- a/app/package.json +++ b/app/package.json @@ -4,11 +4,11 @@ "description": "A desktop environment for Urbit", "private": "true", "scripts": { - "prebuild": "electron-rebuild -f -w better-sqlite3", + "prebuild": "./node_modules/.bin/electron-rebuild -f -w better-sqlite3", "build": "concurrently \"npm run build:main\" \"npm run build:renderer\"", "build:main": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.holium/configs/webpack.config.main.prod.ts", "build:renderer": "cross-env NODE_ENV=production TS_NODE_TRANSPILE_ONLY=true webpack --config ./.holium/configs/webpack.config.renderer.prod.ts", - "rebuild": "electron-rebuild --parallel --types prod,dev,optional --module-dir release/app", + "rebuild": "./node_modules/.bin/electron-rebuild --parallel --types prod,dev,optional --module-dir release/app", "package:prerelease:linux": "ts-node ./.holium/scripts/clean.js dist && npm run build && electron-builder build --linux --publish never", "package:prerelease:mac": "ts-node ./.holium/scripts/clean.js dist && npm run build && yarn rebuild && electron-builder build --mac --publish never", "package:prerelease:win": "ts-node ./.holium/scripts/clean.js dist && npm run build && electron-builder build --win --publish never", diff --git a/app/src/renderer/apps/Courier/views/ChatLog.tsx b/app/src/renderer/apps/Courier/views/ChatLog.tsx index 054c6d0ad3..94202a807e 100644 --- a/app/src/renderer/apps/Courier/views/ChatLog.tsx +++ b/app/src/renderer/apps/Courier/views/ChatLog.tsx @@ -232,8 +232,8 @@ export const ChatLogPresenter = ({ storage }: ChatLogProps) => { return ( {showDate && ( ` +export const StyledList = styled(List)<{ + startAtBottom: boolean; + hideScrollbar: boolean; +}>` + ${({ startAtBottom }) => + startAtBottom && + css` + :nth-child(1) { + transform: scaleY(-1); + } + `} + ${({ hideScrollbar }) => hideScrollbar && - ` - -ms-overflow-style: none; - scrollbar-width: none; + css` + -ms-overflow-style: none; + scrollbar-width: none; - &::-webkit-scrollbar { - display: none; - } - `} + &::-webkit-scrollbar { + display: none; + } + `} `; diff --git a/lib/design-system/src/general/WindowedList/WindowedList.tsx b/lib/design-system/src/general/WindowedList/WindowedList.tsx index 5284c1dce7..7291a3bbd2 100644 --- a/lib/design-system/src/general/WindowedList/WindowedList.tsx +++ b/lib/design-system/src/general/WindowedList/WindowedList.tsx @@ -48,10 +48,10 @@ export const WindowedList = ({ sort = () => 0, filter = () => true, }: WindowedListProps) => { - const data = useMemo( - () => rawData.filter(filter).sort(sort), - [rawData, filter, sort] - ); + const data = useMemo(() => { + const filteredAndSorted = rawData.filter(filter).sort(sort); + return startAtBottom ? filteredAndSorted.reverse() : filteredAndSorted; + }, [rawData, filter, sort]); const cache = useRef( new CellMeasurerCache({ fixedWidth: true, @@ -75,7 +75,8 @@ export const WindowedList = ({ width={width ?? maybeAutoWidth} height={height ?? maybeAutoHeight} rowCount={data.length} - rowHeight={cache.current.rowHeight as any} + rowHeight={(i) => cache.current.rowHeight(i) ?? 60} + estimatedRowSize={60} deferredMeasurementCache={cache.current} rowRenderer={({ key, index, style, parent }) => ( ({ rowIndex={index} > {({ measure, registerChild }) => ( -
+
{rowRenderer(data[index], index, measure, data)}
)} @@ -94,8 +101,6 @@ export const WindowedList = ({ onScroll={onScroll} hideScrollbar={hideScrollbar} startAtBottom={startAtBottom} - scrollToIndex={startAtBottom ? data.length - 1 : 0} - scrollToAlignment={startAtBottom ? 'end' : 'auto'} /> )} diff --git a/lib/design-system/src/general/WindowedList/source/Grid/Grid.tsx b/lib/design-system/src/general/WindowedList/source/Grid/Grid.tsx index c765e304cd..a9ffeca998 100644 --- a/lib/design-system/src/general/WindowedList/source/Grid/Grid.tsx +++ b/lib/design-system/src/general/WindowedList/source/Grid/Grid.tsx @@ -978,7 +978,6 @@ export class Grid extends React.PureComponent { const childrenToDisplay = this._childrenToDisplay; const showNoContentRenderer = childrenToDisplay?.length === 0 && height > 0 && width > 0; - const whiteSpace = height - totalRowsHeight; return (
{ style={{ ...gridStyle, ...style, - ...(this.props.startAtBottom && whiteSpace > 0 - ? { transform: `translateY(${whiteSpace}px)` } - : {}), }} tabIndex={tabIndex} >