From 5eb023cad9014b9f2f5fe05bbd0169764336e365 Mon Sep 17 00:00:00 2001
From: MB Pro <MyMac@AlexandrusMBP2.thinslices.com>
Date: Wed, 19 Dec 2018 13:38:59 +0200
Subject: [PATCH] fix(menuCountry): fix border error and initial values
---
packages/component-faraday-ui/src/AuthorCard.js | 6 +++---
packages/component-faraday-ui/src/MenuCountry.js | 12 +++++++++---
2 files changed, 12 insertions(+), 6 deletions(-)
diff --git a/packages/component-faraday-ui/src/AuthorCard.js b/packages/component-faraday-ui/src/AuthorCard.js
index dda6f9047..d51c58cc0 100644
--- a/packages/component-faraday-ui/src/AuthorCard.js
+++ b/packages/component-faraday-ui/src/AuthorCard.js
@@ -6,7 +6,7 @@ import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { reduxForm, Field } from 'redux-form'
-import { MenuCountry } from 'pubsweet-component-faraday-ui'
+import { MenuCountry, ItemOverrideAlert } from 'pubsweet-component-faraday-ui'
import { H3, Spinner, Checkbox, TextField, ValidatedField } from '@pubsweet/ui'
import {
compose,
@@ -187,7 +187,7 @@ const AuthorEdit = ({
validate={[required]}
/>
</Item>
- <Item vertical>
+ <ItemOverrideAlert vertical>
<Label required>Country</Label>
<ValidatedField
component={MenuCountry}
@@ -196,7 +196,7 @@ const AuthorEdit = ({
placeholder="Please select"
validate={[required]}
/>
- </Item>
+ </ItemOverrideAlert>
</Row>
</AuthorContainer>
)
diff --git a/packages/component-faraday-ui/src/MenuCountry.js b/packages/component-faraday-ui/src/MenuCountry.js
index 60db85789..2093858e1 100644
--- a/packages/component-faraday-ui/src/MenuCountry.js
+++ b/packages/component-faraday-ui/src/MenuCountry.js
@@ -1,6 +1,6 @@
import React, { Fragment } from 'react'
import styled from 'styled-components'
-import { th, override } from '@pubsweet/ui-toolkit'
+import { th, override, validationColor } from '@pubsweet/ui-toolkit'
import { startsWith, toLower, get, head } from 'lodash'
import { withCountries } from 'pubsweet-component-faraday-ui'
import { compose, withState, withHandlers, withProps } from 'recompose'
@@ -20,6 +20,7 @@ const Menu = ({
placeholder,
handleSelect,
onTextChange,
+ validationStatus,
}) => (
<Fragment>
{open && <CloseOverlay onClick={toggleMenu} />}
@@ -29,6 +30,7 @@ const Menu = ({
onClick={toggleMenu}
onKeyUp={onEnter}
placeholder={placeholder}
+ validationStatus={validationStatus}
value={userInput}
/>
{open && (
@@ -46,7 +48,11 @@ const Menu = ({
export default compose(
withCountries,
- withState('userInput', 'updateUserInput', ''),
+ withState(
+ 'userInput',
+ 'updateUserInput',
+ ({ value, countryLabel }) => (value ? countryLabel(value) : ''),
+ ),
withState('open', 'updateOptionsVisibility', false),
withHandlers({
handleSelect: ({
@@ -93,7 +99,7 @@ export default compose(
const Input = styled.input`
width: 100%;
height: calc(${th('gridUnit')} * 4);
- border: ${th('accordion.border')};
+ border: ${th('borderWidth')} ${th('borderStyle')} ${validationColor};
border-radius: ${th('borderRadius')};
padding: 0 ${th('gridUnit')};
font-family: ${th('fontHeading')};
--
GitLab