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)}
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) =>
droppableProvided ? (
<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;
const style = {
...draggableProvided.draggableProps.style,
transform,
};
if (draggableSnapshot.isDragging && transform) {
transform = transform.replace(/\(.+,/, '(0,');
}
const style = {
...draggableProvided.draggableProps.style,
transform,
};
return (
<li ref={draggableProvided.innerRef} {...draggableProvided.draggableProps} style={style}>
{/* https://github.com/atlassian/react-beautiful-dnd/issues/1756 */}
<div style={{ display: 'none' }} {...draggableProvided.dragHandleProps} />
{getClaimPreview(uri, index, draggableProvided)}
</li>
);
}}
</Draggable>
</React.Suspense>
) : (
getClaimPreview(uri, index)
)
return (
<li ref={draggableProvided.innerRef} {...draggableProvided.draggableProps} style={style}>
{/* https://github.com/atlassian/react-beautiful-dnd/issues/1756 */}
<div style={{ display: 'none' }} {...draggableProvided.dragHandleProps} />
{getClaimPreview(uri, index, draggableProvided)}
</li>
);
}}
</Draggable>
</React.Suspense>
))}
{droppableProvided.placeholder}
</>
) : (
sortedUris.map((uri, index) => (
<React.Fragment key={uri}>
{injectedItem && index === 4 && <li>{injectedItem}</li>}
{getClaimPreview(uri, index)}
</React.Fragment>
))
)}
{droppableProvided && droppableProvided.placeholder}
</ul>
)}