WordFence

🏠 Root / home / artorgp / www / wp-content / plugins / visual-portfolio / gutenberg / components / sortable-control /

Editing: index.js

import './style.scss';

import {
	closestCenter,
	DndContext,
	PointerSensor,
	useSensor,
	useSensors,
} from '@dnd-kit/core';
import {
	arrayMove,
	SortableContext,
	useSortable,
	verticalListSortingStrategy,
} from '@dnd-kit/sortable';
import { CSS } from '@dnd-kit/utilities';
import classnames from 'classnames/dedupe';

import { Button } from '@wordpress/components';
import { Component } from '@wordpress/element';

const SortableItem = function ( { id, element, sourceOptions, items, props } ) {
	const { allowDisablingOptions, onChange } = props;

const {
		attributes,
		listeners,
		setNodeRef,
		transform,
		transition,
		isDragging,
		isSorting,
	} = useSortable( {
		id,
	} );

const style = {
		transform: CSS.Translate.toString( transform ),
		transition: isSorting ? transition : '',
	};

const SortableList = function ( {
	items,
	sourceOptions,
	classes,
	onSortEnd,
	props,
} ) {
	const sensors = useSensors( useSensor( PointerSensor ) );

return (
		<ul className={ classes }>
			<DndContext
				sensors={ sensors }
				collisionDetection={ closestCenter }
				onDragEnd={ ( event ) => {
					const { active, over } = event;

if ( active.id !== over.id ) {
						onSortEnd(
							items.indexOf( active.id ),
							items.indexOf( over.id )
						);
					}
				} }
			>
				<SortableContext
					items={ items }
					strategy={ verticalListSortingStrategy }
				>
					{ items.map( ( value ) => (
						<SortableItem
							key={ `item-${ value }` }
							id={ value }
							element={ value }
							sourceOptions={ sourceOptions }
							props={ props }
							items={ items }
						/>
					) ) }
				</SortableContext>
			</DndContext>
		</ul>
	);
};

/**
 * Component Class
 */
export default class SortableControl extends Component {
	render() {
		const { options, defaultOptions, allowDisablingOptions, onChange } =
			this.props;

let { value } = this.props;

if ( typeof value === 'undefined' ) {
			value = typeof defaultOptions !== 'undefined' ? defaultOptions : [];
		}

const disabledOptions = Object.keys( options ).filter(
			( findValue ) => ! value.includes( findValue )
		);
		const classes = classnames(
			'vpf-component-sortable',
			disabledOptions.length > 0
				? 'vpf-dragging-has-disabled-options'
				: ''
		);

return (
			<div>
				<SortableList
					items={ value }
					sourceOptions={ options }
					classes={ classes }
					props={ this.props }
					onSortEnd={ ( oldIndex, newIndex ) => {
						const updateValue = arrayMove(
							value,
							oldIndex,
							newIndex
						);
						onChange( updateValue );
					} }
				/>
				{ disabledOptions.length > 0 ? (
					<ul className="vpf-component-sortable-disabled">
						{ disabledOptions.map( ( el ) => (
							<li key={ `disabled-item-${ el }` }>
								{ allowDisablingOptions ? (
									<Button
										className="vpf-component-sortable-add"
										onClick={ () => {
											const updateValue = [ ...value ];

updateValue.push( el );

onChange( updateValue );
										} }
									>
										<svg
											xmlns="http://www.w3.org/2000/svg"
											fill="none"
											viewBox="0 0 24 24"
											stroke="currentColor"
											strokeWidth="2"
										>
											<path
												strokeLinecap="round"
												strokeLinejoin="round"
												d="M12 4v16m8-8H4"
											/>
										</svg>
									</Button>
								) : null }
								{ options[ el ] }
							</li>
						) ) }
					</ul>
				) : null }
			</div>
		);
	}
}