mirror of
https://github.com/strapi/strapi.git
synced 2025-09-25 08:19:07 +00:00
Merge pull request #12587 from strapi/fix/list-settings-order
ListSettingsView: Append the new field instead of prepend
This commit is contained in:
Gustav Hansen
GitHub
commit
71d55dcfaa
@ -195,7 +195,7 @@ const DraggableCard = ({
|
||||
>
|
||||
<Stack horizontal size={3}>
|
||||
<DragButton
|
||||
as='span'
|
||||
as="span"
|
||||
aria-label={formatMessage(
|
||||
{
|
||||
id: getTrad('components.DraggableCard.move.field'),
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { useState } from 'react';
|
||||
import React, { useState, useRef, useEffect } from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { PropTypes } from 'prop-types';
|
||||
import { useIntl } from 'react-intl';
|
||||
@ -36,6 +36,24 @@ const SortDisplayedFields = ({
|
||||
}) => {
|
||||
const { formatMessage } = useIntl();
|
||||
const [isDraggingSibling, setIsDraggingSibling] = useState(false);
|
||||
const [lastAction, setLastAction] = useState(null);
|
||||
const scrollableContainerRef = useRef();
|
||||
|
||||
function handleAddField(...args) {
|
||||
setLastAction('add');
|
||||
onAddField(...args);
|
||||
}
|
||||
|
||||
function handleRemoveField(...args) {
|
||||
setLastAction('remove');
|
||||
onRemoveField(...args);
|
||||
}
|
||||
|
||||
useEffect(() => {
|
||||
if (lastAction === 'add' && scrollableContainerRef?.current) {
|
||||
scrollableContainerRef.current.scrollLeft = scrollableContainerRef.current.scrollWidth;
|
||||
}
|
||||
}, [displayedFields, lastAction]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -56,7 +74,7 @@ const SortDisplayedFields = ({
|
||||
borderWidth="1px"
|
||||
hasRadius
|
||||
>
|
||||
<ScrollableContainer size="1" paddingBottom={4}>
|
||||
<ScrollableContainer size="1" paddingBottom={4} ref={scrollableContainerRef}>
|
||||
<Stack horizontal size={3}>
|
||||
{displayedFields.map((field, index) => (
|
||||
<DraggableCard
|
||||
@ -65,7 +83,7 @@ const SortDisplayedFields = ({
|
||||
isDraggingSibling={isDraggingSibling}
|
||||
onMoveField={onMoveField}
|
||||
onClickEditField={onClickEditField}
|
||||
onRemoveField={e => onRemoveField(e, index)}
|
||||
onRemoveField={e => handleRemoveField(e, index)}
|
||||
name={field}
|
||||
labelField={metadatas[field].list.label || field}
|
||||
setIsDraggingSibling={setIsDraggingSibling}
|
||||
@ -85,7 +103,7 @@ const SortDisplayedFields = ({
|
||||
data-testid="add-field"
|
||||
>
|
||||
{listRemainingFields.map(field => (
|
||||
<MenuItem key={field} onClick={() => onAddField(field)}>
|
||||
<MenuItem key={field} onClick={() => handleAddField(field)}>
|
||||
{field}
|
||||
</MenuItem>
|
||||
))}
|
||||
|
||||
@ -17,7 +17,7 @@ const reducer = (state = initialState, action) =>
|
||||
switch (action.type) {
|
||||
case 'ADD_FIELD': {
|
||||
const layoutFieldList = get(state, layoutFieldListPath, []);
|
||||
set(draftState, layoutFieldListPath, [action.item, ...layoutFieldList]);
|
||||
set(draftState, layoutFieldListPath, [...layoutFieldList, action.item]);
|
||||
break;
|
||||
}
|
||||
case 'MOVE_FIELD': {
|
||||
|
||||
@ -3412,109 +3412,6 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
|
||||
<div
|
||||
class="c68 c69"
|
||||
>
|
||||
<div
|
||||
class="c70"
|
||||
>
|
||||
<div
|
||||
class="c71 c72 c73"
|
||||
>
|
||||
<div
|
||||
class="c68 c69"
|
||||
>
|
||||
<span
|
||||
aria-label="Move cover"
|
||||
class="c74 c75 c76"
|
||||
draggable="true"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.563 5.587a2.503 2.503 0 100-5.007 2.503 2.503 0 000 5.007z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M18.487 3.083c-.012.788-.487 1.513-1.229 1.797a1.954 1.954 0 01-2.184-.574A1.943 1.943 0 0114.9 2.11c.4-.684 1.2-1.066 1.981-.927a1.954 1.954 0 011.606 1.9c.011.748 1.17.748 1.158 0A3.138 3.138 0 0017.565.17c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.284 3.575.678 1.124 1.993 1.674 3.273 1.431 1.432-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.158-.006zM16.563 14.372a2.503 2.503 0 100-5.007 2.503 2.503 0 000 5.007z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M18.487 11.867c-.012.789-.487 1.513-1.229 1.797a1.954 1.954 0 01-2.184-.574 1.943 1.943 0 01-.174-2.196c.4-.684 1.2-1.066 1.981-.927.928.156 1.588.968 1.606 1.9.011.748 1.17.748 1.158 0a3.138 3.138 0 00-2.08-2.914c-1.176-.423-2.567-.029-3.36.933-.83 1.002-.968 2.45-.284 3.575.678 1.124 1.993 1.675 3.273 1.431 1.432-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.158-.005zM16.563 23.392a2.503 2.503 0 100-5.006 2.503 2.503 0 000 5.006z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M18.487 20.89c-.012.787-.487 1.512-1.229 1.796a1.954 1.954 0 01-2.184-.574 1.943 1.943 0 01-.174-2.196c.4-.684 1.2-1.066 1.981-.927.928.156 1.588.967 1.606 1.9.011.748 1.17.748 1.158 0a3.138 3.138 0 00-2.08-2.914c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.284 3.575.678 1.124 1.993 1.674 3.273 1.431 1.432-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.158-.006zM7.378 5.622a2.503 2.503 0 100-5.007 2.503 2.503 0 000 5.007z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M9.302 3.119c-.011.788-.486 1.512-1.228 1.796a1.954 1.954 0 01-2.185-.574 1.943 1.943 0 01-.173-2.196c.4-.684 1.199-1.066 1.981-.927a1.943 1.943 0 011.605 1.9c.012.748 1.17.748 1.16 0A3.138 3.138 0 008.38.205c-1.176-.423-2.567-.029-3.36.933-.83 1.002-.968 2.45-.285 3.575.678 1.124 1.994 1.675 3.274 1.431 1.431-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.159-.005zM7.378 14.406a2.503 2.503 0 100-5.006 2.503 2.503 0 000 5.006z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M9.302 11.902c-.011.788-.486 1.513-1.228 1.797a1.954 1.954 0 01-2.185-.574 1.943 1.943 0 01-.173-2.196c.4-.684 1.199-1.066 1.981-.927a1.943 1.943 0 011.605 1.9c.012.748 1.17.748 1.16 0A3.138 3.138 0 008.38 8.988c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.285 3.575.678 1.124 1.994 1.674 3.274 1.431 1.431-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.159-.006zM7.378 23.427a2.503 2.503 0 100-5.007 2.503 2.503 0 000 5.007z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M9.302 20.924c-.011.788-.486 1.513-1.228 1.797a1.954 1.954 0 01-2.185-.574 1.943 1.943 0 01-.173-2.196c.4-.684 1.199-1.066 1.981-.927.933.156 1.594.967 1.605 1.9.012.748 1.17.748 1.16 0A3.139 3.139 0 008.38 18.01c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.285 3.569.678 1.124 1.994 1.675 3.274 1.431 1.431-.272 2.428-1.593 2.451-3.019.012-.747-1.147-.747-1.159 0z"
|
||||
fill="#212134"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="c24 c77"
|
||||
>
|
||||
michka
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c78 c65"
|
||||
>
|
||||
<button
|
||||
aria-label="Edit cover"
|
||||
class="c75"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
|
||||
fill="#212134"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
aria-label="Delete cover"
|
||||
class="c75"
|
||||
data-testid="delete-cover"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
|
||||
fill="#212134"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c70"
|
||||
>
|
||||
@ -3721,6 +3618,109 @@ exports[`ADMIN | CM | LV | Configure the view should add field 1`] = `
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="c70"
|
||||
>
|
||||
<div
|
||||
class="c71 c72 c73"
|
||||
>
|
||||
<div
|
||||
class="c68 c69"
|
||||
>
|
||||
<span
|
||||
aria-label="Move cover"
|
||||
class="c74 c75 c76"
|
||||
draggable="true"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M16.563 5.587a2.503 2.503 0 100-5.007 2.503 2.503 0 000 5.007z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M18.487 3.083c-.012.788-.487 1.513-1.229 1.797a1.954 1.954 0 01-2.184-.574A1.943 1.943 0 0114.9 2.11c.4-.684 1.2-1.066 1.981-.927a1.954 1.954 0 011.606 1.9c.011.748 1.17.748 1.158 0A3.138 3.138 0 0017.565.17c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.284 3.575.678 1.124 1.993 1.674 3.273 1.431 1.432-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.158-.006zM16.563 14.372a2.503 2.503 0 100-5.007 2.503 2.503 0 000 5.007z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M18.487 11.867c-.012.789-.487 1.513-1.229 1.797a1.954 1.954 0 01-2.184-.574 1.943 1.943 0 01-.174-2.196c.4-.684 1.2-1.066 1.981-.927.928.156 1.588.968 1.606 1.9.011.748 1.17.748 1.158 0a3.138 3.138 0 00-2.08-2.914c-1.176-.423-2.567-.029-3.36.933-.83 1.002-.968 2.45-.284 3.575.678 1.124 1.993 1.675 3.273 1.431 1.432-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.158-.005zM16.563 23.392a2.503 2.503 0 100-5.006 2.503 2.503 0 000 5.006z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M18.487 20.89c-.012.787-.487 1.512-1.229 1.796a1.954 1.954 0 01-2.184-.574 1.943 1.943 0 01-.174-2.196c.4-.684 1.2-1.066 1.981-.927.928.156 1.588.967 1.606 1.9.011.748 1.17.748 1.158 0a3.138 3.138 0 00-2.08-2.914c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.284 3.575.678 1.124 1.993 1.674 3.273 1.431 1.432-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.158-.006zM7.378 5.622a2.503 2.503 0 100-5.007 2.503 2.503 0 000 5.007z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M9.302 3.119c-.011.788-.486 1.512-1.228 1.796a1.954 1.954 0 01-2.185-.574 1.943 1.943 0 01-.173-2.196c.4-.684 1.199-1.066 1.981-.927a1.943 1.943 0 011.605 1.9c.012.748 1.17.748 1.16 0A3.138 3.138 0 008.38.205c-1.176-.423-2.567-.029-3.36.933-.83 1.002-.968 2.45-.285 3.575.678 1.124 1.994 1.675 3.274 1.431 1.431-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.159-.005zM7.378 14.406a2.503 2.503 0 100-5.006 2.503 2.503 0 000 5.006z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M9.302 11.902c-.011.788-.486 1.513-1.228 1.797a1.954 1.954 0 01-2.185-.574 1.943 1.943 0 01-.173-2.196c.4-.684 1.199-1.066 1.981-.927a1.943 1.943 0 011.605 1.9c.012.748 1.17.748 1.16 0A3.138 3.138 0 008.38 8.988c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.285 3.575.678 1.124 1.994 1.674 3.274 1.431 1.431-.272 2.428-1.593 2.451-3.019.012-.753-1.147-.753-1.159-.006zM7.378 23.427a2.503 2.503 0 100-5.007 2.503 2.503 0 000 5.007z"
|
||||
fill="#212134"
|
||||
/>
|
||||
<path
|
||||
d="M9.302 20.924c-.011.788-.486 1.513-1.228 1.797a1.954 1.954 0 01-2.185-.574 1.943 1.943 0 01-.173-2.196c.4-.684 1.199-1.066 1.981-.927.933.156 1.594.967 1.605 1.9.012.748 1.17.748 1.16 0A3.139 3.139 0 008.38 18.01c-1.176-.423-2.567-.03-3.36.933-.83 1.002-.968 2.45-.285 3.569.678 1.124 1.994 1.675 3.274 1.431 1.431-.272 2.428-1.593 2.451-3.019.012-.747-1.147-.747-1.159 0z"
|
||||
fill="#212134"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span
|
||||
class="c24 c77"
|
||||
>
|
||||
michka
|
||||
</span>
|
||||
</div>
|
||||
<div
|
||||
class="c78 c65"
|
||||
>
|
||||
<button
|
||||
aria-label="Edit cover"
|
||||
class="c75"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
clip-rule="evenodd"
|
||||
d="M23.604 3.514c.528.528.528 1.36 0 1.887l-2.622 2.607-4.99-4.99L18.6.396a1.322 1.322 0 011.887 0l3.118 3.118zM0 24v-4.99l14.2-14.2 4.99 4.99L4.99 24H0z"
|
||||
fill="#212134"
|
||||
fill-rule="evenodd"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
aria-label="Delete cover"
|
||||
class="c75"
|
||||
data-testid="delete-cover"
|
||||
type="button"
|
||||
>
|
||||
<svg
|
||||
fill="none"
|
||||
height="1em"
|
||||
viewBox="0 0 24 24"
|
||||
width="1em"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M24 2.417L21.583 0 12 9.583 2.417 0 0 2.417 9.583 12 0 21.583 2.417 24 12 14.417 21.583 24 24 21.583 14.417 12 24 2.417z"
|
||||
fill="#212134"
|
||||
/>
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user