8000 Now, FormDropdownField doesn't need a HoC · coder/coder@458703e · GitHub
[go: up one dir, main page]
Skip to content

Commit 458703e

Browse files
bryphe-coderbryphe-coder
committed
Now, FormDropdownField doesn't need a HoC
1 parent e1b450f commit 458703e

File tree

2 files changed

+21
-29
lines changed

2 files changed

+21
-29
lines changed

‎site/components/Form/FormDropdownField.tsx

Lines changed: 20 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -16,34 +16,28 @@ export interface FormDropdownFieldProps<T> extends FormTextFieldProps<T> {
1616
items: DropdownItem[]
1717
}
1818

19-
export const formDropdownFieldFactory = <T,>(): React.FC<FormDropdownFieldProps<T>> => {
20-
const Component: React.FC<FormDropdownFieldProps<T>> = ({ items, ...props }) => {
21-
const styles = useStyles()
22-
return (
23-
<FormTextField select {...props}>
24-
{items.map((item: DropdownItem) => (
25-
<MenuItem key={item.value} value={item.value}>
26-
<Box alignItems="center" display="flex">
19+
export const FormDropdownField = <T,>({ items, ...props }: FormDropdownFieldProps<T>): React.ReactElement => {
20+
const styles = useStyles()
21+
return (
22+
<FormTextField select {...props}>
23+
{items.map((item: DropdownItem) => (
24+
<MenuItem key={item.value} value={item.value}>
25+
<Box alignItems="center" display="flex">
26+
<Box ml={1}>
27+
<Typography>{item.name}</Typography>
28+
</Box>
29+
{item.description && (
2730
<Box ml={1}>
28-
<Typography>{item.name}</Typography>
31+
<Typography className={styles.hintText} variant="caption">
32+
{item.description}
33+
</Typography>
2934
</Box>
30-
{item.description && (
31-
<Box ml={1}>
32-
<Typography className={styles.hintText} variant="caption">
33-
{item.description}
34-
</Typography>
35-
</Box>
36-
)}
37-
</Box>
38-
</MenuItem>
39-
))}
40-
</FormTextField>
41-
)
42-
}
43-
44-
// Required when using an anonymous factory function
45-
Component.displayName = "FormDropdownField"
46-
return Component
35+
)}
36+
</Box>
37+
</MenuItem>
38+
))}
39+
</FormTextField>
40+
)
4741
}
4842

4943
const useStyles = makeStyles({

‎site/forms/CreateProjectForm.tsx

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import { FormikContextType, useFormik } from "formik"
44
import React from "react"
55
import * as Yup from "yup"
66

7-
import { FormTextField, FormTitle, FormSection, formDropdownFieldFactory, DropdownItem } from "../components/Form"
7+
import { DropdownItem, FormDropdownField, FormTextField, FormTitle, FormSection } from "../components/Form"
88
import { LoadingButton } from "../components/Button"
99
import { Organization, Project, Provisioner, CreateProjectRequest } from "./../api"
1010

@@ -21,8 +21,6 @@ const validationSchema = Yup.object({
2121
name: Yup.string().required("Name is required"),
2222
})
2323

24-
const FormDropdownField = formDropdownFieldFactory<CreateProjectRequest>()
25-
2624
export const CreateProjectForm: React.FC<CreateProjectFormProps> = ({
2725
provisioners,
2826
organizations,

0 commit comments

Comments
 (0)
0