feat: screenshot action

src/components/molecules/action-settings/screenshot.tsx

@@ -0,0 +1,126 @@
+import React, { forwardRef, useImperativeHandle } from 'react';
+import { InputLabel, MenuItem, TextField, Select, FormControl } from "@mui/material";
+import { ScreenshotSettings as Settings } from "../../../shared/types";
+import styled from "styled-components";
+import { SelectChangeEvent } from "@mui/material/Select/Select";
+import { Dropdown } from "../../atoms/DropdownMui";
+
+export const ScreenshotSettings = forwardRef((props, ref) => {
+  const [settings, setSettings] = React.useState<Settings>({ });
+  useImperativeHandle(ref, () => ({
+    getSettings() {
+      return settings;
+    }
+  }));
+
+  const handleInput = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const { id, value, type } = event.target;
+    let parsedValue: any = value;
+    if (type === "number") {
+      parsedValue = parseInt(value);
+    };
+    setSettings({
+      ...settings,
+      [id]: parsedValue,
+    });
+  };
+
+  const handleSelect = (event: SelectChangeEvent) => {
+    const { name, value } = event.target;
+    let parsedValue: any = value;
+    if (value === "true" || value === "false") {
+      parsedValue = value === "true";
+    };
+    setSettings({
+      ...settings,
+      [name]: parsedValue,
+    });
+  };
+
+  return (
+    <SettingsWrapper>
+      <Dropdown
+        id="type"
+        label="type"
+        value={settings.type || "png"}
+        handleSelect={handleSelect}
+      >
+        <MenuItem value="jpeg">jpeg</MenuItem>
+        <MenuItem value="png">png</MenuItem>
+      </Dropdown>
+      { settings.type === "jpeg" ?
+        <TextField
+          type="number"
+          id="quality"
+          label="quality"
+          size='small'
+          InputProps={{ inputProps: { min: 0, max: 100 } }}
+          onChange={handleInput}
+        /> : null
+      }
+      <TextField
+        type="number"
+        id = "timeout"
+        label="timeout"
+        size='small'
+        onChange={handleInput}
+        defaultValue='30000'
+      />
+      <Dropdown
+        id="animations"
+        label="animations"
+        value={settings.animations || 'allow'}
+        handleSelect={handleSelect}
+      >
+        <MenuItem value="disabled">disabled</MenuItem>
+        <MenuItem value="allow">allow</MenuItem>
+      </Dropdown>
+      { settings.type === "png" ?
+        <Dropdown
+          id="omitBackground"
+          label="omitBackground"
+          value={settings.omitBackground?.toString() || "false"}
+          handleSelect={handleSelect}
+        >
+          <MenuItem value="true">true</MenuItem>
+          <MenuItem value="false">false</MenuItem>
+        </Dropdown>
+        : null
+      }
+      <Dropdown
+        id="caret"
+        label="caret"
+        value={settings.caret || "hide"}
+        handleSelect={handleSelect}
+      >
+        <MenuItem value="hide">hide</MenuItem>
+        <MenuItem value="initial">initial</MenuItem>
+      </Dropdown>
+      <Dropdown
+        id="fullPage"
+        label="fullPage"
+        value={settings.fullPage?.toString() || "false"}
+        handleSelect={handleSelect}
+      >
+        <MenuItem value="true">true</MenuItem>
+        <MenuItem value="false">false</MenuItem>
+      </Dropdown>
+      <Dropdown
+        id="scale"
+        label="scale"
+        value={settings.scale || "device"}
+        handleSelect={handleSelect}
+      >
+        <MenuItem value="css">css</MenuItem>
+        <MenuItem value="device">device</MenuItem>
+      </Dropdown>
+    </SettingsWrapper>
+  );
+});
+
+const SettingsWrapper = styled.div`
+  margin-left: 15px;
+  * {
+    margin-bottom: 10px;
+  }
+`;