feat: add Select component

2 files changed, 53 insertions, 14 deletions

diff --git a/src/components/Select.tsx b/src/components/Select.tsx
new file mode 100644
index 0000000..18eb0ed
--- /dev/null
+++ b/src/components/Select.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { Field } from 'formik';
+
+interface Option {
+  key: string;
+  label: string;
+}
+
+export interface Props extends React.SelectHTMLAttributes<HTMLSelectElement> {
+  label?: string;
+  options: Option[];
+}
+
+const SelectBase: React.FC<Props> = ({ label, options, ...props }) => {
+  return (
+    <div className="m-2 mb-4 flex flex-col">
+      <label htmlFor={props?.name} className="mb-1 text-gray-700">{label}</label>
+      <select
+        id={props?.name}
+        placeholder={label}
+        className="p-2 border-2 border-black bg-white focus:outline-none"
+        {...props}
+      >
+        {options?.map(option => (
+          <option value={option.key} key={option.key}>{option.label}</option>
+        ))}
+      </select>
+    </div>
+  );
+};
+
+const Select: React.FC<Props> = props => <Field {...props} as={SelectBase} />;
+
+export default Select;
diff --git a/src/containers/WaybillForm.tsx b/src/containers/WaybillForm.tsx
index e4d7d82..bb8d9ab 100644
--- a/src/containers/WaybillForm.tsx
+++ b/src/containers/WaybillForm.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Form, Field } from 'formik';
 import Input from '../components/Input';
+import Select from '../components/Select';
 import hooks from '../hooks/useAPIClient';
 
 const WaybillForm: React.FC = () => {
@@ -10,20 +11,24 @@ const WaybillForm: React.FC = () => {
   return (
     <Form id="form">
       <div className="max-w-lg">
-        <Field name="operation" as="select">
-          <option value="in">Приход</option>
-          <option value="out">Расход</option>
-        </Field>
-        <Field name="contractorId" as="select">
-          {contractors?.map(contractor => (
-            <option value={contractor._id}>{contractor.name}</option>
-          ))}
-        </Field>
-        <Field name="productId" as="select">
-          {products?.map(product => (
-            <option value={product._id}>{product.name}</option>
-          ))}
-        </Field>
+        <Select
+          name="contractorId"
+          label="Контрагент"
+          options={contractors?.map(c => ({ key: c._id, label: c.name }))}
+        />
+        <Select
+          name="productId"
+          label="Товар"
+          options={products?.map(p => ({ key: p._id, label: p.name }))}
+        />
+        <Select
+          name="operation"
+          label="Операция"
+          options={[
+            { key: 'in', label: 'Приход' },
+            { key: 'out', label: 'Расход' },
+          ]}
+        />
         <Input name="quantity" type="number" label="Количество" />
       </div>
     </Form>