0x1998 - MANAGER

Düzenlenen Dosya: related-items-table.js

import EditMeta from 'related-items-table-edit-meta';
import RowActions from 'related-items-table-row-actions';
import {
	DragDropContext,
	Droppable,
	Draggable
} from 'react-beautiful-dnd';

const {
	Button
} = wp.components;

const {
	Component,
	Fragment
} = wp.element;

class RelatedItemsTable extends Component {

constructor( props ) {
		super( props );
		this.state = {
			reorderedItems: false,
		}
	}

hasMeta() {
		return ( this.props.metaFields && 0 < this.props.metaFields.length );
	}

onDragEnd( result ) {

const fromIndex = result.source.index;
		const toIndex   = result.destination.index;
		const items     = [ ...this.items() ];
		const [ item ]  = items.splice( fromIndex, 1 );

items.splice( toIndex, 0, item );

this.setState( { reorderedItems: items } );
	}

items() {
		return this.state.reorderedItems || this.props.items;
	}

disableOrder() {
		return false === window.JetEngineRelationsCommon.orderMode ? true : false;
	}

render() {

const relatedItemsList = this.items().map( ( item, rIndex ) => {

let row = item.columns.map( ( col, index ) => {
				return ( <td key={ 'col_' + index } dangerouslySetInnerHTML={ { __html: col } }></td> );
			} );

return ( <Draggable
				key={ item._ID }
				draggableId={ item._ID }
				index={ rIndex }
				isDragDisabled={ this.disableOrder() }
			>
				{ ( provided, snapshot ) => (
					<tr
						key={ 'row_' + item._ID }
						ref={ provided.innerRef }
						{ ...provided.draggableProps }
						{ ...provided.dragHandleProps }
						className={ snapshot.isDragging ? 'jet-engine-rels__dragging-row' : '' }
					>
						{ row }
						{ this.hasMeta() && <td className="rel-meta">
							<EditMeta
								{ ...this.props }
								relatedObjectID={ item.related_id }
							/>
						</td> }
						<td>
							<RowActions
								actions={ item.actions }
								relID={ this.props.relID }
								relatedObjectID={ item.related_id }
								relatedObjectType={ this.props.controlObjectType }
								relatedObjectName={ this.props.controlObjectName }
								currentObjectID={ this.props.currentObjectID }
								isParentProcessed={ this.props.isParentProcessed }
								onUpdate={ ( items ) => {
									this.props.onUpdate( items );
								} }
							/>
						</td>
					</tr>
				) }
			</Draggable> );
		} );

const columnsHeadings = this.props.columns.map( ( item ) => {
			return ( <th key={ 'rel-heading-' + item.key } className={ 'rel-' + item.key }>{ item.label }</th> );
		} );

return ( <div className="jet-engine-rels__table-wrap">
			{ false !== this.state.reorderedItems && 0 < this.props.items.length && <div class="jet-engine-rels__was-reordered">
				<a
					href="#"
					className="jet-engine-rels__was-reordered-accept"
					onClick={ ( event ) => {
						event.preventDefault();
						this.props.onReorder( this.state.reorderedItems, () => {
							this.setState( { reorderedItems: false } );
						} );
					} }
				>Save order</a>
				<a
					href="#"
					className="jet-engine-rels__was-reordered-cancel"
					onClick={ ( event ) => {
						event.preventDefault();
						this.setState( { reorderedItems: false } );
					} }
				>Cancel</a>
			</div> }
			<DragDropContext onDragEnd={ ( result ) => {
				this.onDragEnd( result );
			} }>
				<table className="wp-list-table widefat fixed striped table-view-list jet-engine-rels__table">
					<thead>
						<tr>{ columnsHeadings }</tr>
					</thead>
					<Droppable droppableId="relateditems" type="ROWS">
						{ ( provided ) => (
							<tbody
								{ ...provided.droppableProps }
								ref={ provided.innerRef }
							>
								{ 0 < this.props.items.length && relatedItemsList }
								{ ! this.props.items.length && <tr>
									<td colSpan={ this.props.columns.length }>{ '--' }</td>
								</tr> }
								{ provided.placeholder }
							</tbody>
						) }
					</Droppable>
					<tfoot>
						<tr>{ columnsHeadings }</tr>
					</tfoot>
				</table>
			</DragDropContext>
		</div> );
	}

}

export default RelatedItemsTable;

geri dön