plataforma-fundacao-componentes 2.22.14 → 2.22.15
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 +3 -1
- package/dist/index.js +50 -36
- package/dist/index.js.map +1 -1
- package/dist/index.modern.js +50 -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;
|
|
@@ -15286,9 +15286,11 @@ h5 {
|
|
|
15286
15286
|
background-color: #d7e6c8;
|
|
15287
15287
|
color: #3fa110; }
|
|
15288
15288
|
.component-upper-header-table .component-upper-header-table-left {
|
|
15289
|
+
padding-left: 8px;
|
|
15289
15290
|
display: flex;
|
|
15290
15291
|
flex-wrap: wrap; }
|
|
15291
15292
|
.component-upper-header-table .component-upper-header-table-right {
|
|
15293
|
+
padding-right: 8px;
|
|
15292
15294
|
display: flex;
|
|
15293
15295
|
flex-wrap: wrap; }
|
|
15294
15296
|
|
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,47 @@ 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
|
+
}, props.collapsedContent) : undefined);
|
|
9907
9916
|
}
|
|
9908
9917
|
|
|
9909
9918
|
var TableUpperHeader$1 = React.memo(TableUpperHeader);
|
|
@@ -9915,8 +9924,8 @@ function TableWithOverflow(props) {
|
|
|
9915
9924
|
|
|
9916
9925
|
var mediaQuery = useScreenSize();
|
|
9917
9926
|
var wrapperClassName = React.useMemo(function () {
|
|
9918
|
-
return getMergedClassNames([rootClassName$1B + "-wrapper", props.
|
|
9919
|
-
}, [props.
|
|
9927
|
+
return getMergedClassNames([rootClassName$1B + "-wrapper", props.upperHeader ? 'has-upper-header' : '', 'left-columns-padding']);
|
|
9928
|
+
}, [props.upperHeader]);
|
|
9920
9929
|
var outerTableRef = React.createRef();
|
|
9921
9930
|
useDraggableScroll(outerTableRef, {
|
|
9922
9931
|
mouseDownCondition: function mouseDownCondition(el) {
|
|
@@ -9941,22 +9950,27 @@ function TableWithOverflow(props) {
|
|
|
9941
9950
|
}
|
|
9942
9951
|
};
|
|
9943
9952
|
|
|
9953
|
+
var atLeastOneStaticColumn = React.useMemo(function () {
|
|
9954
|
+
return props.columns.some(function (c) {
|
|
9955
|
+
return !c.absolute;
|
|
9956
|
+
});
|
|
9957
|
+
}, [props.columns]);
|
|
9944
9958
|
var paddingLeft = React.useMemo(function () {
|
|
9945
|
-
return props.columns.reduce(function (prev, atual) {
|
|
9959
|
+
return atLeastOneStaticColumn ? props.columns.reduce(function (prev, atual) {
|
|
9946
9960
|
var _atual$absolute;
|
|
9947
9961
|
|
|
9948
9962
|
var n = (_atual$absolute = atual.absolute) !== null && _atual$absolute !== void 0 && _atual$absolute.left ? parseInt(atual.absolute.width) : 0;
|
|
9949
9963
|
return prev + n;
|
|
9950
|
-
}, 8) + "px";
|
|
9951
|
-
}, [props.columns]);
|
|
9964
|
+
}, 8) + "px" : '8px';
|
|
9965
|
+
}, [props.columns, atLeastOneStaticColumn]);
|
|
9952
9966
|
var paddingRight = React.useMemo(function () {
|
|
9953
|
-
return props.columns.reduce(function (prev, atual) {
|
|
9967
|
+
return atLeastOneStaticColumn ? props.columns.reduce(function (prev, atual) {
|
|
9954
9968
|
var _atual$absolute2;
|
|
9955
9969
|
|
|
9956
9970
|
var n = (_atual$absolute2 = atual.absolute) !== null && _atual$absolute2 !== void 0 && _atual$absolute2.right ? parseInt(atual.absolute.width) : 0;
|
|
9957
9971
|
return prev + n;
|
|
9958
|
-
}, 8) + "px";
|
|
9959
|
-
}, [props.columns]);
|
|
9972
|
+
}, 8) + "px" : '8px';
|
|
9973
|
+
}, [props.columns, atLeastOneStaticColumn]);
|
|
9960
9974
|
return React__default.createElement("div", {
|
|
9961
9975
|
className: rootClassName$1B
|
|
9962
9976
|
}, props.upperHeader ? React__default.createElement("div", {
|
|
@@ -9987,12 +10001,13 @@ function TableWithOverflow(props) {
|
|
|
9987
10001
|
}), (_props$columns = props.columns) === null || _props$columns === void 0 ? void 0 : _props$columns.map(function (column) {
|
|
9988
10002
|
var _column$props;
|
|
9989
10003
|
|
|
10004
|
+
var absoluteObj = atLeastOneStaticColumn && column.absolute ? column.absolute : {};
|
|
9990
10005
|
return React__default.createElement("th", Object.assign({
|
|
9991
10006
|
key: "header-" + column.key,
|
|
9992
|
-
"data-draggable": !Boolean(
|
|
10007
|
+
"data-draggable": atLeastOneStaticColumn && !Boolean(absoluteObj)
|
|
9993
10008
|
}, 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' : ''])
|
|
10009
|
+
style: _extends({}, (_column$props = column.props) === null || _column$props === void 0 ? void 0 : _column$props.style, absoluteObj),
|
|
10010
|
+
className: getMergedClassNames([column.key + "-cell", atLeastOneStaticColumn && column.absolute ? 'absolute' : ''])
|
|
9996
10011
|
}), column.value);
|
|
9997
10012
|
}), React__default.createElement("th", {
|
|
9998
10013
|
className: 'absolute right-0'
|
|
@@ -10008,12 +10023,13 @@ function TableWithOverflow(props) {
|
|
|
10008
10023
|
}), (_props$columns2 = props.columns) === null || _props$columns2 === void 0 ? void 0 : _props$columns2.map(function (column) {
|
|
10009
10024
|
var _column$props2, _column$props3;
|
|
10010
10025
|
|
|
10026
|
+
var absoluteObj = atLeastOneStaticColumn && column.absolute ? column.absolute : {};
|
|
10011
10027
|
return React__default.createElement("td", Object.assign({
|
|
10012
|
-
"data-draggable": !Boolean(column.absolute),
|
|
10028
|
+
"data-draggable": atLeastOneStaticColumn && !Boolean(column.absolute),
|
|
10013
10029
|
key: lineIndex + "-" + column.key
|
|
10014
10030
|
}, 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' : ''])
|
|
10031
|
+
style: _extends({}, (_column$props2 = column.props) === null || _column$props2 === void 0 ? void 0 : _column$props2.style, absoluteObj),
|
|
10032
|
+
className: getMergedClassNames([(_column$props3 = column.props) === null || _column$props3 === void 0 ? void 0 : _column$props3.className, column.key + "-cell", atLeastOneStaticColumn && column.absolute ? 'absolute' : ''])
|
|
10017
10033
|
}), line[column.key]);
|
|
10018
10034
|
}), React__default.createElement("td", {
|
|
10019
10035
|
className: 'absolute right-0'
|
|
@@ -10022,8 +10038,6 @@ function TableWithOverflow(props) {
|
|
|
10022
10038
|
}
|
|
10023
10039
|
|
|
10024
10040
|
TableWithOverflow.defaultProps = {
|
|
10025
|
-
showArrowControl: true,
|
|
10026
|
-
hasActionsCol: true,
|
|
10027
10041
|
showTopNavigator: true
|
|
10028
10042
|
};
|
|
10029
10043
|
var TableWithOverflow$1 = React.memo(TableWithOverflow);
|