cortex-react-ui 0.1.157 → 0.1.159

package/lib/cjs/types/Scanner/Dialog.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+export declare const Dialog: (props: DialogProps) => JSX.Element;
+export declare type DialogTitleProps = {
+    title?: string;
+};
+export declare type DialogProps = DialogTitleProps & {
+    open: boolean;
+    className?: string;
+    message?: string;
+    confirmation?: boolean;
+    children?: React.ReactNode;
+    onClose?: () => void;
+};

package/lib/cjs/types/Scanner/DialogBody.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export declare const DialogBody: (props: DialogBodyProps) => JSX.Element;
+export declare type DialogBodyProps = HTMLAttributes<HTMLDivElement>;

package/lib/cjs/types/Scanner/DialogMask.d.ts

@@ -0,0 +1,3 @@
+import { HTMLAttributes } from 'react';
+export declare const DialogMask: (props: DialogMaskProps) => JSX.Element;
+export declare type DialogMaskProps = HTMLAttributes<HTMLDivElement>;

package/lib/cjs/types/Scanner/ScanConfirmationDialog.d.ts

@@ -0,0 +1,18 @@
+export declare const ScanConfirmationDialog: (props: TScanConfirmDialogProps) => JSX.Element;
+export declare type TScanConfirmDialogLabels = {
+    title?: string;
+    message?: string;
+    btnOk?: {
+        label: string;
+        style?: React.CSSProperties;
+    };
+    btnCancel?: {
+        label: string;
+        style?: React.CSSProperties;
+    };
+};
+export declare type TScanConfirmDialogProps = {
+    open: boolean;
+    onConfirm: () => void;
+    onClose: () => void;
+} & TScanConfirmDialogLabels;

package/lib/cjs/types/Scanner/Scanner.d.ts

@@ -1,7 +1,9 @@
-import { IDetectedBarcode } from '@yudiel/react-qr-scanner';
-export interface ScannerProps {
+import { IDetectedBarcode, IScannerProps } from '@yudiel/react-qr-scanner';
+import { TScanConfirmDialogLabels } from './ScanConfirmationDialog';
+declare const Scanner: ({ scanConfirmation, ...props }: ScannerProps) => JSX.Element;
+declare type ScannerProps = {
     scanConfirmation?: boolean;
+    scanConfirmDialog?: TScanConfirmDialogLabels;
     onScan?: (detectedCodes: IDetectedBarcode[]) => void;
-}
-declare const Scanner: React.FC<ScannerProps>;
+} & IScannerProps;
 export default Scanner;

package/lib/index.d.ts

@@ -1,5 +1,5 @@
 import React$1, { CSSProperties } from 'react';
-import { IDetectedBarcode } from '@yudiel/react-qr-scanner';
+import { IDetectedBarcode, IScannerProps } from '@yudiel/react-qr-scanner';
 
 declare const PopperPlacement: {
     readonly Center: "center";
@@ -59,11 +59,25 @@ interface BarLoaderProps {
 }
 declare const BarLoader: React$1.FC<BarLoaderProps>;
 
-interface ScannerProps {
+declare type TScanConfirmDialogLabels = {
+    title?: string;
+    message?: string;
+    btnOk?: {
+        label: string;
+        style?: React.CSSProperties;
+    };
+    btnCancel?: {
+        label: string;
+        style?: React.CSSProperties;
+    };
+};
+
+declare const Scanner: ({ scanConfirmation, ...props }: ScannerProps) => JSX.Element;
+declare type ScannerProps = {
     scanConfirmation?: boolean;
+    scanConfirmDialog?: TScanConfirmDialogLabels;
     onScan?: (detectedCodes: IDetectedBarcode[]) => void;
-}
-declare const Scanner: React.FC<ScannerProps>;
+} & IScannerProps;
 
 interface SelectedProps {
     title?: string;

package/lib/styles/Scanner/index.scss

@@ -0,0 +1,106 @@
+@import "../global.scss";
+
+@mixin scanner($props: null, $options: null) {
+	$internal-options: $default-options;
+
+    $internal-props: (
+        bgColor: #ffffff,
+        fgColor: $color-grey-darker,
+        closeBtnColor: $color-grey,
+        closeBtnHoverColor: $color-blue,
+        closeBtnDisableColor: $color-blue-grey-lighter,
+        confirm: (
+            headerBgColor: $color-orange-dark,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: $color-grey-darker,
+        ),
+        error: (
+            headerBgColor: $color-red,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: $color-grey-darker,
+        ),
+        warning: (
+            headerBgColor: $color-grey,
+            headerFgColor: #ffffff,
+            bgColor: #ffffff,
+            fgColor: $color-grey-darker,
+        ),        
+    );
+
+    $internal-props: safe-map-merge($internal-props, $props);
+    $internal-options: safe-map-merge($internal-options, $options);
+	
+	.btn {
+		display: 'flex';
+		align-items: 'center';
+		justify-content: 'center';
+		padding: '0.5rem 1rem';
+		border: '1px solid transparent';
+		border-radius: '0.375rem';
+		box-shadow: '0 1px 2px 0 rgba(0, 0, 0, 0.05)';
+		font-size: '0.875rem';
+		font-weight: '500';
+		line-height: '1.25rem';
+		text-align: 'center';
+		text-transform: 'none';
+		white-space: 'nowrap';
+		vertical-align: 'middle';
+		user-select: 'none';
+		background-color: '#4F46E5';
+		color: '#fff';
+		cursor: 'pointer';
+		outline: 'none';
+		transition: 'background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s';
+	}
+
+	.btn-default {
+		background-color: '#4F46E5';
+	}
+
+	.btn-default:hover {
+		opacity: '0.8';
+	}
+
+	.select {
+		display: 'block';
+		width: '100%';
+		padding-left: '0.75rem';
+		color: '#000';
+		padding-right: '2.5rem';
+		padding-top: '0.5rem';
+		padding-bottom: '0.5rem';
+		font-size: '1rem';
+		border-radius: '0.375rem';
+	}
+
+	/* DIALOG */
+	.dialog-header {
+		display: 'flex';
+		justify-content: 'space-between';
+	}
+
+	.dialog-mask {
+		overflow-x: 'hidden';
+		overflow-y: 'auto';
+		display: 'flex';
+		justify-content: 'center';
+		padding-top: '2.5rem';
+		padding-bottom: '5rem';
+		background-color: #0005;
+		position: fixed;
+		inset: 0;
+	}
+
+	.dialog-body {
+		display: 'flex';
+		flex-direction: 'column';
+		gap: '1.25rem';
+		padding: '1.25rem';
+		height: 'max-content';
+		background-color: white;
+	}
+
+	/* DIALOG */
+}

package/lib/styles/index.scss

@@ -8,6 +8,7 @@
 @import "TextField";
 @import "Menu";
 @import "Dialog";
+@import "Scanner";
 @import "Button";
 @import "ToggleButton";
 @import "Selected";
@@ -21,6 +22,7 @@
 @include taginput();
 @include input();
 @include menu();
+@include scanner();
 @include dialog();
 @include button();
 @include toggleButton();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cortex-react-ui",
-  "version": "0.1.157",
+  "version": "0.1.159",
   "description": "React UI",
   "author": "Anthony",
   "license": "MIT",