Merge pull request #165 from unicef/feature/positive-number-blur-event

Feature/positive number blur event

example/src/components/FormValidator.js

@@ -115,6 +115,10 @@ export default function FormValidator() {
     setValues({ ...values, [name]: value })
   }
 
+  const handleBlur = event => {
+    console.log('handleBlur', event)
+  }
+
   const [itemValue, setItemValue] = useState('')
   const [itemList, setItemList] = useState([])
 
@@ -170,6 +174,7 @@ export default function FormValidator() {
               onChange={e =>
                 setValues({ ...values, positiveInteger: e.target.value })
               }
+              onBlur={handleBlur}
             />
           </UValidatorForm>
         </Grid>

package.json

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

src/components/ActiveAutoComplete/ActiveAutoComplete.js

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

src/components/ActiveCurrencyField/ActiveCurrencyField.js

@@ -6,10 +6,10 @@ import ActiveFormPositiveInteger from '../ActiveFormPositiveInteger'
  * The ActiveCurrencyField is for creating currency input fields. It accepts several props for customization, including "inputPrefix," "decimalScale," "fixedDecimalScale," "textAlign," and etc. The cool feature with ActiveCurrencyField is you can read and write at the same place.
  */
 export default function ActiveCurrencyField({
-  inputPrefix,
-  decimalScale,
-  fixedDecimalScale,
-  textAlign,
+  inputPrefix = '$ ',
+  decimalScale = 2,
+  fixedDecimalScale = true,
+  textAlign = 'right',
   inputProps,
   ...props
 }) {
@@ -70,10 +70,3 @@ ActiveCurrencyField.propTypes = {
   /** Input text align */
   textAlign: PropTypes.string,
 }
-
-ActiveCurrencyField.defaultProps = {
-  inputPrefix: '$ ',
-  decimalScale: 2,
-  fixedDecimalScale: true,
-  textAlign: 'right',
-}

src/components/ActiveDatePicker/ActiveDatePicker.js

@@ -48,14 +48,16 @@ const StyledBox = styled(Box, {
  * Please have look at [Material UI Date Picker](https://mui.com/x/api/date-pickers/date-picker/) for more details
  */
 export default function ActiveDatePicker({
-  inputFormat,
+  inputFormat = 'dd/MM/yyyy',
   label,
   onChange,
   value,
   showLabelHelp,
-  InputLabelProps,
+  InputLabelProps = {
+    shrink: true,
+  },
   InputLabelHelpProps,
-  inputVariant,
+  inputVariant = 'outlined',
   interactiveMode,
   readOnly,
   ...others
@@ -110,11 +112,3 @@ ActiveDatePicker.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,
 }
-
-ActiveDatePicker.defaultProps = {
-  inputVariant: 'outlined',
-  InputLabelProps: {
-    shrink: true,
-  },
-  inputFormat: 'dd/MM/yyyy',
-}

src/components/Shared/InputLabelHelp.js

@@ -47,12 +47,12 @@ const StyledBox = styled(Box)(({ theme }) => ({
 
 export default function InputLabelHelp({
   inputLabel,
-  type,
-  label,
+  type = 'tooltip',
+  label = 'Help',
   link,
-  icon,
+  icon = null,
   tooltipTitle,
-  tooltipPlacement,
+  tooltipPlacement = 'top',
 }) {
   return (
     <Fragment>
@@ -111,10 +111,3 @@ InputLabelHelp.propTypes = {
   // Tooltip placement
   tooltipPlacement: PropTypes.string,
 }
-
-InputLabelHelp.defaultProps = {
-  label: 'Help',
-  type: 'tooltip',
-  icon: null,
-  tooltipPlacement: 'top',
-}

src/components/Shared/PositiveNumberFormat.js

@@ -5,18 +5,30 @@ import NumberFormat from 'react-number-format'
 export default function PositiveNumberFormat({
   inputRef,
   name,
+  value,
   onChange,
-  thousandSeparator,
-  isNumericString,
-  allowNegative,
-  decimalScale,
-  fixedDecimalScale,
+  onBlur,
+  thousandSeparator = true,
+  isNumericString = false,
+  allowNegative = false,
+  decimalScale = 0,
+  fixedDecimalScale = false,
   ...other
 }) {
   return (
     <NumberFormat
       {...other}
+      value={value}
       getInputRef={inputRef}
+      onBlur={() =>
+        onBlur &&
+        onBlur({
+          target: {
+            name: name,
+            value: value,
+          },
+        })
+      }
       onValueChange={(values, sourceInfo) => {
         onChange({
           target: {
@@ -36,10 +48,14 @@ export default function PositiveNumberFormat({
 }
 
 PositiveNumberFormat.propTypes = {
+  // field value
+  value: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
   // Input ref
   inputRef: PropTypes.func.isRequired,
   // On each onChange value will be formatted
   onChange: PropTypes.func.isRequired,
+  // callback function to be called on blur
+  onBlur: PropTypes.func,
   // Thousand separator
   thousandSeparator: PropTypes.bool,
   // Is numeric string
@@ -51,11 +67,3 @@ PositiveNumberFormat.propTypes = {
   //If true it add 0s to match given decimalScale.
   fixedDecimalScale: PropTypes.bool,
 }
-
-PositiveNumberFormat.defaultProps = {
-  thousandSeparator: true,
-  isNumericString: false,
-  allowNegative: false,
-  decimalScale: 0,
-  fixedDecimalScale: false,
-}

src/components/UAriaLive/UAriaLive.js

@@ -18,7 +18,12 @@ const StyledBox = styled(Box)(() => ({
  * This component is intended to generate a wrapper with the aria-live property.
  * Refer for [Aria live](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Live_Regions )
  */
-export default function UAriaLive({ text, type, role, ariaAtomic }) {
+export default function UAriaLive({
+  text,
+  type = 'polite',
+  role = 'log',
+  ariaAtomic = false,
+}) {
   return (
     <StyledBox
       aria-live={type}
@@ -41,9 +46,3 @@ UAriaLive.propTypes = {
   /** Aria role */
   role: PropTypes.string,
 }
-
-UAriaLive.defaultProps = {
-  type: 'polite',
-  role: 'log',
-  ariaAtomic: false,
-}

src/components/UAsyncBadge/UAsyncBadge.js

@@ -49,8 +49,8 @@ export default function UAsyncBadge({
   variant,
   text,
   visible,
-  ariaRole,
-  ariaLive,
+  ariaRole = 'alert',
+  ariaLive = 'assertive',
   onReset,
 }) {
   const chipRef = useRef()
@@ -106,8 +106,3 @@ UAsyncBadge.propTypes = {
   /** Aria live of the badge */
   ariaLive: PropTypes.oneOf(['polite', 'assertive', 'off']),
 }
-
-UAsyncBadge.defaultProps = {
-  ariaRole: 'alert',
-  ariaLive: 'assertive',
-}

src/components/UAvatarImage/UAvatarImage.js

@@ -56,12 +56,12 @@ const StyledBox = styled(Box)(({ theme }) => ({
  * If no image url from source app first letter of the user email will be displayed
  */
 export default function UAvatarImage({
-  userEmail,
-  size,
-  mode,
-  tooltipText,
-  count,
-  zIndexValue,
+  userEmail = '',
+  size = 'default',
+  mode = '',
+  tooltipText = '',
+  count = 0,
+  zIndexValue = 0,
   loadPhoto,
 }) {
   const [photoUrl, setPhotoUrl] = useState('')
@@ -116,12 +116,3 @@ UAvatarImage.propTypes = {
   /** get photo url from the respective application */
   loadPhoto: PropTypes.func,
 }
-
-UAvatarImage.defaultProps = {
-  userEmail: '',
-  size: 'default', // image displays default size
-  mode: '',
-  tooltipText: '',
-  count: 0,
-  zIndexValue: 0,
-}

src/components/UButton/UButton.js

@@ -34,9 +34,13 @@ const StyledBox = styled(Box)(({ theme }) => ({
  * Custom advanced button with unicef colors and also it has spinning effect in the button
  *
  * */
-export default function UButton(props) {
-  const { spinButton, loading, variant, color, ...others } = props
-
+export default function UButton({
+  spinButton = false,
+  loading = false,
+  variant = 'contained',
+  color = 'primary',
+  ...others
+}) {
   function getVariant(variant) {
     switch (variant) {
       case 'uDefault':
@@ -95,10 +99,3 @@ UButton.propTypes = {
   /**  color of the button */
   color: PropTypes.string,
 }
-
-UButton.defaultProps = {
-  color: 'primary',
-  variant: 'contained',
-  spinButton: false,
-  loading: false,
-}

src/components/UConfirmationButton/UConfirmationButton.js

@@ -53,20 +53,19 @@ const CONFIRMATION_VARIANTS = {
  * This button displays the confirmation where user has clicked the button
  * It has two varint icon/menu item
  */
-export default function UConfirmationButton(props) {
-  const {
-    onConfirm,
-    id,
-    buttonText,
-    enabled,
-    variant,
-    icon,
-    confirmText,
-    confirmActionText,
-    cancelText,
-    buttonVariant,
-    confirmVariant,
-  } = props
+export default function UConfirmationButton({
+  onConfirm,
+  id,
+  buttonText = 'Delete',
+  enabled = true,
+  variant = 'icon',
+  icon = <DeleteOutlinedIcon />,
+  confirmText = 'Confirm deletion?',
+  confirmActionText = 'Yes, delete',
+  cancelText = 'No',
+  buttonVariant = 'text',
+  confirmVariant = 'menu',
+}) {
   const [deleteAnchorEl, setDeleteAnchorEl] = useState(null)
   const [openDialog, setOpenDialog] = useState(false)
 
@@ -192,15 +191,3 @@ UConfirmationButton.propTypes = {
   /** Button variant applied to menuItem button */
   buttonVariant: PropTypes.string,
 }
-
-UConfirmationButton.defaultProps = {
-  buttonText: 'Delete',
-  variant: 'icon',
-  enabled: true,
-  confirmText: 'Confirm deletion?',
-  confirmActionText: 'Yes, delete',
-  cancelText: 'No',
-  icon: <DeleteOutlinedIcon />,
-  buttonVariant: 'text',
-  confirmVariant: 'menu',
-}

src/components/UContent/UContent.js

@@ -20,7 +20,7 @@ const Root = styled('main')(({ theme }) => ({
  * * Children under Ucontent will be display in the main content.
  * * UContent must be wrapped inside the ULayout.
  */
-export default function UContent({ headerHeight, children }) {
+export default function UContent({ headerHeight = 64, children }) {
   return (
     <Root className={classes.content}>
       <div style={{ minHeight: headerHeight }} />
@@ -33,7 +33,3 @@ UContent.propTypes = {
   /** Height of the header including MainMenu */
   headerHeight: PropTypes.number,
 }
-
-UContent.defaultProps = {
-  headerHeight: 64,
-}