import React from 'react'; import styled from 'styled-components'; import Select from 'react-select'; import { TextField, SelectField } from './inputs'; import { Field, useFormikContext } from 'formik'; import FormStyledButton from '../widgets/FormStyledButton'; import { useConnectionList, useDatabaseList, useDatabaseInfo } from './metadataLoaders'; import useSocket from './SocketProvider'; import getAsArray from './getAsArray'; export const FormRow = styled.div` display: flex; margin: 10px; `; export const FormButtonRow = styled.div` display: flex; // justify-content: flex-end; margin: 10px; `; export const FormLabel = styled.div` width: 10vw; font-weight: bold; `; export const FormValue = styled.div``; export function FormTextFieldRaw({ ...other }) { return ; } export function FormTextField({ label, ...other }) { return ( {label} ); } export function FormSelectFieldRaw({ children, ...other }) { return ( {children} ); } export function FormSelectField({ label, children, ...other }) { return ( {label} {children} ); } export function FormSubmit({ text }) { return ; } export function FormButton({ text, onClick, ...other }) { const { values } = useFormikContext(); return onClick(values)} {...other} />; } export function FormRadioGroupItem({ name, text, value }) { const { setFieldValue, values } = useFormikContext(); return (
setFieldValue(name, value)} />
); } export function FormReactSelect({ options, name, isMulti = false }) { const { setFieldValue, values } = useFormikContext(); return (