From ae48cb2c066ea6bad1e437898937f730cc3f2985 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Fri, 22 Apr 2022 12:24:09 -0500 Subject: [PATCH] ScrollableList: replace margins with padding --- app/soapbox/components/scrollable_list.tsx | 24 +++++++++++++++++-- app/soapbox/components/status_list.js | 8 ++++++- app/soapbox/features/admin/user_index.js | 3 ++- app/soapbox/features/blocks/index.tsx | 4 ++-- app/soapbox/features/followers/index.js | 2 +- app/soapbox/features/following/index.js | 2 +- app/soapbox/features/mutes/index.tsx | 2 +- .../ui/components/birthdays_modal.tsx | 2 +- .../ui/components/favourites_modal.js | 2 +- .../features/ui/components/mentions_modal.js | 2 +- .../ui/components/reactions_modal.tsx | 2 +- .../features/ui/components/reblogs_modal.js | 2 +- 12 files changed, 41 insertions(+), 14 deletions(-) diff --git a/app/soapbox/components/scrollable_list.tsx b/app/soapbox/components/scrollable_list.tsx index ce35228c8..e30989627 100644 --- a/app/soapbox/components/scrollable_list.tsx +++ b/app/soapbox/components/scrollable_list.tsx @@ -6,10 +6,26 @@ import PullToRefresh from 'soapbox/components/pull-to-refresh'; import { Spinner, Text } from './ui'; +type Context = { + itemClassName?: string, + listClassName?: string, +} + +type VComponent = { + context?: Context, +} + +// NOTE: It's crucial to space lists with **padding** instead of margin! +// Pass an `itemClassName` like `pb-3`, NOT a `space-y-3` className +// https://virtuoso.dev/troubleshooting#list-does-not-scroll-to-the-bottom--items-jump-around +const Item: React.FC = ({ context, ...rest }) => ( +
+); + // Ensure the className winds up here -const List = React.forwardRef((props: any, ref: React.ForwardedRef) => { +const List = React.forwardRef((props, ref) => { const { context, ...rest } = props; - return
; + return
; }); interface IScrollableList { @@ -28,6 +44,7 @@ interface IScrollableList { placeholderCount?: number, onRefresh?: () => Promise, className?: string, + itemClassName?: string, } /** Legacy ScrollableList with Virtuoso for backwards-compatibility */ @@ -43,6 +60,7 @@ const ScrollableList: React.FC = ({ onScrollToTop, onLoadMore, className, + itemClassName, hasMore, placeholderComponent: Placeholder, placeholderCount = 0, @@ -101,12 +119,14 @@ const ScrollableList: React.FC = ({ itemContent={renderItem} context={{ listClassName: className, + itemClassName, }} components={{ Header: () => prepend, ScrollSeekPlaceholder: Placeholder as any, EmptyPlaceholder: () => renderEmpty(), List, + Item, }} /> diff --git a/app/soapbox/components/status_list.js b/app/soapbox/components/status_list.js index 327820f6f..a1f35b841 100644 --- a/app/soapbox/components/status_list.js +++ b/app/soapbox/components/status_list.js @@ -1,3 +1,4 @@ +import classNames from 'classnames'; import { debounce } from 'lodash'; import PropTypes from 'prop-types'; import React from 'react'; @@ -222,7 +223,12 @@ export default class StatusList extends ImmutablePureComponent { placeholderComponent={PlaceholderStatus} placeholderCount={20} ref={this.setRef} - className={divideType === 'border' ? 'divide-y divide-solid divide-gray-200 dark:divide-gray-800' : 'sm:space-y-3 divide-y divide-solid divide-gray-200 dark:divide-gray-800 sm:divide-none'} + className={classNames('divide-y divide-solid divide-gray-200 dark:divide-slate-700', { + 'sm:divide-none': divideType !== 'border', + })} + itemClassName={classNames({ + 'sm:pb-3': divideType !== 'border', + })} {...other} > {this.renderScrollableContent()} diff --git a/app/soapbox/features/admin/user_index.js b/app/soapbox/features/admin/user_index.js index dc7691f69..eeeba734a 100644 --- a/app/soapbox/features/admin/user_index.js +++ b/app/soapbox/features/admin/user_index.js @@ -116,7 +116,8 @@ class UserIndex extends ImmutablePureComponent { showLoading={showLoading} onLoadMore={this.handleLoadMore} emptyMessage={intl.formatMessage(messages.empty)} - className='mt-4 space-y-4' + className='mt-4' + itemClassName='pb-4' > {accountIds.map(id => , diff --git a/app/soapbox/features/blocks/index.tsx b/app/soapbox/features/blocks/index.tsx index cdc3b0a98..90e41bf65 100644 --- a/app/soapbox/features/blocks/index.tsx +++ b/app/soapbox/features/blocks/index.tsx @@ -45,7 +45,7 @@ const Blocks: React.FC = () => { onLoadMore={() => handleLoadMore(dispatch)} hasMore={hasMore} emptyMessage={emptyMessage} - className='space-y-4' + itemClassName='pb-4' > {accountIds.map((id: string) => , @@ -55,4 +55,4 @@ const Blocks: React.FC = () => { ); }; -export default Blocks; \ No newline at end of file +export default Blocks; diff --git a/app/soapbox/features/followers/index.js b/app/soapbox/features/followers/index.js index aa7067b5c..1a98cb561 100644 --- a/app/soapbox/features/followers/index.js +++ b/app/soapbox/features/followers/index.js @@ -125,7 +125,7 @@ class Followers extends ImmutablePureComponent { diffCount={diffCount} onLoadMore={this.handleLoadMore} emptyMessage={} - className='space-y-4' + itemClassName='pb-4' > {accountIds.map(id => , diff --git a/app/soapbox/features/following/index.js b/app/soapbox/features/following/index.js index cfa7c2741..7ab00a7b9 100644 --- a/app/soapbox/features/following/index.js +++ b/app/soapbox/features/following/index.js @@ -125,7 +125,7 @@ class Following extends ImmutablePureComponent { diffCount={diffCount} onLoadMore={this.handleLoadMore} emptyMessage={} - className='space-y-4' + itemClassName='pb-4' > {accountIds.map(id => , diff --git a/app/soapbox/features/mutes/index.tsx b/app/soapbox/features/mutes/index.tsx index c1f306c24..06bf89e21 100644 --- a/app/soapbox/features/mutes/index.tsx +++ b/app/soapbox/features/mutes/index.tsx @@ -45,7 +45,7 @@ const Mutes: React.FC = () => { onLoadMore={() => handleLoadMore(dispatch)} hasMore={hasMore} emptyMessage={emptyMessage} - className='space-y-4' + itemClassName='pb-4' > {accountIds.map((id: string) => , diff --git a/app/soapbox/features/ui/components/birthdays_modal.tsx b/app/soapbox/features/ui/components/birthdays_modal.tsx index 8977c95ee..6c43bd7b4 100644 --- a/app/soapbox/features/ui/components/birthdays_modal.tsx +++ b/app/soapbox/features/ui/components/birthdays_modal.tsx @@ -28,7 +28,7 @@ const BirthdaysModal = ({ onClose }: IBirthdaysModal) => { {accountIds.map(id => , diff --git a/app/soapbox/features/ui/components/favourites_modal.js b/app/soapbox/features/ui/components/favourites_modal.js index 27ee0f16f..34e6ceb34 100644 --- a/app/soapbox/features/ui/components/favourites_modal.js +++ b/app/soapbox/features/ui/components/favourites_modal.js @@ -54,7 +54,7 @@ class FavouritesModal extends React.PureComponent { {accountIds.map(id => , diff --git a/app/soapbox/features/ui/components/mentions_modal.js b/app/soapbox/features/ui/components/mentions_modal.js index 6b6746eda..0f4c4626b 100644 --- a/app/soapbox/features/ui/components/mentions_modal.js +++ b/app/soapbox/features/ui/components/mentions_modal.js @@ -61,7 +61,7 @@ class MentionsModal extends React.PureComponent { body = ( {accountIds.map(id => , diff --git a/app/soapbox/features/ui/components/reactions_modal.tsx b/app/soapbox/features/ui/components/reactions_modal.tsx index 72f5eddc9..31422ab05 100644 --- a/app/soapbox/features/ui/components/reactions_modal.tsx +++ b/app/soapbox/features/ui/components/reactions_modal.tsx @@ -87,7 +87,7 @@ const ReactionsModal: React.FC = ({ onClose, statusId, ...props {accounts.map((account) => , diff --git a/app/soapbox/features/ui/components/reblogs_modal.js b/app/soapbox/features/ui/components/reblogs_modal.js index 37feaf1dc..a5945c3a1 100644 --- a/app/soapbox/features/ui/components/reblogs_modal.js +++ b/app/soapbox/features/ui/components/reblogs_modal.js @@ -72,7 +72,7 @@ class ReblogsModal extends React.PureComponent { {accountIds.map(id => ,