73 lines
2.1 KiB
TypeScript
73 lines
2.1 KiB
TypeScript
import React, { useRef } from 'react';
|
|
import styled from "styled-components";
|
|
import { Button } from "@mui/material";
|
|
import * as Settings from "./action-settings";
|
|
import { useSocketStore } from "../../context/socket";
|
|
|
|
interface ActionSettingsProps {
|
|
action: string;
|
|
darkMode?: boolean;
|
|
}
|
|
|
|
export const ActionSettings = ({ action, darkMode = false }: ActionSettingsProps) => {
|
|
const settingsRef = useRef<{ getSettings: () => object }>(null);
|
|
const { socket } = useSocketStore();
|
|
|
|
const DisplaySettings = () => {
|
|
switch (action) {
|
|
case "screenshot":
|
|
return <Settings.ScreenshotSettings ref={settingsRef} />;
|
|
case 'scroll':
|
|
return <Settings.ScrollSettings ref={settingsRef} />;
|
|
case 'scrape':
|
|
return <Settings.ScrapeSettings ref={settingsRef} />;
|
|
case 'scrapeSchema':
|
|
return <Settings.ScrapeSchemaSettings ref={settingsRef} />;
|
|
default:
|
|
return null;
|
|
}
|
|
};
|
|
|
|
const handleSubmit = (event: React.SyntheticEvent) => {
|
|
event.preventDefault();
|
|
const settings = settingsRef.current?.getSettings();
|
|
socket?.emit(`action`, {
|
|
action,
|
|
settings
|
|
});
|
|
};
|
|
|
|
return (
|
|
<div>
|
|
<ActionSettingsWrapper action={action} darkMode={darkMode}>
|
|
<form onSubmit={handleSubmit}>
|
|
<DisplaySettings />
|
|
<Button
|
|
variant="outlined"
|
|
type="submit"
|
|
sx={{
|
|
display: "table-cell",
|
|
float: "right",
|
|
marginRight: "15px",
|
|
marginTop: "20px",
|
|
}}
|
|
>
|
|
Add Action
|
|
</Button>
|
|
</form>
|
|
</ActionSettingsWrapper>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
// Ensure that the Wrapper accepts the darkMode prop for styling adjustments.
|
|
const ActionSettingsWrapper = styled.div<{ action: string; darkMode: boolean }>`
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: ${({ action }) => (action === 'script' ? 'stretch' : 'center')};
|
|
justify-content: center;
|
|
margin-top: 20px;
|
|
background-color: ${({ darkMode }) => (darkMode ? '#1E1E1E' : 'white')};
|
|
color: ${({ darkMode }) => (darkMode ? 'white' : 'black')};
|
|
`;
|