Issue#24: Add a select form component for list of countries with auto…

…complete.

- [x] Add `CountrySelector` component which gives a select form with list of all the country names with autocomplete functionality
- [x] Uses `react-select` component with `react-select-country-list`

README.md

@@ -19,6 +19,7 @@ Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
 Mock server will run at [http://localhost:8080](http://localhost:8080).
 
 Default login:
+
 - email: [email protected]
 - password: vyaguta
 

package.json

@@ -16,6 +16,7 @@
     "moment": "^2.24.0",
     "node-sass": "^4.13.1",
     "pinterpolate": "^0.2.2",
+    "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-datepicker": "^2.14.1",
     "react-dates": "^21.8.0",

src/components/common/form/Selector.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import Select from 'react-select';
+import PropTypes from 'prop-types';
+
+/**
+ * A select form component.
+ * A selector component which is an abstraction overt React Select.
+ *
+ * @component
+ * @example
+ * return (
+ *  <Selector
+ *   lists = the lists of data for the option
+ *   selected = the pre-selected item from the list
+ *   onChange = method invoked on selecting the item from the list.
+ *  />
+ * )
+ *
+ * @param  props
+ */
+const Selector = props => {
+  return <Select options={props.lists} value={props.selected} onChange={props.onChange} />;
+};
+
+Selector.propTypes = {
+  /**
+   * The list of options for the selector.
+   */
+  lists: PropTypes.array,
+
+  /**
+   * The selected item from the list of items.
+   */
+  selected: PropTypes.object,
+  /**
+   * The handler method invoked when selecting the item from the list of items.
+   */
+  onChange: PropTypes.func,
+};
+
+export default Selector;