diff --git a/packages/component-faraday-ui/src/AuthorCard.js b/packages/component-faraday-ui/src/AuthorCard.js index 2ace7fa985268bb535cdeff598a1a5ac7a030433..36f74f2d439a408fe6024014e11d409564fec1d4 100644 --- a/packages/component-faraday-ui/src/AuthorCard.js +++ b/packages/component-faraday-ui/src/AuthorCard.js @@ -4,14 +4,7 @@ import styled from 'styled-components' import { th } from '@pubsweet/ui-toolkit' import { required } from 'xpub-validators' import { reduxForm, Field } from 'redux-form' -import { - Menu, - H3, - ValidatedField, - TextField, - Checkbox, - Spinner, -} from '@pubsweet/ui' +import { H3, ValidatedField, TextField, Checkbox, Spinner } from '@pubsweet/ui' import { compose, withState, @@ -20,7 +13,7 @@ import { setDisplayName, } from 'recompose' -import { withCountries } from 'pubsweet-component-faraday-ui' +import { MenuCountry } from 'pubsweet-component-faraday-ui' import { Tag, Label, Row, Item, PersonInfo, IconButton, OpenModal } from './' import { validators } from './helpers' @@ -129,7 +122,6 @@ const AuthorTitle = ({ // #region AuthorEdit const AuthorEdit = ({ - countries, author, editMode, listIndex, @@ -196,7 +188,7 @@ const AuthorEdit = ({ <Label required>Country</Label> <ValidatedField component={input => ( - <Menu {...input} options={countries} placeholder="Please select" /> + <MenuCountry {...input} placeholder="Please select" /> )} data-test-id="author-card-country" name="country" @@ -208,7 +200,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 7c93ebb316f9a1d7a10c664548a6ee94c6864cdd..7f07b70cba1b4e7944aea14142d5bcd1632a1fad 100644 --- a/packages/component-faraday-ui/src/InviteReviewers.js +++ b/packages/component-faraday-ui/src/InviteReviewers.js @@ -5,7 +5,9 @@ import { reduxForm } from 'redux-form' import { th } from '@pubsweet/ui-toolkit' import { required } from 'xpub-validators' import { withModal } from 'pubsweet-component-modal/src/components' -import { Button, H4, Menu, TextField, ValidatedField } from '@pubsweet/ui' +import { Button, H4, TextField, ValidatedField } from '@pubsweet/ui' + +import { MenuCountry } from 'pubsweet-component-faraday-ui' import { Row, @@ -15,10 +17,9 @@ import { ItemOverrideAlert, withFetching, validators, - withCountries, } from '../' -const InviteReviewers = ({ countries, handleSubmit, reset }) => ( +const InviteReviewers = ({ handleSubmit, reset }) => ( <Root> <Row justify="space-between" mb={2}> <H4>Invite reviewer</H4> @@ -82,7 +83,9 @@ const InviteReviewers = ({ countries, handleSubmit, reset }) => ( <ItemOverrideAlert vertical> <Label required>Country</Label> <ValidatedField - component={input => <Menu options={countries} {...input} />} + component={input => ( + <MenuCountry {...input} placeholder="Please select" /> + )} name="country" validate={[required]} /> @@ -93,7 +96,6 @@ const InviteReviewers = ({ countries, handleSubmit, reset }) => ( export default compose( withFetching, - withCountries, withModal(({ isFetching, modalKey }) => ({ modalKey, isFetching, diff --git a/packages/component-faraday-ui/src/MenuCountry.js b/packages/component-faraday-ui/src/MenuCountry.js index d039d154406966c200eb7ae384fca707e8722d61..8ca9f618bb2612ebdf04dea4a5c0e781ba2a39ad 100644 --- a/packages/component-faraday-ui/src/MenuCountry.js +++ b/packages/component-faraday-ui/src/MenuCountry.js @@ -13,23 +13,6 @@ const filteredCountries = (countries, userInput) => const firstFilteredCountry = props => filteredCountries(props.countries, props.userInput)[0] -const Input = styled.input` - width: 100%; - height: calc(${th('gridUnit')} * 4); - border: ${th('accordion.border')}; - border-radius: ${th('borderRadius')}; - padding: 0 ${th('gridUnit')}; - ::placeholder { - color: ${th('colorText')}; - opacity: 1; - font-family: ${th('fontWriting')}; - } - :focus { - border-color: ${th('action.colorActive')} - outline: none; - } -` - const CustomOpener = ({ selected, userInput, @@ -79,3 +62,20 @@ const enhance = compose( ) export default enhance(MenuCountry) + +const Input = styled.input` + width: 100%; + height: calc(${th('gridUnit')} * 4); + border: ${th('accordion.border')}; + border-radius: ${th('borderRadius')}; + padding: 0 ${th('gridUnit')}; + ::placeholder { + color: ${th('colorText')}; + opacity: 1; + font-family: ${th('fontWriting')}; + } + :focus { + border-color: ${th('action.colorActive')} + outline: none; + } +` diff --git a/packages/component-faraday-ui/src/UserProfile.js b/packages/component-faraday-ui/src/UserProfile.js index 292c04822b7ee0bdbcfb2662a12a91bb961cc8ca..e1bdc2074f60d3a1810ab5e1f595b1289b564c00 100644 --- a/packages/component-faraday-ui/src/UserProfile.js +++ b/packages/component-faraday-ui/src/UserProfile.js @@ -7,7 +7,7 @@ import { th } from '@pubsweet/ui-toolkit' import { required as requiredValidator } from 'xpub-validators' import { compose, withStateHandlers, withProps } from 'recompose' import { H3, Spinner, ValidatedField, TextField, Menu } from '@pubsweet/ui' -import { withCountries } from 'pubsweet-component-faraday-ui' +import { withCountries, MenuCountry } from 'pubsweet-component-faraday-ui' import { Row, @@ -179,7 +179,9 @@ const EditUserProfile = compose( <Item ml={1} vertical> <Label required>Country</Label> <ValidatedField - component={input => <Menu {...input} options={countries} />} + component={input => ( + <MenuCountry {...input} placeholder="Please select" /> + )} name="country" validate={[requiredValidator]} /> diff --git a/packages/component-faraday-ui/src/modals/FormModal.js b/packages/component-faraday-ui/src/modals/FormModal.js index e9adb3b78c837287a61182aefc121b1851bbad5d..e798227aac61a7a99b16813a0f56deec6fc3b117 100644 --- a/packages/component-faraday-ui/src/modals/FormModal.js +++ b/packages/component-faraday-ui/src/modals/FormModal.js @@ -19,12 +19,13 @@ import { Text, Item, Label, + MenuCountry, IconButton, RowOverrideAlert, ItemOverrideAlert, } from 'pubsweet-component-faraday-ui' -const AddUserForm = ({ roles, countries, titles }) => ( +const AddUserForm = ({ roles, titles }) => ( <Fragment> <Row alignItems="baseline" mb={1} mt={1}> <Item mr={1} vertical> @@ -72,7 +73,7 @@ const AddUserForm = ({ roles, countries, titles }) => ( <Label>Country</Label> <ValidatedField component={input => ( - <Menu options={countries} {...input} placeholder="Please select" /> + <MenuCountry {...input} placeholder="Please select" /> )} name="country" /> @@ -88,7 +89,7 @@ const AddUserForm = ({ roles, countries, titles }) => ( </Fragment> ) -const EditForm = ({ titles, countries }) => ( +const EditForm = ({ titles }) => ( <Fragment> <Row alignItems="center" mb={2} mt={1}> <Item mr={1} vertical> @@ -115,7 +116,7 @@ const EditForm = ({ titles, countries }) => ( <Label>Country</Label> <ValidatedField component={input => ( - <Menu options={countries} {...input} placeholder="Please select" /> + <MenuCountry {...input} placeholder="Please select" /> )} name="country" /> @@ -186,7 +187,6 @@ const FormModal = ({ onClose, subtitle, onConfirm, - countries, modalError, isFetching, handleSubmit, @@ -198,9 +198,9 @@ const FormModal = ({ <H2>{title}</H2> {edit && <Text secondary>{user.email}</Text>} {edit ? ( - <EditForm countries={countries} titles={titles} /> + <EditForm titles={titles} /> ) : ( - <AddUserForm countries={countries} roles={roles} titles={titles} /> + <AddUserForm roles={roles} titles={titles} /> )} {modalError && ( <Row mb={1}> diff --git a/packages/components-faraday/src/components/Admin/AddUser.js b/packages/components-faraday/src/components/Admin/AddUser.js index 572e42f0755c5f0ae873b190c0d6864b1889139e..7fd409d679850f3e7418baa28af3f82bc6f361cc 100644 --- a/packages/components-faraday/src/components/Admin/AddUser.js +++ b/packages/components-faraday/src/components/Admin/AddUser.js @@ -9,7 +9,6 @@ import { IconButton, withRoles, withFetching, - withCountries, } from 'pubsweet-component-faraday-ui' const AddUser = ({ edit, journal, handleSubmit, ...rest }) => ( @@ -32,6 +31,4 @@ const AddUser = ({ edit, journal, handleSubmit, ...rest }) => ( </OpenModal> ) -export default compose(withJournal, withCountries, withRoles, withFetching)( - AddUser, -) +export default compose(withJournal, withRoles, withFetching)(AddUser)