From 32260355891144eaf40093e7f1317e44a7ec78d9 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Wed, 5 Mar 2025 09:11:15 +0530 Subject: [PATCH 1/7] fix-1847 truncate fix for selection component. --- src/Components/Inputs/Select/index.jsx | 38 ++++++++++++++++++++++++++ src/Utils/truncateUtils.jsx | 32 ++++++++++++++++++++++ 2 files changed, 70 insertions(+) create mode 100644 src/Utils/truncateUtils.jsx diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx index f0a1d11c0..f6accc415 100644 --- a/src/Components/Inputs/Select/index.jsx +++ b/src/Components/Inputs/Select/index.jsx @@ -4,6 +4,8 @@ import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material" import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import "./index.css"; +import { useEffect, useRef, useState } from "react"; +import { renderTruncatedValue } from "../../../Utils/truncateUtils.jsx"; /** * @component @@ -50,7 +52,12 @@ const Select = ({ sx, name = "", labelControlSpacing = 2, + truncate = false, + maxStringLength = 10, }) => { + const [maxLength, setMaxLength] = useState(0); // Initially set maxLength to 0 + const selectRef = useRef(null); // Reference for the Select container + const theme = useTheme(); const itemStyles = { fontSize: "var(--env-var-font-size-medium)", @@ -59,6 +66,31 @@ const Select = ({ margin: theme.spacing(2), }; + // Dynamically adjust maxLength based on window width + useEffect(() => { + if (!truncate) return; // If truncate is false, do not run this effect + + const calculateMaxLength = () => { + console.log(selectRef); + if (selectRef.current) { + const width = selectRef.current.offsetWidth; + const calculatedMaxLength = Math.floor(width / maxStringLength); + setMaxLength(calculatedMaxLength); + } + }; + calculateMaxLength(); + window.addEventListener("resize", calculateMaxLength); + + return () => { + window.removeEventListener("resize", calculateMaxLength); // Cleanup on unmount + }; + }, [maxStringLength, truncate]); + + // Get the selected item's name + const selectedItemName = truncate + ? items.find((item) => item._id === value)?.name // Only calculate if truncate is true + : null; + return ( )} + renderTruncatedValue(selectedItemName, truncate, maxLength, placeholder) + } > {placeholder && ( {truncateTextWithDottedEnds(displayName, maxLength)} + ) : ( + {displayName} + ); +}; From a7a8bb2ea8dcb717102b6d3f2116ea3fd942f6e5 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Wed, 5 Mar 2025 09:16:49 +0530 Subject: [PATCH 2/7] removed all console logs. --- src/Components/Inputs/Select/index.jsx | 1 - src/Utils/truncateUtils.jsx | 1 - 2 files changed, 2 deletions(-) diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx index f6accc415..ec5f2d012 100644 --- a/src/Components/Inputs/Select/index.jsx +++ b/src/Components/Inputs/Select/index.jsx @@ -71,7 +71,6 @@ const Select = ({ if (!truncate) return; // If truncate is false, do not run this effect const calculateMaxLength = () => { - console.log(selectRef); if (selectRef.current) { const width = selectRef.current.offsetWidth; const calculatedMaxLength = Math.floor(width / maxStringLength); diff --git a/src/Utils/truncateUtils.jsx b/src/Utils/truncateUtils.jsx index 3bb38e9e2..2474bae4f 100644 --- a/src/Utils/truncateUtils.jsx +++ b/src/Utils/truncateUtils.jsx @@ -21,7 +21,6 @@ export const renderTruncatedValue = function ( maxLength, placeholder ) { - console.log(maxLength); if (isEmpty(displayName)) return placeholder; return truncate ? ( From 3376186ff34ddf533c87763a480eb53ed33a8b86 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Wed, 5 Mar 2025 09:21:08 +0530 Subject: [PATCH 3/7] Refactored the code. --- src/Components/Inputs/Select/index.jsx | 5 ++--- src/Utils/truncateUtils.jsx | 2 +- 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx index ec5f2d012..a3d0a5608 100644 --- a/src/Components/Inputs/Select/index.jsx +++ b/src/Components/Inputs/Select/index.jsx @@ -55,8 +55,8 @@ const Select = ({ truncate = false, maxStringLength = 10, }) => { - const [maxLength, setMaxLength] = useState(0); // Initially set maxLength to 0 - const selectRef = useRef(null); // Reference for the Select container + const [maxLength, setMaxLength] = useState(0); + const selectRef = useRef(null); const theme = useTheme(); const itemStyles = { @@ -85,7 +85,6 @@ const Select = ({ }; }, [maxStringLength, truncate]); - // Get the selected item's name const selectedItemName = truncate ? items.find((item) => item._id === value)?.name // Only calculate if truncate is true : null; diff --git a/src/Utils/truncateUtils.jsx b/src/Utils/truncateUtils.jsx index 2474bae4f..579b71622 100644 --- a/src/Utils/truncateUtils.jsx +++ b/src/Utils/truncateUtils.jsx @@ -1,5 +1,5 @@ // src/utils/truncateUtils.js -import { isEmpty } from "./stringUtils"; // assuming you have the stringUtils file +import { isEmpty } from "./stringUtils"; /** * Utility function to render a truncated value with an optional title. From 14b5cfc053444b06471cae06e086be98c9dcbbda Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Wed, 5 Mar 2025 11:22:45 +0530 Subject: [PATCH 4/7] selectedItemName value to empty --- src/Components/Inputs/Select/index.jsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx index a3d0a5608..91d08cf18 100644 --- a/src/Components/Inputs/Select/index.jsx +++ b/src/Components/Inputs/Select/index.jsx @@ -87,7 +87,7 @@ const Select = ({ const selectedItemName = truncate ? items.find((item) => item._id === value)?.name // Only calculate if truncate is true - : null; + : ""; return ( Date: Wed, 5 Mar 2025 21:03:03 +0530 Subject: [PATCH 5/7] Changed the logic to only depend on css styles and typography component. --- src/Components/Inputs/Select/index.jsx | 60 ++++++++----------- .../Components/OptionsHeader/index.jsx | 1 - src/Utils/truncateUtils.jsx | 31 ---------- 3 files changed, 24 insertions(+), 68 deletions(-) delete mode 100644 src/Utils/truncateUtils.jsx diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx index 91d08cf18..0d183d4e3 100644 --- a/src/Components/Inputs/Select/index.jsx +++ b/src/Components/Inputs/Select/index.jsx @@ -4,8 +4,6 @@ import { MenuItem, Select as MuiSelect, Stack, Typography } from "@mui/material" import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown"; import "./index.css"; -import { useEffect, useRef, useState } from "react"; -import { renderTruncatedValue } from "../../../Utils/truncateUtils.jsx"; /** * @component @@ -52,12 +50,8 @@ const Select = ({ sx, name = "", labelControlSpacing = 2, - truncate = false, - maxStringLength = 10, + maxWidthValue = 250, }) => { - const [maxLength, setMaxLength] = useState(0); - const selectRef = useRef(null); - const theme = useTheme(); const itemStyles = { fontSize: "var(--env-var-font-size-medium)", @@ -66,29 +60,6 @@ const Select = ({ margin: theme.spacing(2), }; - // Dynamically adjust maxLength based on window width - useEffect(() => { - if (!truncate) return; // If truncate is false, do not run this effect - - const calculateMaxLength = () => { - if (selectRef.current) { - const width = selectRef.current.offsetWidth; - const calculatedMaxLength = Math.floor(width / maxStringLength); - setMaxLength(calculatedMaxLength); - } - }; - calculateMaxLength(); - window.addEventListener("resize", calculateMaxLength); - - return () => { - window.removeEventListener("resize", calculateMaxLength); // Cleanup on unmount - }; - }, [maxStringLength, truncate]); - - const selectedItemName = truncate - ? items.find((item) => item._id === value)?.name // Only calculate if truncate is true - : ""; - return ( )} - renderTruncatedValue(selectedItemName, truncate, maxLength, placeholder) - } + renderValue={(selected) => { + const selectedItem = items.find((item) => item._id === selected); + const displayName = selectedItem ? selectedItem.name : placeholder; + return ( + + {displayName} + + ); + }} > {placeholder && ( diff --git a/src/Utils/truncateUtils.jsx b/src/Utils/truncateUtils.jsx deleted file mode 100644 index 579b71622..000000000 --- a/src/Utils/truncateUtils.jsx +++ /dev/null @@ -1,31 +0,0 @@ -// src/utils/truncateUtils.js -import { isEmpty } from "./stringUtils"; - -/** - * Utility function to render a truncated value with an optional title. - * @param {string} displayName - The name or text to display. - * @param {number} maxLength - The maximum length of the text. - * @param {string} placeholder - Placeholder text if no value is provided. - * @returns {JSX.Element} - The JSX element for the rendered value. - * - */ - -const truncateTextWithDottedEnds = function (text, maxLength) { - if (!text || text.length <= maxLength) return text; - return `${text.substring(0, maxLength)}...`; -}; - -export const renderTruncatedValue = function ( - displayName, - truncate, - maxLength, - placeholder -) { - if (isEmpty(displayName)) return placeholder; - - return truncate ? ( - {truncateTextWithDottedEnds(displayName, maxLength)} - ) : ( - {displayName} - ); -}; From 5c0c33a339843e69b3574a184ade5da44e5073ba Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Thu, 6 Mar 2025 00:27:37 +0530 Subject: [PATCH 6/7] Made maxwidth to be default 100% and if the number is provided then we truncate. --- src/Components/Inputs/Select/index.jsx | 18 ++++++++++-------- .../Components/OptionsHeader/index.jsx | 1 + 2 files changed, 11 insertions(+), 8 deletions(-) diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx index 0d183d4e3..1cb35c19c 100644 --- a/src/Components/Inputs/Select/index.jsx +++ b/src/Components/Inputs/Select/index.jsx @@ -50,7 +50,7 @@ const Select = ({ sx, name = "", labelControlSpacing = 2, - maxWidthValue = 250, + maxWidth, }) => { const theme = useTheme(); const itemStyles = { @@ -60,6 +60,13 @@ const Select = ({ margin: theme.spacing(2), }; + const responsiveMaxWidth = { + xs: `${maxWidth * 0.5}px`, + sm: `${maxWidth * 0.75}px`, + md: `${maxWidth * 0.9}px`, + lg: `${maxWidth}px`, + }; + return ( From ad44f34eabf8a758abd9821025e9da10768e0fd6 Mon Sep 17 00:00:00 2001 From: Owaise Imdad Date: Thu, 6 Mar 2025 14:05:15 +0530 Subject: [PATCH 7/7] Refactored with comments for better understanding. --- src/Components/Inputs/Select/index.jsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/Components/Inputs/Select/index.jsx b/src/Components/Inputs/Select/index.jsx index 1cb35c19c..2aa979434 100644 --- a/src/Components/Inputs/Select/index.jsx +++ b/src/Components/Inputs/Select/index.jsx @@ -18,6 +18,7 @@ import "./index.css"; * @param {string} props.items.name - The display name of each item. * @param {function} props.onChange - The function to handle onChange event. * @param {object} props.sx - The custom styles object for MUI Select component. + * @param {number} props.maxWidth - Maximum width in pixels for the select component. Enables responsive text truncation. * @returns {JSX.Element} * * @example @@ -171,6 +172,10 @@ Select.propTypes = { onBlur: PropTypes.func, sx: PropTypes.object, labelControlSpacing: PropTypes.number, + /** + * Maximum width in pixels. Used to control text truncation and element width. + * Responsive breakpoints will be calculated as percentages of this value. + */ maxWidth: PropTypes.number, };