16006182009

Committed 01 Jul 2025 05:32PM UTC coverage: 62.703% (-8.6%) from 71.278%

Build # 16006182009

Build Type

Pull #756

github

Committed by

web-flow

Commit Message

Merge pull request #755 from CBIIT/revert-omb-date

revert: OMB expiration update

Pull Request Pull Request #756: Sync 3.4.0 with 3.3.0

Run Details

3560 of 6102 branches covered (58.34%)

Branch coverage included in aggregate %.

4920 of 7422 relevant lines covered (66.29%)

227.7 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

6.82

/src/components/Questionnaire/TableTextInput.tsx

import React, { FC, useEffect, useId, useState, useRef } from "react";
import { Input, InputProps, Tooltip, TooltipProps, styled } from "@mui/material";
import useFormMode from "../../hooks/useFormMode";
import { updateInputValidity } from "../../utils";

type Props = {
  /**
   * Pass in a regex pattern if you want this field to have custom validation checking
   */
  pattern?: string;
  patternValidityMessage?: string;
  maxLength?: number;
  filter?: (input: string) => string;
} & InputProps;

const StyledTooltip = styled((props: TooltipProps) => (
  <Tooltip classes={{ popper: props.className }} {...props} />
))(() => ({
  "& .MuiTooltip-tooltip": {
    color: "#C93F08",
    background: "#FFFFFF",
    border: "1px solid #2B528B",
  },
  "& .MuiTooltip-arrow": {
    color: "#2B528B",
  },
}));

const StyledInput = styled(Input)(() => ({
  "&.MuiInputBase-root": {
    "& .MuiInputBase-input": {
      padding: "0px",
      color: "#083A50",
      fontWeight: 400,
      fontSize: "16px",
      fontFamily: "'Nunito', 'Rubik', sans-serif",
      height: "20px",
      width: "100%",
    },
    "& ::placeholder": {
      color: "#87878C",
      fontWeight: 400,
      opacity: 1,
      height: "20px",
    },
    "& .MuiInputBase-input:read-only": {
      backgroundColor: "#E5EEF4",
      color: "#083A50",
      cursor: "not-allowed",
    },
  },
}));

/**
 * Generates a generic text input with a label and help text
 *
 * NOTE:
 * - We're using a custom wrapper for Material UI's OutlinedInput component
 *   instead of using the TextField component because of the forced
 *   floating label behavior of TextField.
 *
 * @param {Props} props
 * @returns {JSX.Element}
 */
const TableTextInput: FC<Props> = ({
  classes,
  value,
  patternValidityMessage,
  maxLength,
  pattern,
  readOnly,
  filter,
  ...rest
}) => {
  const id = useId();
  const { readOnlyInputs } = useFormMode();

  const [val, setVal] = useState(value);
  const regex = new RegExp(pattern);
  const inputRef = useRef<HTMLInputElement>(null);
  const [showError, setShowError] = useState<boolean>(false);
  useEffect(() => {
    const invalid = () => {
      setShowError(true);
    };

    inputRef.current?.addEventListener("invalid", invalid);
    return () => {
      inputRef.current?.removeEventListener("invalid", invalid);
    };
  }, [inputRef]);

  const onChange = (newVal) => {
    setShowError(false);
    if (typeof filter === "function") {
      newVal = filter(newVal);
    }
    if (typeof maxLength === "number" && newVal.length > maxLength) {
      newVal = newVal.slice(0, maxLength);
    }
    if (!newVal.match(regex)) {
      updateInputValidity(
        inputRef,
        patternValidityMessage || "Please enter input in the correct format"
      );
    } else {
      updateInputValidity(inputRef);
    }
    setVal(newVal);
  };

  useEffect(() => {
    onChange(value.toString().trim());
  }, [value]);
  return (
    <StyledTooltip
      title="Missing required field"
      arrow
      disableHoverListener
      disableFocusListener
      disableTouchListener
      open={showError}
    >
      <StyledInput
        inputRef={inputRef}
        sx={{ width: "100%", display: "flex", alignItems: "center" }}
        id={id}
        size="small"
        value={val}
        onChange={(e) => onChange(e.target.value)}
        {...rest}
        disableUnderline
        readOnly={readOnlyInputs || readOnly}
      />
    </StyledTooltip>
  );
};

export default TableTextInput;

1	import React, { FC, useEffect, useId, useState, useRef } from "react";
2	import { Input, InputProps, Tooltip, TooltipProps, styled } from "@mui/material";
3	import useFormMode from "../../hooks/useFormMode";
4	import { updateInputValidity } from "../../utils";
5
6	type Props = {
7	/**
8	* Pass in a regex pattern if you want this field to have custom validation checking
9	*/
10	pattern?: string;
11	patternValidityMessage?: string;
12	maxLength?: number;
13	filter?: (input: string) => string;
14	} & InputProps;
15
16	const StyledTooltip = styled((props: TooltipProps) => (	2✔
17	<Tooltip classes={{ popper: props.className }} {...props} />	×
18	))(() => ({	×
19	"& .MuiTooltip-tooltip": {
20	color: "#C93F08",
21	background: "#FFFFFF",
22	border: "1px solid #2B528B",
23	},
24	"& .MuiTooltip-arrow": {
25	color: "#2B528B",
26	},
27	}));
28
29	const StyledInput = styled(Input)(() => ({	2✔
30	"&.MuiInputBase-root": {
31	"& .MuiInputBase-input": {
32	padding: "0px",
33	color: "#083A50",
34	fontWeight: 400,
35	fontSize: "16px",
36	fontFamily: "'Nunito', 'Rubik', sans-serif",
37	height: "20px",
38	width: "100%",
39	},
40	"& ::placeholder": {
41	color: "#87878C",
42	fontWeight: 400,
43	opacity: 1,
44	height: "20px",
45	},
46	"& .MuiInputBase-input:read-only": {
47	backgroundColor: "#E5EEF4",
48	color: "#083A50",
49	cursor: "not-allowed",
50	},
51	},
52	}));
53
54	/**
55	* Generates a generic text input with a label and help text
56	*
57	* NOTE:
58	* - We're using a custom wrapper for Material UI's OutlinedInput component
59	* instead of using the TextField component because of the forced
60	* floating label behavior of TextField.
61	*
62	* @param {Props} props
63	* @returns {JSX.Element}
64	*/
65	const TableTextInput: FC<Props> = ({	2✔
66	classes,
67	value,
68	patternValidityMessage,
69	maxLength,
70	pattern,
71	readOnly,
72	filter,
73	...rest
74	}) => {
75	const id = useId();	×
76	const { readOnlyInputs } = useFormMode();	×
77
78	const [val, setVal] = useState(value);	×
79	const regex = new RegExp(pattern);	×
80	const inputRef = useRef<HTMLInputElement>(null);	×
81	const [showError, setShowError] = useState<boolean>(false);	×
82	useEffect(() => {	×
83	const invalid = () => {	×
84	setShowError(true);	×
85	};
86
87	inputRef.current?.addEventListener("invalid", invalid);	×
88	return () => {	×
89	inputRef.current?.removeEventListener("invalid", invalid);	×
90	};
91	}, [inputRef]);
92
93	const onChange = (newVal) => {	×
94	setShowError(false);	×
95	if (typeof filter === "function") {	×
96	newVal = filter(newVal);	×
97	}
98	if (typeof maxLength === "number" && newVal.length > maxLength) {	×
99	newVal = newVal.slice(0, maxLength);	×
100	}
101	if (!newVal.match(regex)) {	×
102	updateInputValidity(	×
103	inputRef,
104	patternValidityMessage \|\| "Please enter input in the correct format"	×
105	);
106	} else {
107	updateInputValidity(inputRef);	×
108	}
109	setVal(newVal);	×
110	};
111
112	useEffect(() => {	×
113	onChange(value.toString().trim());	×
114	}, [value]);
115	return (	×
116	<StyledTooltip
117	title="Missing required field"
118	arrow
119	disableHoverListener
120	disableFocusListener
121	disableTouchListener
122	open={showError}
123	>
124	<StyledInput
125	inputRef={inputRef}
126	sx={{ width: "100%", display: "flex", alignItems: "center" }}
127	id={id}
128	size="small"
129	value={val}
130	onChange={(e) => onChange(e.target.value)}	×
131	{...rest}
132	disableUnderline
133	readOnly={readOnlyInputs \|\| readOnly}	×
134	/>
135	</StyledTooltip>
136	);
137	};
138
139	export default TableTextInput;

CBIIT / crdc-datahub-ui / 16006182009

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous