From 12d4a02f25fbe61c5c967c6e2e175d2d48aae489 Mon Sep 17 00:00:00 2001
From: Jure Triglav <juretriglav@gmail.com>
Date: Sat, 25 Jul 2020 04:44:04 +0200
Subject: [PATCH] feat: add a react-select component
---
app/components/shared/Badge.js | 2 ++
app/components/shared/General.js | 19 +++++++++++++++
app/components/shared/Select.js | 42 ++++++++++++++++++++++++++++++++
app/components/shared/index.js | 1 +
4 files changed, 64 insertions(+)
create mode 100644 app/components/shared/Select.js
diff --git a/app/components/shared/Badge.js b/app/components/shared/Badge.js
index f7f1a2e873..29e9cc2a5a 100644
--- a/app/components/shared/Badge.js
+++ b/app/components/shared/Badge.js
@@ -59,6 +59,8 @@ const label = status => {
rejected: 'Rejected',
submitted: 'Submitted',
revise: 'Revising',
+ invited: 'Invited', // reviewer status
+ completed: 'Completed', // reviewer status
}
return labels[status] || `Unknown (${status})`
}
diff --git a/app/components/shared/General.js b/app/components/shared/General.js
index f0e4551f70..dc6ca58eda 100644
--- a/app/components/shared/General.js
+++ b/app/components/shared/General.js
@@ -59,3 +59,22 @@ export const SectionAction = styled.div`
grid-column: 3;
justify-self: end;
`
+
+const Page = styled.div`
+ padding: ${grid(2)};
+`
+
+const Heading = styled.div`
+ color: ${th('colorPrimary')};
+ font-family: ${th('fontReading')};
+ font-size: ${th('fontSizeHeading3')};
+ line-height: ${th('lineHeightHeading3')};
+`
+
+export { Page, Heading }
+
+export const HeadingWithAction = styled.div`
+ display: grid;
+ grid-template-columns: 1fr auto;
+ align-items: center;
+`
diff --git a/app/components/shared/Select.js b/app/components/shared/Select.js
new file mode 100644
index 0000000000..a28127cd67
--- /dev/null
+++ b/app/components/shared/Select.js
@@ -0,0 +1,42 @@
+import React, { useContext } from 'react'
+import ReactSelect from 'react-select'
+import { ThemeContext } from 'styled-components'
+
+const styles = th => ({
+ menu: (provided, state) => ({
+ ...provided,
+ borderRadius: th.borderRadius,
+ }),
+
+ control: (provided, state) => ({
+ ...provided,
+ border: state.isFocused
+ ? `1px solid ${th.colorPrimary}`
+ : `1px solid ${th.colorBorder}`,
+ boxShadow: state.isFocused ? `0 0 0 1px ${th.colorPrimary}` : 'none',
+ borderRadius: th.borderRadius,
+ '&:hover': {
+ boxShadow: `0 0 0 1px ${th.colorPrimary}`,
+ },
+ minHeight: `calc(${th.gridUnit} * 5)`,
+ }),
+
+ singleValue: (provided, state) => {
+ const opacity = state.isDisabled ? 0.5 : 1
+ const transition = 'opacity 300ms'
+
+ return { ...provided, opacity, transition }
+ },
+
+ option: (provided, state) => ({
+ ...provided,
+ backgroundColor:
+ state.isFocused || state.isSelected ? th.colorFurniture : 'white',
+ color: th.colorText,
+ }),
+})
+
+export const Select = props => {
+ const theme = useContext(ThemeContext)
+ return <ReactSelect {...props} styles={styles(theme)} />
+}
diff --git a/app/components/shared/index.js b/app/components/shared/index.js
index 7ac615184c..9c03d08396 100644
--- a/app/components/shared/index.js
+++ b/app/components/shared/index.js
@@ -7,3 +7,4 @@ export * from './UserCombo'
export * from './Table'
export * from './General'
export * from './Badge'
+export * from './Select'
--
GitLab