From bf8c4f85fd9f50dbbeb6b040a8fa5067291df98e Mon Sep 17 00:00:00 2001
From: MB Pro <MyMac@AlexandrusMBP2.thinslices.com>
Date: Wed, 19 Dec 2018 11:57:33 +0200
Subject: [PATCH] fix(menuCountry doesn't allow invalid value):
---
.../component-faraday-ui/src/AuthorCard.js | 19 ++++------
.../src/InviteReviewers.js | 7 ++--
.../component-faraday-ui/src/MenuCountry.js | 36 ++++++++++---------
.../component-faraday-ui/src/Pagination.js | 2 +-
.../component-faraday-ui/src/UserProfile.js | 5 +--
.../src/helpers/withCountries.js | 2 +-
.../src/components/SignUp/SignUpStep0.js | 2 +-
7 files changed, 34 insertions(+), 39 deletions(-)
diff --git a/packages/component-faraday-ui/src/AuthorCard.js b/packages/component-faraday-ui/src/AuthorCard.js
index 59f4ebe24..dda6f9047 100644
--- a/packages/component-faraday-ui/src/AuthorCard.js
+++ b/packages/component-faraday-ui/src/AuthorCard.js
@@ -5,14 +5,9 @@ import styled from 'styled-components'
import { th } from '@pubsweet/ui-toolkit'
import { required } from 'xpub-validators'
import { reduxForm, Field } from 'redux-form'
-import {
- H3,
- Menu,
- Spinner,
- Checkbox,
- TextField,
- ValidatedField,
-} from '@pubsweet/ui'
+
+import { MenuCountry } from 'pubsweet-component-faraday-ui'
+import { H3, Spinner, Checkbox, TextField, ValidatedField } from '@pubsweet/ui'
import {
compose,
withState,
@@ -20,7 +15,6 @@ import {
withHandlers,
setDisplayName,
} from 'recompose'
-import { withCountries } from 'pubsweet-component-faraday-ui'
import { validators } from './helpers'
import { Tag, Label, Row, Item, PersonInfo, IconButton, OpenModal } from './'
@@ -196,11 +190,11 @@ const AuthorEdit = ({
<Item vertical>
<Label required>Country</Label>
<ValidatedField
- component={input => (
- <Menu {...input} options={countries} placeholder="Please select" />
- )}
+ component={MenuCountry}
data-test-id="author-card-country"
name="country"
+ placeholder="Please select"
+ validate={[required]}
/>
</Item>
</Row>
@@ -209,7 +203,6 @@ const AuthorEdit = ({
// #endregion
const EnhancedAuthorEdit = compose(
- withCountries,
withProps(({ author }) => ({
initialValues: author,
})),
diff --git a/packages/component-faraday-ui/src/InviteReviewers.js b/packages/component-faraday-ui/src/InviteReviewers.js
index 69b113655..096269be9 100644
--- a/packages/component-faraday-ui/src/InviteReviewers.js
+++ b/packages/component-faraday-ui/src/InviteReviewers.js
@@ -84,10 +84,9 @@ const InviteReviewers = ({ handleSubmit, reset }) => (
<ItemOverrideAlert vertical>
<Label required>Country</Label>
<ValidatedField
- component={input => (
- <MenuCountry {...input} placeholder="Please select" />
- )}
+ component={MenuCountry}
name="country"
+ placeholder="Please select"
validate={[required]}
/>
</ItemOverrideAlert>
@@ -100,7 +99,7 @@ InviteReviewers.propTypes = {
* @param {Reviewer} reviewer
* @param {object} props
*/
- onInvite: PropTypes.func,
+ onInvite: PropTypes.func, // eslint-disable-line
}
InviteReviewers.defaultProps = {
diff --git a/packages/component-faraday-ui/src/MenuCountry.js b/packages/component-faraday-ui/src/MenuCountry.js
index 8d3922550..60db85789 100644
--- a/packages/component-faraday-ui/src/MenuCountry.js
+++ b/packages/component-faraday-ui/src/MenuCountry.js
@@ -1,7 +1,7 @@
import React, { Fragment } from 'react'
import styled from 'styled-components'
-import { startsWith, toLower, get } from 'lodash'
import { th, override } 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'
@@ -9,7 +9,7 @@ const filteredCountries = ({ countries, userInput }) =>
countries.filter(o => startsWith(toLower(o.label), toLower(userInput)))
const firstFilteredCountry = ({ countries, userInput }) =>
- filteredCountries({ countries, userInput })[0]
+ head(filteredCountries({ countries, userInput }))
const Menu = ({
open,
@@ -55,21 +55,32 @@ export default compose(
updateUserInput,
updateOptionsVisibility,
}) => value => () => {
- onChange(value)
- updateUserInput(countryLabel(value))
- updateOptionsVisibility(false)
+ const country = countryLabel(value)
+ if (country) {
+ onChange(value)
+ updateUserInput(country)
+ updateOptionsVisibility(false)
+ }
},
}),
withHandlers({
toggleMenu: ({ updateOptionsVisibility, open }) => () => {
updateOptionsVisibility(!open)
},
- onTextChange: ({ updateUserInput }) => event => {
- updateUserInput(get(event, 'target.value', ''))
+ onTextChange: ({ updateUserInput, countryLabel, onChange }) => event => {
+ const inputValue = get(event, 'target.value', '')
+ const country = countryLabel(inputValue)
+
+ updateUserInput(inputValue)
+ if (!country) {
+ onChange('')
+ }
},
onEnter: ({ handleSelect, userInput, countries }) => event => {
if (event.which === 13) {
- handleSelect(firstFilteredCountry({ countries, userInput }).value)()
+ handleSelect(
+ get(firstFilteredCountry({ countries, userInput }), 'value'),
+ )()
}
},
}),
@@ -110,15 +121,6 @@ const CloseOverlay = styled.div`
${override('ui.MenuCountry.CloseOverlay')};
`
-const Label = styled.label`
- font-size: ${th('fontSizeBaseSmall')};
- line-height: ${th('lineHeightBaseSmall')};
- display: block;
-
- ${override('ui.Label')};
- ${override('ui.MenuCountry.Label')};
-`
-
const Main = styled.div.attrs(props => ({
role: 'listbox',
}))`
diff --git a/packages/component-faraday-ui/src/Pagination.js b/packages/component-faraday-ui/src/Pagination.js
index d2a770127..4220480d6 100644
--- a/packages/component-faraday-ui/src/Pagination.js
+++ b/packages/component-faraday-ui/src/Pagination.js
@@ -28,8 +28,8 @@ const PaginationComponent = ({
iconSize={2}
onClick={toFirst}
pb={0.5}
- pr={2}
pl={1}
+ pr={2}
/>
<Chevrons
className="caratRight"
diff --git a/packages/component-faraday-ui/src/UserProfile.js b/packages/component-faraday-ui/src/UserProfile.js
index 7c59dda1b..2cbe0e628 100644
--- a/packages/component-faraday-ui/src/UserProfile.js
+++ b/packages/component-faraday-ui/src/UserProfile.js
@@ -5,7 +5,7 @@ import styled from 'styled-components'
import { reduxForm } from 'redux-form'
import React, { Fragment } from 'react'
import { th } from '@pubsweet/ui-toolkit'
-import { withCountries } from 'pubsweet-component-faraday-ui'
+import { withCountries, MenuCountry } from 'pubsweet-component-faraday-ui'
import { required as requiredValidator } from 'xpub-validators'
import { compose, withStateHandlers, withProps } from 'recompose'
import { H3, Spinner, ValidatedField, TextField, Menu } from '@pubsweet/ui'
@@ -182,8 +182,9 @@ const EditUserProfile = compose(
<Item ml={1} vertical>
<Label required>Country</Label>
<ValidatedField
- component={input => <Menu {...input} options={countries} />}
+ component={MenuCountry}
name="country"
+ placeholder="Please select"
validate={[requiredValidator]}
/>
</Item>
diff --git a/packages/component-faraday-ui/src/helpers/withCountries.js b/packages/component-faraday-ui/src/helpers/withCountries.js
index fb72d5997..74748e41c 100644
--- a/packages/component-faraday-ui/src/helpers/withCountries.js
+++ b/packages/component-faraday-ui/src/helpers/withCountries.js
@@ -14,7 +14,7 @@ const countryMapper = (c = 'GB') => {
}
}
-const codeMapper = (c = 'UK') => {
+const codeMapper = (c = '') => {
switch (c) {
case 'UK':
return 'GB'
diff --git a/packages/components-faraday/src/components/SignUp/SignUpStep0.js b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
index 988787f2d..804ce99d1 100644
--- a/packages/components-faraday/src/components/SignUp/SignUpStep0.js
+++ b/packages/components-faraday/src/components/SignUp/SignUpStep0.js
@@ -1,6 +1,6 @@
import React, { Fragment } from 'react'
import { compose } from 'recompose'
-import { reduxForm, Field } from 'redux-form'
+import { reduxForm } from 'redux-form'
import { get, isUndefined } from 'lodash'
import { required as requiredValidator } from 'xpub-validators'
import { Menu, Button, Checkbox, TextField, ValidatedField } from '@pubsweet/ui'
--
GitLab