cortex-react-ui 0.1.156 → 0.1.158

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/cjs/types/index.d.ts

@@ -2,6 +2,7 @@ export { default as Popper } from './Popper';
 export { default as DomContainer } from './DomContainer';
 export { default as Spinner } from './Spinner';
 export { default as BarLoader } from './BarLoader';
+export { default as Scanner } from './Scanner';
 export { default as Selected } from './Selected';
 export { default as Button } from './Button';
 export { default as ToggleButton } from './ToggleButton';

package/lib/index.d.ts

@@ -1,4 +1,5 @@
-import React, { CSSProperties } from 'react';
+import React$1, { CSSProperties } from 'react';
+import { IDetectedBarcode, IScannerProps } from '@yudiel/react-qr-scanner';
 
 declare const PopperPlacement: {
     readonly Center: "center";
@@ -16,7 +17,7 @@ declare const PopperPlacement: {
     readonly RightCenter: "right-center";
 };
 declare type Props$5 = {
-    anchorEl?: string | HTMLElement | React.RefObject<HTMLElement>;
+    anchorEl?: string | HTMLElement | React$1.RefObject<HTMLElement>;
     anchorPosition?: {
         top: number;
         left: number;
@@ -24,30 +25,30 @@ declare type Props$5 = {
     placement?: ObjectValues<typeof PopperPlacement>;
     open?: boolean;
     role?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     className?: string;
     overflow?: boolean;
-    onMouseEnter?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseLeave?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseMove?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseOut?: React.MouseEventHandler<HTMLDivElement>;
-    onMouseOver?: React.MouseEventHandler<HTMLDivElement>;
-    onTouchStart?: React.TouchEventHandler<HTMLDivElement>;
-    onTouchEnd?: React.TouchEventHandler<HTMLDivElement>;
+    onMouseEnter?: React$1.MouseEventHandler<HTMLDivElement>;
+    onMouseLeave?: React$1.MouseEventHandler<HTMLDivElement>;
+    onMouseMove?: React$1.MouseEventHandler<HTMLDivElement>;
+    onMouseOut?: React$1.MouseEventHandler<HTMLDivElement>;
+    onMouseOver?: React$1.MouseEventHandler<HTMLDivElement>;
+    onTouchStart?: React$1.TouchEventHandler<HTMLDivElement>;
+    onTouchEnd?: React$1.TouchEventHandler<HTMLDivElement>;
 };
-declare const Popper: React.ForwardRefExoticComponent<Props$5 & React.RefAttributes<HTMLElement>>;
+declare const Popper: React$1.ForwardRefExoticComponent<Props$5 & React$1.RefAttributes<HTMLElement>>;
 
 declare type Props$4 = {
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     container?: HTMLElement | (() => HTMLElement);
 };
-declare const DomContainer: React.ForwardRefExoticComponent<Props$4 & React.RefAttributes<HTMLElement>>;
+declare const DomContainer: React$1.ForwardRefExoticComponent<Props$4 & React$1.RefAttributes<HTMLElement>>;
 
 interface SpinnerProps {
     className?: string;
     variant?: 'indeterminate' | 'determinate';
 }
-declare const Spinner: React.FC<SpinnerProps>;
+declare const Spinner: React$1.FC<SpinnerProps>;
 
 interface BarLoaderProps {
     title?: string;
@@ -56,45 +57,65 @@ interface BarLoaderProps {
     mode: 'determinate' | 'indeterminate';
     isComplete: boolean;
 }
-declare const BarLoader: React.FC<BarLoaderProps>;
+declare const BarLoader: React$1.FC<BarLoaderProps>;
+
+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;
+} & IScannerProps;
 
 interface SelectedProps {
     title?: string;
     data: any[];
     onClick: (elt: any) => void;
 }
-declare const Selected: React.FC<SelectedProps>;
+declare const Selected: React$1.FC<SelectedProps>;
 
 interface ButtonProps {
     variant?: 'text' | 'contained' | 'outlined';
     color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark';
     className?: string;
     disable?: boolean;
-    children?: React.ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement>) => void;
+    children?: React$1.ReactNode;
+    onClick?: (event: React$1.MouseEvent<HTMLButtonElement>) => void;
 }
-declare const Button: React.FC<ButtonProps>;
+declare const Button: React$1.FC<ButtonProps>;
 
 interface ToggleButtonProps {
     selected?: boolean;
     value?: string;
     className?: string;
     size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     onChange?: (value: string | undefined) => void;
 }
-declare const ToggleButton: React.FC<ToggleButtonProps>;
+declare const ToggleButton: React$1.FC<ToggleButtonProps>;
 
 interface TooltipProps$1 {
-    children?: React.ReactElement<any>;
-    anchorEl?: string | HTMLElement | React.RefObject<HTMLElement>;
-    title: React.ReactNode;
+    children?: React$1.ReactElement<any>;
+    anchorEl?: string | HTMLElement | React$1.RefObject<HTMLElement>;
+    title: React$1.ReactNode;
     enterDelay?: number;
     leaveDelay?: number;
     className?: string;
     disabled?: boolean;
 }
-declare const Tooltip: React.FC<TooltipProps$1>;
+declare const Tooltip: React$1.FC<TooltipProps$1>;
 
 declare namespace Cortex {
     type Tag = {
@@ -119,16 +140,16 @@ interface TooltipProps {
     onTextChange?: (text: string) => void;
     onChange?: (tags: Cortex.Tag[]) => void;
 }
-declare const TagInput: React.FC<TooltipProps>;
+declare const TagInput: React$1.FC<TooltipProps>;
 
 interface MenuProps {
-    containerRef: React.RefObject<HTMLElement>;
+    containerRef: React$1.RefObject<HTMLElement>;
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     onClose?: () => void;
-    onClick?: (event: React.MouseEvent<HTMLUListElement> | undefined) => void;
+    onClick?: (event: React$1.MouseEvent<HTMLUListElement> | undefined) => void;
 }
-declare const Menu: React.FC<MenuProps>;
+declare const Menu: React$1.FC<MenuProps>;
 
 interface AuthDownloadLinkProps {
     url: string;
@@ -137,61 +158,61 @@ interface AuthDownloadLinkProps {
     };
     token: string;
     label?: string;
-    onStart?: (event: React.MouseEvent<HTMLButtonElement> | undefined) => void;
+    onStart?: (event: React$1.MouseEvent<HTMLButtonElement> | undefined) => void;
     onCompleted?: () => void;
     onError?: (error: any) => void;
 }
-declare const AuthDownloadLink: React.FC<AuthDownloadLinkProps>;
+declare const AuthDownloadLink: React$1.FC<AuthDownloadLinkProps>;
 
 interface ContextMenuProps {
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     open?: boolean;
     placement?: ObjectValues<typeof PopperPlacement>;
-    container?: string | HTMLElement | React.RefObject<HTMLElement>;
+    container?: string | HTMLElement | React$1.RefObject<HTMLElement>;
     onOpen?: () => void;
     onClose?: () => void;
 }
-declare const ContextMenu: React.FC<ContextMenuProps>;
+declare const ContextMenu: React$1.FC<ContextMenuProps>;
 
 interface MenuItemProps {
     className?: string;
     style?: CSSProperties | undefined;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     label?: string;
-    icon?: React.ReactNode;
+    icon?: React$1.ReactNode;
     active?: boolean;
     disable?: boolean;
-    itemTemplate?: React.ReactNode;
-    onClick?: (event: React.MouseEvent<HTMLButtonElement> | undefined) => void;
+    itemTemplate?: React$1.ReactNode;
+    onClick?: (event: React$1.MouseEvent<HTMLButtonElement> | undefined) => void;
 }
-declare const MenuItem: React.FC<MenuItemProps>;
+declare const MenuItem: React$1.FC<MenuItemProps>;
 
 interface DividerProps {
     className?: string;
 }
-declare const Divider: React.FC<DividerProps>;
+declare const Divider: React$1.FC<DividerProps>;
 
 interface PopupMenuProps {
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     open?: boolean;
     placement?: ObjectValues<typeof PopperPlacement>;
     anchorPosition?: {
         top: number;
         left: number;
     };
-    anchorEl?: string | HTMLElement | React.RefObject<HTMLElement>;
+    anchorEl?: string | HTMLElement | React$1.RefObject<HTMLElement>;
     onClose?: () => void;
 }
-declare const PopupMenu: React.FC<PopupMenuProps>;
+declare const PopupMenu: React$1.FC<PopupMenuProps>;
 
 interface MenuGroupProps {
     title?: string;
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }
-declare const MenuGroup: React.FC<MenuGroupProps>;
+declare const MenuGroup: React$1.FC<MenuGroupProps>;
 
 interface DialogProps {
     open: boolean;
@@ -199,89 +220,89 @@ interface DialogProps {
     fullWidth?: boolean;
     fullHeight?: boolean;
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     onClose?: (() => void);
 }
-declare const Dialog: React.FC<DialogProps>;
+declare const Dialog: React$1.FC<DialogProps>;
 
 interface DialogContentProps$2 {
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }
-declare const DialogContent$1: React.FC<DialogContentProps$2>;
+declare const DialogContent$1: React$1.FC<DialogContentProps$2>;
 
 interface DialogFooterProps {
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }
-declare const DialogFooter: React.FC<DialogFooterProps>;
+declare const DialogFooter: React$1.FC<DialogFooterProps>;
 
 interface DialogHeaderProps {
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }
-declare const DialogHeader: React.FC<DialogHeaderProps>;
+declare const DialogHeader: React$1.FC<DialogHeaderProps>;
 
 interface DialogContentProps$1 {
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     closeDisable?: boolean;
     onClose?: (() => void);
 }
-declare const DialogContent: React.FC<DialogContentProps$1>;
+declare const DialogContent: React$1.FC<DialogContentProps$1>;
 
 interface DialogContentProps {
     className?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
 }
-declare const DialogActions: React.FC<DialogContentProps>;
+declare const DialogActions: React$1.FC<DialogContentProps>;
 
 interface ConfirmDialogProps {
     title: string;
     ok?: string;
     cancel?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     className?: string;
     onClose?: (isOk: boolean) => void;
 }
-declare const ConfirmDialog: React.FC<ConfirmDialogProps>;
+declare const ConfirmDialog: React$1.FC<ConfirmDialogProps>;
 
 interface ErrorDialogProps {
     title: string;
     ok?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     className?: string;
     onClose?: (isOk: boolean) => void;
 }
-declare const ErrorDialog: React.FC<ErrorDialogProps>;
+declare const ErrorDialog: React$1.FC<ErrorDialogProps>;
 
 interface WarningDialogProps {
     title: string;
     ok?: string;
-    children?: React.ReactNode;
+    children?: React$1.ReactNode;
     className?: string;
     onClose?: (isOk: boolean) => void;
 }
-declare const WarningDialog: React.FC<WarningDialogProps>;
+declare const WarningDialog: React$1.FC<WarningDialogProps>;
 
 interface Props$3 {
     className?: string;
 }
-declare const ChevronDownIcon: React.FC<Props$3>;
+declare const ChevronDownIcon: React$1.FC<Props$3>;
 
 interface Props$2 {
     className?: string;
 }
-declare const ChevronRightIcon: React.FC<Props$2>;
+declare const ChevronRightIcon: React$1.FC<Props$2>;
 
 interface Props$1 {
     className?: string;
 }
-declare const ChevronLeftIcon: React.FC<Props$1>;
+declare const ChevronLeftIcon: React$1.FC<Props$1>;
 
 interface Props {
     className?: string;
 }
-declare const CrossIcon: React.FC<Props>;
+declare const CrossIcon: React$1.FC<Props>;
 
-export { AuthDownloadLink, BarLoader, Button, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ConfirmDialog, ContextMenu, CrossIcon, Dialog, DialogActions, DialogContent$1 as DialogContent, DialogFooter, DialogHeader, DialogContent as DialogTitle, Divider, DomContainer, ErrorDialog, Menu, MenuGroup, MenuItem, Popper, PopupMenu, Selected, Spinner, TagInput, ToggleButton, Tooltip, WarningDialog };
+export { AuthDownloadLink, BarLoader, Button, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ConfirmDialog, ContextMenu, CrossIcon, Dialog, DialogActions, DialogContent$1 as DialogContent, DialogFooter, DialogHeader, DialogContent as DialogTitle, Divider, DomContainer, ErrorDialog, Menu, MenuGroup, MenuItem, Popper, PopupMenu, Scanner, Selected, Spinner, TagInput, ToggleButton, Tooltip, WarningDialog };

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.156",
+  "version": "0.1.158",
   "description": "React UI",
   "author": "Anthony",
   "license": "MIT",