From 887688bb93b56cf2bd6ec42230912ff7f0513a1d Mon Sep 17 00:00:00 2001
From: eug-vs <eug-vs@keemail.me>
Date: Sun, 14 Mar 2021 12:28:07 +0300
Subject: feat: add Select component
---
src/components/Select.tsx | 34 ++++++++++++++++++++++++++++++++++
src/containers/WaybillForm.tsx | 33 +++++++++++++++++++--------------
2 files changed, 53 insertions(+), 14 deletions(-)
create mode 100644 src/components/Select.tsx
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>
--
cgit v1.2.3