Add custom renderers for react-select so we can show tags and counts

[MAILPOET-2772]

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>