feat: select component that also has the possibility to add new tags

Chia-Network · Jul 11, 2022 · 3bd1cf8 · 3bd1cf8
1 parent f1d9b07
commit 3bd1cf8
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 0 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -29,6 +29,7 @@
     "react-redux": "^7.2.6",
     "react-router-dom": "^6.3.0",
     "react-scripts": "4.0.3",
+    "react-select": "^5.4.0",
     "redux": "^4.1.2",
     "redux-thunk": "^2.4.0",
     "socket.io-client": "^4.4.1",

diff --git a/src/components/form/SelectCreatable.js b/src/components/form/SelectCreatable.js
@@ -0,0 +1,78 @@
+import React, { useCallback, useMemo } from 'react';
+import CreatableSelect from 'react-select/creatable';
+import styled, { css, withTheme } from 'styled-components';
+
+import { Body } from '../typography';
+
+const SelectCreatableEnum = {
+  disabled: 'disabled',
+  error: 'error',
+  default: 'default',
+};
+
+const StyledCreatableSelect = styled(CreatableSelect)`
+  ${props => {
+    if (props.variant === SelectCreatableEnum.error) {
+      // error variant style
+      return css`
+        div[class*='control'] {
+          border-radius: 0.125rem;
+          border: 1px solid ${props.theme.colors.default.status.error.primary};
+        }
+
+        div[class*='control']:focus-within {
+          border: 1px solid #f5222d;
+          box-shadow: 0px 0px 4px rgba(245, 34, 45, 0.5);
+        }
+      `;
+    } else {
+      // default  variant style
+      return css`
+        div[class*='control'] {
+          border-radius: 0.125rem;
+          border: 0.0625rem solid #d9d9d9;
+        }
+
+        div[class*='control']:hover {
+          border: 1px solid #40a9ff;
+        }
+
+        div[class*='control']:focus-within {
+          border: 1px solid #1890ff;
+          box-shadow: 0px 0px 4px rgba(24, 144, 255, 0.5);
+        }
+      `;
+    }
+  }}
+`;
+
+const SelectCreatable = withTheme(({ variant, options, onChange }) => {
+  const optionsList = useMemo(
+    () =>
+      options?.map(optionItem => ({
+        value: optionItem,
+        label: optionItem,
+      })) ?? [],
+    [options],
+  );
+
+  const handleChange = useCallback(
+    newValue =>
+      onChange(newValue?.map(selectedItem => selectedItem.value) ?? []),
+    [onChange],
+  );
+
+  return (
+    <Body>
+      <StyledCreatableSelect
+        isMulti
+        onChange={handleChange}
+        options={optionsList}
+        variant={variant}
+        isDisabled={variant === SelectCreatableEnum.disabled}
+      />
+    </Body>
+  );
+});
+
+export { SelectCreatable, SelectCreatableEnum };
diff --git a/src/components/form/index.js b/src/components/form/index.js
@@ -7,3 +7,4 @@ export * from './Select';
 export * from './SelectOrganizations';
 export * from './SimpleSelect';
 export * from './FormikError';
+export * from './SelectCreatable';
diff --git a/src/pages/Organization/index.js b/src/pages/Organization/index.js
@@ -12,6 +12,7 @@ import {
   H4,
   PrimaryButton,
   SubscriptionModal,
+  SelectCreatable,
 } from '../../components';
 
 const StyledOrganizationContainer = styled('div')`
@@ -108,6 +109,13 @@ const Organization = () => {
           </Body>
         </StyledItemContainer>
 
+        <StyledItemContainer>
+          <SelectCreatable
+            options={['Micky', 'Mouse', 'In the house']}
+            onChange={val => console.log(val)}
+          />
+        </StyledItemContainer>
+
         <StyledItemContainer>
           <H4>
             <FormattedMessage id="org-uid" />