diff --git a/src/components/input-model/variable-editor.style.ts b/src/components/input-model/variable-editor.style.ts index 04ee996f..04f470ff 100644 --- a/src/components/input-model/variable-editor.style.ts +++ b/src/components/input-model/variable-editor.style.ts @@ -1,16 +1,9 @@ import { makeStyles } from '@mui/styles' -export const useStyles = makeStyles(() => ({ - narrowInput: { - float: 'left', - width: '50%', - }, - narrowInputContainer: { - display: 'flex', - }, - option: { - display: 'flex', - alignItems: 'center', +export const useStyles = makeStyles(theme => ({ + customTab: { + minWidth: 'auto', + fontSize: theme.typography.pxToRem(12), }, })) diff --git a/src/components/input-model/variable-editor.tsx b/src/components/input-model/variable-editor.tsx index c070eb91..c5e7e919 100644 --- a/src/components/input-model/variable-editor.tsx +++ b/src/components/input-model/variable-editor.tsx @@ -1,10 +1,9 @@ -import { Box, Button } from '@mui/material' +import CategoricalVariable from './categorical-variable' +import ValueVariable from './value-variable' +import { Box, Tab, Tabs } from '@mui/material' +import { useState, ChangeEvent } from 'react' import useStyles from './variable-editor.style' import { CategoricalVariableType, ValueVariableType } from '@/types/common' -import { useForm } from 'react-hook-form' -import { FormInputText } from '@/utility/forms' -import { FormRadioGroup } from '@/utility/forms/form-radio-group' -import { validation } from '@/utility/forms/validation' type VariableEditorProps = { isAddVariableDisabled: boolean @@ -13,80 +12,44 @@ type VariableEditorProps = { } export default function VariableEditor(props: VariableEditorProps) { - const { isAddVariableDisabled } = props + const { isAddVariableDisabled, addValueVariable, addCategoricalVariable } = + props + const [tabIndex, setTabIndex] = useState(0) const classes = useStyles() - // add useForm controller - const { handleSubmit, control } = useForm({}) - - const onSubmit = (data: any) => { - console.log(data) + const handleTabChange = (_event: ChangeEvent<{}>, newValue: number) => { + setTabIndex(newValue) } return ( <> + + + + -
- + addValueVariable(valueVariable) + } /> - + addCategoricalVariable(categoricalVariable) + } /> - - - - - - - - - - - - - + )}
)