linkmore-design 1.0.15 → 1.0.16
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 +1756 -730
- package/dist/index.umd.min.js +6 -6
- 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 +153 -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 +69 -27
- package/es/ProTable/Table.js +5 -3
- package/es/ProTable/autosize.js +170 -0
- package/es/ProTable/detectElementResize.js +225 -0
- 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 +153 -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 +69 -27
- package/lib/ProTable/Table.js +5 -3
- package/lib/ProTable/autosize.js +170 -0
- package/lib/ProTable/detectElementResize.js +225 -0
- package/package.json +1 -1
package/lib/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,61 +675,61 @@ 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;
|
|
706
709
|
font-size: 12px;
|
|
707
|
-
min-height:
|
|
710
|
+
min-height: 32px;
|
|
708
711
|
padding: 6px 8px;
|
|
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;
|
package/lib/ProTable/Table.js
CHANGED
|
@@ -25,7 +25,7 @@ var _lodash = require("lodash");
|
|
|
25
25
|
|
|
26
26
|
var _react = _interopRequireWildcard(require("react"));
|
|
27
27
|
|
|
28
|
-
var
|
|
28
|
+
var _autosize = _interopRequireDefault(require("./autosize"));
|
|
29
29
|
|
|
30
30
|
var _context = _interopRequireDefault(require("./context"));
|
|
31
31
|
|
|
@@ -295,6 +295,7 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
295
295
|
var throttleSize = (0, _lodash.throttle)(function (_ref) {
|
|
296
296
|
var height = _ref.height,
|
|
297
297
|
width = _ref.width;
|
|
298
|
+
console.log(height, width, 444);
|
|
298
299
|
|
|
299
300
|
var resetHeight = function resetHeight() {
|
|
300
301
|
var h = height - 48;
|
|
@@ -321,11 +322,12 @@ var ResizeSize = /*#__PURE__*/(0, _react.forwardRef)(function (props, ref) {
|
|
|
321
322
|
}
|
|
322
323
|
}));
|
|
323
324
|
}, 100);
|
|
324
|
-
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(
|
|
325
|
+
return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_autosize.default, {
|
|
325
326
|
style: {
|
|
326
327
|
width: '100%',
|
|
327
328
|
height: '100%'
|
|
328
|
-
}
|
|
329
|
+
},
|
|
330
|
+
disableWidth: true
|
|
329
331
|
}, throttleSize));
|
|
330
332
|
});
|
|
331
333
|
var _default = ResizeSize;
|
|
@@ -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/objectSpread2"));
|
|
11
|
+
|
|
12
|
+
var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
|
|
13
|
+
|
|
14
|
+
var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
|
|
15
|
+
|
|
16
|
+
var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
|
|
17
|
+
|
|
18
|
+
var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/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
|
+
};
|
|
@@ -0,0 +1,225 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = createDetectElementResize;
|
|
7
|
+
|
|
8
|
+
/**
|
|
9
|
+
* Detect Element Resize.
|
|
10
|
+
* https://github.com/sdecima/javascript-detect-element-resize
|
|
11
|
+
* Sebastian Decima
|
|
12
|
+
*
|
|
13
|
+
* Forked from version 0.5.3; includes the following modifications:
|
|
14
|
+
* 1) Guard against unsafe 'window' and 'document' references (to support SSR).
|
|
15
|
+
* 2) Defer initialization code via a top-level function wrapper (to support SSR).
|
|
16
|
+
* 3) Avoid unnecessary reflows by not measuring size for scroll events bubbling from children.
|
|
17
|
+
* 4) Add nonce for style element.
|
|
18
|
+
* 5) Added support for injecting custom window object
|
|
19
|
+
**/
|
|
20
|
+
function createDetectElementResize(nonce, hostWindow) {
|
|
21
|
+
// Check `document` and `window` in case of server-side rendering
|
|
22
|
+
var _window;
|
|
23
|
+
|
|
24
|
+
if (typeof hostWindow !== 'undefined') {
|
|
25
|
+
_window = hostWindow;
|
|
26
|
+
} else if (typeof window !== 'undefined') {
|
|
27
|
+
_window = window;
|
|
28
|
+
} else if (typeof self !== 'undefined') {
|
|
29
|
+
_window = self;
|
|
30
|
+
} else {
|
|
31
|
+
_window = global;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
var attachEvent = typeof _window.document !== 'undefined' && _window.document.attachEvent;
|
|
35
|
+
|
|
36
|
+
if (!attachEvent) {
|
|
37
|
+
var requestFrame = function () {
|
|
38
|
+
var raf = _window.requestAnimationFrame || _window.mozRequestAnimationFrame || _window.webkitRequestAnimationFrame || function (fn) {
|
|
39
|
+
return _window.setTimeout(fn, 20);
|
|
40
|
+
};
|
|
41
|
+
|
|
42
|
+
return function (fn) {
|
|
43
|
+
return raf(fn);
|
|
44
|
+
};
|
|
45
|
+
}();
|
|
46
|
+
|
|
47
|
+
var cancelFrame = function () {
|
|
48
|
+
var cancel = _window.cancelAnimationFrame || _window.mozCancelAnimationFrame || _window.webkitCancelAnimationFrame || _window.clearTimeout;
|
|
49
|
+
return function (id) {
|
|
50
|
+
return cancel(id);
|
|
51
|
+
};
|
|
52
|
+
}();
|
|
53
|
+
|
|
54
|
+
var resetTriggers = function resetTriggers(element) {
|
|
55
|
+
var triggers = element.__resizeTriggers__,
|
|
56
|
+
expand = triggers.firstElementChild,
|
|
57
|
+
contract = triggers.lastElementChild,
|
|
58
|
+
expandChild = expand.firstElementChild;
|
|
59
|
+
contract.scrollLeft = contract.scrollWidth;
|
|
60
|
+
contract.scrollTop = contract.scrollHeight;
|
|
61
|
+
expandChild.style.width = expand.offsetWidth + 1 + 'px';
|
|
62
|
+
expandChild.style.height = expand.offsetHeight + 1 + 'px';
|
|
63
|
+
expand.scrollLeft = expand.scrollWidth;
|
|
64
|
+
expand.scrollTop = expand.scrollHeight;
|
|
65
|
+
};
|
|
66
|
+
|
|
67
|
+
var checkTriggers = function checkTriggers(element) {
|
|
68
|
+
return element.offsetWidth != element.__resizeLast__.width || element.offsetHeight != element.__resizeLast__.height;
|
|
69
|
+
};
|
|
70
|
+
|
|
71
|
+
var scrollListener = function scrollListener(e) {
|
|
72
|
+
// Don't measure (which forces) reflow for scrolls that happen inside of children!
|
|
73
|
+
if (e.target.className && typeof e.target.className.indexOf === 'function' && e.target.className.indexOf('contract-trigger') < 0 && e.target.className.indexOf('expand-trigger') < 0) {
|
|
74
|
+
return;
|
|
75
|
+
}
|
|
76
|
+
|
|
77
|
+
var element = this;
|
|
78
|
+
resetTriggers(this);
|
|
79
|
+
|
|
80
|
+
if (this.__resizeRAF__) {
|
|
81
|
+
cancelFrame(this.__resizeRAF__);
|
|
82
|
+
}
|
|
83
|
+
|
|
84
|
+
this.__resizeRAF__ = requestFrame(function () {
|
|
85
|
+
if (checkTriggers(element)) {
|
|
86
|
+
element.__resizeLast__.width = element.offsetWidth;
|
|
87
|
+
element.__resizeLast__.height = element.offsetHeight;
|
|
88
|
+
|
|
89
|
+
element.__resizeListeners__.forEach(function (fn) {
|
|
90
|
+
fn.call(element, e);
|
|
91
|
+
});
|
|
92
|
+
}
|
|
93
|
+
});
|
|
94
|
+
};
|
|
95
|
+
/* Detect CSS Animations support to detect element display/re-attach */
|
|
96
|
+
|
|
97
|
+
|
|
98
|
+
var animation = false,
|
|
99
|
+
keyframeprefix = '',
|
|
100
|
+
animationstartevent = 'animationstart',
|
|
101
|
+
domPrefixes = 'Webkit Moz O ms'.split(' '),
|
|
102
|
+
startEvents = 'webkitAnimationStart animationstart oAnimationStart MSAnimationStart'.split(' '),
|
|
103
|
+
pfx = '';
|
|
104
|
+
{
|
|
105
|
+
var elm = _window.document.createElement('fakeelement');
|
|
106
|
+
|
|
107
|
+
if (elm.style.animationName !== undefined) {
|
|
108
|
+
animation = true;
|
|
109
|
+
}
|
|
110
|
+
|
|
111
|
+
if (animation === false) {
|
|
112
|
+
for (var i = 0; i < domPrefixes.length; i++) {
|
|
113
|
+
if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
|
|
114
|
+
pfx = domPrefixes[i];
|
|
115
|
+
keyframeprefix = '-' + pfx.toLowerCase() + '-';
|
|
116
|
+
animationstartevent = startEvents[i];
|
|
117
|
+
animation = true;
|
|
118
|
+
break;
|
|
119
|
+
}
|
|
120
|
+
}
|
|
121
|
+
}
|
|
122
|
+
}
|
|
123
|
+
var animationName = 'resizeanim';
|
|
124
|
+
var animationKeyframes = '@' + keyframeprefix + 'keyframes ' + animationName + ' { from { opacity: 0; } to { opacity: 0; } } ';
|
|
125
|
+
var animationStyle = keyframeprefix + 'animation: 1ms ' + animationName + '; ';
|
|
126
|
+
}
|
|
127
|
+
|
|
128
|
+
var createStyles = function createStyles(doc) {
|
|
129
|
+
if (!doc.getElementById('detectElementResize')) {
|
|
130
|
+
//opacity:0 works around a chrome bug https://code.google.com/p/chromium/issues/detail?id=286360
|
|
131
|
+
var css = (animationKeyframes ? animationKeyframes : '') + '.resize-triggers { ' + (animationStyle ? animationStyle : '') + 'visibility: hidden; opacity: 0; } ' + '.resize-triggers, .resize-triggers > div, .contract-trigger:before { content: " "; display: block; position: absolute; top: 0; left: 0; height: 100%; width: 100%; overflow: hidden; z-index: -1; } .resize-triggers > div { background: #eee; overflow: auto; } .contract-trigger:before { width: 200%; height: 200%; }',
|
|
132
|
+
head = doc.head || doc.getElementsByTagName('head')[0],
|
|
133
|
+
style = doc.createElement('style');
|
|
134
|
+
style.id = 'detectElementResize';
|
|
135
|
+
style.type = 'text/css';
|
|
136
|
+
|
|
137
|
+
if (nonce != null) {
|
|
138
|
+
style.setAttribute('nonce', nonce);
|
|
139
|
+
}
|
|
140
|
+
|
|
141
|
+
if (style.styleSheet) {
|
|
142
|
+
style.styleSheet.cssText = css;
|
|
143
|
+
} else {
|
|
144
|
+
style.appendChild(doc.createTextNode(css));
|
|
145
|
+
}
|
|
146
|
+
|
|
147
|
+
head.appendChild(style);
|
|
148
|
+
}
|
|
149
|
+
};
|
|
150
|
+
|
|
151
|
+
var addResizeListener = function addResizeListener(element, fn) {
|
|
152
|
+
if (attachEvent) {
|
|
153
|
+
element.attachEvent('onresize', fn);
|
|
154
|
+
} else {
|
|
155
|
+
if (!element.__resizeTriggers__) {
|
|
156
|
+
var doc = element.ownerDocument;
|
|
157
|
+
|
|
158
|
+
var elementStyle = _window.getComputedStyle(element);
|
|
159
|
+
|
|
160
|
+
if (elementStyle && elementStyle.position == 'static') {
|
|
161
|
+
element.style.position = 'relative';
|
|
162
|
+
}
|
|
163
|
+
|
|
164
|
+
createStyles(doc);
|
|
165
|
+
element.__resizeLast__ = {};
|
|
166
|
+
element.__resizeListeners__ = [];
|
|
167
|
+
(element.__resizeTriggers__ = doc.createElement('div')).className = 'resize-triggers';
|
|
168
|
+
var expandTrigger = doc.createElement('div');
|
|
169
|
+
expandTrigger.className = 'expand-trigger';
|
|
170
|
+
expandTrigger.appendChild(doc.createElement('div'));
|
|
171
|
+
var contractTrigger = doc.createElement('div');
|
|
172
|
+
contractTrigger.className = 'contract-trigger';
|
|
173
|
+
|
|
174
|
+
element.__resizeTriggers__.appendChild(expandTrigger);
|
|
175
|
+
|
|
176
|
+
element.__resizeTriggers__.appendChild(contractTrigger);
|
|
177
|
+
|
|
178
|
+
element.appendChild(element.__resizeTriggers__);
|
|
179
|
+
resetTriggers(element);
|
|
180
|
+
element.addEventListener('scroll', scrollListener, true);
|
|
181
|
+
/* Listen for a css animation to detect element display/re-attach */
|
|
182
|
+
|
|
183
|
+
if (animationstartevent) {
|
|
184
|
+
element.__resizeTriggers__.__animationListener__ = function animationListener(e) {
|
|
185
|
+
if (e.animationName == animationName) {
|
|
186
|
+
resetTriggers(element);
|
|
187
|
+
}
|
|
188
|
+
};
|
|
189
|
+
|
|
190
|
+
element.__resizeTriggers__.addEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
|
|
191
|
+
}
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
element.__resizeListeners__.push(fn);
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
|
|
198
|
+
var removeResizeListener = function removeResizeListener(element, fn) {
|
|
199
|
+
if (attachEvent) {
|
|
200
|
+
element.detachEvent('onresize', fn);
|
|
201
|
+
} else {
|
|
202
|
+
element.__resizeListeners__.splice(element.__resizeListeners__.indexOf(fn), 1);
|
|
203
|
+
|
|
204
|
+
if (!element.__resizeListeners__.length) {
|
|
205
|
+
element.removeEventListener('scroll', scrollListener, true);
|
|
206
|
+
|
|
207
|
+
if (element.__resizeTriggers__.__animationListener__) {
|
|
208
|
+
element.__resizeTriggers__.removeEventListener(animationstartevent, element.__resizeTriggers__.__animationListener__);
|
|
209
|
+
|
|
210
|
+
element.__resizeTriggers__.__animationListener__ = null;
|
|
211
|
+
}
|
|
212
|
+
|
|
213
|
+
try {
|
|
214
|
+
element.__resizeTriggers__ = !element.removeChild(element.__resizeTriggers__);
|
|
215
|
+
} catch (e) {// Preact compat; see developit/preact-compat/issues/228
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
};
|
|
220
|
+
|
|
221
|
+
return {
|
|
222
|
+
addResizeListener: addResizeListener,
|
|
223
|
+
removeResizeListener: removeResizeListener
|
|
224
|
+
};
|
|
225
|
+
}
|