admin/bodyshop
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feature/IO-3499-React-19: Remove redundant forward refs in favor of React 19 built in ref prop

Browse Source
This commit is contained in:
Dave
2026-01-14 00:44:15 -05:00
parent 36fd077bab
commit 7d7742a7fa
19 changed files with 77 additions and 78 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
client/src/components/bill-line-search-select/bill-line-search-select.component.jsx
View File

@@ -1,9 +1,8 @@
import { Select } from "antd";
import { forwardRef } from "react";
import { useTranslation } from "react-i18next";
import InstanceRenderMgr from "../../utils/instanceRenderMgr";
const BillLineSearchSelect = ({ options, disabled, allowRemoved, ...restProps }, ref) => {
const BillLineSearchSelect = ({ options, disabled, allowRemoved, ref, ...restProps }) => {
const { t } = useTranslation();
return (
@@ -68,4 +67,4 @@ function generateLineName(item) {
</div>
);
}
export default forwardRef(BillLineSearchSelect);
export default BillLineSearchSelect;

6
client/src/components/contract-status-select/contract-status-select.component.jsx
View File

@@ -1,10 +1,10 @@
import { forwardRef, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { Select } from "antd";
import { useTranslation } from "react-i18next";
const { Option } = Select;
const ContractStatusComponent = forwardRef(({ value, onChange }, ref) => {
const ContractStatusComponent = ({ value, onChange, ref }) => {
const [option, setOption] = useState(value);
const { t } = useTranslation();
@@ -21,7 +21,7 @@ const ContractStatusComponent = forwardRef(({ value, onChange }, ref) => {
<Option value="contracts.status.returned">{t("contracts.status.out")}</Option>
</Select>
);
});
};
ContractStatusComponent.displayName = "ContractStatusComponent";

5
client/src/components/courtesy-car-fuel-select/courtesy-car-fuel-select.component.jsx
View File

@@ -1,8 +1,7 @@
import { Slider } from "antd";
import { forwardRef } from "react";
import { useTranslation } from "react-i18next";
const CourtesyCarFuelComponent = (props, ref) => {
const CourtesyCarFuelComponent = ({ ref, ...props }) => {
const { t } = useTranslation();
const marks = {
@@ -63,4 +62,4 @@ const CourtesyCarFuelComponent = (props, ref) => {
/>
);
};
export default forwardRef(CourtesyCarFuelComponent);
export default CourtesyCarFuelComponent;

6
client/src/components/courtesy-car-readiness-select/courtesy-car-readiness-select.component.jsx
View File

@@ -1,10 +1,10 @@
import { Select } from "antd";
import { forwardRef, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { useTranslation } from "react-i18next";
const { Option } = Select;
const CourtesyCarReadinessComponent = ({ value, onChange }, ref) => {
const CourtesyCarReadinessComponent = ({ value, onChange, ref }) => {
const [option, setOption] = useState(value);
const { t } = useTranslation();
@@ -29,4 +29,4 @@ const CourtesyCarReadinessComponent = ({ value, onChange }, ref) => {
</Select>
);
};
export default forwardRef(CourtesyCarReadinessComponent);
export default CourtesyCarReadinessComponent;

6
client/src/components/courtesy-car-status-select/courtesy-car-status-select.component.jsx
View File

@@ -1,10 +1,10 @@
import { forwardRef, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { Select } from "antd";
import { useTranslation } from "react-i18next";
const { Option } = Select;
const CourtesyCarStatusComponent = ({ value, onChange }, ref) => {
const CourtesyCarStatusComponent = ({ value, onChange, ref }) => {
const [option, setOption] = useState(value);
const { t } = useTranslation();
@@ -32,4 +32,4 @@ const CourtesyCarStatusComponent = ({ value, onChange }, ref) => {
</Select>
);
};
export default forwardRef(CourtesyCarStatusComponent);
export default CourtesyCarStatusComponent;

6
client/src/components/employee-team-search-select/employee-team-search-select.component.jsx
View File

@@ -1,17 +1,17 @@
import { useQuery } from "@apollo/client/react";
import { Select } from "antd";
import { forwardRef } from "react";
import { QUERY_TEAMS } from "../../graphql/employee_teams.queries";
import AlertComponent from "../alert/alert.component";
//To be used as a form element only.
const EmployeeTeamSearchSelect = ({ ...props }) => {
const EmployeeTeamSearchSelect = ({ ref, ...props }) => {
const { loading, error, data } = useQuery(QUERY_TEAMS);
if (error) return <AlertComponent title={JSON.stringify(error)} type="error" />;
return (
<Select
ref={ref}
showSearch
allowClear
loading={loading}
@@ -30,4 +30,4 @@ const EmployeeTeamSearchSelect = ({ ...props }) => {
/>
);
};
export default forwardRef(EmployeeTeamSearchSelect);
export default EmployeeTeamSearchSelect;

4
client/src/components/form-input-number-calculator/form-input-number-calculator.component.jsx
View File

@@ -1,5 +1,5 @@
import { InputNumber, Popover } from "antd";
import { forwardRef, useEffect, useRef, useState } from "react";
import { useEffect, useRef, useState } from "react";
const FormInputNUmberCalculator = ({ value: formValue, onChange: formOnChange, ...restProps }) => {
const [value, setValue] = useState(formValue);
@@ -105,4 +105,4 @@ const FormInputNUmberCalculator = ({ value: formValue, onChange: formOnChange, .
);
};
export default forwardRef(FormInputNUmberCalculator);
export default FormInputNUmberCalculator;

5
client/src/components/form-items-formatted/currency-form-item.component.jsx
View File

@@ -1,5 +1,4 @@
import { InputNumber } from "antd";
import { forwardRef } from "react";
// const locale = "en-us";
// const currencyFormatter = (value) => {
@@ -41,7 +40,7 @@ import { forwardRef } from "react";
// }
// };
function FormItemCurrency(props, ref) {
function FormItemCurrency({ ref, ...props }) {
return (
<InputNumber
{...props}
@@ -54,4 +53,4 @@ function FormItemCurrency(props, ref) {
);
}
export default forwardRef(FormItemCurrency);
export default FormItemCurrency;

6
client/src/components/form-items-formatted/email-form-item.component.jsx
View File

@@ -1,9 +1,7 @@
import { MailFilled } from "@ant-design/icons";
import { Button, Input, Space } from "antd";
import { forwardRef } from "react";
function FormItemEmail(props, ref) {
const { defaultValue, value, ...restProps } = props;
function FormItemEmail({ defaultValue, value, ref, ...restProps }) {
const emailValue = defaultValue || value;
return (
@@ -18,4 +16,4 @@ function FormItemEmail(props, ref) {
);
}
export default forwardRef(FormItemEmail);
export default FormItemEmail;

3
client/src/components/form-items-formatted/labor-type-form-item.component.jsx
View File

@@ -1,4 +1,3 @@
import { forwardRef } from "react";
import { useTranslation } from "react-i18next";
const LaborTypeFormItem = ({ value }) => {
@@ -8,4 +7,4 @@ const LaborTypeFormItem = ({ value }) => {
return <div>{t(`joblines.fields.lbr_types.${value}`)}</div>;
};
export default forwardRef(LaborTypeFormItem);
export default LaborTypeFormItem;

3
client/src/components/form-items-formatted/part-type-form-item.component.jsx
View File

@@ -1,4 +1,3 @@
import { forwardRef } from "react";
import { useTranslation } from "react-i18next";
const PartTypeFormItem = ({ value }) => {
@@ -10,4 +9,4 @@ const PartTypeFormItem = ({ value }) => {
<div style={{ wordWrap: "break-word", overflowWrap: "break-word" }}>{t(`joblines.fields.part_types.${value}`)}</div>
);
};
export default forwardRef(PartTypeFormItem);
export default PartTypeFormItem;

5
client/src/components/form-items-formatted/phone-form-item.component.jsx
View File

@@ -1,14 +1,13 @@
import { Input } from "antd";
import i18n from "i18next";
import parsePhoneNumber from "libphonenumber-js";
import { forwardRef } from "react";
import "./phone-form-item.styles.scss";
function FormItemPhone(props, ref) {
function FormItemPhone({ ref, ...props }) {
return <Input ref={ref} {...props} />;
}
export default forwardRef(FormItemPhone);
export default FormItemPhone;
export const PhoneItemFormatterValidation = () => ({
async validator(rule, value) {

17
client/src/components/job-search-select/job-search-select.component.jsx
View File

@@ -2,7 +2,7 @@ import { LoadingOutlined } from "@ant-design/icons";
import { useLazyQuery } from "@apollo/client/react";
import { Select, Space, Spin, Tag } from "antd";
import _ from "lodash";
import { forwardRef, useEffect, useMemo, useState } from "react";
import { useEffect, useMemo, useState } from "react";
import { useTranslation } from "react-i18next";
import { SEARCH_JOBS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_JOBS_FOR_AUTOCOMPLETE } from "../../graphql/jobs.queries";
import AlertComponent from "../alert/alert.component";
@@ -10,10 +10,15 @@ import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-displ
const { Option } = Select;
const JobSearchSelect = (
{ disabled, convertedOnly = false, notInvoiced = false, notExported = true, clm_no = false, ...restProps },
ref
) => {
const JobSearchSelect = ({
disabled,
convertedOnly = false,
notInvoiced = false,
notExported = true,
clm_no = false,
ref,
...restProps
}) => {
const { t } = useTranslation();
const [theOptions, setTheOptions] = useState([]);
@@ -107,4 +112,4 @@ const JobSearchSelect = (
);
};
export default forwardRef(JobSearchSelect);
export default JobSearchSelect;

35
client/src/components/notification-center/notification-center.component.jsx
View File

@@ -5,31 +5,27 @@ import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import "./notification-center.styles.scss";
import day from "../../utils/day.js";
import { forwardRef, useEffect, useRef } from "react";
import { useEffect, useRef } from "react";
import { DateTimeFormat } from "../../utils/DateFormatter.jsx";
const { Text, Title } = Typography;
/**
* Notification Center Component
* @type {React.ForwardRefExoticComponent<React.PropsWithoutRef<{readonly visible?: *, readonly onClose?: *, readonly notifications?: *, readonly loading?: *, readonly showUnreadOnly?: *, readonly toggleUnreadOnly?: *, readonly markAllRead?: *, readonly loadMore?: *, readonly onNotificationClick?: *, readonly unreadCount?: *}> & React.RefAttributes<unknown>>}
*/
const NotificationCenterComponent = forwardRef(
(
{
visible,
notifications,
loading,
showUnreadOnly,
toggleUnreadOnly,
markAllRead,
loadMore,
onNotificationClick,
unreadCount,
isEmployee
},
ref
) => {
const NotificationCenterComponent = ({
visible,
notifications,
loading,
showUnreadOnly,
toggleUnreadOnly,
markAllRead,
loadMore,
onNotificationClick,
unreadCount,
isEmployee,
ref
}) => {
const { t } = useTranslation();
const navigate = useNavigate();
const virtuosoRef = useRef(null);
@@ -127,8 +123,7 @@ const NotificationCenterComponent = forwardRef(
)}
</div>
);
}
);
};
NotificationCenterComponent.displayName = "NotificationCenterComponent";

6
client/src/components/owner-search-select/owner-search-select.component.jsx
View File

@@ -2,14 +2,14 @@ import { LoadingOutlined } from "@ant-design/icons";
import { useLazyQuery } from "@apollo/client/react";
import { Empty, Select } from "antd";
import _ from "lodash";
import { forwardRef, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import { SEARCH_OWNERS_BY_ID_FOR_AUTOCOMPLETE, SEARCH_OWNERS_FOR_AUTOCOMPLETE } from "../../graphql/owners.queries";
import AlertComponent from "../alert/alert.component";
import { OwnerNameDisplayFunction } from "../owner-name-display/owner-name-display.component";
const { Option } = Select;
const OwnerSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
const OwnerSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_OWNERS_FOR_AUTOCOMPLETE);
const [callIdSearch, { loading: idLoading, error: idError, data: idData }] = useLazyQuery(
@@ -85,4 +85,4 @@ const OwnerSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
</div>
);
};
export default forwardRef(OwnerSearchSelect);
export default OwnerSearchSelect;

6
client/src/components/production-board-kanban/trello-board/components/ListComponent.jsx
View File

@@ -1,10 +1,8 @@
import { forwardRef } from "react";
const ListComponent = forwardRef(({ style, children, ...props }, ref) => (
const ListComponent = ({ style, children, ref, ...props }) => (
<div ref={ref} {...props} style={{ ...style }}>
{children}
</div>
));
);
ListComponent.displayName = "ListComponent";

19
client/src/components/task-center/task-center.component.jsx
View File

@@ -1,7 +1,7 @@
import { Virtuoso } from "react-virtuoso";
import { Badge, Button, Spin } from "antd";
import { useTranslation } from "react-i18next";
import { forwardRef, useMemo, useRef } from "react";
import { useMemo, useRef } from "react";
import day from "../../utils/day.js";
import "./task-center.styles.scss";
import {
@@ -12,8 +12,18 @@ import {
QuestionCircleOutlined
} from "@ant-design/icons";
const TaskCenterComponent = forwardRef(
({ visible, tasks, loading, error, onTaskClick, onLoadMore, hasMore, createNewTask, incompleteTaskCount }, ref) => {
const TaskCenterComponent = ({
visible,
tasks,
loading,
error,
onTaskClick,
onLoadMore,
hasMore,
createNewTask,
incompleteTaskCount,
ref
}) => {
const { t } = useTranslation();
const virtuosoRef = useRef(null);
@@ -149,8 +159,7 @@ const TaskCenterComponent = forwardRef(
)}
</div>
);
}
);
};
TaskCenterComponent.displayName = "TaskCenterComponent";
export default TaskCenterComponent;

6
client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
View File

@@ -2,7 +2,7 @@ import { LoadingOutlined } from "@ant-design/icons";
import { useLazyQuery } from "@apollo/client/react";
import { Empty, Select } from "antd";
import _ from "lodash";
import { forwardRef, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import {
SEARCH_VEHICLES_BY_ID_FOR_AUTOCOMPLETE,
SEARCH_VEHICLES_FOR_AUTOCOMPLETE
@@ -11,7 +11,7 @@ import AlertComponent from "../alert/alert.component";
const { Option } = Select;
const VehicleSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
const VehicleSearchSelect = ({ value, onChange, onBlur, disabled, ref }) => {
const [callSearch, { loading, error, data }] = useLazyQuery(SEARCH_VEHICLES_FOR_AUTOCOMPLETE);
const [callIdSearch, { loading: idLoading, error: idError, data: idData }] = useLazyQuery(
@@ -87,4 +87,4 @@ const VehicleSearchSelect = ({ value, onChange, onBlur, disabled }, ref) => {
</div>
);
};
export default forwardRef(VehicleSearchSelect);
export default VehicleSearchSelect;

6
client/src/components/vendor-search-select/vendor-search-select.component.jsx
View File

@@ -1,13 +1,13 @@
import { HeartOutlined } from "@ant-design/icons";
import { Select, Space, Tag } from "antd";
import { forwardRef, useEffect, useState } from "react";
import { useEffect, useState } from "react";
import PhoneNumberFormatter from "../../utils/PhoneFormatter";
const { Option } = Select;
// To be used as a form element only.
const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone }, ref) => {
const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, preferredMake, showPhone, ref }) => {
const [option, setOption] = useState(value);
useEffect(() => {
@@ -131,4 +131,4 @@ const VendorSearchSelect = ({ value, onChange, options, onSelect, disabled, pref
</Select>
);
};
export default forwardRef(VendorSearchSelect);
export default VendorSearchSelect;