cortex-react-ui 0.1.161 → 0.1.162

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/lib/cjs/index.js +1 -1
  2. package/lib/cjs/index.js.map +1 -1
  3. package/lib/cjs/types/Scanner/Scanner.d.ts +3 -1
  4. package/lib/index.d.ts +3 -1
  5. package/lib/styles/Scanner/index.css +75 -0
  6. package/package.json +1 -1
  7. package/lib/styles/Scanner/index.scss +0 -110
package/lib/cjs/types/Scanner/Scanner.d.ts CHANGED
@@ -1,9 +1,11 @@
1
1
  import { IDetectedBarcode, IScannerProps } from '@yudiel/react-qr-scanner';
2
2
  import { TScanConfirmDialogLabels } from './ScanConfirmationDialog';
3
- declare const Scanner: ({ scanConfirmation, ...props }: ScannerProps) => JSX.Element;
3
+ declare const Scanner: ({ scanConfirmation, scanTrackerType, ...props }: ScannerProps) => JSX.Element;
4
+ export declare type TScanTrackerType = 'outline' | 'boundingBox' | 'centerText';
4
5
  declare type ScannerProps = {
5
6
  scanConfirmation?: boolean;
6
7
  scanConfirmDialog?: TScanConfirmDialogLabels;
8
+ scanTrackerType: TScanTrackerType;
7
9
  onScan?: (detectedCodes: IDetectedBarcode[]) => void;
8
10
  } & IScannerProps;
9
11
  export default Scanner;
package/lib/index.d.ts CHANGED
@@ -72,10 +72,12 @@ declare type TScanConfirmDialogLabels = {
72
72
  };
73
73
  };
74
74
 
75
- declare const Scanner: ({ scanConfirmation, ...props }: ScannerProps) => JSX.Element;
75
+ declare const Scanner: ({ scanConfirmation, scanTrackerType, ...props }: ScannerProps) => JSX.Element;
76
+ declare type TScanTrackerType = 'outline' | 'boundingBox' | 'centerText';
76
77
  declare type ScannerProps = {
77
78
  scanConfirmation?: boolean;
78
79
  scanConfirmDialog?: TScanConfirmDialogLabels;
80
+ scanTrackerType: TScanTrackerType;
79
81
  onScan?: (detectedCodes: IDetectedBarcode[]) => void;
80
82
  } & IScannerProps;
81
83
 
package/lib/styles/Scanner/index.css ADDED
@@ -0,0 +1,75 @@
1
+ .btn {
2
+ display: flex;
3
+ align-items: center;
4
+ justify-content: center;
5
+ padding: 0.5rem 1rem;
6
+ border: 1px solid transparent;
7
+ border-radius: 0.375rem;
8
+ box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
9
+ font-size: 0.875rem;
10
+ font-weight: 500;
11
+ line-height: 1.25rem;
12
+ text-align: center;
13
+ text-transform: none;
14
+ white-space: nowrap;
15
+ vertical-align: middle;
16
+ user-select: none;
17
+ background-color: #4F46E5;
18
+ color: #fff;
19
+ cursor: pointer;
20
+ outline: none;
21
+ transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
22
+ }
23
+
24
+ .btn-default {
25
+ background-color: #4F46E5;
26
+ }
27
+
28
+ .btn-default:hover {
29
+ opacity: 0.8;
30
+ }
31
+
32
+ .select {
33
+ display: block;
34
+ width: 100%;
35
+ padding-left: 0.75rem;
36
+ color: #000;
37
+ padding-right: 2.5rem;
38
+ padding-top: 0.5rem;
39
+ padding-bottom: 0.5rem;
40
+ font-size: 1rem;
41
+ border-radius: 0.375rem;
42
+ }
43
+
44
+ /* DIALOG */
45
+ .dialog-header {
46
+ display: flex;
47
+ justify-content: space-between;
48
+ }
49
+
50
+ .dialog-header h4 {
51
+ margin: 0;
52
+ }
53
+
54
+ .dialog-mask {
55
+ overflow-x: hidden;
56
+ overflow-y: auto;
57
+ display: flex;
58
+ justify-content: center;
59
+ padding-top: 2.5rem;
60
+ padding-bottom: 5rem;
61
+ background-color: #0005;
62
+ position: fixed;
63
+ inset: 0;
64
+ }
65
+
66
+ .dialog-body {
67
+ display: flex;
68
+ flex-direction: column;
69
+ gap: 1.25rem;
70
+ padding: 1.25rem;
71
+ height: max-content;
72
+ background-color: white;
73
+ }
74
+
75
+ /* DIALOG */
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "cortex-react-ui",
3
- "version": "0.1.161",
3
+ "version": "0.1.162",
4
4
  "description": "React UI",
5
5
  "author": "Anthony",
6
6
  "license": "MIT",
package/lib/styles/Scanner/index.scss DELETED
@@ -1,110 +0,0 @@
1
- @import "../global.scss";
2
-
3
- @mixin scanner($props: null, $options: null) {
4
- $internal-options: $default-options;
5
-
6
- $internal-props: (
7
- bgColor: #ffffff,
8
- fgColor: $color-grey-darker,
9
- closeBtnColor: $color-grey,
10
- closeBtnHoverColor: $color-blue,
11
- closeBtnDisableColor: $color-blue-grey-lighter,
12
- confirm: (
13
- headerBgColor: $color-orange-dark,
14
- headerFgColor: #ffffff,
15
- bgColor: #ffffff,
16
- fgColor: $color-grey-darker,
17
- ),
18
- error: (
19
- headerBgColor: $color-red,
20
- headerFgColor: #ffffff,
21
- bgColor: #ffffff,
22
- fgColor: $color-grey-darker,
23
- ),
24
- warning: (
25
- headerBgColor: $color-grey,
26
- headerFgColor: #ffffff,
27
- bgColor: #ffffff,
28
- fgColor: $color-grey-darker,
29
- ),
30
- );
31
-
32
- $internal-props: safe-map-merge($internal-props, $props);
33
- $internal-options: safe-map-merge($internal-options, $options);
34
-
35
- .btn {
36
- display: flex;
37
- align-items: center;
38
- justify-content: center;
39
- padding: 0.5rem 1rem;
40
- border: 1px solid transparent;
41
- border-radius: 0.375rem;
42
- box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
43
- font-size: 0.875rem;
44
- font-weight: 500;
45
- line-height: 1.25rem;
46
- text-align: center;
47
- text-transform: none;
48
- white-space: nowrap;
49
- vertical-align: middle;
50
- user-select: none;
51
- background-color: #4F46E5;
52
- color: #fff;
53
- cursor: pointer;
54
- outline: none;
55
- transition: background-color 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
56
- }
57
-
58
- .btn-default {
59
- background-color: #4F46E5;
60
- }
61
-
62
- .btn-default:hover {
63
- opacity: 0.8;
64
- }
65
-
66
- .select {
67
- display: block;
68
- width: 100%;
69
- padding-left: 0.75rem;
70
- color: #000;
71
- padding-right: 2.5rem;
72
- padding-top: 0.5rem;
73
- padding-bottom: 0.5rem;
74
- font-size: 1rem;
75
- border-radius: 0.375rem;
76
- }
77
-
78
- /* DIALOG */
79
- .dialog-header {
80
- display: flex;
81
- justify-content: space-between;
82
- }
83
-
84
- .dialog-header h4 {
85
- margin: 0;
86
- }
87
-
88
- .dialog-mask {
89
- overflow-x: hidden;
90
- overflow-y: auto;
91
- display: flex;
92
- justify-content: center;
93
- padding-top: 2.5rem;
94
- padding-bottom: 5rem;
95
- background-color: #0005;
96
- position: fixed;
97
- inset: 0;
98
- }
99
-
100
- .dialog-body {
101
- display: flex;
102
- flex-direction: column;
103
- gap: 1.25rem;
104
- padding: 1.25rem;
105
- height: max-content;
106
- background-color: white;
107
- }
108
-
109
- /* DIALOG */
110
- }