set filter modal

packages/web/src/utility/forms.js

@@ -22,25 +22,35 @@ export const FormLabel = styled.div`
 
 export const FormValue = styled.div``;
 
+export function FormTextFieldRaw({ ...other }) {
+  return <Field {...other} as={TextField} />;
+}
+
 export function FormTextField({ label, ...other }) {
   return (
     <FormRow>
       <FormLabel>{label}</FormLabel>
       <FormValue>
-        <Field {...other} as={TextField} />
+        <FormTextFieldRaw {...other} />
       </FormValue>
     </FormRow>
   );
 }
 
+export function FormSelectFieldRaw({ children, ...other }) {
+  return (
+    <Field {...other} as={SelectField}>
+      {children}
+    </Field>
+  );
+}
+
 export function FormSelectField({ label, children, ...other }) {
   return (
     <FormRow>
       <FormLabel>{label}</FormLabel>
       <FormValue>
-        <Field {...other} as={SelectField}>
-          {children}
-        </Field>
+        <FormSelectFieldRaw {...other}>{children}</FormSelectFieldRaw>
       </FormValue>
     </FormRow>
   );
@@ -54,3 +64,19 @@ export function FormButton({ text, onClick, ...other }) {
   const { values } = useFormikContext();
   return <FormStyledButton type="button" value={text} onClick={() => onClick(values)} {...other} />;
 }
+
+export function FormRadioGroupItem({ name, text, value }) {
+  const { setFieldValue, values } = useFormikContext();
+  return (
+    <div>
+      <input
+        type="radio"
+        name={name}
+        id={`${name}_${value}`}
+        defaultChecked={values[name] == value}
+        onClick={() => setFieldValue(name, value)}
+      />
+      <label htmlFor={`multiple_values_option_${value}`}>{text}</label>
+    </div>
+  );
+}