Merge pull request #126 from edsonmartins/develop

feat: adicionar novo atributo routeParams no ArchbaseNavigationItem

Author: edsonmartins

src/components/admin/ArchbaseAdminMainLayout.tsx

@@ -13,6 +13,7 @@ import { ArchbaseAdvancedSidebar } from './ArchbaseAdvancedSidebar';
 import { ArchbaseAliveAbleRoutes, ArchbaseKeepAliveRoute } from './ArchbaseAliveAbleRoutes';
 import { buildSetCollapsedButton } from './buildSetCollapsedButton';
 import { ArchbaseCompany, ArchbaseNavigationItem, ArchbaseOwner } from './types';
+import { useArchbaseNavigateParams } from 'components/hooks';
 
 export interface ArchbaseAdminMainLayoutSecurityOptions {
 	navigationResourceDescription: string
@@ -117,7 +118,7 @@ function ArchbaseAdminMainLayoutContainer({
 	const theme = useMantineTheme();
 	const adminLayoutContextValue = useContext<ArchbaseAdminLayoutContextValue>(ArchbaseAdminLayoutContext);
 	const { colorScheme } = useMantineColorScheme();
-	const navigate = useNavigate();
+	const navigate = useArchbaseNavigateParams()
 	const [sidebarRef, sidebarVisible] = useArchbaseVisible<HTMLHtmlElement, boolean>();
 
 	const isHidden = useMediaQuery(
@@ -126,7 +127,11 @@ function ArchbaseAdminMainLayoutContainer({
 
 	const onMenuItemClick = (item: ArchbaseNavigationItem) => {
 		if (item.link) {
-			navigate(item.link);
+			if (item.routeParams) {
+				navigate(item.link, {}, item.routeParams);
+			} else {
+				navigate(item.link);
+			}
 		}
 	};
 
@@ -229,7 +234,7 @@ function ArchbaseAdminMainLayoutContainer({
 			</AppShell.Header>
 			<AppShell.Navbar>
 				{!isHidden && showSideBar ? (
-					customRenderSidebar ? customRenderSidebar({width: sideBarWidth, height: getSideBarHeight(), isHidden}) :
+					customRenderSidebar ? customRenderSidebar({ width: sideBarWidth, height: getSideBarHeight(), isHidden }) :
 						<ArchbaseAdvancedSidebar
 							navigationData={adminLayoutContextValue.navigationData}
 							sidebarHeight={getSideBarHeight()}
@@ -303,7 +308,7 @@ function ArchbaseAdminMainLayoutContainer({
 						}}
 					>
 						{
-							customRenderSidebar ? customRenderSidebar({width: sideBarWidth, height: getSideBarDrawerHeight(), isHidden}) :
+							customRenderSidebar ? customRenderSidebar({ width: sideBarWidth, height: getSideBarDrawerHeight(), isHidden }) :
 								<ArchbaseAdvancedSidebar
 									navigationData={adminLayoutContextValue.navigationData}
 									sidebarWidth={sideBarWidth}

src/components/admin/types.ts

@@ -1,4 +1,5 @@
 import { ReactNode } from 'react';
+import { URLSearchParamsInit } from 'react-router-dom';
 
 export type ArchbaseNavigationGroup = {
 	label: string;
@@ -12,6 +13,7 @@ export type ArchbaseNavigationItem = {
 	label: string;
 	icon: any;
 	link?: string | undefined;
+	routeParams?: URLSearchParamsInit;
 	initiallyOpened?: boolean;
 	links?: ArchbaseNavigationItem[];
 	category: string | undefined | null;

src/components/editors/ArchbaseCheckbox.tsx

@@ -130,7 +130,8 @@ export function ArchbaseCheckbox<T, ID>({
 		loadDataSourceFieldValue();
 	}, []);
 
-	const handleChange = (event) => {
+	const handleChange = (event, isReadOnly) => {
+		if (isReadOnly) return
 		const changedChecked = event.target.checked;
 		const resultValue = changedChecked ? trueValue : falseValue;
 
@@ -168,13 +169,12 @@ export function ArchbaseCheckbox<T, ID>({
 	return (
 		<Checkbox
 			disabled={disabled}
-			readOnly={isReadOnly()}
 			required={required}
 			style={{ ...style, width }}
 			checked={checked}
 			ref={innerRef || innerComponentRef}
 			value={checked ? trueValue : falseValue}
-			onChange={handleChange}
+			onChange={(event) => handleChange(event, isReadOnly())}
 			onBlur={handleOnFocusExit}
 			onFocus={handleOnFocusEnter}
 			description={description}

src/components/editors/ArchbaseSelect.tsx

@@ -253,11 +253,6 @@ export function ArchbaseSelect<T, ID, O>({
   const [internalError, setInternalError] = useState<string | undefined>(error)
   const [updateCounter, setUpdateCounter] = useState(0)
   const sRef = useRef<any>()
-  const [internalReadOnly, setReadOnly] = useUncontrolled<boolean>({
-    value: readOnly,
-    defaultValue: readOnly,
-    finalValue: false,
-  });
   const [currentLimit, setCurrentLimit] = useState(limit);
 
   const currentOptions: any[] = useMemo(() => {
@@ -430,13 +425,13 @@ export function ArchbaseSelect<T, ID, O>({
     loadDataSourceFieldValue()
   }, [])
 
-  useEffect(() => {
-    let tmpRreadOnly = readOnly
-    if (dataSource && !readOnly) {
-      tmpRreadOnly = dataSource.isBrowsing()
-    }
-    setReadOnly(tmpRreadOnly)
-  }, [dataSource?.isBrowsing()])
+  const isReadOnly = () => {
+		let tmpReadOnly = readOnly;
+		if (dataSource && !readOnly) {
+			tmpReadOnly = dataSource.isBrowsing();
+		}
+		return tmpReadOnly;
+	};
 
   return (
     <Select
@@ -458,7 +453,7 @@ export function ArchbaseSelect<T, ID, O>({
       leftSection={icon}
       width={width}
       leftSectionWidth={iconWidth}
-      readOnly={internalReadOnly}
+      readOnly={isReadOnly()}
       required={required}
       onChange={(value, option) => handleChange(value, option as SelectItem)}
       onClick={onClick}

src/components/editors/ArchbaseTextArea.tsx

@@ -165,10 +165,18 @@ export function ArchbaseTextArea<T, ID>({
 		}
 	};
 
+	const isReadOnly = () => {
+		let tmpReadOnly = readOnly;
+		if (dataSource && !readOnly) {
+			tmpReadOnly = dataSource.isBrowsing();
+		}
+		return tmpReadOnly;
+	};
+
 	return (
 		<Textarea
 			disabled={disabled}
-			readOnly={readOnly}
+			readOnly={isReadOnly()}
 			style={style}
 			value={value}
 			ref={innerRef || innerComponentRef}