plataforma-fundacao-componentes 2.22.14 → 2.22.17
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.
- package/dist/components/checkbox/Checkbox.d.ts +2 -2
- package/dist/components/table/components/TableUpperHeader/TableUpperHeader.d.ts +3 -1
- package/dist/components/tableWithOverflow/TableWithOverflow.d.ts +0 -4
- package/dist/index.css +8 -3
- package/dist/index.js +52 -36
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +52 -36
- package/dist/index.modern.js.map +1 -1
- package/package.json +1 -1
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
|
|
1
|
+
import React from 'react';
|
|
2
2
|
import { CheckboxThemes } from '../../libraries/CheckboxThemes';
|
|
3
3
|
import { TooltipPosition } from '../../libraries/Tooltips';
|
|
4
4
|
import './Checkbox.scss';
|
|
@@ -7,7 +7,7 @@ export interface CheckboxProps {
|
|
|
7
7
|
'tooltip-text'?: string;
|
|
8
8
|
disabled?: boolean;
|
|
9
9
|
value?: boolean;
|
|
10
|
-
onChange?: (value: boolean) => void;
|
|
10
|
+
onChange?: (value: boolean, evt: React.MouseEvent<HTMLElement>) => void;
|
|
11
11
|
theme?: CheckboxThemes;
|
|
12
12
|
tag?: 'button' | 'div';
|
|
13
13
|
}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React from 'react';
|
|
1
|
+
import React, { ReactNode } from 'react';
|
|
2
2
|
import { DropdownMenuProps } from '../../../dropdownMenu/DropdownMenu';
|
|
3
3
|
import './TableUpperHeader.scss';
|
|
4
4
|
interface upperHeaderButtonType {
|
|
@@ -18,6 +18,8 @@ export interface TableUpperHeaderProps {
|
|
|
18
18
|
active?: boolean;
|
|
19
19
|
leftContent?: (upperHeaderButtonType | upperHeaderDropdownMenuType)[];
|
|
20
20
|
rightContent?: (upperHeaderButtonType | upperHeaderDropdownMenuType)[];
|
|
21
|
+
opened?: boolean;
|
|
22
|
+
collapsedContent?: ReactNode;
|
|
21
23
|
}
|
|
22
24
|
declare function TableUpperHeader(props: TableUpperHeaderProps): JSX.Element;
|
|
23
25
|
declare const _default: React.MemoExoticComponent<typeof TableUpperHeader>;
|
|
@@ -16,8 +16,6 @@ export declare type ColumnObject = {
|
|
|
16
16
|
};
|
|
17
17
|
interface TableWithOverflowProps {
|
|
18
18
|
upperHeader?: TableUpperHeaderProps;
|
|
19
|
-
showArrowControl?: boolean;
|
|
20
|
-
hasActionsCol?: boolean;
|
|
21
19
|
showTopNavigator?: boolean;
|
|
22
20
|
columns: ColumnObject[];
|
|
23
21
|
lines?: any[];
|
|
@@ -25,8 +23,6 @@ interface TableWithOverflowProps {
|
|
|
25
23
|
declare function TableWithOverflow(props: TableWithOverflowProps): JSX.Element;
|
|
26
24
|
declare namespace TableWithOverflow {
|
|
27
25
|
var defaultProps: {
|
|
28
|
-
showArrowControl: boolean;
|
|
29
|
-
hasActionsCol: boolean;
|
|
30
26
|
showTopNavigator: boolean;
|
|
31
27
|
};
|
|
32
28
|
}
|
package/dist/index.css
CHANGED
|
@@ -15240,7 +15240,7 @@ h5 {
|
|
|
15240
15240
|
.component-upper-header-table {
|
|
15241
15241
|
width: 100%;
|
|
15242
15242
|
border-radius: 8px 8px 0 0;
|
|
15243
|
-
padding: 0
|
|
15243
|
+
padding: 0;
|
|
15244
15244
|
display: flex;
|
|
15245
15245
|
align-items: center;
|
|
15246
15246
|
justify-content: space-between;
|
|
@@ -15248,7 +15248,6 @@ h5 {
|
|
|
15248
15248
|
border-bottom: 1px solid;
|
|
15249
15249
|
transition: background-color 0.3s ease, color 0.3s ease;
|
|
15250
15250
|
background-color: #cdd3cd;
|
|
15251
|
-
color: #828a82;
|
|
15252
15251
|
border-color: #828a82; }
|
|
15253
15252
|
.component-upper-header-table .component-upper-header-table-btn {
|
|
15254
15253
|
font-size: 16px;
|
|
@@ -15280,17 +15279,22 @@ h5 {
|
|
|
15280
15279
|
max-height: 20px !important; }
|
|
15281
15280
|
.component-upper-header-table.active {
|
|
15282
15281
|
background-color: #d7e6c8;
|
|
15283
|
-
color: #3fa110;
|
|
15284
15282
|
border-color: #3fa110; }
|
|
15285
15283
|
.component-upper-header-table.active .component-upper-header-table-btn:not(:disabled) {
|
|
15286
15284
|
background-color: #d7e6c8;
|
|
15287
15285
|
color: #3fa110; }
|
|
15288
15286
|
.component-upper-header-table .component-upper-header-table-left {
|
|
15287
|
+
padding-left: 8px;
|
|
15289
15288
|
display: flex;
|
|
15290
15289
|
flex-wrap: wrap; }
|
|
15291
15290
|
.component-upper-header-table .component-upper-header-table-right {
|
|
15291
|
+
padding-right: 8px;
|
|
15292
15292
|
display: flex;
|
|
15293
15293
|
flex-wrap: wrap; }
|
|
15294
|
+
.component-upper-header-table .component-upper-header-table-collapsed {
|
|
15295
|
+
border-top: 1px solid #3fa110;
|
|
15296
|
+
background-color: #eff4eb;
|
|
15297
|
+
padding: var(--colPadding); }
|
|
15294
15298
|
|
|
15295
15299
|
@import url("https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");
|
|
15296
15300
|
@import url("https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap");
|
|
@@ -15448,6 +15452,7 @@ h5 {
|
|
|
15448
15452
|
.component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table thead tr:nth-child(2) {
|
|
15449
15453
|
height: 12px; }
|
|
15450
15454
|
.component-table-with-overflow .component-table-with-overflow-wrapper .component-table-with-overflow-outer-table table tbody tr td {
|
|
15455
|
+
min-height: 44px;
|
|
15451
15456
|
background-color: #fefefe;
|
|
15452
15457
|
padding: 12px 8px;
|
|
15453
15458
|
white-space: nowrap; }
|
package/dist/index.js
CHANGED
|
@@ -1339,7 +1339,7 @@ function Checkbox(props) {
|
|
|
1339
1339
|
var fProps = React.useMemo(function () {
|
|
1340
1340
|
var handleClick = function handleClick(evt) {
|
|
1341
1341
|
if (typeof props.onChange === 'function' && !props.disabled) {
|
|
1342
|
-
props.onChange(!props.value);
|
|
1342
|
+
props.onChange(!props.value, evt);
|
|
1343
1343
|
evt.stopPropagation();
|
|
1344
1344
|
}
|
|
1345
1345
|
};
|
|
@@ -9580,7 +9580,7 @@ var LeftCheckboxWithLabel = function LeftCheckboxWithLabel(props) {
|
|
|
9580
9580
|
var _props$spanProps3;
|
|
9581
9581
|
|
|
9582
9582
|
if (props.anchorLabelToCheckbox) {
|
|
9583
|
-
props.onChange(!props.value);
|
|
9583
|
+
props.onChange(!props.value, evt);
|
|
9584
9584
|
}
|
|
9585
9585
|
|
|
9586
9586
|
if (props.spanProps && typeof props.spanProps.onClick === 'function') (_props$spanProps3 = props.spanProps) === null || _props$spanProps3 === void 0 ? void 0 : _props$spanProps3.onClick(evt);
|
|
@@ -9872,38 +9872,49 @@ function TableUpperHeader(props) {
|
|
|
9872
9872
|
}, React__default.createElement("div", {
|
|
9873
9873
|
className: rootClassName$1A + "-left"
|
|
9874
9874
|
}, (_props$leftContent = props.leftContent) === null || _props$leftContent === void 0 ? void 0 : _props$leftContent.map(function (btn, i) {
|
|
9875
|
-
return btn.type === 'Button' ? React__default.createElement("button",
|
|
9876
|
-
key: i
|
|
9877
|
-
|
|
9875
|
+
return btn.type === 'Button' ? React__default.createElement("button", {
|
|
9876
|
+
key: i,
|
|
9877
|
+
id: btn.id,
|
|
9878
|
+
onClick: btn.onClick,
|
|
9878
9879
|
disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.disabled) || false,
|
|
9879
|
-
|
|
9880
|
-
|
|
9881
|
-
}
|
|
9882
|
-
key: i
|
|
9883
|
-
}), React__default.createElement("button", Object.assign({
|
|
9880
|
+
className: rootClassName$1A + "-btn",
|
|
9881
|
+
type: 'button'
|
|
9882
|
+
}, btn.leftIcon && React__default.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React__default.createElement("span", null, btn.rightIcon)) : React__default.createElement(DropdownMenu, Object.assign({}, btn, {
|
|
9884
9883
|
key: i
|
|
9885
|
-
},
|
|
9884
|
+
}), React__default.createElement("button", {
|
|
9885
|
+
key: i,
|
|
9886
|
+
id: btn.children.id,
|
|
9887
|
+
onClick: btn.children.onClick,
|
|
9886
9888
|
className: rootClassName$1A + "-btn",
|
|
9887
9889
|
disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.children.disabled) || false,
|
|
9888
9890
|
type: 'button'
|
|
9889
|
-
}
|
|
9891
|
+
}, btn.children.leftIcon && React__default.createElement("span", null, btn.children.leftIcon), btn.children.label, btn.children.rightIcon && React__default.createElement("span", null, btn.children.rightIcon)));
|
|
9890
9892
|
})), React__default.createElement("div", {
|
|
9891
9893
|
className: rootClassName$1A + "-right"
|
|
9892
9894
|
}, (_props$rightContent = props.rightContent) === null || _props$rightContent === void 0 ? void 0 : _props$rightContent.map(function (btn, i) {
|
|
9893
|
-
return btn.type === 'Button' ? React__default.createElement("button",
|
|
9894
|
-
key: i
|
|
9895
|
-
|
|
9895
|
+
return btn.type === 'Button' ? React__default.createElement("button", {
|
|
9896
|
+
key: i,
|
|
9897
|
+
id: btn.id,
|
|
9898
|
+
onClick: btn.onClick,
|
|
9896
9899
|
disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.disabled) || false,
|
|
9897
9900
|
className: rootClassName$1A + "-btn",
|
|
9898
9901
|
type: 'button'
|
|
9899
|
-
}
|
|
9900
|
-
key: i
|
|
9901
|
-
},
|
|
9902
|
+
}, btn.leftIcon && React__default.createElement("span", null, btn.leftIcon), btn.label, btn.rightIcon && React__default.createElement("span", null, btn.rightIcon)) : React__default.createElement(DropdownMenu, Object.assign({}, btn, {
|
|
9903
|
+
key: "children_" + i
|
|
9904
|
+
}), React__default.createElement("button", {
|
|
9905
|
+
key: i,
|
|
9906
|
+
id: btn.children.id,
|
|
9907
|
+
onClick: btn.children.onClick,
|
|
9902
9908
|
disabled: !props.active || (btn === null || btn === void 0 ? void 0 : btn.children.disabled) || false,
|
|
9903
9909
|
className: rootClassName$1A + "-btn",
|
|
9904
9910
|
type: 'button'
|
|
9905
|
-
}
|
|
9906
|
-
}))
|
|
9911
|
+
}, btn.children.leftIcon && React__default.createElement("span", null, btn.children.leftIcon), btn.children.label, btn.children.rightIcon && React__default.createElement("span", null, btn.children.rightIcon)));
|
|
9912
|
+
})), props.collapsedContent ? React__default.createElement(Collapse$1, {
|
|
9913
|
+
opened: props.opened,
|
|
9914
|
+
animateOpacity: true
|
|
9915
|
+
}, React__default.createElement(Row$1, {
|
|
9916
|
+
className: rootClassName$1A + "-collapsed"
|
|
9917
|
+
}, props.collapsedContent)) : undefined);
|
|
9907
9918
|
}
|
|
9908
9919
|
|
|
9909
9920
|
var TableUpperHeader$1 = React.memo(TableUpperHeader);
|
|
@@ -9915,8 +9926,8 @@ function TableWithOverflow(props) {
|
|
|
9915
9926
|
|
|
9916
9927
|
var mediaQuery = useScreenSize();
|
|
9917
9928
|
var wrapperClassName = React.useMemo(function () {
|
|
9918
|
-
return getMergedClassNames([rootClassName$1B + "-wrapper", props.
|
|
9919
|
-
}, [props.
|
|
9929
|
+
return getMergedClassNames([rootClassName$1B + "-wrapper", props.upperHeader ? 'has-upper-header' : '', 'left-columns-padding']);
|
|
9930
|
+
}, [props.upperHeader]);
|
|
9920
9931
|
var outerTableRef = React.createRef();
|
|
9921
9932
|
useDraggableScroll(outerTableRef, {
|
|
9922
9933
|
mouseDownCondition: function mouseDownCondition(el) {
|
|
@@ -9941,22 +9952,27 @@ function TableWithOverflow(props) {
|
|
|
9941
9952
|
}
|
|
9942
9953
|
};
|
|
9943
9954
|
|
|
9955
|
+
var atLeastOneStaticColumn = React.useMemo(function () {
|
|
9956
|
+
return props.columns.some(function (c) {
|
|
9957
|
+
return !c.absolute;
|
|
9958
|
+
});
|
|
9959
|
+
}, [props.columns]);
|
|
9944
9960
|
var paddingLeft = React.useMemo(function () {
|
|
9945
|
-
return props.columns.reduce(function (prev, atual) {
|
|
9961
|
+
return atLeastOneStaticColumn ? props.columns.reduce(function (prev, atual) {
|
|
9946
9962
|
var _atual$absolute;
|
|
9947
9963
|
|
|
9948
9964
|
var n = (_atual$absolute = atual.absolute) !== null && _atual$absolute !== void 0 && _atual$absolute.left ? parseInt(atual.absolute.width) : 0;
|
|
9949
9965
|
return prev + n;
|
|
9950
|
-
}, 8) + "px";
|
|
9951
|
-
}, [props.columns]);
|
|
9966
|
+
}, 8) + "px" : '8px';
|
|
9967
|
+
}, [props.columns, atLeastOneStaticColumn]);
|
|
9952
9968
|
var paddingRight = React.useMemo(function () {
|
|
9953
|
-
return props.columns.reduce(function (prev, atual) {
|
|
9969
|
+
return atLeastOneStaticColumn ? props.columns.reduce(function (prev, atual) {
|
|
9954
9970
|
var _atual$absolute2;
|
|
9955
9971
|
|
|
9956
9972
|
var n = (_atual$absolute2 = atual.absolute) !== null && _atual$absolute2 !== void 0 && _atual$absolute2.right ? parseInt(atual.absolute.width) : 0;
|
|
9957
9973
|
return prev + n;
|
|
9958
|
-
}, 8) + "px";
|
|
9959
|
-
}, [props.columns]);
|
|
9974
|
+
}, 8) + "px" : '8px';
|
|
9975
|
+
}, [props.columns, atLeastOneStaticColumn]);
|
|
9960
9976
|
return React__default.createElement("div", {
|
|
9961
9977
|
className: rootClassName$1B
|
|
9962
9978
|
}, props.upperHeader ? React__default.createElement("div", {
|
|
@@ -9987,12 +10003,13 @@ function TableWithOverflow(props) {
|
|
|
9987
10003
|
}), (_props$columns = props.columns) === null || _props$columns === void 0 ? void 0 : _props$columns.map(function (column) {
|
|
9988
10004
|
var _column$props;
|
|
9989
10005
|
|
|
10006
|
+
var absoluteObj = atLeastOneStaticColumn && column.absolute ? column.absolute : {};
|
|
9990
10007
|
return React__default.createElement("th", Object.assign({
|
|
9991
10008
|
key: "header-" + column.key,
|
|
9992
|
-
"data-draggable": !Boolean(
|
|
10009
|
+
"data-draggable": atLeastOneStaticColumn && !Boolean(absoluteObj)
|
|
9993
10010
|
}, column.props, {
|
|
9994
|
-
style: _extends({}, (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.style,
|
|
9995
|
-
className: getMergedClassNames([column.key + "-cell", column.absolute ? 'absolute' : ''])
|
|
10011
|
+
style: _extends({}, (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.style, absoluteObj),
|
|
10012
|
+
className: getMergedClassNames([column.key + "-cell", atLeastOneStaticColumn && column.absolute ? 'absolute' : ''])
|
|
9996
10013
|
}), column.value);
|
|
9997
10014
|
}), React__default.createElement("th", {
|
|
9998
10015
|
className: 'absolute right-0'
|
|
@@ -10008,12 +10025,13 @@ function TableWithOverflow(props) {
|
|
|
10008
10025
|
}), (_props$columns2 = props.columns) === null || _props$columns2 === void 0 ? void 0 : _props$columns2.map(function (column) {
|
|
10009
10026
|
var _column$props2, _column$props3;
|
|
10010
10027
|
|
|
10028
|
+
var absoluteObj = atLeastOneStaticColumn && column.absolute ? column.absolute : {};
|
|
10011
10029
|
return React__default.createElement("td", Object.assign({
|
|
10012
|
-
"data-draggable": !Boolean(column.absolute),
|
|
10030
|
+
"data-draggable": atLeastOneStaticColumn && !Boolean(column.absolute),
|
|
10013
10031
|
key: lineIndex + "-" + column.key
|
|
10014
10032
|
}, column.props, {
|
|
10015
|
-
style: _extends({}, (_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.style,
|
|
10016
|
-
className: getMergedClassNames([(_column$props3 = column.props) === null || _column$props3 === void 0 ? void 0 : _column$props3.className, column.key + "-cell", column.absolute ? 'absolute' : ''])
|
|
10033
|
+
style: _extends({}, (_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.style, absoluteObj),
|
|
10034
|
+
className: getMergedClassNames([(_column$props3 = column.props) === null || _column$props3 === void 0 ? void 0 : _column$props3.className, column.key + "-cell", atLeastOneStaticColumn && column.absolute ? 'absolute' : ''])
|
|
10017
10035
|
}), line[column.key]);
|
|
10018
10036
|
}), React__default.createElement("td", {
|
|
10019
10037
|
className: 'absolute right-0'
|
|
@@ -10022,8 +10040,6 @@ function TableWithOverflow(props) {
|
|
|
10022
10040
|
}
|
|
10023
10041
|
|
|
10024
10042
|
TableWithOverflow.defaultProps = {
|
|
10025
|
-
showArrowControl: true,
|
|
10026
|
-
hasActionsCol: true,
|
|
10027
10043
|
showTopNavigator: true
|
|
10028
10044
|
};
|
|
10029
10045
|
var TableWithOverflow$1 = React.memo(TableWithOverflow);
|