From ed7fc353c9ad8abd2d3ed2a8f94ceb84a01aa895 Mon Sep 17 00:00:00 2001 From: "vinu.ganesan" Date: Fri, 12 Jan 2024 17:33:49 +0530 Subject: [PATCH 1/3] Fix required attribute in USelectPicker --- package.json | 2 +- src/components/USelectPicker/Input.js | 11 ++++++++++- src/components/USelectPicker/InputComponent.js | 9 ++++++++- 3 files changed, 19 insertions(+), 3 deletions(-) diff --git a/package.json b/package.json index 6f6d60263..e9dc304ad 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@unicef/material-ui", - "version": "0.12.1", + "version": "0.12.2", "description": "UNICEF theme and components of material-ui for react", "main": "index.js", "files": [ diff --git a/src/components/USelectPicker/Input.js b/src/components/USelectPicker/Input.js index d2022004e..a0ad027c0 100644 --- a/src/components/USelectPicker/Input.js +++ b/src/components/USelectPicker/Input.js @@ -3,6 +3,7 @@ import { components } from 'react-select' import PropTypes from 'prop-types' export default function Input(props) { + console.log(props) let describedBy = props['aria-describedby'] //react-select generated aria-describedby if (!props.hasValue) { const customDescribedBy = props.selectProps['aria-describedby'] //custom aria-describedby passed through the props @@ -14,7 +15,15 @@ export default function Input(props) { : undefined } - return + return ( + + ) } Input.propTypes = { diff --git a/src/components/USelectPicker/InputComponent.js b/src/components/USelectPicker/InputComponent.js index 398d70cd8..b670031a2 100644 --- a/src/components/USelectPicker/InputComponent.js +++ b/src/components/USelectPicker/InputComponent.js @@ -2,7 +2,14 @@ import React from 'react' import PropTypes from 'prop-types' export default function InputComponent({ inputRef, ...props }) { - return
+ return ( +
+ ) } InputComponent.propTypes = { From b356d254cfe03cbc5d5d04e525de972f50322318 Mon Sep 17 00:00:00 2001 From: "vinu.ganesan" Date: Fri, 12 Jan 2024 17:35:05 +0530 Subject: [PATCH 2/3] Code cleanup --- src/components/USelectPicker/Input.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/USelectPicker/Input.js b/src/components/USelectPicker/Input.js index a0ad027c0..ad099b153 100644 --- a/src/components/USelectPicker/Input.js +++ b/src/components/USelectPicker/Input.js @@ -3,7 +3,6 @@ import { components } from 'react-select' import PropTypes from 'prop-types' export default function Input(props) { - console.log(props) let describedBy = props['aria-describedby'] //react-select generated aria-describedby if (!props.hasValue) { const customDescribedBy = props.selectProps['aria-describedby'] //custom aria-describedby passed through the props From 77ef633577cefd29446e68d3a854700472b79be8 Mon Sep 17 00:00:00 2001 From: "vinu.ganesan" Date: Fri, 12 Jan 2024 17:57:52 +0530 Subject: [PATCH 3/3] KeyboardButtonProps updated --- .../ActiveKeyboardDatePicker/ActiveKeyboardDatePicker.js | 5 +++++ .../ActiveKeyboardDateTimePicker.js | 5 +++++ .../ActiveKeyboardTimePicker/ActiveKeyboardTimePicker.js | 5 +++++ 3 files changed, 15 insertions(+) diff --git a/src/components/ActiveKeyboardDatePicker/ActiveKeyboardDatePicker.js b/src/components/ActiveKeyboardDatePicker/ActiveKeyboardDatePicker.js index 78c96f0ee..65d4d1445 100644 --- a/src/components/ActiveKeyboardDatePicker/ActiveKeyboardDatePicker.js +++ b/src/components/ActiveKeyboardDatePicker/ActiveKeyboardDatePicker.js @@ -70,6 +70,7 @@ export default function ActiveKeyboardDatePicker(props) { showLabelHelp, InputLabelHelpProps, label, + KeyboardButtonProps, ...others } = props @@ -113,6 +114,7 @@ export default function ActiveKeyboardDatePicker(props) { }} readOnly={readOnly} KeyboardButtonProps={{ + ...KeyboardButtonProps, classes: { root: `${!interactiveMode && !readOnly ? '' : hideIcon}`, }, @@ -170,6 +172,8 @@ ActiveKeyboardDatePicker.propTypes = { showLabelHelp: PropTypes.bool, /** 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, + /** Keyboard button props */ + KeyboardButtonProps: PropTypes.object, } ActiveKeyboardDatePicker.defaultProps = { @@ -177,4 +181,5 @@ ActiveKeyboardDatePicker.defaultProps = { autoOk: true, variant: 'inline', format: 'dd/MM/yyyy', + KeyboardButtonProps: {}, } diff --git a/src/components/ActiveKeyboardDateTimePicker/ActiveKeyboardDateTimePicker.js b/src/components/ActiveKeyboardDateTimePicker/ActiveKeyboardDateTimePicker.js index 95cc8ed05..52f8f2c3d 100644 --- a/src/components/ActiveKeyboardDateTimePicker/ActiveKeyboardDateTimePicker.js +++ b/src/components/ActiveKeyboardDateTimePicker/ActiveKeyboardDateTimePicker.js @@ -69,6 +69,7 @@ export default function ActiveKeyboardDateTimePicker(props) { showLabelHelp, InputLabelHelpProps, label, + KeyboardButtonProps, ...others } = props @@ -112,6 +113,7 @@ export default function ActiveKeyboardDateTimePicker(props) { }} readOnly={readOnly} KeyboardButtonProps={{ + ...KeyboardButtonProps, classes: { root: `${!interactiveMode && !readOnly ? '' : hideIcon}`, }, @@ -169,6 +171,8 @@ ActiveKeyboardDateTimePicker.propTypes = { showLabelHelp: PropTypes.bool, /** 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, + /** Keyboard button props */ + KeyboardButtonProps: PropTypes.object, } ActiveKeyboardDateTimePicker.defaultProps = { @@ -176,4 +180,5 @@ ActiveKeyboardDateTimePicker.defaultProps = { autoOk: true, variant: 'inline', format: 'dd/MM/yyyy hh:mm a', + KeyboardButtonProps: {}, } diff --git a/src/components/ActiveKeyboardTimePicker/ActiveKeyboardTimePicker.js b/src/components/ActiveKeyboardTimePicker/ActiveKeyboardTimePicker.js index 51292f8b9..dac8e719a 100644 --- a/src/components/ActiveKeyboardTimePicker/ActiveKeyboardTimePicker.js +++ b/src/components/ActiveKeyboardTimePicker/ActiveKeyboardTimePicker.js @@ -68,6 +68,7 @@ export default function ActiveKeyboardTimePicker(props) { showLabelHelp, InputLabelHelpProps, label, + KeyboardButtonProps, ...others } = props @@ -109,6 +110,7 @@ export default function ActiveKeyboardTimePicker(props) { }} readOnly={readOnly} KeyboardButtonProps={{ + ...KeyboardButtonProps, classes: { root: `${!interactiveMode && !readOnly ? '' : hideIcon}`, }, @@ -162,10 +164,13 @@ ActiveKeyboardTimePicker.propTypes = { showLabelHelp: PropTypes.bool, /** 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, + /** Keyboard button props */ + KeyboardButtonProps: PropTypes.object, } ActiveKeyboardTimePicker.defaultProps = { inputVariant: 'outlined', autoOk: true, variant: 'inline', + KeyboardButtonProps: {}, }