File manager - Edit - /home/matthif/www/wp-content/plugins/visual-portfolio/gutenberg/components/sortable-control/index.js
Back
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 label = sourceOptions[element]; return ( <li className={classnames( 'vpf-component-sortable-item', isDragging ? 'vpf-component-sortable-item-dragging' : '' )} ref={setNodeRef} style={style} > <span {...attributes} {...listeners}> <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" > <path d="M10 4.99976H8V6.99976H10V4.99976Z" fill="currentColor" /> <path d="M10 10.9998H8V12.9998H10V10.9998Z" fill="currentColor" /> <path d="M10 16.9998H8V18.9998H10V16.9998Z" fill="currentColor" /> <path d="M16 4.99976H14V6.99976H16V4.99976Z" fill="currentColor" /> <path d="M16 10.9998H14V12.9998H16V10.9998Z" fill="currentColor" /> <path d="M16 16.9998H14V18.9998H16V16.9998Z" fill="currentColor" /> </svg> </span> {label} {allowDisablingOptions ? ( <Button className="vpf-component-sortable-delete" onClick={() => { const updateValue = [...items]; const findIndex = items.indexOf(element); updateValue.splice(findIndex, 1); 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="M20 12H4" /> </svg> </Button> ) : null} </li> ); }; 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> ); } }
| ver. 1.4 |
Github
|
.
| PHP 5.4.45 | Generation time: 0 |
proxy
|
phpinfo
|
Settings