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:
parent
65931202b0
commit
b0b0cd825b
1 changed files with 37 additions and 34 deletions
|
@ -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>
|
||||||
)}
|
)}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue