@onehat/ui 0.4.76 → 0.4.78

package/src/Components/Report/Report.js

@@ -41,6 +41,8 @@ function Report(props) {
 			disableExcel = false,
 			showReportHeaders = true,
 			isQuickReport = false,
+			isDisabled = false,
+			disabledMessage = 'Report is Disabled',
 			additionalData = {},
 			quickReportData = {},
 			alert,
@@ -90,8 +92,9 @@ function Report(props) {
 					className={className}
 				>
 					<Pressable
-						onPress={onPressQuickReport}
+						onPress={!isDisabled ? onPressQuickReport : null}
 						className={clsx(
+							'relative', // creates the positioning context for absolute children
 							'flex-1',
 							'items-center',
 							'justify-center',
@@ -101,7 +104,7 @@ function Report(props) {
 							'rounded-lg',
 							'border',
 							'border-primary-300',
-							'hover:bg-primary-300',
+							!isDisabled ? 'hover:bg-primary-300' : null,
 						)}
 					>
 						{icon}
@@ -114,6 +117,46 @@ function Report(props) {
 								'mt-2',
 							)}
 						>{title}</Text>
+						{isDisabled &&
+							<Box
+								className={clsx(
+									'absolute',
+									'h-full',
+									'w-full',
+									'z-1000',
+									'flex',
+									'items-center',
+									'justify-center',
+								)}
+							>
+								<Box
+									className={clsx(
+										'absolute',
+										'h-full',
+										'w-full',
+										'rounded-lg',
+										'z-0',
+										'bg-white',
+										'opacity-[0.8]',
+									)}
+								/>
+								<Text
+									className={clsx(
+										'absolute',
+										'h-full',
+										'w-full',
+										'z-1000',
+										'flex',
+										'items-center',
+										'justify-center',
+										'px-[20px]',
+										'text-center',
+										'text-[23px]',
+										'text-red-500',
+										'italic',
+									)}
+								>Disabled</Text>
+							</Box>}
 					</Pressable>
 				</VStackNative>;
 	}
@@ -157,30 +200,76 @@ function Report(props) {
 	return <VStackNative
 				{...testProps('Report-' + reportId)}
 				className={clsx(
+					'relative', // creates the positioning context for absolute children
 					'w-full',
 					'border',
 					'border-primary-300',
-					'p-4',
 					'mb-3',
 					'bg-white',
 					'rounded-lg',
 					'shadow-sm',
 				)}
 			>
-				<HStack>
-					<Box className="w-[50px] mr-4">
-						{icon}
-					</Box>
-					<VStack className="flex-1">
-						<Text className="text-2xl max-w-full">{title}</Text>
-						<Text className="text-sm">{description}</Text>
-					</VStack>
-				</HStack>
-				<Form
-					type={EDITOR_TYPE__PLAIN}
-					additionalFooterButtons={buttons}
-					{...props._form}
-				/>
+				<Box
+					className={clsx(
+						'p-4',
+					)}
+				>
+					<HStack>
+						<Box className="w-[50px] mr-4">
+							{icon}
+						</Box>
+						<VStack className="flex-1">
+							<Text className="text-2xl max-w-full">{title}</Text>
+							<Text className="text-sm">{description}</Text>
+						</VStack>
+					</HStack>
+					<Form
+						type={EDITOR_TYPE__PLAIN}
+						additionalFooterButtons={buttons}
+						{...props._form}
+					/>
+				</Box>
+				{isDisabled &&
+					<Box
+						className={clsx(
+							'absolute',
+							'h-full',
+							'w-full',
+							'z-1000',
+							'flex',
+							'items-center',
+							'justify-center',
+						)}
+					>
+						<Box
+							className={clsx(
+								'absolute',
+								'h-full',
+								'w-full',
+								'rounded-lg',
+								'z-0',
+								'bg-white',
+								'opacity-[0.8]',
+							)}
+						/>
+						<Text
+							className={clsx(
+								'absolute',
+								'h-full',
+								'w-full',
+								'z-1000',
+								'flex',
+								'items-center',
+								'justify-center',
+								'px-[20px]',
+								'text-center',
+								'text-[23px]',
+								'text-red-500',
+								'italic',
+							)}
+						>{disabledMessage}</Text>
+					</Box>}
 			</VStackNative>;
 }
 

package/src/Components/Toolbar/PaginationToolbar.js

@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useState, forwardRef } from 'react';
 import {
 	HStack,
 } from '@project-components/Gluestack';
@@ -7,7 +7,7 @@ import Pagination from './Pagination.js'
 import Toolbar from './Toolbar.js'
 import _ from 'lodash';
 
-export default function PaginationToolbar(props) {
+export default forwardRef(function PaginationToolbar(props, ref) {
 	const {
 			toolbarItems = [],
 			disablePageSize = false,
@@ -38,6 +38,7 @@ export default function PaginationToolbar(props) {
 		};
 
 	return <Toolbar
+				ref={ref}
 				className={clsx(
 					'border-t',
 					'border-t-grey-400',
@@ -63,4 +64,4 @@ export default function PaginationToolbar(props) {
 					disablePageSize={disablePageSize}
 				/>
 			</Toolbar>;
-};
+});

package/src/Components/Toolbar/Toolbar.js

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react';
 import {
 	HStackNative,
 	ScrollView,
@@ -9,7 +10,7 @@ import {
 } from '../../Constants/UiModes.js';
 import UiGlobals from '../../UiGlobals.js';
 
-export default function Toolbar(props) {
+export default forwardRef(function Toolbar(props, ref) {
 	
 	const styles = UiGlobals.styles;
 	
@@ -18,7 +19,7 @@ export default function Toolbar(props) {
 		'overflow-auto',
 		'items-center',
 		'justify-start',
-		'gap-2',
+		'gap-1',
 		'p-2',
 		'border-b',
 		'border-solid',
@@ -32,8 +33,10 @@ export default function Toolbar(props) {
 		className += ' ' + props.className
 	}
 	let toolbar = <HStackNative
+						ref={ref}
 						className={className}
 						style={props.style || {}}
+						onLayout={props.onLayout}
 					>
 						{props.children}
 					</HStackNative>;	
@@ -49,4 +52,4 @@ export default function Toolbar(props) {
 	}
 
 	return toolbar;
-};
+});