67 lines
1.7 KiB
TypeScript
67 lines
1.7 KiB
TypeScript
|
import * as React from "react";
|
||
|
|
import { Button, Col, Row, Switch, Typography } from "antd";
|
||
|
|
import { CodeTriggerForm } from "./components/code_trigger_form";
|
||
|
|
import { observer } from "mobx-react-lite";
|
||
|
|
import { triggerStore } from "./logic/trigger_store";
|
||
|
|
import { FileTriggerForm } from "./components/file_trigger_form";
|
||
|
|
import { ReactComponent as DeleteIcon } from "../../../assets/icons/delete.svg";
|
||
|
|
|
||
|
|
const { Title } = Typography;
|
||
|
|
|
||
|
|
const Header = observer(() => {
|
||
|
|
return (
|
||
|
|
<Row style={{ justifyItems: "center", alignItems: "center" }}>
|
||
|
|
<div style={{ height: "37px" }}>
|
||
|
|
<Switch
|
||
|
|
checked={triggerStore.getTriggerType()}
|
||
|
|
onChange={() => triggerStore.setTriggerType()}
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<Title level={2}>
|
||
|
|
Trigger editor: {triggerStore.getTriggerDescription()}
|
||
|
|
</Title>
|
||
|
|
<div style={{ width: "10px" }}></div>
|
||
|
|
<Button onClick={() => triggerStore.saveResult()}>Save result</Button>
|
||
|
|
</Row>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
const Bottom = observer(() => {
|
||
|
|
return (
|
||
|
|
<Col>
|
||
|
|
{triggerStore.triggers.map((el) => {
|
||
|
|
return (
|
||
|
|
<Row
|
||
|
|
style={{
|
||
|
|
justifyContent: "center",
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{el.value}
|
||
|
|
<DeleteIcon onClick={() => triggerStore.deleteItem(el.id)} />
|
||
|
|
</Row>
|
||
|
|
);
|
||
|
|
})}
|
||
|
|
</Col>
|
||
|
|
);
|
||
|
|
});
|
||
|
|
|
||
|
|
export const TriggerScreen: React.FunctionComponent = observer(() => {
|
||
|
|
return (
|
||
|
|
<>
|
||
|
|
<main className="test">
|
||
|
|
<Header />,
|
||
|
|
{triggerStore.getTriggerType() ? (
|
||
|
|
<>
|
||
|
|
<FileTriggerForm />
|
||
|
|
</>
|
||
|
|
) : (
|
||
|
|
<>
|
||
|
|
<CodeTriggerForm />
|
||
|
|
</>
|
||
|
|
)}
|
||
|
|
<Bottom />
|
||
|
|
</main>
|
||
|
|
</>
|
||
|
|
);
|
||
|
|
});
|