Skip to content

Commit

Permalink
List View: use tr placeholders vs padding
Browse files Browse the repository at this point in the history
  • Loading branch information
@gwwar
gwwar committed Oct 25, 2021
1 parent 9941fc8 commit abcab5d
Show file tree
Hide file tree
Showing 5 changed files with 84 additions and 111 deletions.
2 changes: 0 additions & 2 deletions packages/block-editor/src/components/list-view/block.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ export default function ListViewBlock( {
showBlockMovers,
path,
isExpanded,
style,
} ) {
const cellRef = useRef( null );
const [ isHovered, setIsHovered ] = useState( false );
Expand Down Expand Up @@ -185,7 +184,6 @@ export default function ListViewBlock( {
className="block-editor-list-view-block__contents-cell"
colSpan={ colSpan }
ref={ cellRef }
style={ style }
>
{ ( { ref, tabIndex, onFocus } ) => (
<div className="block-editor-list-view-block__contents-container">
Expand Down
164 changes: 74 additions & 90 deletions packages/block-editor/src/components/list-view/branch.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,96 +68,80 @@ function ListViewBranch( props ) {
const blockCount = filteredBlocks.length;
let nextPosition = listPosition;

const listItems = [];
for ( let index = 0; index < filteredBlocks.length; index++ ) {
const block = filteredBlocks[ index ];
const { clientId, innerBlocks } = block;

if ( index > 0 ) {
nextPosition += countBlocks(
filteredBlocks[ index - 1 ],
expandedState,
draggedClientIds
);
}

const usesWindowing = __experimentalPersistentListViewFeatures;

const {
start,
end,
itemInView,
startPadding,
endPadding,
} = fixedListWindow;

const blockInView = ! usesWindowing || itemInView( nextPosition );

const isDragging = draggedClientIds?.length > 0;
if (
usesWindowing &&
! isDragging &&
! blockInView &&
nextPosition > start
) {
// found the end of the window, don't bother processing the rest of the items
break;
}
const style = usesWindowing
? {
paddingTop: start === nextPosition ? startPadding : 0,
paddingBottom: end === nextPosition ? endPadding : 0,
}
: undefined;

const position = index + 1;
const updatedPath =
path.length > 0 ? `${ path }_${ position }` : `${ position }`;
const hasNestedBlocks =
showNestedBlocks && !! innerBlocks && !! innerBlocks.length;

const isExpanded = hasNestedBlocks
? expandedState[ clientId ] ?? true
: undefined;

// Make updates to the selected or dragged blocks synchronous,
// but asynchronous for any other block.
const isDragged = !! draggedClientIds?.includes( clientId );

listItems.push(
<Fragment key={ clientId }>
{ ( isDragged || blockInView ) && (
<ListViewBlock
block={ block }
selectBlock={ selectBlock }
isDragged={ isDragged }
level={ level }
position={ position }
rowCount={ blockCount }
siblingBlockCount={ blockCount }
showBlockMovers={ showBlockMovers }
path={ updatedPath }
isExpanded={ isExpanded }
listPosition={ nextPosition }
style={ style }
/>
) }
{ hasNestedBlocks && isExpanded && ! isDragged && (
<ListViewBranch
blocks={ innerBlocks }
selectBlock={ selectBlock }
showBlockMovers={ showBlockMovers }
showNestedBlocks={ showNestedBlocks }
level={ level + 1 }
path={ updatedPath }
listPosition={ nextPosition + 1 }
fixedListWindow={ fixedListWindow }
/>
) }
</Fragment>
);
}
return <>{ listItems }</>;
return (
<>
{ filteredBlocks.map( ( block, index ) => {
const { clientId, innerBlocks } = block;

if ( index > 0 ) {
nextPosition += countBlocks(
filteredBlocks[ index - 1 ],
expandedState,
draggedClientIds
);
}

const usesWindowing = __experimentalPersistentListViewFeatures;

const { itemInView } = fixedListWindow;

const blockInView =
! usesWindowing || itemInView( nextPosition );

const position = index + 1;
const updatedPath =
path.length > 0
? `${ path }_${ position }`
: `${ position }`;
const hasNestedBlocks =
showNestedBlocks && !! innerBlocks && !! innerBlocks.length;

const isExpanded = hasNestedBlocks
? expandedState[ clientId ] ?? true
: undefined;

const isDragged = !! draggedClientIds?.includes( clientId );

const showBlock = isDragged || blockInView;
return (
<Fragment key={ clientId }>
{ showBlock && (
<ListViewBlock
block={ block }
selectBlock={ selectBlock }
isDragged={ isDragged }
level={ level }
position={ position }
rowCount={ blockCount }
siblingBlockCount={ blockCount }
showBlockMovers={ showBlockMovers }
path={ updatedPath }
isExpanded={ isExpanded }
listPosition={ nextPosition }
/>
) }
{ ! showBlock && (
<tr>
<td className="block-editor-list-view-placeholder" />
</tr>
) }
{ hasNestedBlocks && isExpanded && ! isDragged && (
<ListViewBranch
blocks={ innerBlocks }
selectBlock={ selectBlock }
showBlockMovers={ showBlockMovers }
showNestedBlocks={ showNestedBlocks }
level={ level + 1 }
path={ updatedPath }
listPosition={ nextPosition + 1 }
fixedListWindow={ fixedListWindow }
/>
) }
</Fragment>
);
} ) }
</>
);
}

ListViewBranch.defaultProps = {
Expand Down
5 changes: 0 additions & 5 deletions packages/block-editor/src/components/list-view/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -177,11 +177,6 @@ function ListView(
ref={ treeGridRef }
onCollapseRow={ collapseRow }
onExpandRow={ expandRow }
aria-rowcount={
__experimentalPersistentListViewFeatures
? visibleBlockCount
: undefined
}
>
<ListViewContext.Provider value={ contextValue }>
<ListViewBranch
Expand Down
6 changes: 6 additions & 0 deletions packages/block-editor/src/components/list-view/style.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -357,3 +357,9 @@ $block-navigation-max-indent: 8;
box-shadow: none;
}

.block-editor-list-view-placeholder {
padding: 0;
margin: 0;
height: 36px;
}

18 changes: 4 additions & 14 deletions packages/compose/src/hooks/use-fixed-window-list/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,8 +19,6 @@ const DEFAULT_INIT_WINDOW_SIZE = 30;
* @property {number} start Start index of the window
* @property {number} end End index of the window
* @property {(index:number)=>boolean} itemInView Returns true if item is in the window
* @property {number} startPadding Padding in px to add before the start item
* @property {number} endPadding Padding in px to add after the end item
*/

/**
Expand Down Expand Up @@ -55,8 +53,6 @@ export default function useFixedWindowList(
itemInView: ( /** @type {number} */ index ) => {
return index >= 0 && index <= initWindowSize;
},
startPadding: 0,
endPadding: 0,
} );

useLayoutEffect( () => {
Expand All @@ -72,14 +68,13 @@ export default function useFixedWindowList(
scrollContainer.clientHeight / itemHeight
);
const windowOverscan = options?.windowOverscan ?? visibleItems;
const start = Math.max(
0,
Math.floor( scrollContainer.scrollTop / itemHeight ) -
windowOverscan
const firstViewableIndex = Math.floor(
scrollContainer.scrollTop / itemHeight
);
const start = Math.max( 0, firstViewableIndex - windowOverscan );
const end = Math.min(
totalItems - 1,
start + visibleItems + windowOverscan
firstViewableIndex + visibleItems + windowOverscan
);
setFixedListWindow( ( lastWindow ) => {
const nextWindow = {
Expand All @@ -89,11 +84,6 @@ export default function useFixedWindowList(
itemInView: ( /** @type {number} */ index ) => {
return start <= index && index <= end;
},
startPadding: itemHeight * start,
endPadding:
totalItems > end
? itemHeight * ( totalItems - end - 1 )
: 0,
};
if (
lastWindow.start !== nextWindow.start ||
Expand Down

0 comments on commit abcab5d

Please sign in to comment.