86 lines
3.4 KiB
TypeScript
86 lines
3.4 KiB
TypeScript
import * as React from "react";
|
|
import { connect } from "react-redux";
|
|
import { StepButtonCluster } from "./step_button_cluster";
|
|
import { SequenceEditorMiddle } from "./sequence_editor_middle";
|
|
import { Page, Row, LeftPanel, CenterPanel, RightPanel } from "../ui";
|
|
import { Props } from "./interfaces";
|
|
import { mapStateToProps } from "./state_to_props";
|
|
import { ToolTips } from "../constants";
|
|
import { isTaggedSequence } from "../resources/tagged_resources";
|
|
import { setActiveSequenceByName } from "./set_active_sequence_by_name";
|
|
import { t } from "../i18next_wrapper";
|
|
import { unselectSequence, closeCommandMenu } from "./actions";
|
|
import { isNumber } from "lodash";
|
|
import { Folders } from "../folders/component";
|
|
|
|
export interface SequenceBackButtonProps {
|
|
dispatch: Function;
|
|
className: string;
|
|
}
|
|
|
|
export const SequenceBackButton = (props: SequenceBackButtonProps) => {
|
|
const insertingStep = props.className.includes("inserting-step");
|
|
return <i
|
|
className={`back-to-sequences fa fa-arrow-left ${props.className}`}
|
|
onClick={() => props.dispatch(
|
|
insertingStep ? closeCommandMenu() : unselectSequence())}
|
|
title={insertingStep ? t("back to sequence") : t("back to sequences")} />;
|
|
};
|
|
|
|
export class RawSequences extends React.Component<Props, {}> {
|
|
componentDidMount() {
|
|
if (!this.props.sequence) { setActiveSequenceByName(); }
|
|
}
|
|
|
|
render() {
|
|
const { sequence } = this.props;
|
|
const sequenceSelected = sequence && isTaggedSequence(sequence);
|
|
const sequenceOpen = sequenceSelected ? "open" : "";
|
|
const insertingStep = isNumber(this.props.stepIndex) ? "inserting-step" : "";
|
|
const activeClasses = [sequenceOpen, insertingStep].join(" ");
|
|
return <Page className="sequence-page">
|
|
<Row>
|
|
<LeftPanel
|
|
className={`sequence-list-panel ${activeClasses}`}
|
|
title={t("Sequences")}>
|
|
<Folders {...this.props.folderData} dispatch={this.props.dispatch} />
|
|
</LeftPanel>
|
|
<CenterPanel
|
|
className={`sequence-editor-panel ${activeClasses}`}
|
|
backButton={<SequenceBackButton
|
|
className={activeClasses}
|
|
dispatch={this.props.dispatch} />}
|
|
title={sequenceOpen ? t("Edit Sequence") : t("Sequence Editor")}
|
|
helpText={t(ToolTips.SEQUENCE_EDITOR)}>
|
|
<SequenceEditorMiddle
|
|
syncStatus={this.props.syncStatus}
|
|
dispatch={this.props.dispatch}
|
|
sequence={this.props.sequence}
|
|
resources={this.props.resources}
|
|
hardwareFlags={this.props.hardwareFlags}
|
|
farmwareData={this.props.farmwareData}
|
|
shouldDisplay={this.props.shouldDisplay}
|
|
getWebAppConfigValue={this.props.getWebAppConfigValue}
|
|
menuOpen={this.props.menuOpen} />
|
|
</CenterPanel>
|
|
<RightPanel
|
|
className={`step-button-cluster-panel ${activeClasses}`}
|
|
backButton={<SequenceBackButton
|
|
className={activeClasses}
|
|
dispatch={this.props.dispatch} />}
|
|
title={insertingStep ? t("Add Command") : t("Commands")}
|
|
helpText={t(ToolTips.SEQUENCE_COMMANDS)}
|
|
show={sequenceSelected}>
|
|
<StepButtonCluster
|
|
current={this.props.sequence}
|
|
dispatch={this.props.dispatch}
|
|
shouldDisplay={this.props.shouldDisplay}
|
|
stepIndex={this.props.stepIndex} />
|
|
</RightPanel>
|
|
</Row>
|
|
</Page>;
|
|
}
|
|
}
|
|
|
|
export const Sequences = connect(mapStateToProps)(RawSequences);
|