imbric-theme 0.8.3 → 0.8.5
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.
|
@@ -14,13 +14,14 @@ export const Checkbox = ({
|
|
|
14
14
|
linkCheck,
|
|
15
15
|
nameLinkCheck,
|
|
16
16
|
handleClick,
|
|
17
|
+
disabled,
|
|
17
18
|
}) => {
|
|
18
19
|
const [checked, setChecked] = useState(value)
|
|
19
20
|
|
|
20
21
|
return (
|
|
21
22
|
<div className={getStyles('checkbox')}>
|
|
22
23
|
<input
|
|
23
|
-
className={getStyles('checkbox-custom')}
|
|
24
|
+
className={getStyles('checkbox-custom', { 'is-disabled': disabled })}
|
|
24
25
|
type="checkbox"
|
|
25
26
|
id={id}
|
|
26
27
|
name={name}
|
|
@@ -31,6 +32,7 @@ export const Checkbox = ({
|
|
|
31
32
|
onChange(e)
|
|
32
33
|
}}
|
|
33
34
|
onClick={handleClick}
|
|
35
|
+
disabled={disabled}
|
|
34
36
|
/>
|
|
35
37
|
<label htmlFor={name} className={getStyles('checkbox-custom-label')}>
|
|
36
38
|
{label}
|
|
@@ -56,18 +58,20 @@ Checkbox.propTypes = {
|
|
|
56
58
|
label: PropTypes.string,
|
|
57
59
|
nameLinkCheck: PropTypes.string,
|
|
58
60
|
linkCheck: PropTypes.string,
|
|
61
|
+
disabled: PropTypes.bool,
|
|
59
62
|
}
|
|
60
63
|
|
|
61
64
|
Checkbox.defaultProps = {
|
|
62
|
-
getStyles: () => {},
|
|
63
|
-
onChange: () => {},
|
|
65
|
+
getStyles: () => { },
|
|
66
|
+
onChange: () => { },
|
|
64
67
|
id: 'checkbox',
|
|
65
68
|
name: 'checkbox',
|
|
66
69
|
value: true,
|
|
67
70
|
label: 'Aceptas los terminos',
|
|
68
71
|
nameLinkCheck: '',
|
|
69
72
|
linkCheck: '',
|
|
70
|
-
handleClick: () => {},
|
|
73
|
+
handleClick: () => { },
|
|
74
|
+
disabled: false,
|
|
71
75
|
}
|
|
72
76
|
|
|
73
77
|
export default withStyles(styles)(Checkbox)
|
|
@@ -7,10 +7,11 @@
|
|
|
7
7
|
|
|
8
8
|
.checkbox-custom {
|
|
9
9
|
opacity: 0;
|
|
10
|
-
position: absolute;
|
|
10
|
+
position: absolute;
|
|
11
11
|
}
|
|
12
12
|
|
|
13
|
-
.checkbox-custom,
|
|
13
|
+
.checkbox-custom,
|
|
14
|
+
.checkbox-custom-label {
|
|
14
15
|
display: inline-block;
|
|
15
16
|
vertical-align: middle;
|
|
16
17
|
margin: 5px;
|
|
@@ -19,7 +20,7 @@
|
|
|
19
20
|
font-weight: var(--font-weight-light);
|
|
20
21
|
}
|
|
21
22
|
|
|
22
|
-
.checkbox-custom
|
|
23
|
+
.checkbox-custom+.checkbox-custom-label:before {
|
|
23
24
|
content: '';
|
|
24
25
|
background: #fff;
|
|
25
26
|
border-radius: 5px;
|
|
@@ -33,7 +34,7 @@
|
|
|
33
34
|
text-align: center;
|
|
34
35
|
}
|
|
35
36
|
|
|
36
|
-
.checkbox-custom:checked
|
|
37
|
+
.checkbox-custom:checked+.checkbox-custom-label:before {
|
|
37
38
|
content: "";
|
|
38
39
|
display: inline-block;
|
|
39
40
|
width: 1px;
|
|
@@ -47,8 +48,13 @@
|
|
|
47
48
|
margin: 0px 15px 5px 5px;
|
|
48
49
|
}
|
|
49
50
|
|
|
50
|
-
.checkbox-custom,
|
|
51
|
+
.checkbox-custom,
|
|
52
|
+
.checkbox-custom-link {
|
|
51
53
|
font-weight: var(--font-weight-normal);
|
|
52
54
|
color: var(--color-primary);
|
|
53
55
|
text-decoration: underline;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.is-disabled {
|
|
59
|
+
cursor: no-drop;
|
|
54
60
|
}
|
|
@@ -8,7 +8,7 @@ import DynamicSelect from '../../molecules/DynamicSelect'
|
|
|
8
8
|
import Icon from "../../atoms/Icon/Icon";
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollPage, page, slice, placeholderDinamicSelect, handleResultsForPage, defaultValueSelect, positionPag }) => {
|
|
11
|
+
export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollPage, page, slice, placeholderDinamicSelect, handleResultsForPage, defaultValueSelect, positionPag, useContador, useAvancesCeil, setPositionPag, setContador }) => {
|
|
12
12
|
|
|
13
13
|
|
|
14
14
|
// const [positionPag, setPositionPag] = useState(0)
|
|
@@ -17,7 +17,11 @@ export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollP
|
|
|
17
17
|
if (slice.length < 1 && page !== 1) {
|
|
18
18
|
setPage(page - 1);
|
|
19
19
|
}
|
|
20
|
-
|
|
20
|
+
|
|
21
|
+
console.log(useContador)
|
|
22
|
+
console.log(useAvancesCeil * 1)
|
|
23
|
+
|
|
24
|
+
}, [slice, page, setPage, positionPag, useContador, useAvancesCeil]);
|
|
21
25
|
|
|
22
26
|
// const nextPagScroll = (page) => {
|
|
23
27
|
|
|
@@ -38,13 +42,34 @@ export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollP
|
|
|
38
42
|
<div className={styles.tableFooter}>
|
|
39
43
|
|
|
40
44
|
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
+
{positionPag !== 0 ?
|
|
46
|
+
|
|
47
|
+
<>
|
|
48
|
+
|
|
49
|
+
<Icon
|
|
50
|
+
name="angleLeft"
|
|
51
|
+
onClick={() => { setScrollPage('angleLeft') }}
|
|
52
|
+
/>
|
|
53
|
+
|
|
54
|
+
<button
|
|
55
|
+
className={`${styles.button} ${styles.inactiveButton}`}
|
|
56
|
+
onClick={() => { setPage(1); setDataPage(1); setPositionPag(0); setContador(1) }}
|
|
57
|
+
>
|
|
58
|
+
1
|
|
59
|
+
</button>
|
|
60
|
+
|
|
61
|
+
<button
|
|
62
|
+
disabled
|
|
63
|
+
className={`${styles.button} ${styles.disabled}`}
|
|
64
|
+
>
|
|
65
|
+
...
|
|
66
|
+
</button>
|
|
67
|
+
</> : null}
|
|
45
68
|
|
|
46
69
|
<div className={getStyles('footer-table-pag-box')}>
|
|
70
|
+
|
|
47
71
|
<div id="table-pag-scroll" className={getStyles('footer-table-pag')} style={{ marginLeft: positionPag + 'px' }}>
|
|
72
|
+
|
|
48
73
|
{range.map((el, index) => (
|
|
49
74
|
|
|
50
75
|
<button
|
|
@@ -58,14 +83,37 @@ export const FooterTable = ({ getStyles, range, setPage, setDataPage, setScrollP
|
|
|
58
83
|
</button>
|
|
59
84
|
|
|
60
85
|
))}
|
|
86
|
+
|
|
61
87
|
</div>
|
|
62
88
|
</div>
|
|
63
89
|
|
|
64
|
-
<
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
|
|
90
|
+
{useContador < useAvancesCeil && useContador !== useAvancesCeil || useContador === 1 ?
|
|
91
|
+
|
|
92
|
+
<>
|
|
93
|
+
|
|
94
|
+
<button
|
|
95
|
+
disabled
|
|
96
|
+
className={`${styles.button} ${styles.disabled}`}
|
|
97
|
+
>
|
|
98
|
+
...
|
|
99
|
+
</button>
|
|
100
|
+
|
|
101
|
+
<button
|
|
102
|
+
onClick={() => { setPage(range.length); setDataPage(range.length); setPositionPag('-' + (190 * (useAvancesCeil - 1))); setContador(useAvancesCeil * 1) }}
|
|
103
|
+
className={`${styles.button} ${styles.inactiveButton}`}
|
|
104
|
+
>
|
|
105
|
+
{range.length}
|
|
106
|
+
</button>
|
|
107
|
+
|
|
108
|
+
< Icon
|
|
109
|
+
name="angleRight"
|
|
110
|
+
onClick={() => { setScrollPage('angleRight') }}
|
|
111
|
+
// onChange={item => { handleSelectRange(item); onChangeRange(item); }}
|
|
112
|
+
/>
|
|
113
|
+
|
|
114
|
+
</> : null}
|
|
115
|
+
|
|
116
|
+
|
|
69
117
|
|
|
70
118
|
|
|
71
119
|
</div>
|
|
@@ -94,7 +142,7 @@ FooterTable.propTypes = {
|
|
|
94
142
|
setScrollPage: PropTypes.func,
|
|
95
143
|
placeholderDinamicSelect: PropTypes.string,
|
|
96
144
|
handleResultsForPage: PropTypes.func,
|
|
97
|
-
defaultValueSelect: PropTypes.any
|
|
145
|
+
defaultValueSelect: PropTypes.any,
|
|
98
146
|
// type: PropTypes.oneOf(options.types),
|
|
99
147
|
}
|
|
100
148
|
|
|
@@ -104,7 +152,7 @@ FooterTable.defaultProps = {
|
|
|
104
152
|
setScrollPage: () => { },
|
|
105
153
|
handleResultsForPage: () => { },
|
|
106
154
|
placeholderDinamicSelect: 'resultados por pagina',
|
|
107
|
-
defaultValueSelect: { value: 10, label: '10' }
|
|
155
|
+
defaultValueSelect: { value: 10, label: '10' },
|
|
108
156
|
}
|
|
109
157
|
|
|
110
158
|
export default withStyles(styles)(FooterTable)
|
|
@@ -39,6 +39,17 @@
|
|
|
39
39
|
background: #f9f9f9;
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
+
.inactiveButton:hover {
|
|
43
|
+
color: white;
|
|
44
|
+
background: rgb(73, 125, 189, .4);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.disabled {
|
|
48
|
+
color: #2c3e50;
|
|
49
|
+
background: #f9f9f9;
|
|
50
|
+
cursor: no-drop;
|
|
51
|
+
}
|
|
52
|
+
|
|
42
53
|
.footer-table-pag-box {
|
|
43
54
|
display: flex;
|
|
44
55
|
overflow-x: clip;
|