@skbkontur/react-ui 4.0.0-beta.5 → 4.0.0
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/CHANGELOG.md +81 -0
- package/cjs/components/GlobalLoader/GlobalLoader.d.ts +1 -1
- package/cjs/components/GlobalLoader/GlobalLoader.js.map +1 -1
- package/cjs/components/GlobalLoader/GlobalLoader.md +13 -3
- package/cjs/components/GlobalLoader/GlobalLoaderView.js +6 -3
- package/cjs/components/GlobalLoader/GlobalLoaderView.js.map +1 -1
- package/cjs/components/GlobalLoader/GlobalLoaderView.styles.d.ts +3 -2
- package/cjs/components/GlobalLoader/GlobalLoaderView.styles.js +59 -12
- package/cjs/components/GlobalLoader/GlobalLoaderView.styles.js.map +1 -1
- package/cjs/components/GlobalLoader/useParams.d.ts +1 -0
- package/cjs/components/GlobalLoader/useParams.js +3 -2
- package/cjs/components/GlobalLoader/useParams.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollBar.js +4 -2
- package/cjs/components/ScrollContainer/ScrollBar.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.js +2 -1
- package/cjs/components/ScrollContainer/ScrollContainer.js.map +1 -1
- package/cjs/components/ScrollContainer/ScrollContainer.styles.d.ts +1 -0
- package/cjs/components/ScrollContainer/ScrollContainer.styles.js +12 -8
- package/cjs/components/ScrollContainer/ScrollContainer.styles.js.map +1 -1
- package/cjs/components/Select/Select.js +4 -1
- package/cjs/components/Select/Select.js.map +1 -1
- package/cjs/components/SidePage/SidePage.d.ts +5 -1
- package/cjs/components/SidePage/SidePage.js +31 -9
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/cjs/components/SidePage/SidePageContext.d.ts +2 -0
- package/cjs/components/SidePage/SidePageContext.js +3 -0
- package/cjs/components/SidePage/SidePageContext.js.map +1 -1
- package/cjs/components/SidePage/SidePageHeader.d.ts +3 -0
- package/cjs/components/SidePage/SidePageHeader.js +36 -26
- package/cjs/components/SidePage/SidePageHeader.js.map +1 -1
- package/cjs/components/Sticky/Sticky.d.ts +6 -1
- package/cjs/components/Sticky/Sticky.js +5 -0
- package/cjs/components/Sticky/Sticky.js.map +1 -1
- package/cjs/internal/DropdownContainer/DropdownContainer.d.ts +1 -0
- package/cjs/internal/DropdownContainer/DropdownContainer.js +15 -2
- package/cjs/internal/DropdownContainer/DropdownContainer.js.map +1 -1
- package/cjs/internal/DropdownContainer/DropdownContainer.styles.d.ts +3 -0
- package/cjs/internal/DropdownContainer/DropdownContainer.styles.js +9 -0
- package/cjs/internal/DropdownContainer/DropdownContainer.styles.js.map +1 -0
- package/cjs/internal/Menu/Menu.d.ts +2 -0
- package/cjs/internal/Menu/Menu.js +33 -3
- package/cjs/internal/Menu/Menu.js.map +1 -1
- package/cjs/internal/Menu/Menu.styles.d.ts +3 -0
- package/cjs/internal/Menu/Menu.styles.js +23 -3
- package/cjs/internal/Menu/Menu.styles.js.map +1 -1
- package/cjs/internal/Popup/Popup.js +3 -1
- package/cjs/internal/Popup/Popup.js.map +1 -1
- package/cjs/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/cjs/internal/themes/DefaultTheme.d.ts +3 -1
- package/cjs/internal/themes/DefaultTheme.js +3 -1
- package/cjs/internal/themes/DefaultTheme.js.map +1 -1
- package/components/GlobalLoader/GlobalLoader/GlobalLoader.js.map +1 -1
- package/components/GlobalLoader/GlobalLoader.d.ts +1 -1
- package/components/GlobalLoader/GlobalLoader.md +13 -3
- package/components/GlobalLoader/GlobalLoaderView/GlobalLoaderView.js +8 -3
- package/components/GlobalLoader/GlobalLoaderView/GlobalLoaderView.js.map +1 -1
- package/components/GlobalLoader/GlobalLoaderView.styles/GlobalLoaderView.styles.js +19 -10
- package/components/GlobalLoader/GlobalLoaderView.styles/GlobalLoaderView.styles.js.map +1 -1
- package/components/GlobalLoader/GlobalLoaderView.styles.d.ts +3 -2
- package/components/GlobalLoader/useParams/useParams.js +5 -1
- package/components/GlobalLoader/useParams/useParams.js.map +1 -1
- package/components/GlobalLoader/useParams.d.ts +1 -0
- package/components/ScrollContainer/ScrollBar/ScrollBar.js +6 -2
- package/components/ScrollContainer/ScrollBar/ScrollBar.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js +2 -1
- package/components/ScrollContainer/ScrollContainer/ScrollContainer.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js +11 -8
- package/components/ScrollContainer/ScrollContainer.styles/ScrollContainer.styles.js.map +1 -1
- package/components/ScrollContainer/ScrollContainer.styles.d.ts +1 -0
- package/components/Select/Select/Select.js +5 -2
- package/components/Select/Select/Select.js.map +1 -1
- package/components/SidePage/SidePage/SidePage.js +37 -11
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +5 -1
- package/components/SidePage/SidePageContext/SidePageContext.js +3 -0
- package/components/SidePage/SidePageContext/SidePageContext.js.map +1 -1
- package/components/SidePage/SidePageContext.d.ts +2 -0
- package/components/SidePage/SidePageHeader/SidePageHeader.js +26 -13
- package/components/SidePage/SidePageHeader/SidePageHeader.js.map +1 -1
- package/components/SidePage/SidePageHeader.d.ts +3 -0
- package/components/Sticky/Sticky/Sticky.js.map +1 -1
- package/components/Sticky/Sticky.d.ts +6 -1
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js +9 -2
- package/internal/DropdownContainer/DropdownContainer/DropdownContainer.js.map +1 -1
- package/internal/DropdownContainer/DropdownContainer.d.ts +1 -0
- package/internal/DropdownContainer/DropdownContainer.styles/DropdownContainer.styles.js +10 -0
- package/internal/DropdownContainer/DropdownContainer.styles/DropdownContainer.styles.js.map +1 -0
- package/internal/DropdownContainer/DropdownContainer.styles/package.json +6 -0
- package/internal/DropdownContainer/DropdownContainer.styles.d.ts +3 -0
- package/internal/Menu/Menu/Menu.js +30 -6
- package/internal/Menu/Menu/Menu.js.map +1 -1
- package/internal/Menu/Menu.d.ts +2 -0
- package/internal/Menu/Menu.styles/Menu.styles.js +12 -3
- package/internal/Menu/Menu.styles/Menu.styles.js.map +1 -1
- package/internal/Menu/Menu.styles.d.ts +3 -0
- package/internal/Popup/Popup/Popup.js +2 -1
- package/internal/Popup/Popup/Popup.js.map +1 -1
- package/internal/ThemeShowcase/VariablesCollector.d.ts +1 -1
- package/internal/themes/DefaultTheme/DefaultTheme.js +3 -1
- package/internal/themes/DefaultTheme/DefaultTheme.js.map +1 -1
- package/internal/themes/DefaultTheme.d.ts +3 -1
- package/package.json +7 -3
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/esm/extends";
|
|
2
2
|
import _createClass from "@babel/runtime/helpers/esm/createClass";
|
|
3
|
+
import _assertThisInitialized from "@babel/runtime/helpers/esm/assertThisInitialized";
|
|
3
4
|
import _inheritsLoose from "@babel/runtime/helpers/esm/inheritsLoose";
|
|
4
5
|
|
|
5
6
|
var _class, _class2, _temp;
|
|
@@ -39,19 +40,28 @@ var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class
|
|
|
39
40
|
focusedByTab: false
|
|
40
41
|
};
|
|
41
42
|
_this.wrapper = null;
|
|
43
|
+
_this.sticky = null;
|
|
42
44
|
_this.lastRegularHeight = 0;
|
|
43
45
|
|
|
44
46
|
_this.componentDidMount = function () {
|
|
45
47
|
window.addEventListener('scroll', _this.update, true);
|
|
46
48
|
_this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader();
|
|
49
|
+
|
|
50
|
+
_this.context.headerRef(_assertThisInitialized(_this));
|
|
47
51
|
};
|
|
48
52
|
|
|
49
53
|
_this.componentWillUnmount = function () {
|
|
50
54
|
window.removeEventListener('scroll', _this.update, true);
|
|
51
55
|
_this.context.setHasHeader == null ? void 0 : _this.context.setHasHeader(false);
|
|
56
|
+
|
|
57
|
+
_this.context.headerRef(null);
|
|
52
58
|
};
|
|
53
59
|
|
|
54
60
|
_this.update = function () {
|
|
61
|
+
var _this$sticky;
|
|
62
|
+
|
|
63
|
+
(_this$sticky = _this.sticky) == null ? void 0 : _this$sticky.reflow();
|
|
64
|
+
|
|
55
65
|
_this.updateReadyToFix();
|
|
56
66
|
};
|
|
57
67
|
|
|
@@ -75,28 +85,26 @@ var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class
|
|
|
75
85
|
var stickyOffset = parseInt(_this.theme.sidePageHeaderStickyOffset);
|
|
76
86
|
return /*#__PURE__*/React.createElement("div", {
|
|
77
87
|
className: cx(styles.wrapperClose(_this.theme), (_cx3 = {}, _cx3[styles.wrapperCloseFixed(_this.theme)] = fixed, _cx3[styles.mobileWrapperClose(_this.theme)] = _this.isMobileLayout, _cx3))
|
|
78
|
-
}, /*#__PURE__*/React.createElement(
|
|
88
|
+
}, _this.isMobileLayout ? _this.closeIcon : /*#__PURE__*/React.createElement(Sticky, {
|
|
89
|
+
side: "top",
|
|
90
|
+
offset: stickyOffset
|
|
91
|
+
}, _this.closeIcon));
|
|
92
|
+
};
|
|
93
|
+
|
|
94
|
+
_this.closeIcon = function () {
|
|
95
|
+
return /*#__PURE__*/React.createElement(SidePageContext.Consumer, null, function (_ref) {
|
|
79
96
|
var _cx4;
|
|
80
97
|
|
|
81
98
|
var requestClose = _ref.requestClose;
|
|
82
|
-
|
|
83
|
-
className: cx(styles.close(_this.theme), (_cx4 = {}, _cx4[styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx4
|
|
99
|
+
return /*#__PURE__*/React.createElement("button", {
|
|
100
|
+
className: cx(styles.close(_this.theme), (_cx4 = {}, _cx4[styles.closeFocus(_this.theme)] = _this.state.focusedByTab, _cx4)),
|
|
84
101
|
onFocus: _this.handleFocus,
|
|
85
102
|
onBlur: _this.handleBlur,
|
|
86
103
|
onClick: requestClose,
|
|
87
104
|
"data-tid": "SidePage__close",
|
|
88
105
|
tabIndex: 0
|
|
89
106
|
}, /*#__PURE__*/React.createElement(CrossIcon, null));
|
|
90
|
-
|
|
91
|
-
if (_this.isMobileLayout) {
|
|
92
|
-
return button;
|
|
93
|
-
}
|
|
94
|
-
|
|
95
|
-
return /*#__PURE__*/React.createElement(Sticky, {
|
|
96
|
-
side: "top",
|
|
97
|
-
offset: stickyOffset
|
|
98
|
-
}, button);
|
|
99
|
-
}));
|
|
107
|
+
});
|
|
100
108
|
};
|
|
101
109
|
|
|
102
110
|
_this.updateReadyToFix = function () {
|
|
@@ -117,6 +125,10 @@ var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class
|
|
|
117
125
|
_this.wrapper = el;
|
|
118
126
|
};
|
|
119
127
|
|
|
128
|
+
_this.stickyRef = function (el) {
|
|
129
|
+
_this.sticky = el;
|
|
130
|
+
};
|
|
131
|
+
|
|
120
132
|
_this.handleFocus = function () {
|
|
121
133
|
requestAnimationFrame(function () {
|
|
122
134
|
if (keyListener.isTabPressed) {
|
|
@@ -169,6 +181,7 @@ var SidePageHeader = responsiveLayout(_class = rootNode(_class = (_temp = _class
|
|
|
169
181
|
ref: this.wrapperRef,
|
|
170
182
|
className: styles.headerWrapper()
|
|
171
183
|
}, isStickyDesktop || isStickyMobile ? /*#__PURE__*/React.createElement(Sticky, {
|
|
184
|
+
ref: this.stickyRef,
|
|
172
185
|
side: "top"
|
|
173
186
|
}, this.renderHeader) : this.renderHeader()));
|
|
174
187
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","responsiveLayout","rootNode","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","focusedByTab","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","requestClose","button","close","closeFocus","mobileClose","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","requestAnimationFrame","isTabPressed","render","renderMain","getStickyProp","sticky","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"6NAAA,OAAOA,KAAP,MAAkB,OAAlB;;AAEA,SAASC,MAAT,QAAuB,WAAvB;AACA,SAASC,SAAT,QAA0B,gCAA1B;AACA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,YAAT,QAA6B,gCAA7B;;AAEA,SAAsBC,aAAtB,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,WAAT,QAA4B,8BAA5B;AACA,SAASC,gBAAT,QAAiC,+BAAjC;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,mBAAvB;AACA,SAASC,eAAT,QAAqD,mBAArD;;;;;;;;;;;;;;;;;;;AAmBA,OAPA;AACA;AACA;AACA;AACA,GAGA,IAAaC,cAAb,GAFCJ,gBAED,UADCC,QACD,8WAISI,OAJT,GAIwC,MAAKA,OAJ7C;;;;AAQSC,IAAAA,KART,GAQsC;AAClCC,MAAAA,YAAY,EAAE,KADoB;AAElCC,MAAAA,YAAY,EAAE,KAFoB,EARtC;;;;AAcUC,IAAAA,OAdV,GAcwC,IAdxC;AAeUC,IAAAA,iBAfV,GAe8B,CAf9B;;;;;;;;;;;;;;;;;;;AAkCSC,IAAAA,iBAlCT,GAkC6B,YAAM;AAC/BC,MAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkC,MAAKC,MAAvC,EAA+C,IAA/C;AACA,YAAKT,OAAL,CAAaU,YAAb,0BAAKV,OAAL,CAAaU,YAAb;AACD,KArCH;;AAuCSC,IAAAA,oBAvCT,GAuCgC,YAAM;AAClCJ,MAAAA,MAAM,CAACK,mBAAP,CAA2B,QAA3B,EAAqC,MAAKH,MAA1C,EAAkD,IAAlD;AACA,YAAKT,OAAL,CAAaU,YAAb,0BAAKV,OAAL,CAAaU,YAAb,CAA4B,KAA5B;AACD,KA1CH;;AA4CSD,IAAAA,MA5CT,GA4CkB,YAAM;AACpB,YAAKI,gBAAL;AACD,KA9CH;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsFUC,IAAAA,YAtFV,GAsFyB,UAACC,KAAD,EAAmB,mBAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACxC;AACE;AACE,UAAA,SAAS,EAAEtB,EAAE,CAACI,MAAM,CAACmB,MAAP,CAAc,MAAKC,KAAnB,CAAD;AACVpB,UAAAA,MAAM,CAACqB,WAAP,CAAmB,MAAKD,KAAxB,CADU,IACuBF,KADvB;AAEVlB,UAAAA,MAAM,CAACsB,YAAP,CAAoB,MAAKF,KAAzB,CAFU,IAEwB,MAAKG,cAF7B,OADf;;;AAMG,cAAKC,WAAL,CAAiBN,KAAjB,CANH;AAOE;AACE,UAAA,SAAS,EAAEtB,EAAE,CAACI,MAAM,CAACyB,KAAP,CAAa,MAAKL,KAAlB,CAAD;AACVpB,UAAAA,MAAM,CAAC0B,WAAP,CAAmB,MAAKN,KAAxB,CADU,IACuB,MAAKG,cAD5B;AAEVvB,UAAAA,MAAM,CAAC2B,UAAP,EAFU,IAEYT,KAFZ,QADf;;;AAMGzB,QAAAA,UAAU,CAAC,MAAKmC,KAAL,CAAWC,QAAZ,CAAV,GAAkC,MAAKD,KAAL,CAAWC,QAAX,CAAoBX,KAApB,CAAlC,GAA+D,MAAKU,KAAL,CAAWC,QAN7E,CAPF,CADF;;;;AAkBD,KAzGH;;AA2GUL,IAAAA,WA3GV,GA2GwB,UAACN,KAAD,EAAoB;AACxC,UAAMY,YAAY,GAAGC,QAAQ,CAAC,MAAKX,KAAL,CAAWY,0BAAZ,CAA7B;;AAEA;AACE;AACE,UAAA,SAAS,EAAEpC,EAAE,CAACI,MAAM,CAACiC,YAAP,CAAoB,MAAKb,KAAzB,CAAD;AACVpB,UAAAA,MAAM,CAACkC,iBAAP,CAAyB,MAAKd,KAA9B,CADU,IAC6BF,KAD7B;AAEVlB,UAAAA,MAAM,CAACmC,kBAAP,CAA0B,MAAKf,KAA/B,CAFU,IAE8B,MAAKG,cAFnC,QADf;;;AAME,4BAAC,eAAD,CAAiB,QAAjB;AACG,wBAAsB,cAAnBa,YAAmB,QAAnBA,YAAmB;AACrB,cAAMC,MAAM;AACV;AACE,YAAA,SAAS,EAAEzC,EAAE,CAACI,MAAM,CAACsC,KAAP,CAAa,MAAKlB,KAAlB,CAAD;AACVpB,YAAAA,MAAM,CAACuC,UAAP,CAAkB,MAAKnB,KAAvB,CADU,IACsB,MAAKhB,KAAL,CAAWE,YADjC;AAEVN,YAAAA,MAAM,CAACwC,WAAP,CAAmB,MAAKpB,KAAxB,CAFU,IAEuB,MAAKG,cAF5B,QADf;;AAKE,YAAA,OAAO,EAAE,MAAKkB,WALhB;AAME,YAAA,MAAM,EAAE,MAAKC,UANf;AAOE,YAAA,OAAO,EAAEN,YAPX;AAQE,wBAAS,iBARX;AASE,YAAA,QAAQ,EAAE,CATZ;;AAWE,8BAAC,SAAD,OAXF,CADF;;;;AAgBA,cAAI,MAAKb,cAAT,EAAyB;AACvB,mBAAOc,MAAP;AACD;;AAED;AACE,gCAAC,MAAD,IAAQ,IAAI,EAAC,KAAb,EAAmB,MAAM,EAAEP,YAA3B;AACGO,YAAAA,MADH,CADF;;;AAKD,SA3BH,CANF,CADF;;;;AAsCD,KApJH;;AAsJUrB,IAAAA,gBAtJV,GAsJ6B,YAAM;AAC/B,UAAI,MAAKT,OAAT,EAAkB;AAChB,YAAMoC,iBAAiB,GAAG,MAAKpC,OAAL,CAAaqC,qBAAb,GAAqCC,GAA/D;AACA,YAAMxC,YAAY,GAAG,MAAKyC,aAAL,GAAqBH,iBAArB,IAA0C,MAAKI,iBAApE;AACA,cAAKC,QAAL,CAAc,UAAC5C,KAAD,UAAYA,KAAK,CAACC,YAAN,KAAuBA,YAAvB,gBAA2CD,KAA3C,IAAkDC,YAAY,EAAZA,YAAlD,MAAmED,KAA/E,EAAd;AACD;AACF,KA5JH;;AA8JU6C,IAAAA,UA9JV,GA8JuB,UAACC,EAAD,EAA4B;AAC/C,YAAK3C,OAAL,GAAe2C,EAAf;AACD,KAhKH;;AAkKUT,IAAAA,WAlKV,GAkKwB,YAAM;AAC1BU,MAAAA,qBAAqB,CAAC,YAAM;AAC1B,YAAItD,WAAW,CAACuD,YAAhB,EAA8B;AAC5B,gBAAKJ,QAAL,CAAc,EAAE1C,YAAY,EAAE,IAAhB,EAAd;AACD;AACF,OAJoB,CAArB;AAKD,KAxKH;;AA0KUoC,IAAAA,UA1KV,GA0KuB,YAAM;AACzB,YAAKM,QAAL,CAAc,EAAE1C,YAAY,EAAE,KAAhB,EAAd;AACD,KA5KH,4DAgDS+C,MAhDT,GAgDE,kBAA6B,mBAC3B,oBACE,oBAAC,YAAD,CAAc,QAAd,QACG,UAACjC,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACkC,UAAL,EAAP,CACD,CAJH,CADF,CAQD,CAzDH,QA2DSC,aA3DT,GA2DE,yBAAuB,CACrB,IAAI,OAAO,KAAK3B,KAAL,CAAW4B,MAAlB,KAA6B,WAAjC,EAA8C,CAC5C,OAAO,KAAK5B,KAAL,CAAW4B,MAAlB,CACD,CAED,IAAI,KAAKjC,cAAT,EAAyB,CACvB,OAAO,KAAP,CACD,CAED,OAAO,IAAP,CACD,CArEH,QAuEU+B,UAvEV,GAuEE,sBAAqB,CACnB,IAAQjD,YAAR,GAAyB,KAAKD,KAA9B,CAAQC,YAAR,CAEA,IAAMoD,eAAe,GAAG,CAAC,KAAKlC,cAAN,IAAwB,KAAKgC,aAAL,EAAxB,IAAgDlD,YAAxE,CACA,IAAMqD,cAAc,GAAG,KAAKnC,cAAL,IAAuB,KAAKgC,aAAL,EAA9C,CAEA,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKI,WAAjC,IAAkD,KAAK/B,KAAvD,gBACE,6BAAK,GAAG,EAAE,KAAKqB,UAAf,EAA2B,SAAS,EAAEjD,MAAM,CAAC4D,aAAP,EAAtC,IACGH,eAAe,IAAIC,cAAnB,gBAAoC,oBAAC,MAAD,IAAQ,IAAI,EAAC,KAAb,IAAoB,KAAKzC,YAAzB,CAApC,GAAsF,KAAKA,YAAL,EADzF,CADF,CADF,CAOD,CApFH,4DAkBE,eAAmC,CACjC,IAAQZ,YAAR,GAAyB,KAAKD,KAA9B,CAAQC,YAAR,CACA,IAAI,CAAC,KAAKE,OAAV,EAAmB,CACjB,OAAO,CAAP,CACD,CACD,IAAI,CAACF,YAAL,EAAmB,CACjB,KAAKG,iBAAL,GAAyB,KAAKD,OAAL,CAAaqC,qBAAb,GAAqCiB,MAA9D,CACD,CACD,OAAO,KAAKrD,iBAAZ,CACD,CA3BH,qCA6BE,eAAuC,CACrC,IAAQY,KAAR,GAAkB,IAAlB,CAAQA,KAAR,CACA,OAAOW,QAAQ,CAACX,KAAK,CAAC0C,6BAAP,CAAR,GAAgD/B,QAAQ,CAACX,KAAK,CAAC2C,2BAAP,CAAR,GAA8C,CAArG,CACD,CAhCH,6BAAoCzE,KAAK,CAAC0E,SAA1C,WACgBC,mBADhB,GACsC,gBADtC,UAGgBC,WAHhB,GAG8BjE,eAH9B","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n isReadyToFix: boolean;\n focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n private isMobileLayout!: boolean;\n\n public state: SidePageHeaderState = {\n isReadyToFix: false,\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private wrapper: HTMLElement | null = null;\n private lastRegularHeight = 0;\n private setRootNode!: TSetRootNode;\n\n public get regularHeight(): number {\n const { isReadyToFix } = this.state;\n if (!this.wrapper) {\n return 0;\n }\n if (!isReadyToFix) {\n this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n }\n return this.lastRegularHeight;\n }\n\n public get fixedHeaderHeight(): number {\n const { theme } = this;\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n }\n\n public componentDidMount = () => {\n window.addEventListener('scroll', this.update, true);\n this.context.setHasHeader?.();\n };\n\n public componentWillUnmount = () => {\n window.removeEventListener('scroll', this.update, true);\n this.context.setHasHeader?.(false);\n };\n\n public update = () => {\n this.updateReadyToFix();\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getStickyProp() {\n if (typeof this.props.sticky !== 'undefined') {\n return this.props.sticky;\n }\n\n if (this.isMobileLayout) {\n return false;\n }\n\n return true;\n }\n\n private renderMain() {\n const { isReadyToFix } = this.state;\n\n const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n {isStickyDesktop || isStickyMobile ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n return (\n <div\n className={cx(styles.header(this.theme), {\n [styles.headerFixed(this.theme)]: fixed,\n [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.renderClose(fixed)}\n <div\n className={cx(styles.title(this.theme), {\n [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n [styles.titleFixed()]: fixed,\n })}\n >\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n );\n };\n\n private renderClose = (fixed: boolean) => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n\n return (\n <div\n className={cx(styles.wrapperClose(this.theme), {\n [styles.wrapperCloseFixed(this.theme)]: fixed,\n [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n })}\n >\n <SidePageContext.Consumer>\n {({ requestClose }) => {\n const button = (\n <button\n className={cx(styles.close(this.theme), {\n [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n [styles.mobileClose(this.theme)]: this.isMobileLayout,\n })}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onClick={requestClose}\n data-tid=\"SidePage__close\"\n tabIndex={0}\n >\n <CrossIcon />\n </button>\n );\n\n if (this.isMobileLayout) {\n return button;\n }\n\n return (\n <Sticky side=\"top\" offset={stickyOffset}>\n {button}\n </Sticky>\n );\n }}\n </SidePageContext.Consumer>\n </div>\n );\n };\n\n private updateReadyToFix = () => {\n if (this.wrapper) {\n const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n }\n };\n\n private wrapperRef = (el: HTMLElement | null) => {\n this.wrapper = el;\n };\n\n private handleFocus = () => {\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n };\n\n private handleBlur = () => {\n this.setState({ focusedByTab: false });\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["SidePageHeader.tsx"],"names":["React","Sticky","CrossIcon","isFunction","ThemeContext","CommonWrapper","cx","keyListener","responsiveLayout","rootNode","styles","SidePageContext","SidePageHeader","context","state","isReadyToFix","focusedByTab","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","setHasHeader","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","header","theme","headerFixed","mobileHeader","isMobileLayout","renderClose","title","mobileTitle","titleFixed","props","children","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperClose","wrapperCloseFixed","mobileWrapperClose","closeIcon","requestClose","close","closeFocus","handleFocus","handleBlur","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","requestAnimationFrame","isTabPressed","render","renderMain","getStickyProp","isStickyDesktop","isStickyMobile","setRootNode","headerWrapper","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","Component","__KONTUR_REACT_UI__","contextType"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { Sticky } from '../Sticky';\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\nimport { isFunction } from '../../lib/utils';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { keyListener } from '../../lib/events/keyListener';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './SidePage.styles';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\n\nexport interface SidePageHeaderProps extends CommonProps {\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n sticky?: boolean;\n}\n\nexport interface SidePageHeaderState {\n isReadyToFix: boolean;\n focusedByTab: boolean;\n}\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n private isMobileLayout!: boolean;\n\n public state: SidePageHeaderState = {\n isReadyToFix: false,\n focusedByTab: false,\n };\n\n private theme!: Theme;\n private wrapper: HTMLElement | null = null;\n private sticky: Sticky | null = null;\n private lastRegularHeight = 0;\n private setRootNode!: TSetRootNode;\n\n public get regularHeight(): number {\n const { isReadyToFix } = this.state;\n if (!this.wrapper) {\n return 0;\n }\n if (!isReadyToFix) {\n this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\n }\n return this.lastRegularHeight;\n }\n\n public get fixedHeaderHeight(): number {\n const { theme } = this;\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;\n }\n\n public componentDidMount = () => {\n window.addEventListener('scroll', this.update, true);\n this.context.setHasHeader?.();\n this.context.headerRef(this);\n };\n\n public componentWillUnmount = () => {\n window.removeEventListener('scroll', this.update, true);\n this.context.setHasHeader?.(false);\n this.context.headerRef(null);\n };\n\n public update = () => {\n this.sticky?.reflow();\n this.updateReadyToFix();\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getStickyProp() {\n if (typeof this.props.sticky !== 'undefined') {\n return this.props.sticky;\n }\n\n if (this.isMobileLayout) {\n return false;\n }\n\n return true;\n }\n\n private renderMain() {\n const { isReadyToFix } = this.state;\n\n const isStickyDesktop = !this.isMobileLayout && this.getStickyProp() && isReadyToFix;\n const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div ref={this.wrapperRef} className={styles.headerWrapper()}>\n {isStickyDesktop || isStickyMobile ? (\n <Sticky ref={this.stickyRef} side=\"top\">\n {this.renderHeader}\n </Sticky>\n ) : (\n this.renderHeader()\n )}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n return (\n <div\n className={cx(styles.header(this.theme), {\n [styles.headerFixed(this.theme)]: fixed,\n [styles.mobileHeader(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.renderClose(fixed)}\n <div\n className={cx(styles.title(this.theme), {\n [styles.mobileTitle(this.theme)]: this.isMobileLayout,\n [styles.titleFixed()]: fixed,\n })}\n >\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n );\n };\n\n private renderClose = (fixed: boolean) => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n return (\n <div\n className={cx(styles.wrapperClose(this.theme), {\n [styles.wrapperCloseFixed(this.theme)]: fixed,\n [styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.isMobileLayout ? (\n this.closeIcon\n ) : (\n <Sticky side=\"top\" offset={stickyOffset}>\n {this.closeIcon}\n </Sticky>\n )}\n </div>\n );\n };\n\n private closeIcon = () => (\n <SidePageContext.Consumer>\n {({ requestClose }) => (\n <button\n className={cx(styles.close(this.theme), {\n [styles.closeFocus(this.theme)]: this.state.focusedByTab,\n })}\n onFocus={this.handleFocus}\n onBlur={this.handleBlur}\n onClick={requestClose}\n data-tid=\"SidePage__close\"\n tabIndex={0}\n >\n <CrossIcon />\n </button>\n )}\n </SidePageContext.Consumer>\n );\n\n private updateReadyToFix = () => {\n if (this.wrapper) {\n const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\n this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { ...state, isReadyToFix } : state));\n }\n };\n\n private wrapperRef = (el: HTMLElement | null) => {\n this.wrapper = el;\n };\n\n private stickyRef = (el: Sticky | null) => {\n this.sticky = el;\n };\n\n private handleFocus = () => {\n requestAnimationFrame(() => {\n if (keyListener.isTabPressed) {\n this.setState({ focusedByTab: true });\n }\n });\n };\n\n private handleBlur = () => {\n this.setState({ focusedByTab: false });\n };\n}\n"]}
|
|
@@ -22,6 +22,7 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
|
|
|
22
22
|
state: SidePageHeaderState;
|
|
23
23
|
private theme;
|
|
24
24
|
private wrapper;
|
|
25
|
+
private sticky;
|
|
25
26
|
private lastRegularHeight;
|
|
26
27
|
private setRootNode;
|
|
27
28
|
get regularHeight(): number;
|
|
@@ -34,8 +35,10 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
|
|
|
34
35
|
private renderMain;
|
|
35
36
|
private renderHeader;
|
|
36
37
|
private renderClose;
|
|
38
|
+
private closeIcon;
|
|
37
39
|
private updateReadyToFix;
|
|
38
40
|
private wrapperRef;
|
|
41
|
+
private stickyRef;
|
|
39
42
|
private handleFocus;
|
|
40
43
|
private handleBlur;
|
|
41
44
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Sticky.tsx"],"names":["React","PropTypes","shallowEqual","LayoutEvents","isFunction","ZIndex","CommonWrapper","cx","rootNode","styles","MAX_REFLOW_RETRIES","Sticky","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","getBoundingClientRect","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","container","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"2JAAA,OAAOA,KAAP,MAAkB,OAAlB;AACA,OAAOC,SAAP,MAAsB,YAAtB;AACA,OAAOC,YAAP,MAAyB,cAAzB;;AAEA,OAAO,KAAKC,YAAZ,MAA8B,wBAA9B;;AAEA,SAASC,UAAT,QAA2B,iBAA3B;AACA,SAASC,MAAT,QAAuB,uBAAvB;AACA,SAASC,aAAT,QAA2C,8BAA3C;AACA,SAASC,EAAT,QAAmB,2BAAnB;AACA,SAASC,QAAT,QAAuC,oBAAvC;;AAEA,SAASC,MAAT,QAAuB,iBAAvB;;AAEA,IAAMC,kBAAkB,GAAG,CAA3B;;;;;;;;;;;;;;;;;;;;;;;;AAwBA,WAAaC,MAAb,GADCH,QACD;;;;;;;;;;;;;;;;;;;;;AAqBSI,IAAAA,KArBT,GAqB8B;AAC1BC,MAAAA,KAAK,EAAE,KADmB;AAE1BC,MAAAA,WAAW,EAAE,CAFa;AAG1BC,MAAAA,OAAO,EAAE,KAHiB;AAI1BC,MAAAA,WAAW,EAAE,CAJa,EArB9B;;;;;AA8BUC,IAAAA,kBA9BV,GA8BiE,EAAEC,MAAM,EAAE,IAAV,EA9BjE;AA+BUC,IAAAA,aA/BV,GA+B0B,CA/B1B;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmGUC,IAAAA,UAnGV,GAmGuB,UAACC,GAAD,UAAiC,MAAKC,OAAL,GAAeD,GAAhD,EAnGvB;;AAqGUE,IAAAA,QArGV,GAqGqB,UAACF,GAAD,UAAiC,MAAKG,KAAL,GAAaH,GAA9C,EArGrB;;AAuGUI,IAAAA,MAvGV,GAuGmB,YAAM;AACrB,sBAA4BC,QAA5B,CAAQC,eAAR,aAAQA,eAAR;;AAEA,UAAI,CAACA,eAAL,EAAsB;AACpB,cAAMC,KAAK,CAAC,2CAAD,CAAX;AACD;;AAED,UAAMC,YAAY,GAAGC,MAAM,CAACC,WAAP,IAAsBJ,eAAe,CAACK,YAA3D;AACA,UAAI,CAAC,MAAKV,OAAN,IAAiB,CAAC,MAAKE,KAA3B,EAAkC;AAChC;AACD;AACD,kCAA8B,MAAKF,OAAL,CAAaW,qBAAb,EAA9B,CAAQC,GAAR,yBAAQA,GAAR,CAAaC,MAAb,yBAAaA,MAAb,CAAqBC,IAArB,yBAAqBA,IAArB;AACA,kCAA0B,MAAKZ,KAAL,CAAWS,qBAAX,EAA1B,CAAQI,KAAR,yBAAQA,KAAR,CAAeC,MAAf,yBAAeA,MAAf;AACA,wBAAkC,MAAKC,KAAvC,CAAQC,MAAR,eAAQA,MAAR,CAAgBC,OAAhB,eAAgBA,OAAhB,CAAyBC,IAAzB,eAAyBA,IAAzB;AACA,wBAA0D,MAAK9B,KAA/D,CAAe+B,SAAf,eAAQ9B,KAAR,kCAA0ByB,MAA1B,CAAkCM,UAAlC,mCAA+CN,MAA/C;AACA,UAAMzB,KAAK,GAAG6B,IAAI,KAAK,KAAT,GAAiBR,GAAG,GAAGM,MAAvB,GAAgCK,IAAI,CAACC,KAAL,CAAWX,MAAX,IAAqBN,YAAY,GAAGW,MAAlF;;AAEA,YAAKO,QAAL,CAAc,EAAElC,KAAK,EAALA,KAAF,EAASuB,IAAI,EAAJA,IAAT,EAAd;;AAEA,UAAIvB,KAAK,IAAI,CAAC8B,SAAd,EAAyB;AACvB,cAAKI,QAAL,CAAc,EAAEV,KAAK,EAALA,KAAF,EAASC,MAAM,EAANA,MAAT,EAAd;AACD;;AAED,UAAIzB,KAAJ,EAAW;AACT,YAAMmC,IAAI,GAAGP,OAAO,IAAIA,OAAO,EAA/B;AACA,YAAIO,IAAJ,EAAU;AACR,cAAMlC,WAAW,GAAG8B,UAAU,GAAGN,MAAjC;AACA,cAAMW,QAAQ,GAAGD,IAAI,CAACf,qBAAL,EAAjB;AACA,cAAMiB,WAAW,GAAGZ,MAAM,GAAGE,MAA7B;AACA,cAAIzB,OAAO,GAAG,KAAd;AACA,cAAIC,WAAW,GAAG,CAAlB;;AAEA,cAAI0B,IAAI,KAAK,KAAb,EAAoB;AAClB3B,YAAAA,OAAO,GAAGkC,QAAQ,CAACf,GAAT,GAAegB,WAAf,GAA6B,CAAvC;AACAlC,YAAAA,WAAW,GAAGiC,QAAQ,CAACf,GAAT,GAAeU,UAAf,GAA4BV,GAA1C;AACD,WAHD,MAGO;AACLnB,YAAAA,OAAO,GAAGkC,QAAQ,CAACd,MAAT,GAAkBe,WAAlB,GAAgCrB,YAA1C;AACAb,YAAAA,WAAW,GAAGiC,QAAQ,CAACd,MAAT,GAAkBD,GAAhC;AACD;;AAED,gBAAKa,QAAL,CAAc,EAAE/B,WAAW,EAAXA,WAAF,EAAeF,WAAW,EAAXA,WAAf,EAA4BC,OAAO,EAAPA,OAA5B,EAAd;AACD;AACF;AACF,KAlJH,oDAkCSoC,iBAlCT,GAkCE,6BAA2B,CACzB,KAAK1B,MAAL,GAEA,KAAKR,kBAAL,GAA0Bd,YAAY,CAACiD,WAAb,CAAyB,KAAK3B,MAA9B,CAA1B,CACD,CAtCH,QAwCS4B,oBAxCT,GAwCE,gCAA8B,CAC5B,IAAI,KAAKpC,kBAAL,CAAwBC,MAA5B,EAAoC,CAClC,KAAKD,kBAAL,CAAwBC,MAAxB,GACD,CACF,CA5CH,QA8CSoC,kBA9CT,GA8CE,4BAA0BC,SAA1B,EAAkDC,SAAlD,EAA0E,CACxE,IAAI,CAACtD,YAAY,CAACqD,SAAD,EAAY,KAAKhB,KAAjB,CAAb,IAAwC,CAACrC,YAAY,CAACsD,SAAD,EAAY,KAAK5C,KAAjB,CAAzD,EAAkF,CAChF,IAAI,KAAKO,aAAL,GAAqBT,kBAAzB,EAA6C,CAC3CP,YAAY,CAACsD,IAAb,GACA,KAAKtC,aAAL,IAAsB,CAAtB,CACA,OACD,CACF,CACD,KAAKA,aAAL,GAAqB,CAArB,CACD,CAvDH,QAyDSuC,MAzDT,GAyDE,kBAAgB,SACd,IAAMC,QAAN,GAAmB,KAAKpB,KAAxB,CAAMoB,QAAN,CACA,mBAAyB,KAAKpB,KAA9B,CAAQG,IAAR,gBAAQA,IAAR,CAAcF,MAAd,gBAAcA,MAAd,CACA,mBAA0E,KAAK5B,KAA/E,CAAQC,KAAR,gBAAQA,KAAR,CAAeE,OAAf,gBAAeA,OAAf,CAAwBC,WAAxB,gBAAwBA,WAAxB,CAAqCF,WAArC,gBAAqCA,WAArC,CAAkDuB,KAAlD,gBAAkDA,KAAlD,CAAyDC,MAAzD,gBAAyDA,MAAzD,CAAiEF,IAAjE,gBAAiEA,IAAjE,CACA,IAAMwB,UAA+B,GAAG,EAAxC,CAEA,IAAI/C,KAAJ,EAAW,CACT,IAAIE,OAAJ,EAAa,CACX6C,UAAU,CAAC1B,GAAX,GAAiBlB,WAAjB,CACA4C,UAAU,CAAClB,IAAI,KAAK,KAAT,GAAiB,WAAjB,GAA+B,cAAhC,CAAV,GAA4D5B,WAA5D,CACD,CAHD,MAGO,CACL8C,UAAU,CAACvB,KAAX,GAAmBA,KAAnB,CACAuB,UAAU,CAAClB,IAAD,CAAV,GAAmBF,MAAnB,CACAoB,UAAU,CAACxB,IAAX,GAAkBA,IAAlB,CACD,CACF,CAED,IAAIhC,UAAU,CAACuD,QAAD,CAAd,EAA0B,CACxBA,QAAQ,GAAGA,QAAQ,CAAC9C,KAAD,CAAnB,CACD,CAED,oBACE,oBAAC,aAAD,aAAe,WAAW,EAAE,KAAKgD,WAAjC,IAAkD,KAAKtB,KAAvD,gBACE,6BAAK,GAAG,EAAE,KAAKnB,UAAf,EAA2B,SAAS,EAAEX,MAAM,CAACa,OAAP,EAAtC,iBACE,oBAAC,MAAD,IACE,QAAQ,EAAC,QADX,EAEE,WAAW,EAAET,KAFf,EAGE,SAAS,EAAEN,EAAE,CAACE,MAAM,CAACe,KAAP,EAAD,iBACVf,MAAM,CAACI,KAAP,EADU,IACOA,KAAK,IAAI,CAACE,OADjB,MAEVN,MAAM,CAACM,OAAP,EAFU,IAESA,OAFT,OAHf,EAOE,KAAK,EAAE6C,UAPT,EAQE,UAAU,EAAE,KAAKrC,QARnB,iBAUE,6BAAK,SAAS,EAAEd,MAAM,CAACqD,SAAP,EAAhB,IAAqCH,QAArC,CAVF,CADF,EAaG9C,KAAK,IAAI,CAACE,OAAV,gBAAoB,6BAAK,KAAK,EAAE,EAAEsB,KAAK,EAALA,KAAF,EAASC,MAAM,EAANA,MAAT,EAAZ,GAApB,GAAwD,IAb3D,CADF,CADF,CAmBD,CAjGH,iBAA4BtC,KAAK,CAAC+D,SAAlC,WACgBC,mBADhB,GACsC,QADtC,UAGgBC,SAHhB,GAG4B,EACxBN,QAAQ,EAAE1D,SAAS,CAACiE,SAAV,CAAoB,CAACjE,SAAS,CAACkE,IAAX,EAAiBlE,SAAS,CAACmE,IAA3B,CAApB,CADc,EAGxB;AACJ;AACA,KACI3B,OAAO,EAAExC,SAAS,CAACmE,IANK,EAQxB;AACJ;AACA,KACI5B,MAAM,EAAEvC,SAAS,CAACoE,MAXM,EAaxB3B,IAAI,EAAEzC,SAAS,CAACqE,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,CAAhB,EAAmCC,UAbjB,EAH5B,UAmBgBC,YAnBhB,GAmB+B,EAAEhC,MAAM,EAAE,CAAV,EAnB/B","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n side: 'top' | 'bottom';\n /**\n * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n * @default 0\n */\n offset: number;\n getStop?: () => Nullable<HTMLElement>;\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n fixed: boolean;\n deltaHeight: number;\n height?: number;\n width?: number;\n left?: number;\n stopped: boolean;\n relativeTop: number;\n}\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n public static __KONTUR_REACT_UI__ = 'Sticky';\n\n public static propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n /**\n * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n */\n getStop: PropTypes.func,\n\n /**\n * Отступ от границы в пикселях\n */\n offset: PropTypes.number,\n\n side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n };\n\n public static defaultProps = { offset: 0 };\n\n public state: StickyState = {\n fixed: false,\n deltaHeight: 0,\n stopped: false,\n relativeTop: 0,\n };\n\n private wrapper: Nullable<HTMLElement>;\n private inner: Nullable<HTMLElement>;\n private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n private reflowCounter = 0;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.reflow();\n\n this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n }\n\n public componentWillUnmount() {\n if (this.layoutSubscription.remove) {\n this.layoutSubscription.remove();\n }\n }\n\n public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n LayoutEvents.emit();\n this.reflowCounter += 1;\n return;\n }\n }\n this.reflowCounter = 0;\n }\n\n public render() {\n let { children } = this.props;\n const { side, offset } = this.props;\n const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n const innerStyle: React.CSSProperties = {};\n\n if (fixed) {\n if (stopped) {\n innerStyle.top = relativeTop;\n innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n } else {\n innerStyle.width = width;\n innerStyle[side] = offset;\n innerStyle.left = left;\n }\n }\n\n if (isFunction(children)) {\n children = children(fixed);\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div ref={this.refWrapper} className={styles.wrapper()}>\n <ZIndex\n priority=\"Sticky\"\n applyZIndex={fixed}\n className={cx(styles.inner(), {\n [styles.fixed()]: fixed && !stopped,\n [styles.stopped()]: stopped,\n })}\n style={innerStyle}\n wrapperRef={this.refInner}\n >\n <div className={styles.container()}>{children}</div>\n </ZIndex>\n {fixed && !stopped ? <div style={{ width, height }} /> : null}\n </div>\n </CommonWrapper>\n );\n }\n\n private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n private reflow = () => {\n const { documentElement } = document;\n\n if (!documentElement) {\n throw Error('There is no \"documentElement\" in document');\n }\n\n const windowHeight = window.innerHeight || documentElement.clientHeight;\n if (!this.wrapper || !this.inner) {\n return;\n }\n const { top, bottom, left } = this.wrapper.getBoundingClientRect();\n const { width, height } = this.inner.getBoundingClientRect();\n const { offset, getStop, side } = this.props;\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\n const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n this.setState({ fixed, left });\n\n if (fixed && !prevFixed) {\n this.setState({ width, height });\n }\n\n if (fixed) {\n const stop = getStop && getStop();\n if (stop) {\n const deltaHeight = prevHeight - height;\n const stopRect = stop.getBoundingClientRect();\n const outerHeight = height + offset;\n let stopped = false;\n let relativeTop = 0;\n\n if (side === 'top') {\n stopped = stopRect.top - outerHeight < 0;\n relativeTop = stopRect.top - prevHeight - top;\n } else {\n stopped = stopRect.bottom + outerHeight > windowHeight;\n relativeTop = stopRect.bottom - top;\n }\n\n this.setState({ relativeTop, deltaHeight, stopped });\n }\n }\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Sticky.tsx"],"names":["React","PropTypes","shallowEqual","LayoutEvents","isFunction","ZIndex","CommonWrapper","cx","rootNode","styles","MAX_REFLOW_RETRIES","Sticky","state","fixed","deltaHeight","stopped","relativeTop","layoutSubscription","remove","reflowCounter","refWrapper","ref","wrapper","refInner","inner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","getBoundingClientRect","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","Math","floor","setState","stop","stopRect","outerHeight","componentDidMount","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","setRootNode","container","Component","__KONTUR_REACT_UI__","propTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport PropTypes from 'prop-types';\nimport shallowEqual from 'shallowequal';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { Nullable } from '../../typings/utility-types';\nimport { isFunction } from '../../lib/utils';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Sticky.styles';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends CommonProps {\n side: 'top' | 'bottom';\n /**\n * Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\n * @default 0\n */\n offset: number;\n getStop?: () => Nullable<HTMLElement>;\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n fixed: boolean;\n deltaHeight: number;\n height?: number;\n width?: number;\n left?: number;\n stopped: boolean;\n relativeTop: number;\n}\n\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n public static __KONTUR_REACT_UI__ = 'Sticky';\n\n public static propTypes = {\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\n\n /**\n * Функция, которая возвращает DOM-элемент, который нельзя пересекать.\n */\n getStop: PropTypes.func,\n\n /**\n * Отступ от границы в пикселях\n */\n offset: PropTypes.number,\n\n side: PropTypes.oneOf(['top', 'bottom']).isRequired,\n };\n\n public static defaultProps = { offset: 0 };\n\n public state: StickyState = {\n fixed: false,\n deltaHeight: 0,\n stopped: false,\n relativeTop: 0,\n };\n\n private wrapper: Nullable<HTMLElement>;\n private inner: Nullable<HTMLElement>;\n private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n private reflowCounter = 0;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.reflow();\n\n this.layoutSubscription = LayoutEvents.addListener(this.reflow);\n }\n\n public componentWillUnmount() {\n if (this.layoutSubscription.remove) {\n this.layoutSubscription.remove();\n }\n }\n\n public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n LayoutEvents.emit();\n this.reflowCounter += 1;\n return;\n }\n }\n this.reflowCounter = 0;\n }\n\n public render() {\n let { children } = this.props;\n const { side, offset } = this.props;\n const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n const innerStyle: React.CSSProperties = {};\n\n if (fixed) {\n if (stopped) {\n innerStyle.top = relativeTop;\n innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n } else {\n innerStyle.width = width;\n innerStyle[side] = offset;\n innerStyle.left = left;\n }\n }\n\n if (isFunction(children)) {\n children = children(fixed);\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div ref={this.refWrapper} className={styles.wrapper()}>\n <ZIndex\n priority=\"Sticky\"\n applyZIndex={fixed}\n className={cx(styles.inner(), {\n [styles.fixed()]: fixed && !stopped,\n [styles.stopped()]: stopped,\n })}\n style={innerStyle}\n wrapperRef={this.refInner}\n >\n <div className={styles.container()}>{children}</div>\n </ZIndex>\n {fixed && !stopped ? <div style={{ width, height }} /> : null}\n </div>\n </CommonWrapper>\n );\n }\n\n private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\n\n private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\n\n /**\n * Пересчитать габариты и позицию залипшего элемента\n *\n * @public\n */\n public reflow = () => {\n const { documentElement } = document;\n\n if (!documentElement) {\n throw Error('There is no \"documentElement\" in document');\n }\n\n const windowHeight = window.innerHeight || documentElement.clientHeight;\n if (!this.wrapper || !this.inner) {\n return;\n }\n const { top, bottom, left } = this.wrapper.getBoundingClientRect();\n const { width, height } = this.inner.getBoundingClientRect();\n const { offset, getStop, side } = this.props;\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\n const fixed = side === 'top' ? top < offset : Math.floor(bottom) > windowHeight - offset;\n\n this.setState({ fixed, left });\n\n if (fixed && !prevFixed) {\n this.setState({ width, height });\n }\n\n if (fixed) {\n const stop = getStop && getStop();\n if (stop) {\n const deltaHeight = prevHeight - height;\n const stopRect = stop.getBoundingClientRect();\n const outerHeight = height + offset;\n let stopped = false;\n let relativeTop = 0;\n\n if (side === 'top') {\n stopped = stopRect.top - outerHeight < 0;\n relativeTop = stopRect.top - prevHeight - top;\n } else {\n stopped = stopRect.bottom + outerHeight > windowHeight;\n relativeTop = stopRect.bottom - top;\n }\n\n this.setState({ relativeTop, deltaHeight, stopped });\n }\n }\n };\n}\n"]}
|
|
@@ -50,5 +50,10 @@ export declare class Sticky extends React.Component<StickyProps, StickyState> {
|
|
|
50
50
|
render(): JSX.Element;
|
|
51
51
|
private refWrapper;
|
|
52
52
|
private refInner;
|
|
53
|
-
|
|
53
|
+
/**
|
|
54
|
+
* Пересчитать габариты и позицию залипшего элемента
|
|
55
|
+
*
|
|
56
|
+
* @public
|
|
57
|
+
*/
|
|
58
|
+
reflow: () => void;
|
|
54
59
|
}
|
|
@@ -5,6 +5,9 @@ import * as LayoutEvents from "../../../lib/LayoutEvents";
|
|
|
5
5
|
import { RenderContainer } from "../../RenderContainer";
|
|
6
6
|
import { ZIndex } from "../../ZIndex";
|
|
7
7
|
import { createPropsGetter } from "../../../lib/createPropsGetter";
|
|
8
|
+
import { cx } from "../../../lib/theming/Emotion";
|
|
9
|
+
import { isIE11 } from "../../../lib/client";
|
|
10
|
+
import { styles } from "../DropdownContainer.styles";
|
|
8
11
|
export var DropdownContainer = /*#__PURE__*/function (_React$PureComponent) {
|
|
9
12
|
_inheritsLoose(DropdownContainer, _React$PureComponent);
|
|
10
13
|
|
|
@@ -168,6 +171,8 @@ export var DropdownContainer = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
168
171
|
};
|
|
169
172
|
|
|
170
173
|
_proto.render = function render() {
|
|
174
|
+
var _cx;
|
|
175
|
+
|
|
171
176
|
var style = {
|
|
172
177
|
position: 'absolute',
|
|
173
178
|
top: '0'
|
|
@@ -184,14 +189,16 @@ export var DropdownContainer = /*#__PURE__*/function (_React$PureComponent) {
|
|
|
184
189
|
bottom: bottom !== null ? bottom : undefined,
|
|
185
190
|
left: left !== null ? left : undefined,
|
|
186
191
|
right: right !== null ? right : undefined,
|
|
187
|
-
minWidth: this.state.minWidth
|
|
192
|
+
minWidth: this.state.minWidth,
|
|
193
|
+
maxWidth: this.props.hasFixedWidth ? this.state.minWidth : undefined
|
|
188
194
|
});
|
|
189
195
|
}
|
|
190
196
|
|
|
191
197
|
var content = /*#__PURE__*/React.createElement(ZIndex, {
|
|
192
198
|
priority: 'DropdownContainer',
|
|
193
199
|
wrapperRef: this.ZIndexRef,
|
|
194
|
-
style: style
|
|
200
|
+
style: style,
|
|
201
|
+
className: cx((_cx = {}, _cx[styles.alignRight()] = this.props.align === 'right' && !isIE11, _cx))
|
|
195
202
|
}, this.props.children);
|
|
196
203
|
return this.props.disablePortal ? content : /*#__PURE__*/React.createElement(RenderContainer, null, content);
|
|
197
204
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["DropdownContainer.tsx"],"names":["React","LayoutEvents","RenderContainer","ZIndex","createPropsGetter","DropdownContainer","state","position","minWidth","isDocumentElementRoot","getProps","defaultProps","ZIndexRef","element","dom","isElement","node","Element","target","props","getParent","targetRect","getBoundingClientRect","document","body","docEl","documentElement","Error","scrollX","window","pageXOffset","scrollLeft","scrollY","pageYOffset","scrollTop","left","right","align","docWidth","offsetWidth","offsetX","offsetY","bottom","top","distanceToBottom","clientHeight","dropdownHeight","getHeight","scrollHeight","setState","getMinWidth","disablePortal","convertToRelativePosition","child","children","item","height","width","targetHeight","componentDidMount","layoutSub","addListener","htmlPosition","getComputedStyle","bodyPosition","hasLimitedHeightRoot","hasStaticRoot","componentWillUnmount","remove","render","style","undefined","content","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../RenderContainer';\nimport { ZIndex } from '../ZIndex';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\n\nexport interface DropdownContainerPosition {\n top: Nullable<number>;\n bottom: Nullable<number>;\n left: Nullable<number>;\n right: Nullable<number>;\n}\n\nexport interface DropdownContainerProps {\n align?: 'left' | 'right';\n getParent: () => Nullable<HTMLElement>;\n children?: React.ReactNode;\n disablePortal?: boolean;\n offsetY?: number;\n offsetX?: number;\n}\n\nexport interface DropdownContainerState {\n position: Nullable<DropdownContainerPosition>;\n minWidth: number;\n isDocumentElementRoot?: boolean;\n}\n\nexport class DropdownContainer extends React.PureComponent<DropdownContainerProps, DropdownContainerState> {\n public static __KONTUR_REACT_UI__ = 'DropdownContainer';\n\n public static defaultProps = {\n align: 'left',\n disablePortal: false,\n offsetX: 0,\n offsetY: -1,\n };\n\n public state: DropdownContainerState = {\n position: null,\n minWidth: 0,\n isDocumentElementRoot: true,\n };\n\n private getProps = createPropsGetter(DropdownContainer.defaultProps);\n\n private dom: Nullable<HTMLDivElement>;\n private layoutSub: Nullable<ReturnType<typeof LayoutEvents.addListener>>;\n\n public componentDidMount() {\n this.position();\n this.layoutSub = LayoutEvents.addListener(this.position);\n\n const { body, documentElement: docEl } = document;\n const htmlPosition = getComputedStyle(docEl).position;\n const bodyPosition = getComputedStyle(body).position;\n\n const hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;\n const hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';\n\n this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });\n }\n\n public componentWillUnmount() {\n if (this.layoutSub) {\n this.layoutSub.remove();\n }\n }\n\n public render() {\n let style: React.CSSProperties = {\n position: 'absolute',\n top: '0',\n };\n if (this.state.position) {\n const { top, bottom, left, right } = this.state.position;\n style = {\n ...style,\n top: top !== null ? top : undefined,\n bottom: bottom !== null ? bottom : undefined,\n left: left !== null ? left : undefined,\n right: right !== null ? right : undefined,\n minWidth: this.state.minWidth,\n };\n }\n\n const content = (\n <ZIndex priority={'DropdownContainer'} wrapperRef={this.ZIndexRef} style={style}>\n {this.props.children}\n </ZIndex>\n );\n\n return this.props.disablePortal ? content : <RenderContainer>{content}</RenderContainer>;\n }\n\n private ZIndexRef = (element: Nullable<HTMLDivElement>) => {\n this.dom = element;\n };\n\n private isElement = (node: Nullable<Element>): node is Element => {\n return node instanceof Element;\n };\n\n public position = () => {\n const target = this.props.getParent();\n const dom = this.dom;\n\n if (target && this.isElement(target) && dom) {\n const targetRect = target.getBoundingClientRect();\n const { body, documentElement: docEl } = document;\n\n if (!docEl) {\n throw Error('There is no \"documentElement\" in \"document\"');\n }\n\n const scrollX = window.pageXOffset || docEl.scrollLeft || 0;\n const scrollY = window.pageYOffset || docEl.scrollTop || 0;\n\n let left = null;\n let right = null;\n\n if (this.props.align === 'right') {\n const docWidth = docEl.offsetWidth || 0;\n right = docWidth - (targetRect.right + scrollX) + this.getProps().offsetX;\n } else {\n left = targetRect.left + scrollX + this.getProps().offsetX;\n }\n\n const { offsetY = 0 } = this.props;\n let bottom = null;\n let top: number | null = targetRect.bottom + scrollY + offsetY;\n\n const distanceToBottom = docEl.clientHeight - targetRect.bottom;\n const dropdownHeight = this.getHeight();\n\n if (distanceToBottom < dropdownHeight && targetRect.top > dropdownHeight) {\n const clientHeight = this.state.isDocumentElementRoot ? docEl.clientHeight : body.scrollHeight;\n\n top = null;\n bottom = clientHeight + offsetY - scrollY - targetRect.top;\n }\n\n const position = {\n top,\n left,\n right,\n bottom,\n };\n\n this.setState({\n minWidth: this.getMinWidth(),\n position: this.props.disablePortal ? this.convertToRelativePosition(position) : position,\n });\n }\n };\n\n private getHeight = () => {\n if (!this.isElement(this.dom)) {\n return 0;\n }\n const child = this.dom.children.item(0);\n if (!child) {\n return 0;\n }\n return child.getBoundingClientRect().height;\n };\n\n private getMinWidth = () => {\n const target = this.props.getParent();\n if (!target || !this.isElement(target)) {\n return 0;\n }\n return target.getBoundingClientRect().width;\n };\n\n private convertToRelativePosition = (position: DropdownContainerPosition): DropdownContainerPosition => {\n const target = this.props.getParent();\n const { offsetX = 0, offsetY = 0 } = this.props;\n const { top, bottom, left, right } = position;\n if (target && this.isElement(target)) {\n const targetHeight = target.getBoundingClientRect().height;\n return {\n top: top !== null ? targetHeight + offsetY : null,\n bottom: bottom !== null ? targetHeight + offsetY : null,\n left: left !== null ? offsetX : null,\n right: right !== null ? offsetX : null,\n };\n }\n return {\n top: offsetY,\n bottom: null,\n left: offsetX,\n right: null,\n };\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["DropdownContainer.tsx"],"names":["React","LayoutEvents","RenderContainer","ZIndex","createPropsGetter","cx","isIE11","styles","DropdownContainer","state","position","minWidth","isDocumentElementRoot","getProps","defaultProps","ZIndexRef","element","dom","isElement","node","Element","target","props","getParent","targetRect","getBoundingClientRect","document","body","docEl","documentElement","Error","scrollX","window","pageXOffset","scrollLeft","scrollY","pageYOffset","scrollTop","left","right","align","docWidth","offsetWidth","offsetX","offsetY","bottom","top","distanceToBottom","clientHeight","dropdownHeight","getHeight","scrollHeight","setState","getMinWidth","disablePortal","convertToRelativePosition","child","children","item","height","width","targetHeight","componentDidMount","layoutSub","addListener","htmlPosition","getComputedStyle","bodyPosition","hasLimitedHeightRoot","hasStaticRoot","componentWillUnmount","remove","render","style","undefined","maxWidth","hasFixedWidth","content","alignRight","PureComponent","__KONTUR_REACT_UI__"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { RenderContainer } from '../RenderContainer';\nimport { ZIndex } from '../ZIndex';\nimport { createPropsGetter } from '../../lib/createPropsGetter';\nimport { Nullable } from '../../typings/utility-types';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isIE11 } from '../../lib/client';\n\nimport { styles } from './DropdownContainer.styles';\n\nexport interface DropdownContainerPosition {\n top: Nullable<number>;\n bottom: Nullable<number>;\n left: Nullable<number>;\n right: Nullable<number>;\n}\n\nexport interface DropdownContainerProps {\n align?: 'left' | 'right';\n getParent: () => Nullable<HTMLElement>;\n children?: React.ReactNode;\n disablePortal?: boolean;\n offsetY?: number;\n offsetX?: number;\n hasFixedWidth?: boolean;\n}\n\nexport interface DropdownContainerState {\n position: Nullable<DropdownContainerPosition>;\n minWidth: number;\n isDocumentElementRoot?: boolean;\n}\n\nexport class DropdownContainer extends React.PureComponent<DropdownContainerProps, DropdownContainerState> {\n public static __KONTUR_REACT_UI__ = 'DropdownContainer';\n\n public static defaultProps = {\n align: 'left',\n disablePortal: false,\n offsetX: 0,\n offsetY: -1,\n };\n\n public state: DropdownContainerState = {\n position: null,\n minWidth: 0,\n isDocumentElementRoot: true,\n };\n\n private getProps = createPropsGetter(DropdownContainer.defaultProps);\n\n private dom: Nullable<HTMLDivElement>;\n private layoutSub: Nullable<ReturnType<typeof LayoutEvents.addListener>>;\n\n public componentDidMount() {\n this.position();\n this.layoutSub = LayoutEvents.addListener(this.position);\n\n const { body, documentElement: docEl } = document;\n const htmlPosition = getComputedStyle(docEl).position;\n const bodyPosition = getComputedStyle(body).position;\n\n const hasLimitedHeightRoot = body.scrollHeight > body.clientHeight;\n const hasStaticRoot = htmlPosition === 'static' && bodyPosition === 'static';\n\n this.setState({ isDocumentElementRoot: hasLimitedHeightRoot || hasStaticRoot });\n }\n\n public componentWillUnmount() {\n if (this.layoutSub) {\n this.layoutSub.remove();\n }\n }\n\n public render() {\n let style: React.CSSProperties = {\n position: 'absolute',\n top: '0',\n };\n if (this.state.position) {\n const { top, bottom, left, right } = this.state.position;\n style = {\n ...style,\n top: top !== null ? top : undefined,\n bottom: bottom !== null ? bottom : undefined,\n left: left !== null ? left : undefined,\n right: right !== null ? right : undefined,\n minWidth: this.state.minWidth,\n maxWidth: this.props.hasFixedWidth ? this.state.minWidth : undefined,\n };\n }\n\n const content = (\n <ZIndex\n priority={'DropdownContainer'}\n wrapperRef={this.ZIndexRef}\n style={style}\n className={cx({\n [styles.alignRight()]: this.props.align === 'right' && !isIE11,\n })}\n >\n {this.props.children}\n </ZIndex>\n );\n\n return this.props.disablePortal ? content : <RenderContainer>{content}</RenderContainer>;\n }\n\n private ZIndexRef = (element: Nullable<HTMLDivElement>) => {\n this.dom = element;\n };\n\n private isElement = (node: Nullable<Element>): node is Element => {\n return node instanceof Element;\n };\n\n public position = () => {\n const target = this.props.getParent();\n const dom = this.dom;\n\n if (target && this.isElement(target) && dom) {\n const targetRect = target.getBoundingClientRect();\n const { body, documentElement: docEl } = document;\n\n if (!docEl) {\n throw Error('There is no \"documentElement\" in \"document\"');\n }\n\n const scrollX = window.pageXOffset || docEl.scrollLeft || 0;\n const scrollY = window.pageYOffset || docEl.scrollTop || 0;\n\n let left = null;\n let right = null;\n\n if (this.props.align === 'right') {\n const docWidth = docEl.offsetWidth || 0;\n right = docWidth - (targetRect.right + scrollX) + this.getProps().offsetX;\n } else {\n left = targetRect.left + scrollX + this.getProps().offsetX;\n }\n\n const { offsetY = 0 } = this.props;\n let bottom = null;\n let top: number | null = targetRect.bottom + scrollY + offsetY;\n\n const distanceToBottom = docEl.clientHeight - targetRect.bottom;\n const dropdownHeight = this.getHeight();\n\n if (distanceToBottom < dropdownHeight && targetRect.top > dropdownHeight) {\n const clientHeight = this.state.isDocumentElementRoot ? docEl.clientHeight : body.scrollHeight;\n\n top = null;\n bottom = clientHeight + offsetY - scrollY - targetRect.top;\n }\n\n const position = {\n top,\n left,\n right,\n bottom,\n };\n\n this.setState({\n minWidth: this.getMinWidth(),\n position: this.props.disablePortal ? this.convertToRelativePosition(position) : position,\n });\n }\n };\n\n private getHeight = () => {\n if (!this.isElement(this.dom)) {\n return 0;\n }\n const child = this.dom.children.item(0);\n if (!child) {\n return 0;\n }\n return child.getBoundingClientRect().height;\n };\n\n private getMinWidth = () => {\n const target = this.props.getParent();\n if (!target || !this.isElement(target)) {\n return 0;\n }\n return target.getBoundingClientRect().width;\n };\n\n private convertToRelativePosition = (position: DropdownContainerPosition): DropdownContainerPosition => {\n const target = this.props.getParent();\n const { offsetX = 0, offsetY = 0 } = this.props;\n const { top, bottom, left, right } = position;\n if (target && this.isElement(target)) {\n const targetHeight = target.getBoundingClientRect().height;\n return {\n top: top !== null ? targetHeight + offsetY : null,\n bottom: bottom !== null ? targetHeight + offsetY : null,\n left: left !== null ? offsetX : null,\n right: right !== null ? offsetX : null,\n };\n }\n return {\n top: offsetY,\n bottom: null,\n left: offsetX,\n right: null,\n };\n };\n}\n"]}
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
|
|
2
|
+
|
|
3
|
+
var _templateObject;
|
|
4
|
+
|
|
5
|
+
import { css, memoizeStyle } from "../../../lib/theming/Emotion";
|
|
6
|
+
export var styles = memoizeStyle({
|
|
7
|
+
alignRight: function alignRight() {
|
|
8
|
+
return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n display: flex;\n flex-direction: row-reverse;\n "])));
|
|
9
|
+
}
|
|
10
|
+
});
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"sources":["DropdownContainer.styles.ts"],"names":["css","memoizeStyle","styles","alignRight"],"mappings":"oHAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;AAEA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,UADiC,wBACpB;AACX,WAAOH,GAAP;;;;AAID,GANgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\n\nexport const styles = memoizeStyle({\n alignRight() {\n return css`\n display: flex;\n flex-direction: row-reverse;\n `;\n },\n});\n"]}
|
|
@@ -10,6 +10,7 @@ import { isMenuHeader } from "../../../components/MenuHeader";
|
|
|
10
10
|
import { ThemeContext } from "../../../lib/theming/ThemeContext";
|
|
11
11
|
import { cx } from "../../../lib/theming/Emotion";
|
|
12
12
|
import { getRootNode, rootNode } from "../../../lib/rootNode";
|
|
13
|
+
import { isIE11 } from "../../../lib/client";
|
|
13
14
|
import { styles } from "../Menu.styles";
|
|
14
15
|
import { isActiveElement } from "../isActiveElement";
|
|
15
16
|
export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_React$Component) {
|
|
@@ -174,11 +175,8 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
|
|
|
174
175
|
}
|
|
175
176
|
|
|
176
177
|
return /*#__PURE__*/React.createElement("div", {
|
|
177
|
-
className: cx((_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.shadow(this.theme)] = this.props.hasShadow, _cx)),
|
|
178
|
-
style:
|
|
179
|
-
width: this.props.width,
|
|
180
|
-
maxHeight: this.props.maxHeight
|
|
181
|
-
},
|
|
178
|
+
className: cx(getAlignRightClass(this.props), (_cx = {}, _cx[styles.root(this.theme)] = true, _cx[styles.shadow(this.theme)] = this.props.hasShadow, _cx)),
|
|
179
|
+
style: getStyle(this.props),
|
|
182
180
|
ref: this.setRootNode
|
|
183
181
|
}, /*#__PURE__*/React.createElement(ScrollContainer, {
|
|
184
182
|
ref: this.refScrollContainer,
|
|
@@ -293,6 +291,7 @@ export var Menu = rootNode(_class = (_temp = _class2 = /*#__PURE__*/function (_R
|
|
|
293
291
|
|
|
294
292
|
return Menu;
|
|
295
293
|
}(React.Component), _class2.__KONTUR_REACT_UI__ = 'Menu', _class2.defaultProps = {
|
|
294
|
+
align: 'left',
|
|
296
295
|
width: 'auto',
|
|
297
296
|
maxHeight: 300,
|
|
298
297
|
hasShadow: true,
|
|
@@ -310,4 +309,29 @@ function childrenToArray(children) {
|
|
|
310
309
|
ret.push(child);
|
|
311
310
|
});
|
|
312
311
|
return ret;
|
|
313
|
-
}
|
|
312
|
+
}
|
|
313
|
+
|
|
314
|
+
var getStyle = function getStyle(props) {
|
|
315
|
+
if (props.align === 'right') {
|
|
316
|
+
return {
|
|
317
|
+
maxWidth: props.width,
|
|
318
|
+
minWidth: props.width,
|
|
319
|
+
maxHeight: props.maxHeight
|
|
320
|
+
};
|
|
321
|
+
}
|
|
322
|
+
|
|
323
|
+
return {
|
|
324
|
+
width: props.width,
|
|
325
|
+
maxHeight: props.maxHeight
|
|
326
|
+
};
|
|
327
|
+
};
|
|
328
|
+
|
|
329
|
+
var getAlignRightClass = function getAlignRightClass(props) {
|
|
330
|
+
if (props.align === 'right') {
|
|
331
|
+
var _cx2;
|
|
332
|
+
|
|
333
|
+
return cx((_cx2 = {}, _cx2[styles.alignRight()] = !isIE11, _cx2[styles.alignRightIE11()] = isIE11, _cx2[styles.alignRightIE11FixAutoWidth()] = isIE11 && props.width === 'auto', _cx2));
|
|
334
|
+
}
|
|
335
|
+
|
|
336
|
+
return null;
|
|
337
|
+
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Menu.tsx"],"names":["React","ScrollContainer","isMenuItem","isMenuHeader","ThemeContext","cx","getRootNode","rootNode","styles","isActiveElement","Menu","state","highlightedIndex","unmounted","getChildList","enableIconPadding","Children","toArray","props","children","some","x","isValidElement","icon","map","child","index","cloneElement","_enableIconPadding","highlight","ref","refHighlighted","bind","onClick","select","onMouseEnter","onMouseLeave","unhighlight","refScrollContainer","scrollContainer","scrollToSelected","highlighted","scrollTo","scrollToTop","scrollToBottom","setState","componentWillUnmount","render","theme","renderMain","up","move","down","enter","event","reset","hasHighlightedItem","highlightItem","isEmpty","root","shadow","hasShadow","width","maxHeight","setRootNode","preventWindowScroll","disableScrollContainer","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","length","indexOf","isExist","Component","__KONTUR_REACT_UI__","defaultProps","value","undefined","ret","forEach","push"],"mappings":"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","sourcesContent":["import React from 'react';\n\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { isMenuItem, MenuItem, MenuItemProps } from '../../components/MenuItem';\nimport { isMenuHeader } from '../../components/MenuHeader';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\n\nimport { styles } from './Menu.styles';\nimport { isActiveElement } from './isActiveElement';\n\nexport interface MenuProps {\n children: React.ReactNode;\n hasShadow?: boolean;\n maxHeight?: number | string;\n onItemClick?: () => void;\n width?: number | string;\n preventWindowScroll?: boolean;\n /**\n * Отключение кастомного скролла контейнера\n */\n disableScrollContainer?: boolean;\n}\n\nexport interface MenuState {\n highlightedIndex: number;\n}\n\n@rootNode\nexport class Menu extends React.Component<MenuProps, MenuState> {\n public static __KONTUR_REACT_UI__ = 'Menu';\n\n public static defaultProps = {\n width: 'auto',\n maxHeight: 300,\n hasShadow: true,\n preventWindowScroll: true,\n };\n\n public state = {\n highlightedIndex: -1,\n };\n\n private theme!: Theme;\n private scrollContainer: Nullable<ScrollContainer>;\n private highlighted: Nullable<MenuItem>;\n private unmounted = false;\n private setRootNode!: TSetRootNode;\n\n public componentWillUnmount() {\n this.unmounted = true;\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public up() {\n this.move(-1);\n }\n\n /**\n * @public\n */\n public down() {\n this.move(1);\n }\n\n /**\n * @public\n */\n public enter(event: React.SyntheticEvent<HTMLElement>) {\n return this.select(this.state.highlightedIndex, true, event);\n }\n\n /**\n * @public\n */\n public reset() {\n this.setState({ highlightedIndex: -1 });\n }\n\n /**\n * @public\n */\n public hasHighlightedItem() {\n return this.state.highlightedIndex !== -1;\n }\n\n public highlightItem(index: number) {\n this.highlight(index);\n }\n\n private renderMain() {\n if (this.isEmpty()) {\n return null;\n }\n\n return (\n <div\n className={cx({\n [styles.root(this.theme)]: true,\n [styles.shadow(this.theme)]: this.props.hasShadow,\n })}\n style={{ width: this.props.width, maxHeight: this.props.maxHeight }}\n ref={this.setRootNode}\n >\n <ScrollContainer\n ref={this.refScrollContainer}\n maxHeight={this.props.maxHeight}\n preventWindowScroll={this.props.preventWindowScroll}\n disabled={this.props.disableScrollContainer}\n >\n <div className={styles.scrollContainer(this.theme)}>{this.getChildList()}</div>\n </ScrollContainer>\n </div>\n );\n }\n\n private getChildList = () => {\n const enableIconPadding = React.Children.toArray(this.props.children).some(\n (x) => React.isValidElement(x) && x.props.icon,\n );\n\n return React.Children.map(this.props.children, (child, index) => {\n if (!child) {\n return child;\n }\n if (typeof child === 'string' || typeof child === 'number') {\n return child;\n }\n\n if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {\n child = React.cloneElement(child, {\n _enableIconPadding: true,\n });\n }\n if (isActiveElement(child)) {\n const highlight = this.state.highlightedIndex === index;\n\n let ref = child.ref;\n if (highlight && typeof child.ref !== 'string') {\n ref = this.refHighlighted.bind(this, child.ref);\n }\n\n return React.cloneElement<MenuItemProps, MenuItem>(child, {\n ref,\n state: highlight ? 'hover' : child.props.state,\n onClick: this.select.bind(this, index, false),\n onMouseEnter: this.highlight.bind(this, index),\n onMouseLeave: this.unhighlight,\n });\n }\n return child;\n });\n };\n\n private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n this.scrollContainer = scrollContainer;\n };\n\n private refHighlighted(\n originalRef: ((menuItem: MenuItem | null) => any) | React.RefObject<MenuItem> | null | undefined,\n menuItem: MenuItem | null,\n ) {\n this.highlighted = menuItem;\n\n if (typeof originalRef === 'function') {\n originalRef(menuItem);\n }\n }\n\n private scrollToSelected = () => {\n if (this.scrollContainer && this.highlighted) {\n this.scrollContainer.scrollTo(getRootNode(this.highlighted));\n }\n };\n\n private scrollToTop = () => {\n if (this.scrollContainer) {\n this.scrollContainer.scrollToTop();\n }\n };\n\n private scrollToBottom = () => {\n if (this.scrollContainer) {\n this.scrollContainer.scrollToBottom();\n }\n };\n\n private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n const item = childrenToArray(this.props.children)[index];\n if (isActiveElement(item)) {\n if (shouldHandleHref && item.props.href) {\n if (item.props.target) {\n window.open(item.props.href, item.props.target);\n } else {\n location.href = item.props.href;\n }\n }\n if (item.props.onClick) {\n item.props.onClick(event);\n }\n if (this.props.onItemClick) {\n this.props.onItemClick();\n }\n return true;\n }\n return false;\n }\n\n private highlight = (index: number) => {\n this.setState({ highlightedIndex: index });\n };\n\n private unhighlight = () => {\n this.setState({ highlightedIndex: -1 });\n };\n\n private move(step: number) {\n if (this.unmounted) {\n // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer\n return;\n }\n\n const children = childrenToArray(this.props.children);\n const activeElements = children.filter(isActiveElement);\n if (!activeElements.length) {\n return;\n }\n let index = this.state.highlightedIndex;\n do {\n index += step;\n if (index < 0) {\n index = children.length - 1;\n } else if (index > children.length) {\n index = 0;\n }\n\n const child = children[index];\n if (isActiveElement(child)) {\n this.setState({ highlightedIndex: index }, () => {\n switch (activeElements.indexOf(child)) {\n case 0:\n this.scrollToTop();\n break;\n case activeElements.length - 1:\n this.scrollToBottom();\n break;\n default:\n this.scrollToSelected();\n }\n });\n return;\n }\n } while (index !== this.state.highlightedIndex);\n }\n\n private isEmpty() {\n const { children } = this.props;\n return !children || !childrenToArray(children).filter(isExist).length;\n }\n}\n\nfunction isExist(value: any): value is any {\n return value !== null && value !== undefined;\n}\n\nfunction childrenToArray(children: React.ReactNode): React.ReactNode[] {\n const ret: React.ReactNode[] = [];\n // Use forEach instead of map to avoid cloning for key unifying.\n React.Children.forEach(children, (child) => {\n ret.push(child);\n });\n return ret;\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["Menu.tsx"],"names":["React","ScrollContainer","isMenuItem","isMenuHeader","ThemeContext","cx","getRootNode","rootNode","isIE11","styles","isActiveElement","Menu","state","highlightedIndex","unmounted","getChildList","enableIconPadding","Children","toArray","props","children","some","x","isValidElement","icon","map","child","index","cloneElement","_enableIconPadding","highlight","ref","refHighlighted","bind","onClick","select","onMouseEnter","onMouseLeave","unhighlight","refScrollContainer","scrollContainer","scrollToSelected","highlighted","scrollTo","scrollToTop","scrollToBottom","setState","componentWillUnmount","render","theme","renderMain","up","move","down","enter","event","reset","hasHighlightedItem","highlightItem","isEmpty","getAlignRightClass","root","shadow","hasShadow","getStyle","setRootNode","maxHeight","preventWindowScroll","disableScrollContainer","originalRef","menuItem","shouldHandleHref","item","childrenToArray","href","target","window","open","location","onItemClick","step","activeElements","filter","length","indexOf","isExist","Component","__KONTUR_REACT_UI__","defaultProps","align","width","value","undefined","ret","forEach","push","maxWidth","minWidth","alignRight","alignRightIE11","alignRightIE11FixAutoWidth"],"mappings":"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","sourcesContent":["import React, { CSSProperties } from 'react';\n\nimport { ScrollContainer } from '../../components/ScrollContainer';\nimport { isMenuItem, MenuItem, MenuItemProps } from '../../components/MenuItem';\nimport { isMenuHeader } from '../../components/MenuHeader';\nimport { Nullable } from '../../typings/utility-types';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { cx } from '../../lib/theming/Emotion';\nimport { getRootNode, rootNode, TSetRootNode } from '../../lib/rootNode';\nimport { isIE11 } from '../../lib/client';\n\nimport { styles } from './Menu.styles';\nimport { isActiveElement } from './isActiveElement';\n\nexport interface MenuProps {\n children: React.ReactNode;\n hasShadow?: boolean;\n maxHeight?: number | string;\n onItemClick?: () => void;\n width?: number | string;\n preventWindowScroll?: boolean;\n /**\n * Отключение кастомного скролла контейнера\n */\n disableScrollContainer?: boolean;\n align?: 'left' | 'right';\n}\n\nexport interface MenuState {\n highlightedIndex: number;\n}\n\n@rootNode\nexport class Menu extends React.Component<MenuProps, MenuState> {\n public static __KONTUR_REACT_UI__ = 'Menu';\n\n public static defaultProps = {\n align: 'left',\n width: 'auto',\n maxHeight: 300,\n hasShadow: true,\n preventWindowScroll: true,\n };\n\n public state = {\n highlightedIndex: -1,\n };\n\n private theme!: Theme;\n private scrollContainer: Nullable<ScrollContainer>;\n private highlighted: Nullable<MenuItem>;\n private unmounted = false;\n private setRootNode!: TSetRootNode;\n\n public componentWillUnmount() {\n this.unmounted = true;\n }\n\n public render() {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n /**\n * @public\n */\n public up() {\n this.move(-1);\n }\n\n /**\n * @public\n */\n public down() {\n this.move(1);\n }\n\n /**\n * @public\n */\n public enter(event: React.SyntheticEvent<HTMLElement>) {\n return this.select(this.state.highlightedIndex, true, event);\n }\n\n /**\n * @public\n */\n public reset() {\n this.setState({ highlightedIndex: -1 });\n }\n\n /**\n * @public\n */\n public hasHighlightedItem() {\n return this.state.highlightedIndex !== -1;\n }\n\n public highlightItem(index: number) {\n this.highlight(index);\n }\n\n private renderMain() {\n if (this.isEmpty()) {\n return null;\n }\n\n return (\n <div\n className={cx(getAlignRightClass(this.props), {\n [styles.root(this.theme)]: true,\n [styles.shadow(this.theme)]: this.props.hasShadow,\n })}\n style={getStyle(this.props)}\n ref={this.setRootNode}\n >\n <ScrollContainer\n ref={this.refScrollContainer}\n maxHeight={this.props.maxHeight}\n preventWindowScroll={this.props.preventWindowScroll}\n disabled={this.props.disableScrollContainer}\n >\n <div className={styles.scrollContainer(this.theme)}>{this.getChildList()}</div>\n </ScrollContainer>\n </div>\n );\n }\n\n private getChildList = () => {\n const enableIconPadding = React.Children.toArray(this.props.children).some(\n (x) => React.isValidElement(x) && x.props.icon,\n );\n\n return React.Children.map(this.props.children, (child, index) => {\n if (!child) {\n return child;\n }\n if (typeof child === 'string' || typeof child === 'number') {\n return child;\n }\n\n if (enableIconPadding && (isMenuItem(child) || isMenuHeader(child))) {\n child = React.cloneElement(child, {\n _enableIconPadding: true,\n });\n }\n if (isActiveElement(child)) {\n const highlight = this.state.highlightedIndex === index;\n\n let ref = child.ref;\n if (highlight && typeof child.ref !== 'string') {\n ref = this.refHighlighted.bind(this, child.ref);\n }\n\n return React.cloneElement<MenuItemProps, MenuItem>(child, {\n ref,\n state: highlight ? 'hover' : child.props.state,\n onClick: this.select.bind(this, index, false),\n onMouseEnter: this.highlight.bind(this, index),\n onMouseLeave: this.unhighlight,\n });\n }\n return child;\n });\n };\n\n private refScrollContainer = (scrollContainer: Nullable<ScrollContainer>) => {\n this.scrollContainer = scrollContainer;\n };\n\n private refHighlighted(\n originalRef: ((menuItem: MenuItem | null) => any) | React.RefObject<MenuItem> | null | undefined,\n menuItem: MenuItem | null,\n ) {\n this.highlighted = menuItem;\n\n if (typeof originalRef === 'function') {\n originalRef(menuItem);\n }\n }\n\n private scrollToSelected = () => {\n if (this.scrollContainer && this.highlighted) {\n this.scrollContainer.scrollTo(getRootNode(this.highlighted));\n }\n };\n\n private scrollToTop = () => {\n if (this.scrollContainer) {\n this.scrollContainer.scrollToTop();\n }\n };\n\n private scrollToBottom = () => {\n if (this.scrollContainer) {\n this.scrollContainer.scrollToBottom();\n }\n };\n\n private select(index: number, shouldHandleHref: boolean, event: React.SyntheticEvent<HTMLElement>): boolean {\n const item = childrenToArray(this.props.children)[index];\n if (isActiveElement(item)) {\n if (shouldHandleHref && item.props.href) {\n if (item.props.target) {\n window.open(item.props.href, item.props.target);\n } else {\n location.href = item.props.href;\n }\n }\n if (item.props.onClick) {\n item.props.onClick(event);\n }\n if (this.props.onItemClick) {\n this.props.onItemClick();\n }\n return true;\n }\n return false;\n }\n\n private highlight = (index: number) => {\n this.setState({ highlightedIndex: index });\n };\n\n private unhighlight = () => {\n this.setState({ highlightedIndex: -1 });\n };\n\n private move(step: number) {\n if (this.unmounted) {\n // NOTE workaround, because `ComboBox` call `process.nextTick` in reducer\n return;\n }\n\n const children = childrenToArray(this.props.children);\n const activeElements = children.filter(isActiveElement);\n if (!activeElements.length) {\n return;\n }\n let index = this.state.highlightedIndex;\n do {\n index += step;\n if (index < 0) {\n index = children.length - 1;\n } else if (index > children.length) {\n index = 0;\n }\n\n const child = children[index];\n if (isActiveElement(child)) {\n this.setState({ highlightedIndex: index }, () => {\n switch (activeElements.indexOf(child)) {\n case 0:\n this.scrollToTop();\n break;\n case activeElements.length - 1:\n this.scrollToBottom();\n break;\n default:\n this.scrollToSelected();\n }\n });\n return;\n }\n } while (index !== this.state.highlightedIndex);\n }\n\n private isEmpty() {\n const { children } = this.props;\n return !children || !childrenToArray(children).filter(isExist).length;\n }\n}\n\nfunction isExist(value: any): value is any {\n return value !== null && value !== undefined;\n}\n\nfunction childrenToArray(children: React.ReactNode): React.ReactNode[] {\n const ret: React.ReactNode[] = [];\n // Use forEach instead of map to avoid cloning for key unifying.\n React.Children.forEach(children, (child) => {\n ret.push(child);\n });\n return ret;\n}\n\nconst getStyle = (props: MenuProps): CSSProperties => {\n if (props.align === 'right') {\n return {\n maxWidth: props.width,\n minWidth: props.width,\n maxHeight: props.maxHeight,\n };\n }\n\n return {\n width: props.width,\n maxHeight: props.maxHeight,\n };\n};\n\nconst getAlignRightClass = (props: MenuProps) => {\n if (props.align === 'right') {\n return cx({\n [styles.alignRight()]: !isIE11,\n [styles.alignRightIE11()]: isIE11,\n [styles.alignRightIE11FixAutoWidth()]: isIE11 && props.width === 'auto',\n });\n }\n\n return null;\n};\n"]}
|
package/internal/Menu/Menu.d.ts
CHANGED
|
@@ -10,6 +10,7 @@ export interface MenuProps {
|
|
|
10
10
|
* Отключение кастомного скролла контейнера
|
|
11
11
|
*/
|
|
12
12
|
disableScrollContainer?: boolean;
|
|
13
|
+
align?: 'left' | 'right';
|
|
13
14
|
}
|
|
14
15
|
export interface MenuState {
|
|
15
16
|
highlightedIndex: number;
|
|
@@ -17,6 +18,7 @@ export interface MenuState {
|
|
|
17
18
|
export declare class Menu extends React.Component<MenuProps, MenuState> {
|
|
18
19
|
static __KONTUR_REACT_UI__: string;
|
|
19
20
|
static defaultProps: {
|
|
21
|
+
align: string;
|
|
20
22
|
width: string;
|
|
21
23
|
maxHeight: number;
|
|
22
24
|
hasShadow: boolean;
|
|
@@ -1,16 +1,25 @@
|
|
|
1
1
|
import _taggedTemplateLiteralLoose from "@babel/runtime/helpers/esm/taggedTemplateLiteralLoose";
|
|
2
2
|
|
|
3
|
-
var _templateObject, _templateObject2, _templateObject3;
|
|
3
|
+
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _templateObject5, _templateObject6;
|
|
4
4
|
|
|
5
5
|
import { css, memoizeStyle } from "../../../lib/theming/Emotion";
|
|
6
6
|
export var styles = memoizeStyle({
|
|
7
7
|
root: function root(t) {
|
|
8
8
|
return css(_templateObject || (_templateObject = _taggedTemplateLiteralLoose(["\n background: ", ";\n box-sizing: content-box;\n overflow: auto;\n padding: 0 0;\n "])), t.menuBgDefault);
|
|
9
9
|
},
|
|
10
|
+
alignRight: function alignRight() {
|
|
11
|
+
return css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteralLoose(["\n flex: 1 1 100%;\n "])));
|
|
12
|
+
},
|
|
13
|
+
alignRightIE11: function alignRightIE11() {
|
|
14
|
+
return css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteralLoose(["\n float: right;\n width: 100%;\n "])));
|
|
15
|
+
},
|
|
16
|
+
alignRightIE11FixAutoWidth: function alignRightIE11FixAutoWidth() {
|
|
17
|
+
return css(_templateObject4 || (_templateObject4 = _taggedTemplateLiteralLoose(["\n box-sizing: border-box !important; // override root styles\n overflow: hidden !important; // override root styles\n "])));
|
|
18
|
+
},
|
|
10
19
|
scrollContainer: function scrollContainer(t) {
|
|
11
|
-
return css(
|
|
20
|
+
return css(_templateObject5 || (_templateObject5 = _taggedTemplateLiteralLoose(["\n padding: ", " 0;\n "])), t.menuPaddingY);
|
|
12
21
|
},
|
|
13
22
|
shadow: function shadow(t) {
|
|
14
|
-
return css(
|
|
23
|
+
return css(_templateObject6 || (_templateObject6 = _taggedTemplateLiteralLoose(["\n border: ", ";\n box-shadow: ", ";\n "])), t.menuBorder, t.menuShadow);
|
|
15
24
|
}
|
|
16
25
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["Menu.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuBgDefault","scrollContainer","menuPaddingY","shadow","menuBorder","menuShadow"],"mappings":"
|
|
1
|
+
{"version":3,"sources":["Menu.styles.ts"],"names":["css","memoizeStyle","styles","root","t","menuBgDefault","alignRight","alignRightIE11","alignRightIE11FixAutoWidth","scrollContainer","menuPaddingY","shadow","menuBorder","menuShadow"],"mappings":"8MAAA,SAASA,GAAT,EAAcC,YAAd,QAAkC,2BAAlC;;;AAGA,OAAO,IAAMC,MAAM,GAAGD,YAAY,CAAC;AACjCE,EAAAA,IADiC,gBAC5BC,CAD4B,EAClB;AACb,WAAOJ,GAAP;AACgBI,IAAAA,CAAC,CAACC,aADlB;;;;;AAMD,GARgC;;AAUjCC,EAAAA,UAViC,wBAUpB;AACX,WAAON,GAAP;;;AAGD,GAdgC;;AAgBjCO,EAAAA,cAhBiC,4BAgBhB;AACf,WAAOP,GAAP;;;;AAID,GArBgC;;AAuBjCQ,EAAAA,0BAvBiC,wCAuBJ;AAC3B,WAAOR,GAAP;;;;AAID,GA5BgC;;AA8BjCS,EAAAA,eA9BiC,2BA8BjBL,CA9BiB,EA8BP;AACxB,WAAOJ,GAAP;AACaI,IAAAA,CAAC,CAACM,YADf;;AAGD,GAlCgC;;AAoCjCC,EAAAA,MApCiC,kBAoC1BP,CApC0B,EAoChB;AACf,WAAOJ,GAAP;AACYI,IAAAA,CAAC,CAACQ,UADd;AAEgBR,IAAAA,CAAC,CAACS,UAFlB;;AAID,GAzCgC,EAAD,CAA3B","sourcesContent":["import { css, memoizeStyle } from '../../lib/theming/Emotion';\nimport { Theme } from '../../lib/theming/Theme';\n\nexport const styles = memoizeStyle({\n root(t: Theme) {\n return css`\n background: ${t.menuBgDefault};\n box-sizing: content-box;\n overflow: auto;\n padding: 0 0;\n `;\n },\n\n alignRight() {\n return css`\n flex: 1 1 100%;\n `;\n },\n\n alignRightIE11() {\n return css`\n float: right;\n width: 100%;\n `;\n },\n\n alignRightIE11FixAutoWidth() {\n return css`\n box-sizing: border-box !important; // override root styles\n overflow: hidden !important; // override root styles\n `;\n },\n\n scrollContainer(t: Theme) {\n return css`\n padding: ${t.menuPaddingY} 0;\n `;\n },\n\n shadow(t: Theme) {\n return css`\n border: ${t.menuBorder};\n box-shadow: ${t.menuShadow};\n `;\n },\n});\n"]}
|
|
@@ -1,6 +1,9 @@
|
|
|
1
1
|
import { Theme } from '../../lib/theming/Theme';
|
|
2
2
|
export declare const styles: {
|
|
3
3
|
root(t: Theme): string;
|
|
4
|
+
alignRight(): string;
|
|
5
|
+
alignRightIE11(): string;
|
|
6
|
+
alignRightIE11FixAutoWidth(): string;
|
|
4
7
|
scrollContainer(t: Theme): string;
|
|
5
8
|
shadow(t: Theme): string;
|
|
6
9
|
};
|