From 620de766295b832c80d0e6e3d2d930273c6963ee Mon Sep 17 00:00:00 2001 From: grathor Date: Wed, 31 Jul 2024 12:48:49 +0530 Subject: [PATCH 1/4] Blur event on positive number --- example/src/components/FormValidator.js | 5 +++ src/components/Shared/PositiveNumberFormat.js | 33 +++++++++++-------- 2 files changed, 25 insertions(+), 13 deletions(-) diff --git a/example/src/components/FormValidator.js b/example/src/components/FormValidator.js index e465b1ad..35cb60cd 100644 --- a/example/src/components/FormValidator.js +++ b/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} /> diff --git a/src/components/Shared/PositiveNumberFormat.js b/src/components/Shared/PositiveNumberFormat.js index b44d2640..845a9c38 100644 --- a/src/components/Shared/PositiveNumberFormat.js +++ b/src/components/Shared/PositiveNumberFormat.js @@ -5,18 +5,29 @@ 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 ( + onBlur({ + target: { + name: name, + value: value, + }, + }) + } onValueChange={(values, sourceInfo) => { onChange({ target: { @@ -36,10 +47,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 +66,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, -} From 6c02751857a7d642578e967ec25cc24b8ba0b598 Mon Sep 17 00:00:00 2001 From: grathor Date: Wed, 31 Jul 2024 12:49:00 +0530 Subject: [PATCH 2/4] default props removed --- .../ActiveAutoComplete/ActiveAutoComplete.js | 15 ++----- .../ActiveCurrencyField.js | 15 ++----- .../ActiveDatePicker/ActiveDatePicker.js | 16 +++----- src/components/Shared/InputLabelHelp.js | 15 ++----- src/components/UAriaLive/UAriaLive.js | 13 +++---- src/components/UAsyncBadge/UAsyncBadge.js | 9 +---- src/components/UAvatarImage/UAvatarImage.js | 21 +++------- src/components/UButton/UButton.js | 17 ++++---- .../UConfirmationButton.js | 39 +++++++------------ src/components/UContent/UContent.js | 6 +-- src/components/UHeader/UHeader.js | 21 +++------- .../UPageLoadingProgress.js | 7 +--- src/components/USideBar/USideBar.js | 15 ++++--- 13 files changed, 66 insertions(+), 143 deletions(-) diff --git a/src/components/ActiveAutoComplete/ActiveAutoComplete.js b/src/components/ActiveAutoComplete/ActiveAutoComplete.js index f3f4822e..b4213022 100644 --- a/src/components/ActiveAutoComplete/ActiveAutoComplete.js +++ b/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: [], -} diff --git a/src/components/ActiveCurrencyField/ActiveCurrencyField.js b/src/components/ActiveCurrencyField/ActiveCurrencyField.js index e6f148ce..b1a8c07d 100644 --- a/src/components/ActiveCurrencyField/ActiveCurrencyField.js +++ b/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', -} diff --git a/src/components/ActiveDatePicker/ActiveDatePicker.js b/src/components/ActiveDatePicker/ActiveDatePicker.js index 8e75fc40..7a03f668 100644 --- a/src/components/ActiveDatePicker/ActiveDatePicker.js +++ b/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', -} diff --git a/src/components/Shared/InputLabelHelp.js b/src/components/Shared/InputLabelHelp.js index 3c08df28..042b7e0c 100644 --- a/src/components/Shared/InputLabelHelp.js +++ b/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 ( @@ -111,10 +111,3 @@ InputLabelHelp.propTypes = { // Tooltip placement tooltipPlacement: PropTypes.string, } - -InputLabelHelp.defaultProps = { - label: 'Help', - type: 'tooltip', - icon: null, - tooltipPlacement: 'top', -} diff --git a/src/components/UAriaLive/UAriaLive.js b/src/components/UAriaLive/UAriaLive.js index 91fdd68e..adb8566f 100644 --- a/src/components/UAriaLive/UAriaLive.js +++ b/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 ( ({ * 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, -} diff --git a/src/components/UButton/UButton.js b/src/components/UButton/UButton.js index b3a0a9ba..a973e41d 100644 --- a/src/components/UButton/UButton.js +++ b/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, -} diff --git a/src/components/UConfirmationButton/UConfirmationButton.js b/src/components/UConfirmationButton/UConfirmationButton.js index a1e67ece..633effa5 100644 --- a/src/components/UConfirmationButton/UConfirmationButton.js +++ b/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 = , + 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: , - buttonVariant: 'text', - confirmVariant: 'menu', -} diff --git a/src/components/UContent/UContent.js b/src/components/UContent/UContent.js index ae6482ef..4763e2d4 100644 --- a/src/components/UContent/UContent.js +++ b/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 (
@@ -33,7 +33,3 @@ UContent.propTypes = { /** Height of the header including MainMenu */ headerHeight: PropTypes.number, } - -UContent.defaultProps = { - headerHeight: 64, -} diff --git a/src/components/UHeader/UHeader.js b/src/components/UHeader/UHeader.js index 70354ac0..54658bc0 100644 --- a/src/components/UHeader/UHeader.js +++ b/src/components/UHeader/UHeader.js @@ -76,17 +76,17 @@ const StyledAppBar = styled(AppBar, { export default function UHeader(props) { const { - position, + position = 'fixed', applicationName, - showHamburgerMenu, - hideLogo, + showHamburgerMenu = true, + hideLogo = false, logo, - hideLogoBorderLine, - logoUrl, + hideLogoBorderLine = true, + logoUrl = '/', onLogoClick, openDrawer, toggleDrawer, - elevation, + elevation = 4, bgColor, } = props @@ -211,12 +211,3 @@ UHeader.propTypes = { /** AppBar elevation value to handle the box shadow effect */ elevation: PropTypes.number, } - -UHeader.defaultProps = { - position: 'fixed', - showHamburgerMenu: true, - hideLogo: false, - logoUrl: '/', - hideLogoBorderLine: true, - elevation: 4, -} diff --git a/src/components/UPageLoadingProgress/UPageLoadingProgress.js b/src/components/UPageLoadingProgress/UPageLoadingProgress.js index 0e148aa8..869e0450 100644 --- a/src/components/UPageLoadingProgress/UPageLoadingProgress.js +++ b/src/components/UPageLoadingProgress/UPageLoadingProgress.js @@ -22,8 +22,7 @@ const StyledBox = styled(Box)(() => ({ * 1. Display circular progress * 2. Display text message */ -export default function UPageLoadingProgress(props) { - const { text } = props +export default function UPageLoadingProgress({ text = '' }) { return ( ({ * * USideBar must be wrapped inside the ULayout(Parent Component). */ -export default function USideBar(props) { - const { headerHeight, width, ...others } = props +export default function USideBar({ + headerHeight = 64, + width = 300, + children, + ...others +}) { return (
- {props.children} + {children} ) @@ -58,8 +62,3 @@ USideBar.propTypes = { */ width: PropTypes.number, } - -USideBar.defaultProps = { - headerHeight: 64, - width: 300, -} From 9045565d9d3c36d998ef0e9244f54815de33403b Mon Sep 17 00:00:00 2001 From: grathor Date: Wed, 31 Jul 2024 12:51:21 +0530 Subject: [PATCH 3/4] version bump --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 701e502a..5042cc52 100644 --- a/package.json +++ b/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": [ From 8105ef279d5cfaa9ee5171a7a34656324f7691c6 Mon Sep 17 00:00:00 2001 From: grathor Date: Wed, 31 Jul 2024 14:06:27 +0530 Subject: [PATCH 4/4] null check --- src/components/Shared/PositiveNumberFormat.js | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/Shared/PositiveNumberFormat.js b/src/components/Shared/PositiveNumberFormat.js index 845a9c38..f28f249a 100644 --- a/src/components/Shared/PositiveNumberFormat.js +++ b/src/components/Shared/PositiveNumberFormat.js @@ -21,6 +21,7 @@ export default function PositiveNumberFormat({ value={value} getInputRef={inputRef} onBlur={() => + onBlur && onBlur({ target: { name: name,