cortex-react-ui 0.2.7 → 0.2.9

package/lib/esm/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";
@@ -107,6 +110,7 @@ type CameraProps = {
     validateText?: string;
     resetText?: string;
     isShowVideoButton?: boolean;
+    isShowSwitchButton?: boolean;
 } & Partial<WebcamProps>;
 type TfileCapturedProps = {
     fileStoreName?: string | null;
@@ -162,6 +166,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;
@@ -325,4 +403,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/Camera/index.css

@@ -0,0 +1,196 @@
+.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;
+  display: flex;
+  > video {
+    margin: 0 auto;
+  }
+}
+
+.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 */

package/lib/styles/Camera/index.scss

@@ -110,10 +110,6 @@
         width: 100%;
         height: 90%;
         overflow: hidden;
-        > img {
-            margin: 0 auto;
-        }
-
     }
 
     .camera-controls {

package/lib/styles/Map/index.scss

@@ -0,0 +1,50 @@
+@use "../global.scss";
+
+@mixin map($props: null, $options: null) {
+    $internal-options: global.$default-options;
+
+    $internal-props: (
+        bgColor: #212121,
+        fgColor: #fff,
+    );
+
+    $internal-props: global.safe-map-merge($internal-props, $props);
+    $internal-options: global.safe-map-merge($internal-options, $options);
+
+    .cortex-widget-buttons {
+        margin: 20px;
+        text-align: right;
+      }
+    
+      .leaflet-container {
+        height: 85% !important;
+      }
+    
+      .cortex-widget-viewport {
+        position: absolute;
+        inset: 100px;
+      }
+    
+      .cortex-widget-btn {
+        color: #fff;
+        font-size: 14px;
+        padding: 6px 12px;
+        cursor: pointer;
+        border: 0;
+        border-radius: 3px;
+        box-shadow: none;
+        width: 100px;
+      }
+    
+      .cortex-widget-btn-cancel {
+        margin: 10px;
+        background-color: #337ab7;
+        border-color: #2e6da4;
+      }
+    
+      .cortex-widget-btn-save {
+        color: #fff;
+        background-color: #5cb85c;
+        border-color: #4cae4c;
+      }
+}

package/lib/styles/Scanner/index.css

@@ -0,0 +1,75 @@
+.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-header h4 {
+	margin: 0;
+}
+
+.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

@@ -14,6 +14,7 @@
 @use "Selected";
 @use "BarLoader";
 @use "Camera";
+@use "Map";
 
 @include Icons.icons();
 @include Popper.popper();
@@ -29,3 +30,21 @@
 @include Selected.selected();
 @include BarLoader.barLoader();
 @include Camera.camera();
+@include Map.map();
+
+// @include popper();
+// @include popper(
+//     (
+//         bgColor: red,
+//         fgColor: blue,
+//     )
+// );
+// @include popper(
+//     (
+//         bgColor: red,
+//         fgColor: blue,
+//     ),
+//     (
+//         properties: false
+//     )
+// );

package/lib/typings/typings/css.d.ts

@@ -9,4 +9,7 @@ declare module '*.scss' {
 }
 
 // Add specific CSS module declarations
+declare module 'leaflet/dist/leaflet.css';
+declare module 'leaflet-draw/dist/leaflet.draw.css';
+declare module 'leaflet.fullscreen/Control.FullScreen.css';
 declare module './css/center-active-control.css'; 

package/package.json

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

package/lib/styles/Scanner/index.scss

@@ -1,110 +0,0 @@
-@use "../global.scss";
-
-@mixin scanner($props: null, $options: null) {
-	$internal-options: global.$default-options;
-
-    $internal-props: (
-        bgColor: #ffffff,
-        fgColor: global.$color-grey-darker,
-        closeBtnColor: global.$color-grey,
-        closeBtnHoverColor: global.$color-blue,
-        closeBtnDisableColor: global.$color-blue-grey-lighter,
-        confirm: (
-            headerBgColor: global.$color-orange-dark,
-            headerFgColor: #ffffff,
-            bgColor: #ffffff,
-            fgColor: global.$color-grey-darker,
-        ),
-        error: (
-            headerBgColor: global.$color-red,
-            headerFgColor: #ffffff,
-            bgColor: #ffffff,
-            fgColor: global.$color-grey-darker,
-        ),
-        warning: (
-            headerBgColor: global.$color-grey,
-            headerFgColor: #ffffff,
-            bgColor: #ffffff,
-            fgColor: global.$color-grey-darker,
-        ),        
-    );
-
-    $internal-props: global.safe-map-merge($internal-props, $props);
-    $internal-options: global.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-header h4 {
-		margin: 0;
-	}
-
-	.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 */
-}