{
@@ -8,4 +7,4 @@ const LaborTypeFormItem = ({ value }) => {
return {t(`joblines.fields.lbr_types.${value}`)}
;
};
-export default forwardRef(LaborTypeFormItem);
+export default LaborTypeFormItem;
diff --git a/client/src/components/form-items-formatted/part-type-form-item.component.jsx b/client/src/components/form-items-formatted/part-type-form-item.component.jsx
index 70e87e50d..5198aa715 100644
--- a/client/src/components/form-items-formatted/part-type-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/part-type-form-item.component.jsx
@@ -1,4 +1,3 @@
-import { forwardRef } from "react";
import { useTranslation } from "react-i18next";
const PartTypeFormItem = ({ value }) => {
@@ -10,4 +9,4 @@ const PartTypeFormItem = ({ value }) => {
{t(`joblines.fields.part_types.${value}`)}
);
};
-export default forwardRef(PartTypeFormItem);
+export default PartTypeFormItem;
diff --git a/client/src/components/form-items-formatted/phone-form-item.component.jsx b/client/src/components/form-items-formatted/phone-form-item.component.jsx
index c25fbb415..ede4ec66c 100644
--- a/client/src/components/form-items-formatted/phone-form-item.component.jsx
+++ b/client/src/components/form-items-formatted/phone-form-item.component.jsx
@@ -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 ;
}
-export default forwardRef(FormItemPhone);
+export default FormItemPhone;
export const PhoneItemFormatterValidation = () => ({
async validator(rule, value) {
diff --git a/client/src/components/job-search-select/job-search-select.component.jsx b/client/src/components/job-search-select/job-search-select.component.jsx
index f70beb627..62d1f60f3 100644
--- a/client/src/components/job-search-select/job-search-select.component.jsx
+++ b/client/src/components/job-search-select/job-search-select.component.jsx
@@ -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;
diff --git a/client/src/components/notification-center/notification-center.component.jsx b/client/src/components/notification-center/notification-center.component.jsx
index 67fb7119d..0702447c7 100644
--- a/client/src/components/notification-center/notification-center.component.jsx
+++ b/client/src/components/notification-center/notification-center.component.jsx
@@ -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.RefAttributes>}
*/
-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(
)}
);
- }
-);
+};
NotificationCenterComponent.displayName = "NotificationCenterComponent";
diff --git a/client/src/components/owner-search-select/owner-search-select.component.jsx b/client/src/components/owner-search-select/owner-search-select.component.jsx
index 6107ae764..d065f1db9 100644
--- a/client/src/components/owner-search-select/owner-search-select.component.jsx
+++ b/client/src/components/owner-search-select/owner-search-select.component.jsx
@@ -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) => {
);
};
-export default forwardRef(OwnerSearchSelect);
+export default OwnerSearchSelect;
diff --git a/client/src/components/production-board-kanban/trello-board/components/ListComponent.jsx b/client/src/components/production-board-kanban/trello-board/components/ListComponent.jsx
index 9d6da60d9..3abb90f70 100644
--- a/client/src/components/production-board-kanban/trello-board/components/ListComponent.jsx
+++ b/client/src/components/production-board-kanban/trello-board/components/ListComponent.jsx
@@ -1,10 +1,8 @@
-import { forwardRef } from "react";
-
-const ListComponent = forwardRef(({ style, children, ...props }, ref) => (
+const ListComponent = ({ style, children, ref, ...props }) => (
{children}
-));
+);
ListComponent.displayName = "ListComponent";
diff --git a/client/src/components/task-center/task-center.component.jsx b/client/src/components/task-center/task-center.component.jsx
index 8b269f7b7..459e495fc 100644
--- a/client/src/components/task-center/task-center.component.jsx
+++ b/client/src/components/task-center/task-center.component.jsx
@@ -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(
)}
);
- }
-);
+};
TaskCenterComponent.displayName = "TaskCenterComponent";
export default TaskCenterComponent;
diff --git a/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx b/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
index 698ad3807..f06db3124 100644
--- a/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
+++ b/client/src/components/vehicle-search-select/vehicle-search-select.component.jsx
@@ -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) => {
);
};
-export default forwardRef(VehicleSearchSelect);
+export default VehicleSearchSelect;
diff --git a/client/src/components/vendor-search-select/vendor-search-select.component.jsx b/client/src/components/vendor-search-select/vendor-search-select.component.jsx
index cc366b7cd..a8c0d5a24 100644
--- a/client/src/components/vendor-search-select/vendor-search-select.component.jsx
+++ b/client/src/components/vendor-search-select/vendor-search-select.component.jsx
@@ -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