linkmore-design 1.0.14 → 1.0.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/index.umd.js +1029 -508
- package/dist/index.umd.min.js +6 -6
- package/es/Button/index.js +3 -1
- package/es/Button/style/style.css +4 -1
- package/es/CkFilter/baseFilter/filterMenu.js +11 -0
- package/es/CkFilter/complexFilter/drawer.js +42 -2
- package/es/CkFilter/components/CascaderFilter.js +132 -0
- package/es/CkFilter/components/CheckboxTags.js +53 -0
- package/es/CkFilter/components/Controls.js +43 -0
- package/es/CkFilter/components/CustomModal.js +230 -0
- package/es/CkFilter/components/filterTypes.js +154 -1
- package/es/CkFilter/components/modal.js +36 -67
- package/es/CkFilter/components/modalBack.js +261 -0
- package/es/CkFilter/context.js +1 -1
- package/es/CkFilter/customFilter/drawer.js +4 -1
- package/es/CkFilter/filter.js +3 -3
- package/es/CkFilter/style/style.css +68 -26
- package/es/PopTable/style/style.css +1 -4
- package/es/ProTable/Table.js +23 -10
- package/es/ProTable/autosize.js +170 -0
- package/es/ProTable/detectElementResize.js +225 -0
- package/es/ProTable/style/style.css +7 -0
- package/es/Radio/style/style.css +7 -0
- package/es/TabBar/style/style.css +0 -1
- package/lib/Button/index.js +3 -1
- package/lib/Button/style/style.css +4 -1
- package/lib/CkFilter/baseFilter/filterMenu.js +11 -0
- package/lib/CkFilter/complexFilter/drawer.js +42 -2
- package/lib/CkFilter/components/CascaderFilter.js +132 -0
- package/lib/CkFilter/components/CheckboxTags.js +53 -0
- package/lib/CkFilter/components/Controls.js +43 -0
- package/lib/CkFilter/components/CustomModal.js +230 -0
- package/lib/CkFilter/components/filterTypes.js +154 -1
- package/lib/CkFilter/components/modal.js +36 -67
- package/lib/CkFilter/components/modalBack.js +261 -0
- package/lib/CkFilter/context.js +1 -1
- package/lib/CkFilter/customFilter/drawer.js +4 -1
- package/lib/CkFilter/filter.js +3 -3
- package/lib/CkFilter/style/style.css +68 -26
- package/lib/PopTable/style/style.css +1 -4
- package/lib/ProTable/Table.js +23 -10
- package/lib/ProTable/autosize.js +170 -0
- package/lib/ProTable/detectElementResize.js +225 -0
- package/lib/ProTable/style/style.css +7 -0
- package/lib/Radio/style/style.css +7 -0
- package/lib/TabBar/style/style.css +0 -1
- package/package.json +1 -1
package/es/CkFilter/filter.js
CHANGED
|
@@ -21,8 +21,6 @@ var _baseFilter = _interopRequireDefault(require("./baseFilter"));
|
|
|
21
21
|
|
|
22
22
|
var _complexFilter = _interopRequireDefault(require("./complexFilter"));
|
|
23
23
|
|
|
24
|
-
var _modal = _interopRequireDefault(require("./components/modal"));
|
|
25
|
-
|
|
26
24
|
var _context = require("./context");
|
|
27
25
|
|
|
28
26
|
var _customFilter = _interopRequireDefault(require("./customFilter"));
|
|
@@ -31,6 +29,8 @@ var _radioGroup = _interopRequireDefault(require("./customFilter/radioGroup"));
|
|
|
31
29
|
|
|
32
30
|
var _utils = require("./utils");
|
|
33
31
|
|
|
32
|
+
// import CustomModal from './components/modal'
|
|
33
|
+
|
|
34
34
|
/*
|
|
35
35
|
* data
|
|
36
36
|
*
|
|
@@ -147,7 +147,7 @@ var Filter = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
147
147
|
className: "lm_filter_base"
|
|
148
148
|
}, custom && /*#__PURE__*/_react.default.createElement(_customFilter.default, null), levelGroup && /*#__PURE__*/_react.default.createElement(_radioGroup.default, null), (custom || levelGroup) && /*#__PURE__*/_react.default.createElement("div", {
|
|
149
149
|
className: "line"
|
|
150
|
-
}), /*#__PURE__*/_react.default.createElement(_baseFilter.default, null), complex && /*#__PURE__*/_react.default.createElement(_complexFilter.default, null)
|
|
150
|
+
}), /*#__PURE__*/_react.default.createElement(_baseFilter.default, null), complex && /*#__PURE__*/_react.default.createElement(_complexFilter.default, null)));
|
|
151
151
|
});
|
|
152
152
|
var _default = Filter;
|
|
153
153
|
exports.default = _default;
|
|
@@ -621,46 +621,49 @@ html {
|
|
|
621
621
|
.ant-dropdown *::-webkit-scrollbar-thumb:hover {
|
|
622
622
|
background-color: #999;
|
|
623
623
|
}
|
|
624
|
-
.
|
|
624
|
+
.filter_dropdown {
|
|
625
625
|
display: flex;
|
|
626
626
|
flex-flow: column;
|
|
627
627
|
box-shadow: 0 2px 6px var(--box-shadow-color);
|
|
628
628
|
background-color: #fff;
|
|
629
629
|
}
|
|
630
|
-
.
|
|
630
|
+
.filter_dropdown .filter_header {
|
|
631
631
|
min-height: 40px;
|
|
632
632
|
border-bottom: 1px solid #eee;
|
|
633
633
|
padding: 8px;
|
|
634
634
|
}
|
|
635
|
-
.
|
|
635
|
+
.filter_dropdown .filter_header .filter_header_operate {
|
|
636
636
|
display: flex;
|
|
637
637
|
align-items: center;
|
|
638
638
|
justify-content: space-between;
|
|
639
639
|
}
|
|
640
|
-
.
|
|
640
|
+
.filter_dropdown .filter_header .filter_header_operate .filter_reset {
|
|
641
641
|
font-size: 12px;
|
|
642
642
|
color: var(--primary-color);
|
|
643
643
|
cursor: pointer;
|
|
644
644
|
}
|
|
645
|
-
.
|
|
645
|
+
.filter_dropdown .filter_header .filter_header_operate .filter_tip {
|
|
646
646
|
font-size: 12px;
|
|
647
647
|
color: var(--text-color);
|
|
648
648
|
}
|
|
649
|
-
.
|
|
649
|
+
.filter_dropdown .filter_header .ant-input-group {
|
|
650
|
+
line-height: 1;
|
|
651
|
+
}
|
|
652
|
+
.filter_dropdown .filter_header input {
|
|
650
653
|
font-size: 12px;
|
|
651
654
|
}
|
|
652
|
-
.
|
|
655
|
+
.filter_dropdown .filter_header .ant-input-search + .filter_header_operate {
|
|
653
656
|
margin-top: 8px;
|
|
654
657
|
}
|
|
655
|
-
.
|
|
658
|
+
.filter_dropdown .filter_body {
|
|
656
659
|
width: 100%;
|
|
657
660
|
}
|
|
658
|
-
.
|
|
661
|
+
.filter_dropdown .filter_body .virtual_list {
|
|
659
662
|
min-width: 160px;
|
|
660
663
|
max-height: 224px;
|
|
661
664
|
overflow: auto;
|
|
662
665
|
}
|
|
663
|
-
.
|
|
666
|
+
.filter_dropdown .filter_body .filter_item {
|
|
664
667
|
display: flex;
|
|
665
668
|
align-items: center;
|
|
666
669
|
justify-content: space-between;
|
|
@@ -672,34 +675,34 @@ html {
|
|
|
672
675
|
white-space: nowrap;
|
|
673
676
|
cursor: pointer;
|
|
674
677
|
}
|
|
675
|
-
.
|
|
678
|
+
.filter_dropdown .filter_body .filter_item.add_more {
|
|
676
679
|
border-top: 1px solid var(--stripe-color);
|
|
677
680
|
}
|
|
678
|
-
.
|
|
681
|
+
.filter_dropdown .filter_body .filter_item .filter_item_content {
|
|
679
682
|
flex: auto;
|
|
680
683
|
}
|
|
681
|
-
.
|
|
684
|
+
.filter_dropdown .filter_body .filter_item .filter_item_operate .hover_show {
|
|
682
685
|
font-size: 16px;
|
|
683
686
|
color: #8C8C8C;
|
|
684
687
|
transition: 0.3s;
|
|
685
688
|
opacity: 0;
|
|
686
689
|
}
|
|
687
|
-
.
|
|
690
|
+
.filter_dropdown .filter_body .filter_item .filter_item_operate .hover_show:hover {
|
|
688
691
|
color: var(--primary-color);
|
|
689
692
|
}
|
|
690
|
-
.
|
|
693
|
+
.filter_dropdown .filter_body .filter_item[disabled] {
|
|
691
694
|
display: none;
|
|
692
695
|
}
|
|
693
|
-
.
|
|
696
|
+
.filter_dropdown .filter_body .filter_item.checked {
|
|
694
697
|
background-color: var(--primary-select-color);
|
|
695
698
|
}
|
|
696
|
-
.
|
|
699
|
+
.filter_dropdown .filter_body .filter_item:hover {
|
|
697
700
|
background-color: var(--stripe-color);
|
|
698
701
|
}
|
|
699
|
-
.
|
|
702
|
+
.filter_dropdown .filter_body .filter_item:hover .filter_item_operate .icon_top {
|
|
700
703
|
opacity: 1;
|
|
701
704
|
}
|
|
702
|
-
.
|
|
705
|
+
.filter_dropdown .filter_footer {
|
|
703
706
|
display: flex;
|
|
704
707
|
align-items: center;
|
|
705
708
|
justify-content: space-between;
|
|
@@ -709,24 +712,24 @@ html {
|
|
|
709
712
|
border-top: 1px solid #eee;
|
|
710
713
|
letter-spacing: 1px;
|
|
711
714
|
}
|
|
712
|
-
.
|
|
715
|
+
.filter_dropdown .filter_footer button {
|
|
713
716
|
font-size: 12px;
|
|
714
717
|
padding: 0 8px;
|
|
715
718
|
}
|
|
716
|
-
.
|
|
719
|
+
.filter_dropdown .filter_footer .footer_save {
|
|
717
720
|
color: var(--primary-color);
|
|
718
721
|
cursor: pointer;
|
|
719
722
|
transition: 0.3s;
|
|
720
723
|
}
|
|
721
|
-
.
|
|
724
|
+
.filter_dropdown .filter_footer .footer_clear {
|
|
722
725
|
color: var(--text-color);
|
|
723
726
|
cursor: pointer;
|
|
724
727
|
transition: 0.3s;
|
|
725
728
|
}
|
|
726
|
-
.
|
|
729
|
+
.filter_dropdown .filter_footer .footer_clear:hover {
|
|
727
730
|
color: var(--font-color);
|
|
728
731
|
}
|
|
729
|
-
.
|
|
732
|
+
.filter_dropdown .filter_empty {
|
|
730
733
|
display: flex;
|
|
731
734
|
align-items: center;
|
|
732
735
|
justify-content: center;
|
|
@@ -735,11 +738,11 @@ html {
|
|
|
735
738
|
color: #666;
|
|
736
739
|
padding: 0 8px;
|
|
737
740
|
}
|
|
738
|
-
.
|
|
741
|
+
.filter_dropdown .ant-checkbox-wrapper {
|
|
739
742
|
font-size: 12px;
|
|
740
743
|
align-items: center;
|
|
741
744
|
}
|
|
742
|
-
.
|
|
745
|
+
.filter_dropdown .ant-checkbox-wrapper .ant-checkbox {
|
|
743
746
|
top: initial;
|
|
744
747
|
}
|
|
745
748
|
.ant-drawer .ant-drawer-header {
|
|
@@ -904,6 +907,45 @@ html {
|
|
|
904
907
|
background-color: var(--border-color);
|
|
905
908
|
z-index: 4;
|
|
906
909
|
}
|
|
910
|
+
.ant-drawer.lm_det_drawer .checkbox_tag {
|
|
911
|
+
display: inline-flex;
|
|
912
|
+
align-items: center;
|
|
913
|
+
justify-content: center;
|
|
914
|
+
font-size: 12px;
|
|
915
|
+
height: 24px;
|
|
916
|
+
border-radius: 2px;
|
|
917
|
+
color: var(--font-color);
|
|
918
|
+
background-color: var(--stripe-color);
|
|
919
|
+
padding: 0 8px;
|
|
920
|
+
transition: 0.3s;
|
|
921
|
+
cursor: pointer;
|
|
922
|
+
}
|
|
923
|
+
.ant-drawer.lm_det_drawer .checkbox_tag:hover,
|
|
924
|
+
.ant-drawer.lm_det_drawer .checkbox_tag.active {
|
|
925
|
+
color: #fff;
|
|
926
|
+
background-color: var(--primary-color);
|
|
927
|
+
}
|
|
928
|
+
.ant-drawer.lm_det_drawer .ant-form-item {
|
|
929
|
+
margin-bottom: 16px;
|
|
930
|
+
}
|
|
931
|
+
.ant-drawer.lm_det_drawer .ant-form-item .ant-form-item-label > label {
|
|
932
|
+
font-size: 12px;
|
|
933
|
+
}
|
|
934
|
+
.ant-drawer.lm_det_drawer .auto_height {
|
|
935
|
+
max-height: 418px;
|
|
936
|
+
overflow-y: auto;
|
|
937
|
+
}
|
|
938
|
+
.ant-drawer.lm_det_drawer .ant-radio-wrapper {
|
|
939
|
+
display: inline-flex;
|
|
940
|
+
align-items: center;
|
|
941
|
+
font-size: 12px;
|
|
942
|
+
}
|
|
943
|
+
.ant-drawer.lm_det_drawer .ant-radio-wrapper .ant-radio {
|
|
944
|
+
top: 0;
|
|
945
|
+
}
|
|
946
|
+
.ant-drawer.lm_det_drawer .ant-select {
|
|
947
|
+
font-size: 12px;
|
|
948
|
+
}
|
|
907
949
|
.ant-modal .custom_modal .checkbox_tag {
|
|
908
950
|
display: inline-flex;
|
|
909
951
|
align-items: center;
|
|
@@ -520,9 +520,6 @@ html {
|
|
|
520
520
|
align-items: center;
|
|
521
521
|
justify-content: center;
|
|
522
522
|
}
|
|
523
|
-
.lm_popover_table .lm_operate .ant-btn > .anticon:not(.anticon-down) {
|
|
524
|
-
font-size: 14px;
|
|
525
|
-
}
|
|
526
523
|
.lm_popover_table .lm_operate .anticon + span,
|
|
527
524
|
.lm_popover_table .lm_operate span + .anticon {
|
|
528
525
|
margin-left: calc(var(--gap) / 2);
|
|
@@ -687,7 +684,7 @@ html {
|
|
|
687
684
|
}
|
|
688
685
|
.lm_popover_table .lm_grid .ant-pagination {
|
|
689
686
|
font-size: 12px;
|
|
690
|
-
padding-top:
|
|
687
|
+
padding-top: 10px;
|
|
691
688
|
margin: 0;
|
|
692
689
|
}
|
|
693
690
|
.lm_popover_table .lm_grid .ant-pagination .ant-select {
|
package/es/ProTable/Table.js
CHANGED
|
@@ -33,7 +33,7 @@ var _VList = require("./VList");
|
|
|
33
33
|
|
|
34
34
|
var _resetConfig = _interopRequireDefault(require("./resetConfig"));
|
|
35
35
|
|
|
36
|
-
var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading"];
|
|
36
|
+
var _excluded = ["dataSource", "autoSize", "columns", "rowClick", "onDoubleClick", "checkConfig", "summary", "pagination", "hiddenPage", "loading", "virtual", "customCheck"];
|
|
37
37
|
var Summary = _proTable.default.Summary;
|
|
38
38
|
exports.Summary = Summary;
|
|
39
39
|
var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
@@ -47,6 +47,9 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
47
47
|
pagination = props.pagination,
|
|
48
48
|
hiddenPage = props.hiddenPage,
|
|
49
49
|
loading = props.loading,
|
|
50
|
+
_props$virtual = props.virtual,
|
|
51
|
+
virtual = _props$virtual === void 0 ? true : _props$virtual,
|
|
52
|
+
customCheck = props.customCheck,
|
|
50
53
|
resetProps = (0, _objectWithoutProperties2.default)(props, _excluded);
|
|
51
54
|
var _resetProps$rowKey = resetProps.rowKey,
|
|
52
55
|
rowKey = _resetProps$rowKey === void 0 ? 'id' : _resetProps$rowKey;
|
|
@@ -179,7 +182,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
179
182
|
selectedRowKeys: useSelectedRows.selectedRows.map(function (v) {
|
|
180
183
|
return v[rowKey];
|
|
181
184
|
}),
|
|
182
|
-
onChange: function onChange(selectedRowKeys, selectedRows) {
|
|
185
|
+
onChange: function onChange(selectedRowKeys, selectedRows, t, s) {
|
|
183
186
|
setSelectedRows({
|
|
184
187
|
selectedRows: selectedRows
|
|
185
188
|
});
|
|
@@ -188,7 +191,7 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
188
191
|
},
|
|
189
192
|
onRow: function onRow(record) {
|
|
190
193
|
return {
|
|
191
|
-
onClick: function onClick() {
|
|
194
|
+
onClick: function onClick(e) {
|
|
192
195
|
onRecord(record);
|
|
193
196
|
},
|
|
194
197
|
onDoubleClick: function onDoubleClick() {
|
|
@@ -239,10 +242,10 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
239
242
|
}
|
|
240
243
|
});
|
|
241
244
|
setColumnsStateMap(obj);
|
|
242
|
-
}, []);
|
|
243
|
-
(
|
|
244
|
-
|
|
245
|
-
|
|
245
|
+
}, []); // useEffect(() => {
|
|
246
|
+
// rowClick?.()
|
|
247
|
+
// }, [useSelectedRows])
|
|
248
|
+
// 将节点方法给外部使用
|
|
246
249
|
|
|
247
250
|
_react.default.useImperativeHandle(ref, function () {
|
|
248
251
|
return {
|
|
@@ -251,9 +254,16 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
251
254
|
},
|
|
252
255
|
// 用于按钮触发事件
|
|
253
256
|
clearSelect: function clearSelect() {
|
|
254
|
-
|
|
257
|
+
setSelectedRows({
|
|
255
258
|
selectedRows: []
|
|
256
259
|
});
|
|
260
|
+
rowClick === null || rowClick === void 0 ? void 0 : rowClick([]);
|
|
261
|
+
},
|
|
262
|
+
customSetCheckboxRecords: function customSetCheckboxRecords(value) {
|
|
263
|
+
setSelectedRows({
|
|
264
|
+
selectedRows: value
|
|
265
|
+
});
|
|
266
|
+
rowClick === null || rowClick === void 0 ? void 0 : rowClick(value);
|
|
257
267
|
}
|
|
258
268
|
};
|
|
259
269
|
}); // loading触发清空选中状态
|
|
@@ -272,12 +282,14 @@ var ResetTable = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
272
282
|
}, /*#__PURE__*/_react.default.createElement(_proTable.default, (0, _extends2.default)({}, config, {
|
|
273
283
|
loading: loading,
|
|
274
284
|
dataSource: dataSource,
|
|
275
|
-
components: vComponents,
|
|
285
|
+
components: virtual ? vComponents : null,
|
|
276
286
|
tableClassName: "lm_protable",
|
|
277
287
|
summary: function summary(pageData) {
|
|
278
288
|
return _summary && _summary(pageData, resultColumns);
|
|
279
289
|
}
|
|
280
|
-
}))
|
|
290
|
+
})), !!customCheck && /*#__PURE__*/_react.default.createElement("div", {
|
|
291
|
+
className: "lm_customCheck"
|
|
292
|
+
}, customCheck));
|
|
281
293
|
}); // 监听大小: 这里的高度是整个表格的高度,表体需要减去列头和分页的高度
|
|
282
294
|
|
|
283
295
|
var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
@@ -285,6 +297,7 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
285
297
|
var throttleSize = (0, _lodash.throttle)(function (_ref) {
|
|
286
298
|
var height = _ref.height,
|
|
287
299
|
width = _ref.width;
|
|
300
|
+
console.log(height, width, 444);
|
|
288
301
|
|
|
289
302
|
var resetHeight = function resetHeight() {
|
|
290
303
|
var h = height - 48;
|
|
@@ -0,0 +1,170 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
|
|
4
|
+
|
|
5
|
+
Object.defineProperty(exports, "__esModule", {
|
|
6
|
+
value: true
|
|
7
|
+
});
|
|
8
|
+
exports.default = void 0;
|
|
9
|
+
|
|
10
|
+
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
|
|
11
|
+
|
|
12
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/classCallCheck"));
|
|
13
|
+
|
|
14
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createClass"));
|
|
15
|
+
|
|
16
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/inherits"));
|
|
17
|
+
|
|
18
|
+
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/createSuper"));
|
|
19
|
+
|
|
20
|
+
var _lodash = require("lodash");
|
|
21
|
+
|
|
22
|
+
var _react = _interopRequireDefault(require("react"));
|
|
23
|
+
|
|
24
|
+
var _detectElementResize = _interopRequireDefault(require("./detectElementResize"));
|
|
25
|
+
|
|
26
|
+
var AutoSizer = /*#__PURE__*/function (_React$Component) {
|
|
27
|
+
(0, _inherits2.default)(AutoSizer, _React$Component);
|
|
28
|
+
|
|
29
|
+
var _super = (0, _createSuper2.default)(AutoSizer);
|
|
30
|
+
|
|
31
|
+
function AutoSizer() {
|
|
32
|
+
var _this;
|
|
33
|
+
|
|
34
|
+
(0, _classCallCheck2.default)(this, AutoSizer);
|
|
35
|
+
|
|
36
|
+
for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
|
|
37
|
+
args[_key] = arguments[_key];
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
_this = _super.call.apply(_super, [this].concat(args));
|
|
41
|
+
_this.state = {
|
|
42
|
+
height: _this.props.defaultHeight || 0,
|
|
43
|
+
width: _this.props.defaultWidth || 0
|
|
44
|
+
};
|
|
45
|
+
_this._parentNode = void 0;
|
|
46
|
+
_this._autoSizer = void 0;
|
|
47
|
+
_this._window = void 0;
|
|
48
|
+
_this._detectElementResize = void 0;
|
|
49
|
+
|
|
50
|
+
_this._onResize = function () {
|
|
51
|
+
console.log(11);
|
|
52
|
+
var _this$props = _this.props,
|
|
53
|
+
disableHeight = _this$props.disableHeight,
|
|
54
|
+
disableWidth = _this$props.disableWidth,
|
|
55
|
+
onResize = _this$props.onResize;
|
|
56
|
+
|
|
57
|
+
if (_this._parentNode) {
|
|
58
|
+
// Guard against AutoSizer component being removed from the DOM immediately after being added.
|
|
59
|
+
// This can result in invalid style values which can result in NaN values if we don't handle them.
|
|
60
|
+
// See issue #150 for more context.
|
|
61
|
+
var height = _this._parentNode.offsetHeight || 0;
|
|
62
|
+
var width = _this._parentNode.offsetWidth || 0;
|
|
63
|
+
var win = _this._window || window;
|
|
64
|
+
var style = win.getComputedStyle(_this._parentNode) || {};
|
|
65
|
+
var paddingLeft = parseInt(style.paddingLeft, 10) || 0;
|
|
66
|
+
var paddingRight = parseInt(style.paddingRight, 10) || 0;
|
|
67
|
+
var paddingTop = parseInt(style.paddingTop, 10) || 0;
|
|
68
|
+
var paddingBottom = parseInt(style.paddingBottom, 10) || 0;
|
|
69
|
+
var newHeight = height - paddingTop - paddingBottom;
|
|
70
|
+
var newWidth = width - paddingLeft - paddingRight;
|
|
71
|
+
|
|
72
|
+
if (!disableHeight && _this.state.height !== newHeight || !disableWidth && _this.state.width !== newWidth) {
|
|
73
|
+
_this.setState({
|
|
74
|
+
height: height - paddingTop - paddingBottom,
|
|
75
|
+
width: width - paddingLeft - paddingRight
|
|
76
|
+
});
|
|
77
|
+
|
|
78
|
+
onResize({
|
|
79
|
+
height: height,
|
|
80
|
+
width: width
|
|
81
|
+
});
|
|
82
|
+
}
|
|
83
|
+
}
|
|
84
|
+
};
|
|
85
|
+
|
|
86
|
+
_this.handleResize = (0, _lodash.debounce)(_this._onResize, 800);
|
|
87
|
+
|
|
88
|
+
_this._setRef = function (autoSizer) {
|
|
89
|
+
_this._autoSizer = autoSizer;
|
|
90
|
+
};
|
|
91
|
+
|
|
92
|
+
return _this;
|
|
93
|
+
}
|
|
94
|
+
|
|
95
|
+
(0, _createClass2.default)(AutoSizer, [{
|
|
96
|
+
key: "componentDidMount",
|
|
97
|
+
value: function componentDidMount() {
|
|
98
|
+
var nonce = this.props.nonce;
|
|
99
|
+
|
|
100
|
+
if (this._autoSizer && this._autoSizer.parentNode && this._autoSizer.parentNode.ownerDocument && this._autoSizer.parentNode.ownerDocument.defaultView && this._autoSizer.parentNode instanceof this._autoSizer.parentNode.ownerDocument.defaultView.HTMLElement) {
|
|
101
|
+
// Delay access of parentNode until mount.
|
|
102
|
+
// This handles edge-cases where the component has already been unmounted before its ref has been set,
|
|
103
|
+
// As well as libraries like react-lite which have a slightly different lifecycle.
|
|
104
|
+
this._parentNode = this._autoSizer.parentNode;
|
|
105
|
+
this._window = this._autoSizer.parentNode.ownerDocument.defaultView; // Defer requiring resize handler in order to support server-side rendering.
|
|
106
|
+
// See issue #41
|
|
107
|
+
|
|
108
|
+
this._detectElementResize = (0, _detectElementResize.default)(nonce, this._window);
|
|
109
|
+
|
|
110
|
+
this._detectElementResize.addResizeListener(this._parentNode, this.handleResize);
|
|
111
|
+
|
|
112
|
+
console.log(3);
|
|
113
|
+
|
|
114
|
+
this._onResize();
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
}, {
|
|
118
|
+
key: "componentWillUnmount",
|
|
119
|
+
value: function componentWillUnmount() {
|
|
120
|
+
if (this._detectElementResize && this._parentNode) {
|
|
121
|
+
this._detectElementResize.removeResizeListener(this._parentNode, this._onResize);
|
|
122
|
+
}
|
|
123
|
+
}
|
|
124
|
+
}, {
|
|
125
|
+
key: "render",
|
|
126
|
+
value: function render() {
|
|
127
|
+
var _this$props2 = this.props,
|
|
128
|
+
children = _this$props2.children,
|
|
129
|
+
className = _this$props2.className,
|
|
130
|
+
disableHeight = _this$props2.disableHeight,
|
|
131
|
+
disableWidth = _this$props2.disableWidth,
|
|
132
|
+
style = _this$props2.style;
|
|
133
|
+
var _this$state = this.state,
|
|
134
|
+
height = _this$state.height,
|
|
135
|
+
width = _this$state.width; // Outer div should not force width/height since that may prevent containers from shrinking.
|
|
136
|
+
// Inner component should overflow and use calculated width/height.
|
|
137
|
+
// See issue #68 for more information.
|
|
138
|
+
|
|
139
|
+
var outerStyle = {
|
|
140
|
+
overflow: 'visible'
|
|
141
|
+
};
|
|
142
|
+
var childParams = {};
|
|
143
|
+
|
|
144
|
+
if (!disableHeight) {
|
|
145
|
+
outerStyle.height = 0;
|
|
146
|
+
childParams.height = height;
|
|
147
|
+
}
|
|
148
|
+
|
|
149
|
+
if (!disableWidth) {
|
|
150
|
+
outerStyle.width = 0;
|
|
151
|
+
childParams.width = width;
|
|
152
|
+
}
|
|
153
|
+
|
|
154
|
+
return /*#__PURE__*/_react.default.createElement("div", {
|
|
155
|
+
className: className,
|
|
156
|
+
ref: this._setRef,
|
|
157
|
+
style: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, outerStyle), style)
|
|
158
|
+
}, children(childParams));
|
|
159
|
+
}
|
|
160
|
+
}]);
|
|
161
|
+
return AutoSizer;
|
|
162
|
+
}(_react.default.Component);
|
|
163
|
+
|
|
164
|
+
exports.default = AutoSizer;
|
|
165
|
+
AutoSizer.defaultProps = {
|
|
166
|
+
onResize: function onResize() {},
|
|
167
|
+
disableHeight: false,
|
|
168
|
+
disableWidth: false,
|
|
169
|
+
style: {}
|
|
170
|
+
};
|