import * as React from "react"; import { Formik, Form, Field, FieldArray } from "formik"; import styled from "styled-components"; import { IMockResponse, IMockResponseRaw } from "../../../interface/mock"; import { IMethod } from "../../../interface/network"; import MultiSelect from "../../../components/multiselect"; import { getNetworkMethodList } from "../../../services/constants"; import { isValidJSON, getError } from "../../../services/helper"; import { Button, Icon } from "../../../components/atoms"; import Tabs from "../../../components/tabs"; import JSONEditor from "../../../components/JSONEditor"; import MockForm from "../../../components/mockForm"; const Wrapper = styled("div")` height: 100%; overflow: auto; `; const Label = styled("label")` margin-bottom: 4px; font-weight: 700; `; const StyledTabs = styled(Tabs)` margin-left: 4px; div { padding: 4px 8px; } `; const Input = styled(Field)<{ small?: boolean }>` height: 25px; border: 1px solid ${({ theme }) => theme.colors.border}; border-radius: 4px; border-style: solid; ${({ small }) => small && `width: 124px;`}; `; const FieldWrapper = styled("div")` display: flex; flex-direction: column; flex-grow: 2; `; const Group = styled.div` display: flex; align-items: center; margin-bottom: 8px; ${FieldWrapper}:not(:last-child) { margin-right: 16px; } `; const Actions = styled.div``; const StyledForm = styled(Form)` padding: 8px 16px; width: 656px; `; const Error = styled("p")` color: ${({ theme }) => theme.colors.alert} !important; height: 16px; margin-bottom: 8px; `; const HeaderWrapper = styled.div` display: flex; align-items: center; margin-bottom: 8px; ${Input} { margin-right: 4px; flex-grow: 2; &:first-child { flex-grow: 1; } } width: 100%; `; interface IProps { mock?: IMockResponseRaw; changeRoute: (route: string) => void; onAction: ( action: "add" | "delete" | "edit" | "clear", mock: IMockResponse | void ) => void; } const Create = (props: IProps) => { const componentProps = props; return ( <Wrapper> <MockForm jsonEditor={{ className: "flex-grow" }} mock={componentProps.mock} onSubmit={(values) => { componentProps.onAction(componentProps?.mock?.id ? "edit" : "add", { id: -1, createdOn: new Date().getTime(), active: true, ...(componentProps.mock ? componentProps.mock : {}), ...values, }); componentProps.changeRoute("mock"); }} onCancel={() => componentProps.onAction("clear")} /> </Wrapper> ); }; export default Create;