cortex-react-ui 0.1.182 → 0.2.0

package/lib/esm/{types/utils → utils}/setRef.d.ts

@@ -1 +1,2 @@
+/// <reference types="react" />
 export default function setRef<T>(ref: React.MutableRefObject<T | null> | ((instance: T | null) => void) | null | undefined, value: T | null): void;

package/lib/index.d.ts

@@ -1,6 +1,9 @@
+/// <reference types="react" />
 import React$1, { CSSProperties } from 'react';
 import { IDetectedBarcode, IScannerProps } from '@yudiel/react-qr-scanner';
 import { WebcamProps } from 'react-webcam';
+import { MapContainerProps } from 'react-leaflet';
+import { ControlPosition, LatLngTuple } from 'leaflet';
 
 declare const PopperPlacement: {
     readonly Center: "center";
@@ -17,7 +20,7 @@ declare const PopperPlacement: {
     readonly RightBottom: "right-bottom";
     readonly RightCenter: "right-center";
 };
-declare type Props$5 = {
+type Props$5 = {
     anchorEl?: string | HTMLElement | React$1.RefObject<HTMLElement>;
     anchorPosition?: {
         top: number;
@@ -39,7 +42,7 @@ declare type Props$5 = {
 };
 declare const Popper: React$1.ForwardRefExoticComponent<Props$5 & React$1.RefAttributes<HTMLElement>>;
 
-declare type Props$4 = {
+type Props$4 = {
     children?: React$1.ReactNode;
     container?: HTMLElement | (() => HTMLElement);
 };
@@ -55,7 +58,6 @@ interface BarLoaderProps {
     title?: string;
     color?: 'red' | 'blue' | 'yellow' | 'orange' | 'green';
     className?: string;
-    mode: 'determinate' | 'indeterminate';
     isComplete: boolean;
 }
 declare const BarLoader: React$1.FC<BarLoaderProps>;
@@ -77,7 +79,7 @@ interface ButtonProps {
 }
 declare const Button: React$1.FC<ButtonProps>;
 
-declare type TScanConfirmDialogLabels = {
+type TScanConfirmDialogLabels = {
     title?: string;
     message?: string;
     btnOk?: {
@@ -90,25 +92,26 @@ declare type TScanConfirmDialogLabels = {
     };
 };
 
-declare const Scanner: ({ scanConfirmation, scanTrackerType, ...props }: ScannerProps) => JSX.Element;
-declare type TScanTrackerType = 'outline' | 'boundingBox' | 'centerText';
-declare type ScannerProps = {
+declare const Scanner: React.FC<ScannerProps>;
+type TScanTrackerType = 'outline' | 'boundingBox' | 'centerText';
+type ScannerProps = {
     scanConfirmation?: boolean;
     scanConfirmDialog?: TScanConfirmDialogLabels;
     scanTrackerType?: TScanTrackerType;
     onScan?: (detectedCodes: IDetectedBarcode[]) => void;
 } & IScannerProps;
 
-declare const Camera: ({ onCapture, isOffline, mode, validateText, resetText, isShowOffline, ...props }: CameraProps) => JSX.Element;
-declare type CameraProps = {
+declare const Camera: React.FC<CameraProps>;
+type CameraProps = {
     onCapture: ({ fileStoreName, fileRowId, file }: TfileCapturedProps) => void;
     mode?: 'photo' | 'video';
     isOffline?: boolean;
     isShowOffline?: boolean;
     validateText?: string;
     resetText?: string;
+    isShowVideoButton?: boolean;
 } & Partial<WebcamProps>;
-declare type TfileCapturedProps = {
+type TfileCapturedProps = {
     fileStoreName?: string | null;
     fileRowId?: number | null;
     file?: File | null;
@@ -162,6 +165,80 @@ interface TooltipProps {
 }
 declare const TagInput: React$1.FC<TooltipProps>;
 
+declare class Point {
+    id: number;
+    order: number;
+    latitude: number;
+    longitude: number;
+}
+
+declare class Location {
+    id: number;
+    objId: string;
+    points: Point[];
+}
+
+type CenterActiveAreaControlProps = {
+    autoCenter?: boolean;
+};
+
+/** Props interface for MapFullscreenControl component */
+type MapFullscreenControlProps = {
+    /** Change the content of the button, can be HTML, default null */
+    content?: string | undefined;
+    /** Change the position of the button can be topleft, topright, bottomright or bottomleft, default topleft */
+    position?: ControlPosition | undefined;
+    /** Change the title of the button, default Full Screen */
+    title?: string | undefined;
+    /** Change the title of the button when fullscreen is on, default Exit Full Screen */
+    titleCancel?: string | undefined;
+    /** Force separate button to detach from zoom buttons, default false */
+    forceSeparateButton?: boolean | undefined;
+    /** Force use of pseudo full screen even if full screen API is available, default false */
+    forcePseudoFullscreen?: boolean | undefined;
+    /** Use pseudo fullscreen */
+    pseudoFullscreen?: boolean | undefined;
+    /** Dom element to render in full screen, false by default, fallback to map._container */
+    fullscreenElement?: false | HTMLElement | undefined;
+};
+
+type DrawToolsProps = {
+    position?: ControlPosition | undefined;
+    handleOnCreated?: (v: void) => void;
+    handleOnDeleted?: (v: void) => void;
+    draw?: drawType;
+};
+type drawType = {
+    polyline?: boolean;
+    polygon?: boolean;
+    rectangle?: boolean;
+    circle?: boolean;
+    marker?: boolean;
+    circlemarker?: boolean;
+};
+
+type MapsProps = {
+    MapContainerProps?: MapContainerProps;
+    center?: LatLngTuple;
+    fullscreen?: MapFullscreenControlProps | boolean;
+    centerActiveArea?: CenterActiveAreaControlProps | boolean;
+    drawTools?: DrawToolsProps | boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    zoom?: number;
+    data?: Location[];
+};
+
+declare const App: React$1.FC<AppProps>;
+type AppProps = MapsProps & {
+    onClose: (() => void);
+    onSave: ((points: Point[]) => void);
+    customButtons?: {
+        cancelButton?: HTMLElement;
+        saveButton?: HTMLElement;
+    };
+};
+
 interface MenuProps {
     containerRef: React$1.RefObject<HTMLElement>;
     className?: string;
@@ -171,19 +248,6 @@ interface MenuProps {
 }
 declare const Menu: React$1.FC<MenuProps>;
 
-interface AuthDownloadLinkProps {
-    url: string;
-    queryParams?: {
-        [key: string]: any;
-    };
-    token: string;
-    label?: string;
-    onStart?: (event: React$1.MouseEvent<HTMLButtonElement> | undefined) => void;
-    onCompleted?: () => void;
-    onError?: (error: any) => void;
-}
-declare const AuthDownloadLink: React$1.FC<AuthDownloadLinkProps>;
-
 interface ContextMenuProps {
     className?: string;
     children?: React$1.ReactNode;
@@ -195,6 +259,11 @@ interface ContextMenuProps {
 }
 declare const ContextMenu: React$1.FC<ContextMenuProps>;
 
+interface DividerProps {
+    className?: string;
+}
+declare const Divider: React$1.FC<DividerProps>;
+
 interface MenuItemProps {
     className?: string;
     style?: CSSProperties | undefined;
@@ -208,11 +277,6 @@ interface MenuItemProps {
 }
 declare const MenuItem: React$1.FC<MenuItemProps>;
 
-interface DividerProps {
-    className?: string;
-}
-declare const Divider: React$1.FC<DividerProps>;
-
 interface PopupMenuProps {
     className?: string;
     children?: React$1.ReactNode;
@@ -234,6 +298,19 @@ interface MenuGroupProps {
 }
 declare const MenuGroup: React$1.FC<MenuGroupProps>;
 
+interface AuthDownloadLinkProps {
+    url: string;
+    queryParams?: {
+        [key: string]: any;
+    };
+    token: string;
+    label?: string;
+    onStart?: (event: React$1.MouseEvent<HTMLButtonElement> | undefined) => void;
+    onCompleted?: () => void;
+    onError?: (error: any) => void;
+}
+declare const AuthDownloadLink: React$1.FC<AuthDownloadLinkProps>;
+
 interface DialogProps {
     open: boolean;
     width?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
@@ -325,4 +402,4 @@ interface Props {
 }
 declare const CrossIcon: React$1.FC<Props>;
 
-export { AuthDownloadLink, BarLoader, Button, Camera, 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 };
+export { AuthDownloadLink, BarLoader, Button, Camera, ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ConfirmDialog, ContextMenu, CrossIcon, Dialog, DialogActions, DialogContent$1 as DialogContent, DialogFooter, DialogHeader, DialogContent as DialogTitle, Divider, DomContainer, ErrorDialog, App as Map, Menu, MenuGroup, MenuItem, Popper, PopupMenu, Scanner, Selected, Spinner, TagInput, ToggleButton, Tooltip, WarningDialog };

package/lib/styles/BarLoader/index.scss

@@ -1,12 +1,12 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin barLoader($props: null, $options: null) {
-  $internal-options: $default-options;
+  $internal-options: global.$default-options;
 
   $internal-props: ();
 
-  $internal-props: safe-map-merge($internal-props, $props);
-  $internal-options: safe-map-merge($internal-options, $options);
+  $internal-props: global.safe-map-merge($internal-props, $props);
+  $internal-options: global.safe-map-merge($internal-options, $options);
 
   .loader { 
     position:relative;

package/lib/styles/Button/index.scss

@@ -1,12 +1,12 @@
-@import "../global.scss";
+@use "../global.scss";
 
 @mixin button($props: null, $options: null) {
-    $internal-options: $default-options;
+    $internal-options: global.$default-options;
 
     $internal-props: ();
 
-    $internal-props: safe-map-merge($internal-props, $props);
-    $internal-options: safe-map-merge($internal-options, $options);
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
 
     .ui-btn {
         position: relative;
@@ -21,14 +21,14 @@
         user-select: none;
         appearance: none;
         text-decoration: none;
-        font-family: $font-family;
-        font-weight: $font-weight-semi-bold;
-        font-size: $font-size-md;
+        font-family: global.$font-family;
+        font-weight: global.$font-weight-semi-bold;
+        font-size: global.$font-size-md;
         letter-spacing: 0.02857em;
         text-transform: uppercase;
         min-width: 64px;
-        padding: $spacer-sm;
-        border-radius: $border-radius-xs;
+        padding: global.$spacer-sm;
+        border-radius: global.$border-radius-xs;
         transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
             box-shadow 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
             border-color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms,
@@ -41,7 +41,7 @@
     }
 
     .ui-btn-disable {
-        color: $color-blue-grey-lighter;
+        color: global.$color-blue-grey-lighter;
     }
 
     .ui-btn-contained {
@@ -50,97 +50,97 @@
         }
 
         &.ui-btn-disable {
-            background-color: $color-blue-grey-lighter;
-            color: $color-grey-lighter;
+            background-color: global.$color-blue-grey-lighter;
+            color: global.$color-grey-lighter;
         }
     }
 
     .ui-btn-outlined {
         &.ui-btn-disable {
-            border-color: $color-blue-grey-lighter;
+            border-color: global.$color-blue-grey-lighter;
         }
     }
 
     .ui-btn-color-primary {
-        color: $color-blue-dark;
+        color: global.$color-blue-dark;
 
         &:not(.ui-btn-disable).ui-btn-contained {
-            background-color: $color-blue-dark;
+            background-color: global.$color-blue-dark;
             color: #fff;
 
             &:hover {
-                background-color: $color-blue-darker;
+                background-color: global.$color-blue-darker;
             }
         }
 
         &:not(.ui-btn-disable).ui-btn-outlined {
-            border-color: $color-blue-dark;
+            border-color: global.$color-blue-dark;
 
             &:hover {
-                border-color: $color-blue-darker;
+                border-color: global.$color-blue-darker;
             }
         }
     }
 
     .ui-btn-color-secondary {
-        color: $color-grey-dark;
+        color: global.$color-grey-dark;
 
         &:not(.ui-btn-disable).ui-btn-contained {
-            background-color: $color-grey-dark;
+            background-color: global.$color-grey-dark;
             color: #fff;
 
             &:hover {
-                background-color: $color-grey-darker;
+                background-color: global.$color-grey-darker;
             }
         }
 
         &:not(.ui-btn-disable).ui-btn-outlined {
-            border-color: $color-grey-dark;
+            border-color: global.$color-grey-dark;
 
             &:hover {
-                border-color: $color-grey-darker;
+                border-color: global.$color-grey-darker;
             }
         }
     }
 
     .ui-btn-color-success {
-        color: $color-green;
+        color: global.$color-green;
 
         &:not(.ui-btn-disable).ui-btn-contained {
-            background-color: $color-green;
+            background-color: global.$color-green;
             color: #fff;
 
             &:hover {
-                background-color: $color-green-dark;
+                background-color: global.$color-green-dark;
             }
         }
 
         &:not(.ui-btn-disable).ui-btn-outlined {
-            border-color: $color-green;
+            border-color: global.$color-green;
 
             &:hover {
-                border-color: $color-green-dark;
+                border-color: global.$color-green-dark;
             }
         }
     }
 
     .ui-btn-color-danger {
-        color: $color-red;
+        color: global.$color-red;
 
         &:not(.ui-btn-disable).ui-btn-contained {
-            background-color: $color-red;
+            background-color: global.$color-red;
             color: #fff;
 
             &:hover {
-                background-color: $color-red-dark;
+                background-color: global.$color-red-dark;
             }
         }
 
         &:not(.ui-btn-disable).ui-btn-outlined {
-            border-color: $color-red;
+            border-color: global.$color-red;
 
             &:hover {
-                border-color: $color-red-dark;
+                border-color: global.$color-red-dark;
             }
         }
     }

package/lib/styles/Camera/index.css

@@ -0,0 +1,192 @@
+.camera-container {
+  width: 100%;
+  height: 100%;
+  background-color: #000;
+}
+
+.camera-switch-btn {
+  all: initial;
+  display: flex;
+  cursor: pointer;
+}
+
+.camera-recording-dot {
+  width: 8px;
+  height: 8px;
+  border-radius: 50%;
+  background-color: #f44336;
+  animation: clignote 1s infinite;
+}
+
+.camera-recording-timer {
+  z-index: 99;
+  position: absolute;
+  top: 1rem;
+  left: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  padding: 3px 7px;
+  font-size: 12px;
+  color: #fff;
+  font-family: sans-serif;
+  gap: 6px;
+}
+
+.camera-offline-mode {
+  position: absolute;
+  top: 1rem;
+  right: 20px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.2);
+  border-radius: 4px;
+  padding: 3px 7px;
+  font-size: 12px;
+  color: red;
+  font-family: sans-serif;
+}
+
+.camera-mode {
+  z-index: 9999;
+  position: absolute;
+  bottom: 2rem;
+  right: 20px;
+  padding: 0.5rem;
+  border-radius: 6px;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 7px;
+  background-color: #2196f3;
+  transition: background-color 0.3s ease;
+}
+
+.camera-preview {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+.camera-controls {
+  z-index: 999;
+  position: absolute;
+  bottom: 2rem;
+  left: 0;
+  right: 0;
+  display: flex;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.video-play-btn {
+  all: initial;
+  position: absolute;
+  bottom: 10%;
+  left: 50%;
+  z-index: 9;
+  width: 1em;
+  height: 1em;
+  min-width: 15px;
+  min-height: 15px;
+  transform: translate(-50%, -50%);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  border: 1px solid;
+  padding: 20px 20px;
+  background-color: #ffffff;
+  cursor: pointer;
+}
+
+.camera-button {
+  padding: 0.5rem;
+  border-radius: 6px;
+  color: #ffffff;
+  border: none;
+  cursor: pointer;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 7px;
+  transition: background-color 0.3s ease;
+}
+.camera-button--capture {
+  border-radius: 50%;
+  color: initial;
+  width: 50px;
+  height: 50px;
+  border: 1px solid black;
+  background-color: #ffffff;
+}
+.camera-button--record {
+  border-radius: 50%;
+  color: red;
+  width: 50px;
+  height: 50px;
+  border: 1px solid black;
+  background-color: #ffffff;
+}
+.camera-button--download {
+  background-color: #4caf50;
+}
+.camera-button--download:hover {
+  background-color: #388e3c;
+}
+.camera-button--reset {
+  background-color: #9e9e9e;
+}
+.camera-button--reset:hover {
+  background-color: #757575;
+}
+
+.camera-offline-mode {
+  font-size: 0.875rem;
+  font-family: sans-serif;
+  color: #d32f2f;
+}
+
+.camera-screen-animation {
+  animation: fadeIn 0.3s;
+}
+
+@keyframes fadeIn {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+@keyframes pulse {
+  0% {
+    transform: scale(1);
+  }
+  50% {
+    transform: scale(1.05);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes clignote {
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+/*# sourceMappingURL=index.css.map */