Merge pull request #75 from unicef/fix/textfield-issues

Textfield and UPeoplePicker components updated

example/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicef/material-ui-example",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "private": true,
   "homepage": "https://unicef.github.io/unicef-material-ui/example",
   "dependencies": {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicef/material-ui",
-  "version": "0.7.8",
+  "version": "0.7.9",
   "description": "UNICEF theme and components of material-ui for react",
   "main": "index.js",
   "files": [

src/components/UGraphPeoplePicker/UGraphPeoplePicker.js

@@ -29,6 +29,7 @@ export default function UGraphPeoplePicker({
   helpText,
   isMultiple,
   searchUsers,
+  components,
 }) {
   const [graphData, setGraphData] = useState([])
   const [selectedUsers, setSelectedUsers] = useState(getOptions(options))
@@ -93,6 +94,7 @@ export default function UGraphPeoplePicker({
       showNoOptionsWithEmptyTextField={false}
       variant="outlined"
       isMulti={isMultiple}
+      components={components}
     />
   )
 }
@@ -114,6 +116,8 @@ UGraphPeoplePicker.propTypes = {
   isMultiple: PropTypes.bool,
   /** trigger when user enters value */
   searchUsers: PropTypes.func,
+  /** To customize the components of select */
+  components: PropTypes.object,
 }
 
 UGraphPeoplePicker.defaultProps = {

src/components/UPeoplePicker/MultiValue.js

@@ -3,13 +3,16 @@ import PropTypes from 'prop-types'
 import clsx from 'clsx'
 import Chip from '@material-ui/core/Chip'
 import Avatar from '@material-ui/core/Avatar'
-import CancelIcon from '@material-ui/icons/Cancel'
 import { emphasize, makeStyles } from '@material-ui/core/styles'
 
 const useStyles = makeStyles(theme => ({
   chip: {
     marginLeft: theme.spacing(0.5),
     marginTop: theme.spacing(0.25),
+    maxWidth: '90%',
+    '& .Uni-MuiChip-deleteIcon': {
+      display: 'flex',
+    },
   },
   chipFocused: {
     backgroundColor: emphasize(
@@ -43,7 +46,7 @@ export default function MultiValue({
         [classes.chipFocused]: props.isFocused,
       })}
       onDelete={removeProps.onClick}
-      deleteIcon={<CancelIcon {...removeProps} />}
+      deleteIcon={<props.components.Remove {...removeProps} />}
     />
   )
 }

src/components/UPeoplePicker/SingleValue.js

@@ -8,8 +8,11 @@ const useStyles = makeStyles(theme => ({
   singleValue: {
     display: 'inline-flex',
     fontSize: 16,
+    alignItems: 'center',
+    width: '96%',
   },
   singleValueAvatar: {
+    display: 'inline-flex',
     marginRight: theme.spacing(1),
     '& .MuiAvatar-root': {
       height: 24,
@@ -21,6 +24,12 @@ const useStyles = makeStyles(theme => ({
     width: 24,
     marginRight: theme.spacing(1),
   },
+  optionLabel: {
+    whiteSpace: 'nowrap',
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    maxWidth: 'calc(100% - 32px)',
+  },
 }))
 
 export default function SingleValue(props) {
@@ -37,7 +46,7 @@ export default function SingleValue(props) {
       ) : (
         <Avatar className={classes.avatar} />
       )}
-      {props.children}
+      <span className={classes.optionLabel}>{props.children}</span>
     </Typography>
   )
 }

src/components/UPeoplePicker/UPeoplePicker.js

@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import PropTypes from 'prop-types'
 import Select from 'react-select'
 import { makeStyles, useTheme } from '@material-ui/core/styles'
+import CancelIcon from '@material-ui/icons/Cancel'
 import MultiValue from './MultiValue'
 import SingleValue from './SingleValue'
 import Menu from './Menu'
@@ -47,7 +48,7 @@ const useStyles = makeStyles(theme => ({
   },
 }))
 
-const components = {
+const defaultComponents = {
   Control,
   Menu,
   MultiValue,
@@ -56,6 +57,7 @@ const components = {
   Option,
   SingleValue,
   ValueContainer,
+  MultiValueRemove: removeProps => <CancelIcon {...removeProps} />,
 }
 
 /**
@@ -76,6 +78,7 @@ export default function UPeoplePicker(props) {
     TextFieldProps,
     showNoOptionsWithEmptyTextField,
     onInputChange,
+    components,
     ...others
   } = props
 
@@ -89,7 +92,10 @@ export default function UPeoplePicker(props) {
         font: 'inherit',
       },
     }),
+    menuPortal: base => ({ ...base, zIndex: 9999 }),
+    menu: base => ({ ...base, zIndex: '9999 !important' }),
   }
+
   const defaultTextFieldProps = {
     label: label,
     variant: variant,
@@ -112,7 +118,7 @@ export default function UPeoplePicker(props) {
       classes={classes}
       isClearable
       styles={selectStyles}
-      components={components}
+      components={{ ...defaultComponents, ...components }}
       TextFieldProps={mergedTextFieldProps}
       onInputChange={value => handleInputChange(value)}
       noOptionsMessage={() => (showNoOptions ? NoOptionsMessage : null)}
@@ -170,6 +176,8 @@ UPeoplePicker.propTypes = {
    *  To display error message on loading options
    */
   errorLoadingOptions: PropTypes.string,
+  /** To customize the components of select */
+  components: PropTypes.object,
 }
 
 UPeoplePicker.defaultProps = {

src/components/UTextField/UTextField.js

@@ -73,6 +73,8 @@ class UTextField extends ValidatorComponent {
       maxLength,
       counter,
       counterClassName,
+      readOnly,
+      InputProps,
       ...rest
     } = this.props
     const { isValid } = this.state
@@ -87,6 +89,10 @@ class UTextField extends ValidatorComponent {
           error={!isValid || error}
           onBlur={event => this.handleBlur(event)}
           helperText={(!isValid && this.getErrorMessage()) || helperText}
+          InputProps={{
+            readOnly: readOnly,
+            ...InputProps,
+          }}
         />
         {counter && (
           <Box display="block">
@@ -132,10 +138,15 @@ UTextField.propTypes = {
   counter: PropTypes.bool,
   /** Maximum length of characters */
   maxLength: PropTypes.number,
+  /** To make textfield read only */
+  readOnly: PropTypes.bool,
+  /** Props applied to the Input element. */
+  InputProps: PropTypes.object,
 }
 
 UTextField.defaultProps = {
   variant: 'outlined',
+  readOnly: false,
   validatorListener: () => {},
 }