import React from "react";
import {
BlurableInput,
EmptyStateWrapper,
EmptyStateGraphic,
ColorPicker,
} from "../ui";
import {
FolderUnion,
FolderItemProps,
FolderNodeProps,
FolderProps,
FolderState,
AddFolderBtn,
AddSequenceProps,
ToggleFolderBtnProps,
FolderNodeState,
FolderPanelTopProps,
SequenceDropAreaProps,
FolderButtonClusterProps,
FolderNameInputProps,
SequenceDropAreaState,
} from "./interfaces";
import {
createFolder,
deleteFolder,
setFolderName,
toggleFolderOpenState,
toggleFolderEditState,
toggleAll,
updateSearchTerm,
addNewSequenceToFolder,
moveSequence,
setFolderColor,
dropSequence,
sequenceEditMaybeSave,
} from "./actions";
import { Link } from "../link";
import { urlFriendly, lastUrlChunk } from "../util";
import {
setActiveSequenceByName,
} from "../sequences/set_active_sequence_by_name";
import { Popover } from "@blueprintjs/core";
import { t } from "../i18next_wrapper";
import { Content } from "../constants";
import { StepDragger, NULL_DRAGGER_ID } from "../draggable/step_dragger";
import { variableList } from "../sequences/locals_list/variable_support";
import { UUID } from "../resources/interfaces";
import { SearchField } from "../ui/search_field";
export const FolderListItem = (props: FolderItemProps) => {
const { sequence, movedSequenceUuid } = props;
const seqName = sequence.body.name;
const url = `/app/sequences/${urlFriendly(seqName) || ""}`;
const moveSource = movedSequenceUuid === sequence.uuid ? "move-source" : "";
const nameWithSaveIndicator = seqName + (sequence.specialStatus ? "*" : "");
const active = lastUrlChunk() === urlFriendly(seqName) ? "active" : "";
return
sequenceEditMaybeSave(sequence, { color })} />
{nameWithSaveIndicator}
{props.inUse &&
}
props.startSequenceMove(sequence.uuid)}
onMouseUp={() => props.toggleSequenceMove(sequence.uuid)} />
;
};
const ToggleFolderBtn = (props: ToggleFolderBtnProps) => {
return ;
};
const AddFolderBtn = ({ folder, close }: AddFolderBtn) => {
return ;
};
const AddSequenceBtn = ({ folderId, close }: AddSequenceProps) => {
return ;
};
export const FolderButtonCluster =
({ node, close }: FolderButtonClusterProps) => {
return
{node.kind !== "terminal" &&
}
;
};
export const FolderNameInput = ({ node }: FolderNameInputProps) =>
{
setFolderName(node.id, e.currentTarget.value);
toggleFolderEditState(node.id);
}} />
;
export class FolderNameEditor
extends React.Component {
state: FolderNodeState = { settingsOpen: false };
close = () => this.setState({ settingsOpen: false });
render() {
const { node } = this.props;
const settingsOpenClass = this.state.settingsOpen ? "open" : "";
return
toggleFolderOpenState(node.id)} />
setFolderColor(node.id, color)} />
{node.editing
?
:
{node.name}
}
this.setState({ settingsOpen: !this.state.settingsOpen })} />
;
}
}
const FolderNode = (props: FolderNodeProps) => {
const { node, sequences } = props;
const sequenceItems = node.content.map(seqUuid =>
);
const childFolders: FolderUnion[] = node.children || [];
const folderNodes = childFolders.map(folder =>
);
return
{!!node.open &&
}
{!!node.open && folderNodes}
;
};
export class SequenceDropArea
extends React.Component {
state: SequenceDropAreaState = { hovered: false };
render() {
const { dropAreaVisible, folderId, onMoveEnd, folderName } = this.props;
const visible = dropAreaVisible ? "visible" : "";
const hovered = this.state.hovered ? "hovered" : "";
return onMoveEnd(folderId)}
onDrop={e => {
this.setState({ hovered: false });
dropSequence(folderId)(e);
this.props.toggleSequenceMove();
}}
onDragOver={e => e.preventDefault()}
onDragEnter={() => this.setState({ hovered: true })}
onDragLeave={() => this.setState({ hovered: false })}>
{folderId
? `${t("Move into")} ${folderName}`
: t("Move out of folders")}
;
}
}
export class Folders extends React.Component {
state: FolderState = { toggleDirection: false };
Graph = () => {
return
{this.props.rootFolder.folders.map(grandparent => {
return ;
})}
;
}
toggleAll = () => {
toggleAll(this.state.toggleDirection);
this.setState({ toggleDirection: !this.state.toggleDirection });
}
startSequenceMove = (seqUuid: UUID) => this.setState({
movedSequenceUuid: seqUuid,
stashedUuid: this.state.movedSequenceUuid,
})
toggleSequenceMove = (seqUuid?: UUID) => this.setState({
movedSequenceUuid: this.state.stashedUuid ? undefined : seqUuid,
})
endSequenceMove = (folderId: number) => {
moveSequence(this.state.movedSequenceUuid || "", folderId);
this.setState({ movedSequenceUuid: undefined });
}
rootSequences = () => this.props.rootFolder.noFolder.map(seqUuid =>
);
render() {
return
0
|| this.props.rootFolder.folders.length > 0}
graphic={EmptyStateGraphic.sequences}
title={t("No Sequences.")}
text={Content.NO_SEQUENCES}>
;
}
}
export const FolderPanelTop = (props: FolderPanelTopProps) =>
;