imbric-theme 0.8.7 → 0.8.8
Sign up to get free protection for your applications and to get access to all the features.
- package/atoms/Icon/constants.js +8 -1
- package/atoms/Modal/Modal.module.css +3 -3
- package/atoms/Textarea/Textarea.js +99 -15
- package/atoms/Textarea/Textarea.module.css +29 -0
- package/layout/DynamicTable/DynamicTable.js +63 -0
- package/molecules/RowTable/RowTable.module.css +1 -0
- package/package.json +1 -1
- package/public/static/images/book-svgrepo-com.svg +0 -15
- package/public/static/images/clone-svgrepo-com.svg +0 -8
- package/public/static/images/copy-svgrepo-com.svg +0 -2
package/atoms/Icon/constants.js
CHANGED
|
@@ -999,7 +999,14 @@ export const iconsMap = {
|
|
|
999
999
|
</>
|
|
1000
1000
|
),
|
|
1001
1001
|
},
|
|
1002
|
-
|
|
1002
|
+
infoExampleCode: {
|
|
1003
|
+
viewBox: '0 0 24 24',
|
|
1004
|
+
svg: (
|
|
1005
|
+
<>
|
|
1006
|
+
<path fillRule="evenodd" clipRule="evenodd" d="M9.29289 1.29289C9.48043 1.10536 9.73478 1 10 1H18C19.6569 1 21 2.34315 21 4V9C21 9.55228 20.5523 10 20 10C19.4477 10 19 9.55228 19 9V4C19 3.44772 18.5523 3 18 3H11V8C11 8.55228 10.5523 9 10 9H5V20C5 20.5523 5.44772 21 6 21H9C9.55228 21 10 21.4477 10 22C10 22.5523 9.55228 23 9 23H6C4.34315 23 3 21.6569 3 20V8C3 7.73478 3.10536 7.48043 3.29289 7.29289L9.29289 1.29289ZM6.41421 7H9V4.41421L6.41421 7ZM18.7071 12.2929L22.7071 16.2929C23.0976 16.6834 23.0976 17.3166 22.7071 17.7071L18.7071 21.7071C18.3166 22.0976 17.6834 22.0976 17.2929 21.7071C16.9024 21.3166 16.9024 20.6834 17.2929 20.2929L20.5858 17L17.2929 13.7071C16.9024 13.3166 16.9024 12.6834 17.2929 12.2929C17.6834 11.9024 18.3166 11.9024 18.7071 12.2929ZM14.7071 13.7071C15.0976 13.3166 15.0976 12.6834 14.7071 12.2929C14.3166 11.9024 13.6834 11.9024 13.2929 12.2929L9.29289 16.2929C8.90237 16.6834 8.90237 17.3166 9.29289 17.7071L13.2929 21.7071C13.6834 22.0976 14.3166 22.0976 14.7071 21.7071C15.0976 21.3166 15.0976 20.6834 14.7071 20.2929L11.4142 17L14.7071 13.7071Z" fill="#000000" />
|
|
1007
|
+
</>
|
|
1008
|
+
),
|
|
1009
|
+
},
|
|
1003
1010
|
|
|
1004
1011
|
}
|
|
1005
1012
|
|
|
@@ -79,7 +79,7 @@
|
|
|
79
79
|
|
|
80
80
|
@media (min-width: 992px) {
|
|
81
81
|
.modal {
|
|
82
|
-
max-width:
|
|
82
|
+
max-width: 600px;
|
|
83
83
|
height: auto;
|
|
84
84
|
border-radius: var(--border-radius-sm);
|
|
85
85
|
/* max-height: 100%;
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
.container {
|
|
106
|
-
max-height:
|
|
106
|
+
max-height: 700px;
|
|
107
107
|
overflow: auto;
|
|
108
108
|
min-width: 100%;
|
|
109
109
|
}
|
|
@@ -114,7 +114,7 @@
|
|
|
114
114
|
}
|
|
115
115
|
|
|
116
116
|
.container-full-soft {
|
|
117
|
-
max-height:
|
|
117
|
+
max-height: 700px;
|
|
118
118
|
overflow: auto;
|
|
119
119
|
min-width: 100%;
|
|
120
120
|
}
|
|
@@ -1,14 +1,12 @@
|
|
|
1
|
-
import React from 'react'
|
|
1
|
+
import React, { useState } from 'react'
|
|
2
2
|
import PropTypes from 'prop-types'
|
|
3
|
-
|
|
3
|
+
import ReactTooltip from 'react-tooltip'
|
|
4
4
|
import styles from './Textarea.module.css'
|
|
5
5
|
import withStyles from '../../hocs/withStyles'
|
|
6
6
|
|
|
7
7
|
const DEFAULT_TEXTAREA_ROWS = 5
|
|
8
8
|
|
|
9
|
-
|
|
10
|
-
// onChange()
|
|
11
|
-
// }
|
|
9
|
+
import Icon from '../../atoms/Icon'
|
|
12
10
|
|
|
13
11
|
export const Textarea = ({
|
|
14
12
|
children,
|
|
@@ -18,18 +16,97 @@ export const Textarea = ({
|
|
|
18
16
|
getStyles,
|
|
19
17
|
value,
|
|
20
18
|
id,
|
|
19
|
+
disabled,
|
|
20
|
+
viewBoxCopyCode,
|
|
21
|
+
txtBtnCopyCode,
|
|
22
|
+
txtTootipCopyCode,
|
|
21
23
|
}) => {
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
// STATE TOOLTIP
|
|
27
|
+
const [isToolTipMounted, setIsToolTipMounted] = useState(false)
|
|
28
|
+
|
|
29
|
+
// TOOLTIP
|
|
30
|
+
const handleMouseEnter = () => {
|
|
31
|
+
setIsToolTipMounted(true)
|
|
32
|
+
}
|
|
33
|
+
const handleMouseLeave = () => {
|
|
34
|
+
setIsToolTipMounted(false)
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
const handleClick = async () => {
|
|
38
|
+
|
|
39
|
+
// // Select the text field
|
|
40
|
+
// txtTootipCopyCode.select()
|
|
41
|
+
// txtTootipCopyCode.setSelectionRange(0, 99999) // For mobile devices
|
|
42
|
+
|
|
43
|
+
// // Copy the text inside the text field
|
|
44
|
+
// navigator.clipboard.writeText(txtTootipCopyCode.value)
|
|
45
|
+
|
|
46
|
+
// // Alert the copied text
|
|
47
|
+
// alert("Copied the text: " + txtTootipCopyCode.value)
|
|
48
|
+
|
|
49
|
+
|
|
50
|
+
|
|
51
|
+
|
|
52
|
+
try {
|
|
53
|
+
await navigator.clipboard.writeText(txtTootipCopyCode);
|
|
54
|
+
console.log('Content copied to clipboard');
|
|
55
|
+
/* Resolved - text copied to clipboard successfully */
|
|
56
|
+
} catch (err) {
|
|
57
|
+
console.error('Failed to copy: ', err);
|
|
58
|
+
/* Rejected - text failed to copy to the clipboard */
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
|
|
62
|
+
|
|
63
|
+
|
|
64
|
+
}
|
|
65
|
+
|
|
22
66
|
return (
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
67
|
+
<>
|
|
68
|
+
{viewBoxCopyCode ?
|
|
69
|
+
<>
|
|
70
|
+
<span
|
|
71
|
+
data-tip
|
|
72
|
+
data-for='tooltipCopyCode'
|
|
73
|
+
onMouseEnter={handleMouseEnter}
|
|
74
|
+
onMouseLeave={handleMouseLeave}
|
|
75
|
+
style={{ width: 'max-content', display: 'block' }}
|
|
76
|
+
>
|
|
77
|
+
<>
|
|
78
|
+
<div className={getStyles('boxCopyCode')}>
|
|
79
|
+
<Icon
|
|
80
|
+
name="infoExampleCode"
|
|
81
|
+
/>
|
|
82
|
+
<div className={getStyles('btnCopyCode')} onClick={handleClick}>
|
|
83
|
+
{txtBtnCopyCode}
|
|
84
|
+
</div>
|
|
85
|
+
</div>
|
|
86
|
+
</>
|
|
87
|
+
</span>
|
|
88
|
+
|
|
89
|
+
{isToolTipMounted ? (
|
|
90
|
+
<ReactTooltip id='tooltipCopyCode' type='error'>
|
|
91
|
+
<span>{txtTootipCopyCode}</span>
|
|
92
|
+
</ReactTooltip>
|
|
93
|
+
) : null}
|
|
94
|
+
|
|
95
|
+
</>
|
|
96
|
+
|
|
97
|
+
: null}
|
|
98
|
+
<textarea
|
|
99
|
+
id={id}
|
|
100
|
+
className={getStyles('textarea')}
|
|
101
|
+
rows={rows}
|
|
102
|
+
placeholder={placeholder}
|
|
103
|
+
onChange={onChange}
|
|
104
|
+
value={value}
|
|
105
|
+
disabled={disabled}
|
|
106
|
+
>
|
|
107
|
+
{children}
|
|
108
|
+
</textarea>
|
|
109
|
+
</>
|
|
33
110
|
)
|
|
34
111
|
}
|
|
35
112
|
|
|
@@ -41,6 +118,9 @@ Textarea.propTypes = {
|
|
|
41
118
|
placeholder: PropTypes.string,
|
|
42
119
|
value: PropTypes.string,
|
|
43
120
|
id: PropTypes.string.isRequired,
|
|
121
|
+
viewBoxCopyCode: PropTypes.bool,
|
|
122
|
+
txtBtnCopyCode: PropTypes.string,
|
|
123
|
+
txtTootipCopyCode: PropTypes.string,
|
|
44
124
|
}
|
|
45
125
|
|
|
46
126
|
Textarea.defaultProps = {
|
|
@@ -48,6 +128,10 @@ Textarea.defaultProps = {
|
|
|
48
128
|
onChange: () => { },
|
|
49
129
|
rows: DEFAULT_TEXTAREA_ROWS,
|
|
50
130
|
id: '',
|
|
131
|
+
disabled: false,
|
|
132
|
+
viewBoxCopyCode: false,
|
|
133
|
+
txtBtnCopyCode: 'COPIAR',
|
|
134
|
+
txtTootipCopyCode: 'yeeeee'
|
|
51
135
|
}
|
|
52
136
|
|
|
53
137
|
export default withStyles(styles)(Textarea)
|
|
@@ -22,4 +22,33 @@
|
|
|
22
22
|
.textarea:focus {
|
|
23
23
|
box-shadow: 0 0 0 1px var(--color-primary), 0 0 10px 0 var(--color-primary);
|
|
24
24
|
outline: none;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.textarea:disabled {
|
|
28
|
+
background-color: hsl(0, 0%, 95%);
|
|
29
|
+
border-color: hsl(0, 0%, 90%);
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
.boxCopyCode {
|
|
33
|
+
display: flex;
|
|
34
|
+
align-items: center;
|
|
35
|
+
cursor: pointer;
|
|
36
|
+
/* margin-top: -44px; */
|
|
37
|
+
/* position: absolute; */
|
|
38
|
+
/* top: 108px;
|
|
39
|
+
right: 24px; */
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
.btnCopyCode {
|
|
43
|
+
font-size: 10px;
|
|
44
|
+
border: 1px solid var(--color-font-base);
|
|
45
|
+
padding: 3px;
|
|
46
|
+
border-radius: 3px;
|
|
47
|
+
color: var(--color-font-base);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.btnCopyCode:hover {
|
|
51
|
+
border: 1px solid var(--color-font-base);
|
|
52
|
+
color: #fff;
|
|
53
|
+
background-color: var(--color-font-base);
|
|
25
54
|
}
|
|
@@ -26,10 +26,18 @@ export const DynamicTable = ({
|
|
|
26
26
|
isViewFilterTable,
|
|
27
27
|
isViewBtn,
|
|
28
28
|
isViewLeftBtn,
|
|
29
|
+
isViewLeftBtnSecondary,
|
|
30
|
+
isViewLeftBtnTertiary,
|
|
29
31
|
isViewDownloadDoc,
|
|
30
32
|
typeBtn,
|
|
33
|
+
typeBtnSecondary,
|
|
34
|
+
typeBtnTertiary,
|
|
31
35
|
titleBtn,
|
|
36
|
+
titleBtnSecondary,
|
|
37
|
+
titleBtnTertiary,
|
|
32
38
|
handleBtn,
|
|
39
|
+
handleBtnSecondary,
|
|
40
|
+
handleBtnTertiary,
|
|
33
41
|
handleAddColumn,
|
|
34
42
|
handleFilterTable,
|
|
35
43
|
handleSelectRange,
|
|
@@ -122,6 +130,45 @@ export const DynamicTable = ({
|
|
|
122
130
|
) : null}
|
|
123
131
|
|
|
124
132
|
|
|
133
|
+
|
|
134
|
+
{isViewLeftBtnSecondary ? (
|
|
135
|
+
|
|
136
|
+
<>
|
|
137
|
+
|
|
138
|
+
<div className={getStyles('opFunctionBox3')}>
|
|
139
|
+
|
|
140
|
+
<Button
|
|
141
|
+
type={typeBtnSecondary}
|
|
142
|
+
isInline={true}
|
|
143
|
+
onClick={handleBtnSecondary}
|
|
144
|
+
>
|
|
145
|
+
{titleBtnSecondary}
|
|
146
|
+
</Button>
|
|
147
|
+
|
|
148
|
+
</div>
|
|
149
|
+
</>
|
|
150
|
+
) : null}
|
|
151
|
+
|
|
152
|
+
{isViewLeftBtnTertiary ? (
|
|
153
|
+
|
|
154
|
+
<>
|
|
155
|
+
|
|
156
|
+
<div className={getStyles('opFunctionBox3')}>
|
|
157
|
+
|
|
158
|
+
<Button
|
|
159
|
+
type={typeBtnTertiary}
|
|
160
|
+
isInline={true}
|
|
161
|
+
onClick={handleBtnTertiary}
|
|
162
|
+
>
|
|
163
|
+
{titleBtnTertiary}
|
|
164
|
+
</Button>
|
|
165
|
+
|
|
166
|
+
</div>
|
|
167
|
+
</>
|
|
168
|
+
) : null}
|
|
169
|
+
|
|
170
|
+
|
|
171
|
+
|
|
125
172
|
{isViewRange ? (
|
|
126
173
|
<div className={getStyles('opFunctionBox1')}>
|
|
127
174
|
<DatePicker
|
|
@@ -275,6 +322,14 @@ DynamicTable.propTypes = {
|
|
|
275
322
|
typeBtn: PropTypes.string,
|
|
276
323
|
titleBtn: PropTypes.string,
|
|
277
324
|
handleBtn: PropTypes.func,
|
|
325
|
+
isViewLeftBtnSecondary: PropTypes.bool,
|
|
326
|
+
isViewLeftBtnTertiary: PropTypes.bool,
|
|
327
|
+
typeBtnSecondary: PropTypes.string,
|
|
328
|
+
typeBtnTertiary: PropTypes.string,
|
|
329
|
+
titleBtnSecondary: PropTypes.string,
|
|
330
|
+
titleBtnTertiary: PropTypes.string,
|
|
331
|
+
handleBtnSecondary: PropTypes.func,
|
|
332
|
+
handleBtnTertiary: PropTypes.func,
|
|
278
333
|
txtTootipFileDownload: PropTypes.string,
|
|
279
334
|
titleHeadingTable: PropTypes.string,
|
|
280
335
|
}
|
|
@@ -302,6 +357,14 @@ DynamicTable.defaultProps = {
|
|
|
302
357
|
typeBtn: 'primary',
|
|
303
358
|
titleBtn: '',
|
|
304
359
|
handleBtn: () => { },
|
|
360
|
+
isViewLeftBtnSecondary: false,
|
|
361
|
+
isViewLeftBtnTertiary: false,
|
|
362
|
+
typeBtnSecondary: 'primary',
|
|
363
|
+
typeBtnTertiary: 'primary',
|
|
364
|
+
titleBtnSecondary: '',
|
|
365
|
+
titleBtnTertiary: '',
|
|
366
|
+
handleBtnSecondary: () => { },
|
|
367
|
+
handleBtnTertiary: () => { },
|
|
305
368
|
txtTootipFileDownload: '',
|
|
306
369
|
titleHeadingTable: 'Total: 200',
|
|
307
370
|
}
|
package/package.json
CHANGED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
-
<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
-
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
-
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
|
5
|
-
<style type="text/css">
|
|
6
|
-
.st0{fill:#292D32;}
|
|
7
|
-
</style>
|
|
8
|
-
<path class="st0" d="M3.1,19.5c-0.6,0-1-0.4-1-1V6.9c0-4.8,1.5-6.3,6.3-6.3h7.4c4.8,0,6.3,1.5,6.3,6.3v10.6c0,0.2,0,0.3,0,0.5
|
|
9
|
-
c0,0.6-0.5,1-1.1,0.9c-0.6,0-1-0.5-0.9-1.1c0-0.1,0-0.2,0-0.4V6.9c0-3.7-0.6-4.3-4.3-4.3H8.4c-3.7,0-4.3,0.6-4.3,4.3v11.6
|
|
10
|
-
C4.1,19.1,3.7,19.5,3.1,19.5z"/>
|
|
11
|
-
<path class="st0" d="M17.4,23.7H6.8c-2.6,0-4.7-2.1-4.7-4.7v-0.7c0-2.2,1.8-4,4-4h14.9c0.6,0,1,0.4,1,1V19
|
|
12
|
-
C22.1,21.6,20,23.7,17.4,23.7z M6.1,16.3c-1.1,0-2,0.9-2,2V19c0,1.5,1.2,2.7,2.7,2.7h10.6c1.5,0,2.7-1.2,2.7-2.7v-2.7H6.1z"/>
|
|
13
|
-
<path class="st0" d="M16.3,7.9H7.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h8.4c0.6,0,1,0.4,1,1S16.9,7.9,16.3,7.9z"/>
|
|
14
|
-
<path class="st0" d="M13.1,11.6H7.9c-0.6,0-1-0.4-1-1s0.4-1,1-1h5.3c0.6,0,1,0.4,1,1S13.7,11.6,13.1,11.6z"/>
|
|
15
|
-
</svg>
|
|
@@ -1,8 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?>
|
|
2
|
-
<!-- Generator: Adobe Illustrator 25.4.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
|
3
|
-
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
|
4
|
-
viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
|
|
5
|
-
<path d="M22.8,0H7.2C6.5,0,6,0.5,6,1.2v15.6C6,17.5,6.5,18,7.2,18h15.6c0.7,0,1.2-0.5,1.2-1.2V1.2C24,0.5,23.5,0,22.8,0z M22.4,16.4
|
|
6
|
-
H7.6V1.6h14.8V16.4z"/>
|
|
7
|
-
<path d="M16.4,22.4H1.6V7.6h2.8V6H1.2C0.5,6,0,6.5,0,7.2v15.6C0,23.5,0.5,24,1.2,24h15.6c0.7,0,1.2-0.5,1.2-1.2v-3.2h-1.6V22.4z"/>
|
|
8
|
-
</svg>
|
|
@@ -1,2 +0,0 @@
|
|
|
1
|
-
<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
|
|
2
|
-
<svg fill="#000000" width="800px" height="800px" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.024 3.75c0-.966.784-1.75 1.75-1.75H20.25c.966 0 1.75.784 1.75 1.75v11.498a1.75 1.75 0 01-1.75 1.75H8.774a1.75 1.75 0 01-1.75-1.75V3.75zm1.75-.25a.25.25 0 00-.25.25v11.498c0 .139.112.25.25.25H20.25a.25.25 0 00.25-.25V3.75a.25.25 0 00-.25-.25H8.774z"/><path d="M1.995 10.749a1.75 1.75 0 011.75-1.751H5.25a.75.75 0 110 1.5H3.745a.25.25 0 00-.25.25L3.5 20.25c0 .138.111.25.25.25h9.5a.25.25 0 00.25-.25v-1.51a.75.75 0 111.5 0v1.51A1.75 1.75 0 0113.25 22h-9.5A1.75 1.75 0 012 20.25l-.005-9.501z"/></svg>
|