From 84be47b11473b34948af0440fc24b3d25bbbc9f0 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 15:24:56 +0200
Subject: [PATCH] Add custom renderers for react-select so we can show tags and
 counts

[MAILPOET-2772]
---
 .../common/form/react_select/react_select.tsx | 49 +++++++++++++++++++
 1 file changed, 49 insertions(+)

diff --git a/assets/js/src/common/form/react_select/react_select.tsx b/assets/js/src/common/form/react_select/react_select.tsx
index 518ade4f1c..12a6d47e52 100644
--- a/assets/js/src/common/form/react_select/react_select.tsx
+++ b/assets/js/src/common/form/react_select/react_select.tsx
@@ -8,6 +8,54 @@ type Props = ReactSelectProps & {
   iconStart?: JSX.Element,
 };
 
+const LabelRenderer = (data: any) => (
+  <div className="mailpoet-form-react-select-option">
+    {data.tag && <span className="mailpoet-form-react-select-tag">{data.tag}</span>}
+    <span className="mailpoet-form-react-select-text"><span>{data.label}</span></span>
+    {data.count && <span className="mailpoet-form-react-select-count">{data.count}</span>}
+  </div>
+);
+
+const Option = (props: any) => (
+  <div
+    ref={props.innerRef}
+    {...props.innerProps} // eslint-disable-line react/jsx-props-no-spreading
+    className={
+      classnames({
+        'mailpoet-form-react-select__option': true,
+        'mailpoet-form-react-select__option--is-disabled': props.isDisabled,
+        'mailpoet-form-react-select__option--is-focused': props.isFocused,
+        'mailpoet-form-react-select__option--is-selected': props.isSelected,
+      })
+    }
+  >
+    {LabelRenderer(props.data)}
+  </div>
+);
+
+const SingleValue = (props: any) => (
+  <div
+    {...props.innerProps} // eslint-disable-line react/jsx-props-no-spreading
+    className={
+      classnames({
+        'mailpoet-form-react-select__single-value': true,
+        'mailpoet-form-react-select__single-value--is-disabled': props.isDisabled,
+      })
+    }
+  >
+    {LabelRenderer(props.data)}
+  </div>
+);
+
+const MultiValueLabel = (props: any) => (
+  <div
+    {...props.innerProps} // eslint-disable-line react/jsx-props-no-spreading
+    className="mailpoet-form-react-select__multi-value__label"
+  >
+    {LabelRenderer(props.data)}
+  </div>
+);
+
 const ReactSelect = ({
   dimension,
   isFullWidth,
@@ -30,6 +78,7 @@ const ReactSelect = ({
     <Select
       className="mailpoet-form-react-select"
       classNamePrefix="mailpoet-form-react-select"
+      components={{ Option, SingleValue, MultiValueLabel }}
       {...props} // eslint-disable-line react/jsx-props-no-spreading
     />
   </div>