npm - @skbkontur/react-ui - Versions diffs - 2.17.6 → 2.17.8 - Mend

@skbkontur/react-ui 2.17.6 → 2.17.8

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.

Files changed (33) hide show

package/CHANGELOG.md CHANGED Viewed

@@ -3,6 +3,29 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
+## [2.17.8](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@2.17.7...@skbkontur/react-ui@2.17.8) (2022-02-22)
+### Bug Fixes
+* **ScrollContainer:** Исправили проблемы с масштабированием в Хроме ([ae77db2](https://github.com/skbkontur/retail-ui/commit/ae77db26f78e04185dbc3b7f2eea4b4536a2b8d6))
+* **SidePage:** Исправил положение залипшего заголовка после закрытия второго SidePage ([1c2a266](https://github.com/skbkontur/retail-ui/commit/1c2a266861da92dd66e322dd2922adae3acd86a3))
+## [2.17.7](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@2.17.6...@skbkontur/react-ui@2.17.7) (2021-11-26)
+### Bug Fixes
+* **TokenInput:** non-null assertion operator replaced with optional chaining ([#2671](https://github.com/skbkontur/retail-ui/issues/2671)) ([96f554d](https://github.com/skbkontur/retail-ui/commit/96f554d0310672b6747ae75dcdfb66c19e23ddd2))
 ## [2.17.6](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@2.17.5...@skbkontur/react-ui@2.17.6) (2021-11-09)

package/cjs/components/ScrollContainer/ScrollContainer.js CHANGED Viewed

@@ -344,9 +344,14 @@ ScrollContainer = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.
   getImmediateScrollState = function getImmediateScrollState() {
     if (!this.inner || this.inner.scrollTop === 0) {
       return 'top';
-    } else if (this.inner.scrollTop === this.inner.scrollHeight - this.inner.clientHeight) {
+    }
+    // Zoom in Chrome causes problems
+    // https://github.com/skbkontur/retail-ui/pull/2705
+    var maxScrollPos = this.inner.scrollHeight - this.inner.clientHeight;
+    if (Math.abs(maxScrollPos - this.inner.scrollTop) <= 1) {
       return 'bottom';
-    } else {
-      return 'scroll';
     }
+    return 'scroll';
   };return ScrollContainer;}(_react.default.Component);exports.ScrollContainer = ScrollContainer;ScrollContainer.__KONTUR_REACT_UI__ = 'ScrollContainer';ScrollContainer.propTypes = { invert: _propTypes.default.bool, maxHeight: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]), scrollBehaviour: _propTypes.default.oneOf(['auto', 'smooth']), preventWindowScroll: _propTypes.default.bool, onScrollStateChange: _propTypes.default.func };ScrollContainer.defaultProps = { scrollBehaviour: 'auto' };

package/cjs/components/ScrollContainer/ScrollContainer.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["ScrollContainer.tsx"],"names":["HIDE_SCROLLBAR_OFFSET","MIN_SCROLL_SIZE","ScrollContainer","state","scrollActive","scrollSize","scrollPos","hover","scrolling","scrollState","inner","scroll","refInner","element","props","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","refScroll","handleScrollWheel","handleNativeScroll","event","reflow","onScroll","preventDefault","LayoutEvents","emit","containerHeight","offsetHeight","contentHeight","scrollHeight","scrollTop","Math","max","getImmediateScrollState","onScrollStateChange","setState","handleScrollMouseDown","target","window","document","initialY","clientY","initialScrollTop","mouseMove","mouseMoveEvent","ratio","deltaY","Object","prototype","hasOwnProperty","call","returnValue","mouseUp","WheelEvent","handleMouseMove","right","currentTarget","getBoundingClientRect","pageX","setHover","handleMouseLeave","componentDidMount","componentDidUpdate","prevProps","render","scrollClass","jsStyles","scrollInvert","Boolean","invert","scrollHover","scrollStyle","top","height","innerStyle","marginRight","paddingRight","maxHeight","scrollBehavior","scrollBehaviour","root","children","scrollTo","maxScroll","offsetTop","minScroll","scrollToTop","scrollToBottom","clientHeight","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","string","number","oneOf","func","defaultProps"],"mappings":"kVAAA;AACA;AACA;;AAEA;AACA;;AAEA;;AAEA;;AAEA,IAAMA,qBAAqB,GAAG,EAA9B;AACA,IAAMC,eAAe,GAAG,EAAxB,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA4BaC,e;;;;;;;;;;;;;;;AAeJC,IAAAA,K,GAA8B;AACnCC,MAAAA,YAAY,EAAE,KADqB;AAEnCC,MAAAA,UAAU,EAAE,CAFuB;AAGnCC,MAAAA,SAAS,EAAE,CAHwB;;AAKnC;AACAC,MAAAA,KAAK,EAAE,KAN4B;AAOnC;AACAC,MAAAA,SAAS,EAAE,KARwB;AASnCC,MAAAA,WAAW,EAAE,KATsB,E;;;AAY7BC,IAAAA,K;AACAC,IAAAA,M;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6GAC,IAAAA,Q,GAAW,UAACC,OAAD,EAAiC;AAClD,UAAI,CAAC,MAAKH,KAAN,IAAeG,OAAf,IAA0B,MAAKC,KAAL,CAAWC,mBAAzC,EAA8D;AAC5DF,QAAAA,OAAO,CAACG,gBAAR,CAAyB,OAAzB,EAAkC,MAAKC,sBAAvC,EAA+D,EAAEC,OAAO,EAAE,KAAX,EAA/D;AACD;AACD,UAAI,MAAKR,KAAL,IAAc,CAACG,OAAnB,EAA4B;AAC1B,cAAKH,KAAL,CAAWS,mBAAX,CAA+B,OAA/B,EAAwC,MAAKF,sBAA7C;AACD;AACD,YAAKP,KAAL,GAAaG,OAAb;AACD,K;;AAEOO,IAAAA,S,GAAY,UAACP,OAAD,EAAiC;AACnD,UAAI,CAAC,MAAKF,MAAN,IAAgBE,OAApB,EAA6B;AAC3BA,QAAAA,OAAO,CAACG,gBAAR,CAAyB,OAAzB,EAAkC,MAAKK,iBAAvC,EAA0D,EAAEH,OAAO,EAAE,KAAX,EAA1D;AACD;AACD,UAAI,MAAKP,MAAL,IAAe,CAACE,OAApB,EAA6B;AAC3B,cAAKF,MAAL,CAAYQ,mBAAZ,CAAgC,OAAhC,EAAyC,MAAKE,iBAA9C;AACD;AACD,YAAKV,MAAL,GAAcE,OAAd;AACD,K;;AAEOS,IAAAA,kB,GAAqB,UAACC,KAAD,EAA0C;AACrE,YAAKC,MAAL;AACA,YAAKV,KAAL,CAAWW,QAAX,0BAAKX,KAAL,CAAWW,QAAX,CAAsBF,KAAtB;AACA,UAAI,MAAKT,KAAL,CAAWC,mBAAf,EAAoC;AAClCQ,QAAAA,KAAK,CAACG,cAAN;AACA;AACD;AACDC,MAAAA,YAAY,CAACC,IAAb;AACD,K;;AAEOJ,IAAAA,M,GAAS,YAAM;AACrB,UAAI,CAAC,MAAKd,KAAV,EAAiB;AACf;AACD;;AAED,UAAMmB,eAAe,GAAG,MAAKnB,KAAL,CAAWoB,YAAnC;AACA,UAAMC,aAAa,GAAG,MAAKrB,KAAL,CAAWsB,YAAjC;AACA,UAAMC,SAAS,GAAG,MAAKvB,KAAL,CAAWuB,SAA7B;;AAEA,UAAM7B,YAAY,GAAGyB,eAAe,GAAGE,aAAvC;;AAEA,UAAI,CAAC3B,YAAD,IAAiB,CAAC,MAAKD,KAAL,CAAWC,YAAjC,EAA+C;AAC7C;AACD;;AAED,UAAIC,UAAU,GAAG,CAAjB;AACA,UAAIC,SAAS,GAAG,CAAhB;AACA,UAAIG,WAAW,GAAG,MAAKN,KAAL,CAAWM,WAA7B;;AAEA,UAAIL,YAAJ,EAAkB;AAChBC,QAAAA,UAAU,GAAG6B,IAAI,CAACC,GAAL,CAAUN,eAAe,GAAGE,aAAnB,GAAoCF,eAA7C,EAA8D5B,eAA9D,CAAb;AACAK,QAAAA,SAAS,GAAI2B,SAAS,IAAIF,aAAa,GAAGF,eAApB,CAAV,IAAmDA,eAAe,GAAGxB,UAArE,CAAZ;AACD;;AAED;AACE,YAAKF,KAAL,CAAWC,YAAX,KAA4BA,YAA5B;AACA,YAAKD,KAAL,CAAWE,UAAX,KAA0BA,UAD1B;AAEA,YAAKF,KAAL,CAAWG,SAAX,KAAyBA,SAH3B;AAIE;AACAG,QAAAA,WAAW,GAAG,MAAK2B,uBAAL,EAAd;;AAEA,YAAI3B,WAAW,KAAK,MAAKN,KAAL,CAAWM,WAA/B,EAA4C;AAC1C,gBAAKK,KAAL,CAAWuB,mBAAX,0BAAKvB,KAAL,CAAWuB,mBAAX,CAAiC5B,WAAjC;AACD;;AAED,cAAK6B,QAAL,CAAc;AACZlC,UAAAA,YAAY,EAAZA,YADY;AAEZC,UAAAA,UAAU,EAAVA,UAFY;AAGZC,UAAAA,SAAS,EAATA,SAHY;AAIZG,UAAAA,WAAW,EAAXA,WAJY,EAAd;;AAMD;AACF,K;;AAEO8B,IAAAA,qB,GAAwB,UAAChB,KAAD,EAA6C;AAC3E,UAAI,CAAC,MAAKb,KAAV,EAAiB;AACf;AACD;;AAED,UAAM8B,MAAgB,GAAGC,MAAM,CAACC,QAAhC;AACA,UAAMC,QAAQ,GAAGpB,KAAK,CAACqB,OAAvB;AACA,UAAMC,gBAAgB,GAAG,MAAKnC,KAAL,CAAWuB,SAApC;;AAEA,UAAMa,SAAS,GAAG,SAAZA,SAAY,CAACC,cAAD,EAAgC;AAChD,YAAI,CAAC,MAAKrC,KAAV,EAAiB;AACf;AACD;;AAED,YAAMsC,KAAK;AACT,SAAC,MAAKtC,KAAL,CAAWsB,YAAX,GAA0B,MAAKtB,KAAL,CAAWoB,YAAtC,KAAuD,MAAKpB,KAAL,CAAWoB,YAAX,GAA0B,MAAK3B,KAAL,CAAWE,UAA5F,CADF;AAEA,YAAM4C,MAAM,GAAG,CAACF,cAAc,CAACH,OAAf,GAAyBD,QAA1B,IAAsCK,KAArD;;AAEA,cAAKtC,KAAL,CAAWuB,SAAX,GAAuBY,gBAAgB,GAAGI,MAA1C;;AAEA,YAAIF,cAAc,CAACrB,cAAnB,EAAmC;AACjCqB,UAAAA,cAAc,CAACrB,cAAf;AACD;;AAED,YAAIwB,MAAM,CAACC,SAAP,CAAiBC,cAAjB,CAAgCC,IAAhC,CAAqCN,cAArC,EAAqD,aAArD,CAAJ,EAAyE;AACtEA,UAAAA,cAAD;;AAEGO,UAAAA,WAFH,GAEiB,KAFjB;AAGD;AACF,OApBD;;AAsBA,UAAMC,OAAO,GAAG,SAAVA,OAAU,GAAM;AACpBf,QAAAA,MAAM,CAACrB,mBAAP,CAA2B,WAA3B,EAAwC2B,SAAxC;AACAN,QAAAA,MAAM,CAACrB,mBAAP,CAA2B,SAA3B,EAAsCoC,OAAtC;AACA,cAAKjB,QAAL,CAAc,EAAE9B,SAAS,EAAE,KAAb,EAAd;AACD,OAJD;;AAMAgC,MAAAA,MAAM,CAACxB,gBAAP,CAAwB,WAAxB,EAAqC8B,SAArC;AACAN,MAAAA,MAAM,CAACxB,gBAAP,CAAwB,SAAxB,EAAmCuC,OAAnC;AACA,YAAKjB,QAAL,CAAc,EAAE9B,SAAS,EAAE,IAAb,EAAd;;AAEAe,MAAAA,KAAK,CAACG,cAAN;AACD,K;;AAEOL,IAAAA,iB,GAAoB,UAACE,KAAD,EAAkB;AAC5C,UAAI,CAAC,MAAKb,KAAN,IAAe,EAAEa,KAAK,YAAYiC,UAAnB,CAAnB,EAAmD;AACjD;AACD;;AAED,UAAIjC,KAAK,CAAC0B,MAAN,GAAe,CAAf,IAAoB,MAAKvC,KAAL,CAAWsB,YAAX,IAA2B,MAAKtB,KAAL,CAAWuB,SAAX,GAAuB,MAAKvB,KAAL,CAAWoB,YAArF,EAAmG;AACjG;AACD;AACD,UAAIP,KAAK,CAAC0B,MAAN,GAAe,CAAf,IAAoB,MAAKvC,KAAL,CAAWuB,SAAX,IAAwB,CAAhD,EAAmD;AACjD;AACD;;AAED,YAAKvB,KAAL,CAAWuB,SAAX,IAAwBV,KAAK,CAAC0B,MAA9B;AACA1B,MAAAA,KAAK,CAACG,cAAN;AACD,K;;AAEOT,IAAAA,sB,GAAyB,UAACM,KAAD,EAAkB;AACjD,UAAI,CAAC,MAAKb,KAAN,IAAe,EAAEa,KAAK,YAAYiC,UAAnB,CAAnB,EAAmD;AACjD;AACD;;AAED,UAAI,MAAKrD,KAAL,CAAWC,YAAf,EAA6B;AAC3B,YAAImB,KAAK,CAAC0B,MAAN,GAAe,CAAf,IAAoB,MAAKvC,KAAL,CAAWsB,YAAX,IAA2B,MAAKtB,KAAL,CAAWuB,SAAX,GAAuB,MAAKvB,KAAL,CAAWoB,YAArF,EAAmG;AACjGP,UAAAA,KAAK,CAACG,cAAN;AACA,iBAAO,KAAP;AACD;AACD,YAAIH,KAAK,CAAC0B,MAAN,GAAe,CAAf,IAAoB,MAAKvC,KAAL,CAAWuB,SAAX,IAAwB,CAAhD,EAAmD;AACjDV,UAAAA,KAAK,CAACG,cAAN;AACA,iBAAO,KAAP;AACD;AACF;AACF,K;;AAEO+B,IAAAA,e,GAAkB,UAAClC,KAAD,EAA6C;AACrE,UAAMmC,KAAK,GAAGnC,KAAK,CAACoC,aAAN,CAAoBC,qBAApB,GAA4CF,KAA5C,GAAoDnC,KAAK,CAACsC,KAAxE;AACA,YAAKC,QAAL,CAAcJ,KAAK,IAAI,EAAvB;AACD,K;;AAEOK,IAAAA,gB,GAAmB,YAAM;AAC/B,YAAKD,QAAL,CAAc,KAAd;AACD,K,6DAzQME,iB,GAAP,6BAA2B,CACzB,KAAKxC,MAAL,GACD,C,QAEMyC,kB,GAAP,4BAA0BC,SAA1B,EAA2D,CACzD,IAAI,KAAKxD,KAAT,EAAgB,CACd,IAAIwD,SAAS,CAACnD,mBAAV,IAAiC,CAAC,KAAKD,KAAL,CAAWC,mBAAjD,EAAsE,CACpE,KAAKL,KAAL,CAAWS,mBAAX,CAA+B,OAA/B,EAAwC,KAAKF,sBAA7C,EACD,CACD,IAAI,CAACiD,SAAS,CAACnD,mBAAX,IAAkC,KAAKD,KAAL,CAAWC,mBAAjD,EAAsE,CACpE,KAAKL,KAAL,CAAWM,gBAAX,CAA4B,OAA5B,EAAqC,KAAKC,sBAA1C,EAAkE,EAAEC,OAAO,EAAE,KAAX,EAAlE,EACD,CACF,CACD,KAAKM,MAAL,GACD,C,QAEM2C,M,GAAP,kBAAgB,CACd,IAAMhE,KAAK,GAAG,KAAKA,KAAnB,CACA,IAAMW,KAAK,GAAG,KAAKA,KAAnB,CACA,IAAIH,MAAM,GAAG,IAAb,CAEA,IAAIR,KAAK,CAACC,YAAV,EAAwB,SACtB,IAAMgE,WAAW,GAAG,wCACjBC,0BAAS1D,MAAT,EADiB,IACG,IADH,MAEjB0D,0BAASC,YAAT,EAFiB,IAESC,OAAO,CAACzD,KAAK,CAAC0D,MAAP,CAFhB,MAGjBH,0BAASI,WAAT,EAHiB,IAGQtE,KAAK,CAACI,KAAN,IAAeJ,KAAK,CAACK,SAH7B,OAApB,CAKA,IAAMkE,WAAW,GAAG,EAClBC,GAAG,EAAExE,KAAK,CAACG,SADO,EAElBsE,MAAM,EAAEzE,KAAK,CAACE,UAFI,EAApB,CAIAM,MAAM,gBACJ,sCACE,GAAG,EAAE,KAAKS,SADZ,EAEE,SAAS,EAAEgD,WAFb,EAGE,KAAK,EAAEM,WAHT,EAIE,WAAW,EAAE,KAAKnC,qBAJpB,GADF,CAQD,CAED,IAAMsC,UAA+B,GAAG,EACtC;AACAC,MAAAA,WAAW,EAAE,CAAC,CAAD,GAAK9E,qBAFoB,EAGtC+E,YAAY,EAAE/E,qBAAqB,GAAG,qCAHA,EAKtCgF,SAAS,EAAElE,KAAK,CAACkE,SALqB,EAMtCC,cAAc,EAAEnE,KAAK,CAACoE,eANgB,EAAxC,CASA,oBACE,6BAAC,4BAAD,EAAmB,KAAKpE,KAAxB,eACE,sCAAK,SAAS,EAAEuD,0BAASc,IAAT,EAAhB,EAAiC,WAAW,EAAE,KAAK1B,eAAnD,EAAoE,YAAY,EAAE,KAAKM,gBAAvF,IACGpD,MADH,eAEE,sCACE,YAAS,wBADX,EAEE,SAAS,EAAE0D,0BAAS3D,KAAT,EAFb,EAGE,KAAK,EAAEmE,UAHT,EAIE,GAAG,EAAE,KAAKjE,QAJZ,EAKE,QAAQ,EAAE,KAAKU,kBALjB,IAOGR,KAAK,CAACsE,QAPT,CAFF,CADF,CADF,CAgBD,C,CAED;AACF;AACA,K,QACSC,Q,GAAP,kBAAgBxE,OAAhB,EAAsC,CACpC,IAAI,CAACA,OAAD,IAAY,CAAC,KAAKH,KAAtB,EAA6B,CAC3B,OACD,CACD,IAAM4E,SAAS,GAAGzE,OAAO,CAAC0E,SAA1B,CACA,IAAI,KAAK7E,KAAL,CAAWuB,SAAX,GAAuBqD,SAA3B,EAAsC,CACpC,KAAK5E,KAAL,CAAWuB,SAAX,GAAuBqD,SAAvB,CACA,OACD,CAED,IAAME,SAAS,GAAG3E,OAAO,CAAC0E,SAAR,GAAoB1E,OAAO,CAACmB,YAA5B,GAA2C,KAAKtB,KAAL,CAAWoB,YAAxE,CACA,IAAI,KAAKpB,KAAL,CAAWuB,SAAX,GAAuBuD,SAA3B,EAAsC,CACpC,KAAK9E,KAAL,CAAWuB,SAAX,GAAuBuD,SAAvB,CACD,CACF,C,CAED;AACF;AACA,K,QACSC,W,GAAP,uBAAqB,CACnB,IAAI,CAAC,KAAK/E,KAAV,EAAiB,CACf,OACD,CACD,KAAKA,KAAL,CAAWuB,SAAX,GAAuB,CAAvB,CACD,C,CAED;AACF;AACA,K,QACSyD,c,GAAP,0BAAwB,CACtB,IAAI,CAAC,KAAKhF,KAAV,EAAiB,CACf,OACD,CACD,KAAKA,KAAL,CAAWuB,SAAX,GAAuB,KAAKvB,KAAL,CAAWsB,YAAX,GAA0B,KAAKtB,KAAL,CAAWoB,YAA5D,CACD,C,QAkKOgC,Q,GAAR,kBAAiBvD,KAAjB,EAAiC,CAC/B,IAAI,KAAKJ,KAAL,CAAWI,KAAX,KAAqBA,KAAzB,EAAgC,CAC9B,KAAK+B,QAAL,CAAc,EAAE/B,KAAK,EAALA,KAAF,EAAd,EACD,CACF,C;AAEO6B,EAAAA,uB,GAAR,mCAA8D;AAC5D,QAAI,CAAC,KAAK1B,KAAN,IAAe,KAAKA,KAAL,CAAWuB,SAAX,KAAyB,CAA5C,EAA+C;AAC7C,aAAO,KAAP;AACD,KAFD,MAEO,IAAI,KAAKvB,KAAL,CAAWuB,SAAX,KAAyB,KAAKvB,KAAL,CAAWsB,YAAX,GAA0B,KAAKtB,KAAL,CAAWiF,YAAlE,EAAgF;AACrF,aAAO,QAAP;AACD,KAFM,MAEA;AACL,aAAO,QAAP;AACD;AACF,G,0BAvTkCC,eAAMC,S,4CAA9B3F,e,CACG4F,mB,GAAsB,iB,CADzB5F,e,CAGG6F,S,GAAY,EACxBvB,MAAM,EAAEwB,mBAAUC,IADM,EAExBjB,SAAS,EAAEgB,mBAAUE,SAAV,CAAoB,CAACF,mBAAUG,MAAX,EAAmBH,mBAAUI,MAA7B,CAApB,CAFa,EAGxBlB,eAAe,EAAEc,mBAAUK,KAAV,CAAgB,CAAC,MAAD,EAAS,QAAT,CAAhB,CAHO,EAIxBtF,mBAAmB,EAAEiF,mBAAUC,IAJP,EAKxB5D,mBAAmB,EAAE2D,mBAAUM,IALP,E,CAHfpG,e,CAWGqG,Y,GAAe,EAC3BrB,eAAe,EAAE,MADU,E","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './ScrollContainer.styles';\r\n\r\nconst HIDE_SCROLLBAR_OFFSET = 30;\r\nconst MIN_SCROLL_SIZE = 20;\r\n\r\nexport type ScrollContainerScrollState = 'top' \| 'scroll' \| 'bottom';\r\n\r\nexport type ScrollBehaviour = 'auto' \| 'smooth';\r\n\r\nexport interface ScrollContainerProps extends CommonProps {\r\n invert?: boolean;\r\n maxHeight?: React.CSSProperties['maxHeight'];\r\n preventWindowScroll?: boolean;\r\n /*\r\n Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\r\n * @default 'auto'\r\n /\r\n scrollBehaviour?: ScrollBehaviour;\r\n onScrollStateChange?: (scrollState: ScrollContainerScrollState) => void;\r\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport interface ScrollContainerState {\r\n scrollActive: boolean;\r\n hover: boolean;\r\n scrolling: boolean;\r\n scrollSize: number;\r\n scrollPos: number;\r\n scrollState: ScrollContainerScrollState;\r\n}\r\n\r\nexport class ScrollContainer extends React.Component<ScrollContainerProps, ScrollContainerState> {\r\n public static __KONTUR_REACT_UI__ = 'ScrollContainer';\r\n\r\n public static propTypes = {\r\n invert: PropTypes.bool,\r\n maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),\r\n preventWindowScroll: PropTypes.bool,\r\n onScrollStateChange: PropTypes.func,\r\n };\r\n\r\n public static defaultProps = {\r\n scrollBehaviour: 'auto',\r\n };\r\n\r\n public state: ScrollContainerState = {\r\n scrollActive: false,\r\n scrollSize: 0,\r\n scrollPos: 0,\r\n\r\n // Mouse is moving where big scrollbar can be located.\r\n hover: false,\r\n // True when scroll is following mouse (mouse down on scroll).\r\n scrolling: false,\r\n scrollState: 'top',\r\n };\r\n\r\n private inner: Nullable<HTMLElement>;\r\n private scroll: Nullable<HTMLElement>;\r\n\r\n public componentDidMount() {\r\n this.reflow();\r\n }\r\n\r\n public componentDidUpdate(prevProps: ScrollContainerProps) {\r\n if (this.inner) {\r\n if (prevProps.preventWindowScroll && !this.props.preventWindowScroll) {\r\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\r\n }\r\n if (!prevProps.preventWindowScroll && this.props.preventWindowScroll) {\r\n this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\r\n }\r\n }\r\n this.reflow();\r\n }\r\n\r\n public render() {\r\n const state = this.state;\r\n const props = this.props;\r\n let scroll = null;\r\n\r\n if (state.scrollActive) {\r\n const scrollClass = cn({\r\n [jsStyles.scroll()]: true,\r\n [jsStyles.scrollInvert()]: Boolean(props.invert),\r\n [jsStyles.scrollHover()]: state.hover \|\| state.scrolling,\r\n });\r\n const scrollStyle = {\r\n top: state.scrollPos,\r\n height: state.scrollSize,\r\n };\r\n scroll = (\r\n <div\r\n ref={this.refScroll}\r\n className={scrollClass}\r\n style={scrollStyle}\r\n onMouseDown={this.handleScrollMouseDown}\r\n />\r\n );\r\n }\r\n\r\n const innerStyle: React.CSSProperties = {\r\n // hide vertical scrollbar with a little extra space\r\n marginRight: -1 HIDE_SCROLLBAR_OFFSET,\r\n paddingRight: HIDE_SCROLLBAR_OFFSET - getScrollWidth(),\r\n\r\n maxHeight: props.maxHeight,\r\n scrollBehavior: props.scrollBehaviour,\r\n };\r\n\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <div className={jsStyles.root()} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>\r\n {scroll}\r\n <div\r\n data-tid=\"ScrollContainer__inner\"\r\n className={jsStyles.inner()}\r\n style={innerStyle}\r\n ref={this.refInner}\r\n onScroll={this.handleNativeScroll}\r\n >\r\n {props.children}\r\n </div>\r\n </div>\r\n </CommonWrapper>\r\n );\r\n }\r\n\r\n /*\r\n @public\r\n /\r\n public scrollTo(element: HTMLElement) {\r\n if (!element \|\| !this.inner) {\r\n return;\r\n }\r\n const maxScroll = element.offsetTop;\r\n if (this.inner.scrollTop > maxScroll) {\r\n this.inner.scrollTop = maxScroll;\r\n return;\r\n }\r\n\r\n const minScroll = element.offsetTop + element.scrollHeight - this.inner.offsetHeight;\r\n if (this.inner.scrollTop < minScroll) {\r\n this.inner.scrollTop = minScroll;\r\n }\r\n }\r\n\r\n /\r\n @public\r\n /\r\n public scrollToTop() {\r\n if (!this.inner) {\r\n return;\r\n }\r\n this.inner.scrollTop = 0;\r\n }\r\n\r\n /\r\n @public\r\n /\r\n public scrollToBottom() {\r\n if (!this.inner) {\r\n return;\r\n }\r\n this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;\r\n }\r\n\r\n private refInner = (element: HTMLElement \| null) => {\r\n if (!this.inner && element && this.props.preventWindowScroll) {\r\n element.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\r\n }\r\n if (this.inner && !element) {\r\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\r\n }\r\n this.inner = element;\r\n };\r\n\r\n private refScroll = (element: HTMLElement \| null) => {\r\n if (!this.scroll && element) {\r\n element.addEventListener('wheel', this.handleScrollWheel, { passive: false });\r\n }\r\n if (this.scroll && !element) {\r\n this.scroll.removeEventListener('wheel', this.handleScrollWheel);\r\n }\r\n this.scroll = element;\r\n };\r\n\r\n private handleNativeScroll = (event: React.UIEvent<HTMLDivElement>) => {\r\n this.reflow();\r\n this.props.onScroll?.(event);\r\n if (this.props.preventWindowScroll) {\r\n event.preventDefault();\r\n return;\r\n }\r\n LayoutEvents.emit();\r\n };\r\n\r\n private reflow = () => {\r\n if (!this.inner) {\r\n return;\r\n }\r\n\r\n const containerHeight = this.inner.offsetHeight;\r\n const contentHeight = this.inner.scrollHeight;\r\n const scrollTop = this.inner.scrollTop;\r\n\r\n const scrollActive = containerHeight < contentHeight;\r\n\r\n if (!scrollActive && !this.state.scrollActive) {\r\n return;\r\n }\r\n\r\n let scrollSize = 0;\r\n let scrollPos = 0;\r\n let scrollState = this.state.scrollState;\r\n\r\n if (scrollActive) {\r\n scrollSize = Math.max((containerHeight / contentHeight) containerHeight, MIN_SCROLL_SIZE);\r\n scrollPos = (scrollTop / (contentHeight - containerHeight)) * (containerHeight - scrollSize);\r\n }\r\n\r\n if (\r\n this.state.scrollActive !== scrollActive \|\|\r\n this.state.scrollSize !== scrollSize \|\|\r\n this.state.scrollPos !== scrollPos\r\n ) {\r\n scrollState = this.getImmediateScrollState();\r\n\r\n if (scrollState !== this.state.scrollState) {\r\n this.props.onScrollStateChange?.(scrollState);\r\n }\r\n\r\n this.setState({\r\n scrollActive,\r\n scrollSize,\r\n scrollPos,\r\n scrollState,\r\n });\r\n }\r\n };\r\n\r\n private handleScrollMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\r\n if (!this.inner) {\r\n return;\r\n }\r\n\r\n const target: Document = window.document;\r\n const initialY = event.clientY;\r\n const initialScrollTop = this.inner.scrollTop;\r\n\r\n const mouseMove = (mouseMoveEvent: MouseEvent) => {\r\n if (!this.inner) {\r\n return;\r\n }\r\n\r\n const ratio =\r\n (this.inner.scrollHeight - this.inner.offsetHeight) / (this.inner.offsetHeight - this.state.scrollSize);\r\n const deltaY = (mouseMoveEvent.clientY - initialY) * ratio;\r\n\r\n this.inner.scrollTop = initialScrollTop + deltaY;\r\n\r\n if (mouseMoveEvent.preventDefault) {\r\n mouseMoveEvent.preventDefault();\r\n }\r\n\r\n if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {\r\n (mouseMoveEvent as MouseEvent & {\r\n returnValue: boolean;\r\n }).returnValue = false;\r\n }\r\n };\r\n\r\n const mouseUp = () => {\r\n target.removeEventListener('mousemove', mouseMove);\r\n target.removeEventListener('mouseup', mouseUp);\r\n this.setState({ scrolling: false });\r\n };\r\n\r\n target.addEventListener('mousemove', mouseMove);\r\n target.addEventListener('mouseup', mouseUp);\r\n this.setState({ scrolling: true });\r\n\r\n event.preventDefault();\r\n };\r\n\r\n private handleScrollWheel = (event: Event) => {\r\n if (!this.inner \|\| !(event instanceof WheelEvent)) {\r\n return;\r\n }\r\n\r\n if (event.deltaY > 0 && this.inner.scrollHeight <= this.inner.scrollTop + this.inner.offsetHeight) {\r\n return;\r\n }\r\n if (event.deltaY < 0 && this.inner.scrollTop <= 0) {\r\n return;\r\n }\r\n\r\n this.inner.scrollTop += event.deltaY;\r\n event.preventDefault();\r\n };\r\n\r\n private handleInnerScrollWheel = (event: Event) => {\r\n if (!this.inner \|\| !(event instanceof WheelEvent)) {\r\n return;\r\n }\r\n\r\n if (this.state.scrollActive) {\r\n if (event.deltaY > 0 && this.inner.scrollHeight <= this.inner.scrollTop + this.inner.offsetHeight) {\r\n event.preventDefault();\r\n return false;\r\n }\r\n if (event.deltaY < 0 && this.inner.scrollTop <= 0) {\r\n event.preventDefault();\r\n return false;\r\n }\r\n }\r\n };\r\n\r\n private handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\r\n const right = event.currentTarget.getBoundingClientRect().right - event.pageX;\r\n this.setHover(right <= 12);\r\n };\r\n\r\n private handleMouseLeave = () => {\r\n this.setHover(false);\r\n };\r\n\r\n private setHover(hover: boolean) {\r\n if (this.state.hover !== hover) {\r\n this.setState({ hover });\r\n }\r\n }\r\n\r\n private getImmediateScrollState(): ScrollContainerScrollState {\r\n if (!this.inner \|\| this.inner.scrollTop === 0) {\r\n return 'top';\r\n } else if (this.inner.scrollTop === this.inner.scrollHeight - this.inner.clientHeight) {\r\n return 'bottom';\r\n } else {\r\n return 'scroll';\r\n }\r\n }\r\n}\r\n"]}
1	+ {"version":3,"sources":["ScrollContainer.tsx"],"names":["HIDE_SCROLLBAR_OFFSET","MIN_SCROLL_SIZE","ScrollContainer","state","scrollActive","scrollSize","scrollPos","hover","scrolling","scrollState","inner","scroll","refInner","element","props","preventWindowScroll","addEventListener","handleInnerScrollWheel","passive","removeEventListener","refScroll","handleScrollWheel","handleNativeScroll","event","reflow","onScroll","preventDefault","LayoutEvents","emit","containerHeight","offsetHeight","contentHeight","scrollHeight","scrollTop","Math","max","getImmediateScrollState","onScrollStateChange","setState","handleScrollMouseDown","target","window","document","initialY","clientY","initialScrollTop","mouseMove","mouseMoveEvent","ratio","deltaY","Object","prototype","hasOwnProperty","call","returnValue","mouseUp","WheelEvent","handleMouseMove","right","currentTarget","getBoundingClientRect","pageX","setHover","handleMouseLeave","componentDidMount","componentDidUpdate","prevProps","render","scrollClass","jsStyles","scrollInvert","Boolean","invert","scrollHover","scrollStyle","top","height","innerStyle","marginRight","paddingRight","maxHeight","scrollBehavior","scrollBehaviour","root","children","scrollTo","maxScroll","offsetTop","minScroll","scrollToTop","scrollToBottom","maxScrollPos","clientHeight","abs","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","bool","oneOfType","string","number","oneOf","func","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport cn from 'classnames';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { getScrollWidth } from '../../lib/dom/getScrollWidth';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './ScrollContainer.styles';\r\n\r\nconst HIDE_SCROLLBAR_OFFSET = 30;\r\nconst MIN_SCROLL_SIZE = 20;\r\n\r\nexport type ScrollContainerScrollState = 'top' \| 'scroll' \| 'bottom';\r\n\r\nexport type ScrollBehaviour = 'auto' \| 'smooth';\r\n\r\nexport interface ScrollContainerProps extends CommonProps {\r\n invert?: boolean;\r\n maxHeight?: React.CSSProperties['maxHeight'];\r\n preventWindowScroll?: boolean;\r\n /*\r\n Поведение скролла (https://developer.mozilla.org/en-US/docs/Web/CSS/scroll-behavior)\r\n * @default 'auto'\r\n /\r\n scrollBehaviour?: ScrollBehaviour;\r\n onScrollStateChange?: (scrollState: ScrollContainerScrollState) => void;\r\n onScroll?: (e: React.UIEvent<HTMLDivElement>) => void;\r\n}\r\n\r\nexport interface ScrollContainerState {\r\n scrollActive: boolean;\r\n hover: boolean;\r\n scrolling: boolean;\r\n scrollSize: number;\r\n scrollPos: number;\r\n scrollState: ScrollContainerScrollState;\r\n}\r\n\r\nexport class ScrollContainer extends React.Component<ScrollContainerProps, ScrollContainerState> {\r\n public static __KONTUR_REACT_UI__ = 'ScrollContainer';\r\n\r\n public static propTypes = {\r\n invert: PropTypes.bool,\r\n maxHeight: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\r\n scrollBehaviour: PropTypes.oneOf(['auto', 'smooth']),\r\n preventWindowScroll: PropTypes.bool,\r\n onScrollStateChange: PropTypes.func,\r\n };\r\n\r\n public static defaultProps = {\r\n scrollBehaviour: 'auto',\r\n };\r\n\r\n public state: ScrollContainerState = {\r\n scrollActive: false,\r\n scrollSize: 0,\r\n scrollPos: 0,\r\n\r\n // Mouse is moving where big scrollbar can be located.\r\n hover: false,\r\n // True when scroll is following mouse (mouse down on scroll).\r\n scrolling: false,\r\n scrollState: 'top',\r\n };\r\n\r\n private inner: Nullable<HTMLElement>;\r\n private scroll: Nullable<HTMLElement>;\r\n\r\n public componentDidMount() {\r\n this.reflow();\r\n }\r\n\r\n public componentDidUpdate(prevProps: ScrollContainerProps) {\r\n if (this.inner) {\r\n if (prevProps.preventWindowScroll && !this.props.preventWindowScroll) {\r\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\r\n }\r\n if (!prevProps.preventWindowScroll && this.props.preventWindowScroll) {\r\n this.inner.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\r\n }\r\n }\r\n this.reflow();\r\n }\r\n\r\n public render() {\r\n const state = this.state;\r\n const props = this.props;\r\n let scroll = null;\r\n\r\n if (state.scrollActive) {\r\n const scrollClass = cn({\r\n [jsStyles.scroll()]: true,\r\n [jsStyles.scrollInvert()]: Boolean(props.invert),\r\n [jsStyles.scrollHover()]: state.hover \|\| state.scrolling,\r\n });\r\n const scrollStyle = {\r\n top: state.scrollPos,\r\n height: state.scrollSize,\r\n };\r\n scroll = (\r\n <div\r\n ref={this.refScroll}\r\n className={scrollClass}\r\n style={scrollStyle}\r\n onMouseDown={this.handleScrollMouseDown}\r\n />\r\n );\r\n }\r\n\r\n const innerStyle: React.CSSProperties = {\r\n // hide vertical scrollbar with a little extra space\r\n marginRight: -1 HIDE_SCROLLBAR_OFFSET,\r\n paddingRight: HIDE_SCROLLBAR_OFFSET - getScrollWidth(),\r\n\r\n maxHeight: props.maxHeight,\r\n scrollBehavior: props.scrollBehaviour,\r\n };\r\n\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <div className={jsStyles.root()} onMouseMove={this.handleMouseMove} onMouseLeave={this.handleMouseLeave}>\r\n {scroll}\r\n <div\r\n data-tid=\"ScrollContainer__inner\"\r\n className={jsStyles.inner()}\r\n style={innerStyle}\r\n ref={this.refInner}\r\n onScroll={this.handleNativeScroll}\r\n >\r\n {props.children}\r\n </div>\r\n </div>\r\n </CommonWrapper>\r\n );\r\n }\r\n\r\n /*\r\n @public\r\n /\r\n public scrollTo(element: HTMLElement) {\r\n if (!element \|\| !this.inner) {\r\n return;\r\n }\r\n const maxScroll = element.offsetTop;\r\n if (this.inner.scrollTop > maxScroll) {\r\n this.inner.scrollTop = maxScroll;\r\n return;\r\n }\r\n\r\n const minScroll = element.offsetTop + element.scrollHeight - this.inner.offsetHeight;\r\n if (this.inner.scrollTop < minScroll) {\r\n this.inner.scrollTop = minScroll;\r\n }\r\n }\r\n\r\n /\r\n @public\r\n /\r\n public scrollToTop() {\r\n if (!this.inner) {\r\n return;\r\n }\r\n this.inner.scrollTop = 0;\r\n }\r\n\r\n /\r\n @public\r\n /\r\n public scrollToBottom() {\r\n if (!this.inner) {\r\n return;\r\n }\r\n this.inner.scrollTop = this.inner.scrollHeight - this.inner.offsetHeight;\r\n }\r\n\r\n private refInner = (element: HTMLElement \| null) => {\r\n if (!this.inner && element && this.props.preventWindowScroll) {\r\n element.addEventListener('wheel', this.handleInnerScrollWheel, { passive: false });\r\n }\r\n if (this.inner && !element) {\r\n this.inner.removeEventListener('wheel', this.handleInnerScrollWheel);\r\n }\r\n this.inner = element;\r\n };\r\n\r\n private refScroll = (element: HTMLElement \| null) => {\r\n if (!this.scroll && element) {\r\n element.addEventListener('wheel', this.handleScrollWheel, { passive: false });\r\n }\r\n if (this.scroll && !element) {\r\n this.scroll.removeEventListener('wheel', this.handleScrollWheel);\r\n }\r\n this.scroll = element;\r\n };\r\n\r\n private handleNativeScroll = (event: React.UIEvent<HTMLDivElement>) => {\r\n this.reflow();\r\n this.props.onScroll?.(event);\r\n if (this.props.preventWindowScroll) {\r\n event.preventDefault();\r\n return;\r\n }\r\n LayoutEvents.emit();\r\n };\r\n\r\n private reflow = () => {\r\n if (!this.inner) {\r\n return;\r\n }\r\n\r\n const containerHeight = this.inner.offsetHeight;\r\n const contentHeight = this.inner.scrollHeight;\r\n const scrollTop = this.inner.scrollTop;\r\n\r\n const scrollActive = containerHeight < contentHeight;\r\n\r\n if (!scrollActive && !this.state.scrollActive) {\r\n return;\r\n }\r\n\r\n let scrollSize = 0;\r\n let scrollPos = 0;\r\n let scrollState = this.state.scrollState;\r\n\r\n if (scrollActive) {\r\n scrollSize = Math.max((containerHeight / contentHeight) containerHeight, MIN_SCROLL_SIZE);\r\n scrollPos = (scrollTop / (contentHeight - containerHeight)) * (containerHeight - scrollSize);\r\n }\r\n\r\n if (\r\n this.state.scrollActive !== scrollActive \|\|\r\n this.state.scrollSize !== scrollSize \|\|\r\n this.state.scrollPos !== scrollPos\r\n ) {\r\n scrollState = this.getImmediateScrollState();\r\n\r\n if (scrollState !== this.state.scrollState) {\r\n this.props.onScrollStateChange?.(scrollState);\r\n }\r\n\r\n this.setState({\r\n scrollActive,\r\n scrollSize,\r\n scrollPos,\r\n scrollState,\r\n });\r\n }\r\n };\r\n\r\n private handleScrollMouseDown = (event: React.MouseEvent<HTMLDivElement>) => {\r\n if (!this.inner) {\r\n return;\r\n }\r\n\r\n const target: Document = window.document;\r\n const initialY = event.clientY;\r\n const initialScrollTop = this.inner.scrollTop;\r\n\r\n const mouseMove = (mouseMoveEvent: MouseEvent) => {\r\n if (!this.inner) {\r\n return;\r\n }\r\n\r\n const ratio =\r\n (this.inner.scrollHeight - this.inner.offsetHeight) / (this.inner.offsetHeight - this.state.scrollSize);\r\n const deltaY = (mouseMoveEvent.clientY - initialY) * ratio;\r\n\r\n this.inner.scrollTop = initialScrollTop + deltaY;\r\n\r\n if (mouseMoveEvent.preventDefault) {\r\n mouseMoveEvent.preventDefault();\r\n }\r\n\r\n if (Object.prototype.hasOwnProperty.call(mouseMoveEvent, 'returnValue')) {\r\n (mouseMoveEvent as MouseEvent & {\r\n returnValue: boolean;\r\n }).returnValue = false;\r\n }\r\n };\r\n\r\n const mouseUp = () => {\r\n target.removeEventListener('mousemove', mouseMove);\r\n target.removeEventListener('mouseup', mouseUp);\r\n this.setState({ scrolling: false });\r\n };\r\n\r\n target.addEventListener('mousemove', mouseMove);\r\n target.addEventListener('mouseup', mouseUp);\r\n this.setState({ scrolling: true });\r\n\r\n event.preventDefault();\r\n };\r\n\r\n private handleScrollWheel = (event: Event) => {\r\n if (!this.inner \|\| !(event instanceof WheelEvent)) {\r\n return;\r\n }\r\n\r\n if (event.deltaY > 0 && this.inner.scrollHeight <= this.inner.scrollTop + this.inner.offsetHeight) {\r\n return;\r\n }\r\n if (event.deltaY < 0 && this.inner.scrollTop <= 0) {\r\n return;\r\n }\r\n\r\n this.inner.scrollTop += event.deltaY;\r\n event.preventDefault();\r\n };\r\n\r\n private handleInnerScrollWheel = (event: Event) => {\r\n if (!this.inner \|\| !(event instanceof WheelEvent)) {\r\n return;\r\n }\r\n\r\n if (this.state.scrollActive) {\r\n if (event.deltaY > 0 && this.inner.scrollHeight <= this.inner.scrollTop + this.inner.offsetHeight) {\r\n event.preventDefault();\r\n return false;\r\n }\r\n if (event.deltaY < 0 && this.inner.scrollTop <= 0) {\r\n event.preventDefault();\r\n return false;\r\n }\r\n }\r\n };\r\n\r\n private handleMouseMove = (event: React.MouseEvent<HTMLDivElement>) => {\r\n const right = event.currentTarget.getBoundingClientRect().right - event.pageX;\r\n this.setHover(right <= 12);\r\n };\r\n\r\n private handleMouseLeave = () => {\r\n this.setHover(false);\r\n };\r\n\r\n private setHover(hover: boolean) {\r\n if (this.state.hover !== hover) {\r\n this.setState({ hover });\r\n }\r\n }\r\n\r\n private getImmediateScrollState(): ScrollContainerScrollState {\r\n if (!this.inner \|\| this.inner.scrollTop === 0) {\r\n return 'top';\r\n }\r\n\r\n // Zoom in Chrome causes problems\r\n // https://github.com/skbkontur/retail-ui/pull/2705\r\n const maxScrollPos = this.inner.scrollHeight - this.inner.clientHeight;\r\n if (Math.abs(maxScrollPos - this.inner.scrollTop) <= 1) {\r\n return 'bottom';\r\n }\r\n\r\n return 'scroll';\r\n }\r\n}\r\n"]}

package/cjs/components/SidePage/SidePage.d.ts CHANGED Viewed

@@ -61,8 +61,9 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
     state: SidePageState;
     private theme;
     private stackSubscription;
-    private layoutRef;
+    private layout;
     private footer;
+    private header;
     componentDidMount(): void;
     componentWillUnmount(): void;
     /**
@@ -82,5 +83,7 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
     private handleClickOutside;
     private handleKeyDown;
     private requestClose;
+    private headerRef;
     private footerRef;
+    private layoutRef;
 }

package/cjs/components/SidePage/SidePage.js CHANGED Viewed

@@ -90,8 +90,9 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
     state = {};_this.
     theme = void 0;_this.
     stackSubscription = null;_this.
-    layoutRef = null;_this.
+    layout = null;_this.
     footer = null;_this.
+    header = null;_this.
@@ -110,10 +111,9 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
-    updateLayout = function () {
-      if (_this.footer) {
-        _this.footer.update();
-      }
+    updateLayout = function () {var _this$header, _this$footer;
+      (_this$header = _this.header) == null ? void 0 : _this$header.update();
+      (_this$footer = _this.footer) == null ? void 0 : _this$footer.update();
     };_this.
@@ -210,17 +210,18 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
         requestClose: _this.requestClose,
         getWidth: _this.getWidth,
         updateLayout: _this.updateLayout,
-        footerRef: _this.footerRef };
+        footerRef: _this.footerRef,
+        headerRef: _this.headerRef };
       return sidePageContextProps;
     };_this.
     getWidth = function () {
-      if (!_this.layoutRef) {
+      if (!_this.layout) {
         return 'auto';
       }
-      return _this.layoutRef.getBoundingClientRect().width;
+      return _this.layout.getBoundingClientRect().width;
     };_this.
@@ -310,9 +311,17 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
       }
     };_this.
+    headerRef = function (ref) {
+      _this.header = ref;
+    };_this.
     footerRef = function (ref) {
       _this.footer = ref;
+    };_this.
+    layoutRef = function (ref) {
+      _this.layout = ref;
     };return _this;}var _proto = SidePage.prototype;_proto.componentDidMount = function componentDidMount() {window.addEventListener('keydown', this.handleKeyDown);this.stackSubscription = _ModalStack.ModalStack.add(this, this.handleStackChange);};_proto.componentWillUnmount = function componentWillUnmount() {window.removeEventListener('keydown', this.handleKeyDown);if (this.stackSubscription != null) {this.stackSubscription.remove();}_ModalStack.ModalStack.remove(this);} /**
    * Обновляет разметку компонента.
    * @public
-   */;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$props = this.props,blockBackground = _this$props.blockBackground,disableAnimations = _this$props.disableAnimations;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement("div", null, blockBackground && this.renderShadow(), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, { in: true, classNames: this.getTransitionNames(), appear: !disableAnimations, enter: !disableAnimations, exit: false, timeout: { enter: TRANSITION_TIMEOUT, exit: TRANSITION_TIMEOUT } }, this.renderContainer()))));};_proto.renderContainer = function renderContainer() {var _cn,_this3 = this;var _this$props2 = this.props,width = _this$props2.width,blockBackground = _this$props2.blockBackground,fromLeft = _this$props2.fromLeft;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', "data-tid": "SidePage__root", className: (0, _classnames.default)((_cn = {}, _cn[_SidePage.jsStyles.root()] = true, _cn[_SidePage.jsStyles.leftSide(this.theme)] = Boolean(fromLeft), _cn)), onScroll: LayoutEvents.emit, createStackingContext: true, style: { width: width || (blockBackground ? 800 : 500) } }, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.handleClickOutside, active: true }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": "SidePage__container", className: (0, _classnames.default)(_SidePage.jsStyles.wrapper(this.theme), this.state.hasShadow && _SidePage.jsStyles.shadow(this.theme)), style: this.getSidebarStyle() }, /*#__PURE__*/_react.default.createElement("div", { ref: function ref(_) {return _this3.layoutRef = _;}, className: _SidePage.jsStyles.layout() }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Provider, { value: this.getSidePageContextProps() }, this.props.children)))));};_proto.renderShadow = function renderShadow() {var _cn2;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', className: _SidePage.jsStyles.overlay(), onScroll: LayoutEvents.emit }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, { key: "hbvs" }), /*#__PURE__*/_react.default.createElement("div", { key: "overlay", className: (0, _classnames.default)((_cn2 = {}, _cn2[_SidePage.jsStyles.background()] = true, _cn2[_SidePage.jsStyles.backgroundGray(this.theme)] = this.state.hasBackground, _cn2)) }));};_proto.getSidebarStyle = function getSidebarStyle() {var sidePageStyle = {};if (this.state.hasMargin) {if (this.props.fromLeft) {sidePageStyle.marginLeft = 20;} else {sidePageStyle.marginRight = 20;}}return sidePageStyle;};_proto.getTransitionNames = function getTransitionNames() {var transition = this.props.fromLeft ? _SidePage.jsStyles.transitionRight : _SidePage.jsStyles.transitionLeft;return { enter: transition(), enterActive: _SidePage.jsStyles.transitionActive(), exit: _SidePage.jsStyles.transitionLeave(), exitActive: _SidePage.jsStyles.transitionLeaveActive(), appear: transition(), appearActive: _SidePage.jsStyles.transitionActive() };};return SidePage;}(_react.default.Component);exports.SidePage = SidePage;SidePage.__KONTUR_REACT_UI__ = 'SidePage';SidePage.Header = _SidePageHeader.SidePageHeader;SidePage.Body = _SidePageBody.SidePageBody;SidePage.Footer = _SidePageFooter.SidePageFooter;SidePage.Container = _SidePageContainer.SidePageContainer;
+   */;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var _this$props = this.props,blockBackground = _this$props.blockBackground,disableAnimations = _this$props.disableAnimations;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement("div", null, blockBackground && this.renderShadow(), /*#__PURE__*/_react.default.createElement(_reactTransitionGroup.CSSTransition, { in: true, classNames: this.getTransitionNames(), appear: !disableAnimations, enter: !disableAnimations, exit: false, timeout: { enter: TRANSITION_TIMEOUT, exit: TRANSITION_TIMEOUT } }, this.renderContainer()))));};_proto.renderContainer = function renderContainer() {var _cn;var _this$props2 = this.props,width = _this$props2.width,blockBackground = _this$props2.blockBackground,fromLeft = _this$props2.fromLeft;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', "data-tid": "SidePage__root", className: (0, _classnames.default)((_cn = {}, _cn[_SidePage.jsStyles.root()] = true, _cn[_SidePage.jsStyles.leftSide(this.theme)] = Boolean(fromLeft), _cn)), onScroll: LayoutEvents.emit, createStackingContext: true, style: { width: width || (blockBackground ? 800 : 500) } }, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.handleClickOutside, active: true }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": "SidePage__container", className: (0, _classnames.default)(_SidePage.jsStyles.wrapper(this.theme), this.state.hasShadow && _SidePage.jsStyles.shadow(this.theme)), style: this.getSidebarStyle() }, /*#__PURE__*/_react.default.createElement("div", { ref: this.layoutRef, className: _SidePage.jsStyles.layout() }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Provider, { value: this.getSidePageContextProps() }, this.props.children)))));};_proto.renderShadow = function renderShadow() {var _cn2;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', className: _SidePage.jsStyles.overlay(), onScroll: LayoutEvents.emit }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, { key: "hbvs" }), /*#__PURE__*/_react.default.createElement("div", { key: "overlay", className: (0, _classnames.default)((_cn2 = {}, _cn2[_SidePage.jsStyles.background()] = true, _cn2[_SidePage.jsStyles.backgroundGray(this.theme)] = this.state.hasBackground, _cn2)) }));};_proto.getSidebarStyle = function getSidebarStyle() {var sidePageStyle = {};if (this.state.hasMargin) {if (this.props.fromLeft) {sidePageStyle.marginLeft = 20;} else {sidePageStyle.marginRight = 20;}}return sidePageStyle;};_proto.getTransitionNames = function getTransitionNames() {var transition = this.props.fromLeft ? _SidePage.jsStyles.transitionRight : _SidePage.jsStyles.transitionLeft;return { enter: transition(), enterActive: _SidePage.jsStyles.transitionActive(), exit: _SidePage.jsStyles.transitionLeave(), exitActive: _SidePage.jsStyles.transitionLeaveActive(), appear: transition(), appearActive: _SidePage.jsStyles.transitionActive() };};return SidePage;}(_react.default.Component);exports.SidePage = SidePage;SidePage.__KONTUR_REACT_UI__ = 'SidePage';SidePage.Header = _SidePageHeader.SidePageHeader;SidePage.Body = _SidePageBody.SidePageBody;SidePage.Footer = _SidePageFooter.SidePageFooter;SidePage.Container = _SidePageContainer.SidePageContainer;

package/cjs/components/SidePage/SidePage.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePage.tsx"],"names":["TRANSITION_TIMEOUT","SidePage","state","theme","stackSubscription","layoutRef","footer","updateLayout","update","getSidePageContextProps","hasHeader","hasFooter","hasPanel","React","Children","toArray","props","children","forEach","child","panel","sidePageContextProps","requestClose","getWidth","footerRef","getBoundingClientRect","width","handleStackChange","stack","sidePages","filter","x","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","ModalStack","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","clientWidth","handleKeyDown","disableClose","onClose","ref","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","jsStyles","root","leftSide","Boolean","LayoutEvents","emit","wrapper","shadow","getSidebarStyle","_","layout","overlay","background","backgroundGray","sidePageStyle","marginLeft","marginRight","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","SidePageHeader","Body","SidePageBody","Footer","SidePageFooter","Container","SidePageContainer"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { CSSTransition } from 'react-transition-group';\r\nimport cn from 'classnames';\r\n\r\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { stopPropagation } from '../../lib/events/stopPropagation';\r\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\r\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\r\nimport { RenderContainer } from '../../internal/RenderContainer';\r\nimport { RenderLayer } from '../../internal/RenderLayer';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { SidePageBody } from './SidePageBody';\r\nimport { SidePageContainer } from './SidePageContainer';\r\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\r\nimport { SidePageFooter } from './SidePageFooter';\r\nimport { SidePageHeader } from './SidePageHeader';\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { isFooter, isHeader } from './helpers';\r\n\r\nexport interface SidePageProps extends CommonProps {\r\n /*\r\n Добавить блокирующий фон, когда сайдпейдж открыт\r\n /\r\n blockBackground?: boolean;\r\n\r\n /\r\n Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\r\n /\r\n disableClose?: boolean;\r\n\r\n /\r\n Не закрывать сайдпейдж при клике на фон.\r\n /\r\n ignoreBackgroundClick?: boolean;\r\n\r\n /\r\n Задать ширину сайдпейджа\r\n /\r\n width?: number \| string;\r\n\r\n /\r\n Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\r\n * Escape или на крестик).\r\n /\r\n onClose?: () => void;\r\n\r\n /\r\n Показывать сайдпэйдж слева\r\n \r\n /\r\n fromLeft?: boolean;\r\n\r\n /*\r\n Отключить анимации\r\n \r\n /\r\n disableAnimations?: boolean;\r\n}\r\n\r\nexport interface SidePageState {\r\n stackPosition?: number;\r\n hasMargin?: boolean;\r\n hasShadow?: boolean;\r\n hasBackground?: boolean;\r\n}\r\n\r\nconst TRANSITION_TIMEOUT = 200;\r\n\r\n/*\r\n Сайдпейдж\r\n \r\n Содержит в себе три компоненты: SidePage.Header,\r\n * SidePage.Body и SidePage.Footer\r\n \r\n Для отображения серой плашки в футере в компонент\r\n * Footer необходимо передать пропс panel\r\n /\r\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\r\n public static __KONTUR_REACT_UI__ = 'SidePage';\r\n\r\n public static Header = SidePageHeader;\r\n public static Body = SidePageBody;\r\n public static Footer = SidePageFooter;\r\n public static Container = SidePageContainer;\r\n public state: SidePageState = {};\r\n private theme!: Theme;\r\n private stackSubscription: ModalStackSubscription \| null = null;\r\n private layoutRef: HTMLElement \| null = null;\r\n private footer: SidePageFooter \| null = null;\r\n\r\n public componentDidMount() {\r\n window.addEventListener('keydown', this.handleKeyDown);\r\n this.stackSubscription = ModalStack.add(this, this.handleStackChange);\r\n }\r\n\r\n public componentWillUnmount() {\r\n window.removeEventListener('keydown', this.handleKeyDown);\r\n if (this.stackSubscription != null) {\r\n this.stackSubscription.remove();\r\n }\r\n ModalStack.remove(this);\r\n }\r\n\r\n /\r\n Обновляет разметку компонента.\r\n * @public\r\n */\r\n public updateLayout = (): void => {\r\n if (this.footer) {\r\n this.footer.update();\r\n }\r\n };\r\n\r\n public render(): JSX.Element {\r\n return (\r\n <ThemeContext.Consumer>\r\n {theme => {\r\n this.theme = theme;\r\n return this.renderMain();\r\n }}\r\n </ThemeContext.Consumer>\r\n );\r\n }\r\n\r\n private renderMain() {\r\n const { blockBackground, disableAnimations } = this.props;\r\n\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <RenderContainer>\r\n <div>\r\n {blockBackground && this.renderShadow()}\r\n <CSSTransition\r\n in\r\n classNames={this.getTransitionNames()}\r\n appear={!disableAnimations}\r\n enter={!disableAnimations}\r\n exit={false}\r\n timeout={{\r\n enter: TRANSITION_TIMEOUT,\r\n exit: TRANSITION_TIMEOUT,\r\n }}\r\n >\r\n {this.renderContainer()}\r\n </CSSTransition>\r\n </div>\r\n </RenderContainer>\r\n </CommonWrapper>\r\n );\r\n }\r\n\r\n private renderContainer(): JSX.Element {\r\n const { width, blockBackground, fromLeft } = this.props;\r\n\r\n return (\r\n <ZIndex\r\n priority={'Sidepage'}\r\n data-tid=\"SidePage__root\"\r\n className={cn({\r\n [jsStyles.root()]: true,\r\n [jsStyles.leftSide(this.theme)]: Boolean(fromLeft),\r\n })}\r\n onScroll={LayoutEvents.emit}\r\n createStackingContext\r\n style={{ width: width \|\| (blockBackground ? 800 : 500) }}\r\n >\r\n <RenderLayer onClickOutside={this.handleClickOutside} active>\r\n <div\r\n data-tid=\"SidePage__container\"\r\n className={cn(jsStyles.wrapper(this.theme), this.state.hasShadow && jsStyles.shadow(this.theme))}\r\n style={this.getSidebarStyle()}\r\n >\r\n <div ref={_ => (this.layoutRef = _)} className={jsStyles.layout()}>\r\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\r\n {this.props.children}\r\n </SidePageContext.Provider>\r\n </div>\r\n </div>\r\n </RenderLayer>\r\n </ZIndex>\r\n );\r\n }\r\n\r\n private getSidePageContextProps = (): SidePageContextType => {\r\n let hasHeader = false;\r\n let hasFooter = false;\r\n let hasPanel = false;\r\n\r\n React.Children.toArray(this.props.children).forEach(child => {\r\n if (isHeader(child)) {\r\n hasHeader = true;\r\n }\r\n if (isFooter(child)) {\r\n hasFooter = true;\r\n if (child.props.panel) {\r\n hasPanel = true;\r\n }\r\n }\r\n });\r\n\r\n const sidePageContextProps: SidePageContextType = {\r\n hasHeader,\r\n hasFooter,\r\n hasPanel,\r\n requestClose: this.requestClose,\r\n getWidth: this.getWidth,\r\n updateLayout: this.updateLayout,\r\n footerRef: this.footerRef,\r\n };\r\n\r\n return sidePageContextProps;\r\n };\r\n\r\n private getWidth = () => {\r\n if (!this.layoutRef) {\r\n return 'auto';\r\n }\r\n return this.layoutRef.getBoundingClientRect().width;\r\n };\r\n\r\n private renderShadow(): JSX.Element {\r\n return (\r\n <ZIndex priority={'Sidepage'} className={jsStyles.overlay()} onScroll={LayoutEvents.emit}>\r\n <HideBodyVerticalScroll key=\"hbvs\" />\r\n <div\r\n key=\"overlay\"\r\n className={cn({\r\n [jsStyles.background()]: true,\r\n [jsStyles.backgroundGray(this.theme)]: this.state.hasBackground,\r\n })}\r\n />\r\n </ZIndex>\r\n );\r\n }\r\n\r\n private getSidebarStyle(): React.CSSProperties {\r\n const sidePageStyle: React.CSSProperties = {};\r\n\r\n if (this.state.hasMargin) {\r\n if (this.props.fromLeft) {\r\n sidePageStyle.marginLeft = 20;\r\n } else {\r\n sidePageStyle.marginRight = 20;\r\n }\r\n }\r\n\r\n return sidePageStyle;\r\n }\r\n\r\n private getTransitionNames(): Record<string, string> {\r\n const transition = this.props.fromLeft ? jsStyles.transitionRight : jsStyles.transitionLeft;\r\n\r\n return {\r\n enter: transition(),\r\n enterActive: jsStyles.transitionActive(),\r\n exit: jsStyles.transitionLeave(),\r\n exitActive: jsStyles.transitionLeaveActive(),\r\n appear: transition(),\r\n appearActive: jsStyles.transitionActive(),\r\n };\r\n }\r\n\r\n private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\r\n const sidePages = stack.filter(x => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\r\n const currentSidePagePosition = sidePages.indexOf(this);\r\n\r\n const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\r\n const hasShadow = sidePages.length < 3 \|\| currentSidePagePosition > sidePages.length - 3;\r\n const hasBackground = ModalStack.isBlocking(this);\r\n\r\n this.setState({\r\n stackPosition: stack.indexOf(this),\r\n hasMargin,\r\n hasShadow,\r\n hasBackground,\r\n });\r\n };\r\n\r\n private handleClickOutside = (e: Event) => {\r\n if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\r\n // ignore mousedown on window scrollbar\r\n if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\r\n return;\r\n }\r\n this.requestClose();\r\n }\r\n };\r\n\r\n private handleKeyDown = (e: KeyboardEvent) => {\r\n if (this.state.stackPosition !== 0) {\r\n return;\r\n }\r\n if (isKeyEscape(e)) {\r\n stopPropagation(e);\r\n this.requestClose();\r\n }\r\n };\r\n\r\n private requestClose = () => {\r\n if (this.props.disableClose) {\r\n return;\r\n }\r\n if (this.props.onClose) {\r\n this.props.onClose();\r\n }\r\n };\r\n\r\n private footerRef = (ref: SidePageFooter \| null) => {\r\n this.footer = ref;\r\n };\r\n}\r\n"]}
1	+ {"version":3,"sources":["SidePage.tsx"],"names":["TRANSITION_TIMEOUT","SidePage","state","theme","stackSubscription","layout","footer","header","updateLayout","update","getSidePageContextProps","hasHeader","hasFooter","hasPanel","React","Children","toArray","props","children","forEach","child","panel","sidePageContextProps","requestClose","getWidth","footerRef","headerRef","getBoundingClientRect","width","handleStackChange","stack","sidePages","filter","x","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","ModalStack","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","clientWidth","handleKeyDown","disableClose","onClose","ref","layoutRef","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","jsStyles","root","leftSide","Boolean","LayoutEvents","emit","wrapper","shadow","getSidebarStyle","overlay","background","backgroundGray","sidePageStyle","marginLeft","marginRight","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","SidePageHeader","Body","SidePageBody","Footer","SidePageFooter","Container","SidePageContainer"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport { CSSTransition } from 'react-transition-group';\r\nimport cn from 'classnames';\r\n\r\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { stopPropagation } from '../../lib/events/stopPropagation';\r\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\r\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\r\nimport { RenderContainer } from '../../internal/RenderContainer';\r\nimport { RenderLayer } from '../../internal/RenderLayer';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { SidePageBody } from './SidePageBody';\r\nimport { SidePageContainer } from './SidePageContainer';\r\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\r\nimport { SidePageFooter } from './SidePageFooter';\r\nimport { SidePageHeader } from './SidePageHeader';\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { isFooter, isHeader } from './helpers';\r\n\r\nexport interface SidePageProps extends CommonProps {\r\n /*\r\n Добавить блокирующий фон, когда сайдпейдж открыт\r\n /\r\n blockBackground?: boolean;\r\n\r\n /\r\n Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\r\n /\r\n disableClose?: boolean;\r\n\r\n /\r\n Не закрывать сайдпейдж при клике на фон.\r\n /\r\n ignoreBackgroundClick?: boolean;\r\n\r\n /\r\n Задать ширину сайдпейджа\r\n /\r\n width?: number \| string;\r\n\r\n /\r\n Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\r\n * Escape или на крестик).\r\n /\r\n onClose?: () => void;\r\n\r\n /\r\n Показывать сайдпэйдж слева\r\n \r\n /\r\n fromLeft?: boolean;\r\n\r\n /*\r\n Отключить анимации\r\n \r\n /\r\n disableAnimations?: boolean;\r\n}\r\n\r\nexport interface SidePageState {\r\n stackPosition?: number;\r\n hasMargin?: boolean;\r\n hasShadow?: boolean;\r\n hasBackground?: boolean;\r\n}\r\n\r\nconst TRANSITION_TIMEOUT = 200;\r\n\r\n/*\r\n Сайдпейдж\r\n \r\n Содержит в себе три компоненты: SidePage.Header,\r\n * SidePage.Body и SidePage.Footer\r\n \r\n Для отображения серой плашки в футере в компонент\r\n * Footer необходимо передать пропс panel\r\n /\r\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\r\n public static __KONTUR_REACT_UI__ = 'SidePage';\r\n\r\n public static Header = SidePageHeader;\r\n public static Body = SidePageBody;\r\n public static Footer = SidePageFooter;\r\n public static Container = SidePageContainer;\r\n public state: SidePageState = {};\r\n private theme!: Theme;\r\n private stackSubscription: ModalStackSubscription \| null = null;\r\n private layout: HTMLElement \| null = null;\r\n private footer: SidePageFooter \| null = null;\r\n private header: SidePageHeader \| null = null;\r\n\r\n public componentDidMount() {\r\n window.addEventListener('keydown', this.handleKeyDown);\r\n this.stackSubscription = ModalStack.add(this, this.handleStackChange);\r\n }\r\n\r\n public componentWillUnmount() {\r\n window.removeEventListener('keydown', this.handleKeyDown);\r\n if (this.stackSubscription != null) {\r\n this.stackSubscription.remove();\r\n }\r\n ModalStack.remove(this);\r\n }\r\n\r\n /\r\n Обновляет разметку компонента.\r\n * @public\r\n */\r\n public updateLayout = (): void => {\r\n this.header?.update();\r\n this.footer?.update();\r\n };\r\n\r\n public render(): JSX.Element {\r\n return (\r\n <ThemeContext.Consumer>\r\n {(theme) => {\r\n this.theme = theme;\r\n return this.renderMain();\r\n }}\r\n </ThemeContext.Consumer>\r\n );\r\n }\r\n\r\n private renderMain() {\r\n const { blockBackground, disableAnimations } = this.props;\r\n\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <RenderContainer>\r\n <div>\r\n {blockBackground && this.renderShadow()}\r\n <CSSTransition\r\n in\r\n classNames={this.getTransitionNames()}\r\n appear={!disableAnimations}\r\n enter={!disableAnimations}\r\n exit={false}\r\n timeout={{\r\n enter: TRANSITION_TIMEOUT,\r\n exit: TRANSITION_TIMEOUT,\r\n }}\r\n >\r\n {this.renderContainer()}\r\n </CSSTransition>\r\n </div>\r\n </RenderContainer>\r\n </CommonWrapper>\r\n );\r\n }\r\n\r\n private renderContainer(): JSX.Element {\r\n const { width, blockBackground, fromLeft } = this.props;\r\n\r\n return (\r\n <ZIndex\r\n priority={'Sidepage'}\r\n data-tid=\"SidePage__root\"\r\n className={cn({\r\n [jsStyles.root()]: true,\r\n [jsStyles.leftSide(this.theme)]: Boolean(fromLeft),\r\n })}\r\n onScroll={LayoutEvents.emit}\r\n createStackingContext\r\n style={{ width: width \|\| (blockBackground ? 800 : 500) }}\r\n >\r\n <RenderLayer onClickOutside={this.handleClickOutside} active>\r\n <div\r\n data-tid=\"SidePage__container\"\r\n className={cn(jsStyles.wrapper(this.theme), this.state.hasShadow && jsStyles.shadow(this.theme))}\r\n style={this.getSidebarStyle()}\r\n >\r\n <div ref={this.layoutRef} className={jsStyles.layout()}>\r\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\r\n {this.props.children}\r\n </SidePageContext.Provider>\r\n </div>\r\n </div>\r\n </RenderLayer>\r\n </ZIndex>\r\n );\r\n }\r\n\r\n private getSidePageContextProps = (): SidePageContextType => {\r\n let hasHeader = false;\r\n let hasFooter = false;\r\n let hasPanel = false;\r\n\r\n React.Children.toArray(this.props.children).forEach((child) => {\r\n if (isHeader(child)) {\r\n hasHeader = true;\r\n }\r\n if (isFooter(child)) {\r\n hasFooter = true;\r\n if (child.props.panel) {\r\n hasPanel = true;\r\n }\r\n }\r\n });\r\n\r\n const sidePageContextProps: SidePageContextType = {\r\n hasHeader,\r\n hasFooter,\r\n hasPanel,\r\n requestClose: this.requestClose,\r\n getWidth: this.getWidth,\r\n updateLayout: this.updateLayout,\r\n footerRef: this.footerRef,\r\n headerRef: this.headerRef,\r\n };\r\n\r\n return sidePageContextProps;\r\n };\r\n\r\n private getWidth = () => {\r\n if (!this.layout) {\r\n return 'auto';\r\n }\r\n return this.layout.getBoundingClientRect().width;\r\n };\r\n\r\n private renderShadow(): JSX.Element {\r\n return (\r\n <ZIndex priority={'Sidepage'} className={jsStyles.overlay()} onScroll={LayoutEvents.emit}>\r\n <HideBodyVerticalScroll key=\"hbvs\" />\r\n <div\r\n key=\"overlay\"\r\n className={cn({\r\n [jsStyles.background()]: true,\r\n [jsStyles.backgroundGray(this.theme)]: this.state.hasBackground,\r\n })}\r\n />\r\n </ZIndex>\r\n );\r\n }\r\n\r\n private getSidebarStyle(): React.CSSProperties {\r\n const sidePageStyle: React.CSSProperties = {};\r\n\r\n if (this.state.hasMargin) {\r\n if (this.props.fromLeft) {\r\n sidePageStyle.marginLeft = 20;\r\n } else {\r\n sidePageStyle.marginRight = 20;\r\n }\r\n }\r\n\r\n return sidePageStyle;\r\n }\r\n\r\n private getTransitionNames(): Record<string, string> {\r\n const transition = this.props.fromLeft ? jsStyles.transitionRight : jsStyles.transitionLeft;\r\n\r\n return {\r\n enter: transition(),\r\n enterActive: jsStyles.transitionActive(),\r\n exit: jsStyles.transitionLeave(),\r\n exitActive: jsStyles.transitionLeaveActive(),\r\n appear: transition(),\r\n appearActive: jsStyles.transitionActive(),\r\n };\r\n }\r\n\r\n private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\r\n const sidePages = stack.filter((x) => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\r\n const currentSidePagePosition = sidePages.indexOf(this);\r\n\r\n const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\r\n const hasShadow = sidePages.length < 3 \|\| currentSidePagePosition > sidePages.length - 3;\r\n const hasBackground = ModalStack.isBlocking(this);\r\n\r\n this.setState({\r\n stackPosition: stack.indexOf(this),\r\n hasMargin,\r\n hasShadow,\r\n hasBackground,\r\n });\r\n };\r\n\r\n private handleClickOutside = (e: Event) => {\r\n if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\r\n // ignore mousedown on window scrollbar\r\n if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\r\n return;\r\n }\r\n this.requestClose();\r\n }\r\n };\r\n\r\n private handleKeyDown = (e: KeyboardEvent) => {\r\n if (this.state.stackPosition !== 0) {\r\n return;\r\n }\r\n if (isKeyEscape(e)) {\r\n stopPropagation(e);\r\n this.requestClose();\r\n }\r\n };\r\n\r\n private requestClose = () => {\r\n if (this.props.disableClose) {\r\n return;\r\n }\r\n if (this.props.onClose) {\r\n this.props.onClose();\r\n }\r\n };\r\n\r\n private headerRef = (ref: SidePageHeader \| null) => {\r\n this.header = ref;\r\n };\r\n\r\n private footerRef = (ref: SidePageFooter \| null) => {\r\n this.footer = ref;\r\n };\r\n\r\n private layoutRef = (ref: HTMLDivElement \| null) => {\r\n this.layout = ref;\r\n };\r\n}\r\n"]}

package/cjs/components/SidePage/SidePageContext.d.ts CHANGED Viewed

@@ -1,9 +1,11 @@
 import React from 'react';
+import { SidePageHeader } from './SidePageHeader';
 import { SidePageFooter } from './SidePageFooter';
 export interface SidePageContextType {
     requestClose: () => void;
     getWidth: () => number | string;
     updateLayout: () => void;
+    headerRef: (ref: SidePageHeader | null) => void;
     footerRef: (ref: SidePageFooter | null) => void;
     hasHeader?: boolean;
     hasFooter?: boolean;

package/cjs/components/SidePage/SidePageContext.js CHANGED Viewed

@@ -12,10 +12,13 @@
 var SidePageContext = /*#__PURE__*/_react.default.createContext({
   requestClose: function requestClose() {return undefined;},
   getWidth: function getWidth() {return 'auto';},
   updateLayout: function updateLayout() {return undefined;},
+  headerRef: function headerRef() {return undefined;},
   footerRef: function footerRef() {return undefined;} });exports.SidePageContext = SidePageContext;

package/cjs/components/SidePage/SidePageContext.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePageContext.ts"],"names":["SidePageContext","React","createContext","requestClose","undefined","getWidth","updateLayout","footerRef","displayName"],"mappings":"6JAAA~~;;;;;;;;;;;;;;AAcO~~,IAAMA,eAAe,gBAAGC,eAAMC,aAAN,CAAyC;AACtEC,EAAAA,YAAY,EAAE,gCAAMC,SAAN,EADwD;AAEtEC,EAAAA,QAAQ,EAAE,4BAAM,MAAN,EAF4D;AAGtEC,EAAAA,YAAY,EAAE,gCAAMF,SAAN,EAHwD;AAItEG,EAAAA,SAAS,EAAE,6BAAMH,SAAN,EAJ2D,EAAzC,CAAxB,C;;;~~AAOPJ~~,eAAe,~~CAACQ~~,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React from 'react';\r\n\r\nimport { SidePageFooter } from './SidePageFooter';\r\n\r\nexport interface SidePageContextType {\r\n requestClose: () => void;\r\n getWidth: () => number \| string;\r\n updateLayout: () => void;\r\n footerRef: (ref: SidePageFooter \| null) => void;\r\n hasHeader?: boolean;\r\n hasFooter?: boolean;\r\n hasPanel?: boolean;\r\n}\r\n\r\nexport const SidePageContext = React.createContext<SidePageContextType>({\r\n requestClose: () => undefined,\r\n getWidth: () => 'auto',\r\n updateLayout: () => undefined,\r\n footerRef: () => undefined,\r\n});\r\n\r\nSidePageContext.displayName = 'SidePageContext';\r\n"]}
1	+ {"version":3,"sources":["SidePageContext.ts"],"names":["SidePageContext","React","createContext","requestClose","undefined","getWidth","updateLayout","headerRef","footerRef","displayName"],"mappings":"6JAAA;;;;;;;;;;;;;;;;AAgBO,IAAMA,eAAe,gBAAGC,eAAMC,aAAN,CAAyC;AACtEC,EAAAA,YAAY,EAAE,gCAAMC,SAAN,EADwD;AAEtEC,EAAAA,QAAQ,EAAE,4BAAM,MAAN,EAF4D;AAGtEC,EAAAA,YAAY,EAAE,gCAAMF,SAAN,EAHwD;AAItEG,EAAAA,SAAS,EAAE,6BAAMH,SAAN,EAJ2D;AAKtEI,EAAAA,SAAS,EAAE,6BAAMJ,SAAN,EAL2D,EAAzC,CAAxB,C;;;AAQPJ,eAAe,CAACS,WAAhB,GAA8B,iBAA9B","sourcesContent":["import React from 'react';\r\n\r\nimport { SidePageHeader } from './SidePageHeader';\r\nimport { SidePageFooter } from './SidePageFooter';\r\n\r\nexport interface SidePageContextType {\r\n requestClose: () => void;\r\n getWidth: () => number \| string;\r\n updateLayout: () => void;\r\n headerRef: (ref: SidePageHeader \| null) => void;\r\n footerRef: (ref: SidePageFooter \| null) => void;\r\n hasHeader?: boolean;\r\n hasFooter?: boolean;\r\n hasPanel?: boolean;\r\n}\r\n\r\nexport const SidePageContext = React.createContext<SidePageContextType>({\r\n requestClose: () => undefined,\r\n getWidth: () => 'auto',\r\n updateLayout: () => undefined,\r\n headerRef: () => undefined,\r\n footerRef: () => undefined,\r\n});\r\n\r\nSidePageContext.displayName = 'SidePageContext';\r\n"]}

package/cjs/components/SidePage/SidePageHeader.d.ts CHANGED Viewed

@@ -1,5 +1,6 @@
 import React from 'react';
 import { CommonProps } from '../../internal/CommonWrapper';
+import { SidePageContextType } from './SidePageContext';
 export interface SidePageHeaderProps extends CommonProps {
     children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
 }
@@ -16,8 +17,11 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     state: {
         isReadyToFix: boolean;
     };
+    static contextType: React.Context<SidePageContextType>;
+    context: SidePageContextType;
     private theme;
     private wrapper;
+    private sticky;
     private lastRegularHeight;
     get regularHeight(): number;
     get fixedHeaderHeight(): number;
@@ -31,4 +35,5 @@ export declare class SidePageHeader extends React.Component<SidePageHeaderProps,
     private renderClose;
     private updateReadyToFix;
     private wrapperRef;
+    private stickyRef;
 }

package/cjs/components/SidePage/SidePageHeader.js CHANGED Viewed

@@ -1,4 +1,4 @@
-"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageHeader = void 0;var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
+"use strict";var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");exports.__esModule = true;exports.SidePageHeader = void 0;var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _assertThisInitialized2 = _interopRequireDefault(require("@babel/runtime/helpers/assertThisInitialized"));var _inheritsLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/inheritsLoose"));var _react = _interopRequireDefault(require("react"));
 var _classnames = _interopRequireDefault(require("classnames"));
 var _Sticky = require("../Sticky");
@@ -31,8 +31,12 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
       isReadyToFix: false };_this.
+    context = _this.context;_this.
     theme = void 0;_this.
     wrapper = null;_this.
+    sticky = null;_this.
     lastRegularHeight = 0;_this.
@@ -53,13 +57,16 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
     componentDidMount = function () {
       window.addEventListener('scroll', _this.update, true);
+      _this.context.headerRef((0, _assertThisInitialized2.default)(_this));
     };_this.
     componentWillUnmount = function () {
       window.removeEventListener('scroll', _this.update, true);
+      _this.context.headerRef(null);
     };_this.
-    update = function () {
+    update = function () {var _this$sticky;
+      (_this$sticky = _this.sticky) == null ? void 0 : _this$sticky.reflow();
       _this.updateReadyToFix();
     };_this.
@@ -78,6 +85,12 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
@@ -138,4 +151,8 @@ SidePageHeader = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.d
     wrapperRef = function (el) {
       _this.wrapper = el;
-    };return _this;}var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { ref: this.wrapperRef }, isReadyToFix ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: "top" }, this.renderHeader) : this.renderHeader()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component);exports.SidePageHeader = SidePageHeader;SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader';
+    };_this.
+    stickyRef = function (el) {
+      _this.sticky = el;
+    };return _this;}var _proto = SidePageHeader.prototype;_proto.render = function render() {var _this2 = this;return /*#__PURE__*/_react.default.createElement(_ThemeContext.ThemeContext.Consumer, null, function (theme) {_this2.theme = theme;return _this2.renderMain();});};_proto.renderMain = function renderMain() {var isReadyToFix = this.state.isReadyToFix;return /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__PURE__*/_react.default.createElement("div", { ref: this.wrapperRef }, isReadyToFix ? /*#__PURE__*/_react.default.createElement(_Sticky.Sticky, { side: "top", ref: this.stickyRef }, this.renderHeader) : this.renderHeader()));};(0, _createClass2.default)(SidePageHeader, [{ key: "regularHeight", get: function get() {var isReadyToFix = this.state.isReadyToFix;if (!this.wrapper) {return 0;}if (!isReadyToFix) {this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;}return this.lastRegularHeight;} }, { key: "fixedHeaderHeight", get: function get() {var theme = this.theme;return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) * 2;} }]);return SidePageHeader;}(_react.default.Component);exports.SidePageHeader = SidePageHeader;SidePageHeader.__KONTUR_REACT_UI__ = 'SidePageHeader';SidePageHeader.contextType = _SidePageContext.SidePageContext;

package/cjs/components/SidePage/SidePageHeader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","state","isReadyToFix","theme","wrapper","lastRegularHeight","componentDidMount","window","addEventListener","update","componentWillUnmount","removeEventListener","updateReadyToFix","renderHeader","fixed","jsStyles","header","headerFixed","renderClose","title","titleFixed","props","children","renderCloseContent","requestClose","close","closeIcon","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__"],"mappings":"~~oVAAA~~;AACA;;AAEA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;;;;;;;;;;AAUA;AACA;AACA;AACA;AACA,G;AACaA,c;;;AAGJC,IAAAA,K,GAAQ;AACbC,MAAAA,YAAY,EAAE,KADD,E~~;;;AAIPC~~,IAAAA,K;AACAC,IAAAA,O,GAA8B,I;AAC9BC,IAAAA,iB,GAAoB,C;;;;;;;;;;;;;;;;;;AAkBrBC,IAAAA,iB,GAAoB,YAAM;AAC/BC,MAAAA,MAAM,CAACC,gBAAP,CAAwB,QAAxB,EAAkC,MAAKC,MAAvC,EAA+C,IAA/C;AACD,K;;AAEMC,IAAAA,oB,GAAuB,YAAM;~~AAClCH~~,MAAAA,MAAM,~~CAACI~~,mBAAP,CAA2B,QAA3B,EAAqC,~~MAAKF~~,MAA1C,EAAkD,IAAlD;AACD,K;;~~AAEMA~~,IAAAA,M,GAAS,YAAM;AACpB,~~YAAKG~~,gBAAL;AACD,K~~;;;;;;;;;;;;;;;;;;;;;;;;AAwBOC~~,IAAAA,Y,GAAe,UAACC,KAAD,EAAmB,mBAAlBA,KAAkB,cAAlBA,KAAkB,GAAV,KAAU;AACxC;AACE,8CAAK,SAAS,EAAE,yBAAGC,mBAASC,MAAT,CAAgB,~~MAAKb~~,KAArB,CAAH,~~iBAAmCY~~,mBAASE,WAAT,CAAqB,~~MAAKd~~,KAA1B,CAAnC,~~IAAsEW~~,KAAtE,OAAhB;AACG,cAAKI,WAAL,EADH;AAEE,8CAAK,SAAS,EAAE,yBAAGH,mBAASI,KAAT,CAAe,~~MAAKhB~~,KAApB,CAAH,~~mBAAkCY~~,mBAASK,UAAT,EAAlC,IAA0DN,KAA1D,QAAhB;AACG,+BAAW,MAAKO,KAAL,CAAWC,QAAtB,IAAkC,MAAKD,KAAL,CAAWC,QAAX,CAAoBR,KAApB,CAAlC,GAA+D,MAAKO,KAAL,CAAWC,QAD7E,CAFF,CADF;;;;AAQD,K;;AAEOC,IAAAA,kB,GAAqB,UAACT,KAAD;AAC3B,qCAAC,gCAAD,CAAiB,QAAjB;AACG,4CAAGU,YAAH,QAAGA,YAAH;AACC;AACE,cAAA,SAAS,EAAE,yBAAGT,mBAASU,KAAT,CAAe,~~MAAKtB~~,KAApB,CAAH;~~AACRY~~,iCAASD,KAAT,CAAe,~~MAAKX~~,KAApB,CADQ,~~IACqBW~~,KADrB,QADb;;AAIE,cAAA,OAAO,EAAEU,YAJX;AAKE,0BAAS,iBALX;;AAOE;AACE,cAAA,SAAS,EAAE,yBAAGT,mBAASW,SAAT,CAAmB,~~MAAKvB~~,KAAxB,CAAH;~~AACRY~~,iCAASD,KAAT,CAAe,~~MAAKX~~,KAApB,CADQ,~~IACqBW~~,KADrB,QADb;;;AAKE,yCAAC,oBAAD,OALF,CAPF,CADD,GADH,CAD2B,G;;;;;;;AAsBrBI,IAAAA,W,GAAc,YAAM;AAC1B,UAAMS,YAAY,GAAGC,QAAQ,CAAC,~~MAAKzB~~,KAAL,~~CAAW0B~~,0BAAZ,CAA7B;;AAEA;AACE,qCAAC,cAAD,IAAQ,IAAI,EAAC,KAAb,EAAmB,MAAM,EAAEF,YAA3B;AACG,cAAKJ,kBADR,CADF;;;AAKD,K;;AAEOX,IAAAA,gB,GAAmB,YAAM;AAC/B,UAAI,~~MAAKR~~,OAAT,EAAkB;AAChB,~~YAAM0B~~,iBAAiB,GAAG,~~MAAK1B~~,OAAL,~~CAAa2B~~,qBAAb,GAAqCC,GAA/D;AACA,~~YAAM9B~~,YAAY,GAAG,~~MAAK+B~~,aAAL,GAAqBH,iBAArB,IAA0C,MAAKI,iBAApE;AACA,cAAKC,QAAL,CAAc,~~UAAAlC~~,~~KAAK~~,~~UAAKA~~,KAAK,CAACC,YAAN,KAAuBA,YAAvB,GAAsC,EAAEA,YAAY,EAAZA,YAAF,EAAtC,GAAyDD,~~KAA9D~~,~~EAAnB~~;AACD;AACF,K;;~~AAEOmC~~,IAAAA,U,GAAa,UAACC,EAAD,EAA4B;AAC/C,~~YAAKjC~~,OAAL,~~GAAeiC~~,EAAf;AACD,K,~~4DA3EMC~~,M,GAAP,kBAA6B,mBAC3B,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,~~UAAAnC~~,~~KAAK~~,~~EAAI~~,~~CACR~~,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,~~CAACoC~~,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,~~KACXrC~~,YADW,GACM,KAAKD,KADX,CACXC,YADW,CAEnB,oBACE,6BAAC,4BAAD,EAAmB,~~KAAKmB~~,KAAxB,eACE,sCAAK,GAAG,EAAE,KAAKe,UAAf,~~IACGlC~~,YAAY,~~gBAAG~~,6BAAC,cAAD,IAAQ,IAAI,EAAC,KAAb,~~IAAoB~~,~~KAAKW~~,~~YAAzB~~,~~CAAH~~,~~GAAqD~~,KAAKA,YAAL,~~EADpE~~,CADF,CADF,~~CAOD~~,C,~~yFAhDkC~~,~~KACzBX~~,YADyB,GACR,KAAKD,KADG,CACzBC,YADyB,CAEjC,IAAI,CAAC,~~KAAKE~~,OAAV,EAAmB,CACjB,OAAO,CAAP,CACD,CACD,IAAI,~~CAACF~~,YAAL,EAAmB,CACjB,~~KAAKG~~,iBAAL,GAAyB,~~KAAKD~~,OAAL,~~CAAa2B~~,qBAAb,~~GAAqCS~~,MAA9D,CACD,CACD,OAAO,~~KAAKnC~~,iBAAZ,CACD,C,oDAEsC,~~KAC7BF~~,KAD6B,GACnB,IADmB,CAC7BA,KAD6B,CAErC,~~OAAOyB~~,QAAQ,~~CAACzB~~,KAAK,~~CAACsC~~,6BAAP,CAAR,~~GAAgDb~~,QAAQ,~~CAACzB~~,KAAK,~~CAACuC~~,2BAAP,CAAR,GAA8C,CAArG,CACD,C,~~6BAzBiCC~~,eAAMC,S,~~0CAA7B5C~~,c,~~CACG6C~~,mB,GAAsB,gB","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { Sticky } from '../Sticky';\r\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\r\nimport { isFunction } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { SidePageContext } from './SidePageContext';\r\n\r\nexport interface SidePageHeaderProps extends CommonProps {\r\n children?: React.ReactNode \| ((fixed: boolean) => React.ReactNode);\r\n}\r\n\r\nexport interface SidePageHeaderState {\r\n isReadyToFix: boolean;\r\n}\r\n\r\n/*\r\n Шапка сайдпейджа\r\n \r\n @visibleName SidePage.Header\r\n /\r\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\r\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\r\n\r\n public state = {\r\n isReadyToFix: false,\r\n };\r\n\r\n private theme!: Theme;\r\n private wrapper: HTMLElement \| null = null;\r\n private lastRegularHeight = 0;\r\n\r\n public get regularHeight(): number {\r\n const { isReadyToFix } = this.state;\r\n if (!this.wrapper) {\r\n return 0;\r\n }\r\n if (!isReadyToFix) {\r\n this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\r\n }\r\n return this.lastRegularHeight;\r\n }\r\n\r\n public get fixedHeaderHeight(): number {\r\n const { theme } = this;\r\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) 2;\r\n }\r\n\r\n public componentDidMount = () => {\r\n window.addEventListener('scroll', this.update, true);\r\n };\r\n\r\n public componentWillUnmount = () => {\r\n window.removeEventListener('scroll', this.update, true);\r\n };\r\n\r\n public update = () => {\r\n this.updateReadyToFix();\r\n };\r\n\r\n public render(): JSX.Element {\r\n return (\r\n <ThemeContext.Consumer>\r\n {theme => {\r\n this.theme = theme;\r\n return this.renderMain();\r\n }}\r\n </ThemeContext.Consumer>\r\n );\r\n }\r\n\r\n private renderMain() {\r\n const { isReadyToFix } = this.state;\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <div ref={this.wrapperRef}>\r\n {isReadyToFix ? <Sticky side=\"top\">{this.renderHeader}</Sticky> : this.renderHeader()}\r\n </div>\r\n </CommonWrapper>\r\n );\r\n }\r\n\r\n private renderHeader = (fixed = false) => {\r\n return (\r\n <div className={cn(jsStyles.header(this.theme), { [jsStyles.headerFixed(this.theme)]: fixed })}>\r\n {this.renderClose()}\r\n <div className={cn(jsStyles.title(this.theme), { [jsStyles.titleFixed()]: fixed })}>\r\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\r\n </div>\r\n </div>\r\n );\r\n };\r\n\r\n private renderCloseContent = (fixed: boolean) => (\r\n <SidePageContext.Consumer>\r\n {({ requestClose }) => (\r\n <a\r\n className={cn(jsStyles.close(this.theme), {\r\n [jsStyles.fixed(this.theme)]: fixed,\r\n })}\r\n onClick={requestClose}\r\n data-tid=\"SidePage__close\"\r\n >\r\n <span\r\n className={cn(jsStyles.closeIcon(this.theme), {\r\n [jsStyles.fixed(this.theme)]: fixed,\r\n })}\r\n >\r\n <CrossIcon />\r\n </span>\r\n </a>\r\n )}\r\n </SidePageContext.Consumer>\r\n );\r\n\r\n private renderClose = () => {\r\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\r\n\r\n return (\r\n <Sticky side=\"top\" offset={stickyOffset}>\r\n {this.renderCloseContent}\r\n </Sticky>\r\n );\r\n };\r\n\r\n private updateReadyToFix = () => {\r\n if (this.wrapper) {\r\n const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\r\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\r\n this.setState(state => (state.isReadyToFix !== isReadyToFix ? { isReadyToFix } : state));\r\n }\r\n };\r\n\r\n private wrapperRef = (el: HTMLElement \| null) => {\r\n this.wrapper = el;\r\n };\r\n}\r\n"]}
1	+ {"version":3,"sources":["SidePageHeader.tsx"],"names":["SidePageHeader","state","isReadyToFix","context","theme","wrapper","sticky","lastRegularHeight","componentDidMount","window","addEventListener","update","headerRef","componentWillUnmount","removeEventListener","reflow","updateReadyToFix","renderHeader","fixed","jsStyles","header","headerFixed","renderClose","title","titleFixed","props","children","renderCloseContent","requestClose","close","closeIcon","stickyOffset","parseInt","sidePageHeaderStickyOffset","wrapperScrolledUp","getBoundingClientRect","top","regularHeight","fixedHeaderHeight","setState","wrapperRef","el","stickyRef","render","renderMain","height","sidePageHeaderFixedLineHeight","sidePageHeaderFixedPaddingY","React","Component","__KONTUR_REACT_UI__","contextType","SidePageContext"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport cn from 'classnames';\r\n\r\nimport { Sticky } from '../Sticky';\r\nimport { CrossIcon } from '../../internal/icons/CrossIcon';\r\nimport { isFunction } from '../../lib/utils';\r\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\r\nimport { Theme } from '../../lib/theming/Theme';\r\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './SidePage.styles';\r\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\r\n\r\nexport interface SidePageHeaderProps extends CommonProps {\r\n children?: React.ReactNode \| ((fixed: boolean) => React.ReactNode);\r\n}\r\n\r\nexport interface SidePageHeaderState {\r\n isReadyToFix: boolean;\r\n}\r\n\r\n/*\r\n Шапка сайдпейджа\r\n \r\n @visibleName SidePage.Header\r\n /\r\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\r\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\r\n\r\n public state = {\r\n isReadyToFix: false,\r\n };\r\n\r\n public static contextType = SidePageContext;\r\n public context: SidePageContextType = this.context;\r\n\r\n private theme!: Theme;\r\n private wrapper: HTMLElement \| null = null;\r\n private sticky: Sticky \| null = null;\r\n private lastRegularHeight = 0;\r\n\r\n public get regularHeight(): number {\r\n const { isReadyToFix } = this.state;\r\n if (!this.wrapper) {\r\n return 0;\r\n }\r\n if (!isReadyToFix) {\r\n this.lastRegularHeight = this.wrapper.getBoundingClientRect().height;\r\n }\r\n return this.lastRegularHeight;\r\n }\r\n\r\n public get fixedHeaderHeight(): number {\r\n const { theme } = this;\r\n return parseInt(theme.sidePageHeaderFixedLineHeight) + parseInt(theme.sidePageHeaderFixedPaddingY) 2;\r\n }\r\n\r\n public componentDidMount = () => {\r\n window.addEventListener('scroll', this.update, true);\r\n this.context.headerRef(this);\r\n };\r\n\r\n public componentWillUnmount = () => {\r\n window.removeEventListener('scroll', this.update, true);\r\n this.context.headerRef(null);\r\n };\r\n\r\n public update = () => {\r\n this.sticky?.reflow();\r\n this.updateReadyToFix();\r\n };\r\n\r\n public render(): JSX.Element {\r\n return (\r\n <ThemeContext.Consumer>\r\n {(theme) => {\r\n this.theme = theme;\r\n return this.renderMain();\r\n }}\r\n </ThemeContext.Consumer>\r\n );\r\n }\r\n\r\n private renderMain() {\r\n const { isReadyToFix } = this.state;\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <div ref={this.wrapperRef}>\r\n {isReadyToFix ? (\r\n <Sticky side=\"top\" ref={this.stickyRef}>\r\n {this.renderHeader}\r\n </Sticky>\r\n ) : (\r\n this.renderHeader()\r\n )}\r\n </div>\r\n </CommonWrapper>\r\n );\r\n }\r\n\r\n private renderHeader = (fixed = false) => {\r\n return (\r\n <div className={cn(jsStyles.header(this.theme), { [jsStyles.headerFixed(this.theme)]: fixed })}>\r\n {this.renderClose()}\r\n <div className={cn(jsStyles.title(this.theme), { [jsStyles.titleFixed()]: fixed })}>\r\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\r\n </div>\r\n </div>\r\n );\r\n };\r\n\r\n private renderCloseContent = (fixed: boolean) => (\r\n <SidePageContext.Consumer>\r\n {({ requestClose }) => (\r\n <a\r\n className={cn(jsStyles.close(this.theme), {\r\n [jsStyles.fixed(this.theme)]: fixed,\r\n })}\r\n onClick={requestClose}\r\n data-tid=\"SidePage__close\"\r\n >\r\n <span\r\n className={cn(jsStyles.closeIcon(this.theme), {\r\n [jsStyles.fixed(this.theme)]: fixed,\r\n })}\r\n >\r\n <CrossIcon />\r\n </span>\r\n </a>\r\n )}\r\n </SidePageContext.Consumer>\r\n );\r\n\r\n private renderClose = () => {\r\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\r\n\r\n return (\r\n <Sticky side=\"top\" offset={stickyOffset}>\r\n {this.renderCloseContent}\r\n </Sticky>\r\n );\r\n };\r\n\r\n private updateReadyToFix = () => {\r\n if (this.wrapper) {\r\n const wrapperScrolledUp = this.wrapper.getBoundingClientRect().top;\r\n const isReadyToFix = this.regularHeight + wrapperScrolledUp <= this.fixedHeaderHeight;\r\n this.setState((state) => (state.isReadyToFix !== isReadyToFix ? { isReadyToFix } : state));\r\n }\r\n };\r\n\r\n private wrapperRef = (el: HTMLElement \| null) => {\r\n this.wrapper = el;\r\n };\r\n\r\n private stickyRef = (el: Sticky \| null) => {\r\n this.sticky = el;\r\n };\r\n}\r\n"]}

package/cjs/components/Sticky/Sticky.d.ts CHANGED Viewed

@@ -49,5 +49,10 @@ export declare class Sticky extends React.Component<StickyProps, StickyState> {
     render(): JSX.Element;
     private refWrapper;
     private refInner;
-    private reflow;
+    /**
+     * Пересчитать габариты и позицию залипшего элемента
+     *
+     * @public
+     */
+    reflow: () => void;
 }

package/cjs/components/Sticky/Sticky.js CHANGED Viewed

@@ -136,6 +136,11 @@ Sticky = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default)(
     refInner = function (ref) {return _this.inner = ref;};_this.
     reflow = function () {var _document =
       document,documentElement = _document.documentElement;

package/cjs/components/Sticky/Sticky.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","Sticky","state","fixed","deltaHeight","stopped","relativeTop","wrapper","inner","layoutSubscription","remove","reflowCounter","refWrapper","ref","refInner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","getBoundingClientRect","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","jsStyles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport shallowEqual from 'shallowequal';\r\nimport cn from 'classnames';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { isFunction } from '../../lib/utils';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Sticky.styles';\r\n\r\nconst MAX_REFLOW_RETRIES = 5;\r\n\r\nexport interface StickyProps extends CommonProps {\r\n side: 'top' \| 'bottom';\r\n /*\r\n Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\r\n * @default 0\r\n /\r\n offset: number;\r\n getStop?: () => Nullable<HTMLElement>;\r\n children?: React.ReactNode \| ((fixed: boolean) => React.ReactNode);\r\n}\r\n\r\nexport interface StickyState {\r\n fixed: boolean;\r\n deltaHeight: number;\r\n height?: number;\r\n width?: number;\r\n left?: number;\r\n stopped: boolean;\r\n relativeTop: number;\r\n}\r\n\r\nexport class Sticky extends React.Component<StickyProps, StickyState> {\r\n public static __KONTUR_REACT_UI__ = 'Sticky';\r\n\r\n public static propTypes = {\r\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\r\n\r\n /\r\n Функция, которая возвращает DOM-элемент, который нельзя пересекать.\r\n /\r\n getStop: PropTypes.func,\r\n\r\n /\r\n Отступ от границы в пикселях\r\n */\r\n offset: PropTypes.number,\r\n\r\n side: PropTypes.oneOf(['top', 'bottom']).isRequired,\r\n };\r\n\r\n public static defaultProps = { offset: 0 };\r\n\r\n public state: StickyState = {\r\n fixed: false,\r\n deltaHeight: 0,\r\n stopped: false,\r\n relativeTop: 0,\r\n };\r\n\r\n private wrapper: Nullable<HTMLElement>;\r\n private inner: Nullable<HTMLElement>;\r\n private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\r\n private reflowCounter = 0;\r\n\r\n public componentDidMount() {\r\n this.reflow();\r\n\r\n this.layoutSubscription = LayoutEvents.addListener(this.reflow);\r\n }\r\n\r\n public componentWillUnmount() {\r\n if (this.layoutSubscription.remove) {\r\n this.layoutSubscription.remove();\r\n }\r\n }\r\n\r\n public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\r\n if (!shallowEqual(prevProps, this.props) \|\| !shallowEqual(prevState, this.state)) {\r\n if (this.reflowCounter < MAX_REFLOW_RETRIES) {\r\n LayoutEvents.emit();\r\n this.reflowCounter += 1;\r\n return;\r\n }\r\n }\r\n this.reflowCounter = 0;\r\n }\r\n\r\n public render() {\r\n let { children } = this.props;\r\n const { side, offset } = this.props;\r\n const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\r\n const innerStyle: React.CSSProperties = {};\r\n\r\n if (fixed) {\r\n if (stopped) {\r\n innerStyle.top = relativeTop;\r\n innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\r\n } else {\r\n innerStyle.width = width;\r\n innerStyle[side] = offset;\r\n innerStyle.left = left;\r\n }\r\n }\r\n\r\n if (isFunction(children)) {\r\n children = children(fixed);\r\n }\r\n\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <div ref={this.refWrapper} className={jsStyles.wrapper()}>\r\n <ZIndex\r\n priority=\"Sticky\"\r\n applyZIndex={fixed}\r\n className={cn(jsStyles.inner(), {\r\n [jsStyles.fixed()]: fixed && !stopped,\r\n [jsStyles.stopped()]: stopped,\r\n })}\r\n style={innerStyle}\r\n wrapperRef={this.refInner}\r\n >\r\n <div className={jsStyles.container()}>{children}</div>\r\n </ZIndex>\r\n {fixed && !stopped ? <div style={{ width, height }} /> : null}\r\n </div>\r\n </CommonWrapper>\r\n );\r\n }\r\n\r\n private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\r\n\r\n private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\r\n\r\n private reflow = () => {\r\n const { documentElement } = document;\r\n\r\n if (!documentElement) {\r\n throw Error('There is no \"documentElement\" in document');\r\n }\r\n\r\n const windowHeight = window.innerHeight \|\| documentElement.clientHeight;\r\n if (!this.wrapper \|\| !this.inner) {\r\n return;\r\n }\r\n const { top, bottom, left } = this.wrapper.getBoundingClientRect();\r\n const { width, height } = this.inner.getBoundingClientRect();\r\n const { offset, getStop, side } = this.props;\r\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\r\n const fixed = side === 'top' ? top < offset : bottom > windowHeight - offset;\r\n\r\n this.setState({ fixed, left });\r\n\r\n if (fixed && !prevFixed) {\r\n this.setState({ width, height });\r\n }\r\n\r\n if (fixed) {\r\n const stop = getStop && getStop();\r\n if (stop) {\r\n const deltaHeight = prevHeight - height;\r\n const stopRect = stop.getBoundingClientRect();\r\n const outerHeight = height + offset;\r\n let stopped = false;\r\n let relativeTop = 0;\r\n\r\n if (side === 'top') {\r\n stopped = stopRect.top - outerHeight < 0;\r\n relativeTop = stopRect.top - prevHeight - top;\r\n } else {\r\n stopped = stopRect.bottom + outerHeight > windowHeight;\r\n relativeTop = stopRect.bottom - top;\r\n }\r\n\r\n this.setState({ relativeTop, deltaHeight, stopped });\r\n }\r\n }\r\n };\r\n}\r\n"]}
1	+ {"version":3,"sources":["Sticky.tsx"],"names":["MAX_REFLOW_RETRIES","Sticky","state","fixed","deltaHeight","stopped","relativeTop","wrapper","inner","layoutSubscription","remove","reflowCounter","refWrapper","ref","refInner","reflow","document","documentElement","Error","windowHeight","window","innerHeight","clientHeight","getBoundingClientRect","top","bottom","left","width","height","props","offset","getStop","side","prevFixed","prevHeight","setState","stop","stopRect","outerHeight","componentDidMount","LayoutEvents","addListener","componentWillUnmount","componentDidUpdate","prevProps","prevState","emit","render","children","innerStyle","jsStyles","container","React","Component","__KONTUR_REACT_UI__","propTypes","PropTypes","oneOfType","node","func","number","oneOf","isRequired","defaultProps"],"mappings":"yUAAA;AACA;AACA;AACA;;AAEA;;AAEA;AACA;AACA;;AAEA;;AAEA,IAAMA,kBAAkB,GAAG,CAA3B,C;;;;;;;;;;;;;;;;;;;;;;;AAuBaC,M;;;;;;;;;;;;;;;;;;;;;AAqBJC,IAAAA,K,GAAqB;AAC1BC,MAAAA,KAAK,EAAE,KADmB;AAE1BC,MAAAA,WAAW,EAAE,CAFa;AAG1BC,MAAAA,OAAO,EAAE,KAHiB;AAI1BC,MAAAA,WAAW,EAAE,CAJa,E;;;AAOpBC,IAAAA,O;AACAC,IAAAA,K;AACAC,IAAAA,kB,GAAuD,EAAEC,MAAM,EAAE,IAAV,E;AACvDC,IAAAA,a,GAAgB,C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAmEhBC,IAAAA,U,GAAa,UAACC,GAAD,UAAiC,MAAKN,OAAL,GAAeM,GAAhD,E;;AAEbC,IAAAA,Q,GAAW,UAACD,GAAD,UAAiC,MAAKL,KAAL,GAAaK,GAA9C,E;;;;;;;AAOZE,IAAAA,M,GAAS,YAAM;AACQC,MAAAA,QADR,CACZC,eADY,aACZA,eADY;;AAGpB,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,MAAKf,OAAN,IAAiB,CAAC,MAAKC,KAA3B,EAAkC;AAChC;AACD,OAVmB;AAWU,YAAKD,OAAL,CAAagB,qBAAb,EAXV,CAWZC,GAXY,yBAWZA,GAXY,CAWPC,MAXO,yBAWPA,MAXO,CAWCC,IAXD,yBAWCA,IAXD;AAYM,YAAKlB,KAAL,CAAWe,qBAAX,EAZN,CAYZI,KAZY,yBAYZA,KAZY,CAYLC,MAZK,yBAYLA,MAZK;AAac,YAAKC,KAbnB,CAaZC,MAbY,eAaZA,MAbY,CAaJC,OAbI,eAaJA,OAbI,CAaKC,IAbL,eAaKA,IAbL;AAcsC,YAAK9B,KAd3C,CAcL+B,SAdK,eAcZ9B,KAdY,kCAcMyB,MAdN,CAccM,UAdd,mCAc2BN,MAd3B;AAepB,UAAMzB,KAAK,GAAG6B,IAAI,KAAK,KAAT,GAAiBR,GAAG,GAAGM,MAAvB,GAAgCL,MAAM,GAAGN,YAAY,GAAGW,MAAtE;;AAEA,YAAKK,QAAL,CAAc,EAAEhC,KAAK,EAALA,KAAF,EAASuB,IAAI,EAAJA,IAAT,EAAd;;AAEA,UAAIvB,KAAK,IAAI,CAAC8B,SAAd,EAAyB;AACvB,cAAKE,QAAL,CAAc,EAAER,KAAK,EAALA,KAAF,EAASC,MAAM,EAANA,MAAT,EAAd;AACD;;AAED,UAAIzB,KAAJ,EAAW;AACT,YAAMiC,IAAI,GAAGL,OAAO,IAAIA,OAAO,EAA/B;AACA,YAAIK,IAAJ,EAAU;AACR,cAAMhC,WAAW,GAAG8B,UAAU,GAAGN,MAAjC;AACA,cAAMS,QAAQ,GAAGD,IAAI,CAACb,qBAAL,EAAjB;AACA,cAAMe,WAAW,GAAGV,MAAM,GAAGE,MAA7B;AACA,cAAIzB,OAAO,GAAG,KAAd;AACA,cAAIC,WAAW,GAAG,CAAlB;;AAEA,cAAI0B,IAAI,KAAK,KAAb,EAAoB;AAClB3B,YAAAA,OAAO,GAAGgC,QAAQ,CAACb,GAAT,GAAec,WAAf,GAA6B,CAAvC;AACAhC,YAAAA,WAAW,GAAG+B,QAAQ,CAACb,GAAT,GAAeU,UAAf,GAA4BV,GAA1C;AACD,WAHD,MAGO;AACLnB,YAAAA,OAAO,GAAGgC,QAAQ,CAACZ,MAAT,GAAkBa,WAAlB,GAAgCnB,YAA1C;AACAb,YAAAA,WAAW,GAAG+B,QAAQ,CAACZ,MAAT,GAAkBD,GAAhC;AACD;;AAED,gBAAKW,QAAL,CAAc,EAAE7B,WAAW,EAAXA,WAAF,EAAeF,WAAW,EAAXA,WAAf,EAA4BC,OAAO,EAAPA,OAA5B,EAAd;AACD;AACF;AACF,K,oDArHMkC,iB,GAAP,6BAA2B,CACzB,KAAKxB,MAAL,GAEA,KAAKN,kBAAL,GAA0B+B,YAAY,CAACC,WAAb,CAAyB,KAAK1B,MAA9B,CAA1B,CACD,C,QAEM2B,oB,GAAP,gCAA8B,CAC5B,IAAI,KAAKjC,kBAAL,CAAwBC,MAA5B,EAAoC,CAClC,KAAKD,kBAAL,CAAwBC,MAAxB,GACD,CACF,C,QAEMiC,kB,GAAP,4BAA0BC,SAA1B,EAAkDC,SAAlD,EAA0E,CACxE,IAAI,CAAC,2BAAaD,SAAb,EAAwB,KAAKf,KAA7B,CAAD,IAAwC,CAAC,2BAAagB,SAAb,EAAwB,KAAK3C,KAA7B,CAA7C,EAAkF,CAChF,IAAI,KAAKS,aAAL,GAAqBX,kBAAzB,EAA6C,CAC3CwC,YAAY,CAACM,IAAb,GACA,KAAKnC,aAAL,IAAsB,CAAtB,CACA,OACD,CACF,CACD,KAAKA,aAAL,GAAqB,CAArB,CACD,C,QAEMoC,M,GAAP,kBAAgB,aACRC,QADQ,GACK,KAAKnB,KADV,CACRmB,QADQ,oBAEW,KAAKnB,KAFhB,CAENG,IAFM,gBAENA,IAFM,CAEAF,MAFA,gBAEAA,MAFA,oBAG4D,KAAK5B,KAHjE,CAGNC,KAHM,gBAGNA,KAHM,CAGCE,OAHD,gBAGCA,OAHD,CAGUC,WAHV,gBAGUA,WAHV,CAGuBF,WAHvB,gBAGuBA,WAHvB,CAGoCuB,KAHpC,gBAGoCA,KAHpC,CAG2CC,MAH3C,gBAG2CA,MAH3C,CAGmDF,IAHnD,gBAGmDA,IAHnD,CAId,IAAMuB,UAA+B,GAAG,EAAxC,CAEA,IAAI9C,KAAJ,EAAW,CACT,IAAIE,OAAJ,EAAa,CACX4C,UAAU,CAACzB,GAAX,GAAiBlB,WAAjB,CACA2C,UAAU,CAACjB,IAAI,KAAK,KAAT,GAAiB,WAAjB,GAA+B,cAAhC,CAAV,GAA4D5B,WAA5D,CACD,CAHD,MAGO,CACL6C,UAAU,CAACtB,KAAX,GAAmBA,KAAnB,CACAsB,UAAU,CAACjB,IAAD,CAAV,GAAmBF,MAAnB,CACAmB,UAAU,CAACvB,IAAX,GAAkBA,IAAlB,CACD,CACF,CAED,IAAI,uBAAWsB,QAAX,CAAJ,EAA0B,CACxBA,QAAQ,GAAGA,QAAQ,CAAC7C,KAAD,CAAnB,CACD,CAED,oBACE,6BAAC,4BAAD,EAAmB,KAAK0B,KAAxB,eACE,sCAAK,GAAG,EAAE,KAAKjB,UAAf,EAA2B,SAAS,EAAEsC,iBAAS3C,OAAT,EAAtC,iBACE,6BAAC,cAAD,IACE,QAAQ,EAAC,QADX,EAEE,WAAW,EAAEJ,KAFf,EAGE,SAAS,EAAE,yBAAG+C,iBAAS1C,KAAT,EAAH,iBACR0C,iBAAS/C,KAAT,EADQ,IACWA,KAAK,IAAI,CAACE,OADrB,MAER6C,iBAAS7C,OAAT,EAFQ,IAEaA,OAFb,OAHb,EAOE,KAAK,EAAE4C,UAPT,EAQE,UAAU,EAAE,KAAKnC,QARnB,iBAUE,sCAAK,SAAS,EAAEoC,iBAASC,SAAT,EAAhB,IAAuCH,QAAvC,CAVF,CADF,EAaG7C,KAAK,IAAI,CAACE,OAAV,gBAAoB,sCAAK,KAAK,EAAE,EAAEsB,KAAK,EAALA,KAAF,EAASC,MAAM,EAANA,MAAT,EAAZ,GAApB,GAAwD,IAb3D,CADF,CADF,CAmBD,C,iBAhGyBwB,eAAMC,S,0BAArBpD,M,CACGqD,mB,GAAsB,Q,CADzBrD,M,CAGGsD,S,GAAY,EACxBP,QAAQ,EAAEQ,mBAAUC,SAAV,CAAoB,CAACD,mBAAUE,IAAX,EAAiBF,mBAAUG,IAA3B,CAApB,CADc,EAGxB;AACJ;AACA,KACI5B,OAAO,EAAEyB,mBAAUG,IANK,EAQxB;AACJ;AACA,KACI7B,MAAM,EAAE0B,mBAAUI,MAXM,EAaxB5B,IAAI,EAAEwB,mBAAUK,KAAV,CAAgB,CAAC,KAAD,EAAQ,QAAR,CAAhB,EAAmCC,UAbjB,E,CAHf7D,M,CAmBG8D,Y,GAAe,EAAEjC,MAAM,EAAE,CAAV,E","sourcesContent":["import React from 'react';\r\nimport PropTypes from 'prop-types';\r\nimport shallowEqual from 'shallowequal';\r\nimport cn from 'classnames';\r\n\r\nimport * as LayoutEvents from '../../lib/LayoutEvents';\r\nimport { Nullable } from '../../typings/utility-types';\r\nimport { isFunction } from '../../lib/utils';\r\nimport { ZIndex } from '../../internal/ZIndex';\r\nimport { CommonWrapper, CommonProps } from '../../internal/CommonWrapper';\r\n\r\nimport { jsStyles } from './Sticky.styles';\r\n\r\nconst MAX_REFLOW_RETRIES = 5;\r\n\r\nexport interface StickyProps extends CommonProps {\r\n side: 'top' \| 'bottom';\r\n /*\r\n Отступ в пикселях от края экрана, на сколько сдвигается элемент в залипшем состоянии\r\n * @default 0\r\n /\r\n offset: number;\r\n getStop?: () => Nullable<HTMLElement>;\r\n children?: React.ReactNode \| ((fixed: boolean) => React.ReactNode);\r\n}\r\n\r\nexport interface StickyState {\r\n fixed: boolean;\r\n deltaHeight: number;\r\n height?: number;\r\n width?: number;\r\n left?: number;\r\n stopped: boolean;\r\n relativeTop: number;\r\n}\r\n\r\nexport class Sticky extends React.Component<StickyProps, StickyState> {\r\n public static __KONTUR_REACT_UI__ = 'Sticky';\r\n\r\n public static propTypes = {\r\n children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),\r\n\r\n /\r\n Функция, которая возвращает DOM-элемент, который нельзя пересекать.\r\n /\r\n getStop: PropTypes.func,\r\n\r\n /\r\n Отступ от границы в пикселях\r\n /\r\n offset: PropTypes.number,\r\n\r\n side: PropTypes.oneOf(['top', 'bottom']).isRequired,\r\n };\r\n\r\n public static defaultProps = { offset: 0 };\r\n\r\n public state: StickyState = {\r\n fixed: false,\r\n deltaHeight: 0,\r\n stopped: false,\r\n relativeTop: 0,\r\n };\r\n\r\n private wrapper: Nullable<HTMLElement>;\r\n private inner: Nullable<HTMLElement>;\r\n private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\r\n private reflowCounter = 0;\r\n\r\n public componentDidMount() {\r\n this.reflow();\r\n\r\n this.layoutSubscription = LayoutEvents.addListener(this.reflow);\r\n }\r\n\r\n public componentWillUnmount() {\r\n if (this.layoutSubscription.remove) {\r\n this.layoutSubscription.remove();\r\n }\r\n }\r\n\r\n public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\r\n if (!shallowEqual(prevProps, this.props) \|\| !shallowEqual(prevState, this.state)) {\r\n if (this.reflowCounter < MAX_REFLOW_RETRIES) {\r\n LayoutEvents.emit();\r\n this.reflowCounter += 1;\r\n return;\r\n }\r\n }\r\n this.reflowCounter = 0;\r\n }\r\n\r\n public render() {\r\n let { children } = this.props;\r\n const { side, offset } = this.props;\r\n const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\r\n const innerStyle: React.CSSProperties = {};\r\n\r\n if (fixed) {\r\n if (stopped) {\r\n innerStyle.top = relativeTop;\r\n innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\r\n } else {\r\n innerStyle.width = width;\r\n innerStyle[side] = offset;\r\n innerStyle.left = left;\r\n }\r\n }\r\n\r\n if (isFunction(children)) {\r\n children = children(fixed);\r\n }\r\n\r\n return (\r\n <CommonWrapper {...this.props}>\r\n <div ref={this.refWrapper} className={jsStyles.wrapper()}>\r\n <ZIndex\r\n priority=\"Sticky\"\r\n applyZIndex={fixed}\r\n className={cn(jsStyles.inner(), {\r\n [jsStyles.fixed()]: fixed && !stopped,\r\n [jsStyles.stopped()]: stopped,\r\n })}\r\n style={innerStyle}\r\n wrapperRef={this.refInner}\r\n >\r\n <div className={jsStyles.container()}>{children}</div>\r\n </ZIndex>\r\n {fixed && !stopped ? <div style={{ width, height }} /> : null}\r\n </div>\r\n </CommonWrapper>\r\n );\r\n }\r\n\r\n private refWrapper = (ref: Nullable<HTMLElement>) => (this.wrapper = ref);\r\n\r\n private refInner = (ref: Nullable<HTMLElement>) => (this.inner = ref);\r\n\r\n /\r\n Пересчитать габариты и позицию залипшего элемента\r\n \r\n @public\r\n */\r\n public reflow = () => {\r\n const { documentElement } = document;\r\n\r\n if (!documentElement) {\r\n throw Error('There is no \"documentElement\" in document');\r\n }\r\n\r\n const windowHeight = window.innerHeight \|\| documentElement.clientHeight;\r\n if (!this.wrapper \|\| !this.inner) {\r\n return;\r\n }\r\n const { top, bottom, left } = this.wrapper.getBoundingClientRect();\r\n const { width, height } = this.inner.getBoundingClientRect();\r\n const { offset, getStop, side } = this.props;\r\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\r\n const fixed = side === 'top' ? top < offset : bottom > windowHeight - offset;\r\n\r\n this.setState({ fixed, left });\r\n\r\n if (fixed && !prevFixed) {\r\n this.setState({ width, height });\r\n }\r\n\r\n if (fixed) {\r\n const stop = getStop && getStop();\r\n if (stop) {\r\n const deltaHeight = prevHeight - height;\r\n const stopRect = stop.getBoundingClientRect();\r\n const outerHeight = height + offset;\r\n let stopped = false;\r\n let relativeTop = 0;\r\n\r\n if (side === 'top') {\r\n stopped = stopRect.top - outerHeight < 0;\r\n relativeTop = stopRect.top - prevHeight - top;\r\n } else {\r\n stopped = stopRect.bottom + outerHeight > windowHeight;\r\n relativeTop = stopRect.bottom - top;\r\n }\r\n\r\n this.setState({ relativeTop, deltaHeight, stopped });\r\n }\r\n }\r\n };\r\n}\r\n"]}