Merge pull request #166 from unicef/fix/defaultProps-cleanup

default props cleanup and fix

package.json

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

src/components/ActiveFormCoordinateField/ActiveFormCoordinateField.js

@@ -19,7 +19,7 @@ import { PositiveNumberFormat } from '../Shared'
 
 export default function ActiveFormCoordinateField({
   InputProps,
-  decimalScale,
+  decimalScale = 9,
   inputProps,
   coordinateType,
   validators,
@@ -96,7 +96,3 @@ ActiveFormCoordinateField.propTypes = {
   /** Change to write mode by hiding textfield border and displays border on Hover */
   interactiveMode: PropTypes.bool,
 }
-
-ActiveFormCoordinateField.defaultProps = {
-  decimalScale: 9,
-}

src/components/ActiveFormSelect/ActiveFormSelect.js

@@ -72,8 +72,8 @@ export default function ActiveFormSelect(props) {
     select,
     typographyVariant,
     className,
-    interactiveMode,
-    placeholder,
+    interactiveMode = false,
+    placeholder = 'Select',
     readOnly,
     InputLabelProps,
     InputProps,
@@ -173,8 +173,3 @@ ActiveFormSelect.propTypes = {
   /** Allow to use required validator in any validation trigger, not only form submit. */
   withRequiredValidator: PropTypes.bool,
 }
-
-ActiveFormSelect.defaultProps = {
-  placeholder: 'Select',
-  interactiveMode: false,
-}

src/components/ActiveFormTextField/ActiveFormTextField.js

@@ -68,10 +68,10 @@ export default function ActiveFormTextField(props) {
   const {
     typographyVariant,
     className,
-    variant,
+    variant = 'outlined',
     readOnly,
-    placeholder,
-    interactiveMode,
+    placeholder = 'Type something',
+    interactiveMode = false,
     InputLabelProps,
     InputProps,
     inputProps,
@@ -153,9 +153,3 @@ ActiveFormTextField.propTypes = {
   /** Allow to use required validator in any validation trigger, not only form submit. */
   withRequiredValidator: PropTypes.bool,
 }
-
-ActiveFormTextField.defaultProps = {
-  placeholder: 'Type something',
-  interactiveMode: false,
-  variant: 'outlined',
-}

src/components/ActiveTimePicker/ActiveTimePicker.js

@@ -48,14 +48,16 @@ const StyledBox = styled(Box, {
  * Please have look at [Material UI Time Picker](https://mui.com/x/api/date-pickers/time-picker/) for more details
  */
 export default function ActiveTimePicker({
-  inputFormat,
+  inputFormat = 'hh:mm a',
   label,
   onChange,
   value,
   showLabelHelp,
-  InputLabelProps,
+  InputLabelProps = {
+    shrink: true,
+  },
   InputLabelHelpProps,
-  inputVariant,
+  inputVariant = 'outlined',
   interactiveMode,
   readOnly,
   ...others
@@ -109,11 +111,3 @@ ActiveTimePicker.propTypes = {
   /** Props applied to the input label help element. E.g InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
   InputLabelHelpProps: PropTypes.object,
 }
-
-ActiveTimePicker.defaultProps = {
-  inputVariant: 'outlined',
-  InputLabelProps: {
-    shrink: true,
-  },
-  inputFormat: 'hh:mm a',
-}

src/components/UAutoComplete/UAutoComplete.js

@@ -36,9 +36,9 @@ export default function UAutoComplete({
   readOnly,
   minLength,
   maxLength,
-  usedItemIds,
-  allowContextSpecific,
-  counter,
+  usedItemIds = [],
+  allowContextSpecific = false,
+  counter = false,
   placeholder,
   InputLabelProps,
   props,
@@ -198,9 +198,3 @@ UAutoComplete.propTypes = {
   /** Label props applied to input field*/
   InputLabelProps: PropTypes.object,
 }
-
-UAutoComplete.defaultProps = {
-  allowContextSpecific: false,
-  counter: false,
-  usedItemIds: [],
-}

src/components/UButton/UButton.js

@@ -39,6 +39,7 @@ export default function UButton({
   loading = false,
   variant = 'contained',
   color = 'primary',
+  children,
   ...others
 }) {
   function getVariant(variant) {
@@ -65,7 +66,7 @@ export default function UButton({
       disableRipple
       {...others}
     >
-      {props.children}
+      {children}
     </Button>
   )
 

src/components/UCoordinateField/UCoordinateField.js

@@ -16,7 +16,7 @@ import UTextField from '../UTextField'
 export default function UCoordinateField({
   readOnly,
   InputProps,
-  decimalScale,
+  decimalScale = 9,
   inputProps,
   coordinateType,
   validators,
@@ -82,7 +82,3 @@ UCoordinateField.propTypes = {
   /** Coordinate type */
   coordinateType: PropTypes.oneOf(['latitude', 'longitude']).isRequired,
 }
-
-UCoordinateField.defaultProps = {
-  decimalScale: 9,
-}

src/components/UCurrencyField/UCurrencyField.js

@@ -6,10 +6,10 @@ import UPositiveInteger from '../UPositiveInteger'
  * The UCurrencyField is for creating currency input fields. It accepts several props for customization, including "inputPrefix," "decimalScale," "fixedDecimalScale," "textAlign," and etc
  */
 export default function UCurrencyField({
-  inputPrefix,
-  decimalScale,
-  fixedDecimalScale,
-  textAlign,
+  inputPrefix = '$ ',
+  decimalScale = 2,
+  fixedDecimalScale = true,
+  textAlign = 'right',
   inputProps,
   ...props
 }) {
@@ -62,10 +62,3 @@ UCurrencyField.propTypes = {
   // If true it add 0s to match given decimalScale.
   fixedDecimalScale: PropTypes.bool,
 }
-
-UCurrencyField.defaultProps = {
-  inputPrefix: '$ ',
-  decimalScale: 2,
-  fixedDecimalScale: true,
-  textAlign: 'right',
-}

src/components/UDatePicker/UDatePicker.js

@@ -12,14 +12,16 @@ import UTextField from './../UTextField'
  * Please have look at [Material UI Date Picker](https://mui.com/x/react-date-pickers/date-picker/#main-content) for more details
  */
 export default function UDatePicker({
-  inputFormat,
+  inputFormat = 'dd/MM/yyyy',
   label,
   onChange,
   value,
   showLabelHelp,
-  InputLabelProps,
+  InputLabelProps = {
+    shrink: true,
+  },
   InputLabelHelpProps,
-  inputVariant,
+  inputVariant = 'outlined',
   ...others
 }) {
   return (
@@ -62,11 +64,3 @@ UDatePicker.propTypes = {
   /** Props applied to the InputLabel element.*/
   InputLabelProps: PropTypes.object,
 }
-
-UDatePicker.defaultProps = {
-  inputVariant: 'outlined',
-  InputLabelProps: {
-    shrink: true,
-  },
-  inputFormat: 'dd/MM/yyyy',
-}

src/components/UErrorAlert/UErrorAlert.js

@@ -4,7 +4,7 @@ import PropTypes from 'prop-types'
 /**
  * UErrorAlert is a component to display error message to the user
  */
-export default function UErrorAlert({ error, preformatted, onClose }) {
+export default function UErrorAlert({ error, preformatted = false, onClose }) {
   return (
     <React.Fragment>
       {error && (
@@ -30,7 +30,3 @@ UErrorAlert.propTypes = {
   /** Triggers close action of error alert */
   onClose: PropTypes.func,
 }
-
-UErrorAlert.defaultProps = {
-  preformatted: false,
-}

src/components/UGraphPeoplePicker/UGraphPeoplePicker.js

@@ -26,8 +26,8 @@ export default function UGraphPeoplePicker({
   label,
   options,
   onBlur,
-  helpText,
-  isMultiple,
+  helpText = '',
+  isMultiple = true,
   searchUsers,
   components,
   ...props
@@ -125,8 +125,3 @@ UGraphPeoplePicker.propTypes = {
   /** Props applied to the input label help element. E.g.  InputLabelHelpProps={{type:'link', label:'Help', link:'unicef.github.io', icon, tooltipTitle: 'Tooltip title', tooltipPlacement: 'bottom}} */
   InputLabelHelpProps: PropTypes.object,
 }
-
-UGraphPeoplePicker.defaultProps = {
-  helpText: '',
-  isMultiple: true,
-}

src/components/URadioButtons/URadioButtons.js

@@ -35,7 +35,7 @@ export default function URadioButtons({
   value,
   onChange,
   isReadOnly,
-  variant,
+  variant = 'row',
   optionLabels,
   optionValues,
 }) {
@@ -85,7 +85,3 @@ URadioButtons.propTypes = {
   /**array of radio button values */
   optionValues: PropTypes.array,
 }
-
-URadioButtons.defaultProps = {
-  variant: 'row',
-}

src/components/USearchBox/USearchBox.js

@@ -48,10 +48,10 @@ const StyledInputAdornment = styled(InputAdornment)(({ theme }) => ({
 export default function USearchBox({
   value,
   onSearch,
-  placeholder,
+  placeholder = 'Search',
   inputProps,
   className,
-  showSeparator,
+  showSeparator = true,
   iconLabel,
   ...rest
 }) {
@@ -149,8 +149,3 @@ USearchBox.propTypes = {
   /** Label next to the search icon */
   iconLabel: PropTypes.string,
 }
-
-USearchBox.defaultProps = {
-  placeholder: 'Search',
-  showSeparator: true,
-}