webstudio/ui/src/features/create_trigger/presentation/create_trigger_screen.tsx
2023-12-28 17:18:12 +03:00

75 lines
2.7 KiB
TypeScript

import * as React from "react";
import { Button, Col, Row, Switch, Typography, Input } from "antd";
import { CodeTriggerForm } from "./components/code_trigger_form";
import { observer } from "mobx-react-lite";
import { FileTriggerForm } from "./components/file_trigger_form";
import { ReactComponent as DeleteIcon } from "../../../core/assets/icons/delete.svg";
import { Loader } from "../../../core/ui/loader/loader";
import { TriggerRepository } from "../data/trigger_repository";
import { TriggerStore } from "./trigger_store";
import { TriggerViewModel } from "../model/trigger_form_view_model";
import { CallBackStringVoidFunction } from "../../../core/extensions/extensions";
const { Title } = Typography;
const Bottom = observer((props: { triggers: TriggerViewModel[]; callBack: CallBackStringVoidFunction }) => {
return (
<Col>
{props.triggers.map((el) => {
return (
<Row
style={{
justifyContent: "center",
}}
>
{el.value}
<DeleteIcon onClick={() => props.callBack(el.id)} />
</Row>
);
})}
</Col>
);
});
export const CreateTriggerScreenPath = "/create/trigger";
export const TriggerScreen: React.FunctionComponent = observer(() => {
const [triggerStore] = React.useState(() => new TriggerStore(new TriggerRepository()));
return (
<>
<main>
{!triggerStore.isLoading ? (
<>
<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>
<Input placeholder="trigger description" onChange={() => triggerStore.changeTriggerDescription} />
{triggerStore.getTriggerType() ? (
<>
<FileTriggerForm pushTrigger={triggerStore.pushTrigger} />
</>
) : (
<>
<CodeTriggerForm
codeTriggerValue={triggerStore.codeTriggerValue}
clearTriggerCode={triggerStore.clearTriggerCode}
saveCode={triggerStore.saveCode}
writeNewTrigger={triggerStore.writeNewTrigger}
/>
</>
)}
<Bottom triggers={triggerStore.triggers} callBack={triggerStore.deleteItem} />
</>
) : (
<>
<Loader />
</>
)}
</main>
</>
);
});