linear-react-components-ui 0.4.76-beta.11 → 0.4.76-beta.12
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/.vscode/settings.json +2 -1
- package/README.md +0 -33
- package/lib/assets/styles/dropdown.scss +2 -28
- package/lib/assets/styles/effects.scss +0 -12
- package/lib/assets/styles/floatMenu.scss +1 -0
- package/lib/assets/styles/panel.scss +1 -0
- package/lib/assets/styles/progress.scss +1 -8
- package/lib/assets/styles/select.scss +0 -1
- package/lib/assets/styles/table.scss +5 -13
- package/lib/assets/styles/tabs.scss +44 -79
- package/lib/assets/styles/treeview.scss +0 -32
- package/lib/avatar/avatar.spec.js +6 -17
- package/lib/avatar/index.js +1 -1
- package/lib/buttons/DefaultButton.js +1 -7
- package/lib/checkbox/index.js +6 -20
- package/lib/dialog/base/index.js +6 -15
- package/lib/dialog/form/index.js +3 -16
- package/lib/drawer/index.js +1 -4
- package/lib/form/Field.js +0 -2
- package/lib/form/FieldNumber.js +2 -10
- package/lib/form/helpers.js +1 -9
- package/lib/form/index.js +222 -209
- package/lib/form/withFieldHOC.js +0 -2
- package/lib/icons/helper.js +0 -16
- package/lib/inputs/base/helpers.js +10 -15
- package/lib/inputs/date/Dropdown.js +3 -3
- package/lib/inputs/date/index.js +9 -10
- package/lib/inputs/number/BaseNumber.js +1 -1
- package/lib/inputs/number/index.js +5 -7
- package/lib/inputs/select/Dropdown.js +4 -4
- package/lib/inputs/select/index.js +3 -26
- package/lib/inputs/select/multiple/index.js +7 -9
- package/lib/inputs/select/simple/index.js +18 -30
- package/lib/internals/withTooltip.js +81 -85
- package/lib/list/Item.js +3 -3
- package/lib/list/index.js +10 -20
- package/lib/list/list.spec.js +85 -129
- package/lib/menus/float/MenuItem.js +8 -25
- package/lib/menus/sidenav/index.js +3 -7
- package/lib/menus/sidenav/popup_menu_search/index.js +1 -1
- package/lib/progress/Bar.js +9 -40
- package/lib/progress/index.js +4 -12
- package/lib/spinner/index.js +1 -6
- package/lib/split/Split.js +11 -5
- package/lib/table/Row.js +1 -1
- package/lib/tabs/Menu.js +5 -18
- package/lib/tabs/MenuItems.js +7 -7
- package/lib/tabs/Panel.js +3 -1
- package/lib/tabs/index.js +20 -151
- package/lib/tabs/tabs.spec.js +5 -8
- package/lib/toolbar/index.js +4 -8
- package/lib/tooltip/index.js +7 -20
- package/lib/treeview/Node.js +48 -347
- package/lib/treeview/index.js +35 -456
- package/package.json +8 -9
- package/.tool-versions +0 -1
- package/lib/assets/styles/multiSelect.scss +0 -105
- package/lib/assets/styles/periodpicker.scss +0 -65
- package/lib/checkbox/Label.js +0 -37
- package/lib/form/FieldPeriod.js +0 -100
- package/lib/form/withFormSecurity.js +0 -106
- package/lib/inputs/date/helpers.js +0 -36
- package/lib/inputs/multiSelect/ActionButtons.js +0 -68
- package/lib/inputs/multiSelect/Dropdown.js +0 -200
- package/lib/inputs/multiSelect/helper.js +0 -18
- package/lib/inputs/multiSelect/index.js +0 -343
- package/lib/inputs/period/Dialog.js +0 -38
- package/lib/inputs/period/Dropdown.js +0 -90
- package/lib/inputs/period/PeriodList.js +0 -79
- package/lib/inputs/period/helper.js +0 -118
- package/lib/inputs/period/index.js +0 -490
- package/lib/tabs/DropdownItems.js +0 -84
package/lib/inputs/date/index.js
CHANGED
|
@@ -31,8 +31,6 @@ var _Dialog = _interopRequireDefault(require("./Dialog"));
|
|
|
31
31
|
|
|
32
32
|
var _colorStyles = _interopRequireDefault(require("../../internals/colorStyles"));
|
|
33
33
|
|
|
34
|
-
var _helpers = require("./helpers");
|
|
35
|
-
|
|
36
34
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
37
35
|
|
|
38
36
|
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); }
|
|
@@ -62,6 +60,7 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
|
|
|
62
60
|
function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
|
|
63
61
|
|
|
64
62
|
var CALENDAR_BUTTON_WIDTH = 24;
|
|
63
|
+
var dateFormat = 'DD/MM/YYYY';
|
|
65
64
|
|
|
66
65
|
var DatePicker = /*#__PURE__*/function (_Component) {
|
|
67
66
|
_inherits(DatePicker, _Component);
|
|
@@ -79,7 +78,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
79
78
|
|
|
80
79
|
var propsValue = props.value;
|
|
81
80
|
_this.state = {
|
|
82
|
-
value: propsValue ? (0,
|
|
81
|
+
value: propsValue ? (0, _moment["default"])(propsValue) : undefined,
|
|
83
82
|
// eslint-disable-next-line react/no-unused-state
|
|
84
83
|
propsValue: propsValue,
|
|
85
84
|
showCalendar: false,
|
|
@@ -117,7 +116,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
117
116
|
var required = this.props.required;
|
|
118
117
|
if (onDenied && onDenied.unvisible) return null;
|
|
119
118
|
return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_BaseMask["default"], _extends({}, this.props, {
|
|
120
|
-
value: !value ? ' ' : value.format(
|
|
119
|
+
value: !value ? ' ' : value.format(dateFormat),
|
|
121
120
|
mask: "00/00/0000",
|
|
122
121
|
onComplete: function onComplete(e, date) {
|
|
123
122
|
_this2.setValue(e, date);
|
|
@@ -137,7 +136,7 @@ var DatePicker = /*#__PURE__*/function (_Component) {
|
|
|
137
136
|
inputRef: function inputRef(el) {
|
|
138
137
|
_this2.inputRef = el;
|
|
139
138
|
},
|
|
140
|
-
rightElements: this.getButtonOpen(),
|
|
139
|
+
rightElements: [this.getButtonOpen()],
|
|
141
140
|
required: required,
|
|
142
141
|
handlerSetOnDenied: this.setOnDenied
|
|
143
142
|
})), showCalendar && this.getWrapperComponent());
|
|
@@ -155,9 +154,9 @@ Object.defineProperty(DatePicker, "getDerivedStateFromProps", {
|
|
|
155
154
|
var value = props.value;
|
|
156
155
|
var propsValue = state.propsValue;
|
|
157
156
|
|
|
158
|
-
if (value && (0, _moment["default"])(value,
|
|
157
|
+
if (value && (0, _moment["default"])(value, dateFormat).format() !== 'Invalid date' && (0, _moment["default"])(propsValue, dateFormat).format() !== (0, _moment["default"])(value, dateFormat).format()) {
|
|
159
158
|
return {
|
|
160
|
-
value: (0, _moment["default"])(value
|
|
159
|
+
value: (0, _moment["default"])(value),
|
|
161
160
|
propsValue: value
|
|
162
161
|
};
|
|
163
162
|
} else if (!value && value !== propsValue) {
|
|
@@ -263,8 +262,8 @@ var _initialiseProps = function _initialiseProps() {
|
|
|
263
262
|
var onChange = _this3.props.onChange;
|
|
264
263
|
|
|
265
264
|
if (onChange) {
|
|
266
|
-
if ((0, _moment["default"])(_value,
|
|
267
|
-
var newValue = (0, _moment["default"])(_value,
|
|
265
|
+
if ((0, _moment["default"])(_value, dateFormat, true).isValid()) {
|
|
266
|
+
var newValue = (0, _moment["default"])(_value, dateFormat).format('YYYY-MM-DD');
|
|
268
267
|
var obj = {
|
|
269
268
|
target: {
|
|
270
269
|
value: newValue,
|
|
@@ -310,7 +309,7 @@ var _initialiseProps = function _initialiseProps() {
|
|
|
310
309
|
if (_this3.props.shouldCloseOnSelect) showCalendar = false;
|
|
311
310
|
|
|
312
311
|
_this3.setState({
|
|
313
|
-
value: (0, _moment["default"])(_value2,
|
|
312
|
+
value: (0, _moment["default"])(_value2, dateFormat),
|
|
314
313
|
showCalendar: showCalendar
|
|
315
314
|
});
|
|
316
315
|
}
|
|
@@ -49,7 +49,7 @@ var BaseNumber = function BaseNumber(props) {
|
|
|
49
49
|
};
|
|
50
50
|
|
|
51
51
|
BaseNumber.propTypes = {
|
|
52
|
-
value: _propTypes["default"].
|
|
52
|
+
value: _propTypes["default"].number,
|
|
53
53
|
leftElements: _propTypes["default"].oneOfType([_propTypes["default"].arrayOf(_propTypes["default"].object), _propTypes["default"].element, _propTypes["default"].object]),
|
|
54
54
|
onBlur: _propTypes["default"].func,
|
|
55
55
|
returnFormattedValueOnBlur: _propTypes["default"].bool
|
|
@@ -40,19 +40,17 @@ var NumberField = function NumberField(props) {
|
|
|
40
40
|
value: (0, _format_number.numberToPtBR)(props.value),
|
|
41
41
|
textAlign: props.textAlign,
|
|
42
42
|
mask: Number,
|
|
43
|
-
|
|
44
|
-
scale: 0,
|
|
45
|
-
padFractionalZeros: false
|
|
43
|
+
scale: 0
|
|
46
44
|
}));
|
|
47
45
|
};
|
|
48
46
|
|
|
49
47
|
NumberField.propTypes = {
|
|
50
|
-
|
|
51
|
-
|
|
48
|
+
textAlign: _propTypes["default"].string,
|
|
49
|
+
value: _propTypes["default"].string
|
|
52
50
|
};
|
|
53
51
|
NumberField.defaultProps = {
|
|
54
|
-
|
|
55
|
-
|
|
52
|
+
textAlign: 'right',
|
|
53
|
+
value: ''
|
|
56
54
|
};
|
|
57
55
|
var _default = NumberField;
|
|
58
56
|
exports["default"] = _default;
|
|
@@ -105,6 +105,9 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
105
105
|
onFocus: function onFocus() {
|
|
106
106
|
handleOnFocus();
|
|
107
107
|
},
|
|
108
|
+
onBlur: function onBlur() {
|
|
109
|
+
handleOnBlur();
|
|
110
|
+
},
|
|
108
111
|
onChange: function onChange(e) {
|
|
109
112
|
handleOnFilter(e.target.value);
|
|
110
113
|
},
|
|
@@ -129,10 +132,7 @@ var Dropdown = function Dropdown(_ref) {
|
|
|
129
132
|
tabIndex: "-1",
|
|
130
133
|
onKeyPress: function onKeyPress() {},
|
|
131
134
|
onClick: function onClick() {
|
|
132
|
-
if (!disabled)
|
|
133
|
-
handleOnSelect(item);
|
|
134
|
-
handleOnBlur(item);
|
|
135
|
-
}
|
|
135
|
+
if (!disabled) handleOnSelect(item);
|
|
136
136
|
}
|
|
137
137
|
}, item.iconName && /*#__PURE__*/_react["default"].createElement(_icons["default"], {
|
|
138
138
|
name: item.iconName,
|
|
@@ -15,40 +15,17 @@ var _simple = _interopRequireDefault(require("./simple"));
|
|
|
15
15
|
|
|
16
16
|
require("../../assets/styles/select.scss");
|
|
17
17
|
|
|
18
|
-
var _gridlayout = _interopRequireDefault(require("../../gridlayout"));
|
|
19
|
-
|
|
20
|
-
var _excluded = ["gridLayout", "multiple"];
|
|
21
|
-
|
|
22
18
|
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
|
|
23
19
|
|
|
24
|
-
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
|
25
|
-
|
|
26
|
-
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
|
27
|
-
|
|
28
20
|
var SelectField = function SelectField(props) {
|
|
29
|
-
|
|
30
|
-
multiple = props.multiple,
|
|
31
|
-
newProps = _objectWithoutProperties(props, _excluded);
|
|
32
|
-
|
|
33
|
-
var component = multiple ? /*#__PURE__*/_react["default"].createElement(_multiple["default"], newProps) : /*#__PURE__*/_react["default"].createElement(_simple["default"], newProps);
|
|
34
|
-
|
|
35
|
-
if (gridLayout !== undefined) {
|
|
36
|
-
return /*#__PURE__*/_react["default"].createElement(_gridlayout["default"], {
|
|
37
|
-
customClass: "-withinput",
|
|
38
|
-
cols: gridLayout
|
|
39
|
-
}, component);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
return component;
|
|
21
|
+
return props.multiple ? /*#__PURE__*/_react["default"].createElement(_multiple["default"], props) : /*#__PURE__*/_react["default"].createElement(_simple["default"], props);
|
|
43
22
|
};
|
|
44
23
|
|
|
45
24
|
SelectField.propTypes = {
|
|
46
|
-
multiple: _propTypes["default"].bool
|
|
47
|
-
gridLayout: _propTypes["default"].string
|
|
25
|
+
multiple: _propTypes["default"].bool
|
|
48
26
|
};
|
|
49
27
|
SelectField.defaultProps = {
|
|
50
|
-
multiple: false
|
|
51
|
-
gridLayout: undefined
|
|
28
|
+
multiple: false
|
|
52
29
|
};
|
|
53
30
|
var _default = SelectField;
|
|
54
31
|
exports["default"] = _default;
|
|
@@ -84,7 +84,6 @@ var MultipleSelect = /*#__PURE__*/function (_Component) {
|
|
|
84
84
|
_this.componentId = "select-component".concat(_uuid["default"].v1());
|
|
85
85
|
_this.componentRef = /*#__PURE__*/_react["default"].createRef();
|
|
86
86
|
_this.state = {
|
|
87
|
-
valueFromProps: null,
|
|
88
87
|
dataCombo: props.dataSource,
|
|
89
88
|
currents: [],
|
|
90
89
|
selected: null,
|
|
@@ -386,19 +385,18 @@ Object.defineProperty(MultipleSelect, "getDerivedStateFromProps", {
|
|
|
386
385
|
value = props.value,
|
|
387
386
|
idKey = props.idKey;
|
|
388
387
|
|
|
389
|
-
if (
|
|
390
|
-
return {
|
|
391
|
-
valueFromProps: value,
|
|
392
|
-
currents: dataSource.filter(function (item) {
|
|
393
|
-
return value.includes(item[idKey]);
|
|
394
|
-
})
|
|
395
|
-
};
|
|
396
|
-
} else if (dataSource !== state.dataCombo) {
|
|
388
|
+
if (dataSource !== state.dataCombo) {
|
|
397
389
|
var dataCombo = remoteSearch ? dataSource : (0, _helper.getFilteredMultipleDataCombo)(_extends({}, props, state));
|
|
398
390
|
return {
|
|
399
391
|
dataCombo: dataCombo,
|
|
400
392
|
selected: dataSource.length > 0 && remoteSearch ? dataSource[0] : null
|
|
401
393
|
};
|
|
394
|
+
} else if (value !== null && dataSource.length > 0) {
|
|
395
|
+
return {
|
|
396
|
+
currents: dataSource.filter(function (item) {
|
|
397
|
+
return value.includes(item[idKey]);
|
|
398
|
+
})
|
|
399
|
+
};
|
|
402
400
|
}
|
|
403
401
|
|
|
404
402
|
return null;
|
|
@@ -127,6 +127,9 @@ var SimpleSelect = /*#__PURE__*/function (_Component) {
|
|
|
127
127
|
onFocus: function onFocus() {
|
|
128
128
|
_this2.onFocus();
|
|
129
129
|
},
|
|
130
|
+
onBlur: function onBlur(e) {
|
|
131
|
+
_this2.onBlur(e);
|
|
132
|
+
},
|
|
130
133
|
onChange: function onChange(e) {
|
|
131
134
|
_this2.onFilter(e.target.value);
|
|
132
135
|
},
|
|
@@ -290,11 +293,18 @@ var _initialiseProps = function _initialiseProps() {
|
|
|
290
293
|
enumerable: true,
|
|
291
294
|
writable: true,
|
|
292
295
|
value: function value(selected) {
|
|
293
|
-
var
|
|
296
|
+
var _this3$props2 = _this3.props,
|
|
297
|
+
onChange = _this3$props2.onChange,
|
|
298
|
+
idKey = _this3$props2.idKey,
|
|
299
|
+
name = _this3$props2.name;
|
|
294
300
|
|
|
295
301
|
if (onChange) {
|
|
296
|
-
var event =
|
|
297
|
-
|
|
302
|
+
var event = {
|
|
303
|
+
target: {
|
|
304
|
+
name: name,
|
|
305
|
+
value: selected ? selected[idKey] : undefined
|
|
306
|
+
}
|
|
307
|
+
};
|
|
298
308
|
onChange(event);
|
|
299
309
|
}
|
|
300
310
|
}
|
|
@@ -354,15 +364,9 @@ var _initialiseProps = function _initialiseProps() {
|
|
|
354
364
|
configurable: true,
|
|
355
365
|
enumerable: true,
|
|
356
366
|
writable: true,
|
|
357
|
-
value: function value(
|
|
367
|
+
value: function value(e) {
|
|
358
368
|
var onBlur = _this3.props.onBlur;
|
|
359
|
-
|
|
360
|
-
if (onBlur) {
|
|
361
|
-
var event = _this3.getSelectEvent(selected);
|
|
362
|
-
|
|
363
|
-
onBlur(event);
|
|
364
|
-
}
|
|
365
|
-
|
|
369
|
+
if (onBlur) onBlur(e);
|
|
366
370
|
if (!_this3.state.insideComponent) _this3.setState({
|
|
367
371
|
opened: false,
|
|
368
372
|
isTyping: false
|
|
@@ -374,9 +378,9 @@ var _initialiseProps = function _initialiseProps() {
|
|
|
374
378
|
enumerable: true,
|
|
375
379
|
writable: true,
|
|
376
380
|
value: function value(e) {
|
|
377
|
-
var _this3$
|
|
378
|
-
dataSource = _this3$
|
|
379
|
-
idKey = _this3$
|
|
381
|
+
var _this3$props3 = _this3.props,
|
|
382
|
+
dataSource = _this3$props3.dataSource,
|
|
383
|
+
idKey = _this3$props3.idKey;
|
|
380
384
|
var _this3$state = _this3.state,
|
|
381
385
|
selected = _this3$state.selected,
|
|
382
386
|
isTyping = _this3$state.isTyping;
|
|
@@ -417,22 +421,6 @@ var _initialiseProps = function _initialiseProps() {
|
|
|
417
421
|
});
|
|
418
422
|
}
|
|
419
423
|
});
|
|
420
|
-
Object.defineProperty(this, "getSelectEvent", {
|
|
421
|
-
configurable: true,
|
|
422
|
-
enumerable: true,
|
|
423
|
-
writable: true,
|
|
424
|
-
value: function value(selected) {
|
|
425
|
-
var _this3$props3 = _this3.props,
|
|
426
|
-
idKey = _this3$props3.idKey,
|
|
427
|
-
name = _this3$props3.name;
|
|
428
|
-
return {
|
|
429
|
-
target: {
|
|
430
|
-
name: name,
|
|
431
|
-
value: selected ? selected[idKey] : undefined
|
|
432
|
-
}
|
|
433
|
-
};
|
|
434
|
-
}
|
|
435
|
-
});
|
|
436
424
|
Object.defineProperty(this, "setOnDenied", {
|
|
437
425
|
configurable: true,
|
|
438
426
|
enumerable: true,
|
|
@@ -33,8 +33,6 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
|
|
|
33
33
|
|
|
34
34
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
35
35
|
|
|
36
|
-
var TOOLTIP_INITIAL_HEIGHT = 40;
|
|
37
|
-
|
|
38
36
|
var hasTooltip = function hasTooltip(_ref) {
|
|
39
37
|
var tooltip = _ref.tooltip;
|
|
40
38
|
return tooltip;
|
|
@@ -47,34 +45,35 @@ var getDisplayName = function getDisplayName(WrappedComponent) {
|
|
|
47
45
|
var withTooltip = function withTooltip(WrappedComponent) {
|
|
48
46
|
var EnhancedComponent = function EnhancedComponent(props) {
|
|
49
47
|
var tooltip = props.tooltip,
|
|
48
|
+
tooltipPosition = props.tooltipPosition,
|
|
50
49
|
tooltipWidth = props.tooltipWidth,
|
|
51
50
|
space = props.space;
|
|
52
51
|
|
|
53
|
-
var _useState = (0, _react.useState)(
|
|
52
|
+
var _useState = (0, _react.useState)(false),
|
|
54
53
|
_useState2 = _slicedToArray(_useState, 2),
|
|
55
|
-
|
|
56
|
-
|
|
54
|
+
showTooltip = _useState2[0],
|
|
55
|
+
setShowTooltip = _useState2[1];
|
|
57
56
|
|
|
58
|
-
var _useState3 = (0, _react.useState)(
|
|
57
|
+
var _useState3 = (0, _react.useState)({
|
|
58
|
+
width: tooltipWidth,
|
|
59
|
+
height: undefined
|
|
60
|
+
}),
|
|
59
61
|
_useState4 = _slicedToArray(_useState3, 2),
|
|
60
|
-
|
|
61
|
-
|
|
62
|
+
tooltipDimensions = _useState4[0],
|
|
63
|
+
setTooltipDimensions = _useState4[1];
|
|
62
64
|
|
|
63
|
-
var _useState5 = (0, _react.useState)(
|
|
65
|
+
var _useState5 = (0, _react.useState)(true),
|
|
64
66
|
_useState6 = _slicedToArray(_useState5, 2),
|
|
65
|
-
|
|
66
|
-
|
|
67
|
+
findScrollableParent = _useState6[0],
|
|
68
|
+
setFindScrollableParent = _useState6[1];
|
|
67
69
|
|
|
68
|
-
var _useState7 = (0, _react.useState)(
|
|
69
|
-
width: tooltipWidth,
|
|
70
|
-
height: TOOLTIP_INITIAL_HEIGHT
|
|
71
|
-
}),
|
|
70
|
+
var _useState7 = (0, _react.useState)(undefined),
|
|
72
71
|
_useState8 = _slicedToArray(_useState7, 2),
|
|
73
|
-
|
|
74
|
-
|
|
72
|
+
dimensionsTargetElement = _useState8[0],
|
|
73
|
+
setDimensionsTargetElement = _useState8[1];
|
|
75
74
|
|
|
76
|
-
var
|
|
77
|
-
var
|
|
75
|
+
var scrollableParent = (0, _react.useRef)();
|
|
76
|
+
var targetElement = (0, _react.useRef)();
|
|
78
77
|
|
|
79
78
|
var onMouseOver = function onMouseOver(e) {
|
|
80
79
|
if (targetElement && targetElement.current && targetElement.current.contains(e.target)) {
|
|
@@ -86,24 +85,58 @@ var withTooltip = function withTooltip(WrappedComponent) {
|
|
|
86
85
|
setShowTooltip(false);
|
|
87
86
|
};
|
|
88
87
|
|
|
89
|
-
var
|
|
90
|
-
|
|
88
|
+
var onParentScroll = function onParentScroll() {
|
|
89
|
+
var currentDimensions = targetElement.current.getBoundingClientRect();
|
|
90
|
+
|
|
91
|
+
if (targetElement.current && dimensionsTargetElement !== currentDimensions) {
|
|
92
|
+
return setDimensionsTargetElement(currentDimensions);
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
return null;
|
|
96
|
+
};
|
|
97
|
+
|
|
98
|
+
var getScrollableParent = function getScrollableParent(node) {
|
|
99
|
+
if (node === null || node.nodeName === '#document') {
|
|
100
|
+
return setFindScrollableParent(false);
|
|
101
|
+
}
|
|
102
|
+
|
|
103
|
+
var _window$getComputedSt = window.getComputedStyle(node),
|
|
104
|
+
overflowY = _window$getComputedSt.overflowY;
|
|
105
|
+
|
|
106
|
+
var isScrollable = overflowY !== 'visible' && overflowY !== 'hidden';
|
|
107
|
+
|
|
108
|
+
if (isScrollable && node.scrollHeight > node.clientHeight) {
|
|
109
|
+
scrollableParent.current = node;
|
|
110
|
+
return setFindScrollableParent(false);
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
return getScrollableParent(node.parentNode);
|
|
91
114
|
};
|
|
92
115
|
|
|
93
116
|
(0, _react.useEffect)(function () {
|
|
94
117
|
if (hasTooltip(props)) {
|
|
95
118
|
document.addEventListener('mouseover', onMouseOver);
|
|
96
|
-
document.addEventListener('scroll', onAnyScroll, true);
|
|
97
119
|
|
|
98
120
|
if (targetElement && targetElement.current) {
|
|
99
121
|
targetElement.current.addEventListener('mouseout', onMouseOut);
|
|
100
122
|
}
|
|
123
|
+
|
|
124
|
+
if (targetElement && targetElement.current && findScrollableParent) {
|
|
125
|
+
getScrollableParent(targetElement.current);
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
if (scrollableParent && scrollableParent.current) {
|
|
129
|
+
scrollableParent.current.addEventListener('scroll', onParentScroll);
|
|
130
|
+
}
|
|
101
131
|
}
|
|
102
132
|
|
|
103
133
|
return function () {
|
|
104
134
|
if (hasTooltip(props)) {
|
|
105
135
|
document.removeEventListener('mouseover', onMouseOver);
|
|
106
|
-
|
|
136
|
+
|
|
137
|
+
if (scrollableParent && scrollableParent.current) {
|
|
138
|
+
scrollableParent.current.removeEventListener('scroll', onParentScroll);
|
|
139
|
+
}
|
|
107
140
|
|
|
108
141
|
if (targetElement && targetElement.current) {
|
|
109
142
|
targetElement.current.removeEventListener('mouseout', onMouseOut);
|
|
@@ -111,76 +144,39 @@ var withTooltip = function withTooltip(WrappedComponent) {
|
|
|
111
144
|
}
|
|
112
145
|
};
|
|
113
146
|
}, []);
|
|
114
|
-
(0, _react.useEffect)(function () {
|
|
115
|
-
if (targetElement.current) {
|
|
116
|
-
var width = tooltipDimensions.width,
|
|
117
|
-
height = tooltipDimensions.height;
|
|
118
|
-
var targetDimensions = targetElement.current.getBoundingClientRect();
|
|
119
|
-
var targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
|
|
120
|
-
var tooltipClientWidth = tooltipElement.current && tooltipElement.current.clientWidth;
|
|
121
|
-
var style = "width: ".concat(typeof width === 'string' ? width : "".concat(width, "px"));
|
|
122
|
-
var left = targetDimensions.left + targetDimensions.width / 2 - tooltipClientWidth / 2;
|
|
123
|
-
left = Math.min(left, document.body.clientWidth - tooltipClientWidth - space);
|
|
124
|
-
style += "; left: ".concat(Math.max(space, left), "px");
|
|
125
|
-
|
|
126
|
-
switch (tooltipPosition) {
|
|
127
|
-
case 'top':
|
|
128
|
-
if (targetDimensions.top < height) {
|
|
129
|
-
setTooltipPosition('bottom');
|
|
130
|
-
} else {
|
|
131
|
-
style += "; top: ".concat(targetDimensions.top + window.scrollY - height - 5, "px");
|
|
132
|
-
}
|
|
133
|
-
|
|
134
|
-
break;
|
|
135
|
-
|
|
136
|
-
case 'bottom':
|
|
137
|
-
if (window.innerHeight - targetDimensions.bottom < height) {
|
|
138
|
-
setTooltipPosition('top');
|
|
139
|
-
} else {
|
|
140
|
-
style += "; top: ".concat(targetDimensions.top + window.scrollY + targetDimensions.height + 5, "px");
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
break;
|
|
144
|
-
|
|
145
|
-
case 'left':
|
|
146
|
-
if (targetDimensions.left < tooltipClientWidth) {
|
|
147
|
-
setTooltipPosition('right');
|
|
148
|
-
} else {
|
|
149
|
-
style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
|
|
150
|
-
style += "; left: ".concat(targetDimensions.left - tooltipClientWidth - 6, "px");
|
|
151
|
-
}
|
|
152
|
-
|
|
153
|
-
break;
|
|
154
|
-
|
|
155
|
-
case 'right':
|
|
156
|
-
if (window.innerWidth - targetDimensions.right < tooltipClientWidth) {
|
|
157
|
-
setTooltipPosition('left');
|
|
158
|
-
} else {
|
|
159
|
-
style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
|
|
160
|
-
style += "; left: ".concat(targetDimensions.left + targetDimensions.width + 5, "px");
|
|
161
|
-
}
|
|
162
|
-
|
|
163
|
-
break;
|
|
164
|
-
|
|
165
|
-
default:
|
|
166
|
-
style += '';
|
|
167
|
-
}
|
|
168
147
|
|
|
169
|
-
|
|
148
|
+
var getStyle = function getStyle() {
|
|
149
|
+
// where on the screen is the target
|
|
150
|
+
var width = tooltipDimensions.width,
|
|
151
|
+
height = tooltipDimensions.height;
|
|
152
|
+
var targetDimensions = dimensionsTargetElement || targetElement.current.getBoundingClientRect();
|
|
153
|
+
var targetVerticalCenter = (targetDimensions.top + targetDimensions.bottom) / 2;
|
|
154
|
+
var style = "width: ".concat(width + 2, "px");
|
|
155
|
+
var left = targetDimensions.left + targetDimensions.width / 2 - width / 2;
|
|
156
|
+
left = Math.min(left, document.body.clientWidth - width - space);
|
|
157
|
+
style += "; left: ".concat(Math.max(space, left), "px"); // when the position is informed
|
|
158
|
+
|
|
159
|
+
if (tooltipPosition === 'top') {
|
|
160
|
+
style += "; top: ".concat(targetDimensions.top + window.scrollY - height - 5, "px");
|
|
161
|
+
} else if (tooltipPosition === 'bottom') {
|
|
162
|
+
style += "; top: ".concat(targetDimensions.top + window.scrollY + targetDimensions.height + 5, "px");
|
|
163
|
+
} else if (tooltipPosition === 'left') {
|
|
164
|
+
style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
|
|
165
|
+
style += "; left: ".concat(targetDimensions.left - width - 6, "px");
|
|
166
|
+
} else if (tooltipPosition === 'right') {
|
|
167
|
+
style += "; top: ".concat(targetVerticalCenter + window.scrollY - height / 2, "px");
|
|
168
|
+
style += "; left: ".concat(targetDimensions.left + targetDimensions.width + 5, "px");
|
|
170
169
|
}
|
|
171
|
-
|
|
172
|
-
|
|
173
|
-
|
|
174
|
-
}, [window.scrollY, window.scrollX, window.innerWidth]);
|
|
170
|
+
|
|
171
|
+
return style;
|
|
172
|
+
};
|
|
175
173
|
|
|
176
174
|
var getTooltip = function getTooltip() {
|
|
177
175
|
if (tooltip) {
|
|
178
176
|
return /*#__PURE__*/_react["default"].createElement(_tooltip["default"], {
|
|
179
177
|
text: tooltip,
|
|
180
|
-
|
|
181
|
-
style: tooltipStyle,
|
|
178
|
+
style: getStyle(),
|
|
182
179
|
className: tooltipPosition,
|
|
183
|
-
tooltipDimensions: tooltipDimensions,
|
|
184
180
|
handlerSetDimensions: setTooltipDimensions
|
|
185
181
|
});
|
|
186
182
|
}
|
package/lib/list/Item.js
CHANGED
|
@@ -99,12 +99,12 @@ var Item = function Item(props) {
|
|
|
99
99
|
|
|
100
100
|
var getProps = function getProps() {
|
|
101
101
|
if (shouldDisable()) return undefined;
|
|
102
|
-
if (_onClick === undefined && dropdownContext === undefined
|
|
102
|
+
if (_onClick === undefined && dropdownContext === undefined) return null;
|
|
103
103
|
return {
|
|
104
104
|
onClick: function onClick(e) {
|
|
105
|
-
if (_onClick !== undefined) _onClick(e
|
|
105
|
+
if (_onClick !== undefined) _onClick(e);
|
|
106
106
|
if (dropdownContext) dropdownContext.handleDropdownClose();
|
|
107
|
-
if (selectable
|
|
107
|
+
if (selectable && handleSelectItem(itemId)) ;
|
|
108
108
|
},
|
|
109
109
|
onKeyDown: null,
|
|
110
110
|
role: 'button',
|
package/lib/list/index.js
CHANGED
|
@@ -58,30 +58,24 @@ function _iterableToArrayLimit(arr, i) { var _i = arr && (typeof Symbol !== "und
|
|
|
58
58
|
function _arrayWithHoles(arr) { if (Array.isArray(arr)) return arr; }
|
|
59
59
|
|
|
60
60
|
var List = function List(props) {
|
|
61
|
-
var children = props.children,
|
|
62
|
-
customClass = props.customClass,
|
|
63
|
-
condensed = props.condensed,
|
|
64
|
-
transparent = props.transparent,
|
|
65
|
-
style = props.style,
|
|
66
|
-
selectable = props.selectable,
|
|
67
|
-
onSelectItem = props.onSelectItem;
|
|
68
|
-
|
|
69
61
|
var _useState = (0, _react.useState)(''),
|
|
70
62
|
_useState2 = _slicedToArray(_useState, 2),
|
|
71
63
|
selectedItemId = _useState2[0],
|
|
72
64
|
setSelectedItemId = _useState2[1];
|
|
73
65
|
|
|
66
|
+
var children = props.children,
|
|
67
|
+
customClass = props.customClass,
|
|
68
|
+
condensed = props.condensed,
|
|
69
|
+
transparent = props.transparent,
|
|
70
|
+
style = props.style,
|
|
71
|
+
selectable = props.selectable;
|
|
74
72
|
var contextValues = {
|
|
75
73
|
selectable: selectable,
|
|
76
74
|
selectedItemId: selectedItemId,
|
|
77
|
-
handleSelectItem: function handleSelectItem(selectedId
|
|
78
|
-
|
|
79
|
-
if (onSelectItem) onSelectItem(selectedId);
|
|
75
|
+
handleSelectItem: function handleSelectItem(selectedId) {
|
|
76
|
+
setSelectedItemId(selectedId);
|
|
80
77
|
}
|
|
81
78
|
};
|
|
82
|
-
(0, _react.useEffect)(function () {
|
|
83
|
-
if (onSelectItem && props.selectedItemId) setSelectedItemId(props.selectedItemId);
|
|
84
|
-
}, [props.selectedItemId]);
|
|
85
79
|
return /*#__PURE__*/_react["default"].createElement(_helpers["default"].Provider, {
|
|
86
80
|
value: contextValues
|
|
87
81
|
}, /*#__PURE__*/_react["default"].createElement("ul", {
|
|
@@ -97,18 +91,14 @@ List.propTypes = {
|
|
|
97
91
|
customClass: _propTypes["default"].string,
|
|
98
92
|
condensed: _propTypes["default"].bool,
|
|
99
93
|
selectable: _propTypes["default"].bool,
|
|
100
|
-
style: _propTypes["default"].object
|
|
101
|
-
onSelectItem: _propTypes["default"].func,
|
|
102
|
-
selectedItemId: _propTypes["default"].string
|
|
94
|
+
style: _propTypes["default"].object
|
|
103
95
|
};
|
|
104
96
|
List.defaultProps = {
|
|
105
97
|
customClass: '',
|
|
106
98
|
condensed: false,
|
|
107
99
|
transparent: false,
|
|
108
100
|
selectable: false,
|
|
109
|
-
style: {}
|
|
110
|
-
onSelectItem: undefined,
|
|
111
|
-
selectedItemId: ''
|
|
101
|
+
style: {}
|
|
112
102
|
};
|
|
113
103
|
var _default = List;
|
|
114
104
|
exports["default"] = _default;
|