Commit 87e45325 authored by Ion Riciu's avatar Ion Riciu
Browse files

added style for typeahead

parent 1e2ea164
Pipeline #23068 failed with stage
......@@ -149,7 +149,7 @@ const DecisionVersion = ({ form, current, version, parent }) => {
)}
{current && (
<AdminSection>
<EmailNotifications />
{process.env.INSTANCE_NAME === 'colab' && <EmailNotifications />}
<AssignEditorsReviewers
AssignEditor={AssignEditor}
manuscript={parent}
......
......@@ -3,7 +3,7 @@ import { SectionHeader, SectionRowGrid, Title } from '../style'
import { SectionContent } from '../../../../shared'
const AssignEditorsReviewers = ({ manuscript, AssignEditor }) => (
<SectionContent>
<SectionContent noGap={process.env.INSTANCE_NAME !== 'colab'}>
<SectionHeader>
<Title>Assign Editors</Title>
</SectionHeader>
......
import React, { useState, useEffect } from 'react'
import PropTypes from 'prop-types'
import React from 'react'
import { gql, useQuery } from '@apollo/client'
import { Typeahead } from 'react-typeahead'
import { StyledTypeahead } from '../style'
const query = gql`
{
......@@ -33,24 +32,22 @@ const SelectReceiver = ({ changeState, selectedReceiver }) => {
const options = (data.users || []).map(user => editorOption(user))
return (
<Typeahead
customClasses={{
input: 'class-input',
}}
<StyledTypeahead
maxVisible={2}
onChange={e =>
onKeyUp={e => {
changeState({
...selectedReceiver,
email: e.target.value,
})
}
onOptionSelected={selected =>
}}
onOptionSelected={selected => {
changeState({
...selectedReceiver,
email: options.filter(option => selected === option.label)[0].value,
})
}
}}
options={options.map(option => option.label)}
placeholder="Choose a receiver"
/>
)
}
......
......@@ -93,20 +93,23 @@ export const RecommendationInputContainer = styled.div`
export const StyledNotifyButton = styled(Button)`
cursor: pointer;
height: 40px;
`
export const StyledTypeahead = styled(Typeahead)`
&.class-input {
input {
border: 1px solid #aaa;
border-color: #aaa;
border-radius: 8px;
color: inherit;
font-family: inherit;
font-size: inherit;
height: calc(8px * 6);
height: 40px;
outline: 0;
padding: 0 8px;
transition: 0.2s ease;
width: 100%;
}
.typeahead-selector {
list-style-type: none;
}
`
......
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment