Update Item.tsx
This commit is contained in:
parent
9c6c7eec47
commit
25a58acb17
1 changed files with 29 additions and 13 deletions
|
@ -1,9 +1,10 @@
|
||||||
import React, { memo } from "react";
|
import React, { memo } from "react";
|
||||||
import { PlanItem, itemId } from "./state";
|
import { PlanItem, itemId } from "./state";
|
||||||
import { Track, AuxItem } from "../api";
|
import { Track, AuxItem } from "../api";
|
||||||
import { useSelector } from "react-redux";
|
import { useDispatch, useSelector } from "react-redux";
|
||||||
import { RootState } from "../rootReducer";
|
import { RootState } from "../rootReducer";
|
||||||
|
|
||||||
|
import * as MixerState from "../mixer/state";
|
||||||
import { Draggable } from "react-beautiful-dnd";
|
import { Draggable } from "react-beautiful-dnd";
|
||||||
import { ContextMenuTrigger } from "react-contextmenu";
|
import { ContextMenuTrigger } from "react-contextmenu";
|
||||||
import "./item.scss";
|
import "./item.scss";
|
||||||
|
@ -20,6 +21,7 @@ export const Item = memo(function Item({
|
||||||
index: number;
|
index: number;
|
||||||
column: number;
|
column: number;
|
||||||
}) {
|
}) {
|
||||||
|
const dispatch = useDispatch();
|
||||||
const id = itemId(x);
|
const id = itemId(x);
|
||||||
const isReal = "timeslotitemid" in x;
|
const isReal = "timeslotitemid" in x;
|
||||||
const isGhost = "ghostid" in x;
|
const isGhost = "ghostid" in x;
|
||||||
|
@ -34,20 +36,33 @@ export const Item = memo(function Item({
|
||||||
|
|
||||||
const isLoaded = loadedItem !== null ? itemId(loadedItem) === id : false;
|
const isLoaded = loadedItem !== null ? itemId(loadedItem) === id : false;
|
||||||
|
|
||||||
|
const showDebug = useSelector(
|
||||||
|
(state: RootState) => state.settings.showDebugInfo
|
||||||
|
);
|
||||||
|
|
||||||
function triggerClick() {
|
function triggerClick() {
|
||||||
if (column > -1) {
|
if (column > -1) {
|
||||||
sendBAPSicleChannel({
|
|
||||||
channel: column,
|
|
||||||
command: "LOAD",
|
|
||||||
weight: index,
|
|
||||||
});
|
|
||||||
console.log("Clicking to load:", x);
|
console.log("Clicking to load:", x);
|
||||||
//dispatch(MixerState.load(column, x));
|
|
||||||
|
if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
|
||||||
|
sendBAPSicleChannel({
|
||||||
|
channel: column,
|
||||||
|
command: "LOAD",
|
||||||
|
weight: index,
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
dispatch(MixerState.load(column, x));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
let isDragDisabled = isGhost;
|
||||||
|
|
||||||
|
if (process.env.REACT_APP_BAPSICLE_INTERFACE) {
|
||||||
|
isDragDisabled = isDragDisabled || isLoaded;
|
||||||
|
}
|
||||||
return (
|
return (
|
||||||
<Draggable draggableId={id} index={index} isDragDisabled={isGhost}>
|
<Draggable draggableId={id} index={index} isDragDisabled={isDragDisabled}>
|
||||||
{(provided, snapshot) => (
|
{(provided, snapshot) => (
|
||||||
<div
|
<div
|
||||||
ref={provided.innerRef}
|
ref={provided.innerRef}
|
||||||
|
@ -67,7 +82,7 @@ export const Item = memo(function Item({
|
||||||
id={isReal ? TS_ITEM_MENU_ID : ""}
|
id={isReal ? TS_ITEM_MENU_ID : ""}
|
||||||
collect={() => ({ id, column, index })}
|
collect={() => ({ id, column, index })}
|
||||||
>
|
>
|
||||||
<span className={"icon " + x.type}></span>
|
<span className={"icon " + x.type} />
|
||||||
|
|
||||||
{"play_count" in x && (
|
{"play_count" in x && (
|
||||||
<>
|
<>
|
||||||
|
@ -87,10 +102,11 @@ export const Item = memo(function Item({
|
||||||
>
|
>
|
||||||
Explicit
|
Explicit
|
||||||
</small>
|
</small>
|
||||||
<code>
|
{showDebug && (
|
||||||
{"weight" in x && x.weight} {index}{" "}
|
<code>
|
||||||
{"weight" in x && x.weight !== index && "!!!!!!!!!!!"}
|
{itemId(x)} {"channel" in x && x.channel + "/" + x.weight}
|
||||||
</code>
|
</code>
|
||||||
|
)}
|
||||||
</ContextMenuTrigger>
|
</ContextMenuTrigger>
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
|
Loading…
Reference in a new issue