From 481a76b6a5e9033f370e177be79c8b85272ff9c6 Mon Sep 17 00:00:00 2001
From: Moritz Stueckler <moritz.stueckler@gmail.com>
Date: Fri, 4 Jun 2021 16:23:49 +0200
Subject: [PATCH] feat: add styling for tag react-select input
---
src/components/Select.tsx | 21 +++++++++++++++++++--
1 file changed, 19 insertions(+), 2 deletions(-)
diff --git a/src/components/Select.tsx b/src/components/Select.tsx
index 8247b09..378c697 100644
--- a/src/components/Select.tsx
+++ b/src/components/Select.tsx
@@ -1,11 +1,25 @@
import React from 'react';
import type { Theme } from 'react-select';
-import ReactSelect, { NamedProps, StylesConfig } from 'react-select';
+import ReactSelect, { NamedProps, StylesConfig, components } from 'react-select';
+import Tag from './Tag';
+
+const Option = ({ children, data, ...rest }: { children: any; data: any }) => {
+ return (
+ <components.Option {...rest}>
+ <Tag color={data.value.color}>{children}</Tag>
+ </components.Option>
+ );
+};
const Select = <OptionType, isMulti extends boolean>(props: NamedProps<OptionType, isMulti>): JSX.Element => {
const customStyles: StylesConfig<OptionType, isMulti> = {
control: (provided) => ({ ...provided, border: '0', borderRadius: '0.5em' }),
- multiValue: (provided) => ({ ...provided, borderRadius: '999px', padding: '0 3px' }),
+ multiValue: (provided, state) => ({
+ ...provided,
+ backgroundColor: state?.data?.value?.color || 'grey',
+ borderRadius: '999px',
+ padding: '0 3px',
+ }),
multiValueRemove: (provided) => ({
...provided,
color: 'hsl(0, 0%, 50%)',
@@ -15,6 +29,9 @@ const Select = <OptionType, isMulti extends boolean>(props: NamedProps<OptionTyp
return (
<ReactSelect
+ components={{
+ Option,
+ }}
theme={(theme): Theme => ({
...theme,
// @ts-expect-error: ThemeConfig type from definitely-typed is not complete
--
GitLab