Recommended: restore ad location

Ticket: 1018
Reference: 2575c5d

- Restored position of the ad to the 4th slot.
- Moved repeated query out of the map predicate (`droppableProvided ?`)
- For draggables, make the injected item always on top for now. There are draggables with injected items at the moment.
This commit is contained in:
infinite-persistence 2022-03-07 14:09:23 +08:00 committed by Thomas Zarebczan
parent 65931202b0
commit b0b0cd825b

View file

@ -250,43 +250,46 @@ export default function ClaimList(props: Props) {
{...(droppableProvided && droppableProvided.droppableProps)} {...(droppableProvided && droppableProvided.droppableProps)}
ref={droppableProvided && droppableProvided.innerRef} ref={droppableProvided && droppableProvided.innerRef}
> >
{injectedItem && sortedUris.some((uri, index) => index === 4) && <li>{injectedItem}</li>} {droppableProvided ? (
<>
{injectedItem && <li>{injectedItem}</li>}
{sortedUris.map((uri, index) => (
<React.Suspense fallback={null} key={uri}>
<Draggable draggableId={uri} index={index}>
{(draggableProvided, draggableSnapshot) => {
// Restrict dragging to vertical axis
// https://github.com/atlassian/react-beautiful-dnd/issues/958#issuecomment-980548919
let transform = draggableProvided.draggableProps.style.transform;
if (draggableSnapshot.isDragging && transform) {
transform = transform.replace(/\(.+,/, '(0,');
}
{sortedUris.map((uri, index) => const style = {
droppableProvided ? ( ...draggableProvided.draggableProps.style,
<React.Suspense fallback={null} key={uri}> transform,
<Draggable draggableId={uri} index={index}> };
{(draggableProvided, draggableSnapshot) => {
// Restrict dragging to vertical axis
// https://github.com/atlassian/react-beautiful-dnd/issues/958#issuecomment-980548919
let transform = draggableProvided.draggableProps.style.transform;
if (draggableSnapshot.isDragging && transform) { return (
transform = transform.replace(/\(.+,/, '(0,'); <li ref={draggableProvided.innerRef} {...draggableProvided.draggableProps} style={style}>
} {/* https://github.com/atlassian/react-beautiful-dnd/issues/1756 */}
<div style={{ display: 'none' }} {...draggableProvided.dragHandleProps} />
const style = { {getClaimPreview(uri, index, draggableProvided)}
...draggableProvided.draggableProps.style, </li>
transform, );
}; }}
</Draggable>
return ( </React.Suspense>
<li ref={draggableProvided.innerRef} {...draggableProvided.draggableProps} style={style}> ))}
{/* https://github.com/atlassian/react-beautiful-dnd/issues/1756 */} {droppableProvided.placeholder}
<div style={{ display: 'none' }} {...draggableProvided.dragHandleProps} /> </>
) : (
{getClaimPreview(uri, index, draggableProvided)} sortedUris.map((uri, index) => (
</li> <React.Fragment key={uri}>
); {injectedItem && index === 4 && <li>{injectedItem}</li>}
}} {getClaimPreview(uri, index)}
</Draggable> </React.Fragment>
</React.Suspense> ))
) : (
getClaimPreview(uri, index)
)
)} )}
{droppableProvided && droppableProvided.placeholder}
</ul> </ul>
)} )}