linear-react-components-ui 0.4.76-beta.28 → 0.4.76-beta.29
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/README.md +5 -7
- package/lib/assets/styles/effects.scss +0 -20
- package/lib/assets/styles/panel.scss +1 -4
- package/lib/assets/styles/select.scss +3 -3
- package/lib/assets/styles/table.scss +0 -13
- package/lib/assets/styles/tabs.scss +44 -49
- package/lib/assets/styles/treeview.scss +5 -0
- package/lib/dropdown/Popup.js +2 -3
- package/lib/form/form.spec.js +0 -8
- package/lib/form/index.js +21 -40
- package/lib/icons/helper.js +0 -4
- package/lib/inputs/base/InputTextBase.js +3 -23
- package/lib/inputs/mask/Phone.js +1 -10
- package/lib/inputs/mask/input_mask.spec.js +4 -21
- package/lib/inputs/select/Dropdown.js +59 -48
- package/lib/inputs/select/helper.js +2 -65
- package/lib/inputs/select/multiple/index.js +3 -6
- package/lib/inputs/select/simple/index.js +2 -5
- package/lib/internals/withTooltip.js +2 -2
- package/lib/skeleton/SkeletonContainer.js +1 -1
- package/lib/table/Body.js +7 -41
- package/lib/table/Header.js +1 -12
- package/lib/table/HeaderColumn.js +2 -4
- package/lib/table/Row.js +7 -14
- package/lib/table/RowColumn.js +3 -4
- package/lib/table/helpers.js +1 -11
- package/lib/table/index.js +8 -32
- package/lib/tabs/Menu.js +11 -1
- package/lib/tabs/index.js +1 -1
- package/lib/treeview/Node.js +7 -15
- package/lib/treeview/index.js +19 -33
- package/lib/treeview/treeview.spec.js +0 -9
- package/package.json +1 -1
- package/lib/assets/styles/uitour.scss +0 -112
- package/lib/inputs/date/helper.js +0 -16
- package/lib/uitour/helpers.js +0 -15
- package/lib/uitour/index.js +0 -271
- package/lib/uitour/uitour.spec.js +0 -176
|
@@ -17,8 +17,6 @@ var _avatar = _interopRequireDefault(require("../../avatar"));
|
|
|
17
17
|
|
|
18
18
|
var helper = _interopRequireWildcard(require("./helper"));
|
|
19
19
|
|
|
20
|
-
var _Popup = _interopRequireDefault(require("../../dropdown/Popup"));
|
|
21
|
-
|
|
22
20
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
21
|
|
|
24
22
|
function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
|
|
@@ -39,56 +37,71 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
|
|
|
39
37
|
|
|
40
38
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
41
39
|
|
|
42
|
-
var
|
|
43
|
-
var
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
descriptionKey = props.descriptionKey,
|
|
56
|
-
currents = props.currents,
|
|
57
|
-
imageAlign = props.imageAlign,
|
|
58
|
-
striped = props.striped,
|
|
59
|
-
imgSrcKey = props.imgSrcKey,
|
|
60
|
-
gridWrapperStyle = props.gridWrapperStyle,
|
|
61
|
-
inputValue = props.inputValue,
|
|
62
|
-
dropdownRef = props.dropdownRef;
|
|
63
|
-
|
|
64
|
-
var _useState = (0, _react.useState)(helper.returnDropdownDynamicStyles(_extends({}, props))),
|
|
65
|
-
_useState2 = _slicedToArray(_useState, 2),
|
|
66
|
-
dropdownDynamicStyles = _useState2[0],
|
|
67
|
-
setDropdownDynamicStyles = _useState2[1];
|
|
68
|
-
|
|
69
|
-
(0, _react.useEffect)(function () {
|
|
70
|
-
if (dropdownRef.current) {
|
|
71
|
-
setDropdownDynamicStyles(helper.returnDropdownDynamicStyles(_extends({}, props)));
|
|
40
|
+
var returnDropdownDynamicStyles = function returnDropdownDynamicStyles(selectFieldRef, dropdownMaxHeight) {
|
|
41
|
+
var selectFieldRects = selectFieldRef.current.getBoundingClientRect();
|
|
42
|
+
var dropdownBottomDistance = window.innerHeight - selectFieldRects.bottom;
|
|
43
|
+
var maxDropdownBottomDistance = 200;
|
|
44
|
+
var height = dropdownMaxHeight;
|
|
45
|
+
var dropdownPosition;
|
|
46
|
+
|
|
47
|
+
if (!height || height <= 0) {
|
|
48
|
+
if (dropdownBottomDistance < maxDropdownBottomDistance) {
|
|
49
|
+
height = selectFieldRects.top;
|
|
50
|
+
dropdownPosition = window.innerHeight - selectFieldRef.current.offsetTop + 10;
|
|
51
|
+
} else {
|
|
52
|
+
height = dropdownBottomDistance;
|
|
72
53
|
}
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
}, /*#__PURE__*/_react["default"].createElement("div", {
|
|
79
|
-
className: "select-dropdown",
|
|
80
|
-
ref: dropdownRef,
|
|
81
|
-
style: {
|
|
82
|
-
width: dropdownWidth,
|
|
83
|
-
marginLeft: gridWrapperStyle ? gridWrapperStyle.paddingLeft : '0',
|
|
84
|
-
maxHeight: dropdownDynamicStyles.maxHeight
|
|
54
|
+
} else {
|
|
55
|
+
maxDropdownBottomDistance = height;
|
|
56
|
+
|
|
57
|
+
if (dropdownBottomDistance < maxDropdownBottomDistance) {
|
|
58
|
+
dropdownPosition = window.innerHeight - selectFieldRef.current.offsetTop + 10;
|
|
85
59
|
}
|
|
60
|
+
}
|
|
61
|
+
|
|
62
|
+
return {
|
|
63
|
+
maxHeight: "".concat(height - 30, "px"),
|
|
64
|
+
bottom: dropdownBottomDistance < maxDropdownBottomDistance && "".concat(dropdownPosition, "px")
|
|
65
|
+
};
|
|
66
|
+
};
|
|
67
|
+
|
|
68
|
+
var Dropdown = function Dropdown(_ref) {
|
|
69
|
+
var dataCombo = _ref.dataCombo,
|
|
70
|
+
dropdownWidth = _ref.dropdownWidth,
|
|
71
|
+
selected = _ref.selected,
|
|
72
|
+
handleOnSelect = _ref.handleOnSelect,
|
|
73
|
+
handleOnFilter = _ref.handleOnFilter,
|
|
74
|
+
searchOnDropdown = _ref.searchOnDropdown,
|
|
75
|
+
handleOnKeydown = _ref.handleOnKeydown,
|
|
76
|
+
searchNotFoundText = _ref.searchNotFoundText,
|
|
77
|
+
handleOnBlur = _ref.handleOnBlur,
|
|
78
|
+
handleOnFocus = _ref.handleOnFocus,
|
|
79
|
+
opened = _ref.opened,
|
|
80
|
+
idKey = _ref.idKey,
|
|
81
|
+
descriptionKey = _ref.descriptionKey,
|
|
82
|
+
currents = _ref.currents,
|
|
83
|
+
imageAlign = _ref.imageAlign,
|
|
84
|
+
striped = _ref.striped,
|
|
85
|
+
imgSrcKey = _ref.imgSrcKey,
|
|
86
|
+
gridWrapperStyle = _ref.gridWrapperStyle,
|
|
87
|
+
selectFieldRef = _ref.selectFieldRef,
|
|
88
|
+
dropdownMaxHeight = _ref.dropdownMaxHeight;
|
|
89
|
+
|
|
90
|
+
var _useState = (0, _react.useState)(returnDropdownDynamicStyles(selectFieldRef, dropdownMaxHeight)),
|
|
91
|
+
_useState2 = _slicedToArray(_useState, 1),
|
|
92
|
+
dropdownDynamicStyles = _useState2[0];
|
|
93
|
+
|
|
94
|
+
return /*#__PURE__*/_react["default"].createElement("div", {
|
|
95
|
+
className: "dropdown",
|
|
96
|
+
style: _extends({
|
|
97
|
+
width: dropdownWidth,
|
|
98
|
+
marginLeft: gridWrapperStyle ? gridWrapperStyle.paddingLeft : '0'
|
|
99
|
+
}, dropdownDynamicStyles)
|
|
86
100
|
}, searchOnDropdown && /*#__PURE__*/_react["default"].createElement("div", {
|
|
87
101
|
className: "filtercontainer"
|
|
88
102
|
}, /*#__PURE__*/_react["default"].createElement("input", {
|
|
89
103
|
className: "filterinput",
|
|
90
104
|
type: "text",
|
|
91
|
-
value: inputValue,
|
|
92
105
|
onFocus: function onFocus() {
|
|
93
106
|
handleOnFocus();
|
|
94
107
|
},
|
|
@@ -138,7 +151,7 @@ var Dropdown = function Dropdown(props) {
|
|
|
138
151
|
}, item[descriptionKey])));
|
|
139
152
|
}), dataCombo.length === 0 && /*#__PURE__*/_react["default"].createElement("div", {
|
|
140
153
|
className: "notfound"
|
|
141
|
-
}, searchNotFoundText))
|
|
154
|
+
}, searchNotFoundText));
|
|
142
155
|
};
|
|
143
156
|
|
|
144
157
|
Dropdown.propTypes = {
|
|
@@ -156,8 +169,6 @@ Dropdown.propTypes = {
|
|
|
156
169
|
handleOnBlur: _propTypes["default"].func.isRequired,
|
|
157
170
|
handleOnFocus: _propTypes["default"].func.isRequired,
|
|
158
171
|
opened: _propTypes["default"].bool.isRequired,
|
|
159
|
-
inputValue: _propTypes["default"].string.isRequired,
|
|
160
|
-
dropdownRef: _propTypes["default"].object.isRequired,
|
|
161
172
|
currents: _propTypes["default"].arrayOf(_propTypes["default"].object),
|
|
162
173
|
imageAlign: _propTypes["default"].oneOf(['left', 'right']),
|
|
163
174
|
striped: _propTypes["default"].bool,
|
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.getFilteredMultipleDataCombo = exports.getFilteredSimpleDataCombo = exports.getDropdownItemCssClass = exports.contentClass = void 0;
|
|
7
7
|
|
|
8
8
|
var contentClass = function contentClass(props) {
|
|
9
9
|
return "content ".concat(props.showClearButton ? '' : 'noclear');
|
|
@@ -42,67 +42,4 @@ var getFilteredMultipleDataCombo = function getFilteredMultipleDataCombo(_ref2)
|
|
|
42
42
|
});
|
|
43
43
|
};
|
|
44
44
|
|
|
45
|
-
exports.getFilteredMultipleDataCombo = getFilteredMultipleDataCombo;
|
|
46
|
-
|
|
47
|
-
var returnDropdownPosition = function returnDropdownPosition(_ref3) {
|
|
48
|
-
var selectFieldRects = _ref3.selectFieldRects,
|
|
49
|
-
dropdownRef = _ref3.dropdownRef,
|
|
50
|
-
dropdownRects = _ref3.dropdownRects;
|
|
51
|
-
var aboveDropdown = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : false;
|
|
52
|
-
var DEFAULT_MARGIN_BOTTOM = 10;
|
|
53
|
-
|
|
54
|
-
if (aboveDropdown) {
|
|
55
|
-
return selectFieldRects.top + window.scrollY - (dropdownRef.current && dropdownRects.height) - DEFAULT_MARGIN_BOTTOM;
|
|
56
|
-
}
|
|
57
|
-
|
|
58
|
-
return selectFieldRects.top + window.scrollY + selectFieldRects.height;
|
|
59
|
-
};
|
|
60
|
-
|
|
61
|
-
var returnDropdownDynamicStyles = function returnDropdownDynamicStyles(_ref4) {
|
|
62
|
-
var selectFieldRef = _ref4.selectFieldRef,
|
|
63
|
-
dropdownMaxHeight = _ref4.dropdownMaxHeight,
|
|
64
|
-
dropdownRef = _ref4.dropdownRef;
|
|
65
|
-
var selectFieldRects = selectFieldRef.current.getBoundingClientRect();
|
|
66
|
-
var dropdownRects = dropdownRef.current && dropdownRef.current.getBoundingClientRect();
|
|
67
|
-
var dropdownBottomDistance = window.innerHeight - selectFieldRects.bottom;
|
|
68
|
-
var bottomOffset = 30;
|
|
69
|
-
var maxDropdownBottomDistance = 200;
|
|
70
|
-
var height = dropdownMaxHeight;
|
|
71
|
-
var dropdownPosition;
|
|
72
|
-
|
|
73
|
-
if (!height || height <= 0) {
|
|
74
|
-
if (dropdownBottomDistance < maxDropdownBottomDistance) {
|
|
75
|
-
height = selectFieldRects.top;
|
|
76
|
-
dropdownPosition = returnDropdownPosition({
|
|
77
|
-
selectFieldRects: selectFieldRects,
|
|
78
|
-
dropdownRef: dropdownRef,
|
|
79
|
-
dropdownRects: dropdownRects
|
|
80
|
-
}, true);
|
|
81
|
-
} else {
|
|
82
|
-
height = dropdownBottomDistance;
|
|
83
|
-
dropdownPosition = returnDropdownPosition({
|
|
84
|
-
selectFieldRects: selectFieldRects
|
|
85
|
-
});
|
|
86
|
-
}
|
|
87
|
-
} else {
|
|
88
|
-
maxDropdownBottomDistance = height;
|
|
89
|
-
|
|
90
|
-
if (dropdownBottomDistance < maxDropdownBottomDistance) {
|
|
91
|
-
dropdownPosition = returnDropdownPosition({
|
|
92
|
-
selectFieldRects: selectFieldRects,
|
|
93
|
-
dropdownRef: dropdownRef,
|
|
94
|
-
dropdownRects: dropdownRects
|
|
95
|
-
}, true);
|
|
96
|
-
} else {
|
|
97
|
-
dropdownPosition = returnDropdownPosition(selectFieldRects);
|
|
98
|
-
}
|
|
99
|
-
}
|
|
100
|
-
|
|
101
|
-
return {
|
|
102
|
-
maxHeight: height - bottomOffset,
|
|
103
|
-
top: dropdownPosition,
|
|
104
|
-
left: selectFieldRects.left
|
|
105
|
-
};
|
|
106
|
-
};
|
|
107
|
-
|
|
108
|
-
exports.returnDropdownDynamicStyles = returnDropdownDynamicStyles;
|
|
45
|
+
exports.getFilteredMultipleDataCombo = getFilteredMultipleDataCombo;
|
|
@@ -83,7 +83,6 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
|
|
|
83
83
|
|
|
84
84
|
_this.componentId = "select-component".concat(_uuid["default"].v1());
|
|
85
85
|
_this.componentRef = /*#__PURE__*/_react["default"].createRef();
|
|
86
|
-
_this.dropdownRef = /*#__PURE__*/_react["default"].createRef();
|
|
87
86
|
_this.state = {
|
|
88
87
|
valueFromProps: null,
|
|
89
88
|
dataCombo: props.dataSource,
|
|
@@ -143,11 +142,10 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
|
|
|
143
142
|
}, {
|
|
144
143
|
key: "onClickOutside",
|
|
145
144
|
value: function onClickOutside(event) {
|
|
146
|
-
var selectWrapper = this.selectWrapper
|
|
147
|
-
dropdownRef = this.dropdownRef;
|
|
145
|
+
var selectWrapper = this.selectWrapper;
|
|
148
146
|
var target = event.target;
|
|
149
147
|
|
|
150
|
-
if (target !== selectWrapper && !selectWrapper.contains(target)
|
|
148
|
+
if (target !== selectWrapper && !selectWrapper.contains(target)) {
|
|
151
149
|
this.setState({
|
|
152
150
|
opened: false
|
|
153
151
|
});
|
|
@@ -365,7 +363,6 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
|
|
|
365
363
|
handleOnUnselect: this.onUnselect
|
|
366
364
|
}))), opened && /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], _extends({}, this.state, this.props, {
|
|
367
365
|
selectFieldRef: this.componentRef,
|
|
368
|
-
dropdownRef: this.dropdownRef,
|
|
369
366
|
gridWrapperStyle: gridLayout ? window.getComputedStyle(this.gridEl) : undefined,
|
|
370
367
|
handleOnSelect: this.onSelect,
|
|
371
368
|
handleOnFilter: this.onFilter,
|
|
@@ -400,7 +397,7 @@ Object.defineProperty(MultipleSelect, "getDerivedStateFromProps", {
|
|
|
400
397
|
var dataCombo = remoteSearch ? dataSource : (0, _helper.getFilteredMultipleDataCombo)(_extends({}, props, state));
|
|
401
398
|
return {
|
|
402
399
|
dataCombo: dataCombo,
|
|
403
|
-
selected:
|
|
400
|
+
selected: dataSource.length > 0 && remoteSearch ? dataSource[0] : null
|
|
404
401
|
};
|
|
405
402
|
}
|
|
406
403
|
|
|
@@ -78,7 +78,6 @@ var SimpleSelect = /*#__PURE__*/function (_Component) {
|
|
|
78
78
|
onDenied: undefined,
|
|
79
79
|
isTyping: false
|
|
80
80
|
};
|
|
81
|
-
_this.dropdownRef = /*#__PURE__*/_react["default"].createRef();
|
|
82
81
|
_this.componentId = "select-component".concat(_uuid["default"].v1());
|
|
83
82
|
_this.componentRef = /*#__PURE__*/_react["default"].createRef();
|
|
84
83
|
return _this;
|
|
@@ -153,7 +152,6 @@ var SimpleSelect = /*#__PURE__*/function (_Component) {
|
|
|
153
152
|
}))
|
|
154
153
|
})), opened && /*#__PURE__*/_react["default"].createElement(_Dropdown["default"], _extends({}, this.state, this.props, {
|
|
155
154
|
selectFieldRef: this.componentRef,
|
|
156
|
-
dropdownRef: this.dropdownRef,
|
|
157
155
|
gridWrapperStyle: gridLayout ? window.getComputedStyle(this.gridEl) : undefined,
|
|
158
156
|
handleOnSelect: this.onSelect,
|
|
159
157
|
handleOnFilter: this.onFilter,
|
|
@@ -229,11 +227,10 @@ var _initialiseProps = function _initialiseProps() {
|
|
|
229
227
|
enumerable: true,
|
|
230
228
|
writable: true,
|
|
231
229
|
value: function value(event) {
|
|
232
|
-
var selectWrapper = _this3.selectWrapper
|
|
233
|
-
dropdownRef = _this3.dropdownRef;
|
|
230
|
+
var selectWrapper = _this3.selectWrapper;
|
|
234
231
|
var target = event.target;
|
|
235
232
|
|
|
236
|
-
if (target !== selectWrapper && !selectWrapper.contains(target)
|
|
233
|
+
if (target !== selectWrapper && !selectWrapper.contains(target)) {
|
|
237
234
|
_this3.setState({
|
|
238
235
|
opened: false
|
|
239
236
|
});
|
|
@@ -112,12 +112,12 @@ var withTooltip = function withTooltip(WrappedComponent) {
|
|
|
112
112
|
};
|
|
113
113
|
}, []);
|
|
114
114
|
(0, _react.useEffect)(function () {
|
|
115
|
-
if (targetElement.current
|
|
115
|
+
if (targetElement.current) {
|
|
116
116
|
var width = tooltipDimensions.width,
|
|
117
117
|
height = tooltipDimensions.height;
|
|
118
118
|
var targetDimensions = targetElement.current.getBoundingClientRect();
|
|
119
119
|
var targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
|
|
120
|
-
var tooltipClientWidth = tooltipElement.current.clientWidth;
|
|
120
|
+
var tooltipClientWidth = tooltipElement.current && tooltipElement.current.clientWidth;
|
|
121
121
|
var style = "width: ".concat(typeof width === 'string' ? width : "".concat(width, "px"));
|
|
122
122
|
var left = targetDimensions.left + targetDimensions.width / 2 - tooltipClientWidth / 2;
|
|
123
123
|
left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);
|
|
@@ -28,7 +28,7 @@ var SkeletonContainer = function SkeletonContainer(_ref) {
|
|
|
28
28
|
};
|
|
29
29
|
|
|
30
30
|
SkeletonContainer.propTypes = {
|
|
31
|
-
children: _propTypes["default"].
|
|
31
|
+
children: _propTypes["default"].element.isRequired,
|
|
32
32
|
row: _propTypes["default"].bool,
|
|
33
33
|
customClass: _propTypes["default"].string,
|
|
34
34
|
style: _propTypes["default"].object
|
package/lib/table/Body.js
CHANGED
|
@@ -11,11 +11,7 @@ var _react = _interopRequireWildcard(require("react"));
|
|
|
11
11
|
|
|
12
12
|
var _propTypes = _interopRequireDefault(require("prop-types"));
|
|
13
13
|
|
|
14
|
-
var _helpers =
|
|
15
|
-
|
|
16
|
-
var _skeleton = _interopRequireDefault(require("../skeleton"));
|
|
17
|
-
|
|
18
|
-
var _index = require("./index");
|
|
14
|
+
var _helpers = _interopRequireDefault(require("./helpers"));
|
|
19
15
|
|
|
20
16
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
21
17
|
|
|
@@ -23,42 +19,13 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
23
19
|
|
|
24
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
25
21
|
|
|
26
|
-
var renderChildren = function renderChildren(children, columnsCount, skeletonize, skeletonInRows) {
|
|
27
|
-
if (skeletonize && columnsCount) {
|
|
28
|
-
var rows = (0, _helpers.getArrayFromNumber)(skeletonInRows);
|
|
29
|
-
var columns = (0, _helpers.getArrayFromNumber)(columnsCount);
|
|
30
|
-
var skeletonChildrens = rows.map(function (index) {
|
|
31
|
-
return /*#__PURE__*/_react["default"].createElement(_index.TRow, {
|
|
32
|
-
key: index
|
|
33
|
-
}, columns.map(function (id) {
|
|
34
|
-
return /*#__PURE__*/_react["default"].createElement(_index.Td, {
|
|
35
|
-
key: id
|
|
36
|
-
}, /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
|
|
37
|
-
height: 16,
|
|
38
|
-
style: {
|
|
39
|
-
marginBottom: 0,
|
|
40
|
-
opacity: 1
|
|
41
|
-
}
|
|
42
|
-
}));
|
|
43
|
-
}));
|
|
44
|
-
});
|
|
45
|
-
return skeletonChildrens;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
return children;
|
|
49
|
-
};
|
|
50
|
-
|
|
51
22
|
var TableBody = function TableBody(_ref) {
|
|
52
23
|
var children = _ref.children,
|
|
53
24
|
customClass = _ref.customClass;
|
|
54
25
|
|
|
55
26
|
var _useContext = (0, _react.useContext)(_helpers["default"]),
|
|
56
27
|
bodyScrollable = _useContext.bodyScrollable,
|
|
57
|
-
bodyContainerRef = _useContext.bodyContainerRef
|
|
58
|
-
columnsCount = _useContext.columnsCount,
|
|
59
|
-
skeletonize = _useContext.skeletonize,
|
|
60
|
-
skeletonInRows = _useContext.skeletonInRows,
|
|
61
|
-
strict = _useContext.strict;
|
|
28
|
+
bodyContainerRef = _useContext.bodyContainerRef;
|
|
62
29
|
|
|
63
30
|
return bodyScrollable ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
64
31
|
className: "bodycontainer",
|
|
@@ -66,14 +33,13 @@ var TableBody = function TableBody(_ref) {
|
|
|
66
33
|
}, /*#__PURE__*/_react["default"].createElement("table", {
|
|
67
34
|
className: "innertable",
|
|
68
35
|
style: {
|
|
69
|
-
tableLayout: 'fixed'
|
|
70
|
-
contain: strict ? 'strict' : 'size layout style'
|
|
36
|
+
tableLayout: 'fixed'
|
|
71
37
|
}
|
|
72
38
|
}, /*#__PURE__*/_react["default"].createElement("tbody", {
|
|
73
|
-
className: "tbody ".concat(
|
|
74
|
-
},
|
|
75
|
-
className: "tbody ".concat(
|
|
76
|
-
},
|
|
39
|
+
className: "tbody ".concat(customClass)
|
|
40
|
+
}, children))) : /*#__PURE__*/_react["default"].createElement("tbody", {
|
|
41
|
+
className: "tbody ".concat(customClass)
|
|
42
|
+
}, children);
|
|
77
43
|
};
|
|
78
44
|
|
|
79
45
|
TableBody.propTypes = {
|
package/lib/table/Header.js
CHANGED
|
@@ -41,15 +41,6 @@ var getColumnsWidth = function getColumnsWidth(children) {
|
|
|
41
41
|
return columnsWidth;
|
|
42
42
|
};
|
|
43
43
|
|
|
44
|
-
var getColumnsCount = function getColumnsCount(children) {
|
|
45
|
-
if (children && children.props) {
|
|
46
|
-
var columnsChildren = children.props.children;
|
|
47
|
-
return columnsChildren.length;
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
return undefined;
|
|
51
|
-
};
|
|
52
|
-
|
|
53
44
|
var Header = function Header(_ref) {
|
|
54
45
|
var customClass = _ref.customClass,
|
|
55
46
|
children = _ref.children;
|
|
@@ -57,12 +48,10 @@ var Header = function Header(_ref) {
|
|
|
57
48
|
var _useContext = (0, _react.useContext)(_helpers["default"]),
|
|
58
49
|
bodyScrollWidth = _useContext.bodyScrollWidth,
|
|
59
50
|
bodyScrollable = _useContext.bodyScrollable,
|
|
60
|
-
handlerSetColumnsWidth = _useContext.handlerSetColumnsWidth
|
|
61
|
-
handlerSetColumnsCount = _useContext.handlerSetColumnsCount;
|
|
51
|
+
handlerSetColumnsWidth = _useContext.handlerSetColumnsWidth;
|
|
62
52
|
|
|
63
53
|
(0, _react.useEffect)(function () {
|
|
64
54
|
handlerSetColumnsWidth(getColumnsWidth(children));
|
|
65
|
-
handlerSetColumnsCount(getColumnsCount(children));
|
|
66
55
|
}, []);
|
|
67
56
|
return bodyScrollable ? /*#__PURE__*/_react["default"].createElement("div", {
|
|
68
57
|
className: "headercontainer",
|
|
@@ -30,15 +30,13 @@ var HeaderColumn = function HeaderColumn(_ref) {
|
|
|
30
30
|
|
|
31
31
|
var _useContext = (0, _react.useContext)(_helpers["default"]),
|
|
32
32
|
skeletonize = _useContext.skeletonize,
|
|
33
|
-
vertical = _useContext.vertical
|
|
34
|
-
skeletonInHeader = _useContext.skeletonInHeader,
|
|
35
|
-
skeletonInRows = _useContext.skeletonInRows;
|
|
33
|
+
vertical = _useContext.vertical;
|
|
36
34
|
|
|
37
35
|
if (!visible) return null;
|
|
38
36
|
return /*#__PURE__*/_react["default"].createElement("th", {
|
|
39
37
|
className: "headercolumn ".concat(customClass, " text-align-").concat(textAlign),
|
|
40
38
|
style: style
|
|
41
|
-
}, skeletonize &&
|
|
39
|
+
}, skeletonize && !vertical ? /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
|
|
42
40
|
height: style.height ? null : 16,
|
|
43
41
|
style: {
|
|
44
42
|
marginBottom: 0
|
package/lib/table/Row.js
CHANGED
|
@@ -19,8 +19,6 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
19
19
|
|
|
20
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
21
|
|
|
22
|
-
function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
|
23
|
-
|
|
24
22
|
var Row = function Row(props) {
|
|
25
23
|
var customClass = props.customClass,
|
|
26
24
|
children = props.children,
|
|
@@ -28,8 +26,7 @@ var Row = function Row(props) {
|
|
|
28
26
|
dataId = props.dataId,
|
|
29
27
|
_onClick = props.onClick,
|
|
30
28
|
height = props.height,
|
|
31
|
-
rowBorder = props.rowBorder
|
|
32
|
-
style = props.style;
|
|
29
|
+
rowBorder = props.rowBorder;
|
|
33
30
|
|
|
34
31
|
var _useContext = (0, _react.useContext)(_helpers["default"]),
|
|
35
32
|
selectedRowId = _useContext.selectedRowId,
|
|
@@ -37,16 +34,14 @@ var Row = function Row(props) {
|
|
|
37
34
|
handleTableRowClick = _useContext.handleTableRowClick,
|
|
38
35
|
handleTableColClick = _useContext.handleTableColClick,
|
|
39
36
|
vertical = _useContext.vertical,
|
|
40
|
-
skeletonize = _useContext.skeletonize
|
|
41
|
-
skeletonInRows = _useContext.skeletonInRows;
|
|
37
|
+
skeletonize = _useContext.skeletonize;
|
|
42
38
|
|
|
43
39
|
var contextValues = {
|
|
44
40
|
dataId: dataId,
|
|
45
41
|
rowBorder: rowBorder,
|
|
46
42
|
handleTableColClick: handleTableColClick,
|
|
47
43
|
vertical: vertical,
|
|
48
|
-
skeletonize: skeletonize
|
|
49
|
-
skeletonInRows: skeletonInRows
|
|
44
|
+
skeletonize: skeletonize
|
|
50
45
|
};
|
|
51
46
|
return /*#__PURE__*/_react["default"].createElement(_helpers.RowContext.Provider, {
|
|
52
47
|
value: contextValues
|
|
@@ -58,9 +53,9 @@ var Row = function Row(props) {
|
|
|
58
53
|
if (_onClick) _onClick(e, dataId);
|
|
59
54
|
},
|
|
60
55
|
id: rowId,
|
|
61
|
-
style:
|
|
56
|
+
style: {
|
|
62
57
|
height: height
|
|
63
|
-
}
|
|
58
|
+
}
|
|
64
59
|
}, children));
|
|
65
60
|
};
|
|
66
61
|
|
|
@@ -71,8 +66,7 @@ Row.propTypes = {
|
|
|
71
66
|
dataId: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].string]),
|
|
72
67
|
onClick: _propTypes["default"].func,
|
|
73
68
|
rowBorder: _propTypes["default"].bool,
|
|
74
|
-
height: _propTypes["default"].string
|
|
75
|
-
style: _propTypes["default"].object
|
|
69
|
+
height: _propTypes["default"].string
|
|
76
70
|
};
|
|
77
71
|
Row.defaultProps = {
|
|
78
72
|
customClass: '',
|
|
@@ -80,8 +74,7 @@ Row.defaultProps = {
|
|
|
80
74
|
onClick: undefined,
|
|
81
75
|
rowId: undefined,
|
|
82
76
|
rowBorder: true,
|
|
83
|
-
height: undefined
|
|
84
|
-
style: null
|
|
77
|
+
height: undefined
|
|
85
78
|
};
|
|
86
79
|
var _default = Row;
|
|
87
80
|
exports["default"] = _default;
|
package/lib/table/RowColumn.js
CHANGED
|
@@ -52,12 +52,11 @@ var RowColumn = function RowColumn(props) {
|
|
|
52
52
|
visible = props.visible;
|
|
53
53
|
var context = (0, _react.useContext)(_helpers.RowContext);
|
|
54
54
|
var skeletonize = context.skeletonize,
|
|
55
|
-
vertical = context.vertical
|
|
56
|
-
skeletonInRows = context.skeletonInRows;
|
|
55
|
+
vertical = context.vertical;
|
|
57
56
|
var hiddenContent = displayContent !== 'always';
|
|
58
57
|
|
|
59
58
|
var renderContent = function renderContent() {
|
|
60
|
-
if (skeletonize
|
|
59
|
+
if (skeletonize) {
|
|
61
60
|
return /*#__PURE__*/_react["default"].createElement(_skeleton["default"], {
|
|
62
61
|
height: 16,
|
|
63
62
|
style: {
|
|
@@ -72,7 +71,7 @@ var RowColumn = function RowColumn(props) {
|
|
|
72
71
|
};
|
|
73
72
|
|
|
74
73
|
if (!visible) return null;
|
|
75
|
-
if (skeletonize && !
|
|
74
|
+
if (skeletonize && !vertical) return null;
|
|
76
75
|
return /*#__PURE__*/_react["default"].createElement("td", {
|
|
77
76
|
className: "rowcolumn ".concat(customClass, " text-align-").concat(textAlign, " ").concat(!context.rowBorder && ' -noborder'),
|
|
78
77
|
style: style,
|
package/lib/table/helpers.js
CHANGED
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.
|
|
6
|
+
exports.RowContext = exports["default"] = void 0;
|
|
7
7
|
|
|
8
8
|
var _react = _interopRequireDefault(require("react"));
|
|
9
9
|
|
|
@@ -14,15 +14,5 @@ var TableContext = /*#__PURE__*/_react["default"].createContext();
|
|
|
14
14
|
var RowContext = /*#__PURE__*/_react["default"].createContext();
|
|
15
15
|
|
|
16
16
|
exports.RowContext = RowContext;
|
|
17
|
-
|
|
18
|
-
var getArrayFromNumber = function getArrayFromNumber(number) {
|
|
19
|
-
return Array.from({
|
|
20
|
-
length: number
|
|
21
|
-
}, function (_, i) {
|
|
22
|
-
return i + 1;
|
|
23
|
-
});
|
|
24
|
-
};
|
|
25
|
-
|
|
26
|
-
exports.getArrayFromNumber = getArrayFromNumber;
|
|
27
17
|
var _default = TableContext;
|
|
28
18
|
exports["default"] = _default;
|