From 58690a6eb6cbea1d4149df02ef536d0c6d9869e5 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Ja=CC=81n=20Mikla=CC=81s=CC=8C?= <neosinner@gmail.com>
Date: Wed, 13 May 2020 13:36:32 +0200
Subject: [PATCH] Add ReactSelect component

[MAILPOET-2772]
---
 .../common/form/react_select/react_select.tsx | 38 +++++++++++++++++++
 1 file changed, 38 insertions(+)
 create mode 100644 assets/js/src/common/form/react_select/react_select.tsx

diff --git a/assets/js/src/common/form/react_select/react_select.tsx b/assets/js/src/common/form/react_select/react_select.tsx
new file mode 100644
index 0000000000..518ade4f1c
--- /dev/null
+++ b/assets/js/src/common/form/react_select/react_select.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import classnames from 'classnames';
+import Select, { Props as ReactSelectProps } from 'react-select';
+
+type Props = ReactSelectProps & {
+  dimension?: 'small',
+  isFullWidth?: boolean,
+  iconStart?: JSX.Element,
+};
+
+const ReactSelect = ({
+  dimension,
+  isFullWidth,
+  iconStart,
+  ...props
+}: Props) => (
+  <div
+    className={
+      classnames(
+        'mailpoet-form-input',
+        'mailpoet-form-select',
+        {
+          [`mailpoet-form-input-${dimension}`]: dimension,
+          'mailpoet-full-width': isFullWidth,
+        }
+      )
+    }
+  >
+    {iconStart}
+    <Select
+      className="mailpoet-form-react-select"
+      classNamePrefix="mailpoet-form-react-select"
+      {...props} // eslint-disable-line react/jsx-props-no-spreading
+    />
+  </div>
+);
+
+export default ReactSelect;