2575c5d448
* Add ordering Icons * Refactor doCollectionEdit - It required claims as parameter, when only uris are used to populate the collection, so that was changed to pass down the uris instead. - There were unused and mostly unnecessary functions inside, for example the parameter claimIds was never used so it would never enter the claimSearch function which again would be used to generate uris, so it's better to just use uris as parameter * Add List Reordering changes * Add toggle button for list editing * Add toggle on content page collection sidebar * Enable drag-n-drop to re-order list items https://www.youtube.com/watch?v=aYZRRyukuIw * Allow removing all unavailable claims from a List * Fix <g> on icons * Fix section buttons positioning * Move preventDefault and stopPropagation to buttons div instead of each button, preventing clicking even if disabled opening the claim * Change dragging cursor * Fix sizing * Fix dragging component * Restrict dragging to vertical axis * Ignore shuffle state for ordering * Fix console errors * Mobile fixes * Fix sidebar spacing * Fix grey on mobile after click
92 lines
3.2 KiB
JavaScript
92 lines
3.2 KiB
JavaScript
// @flow
|
|
import * as ICONS from 'constants/icons';
|
|
import Button from 'component/button';
|
|
import Icon from 'component/common/icon';
|
|
import React from 'react';
|
|
|
|
type Props = {
|
|
collectionIndex?: number,
|
|
collectionUris: Array<Collection>,
|
|
dragHandleProps?: any,
|
|
uri: string,
|
|
editCollection: (CollectionEditParams) => void,
|
|
};
|
|
|
|
export default function CollectionButtons(props: Props) {
|
|
const { collectionIndex: foundIndex, collectionUris, dragHandleProps, uri, editCollection } = props;
|
|
|
|
const [confirmDelete, setConfirmDelete] = React.useState(false);
|
|
|
|
const lastCollectionIndex = collectionUris ? collectionUris.length - 1 : 0;
|
|
const collectionIndex = Number(foundIndex);
|
|
|
|
const orderButton = (className: string, title: string, icon: string, disabled: boolean, handleClick?: () => void) => (
|
|
<Button
|
|
className={`button-collection-manage ${className}`}
|
|
icon={icon}
|
|
title={title}
|
|
disabled={disabled}
|
|
onClick={() => handleClick && handleClick()}
|
|
/>
|
|
);
|
|
|
|
return (
|
|
<div
|
|
className="collection-preview__edit-buttons"
|
|
onClick={(e) => {
|
|
e.preventDefault();
|
|
e.stopPropagation();
|
|
}}
|
|
>
|
|
<div className="collection-preview__edit-group" {...dragHandleProps}>
|
|
<div className="button-collection-manage button-collection-drag top-left bottom-left">
|
|
<Icon icon={ICONS.DRAG} title={__('Drag')} size={20} />
|
|
</div>
|
|
</div>
|
|
|
|
<div className="collection-preview__edit-group">
|
|
{orderButton('', __('Move Top'), ICONS.UP_TOP, collectionIndex === 0, () =>
|
|
editCollection({ order: { from: collectionIndex, to: 0 } })
|
|
)}
|
|
|
|
{orderButton('', __('Move Bottom'), ICONS.DOWN_BOTTOM, collectionIndex === lastCollectionIndex, () =>
|
|
editCollection({ order: { from: collectionIndex, to: lastCollectionIndex } })
|
|
)}
|
|
</div>
|
|
|
|
<div className="collection-preview__edit-group">
|
|
{orderButton('', __('Move Up'), ICONS.UP, collectionIndex === 0, () =>
|
|
editCollection({ order: { from: collectionIndex, to: collectionIndex - 1 } })
|
|
)}
|
|
|
|
{orderButton('', __('Move Down'), ICONS.DOWN, collectionIndex === lastCollectionIndex, () =>
|
|
editCollection({ order: { from: collectionIndex, to: collectionIndex + 1 } })
|
|
)}
|
|
</div>
|
|
|
|
{!confirmDelete ? (
|
|
<div className="collection-preview__edit-group collection-preview__delete ">
|
|
<Button
|
|
className="button-collection-manage button-collection-delete top-right bottom-right"
|
|
icon={ICONS.DELETE}
|
|
title={__('Remove')}
|
|
onClick={() => setConfirmDelete(true)}
|
|
/>
|
|
</div>
|
|
) : (
|
|
<div className="collection-preview__edit-group collection-preview__delete">
|
|
<Button
|
|
className="button-collection-manage button-collection-delete-cancel top-right"
|
|
icon={ICONS.REMOVE}
|
|
title={__('Cancel')}
|
|
onClick={() => setConfirmDelete(false)}
|
|
/>
|
|
|
|
{orderButton('button-collection-delete-confirm bottom-right', __('Remove'), ICONS.DELETE, false, () =>
|
|
editCollection({ uris: [uri], remove: true })
|
|
)}
|
|
</div>
|
|
)}
|
|
</div>
|
|
);
|
|
}
|