feat(menucountry): added country filter component and updated signup form step 0

n

packages/component-faraday-ui/src/MenuCountry.js

+import React from 'react'
+import { Menu } from '@pubsweet/ui'
+import { startsWith, toLower, get } from 'lodash'
+import { compose, withState, withHandlers } from 'recompose'
+import styled from 'styled-components'
+import { th } from '@pubsweet/ui-toolkit'
+
+import { withCountries } from 'pubsweet-component-faraday-ui'
+
+const filteredCountries = (countries, userInput) =>
+  countries.filter(o => startsWith(toLower(o.label), toLower(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,
+  toggleMenu,
+  placeholder,
+  optionLabel,
+  onChange,
+  onEnter,
+}) => (
+  <Input
+    onChange={onChange}
+    onClick={toggleMenu}
+    onKeyUp={onEnter}
+    placeholder={selected ? optionLabel(selected) : placeholder}
+    value={userInput}
+  />
+)
+
+const MenuCountry = ({ countries = [], ...input }) => (
+  <Menu
+    {...input}
+    options={filteredCountries(countries, input.userInput)}
+    placeholder="Please select"
+    renderOpener={CustomOpener}
+  />
+)
+
+const enhance = compose(
+  withCountries,
+  withState('userInput', 'updateUserInput', ''),
+  withHandlers({
+    onChange: ({ updateUserInput, onChange }) => value => {
+      // this value is an input DOM event while typing and a dropdown value when
+      // selected
+      if (typeof value === 'string') {
+        onChange(value)
+      }
+      updateUserInput(get(value, 'target.value', ''))
+    },
+    onEnter: props => event => {
+      if (event.which === 13) {
+        props.onChange(firstFilteredCountry(props).value)
+        props.updateUserInput(firstFilteredCountry(props).label)
+      }
+    },
+  }),
+)
+
+export default enhance(MenuCountry)

packages/component-faraday-ui/src/index.js

@@ -48,6 +48,7 @@ export { default as WizardFiles } from './WizardFiles'
 export { default as TextTooltip } from './TextTooltip'
 export { default as EditorialReportCard } from './EditorialReportCard'
 export { default as ReviewerReportAuthor } from './ReviewerReportAuthor'
+export { default as MenuCountry } from './MenuCountry'
 
 export { SubmitRevision } from './submissionRevision'
 

packages/components-faraday/src/components/SignUp/SignUpStep0.js

@@ -11,8 +11,8 @@ import {
   Item,
   Label,
   ActionLink,
+  MenuCountry,
   ItemOverrideAlert,
-  withCountries,
 } from 'pubsweet-component-faraday-ui'
 
 const AgreeCheckbox = ({ value, onChange }) => (
@@ -27,14 +27,7 @@ const AgreeCheckbox = ({ value, onChange }) => (
   </Row>
 )
 
-const Step0 = ({
-  type,
-  error,
-  journal,
-  countries,
-  handleSubmit,
-  initialValues,
-}) =>
+const Step0 = ({ type, error, journal, handleSubmit, initialValues }) =>
   !isUndefined(initialValues) ? (
     <Fragment>
       <Row mb={2} mt={3}>
@@ -75,11 +68,7 @@ const Step0 = ({
           <Label required>Country</Label>
           <ValidatedField
             component={input => (
-              <Menu
-                {...input}
-                options={countries}
-                placeholder="Please select"
-              />
+              <MenuCountry {...input} placeholder="Please select" />
             )}
             name="country"
             validate={[requiredValidator]}
@@ -142,7 +131,6 @@ const Step0 = ({
   )
 
 export default compose(
-  withCountries,
   reduxForm({
     form: 'signUpInvitation',
     destroyOnUnmount: false,