@skbkontur/react-ui 3.12.3 → 3.12.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +11 -0
- package/cjs/components/SidePage/SidePage.d.ts +0 -1
- package/cjs/components/SidePage/SidePage.js +1 -14
- package/cjs/components/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage/SidePage.js +0 -19
- package/components/SidePage/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +0 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,17 @@
|
|
|
3
3
|
All notable changes to this project will be documented in this file.
|
|
4
4
|
See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
|
|
5
5
|
|
|
6
|
+
## [3.12.4](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@3.12.3...@skbkontur/react-ui@3.12.4) (2022-04-25)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Reverts
|
|
10
|
+
|
|
11
|
+
* Revert "fix(SidePage): change scroll behavior according to Guides (#2756)" (#2875) ([b127634](https://github.com/skbkontur/retail-ui/commit/b127634c10897584324afd71056fd6429a623bde)), closes [#2756](https://github.com/skbkontur/retail-ui/issues/2756) [#2875](https://github.com/skbkontur/retail-ui/issues/2875)
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
6
17
|
## [3.12.3](https://github.com/skbkontur/retail-ui/compare/@skbkontur/react-ui@3.12.2...@skbkontur/react-ui@3.12.3) (2022-04-01)
|
|
7
18
|
|
|
8
19
|
|
|
@@ -91,7 +91,6 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
|
|
|
91
91
|
render(): JSX.Element;
|
|
92
92
|
private renderMain;
|
|
93
93
|
private renderContainer;
|
|
94
|
-
private disablePageScroll;
|
|
95
94
|
private getSidePageContextProps;
|
|
96
95
|
private getWidth;
|
|
97
96
|
private renderShadow;
|
|
@@ -130,8 +130,6 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
|
|
|
130
130
|
|
|
131
131
|
|
|
132
132
|
|
|
133
|
-
|
|
134
|
-
|
|
135
133
|
updateLayout = function () {var _this$header, _this$footer;
|
|
136
134
|
(_this$header = _this.header) == null ? void 0 : _this$header.update();
|
|
137
135
|
(_this$footer = _this.footer) == null ? void 0 : _this$footer.update();
|
|
@@ -222,17 +220,6 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
|
|
|
222
220
|
|
|
223
221
|
|
|
224
222
|
|
|
225
|
-
|
|
226
|
-
disablePageScroll = function (e) {
|
|
227
|
-
var layout = _this.layout;
|
|
228
|
-
if (!layout) return;
|
|
229
|
-
var reachedTop = layout.scrollTop <= 0 && e.deltaY < 0;
|
|
230
|
-
var reachedBottom = layout.scrollTop >= layout.scrollHeight - layout.offsetHeight && e.deltaY > 0;
|
|
231
|
-
|
|
232
|
-
if (!_this.props.blockBackground && (reachedTop || reachedBottom)) {
|
|
233
|
-
e.preventDefault();
|
|
234
|
-
}
|
|
235
|
-
};_this.
|
|
236
223
|
|
|
237
224
|
getSidePageContextProps = function () {
|
|
238
225
|
return {
|
|
@@ -352,7 +339,7 @@ SidePage = /*#__PURE__*/function (_React$Component) {(0, _inheritsLoose2.default
|
|
|
352
339
|
|
|
353
340
|
setHasPanel = function (hasPanel) {if (hasPanel === void 0) {hasPanel = false;}
|
|
354
341
|
_this.state.hasPanel !== hasPanel && _this.setState({ hasPanel: hasPanel });
|
|
355
|
-
};return _this;}var _proto = SidePage.prototype;_proto.componentDidMount = function componentDidMount() {
|
|
342
|
+
};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);} /**
|
|
356
343
|
* Обновляет разметку компонента.
|
|
357
344
|
* @public
|
|
358
345
|
*/;_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(_RenderContainer.RenderContainer, null, /*#__PURE__*/_react.default.createElement(_CommonWrapper.CommonWrapper, this.props, /*#__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 }, nodeRef: this.rootRef }, this.renderContainer()))));};_proto.renderContainer = function renderContainer() {var _cx, _cx2;var _this$props2 = this.props,width = _this$props2.width,blockBackground = _this$props2.blockBackground,fromLeft = _this$props2.fromLeft,disableFocusLock = _this$props2.disableFocusLock,offset = _this$props2.offset;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', "data-tid": "SidePage__root", className: (0, _Emotion.cx)((_cx = {}, _cx[_SidePage.styles.root()] = true, _cx)), onScroll: LayoutEvents.emit, createStackingContext: true, style: { width: width || (blockBackground ? 800 : 500), right: fromLeft ? 'auto' : offset, left: fromLeft ? offset : 'auto' }, wrapperRef: this.rootRef }, /*#__PURE__*/_react.default.createElement(_reactFocusLock.default, { disabled: disableFocusLock || !blockBackground, autoFocus: false, className: _SidePage.styles.focusLock() }, /*#__PURE__*/_react.default.createElement(_RenderLayer.RenderLayer, { onClickOutside: this.handleClickOutside, active: true }, /*#__PURE__*/_react.default.createElement("div", { "data-tid": "SidePage__container", className: (0, _Emotion.cx)(_SidePage.styles.wrapper(this.theme), (_cx2 = {}, _cx2[_SidePage.styles.wrapperLeft()] = fromLeft, _cx2[_SidePage.styles.wrapperMarginLeft()] = this.state.hasMargin && fromLeft, _cx2[_SidePage.styles.wrapperMarginRight()] = this.state.hasMargin && !fromLeft, _cx2[_SidePage.styles.shadow(this.theme)] = this.state.hasShadow, _cx2)), ref: this.layoutRef }, /*#__PURE__*/_react.default.createElement(_SidePageContext.SidePageContext.Provider, { value: this.getSidePageContextProps() }, this.props.children)))));};_proto.renderShadow = function renderShadow() {var _cx3;return /*#__PURE__*/_react.default.createElement(_ZIndex.ZIndex, { priority: 'Sidepage', className: _SidePage.styles.overlay(), onScroll: LayoutEvents.emit }, /*#__PURE__*/_react.default.createElement(_HideBodyVerticalScroll.HideBodyVerticalScroll, { key: "hbvs" }), /*#__PURE__*/_react.default.createElement("div", { key: "overlay", className: (0, _Emotion.cx)((_cx3 = {}, _cx3[_SidePage.styles.background()] = true, _cx3[_SidePage.styles.backgroundGray(this.theme)] = this.state.hasBackground, _cx3)) }));};_proto.getTransitionNames = function getTransitionNames() {var transition = this.props.fromLeft ? _SidePage.styles.transitionRight : _SidePage.styles.transitionLeft;return { enter: transition(), enterActive: _SidePage.styles.transitionActive(), exit: _SidePage.styles.transitionLeave(), exitActive: _SidePage.styles.transitionLeaveActive(), appear: transition(), appearActive: _SidePage.styles.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;SidePage.defaultProps = { disableAnimations: _currentEnvironment.isTestEnv, disableFocusLock: true, offset: 0 };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SidePage.tsx"],"names":["TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layout","header","footer","rootRef","React","createRef","updateLayout","update","disablePageScroll","e","reachedTop","scrollTop","deltaY","reachedBottom","scrollHeight","offsetHeight","props","blockBackground","preventDefault","getSidePageContextProps","requestClose","getWidth","headerRef","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","ModalStack","isBlocking","setState","stackPosition","handleClickOutside","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","layoutRef","componentDidMount","window","addEventListener","current","passive","add","componentWillUnmount","removeEventListener","remove","render","renderMain","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","offset","styles","root","LayoutEvents","emit","right","left","focusLock","wrapper","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","shadow","children","overlay","background","backgroundGray","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","SidePageHeader","Body","SidePageBody","Footer","SidePageFooter","Container","SidePageContainer","defaultProps","isTestEnv"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n /**\n * Добавить блокирующий фон, когда сайдпейдж открыт\n */\n blockBackground?: boolean;\n\n /**\n * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n */\n disableClose?: boolean;\n\n /**\n * Не закрывать сайдпейдж при клике на фон.\n */\n ignoreBackgroundClick?: boolean;\n\n /**\n * Задать ширину сайдпейджа\n */\n width?: number | string;\n\n /**\n * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n * Escape или на крестик).\n */\n onClose?: () => void;\n\n /**\n * Показывать сайдпэйдж слева\n *\n */\n fromLeft?: boolean;\n\n /**\n * Отключить анимации\n *\n */\n disableAnimations?: boolean;\n\n /**\n * Работает только при заблокированном фоне: `blockBackground = true`\n */\n disableFocusLock: boolean;\n\n /**\n * задает отступ от края экрана\n */\n offset?: number | string;\n}\n\nexport interface SidePageState {\n stackPosition?: number;\n hasMargin?: boolean;\n hasShadow?: boolean;\n hasBackground?: boolean;\n hasHeader: boolean;\n hasFooter: boolean;\n hasPanel: boolean;\n}\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n public static __KONTUR_REACT_UI__ = 'SidePage';\n\n public static Header = SidePageHeader;\n public static Body = SidePageBody;\n public static Footer = SidePageFooter;\n public static Container = SidePageContainer;\n public state: SidePageState = {\n hasHeader: false,\n hasFooter: false,\n hasPanel: false,\n };\n private theme!: Theme;\n private stackSubscription: ModalStackSubscription | null = null;\n private layout: HTMLElement | null = null;\n private header: SidePageHeader | null = null;\n private footer: SidePageFooter | null = null;\n private rootRef = React.createRef<HTMLDivElement>();\n\n public componentDidMount() {\n window.addEventListener('keydown', this.handleKeyDown);\n this.rootRef.current?.addEventListener('wheel', this.disablePageScroll, { passive: false });\n this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n }\n\n public componentWillUnmount() {\n window.removeEventListener('keydown', this.handleKeyDown);\n this.rootRef.current?.removeEventListener('wheel', this.disablePageScroll);\n if (this.stackSubscription != null) {\n this.stackSubscription.remove();\n }\n ModalStack.remove(this);\n }\n\n /**\n * Обновляет разметку компонента.\n * @public\n */\n public updateLayout = (): void => {\n this.header?.update();\n this.footer?.update();\n };\n\n public static defaultProps = {\n disableAnimations: isTestEnv,\n disableFocusLock: true,\n offset: 0,\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { blockBackground, disableAnimations } = this.props;\n\n return (\n <RenderContainer>\n <CommonWrapper {...this.props}>\n <div>\n {blockBackground && this.renderShadow()}\n <CSSTransition\n in\n classNames={this.getTransitionNames()}\n appear={!disableAnimations}\n enter={!disableAnimations}\n exit={false}\n timeout={{\n enter: TRANSITION_TIMEOUT,\n exit: TRANSITION_TIMEOUT,\n }}\n nodeRef={this.rootRef}\n >\n {this.renderContainer()}\n </CSSTransition>\n </div>\n </CommonWrapper>\n </RenderContainer>\n );\n }\n\n private renderContainer(): JSX.Element {\n const { width, blockBackground, fromLeft, disableFocusLock, offset } = this.props;\n\n return (\n <ZIndex\n priority={'Sidepage'}\n data-tid=\"SidePage__root\"\n className={cx({\n [styles.root()]: true,\n })}\n onScroll={LayoutEvents.emit}\n createStackingContext\n style={{\n width: width || (blockBackground ? 800 : 500),\n right: fromLeft ? 'auto' : offset,\n left: fromLeft ? offset : 'auto',\n }}\n wrapperRef={this.rootRef}\n >\n <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>\n <RenderLayer onClickOutside={this.handleClickOutside} active>\n <div\n data-tid=\"SidePage__container\"\n className={cx(styles.wrapper(this.theme), {\n [styles.wrapperLeft()]: fromLeft,\n [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n [styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n [styles.shadow(this.theme)]: this.state.hasShadow,\n })}\n ref={this.layoutRef}\n >\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\n {this.props.children}\n </SidePageContext.Provider>\n </div>\n </RenderLayer>\n </FocusLock>\n </ZIndex>\n );\n }\n\n private disablePageScroll = (e: WheelEvent) => {\n const layout = this.layout;\n if (!layout) return;\n const reachedTop = layout.scrollTop <= 0 && e.deltaY < 0;\n const reachedBottom = layout.scrollTop >= layout.scrollHeight - layout.offsetHeight && e.deltaY > 0;\n\n if (!this.props.blockBackground && (reachedTop || reachedBottom)) {\n e.preventDefault();\n }\n };\n\n private getSidePageContextProps = (): SidePageContextType => {\n return {\n hasHeader: this.state.hasHeader,\n hasFooter: this.state.hasFooter,\n hasPanel: this.state.hasPanel,\n requestClose: this.requestClose,\n getWidth: this.getWidth,\n updateLayout: this.updateLayout,\n headerRef: this.headerRef,\n footerRef: this.footerRef,\n setHasHeader: this.setHasHeader,\n setHasFooter: this.setHasFooter,\n setHasPanel: this.setHasPanel,\n };\n };\n\n private getWidth = () => {\n if (!this.layout) {\n return 'auto';\n }\n return this.layout.clientWidth;\n };\n\n private renderShadow(): JSX.Element {\n return (\n <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n <HideBodyVerticalScroll key=\"hbvs\" />\n <div\n key=\"overlay\"\n className={cx({\n [styles.background()]: true,\n [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n })}\n />\n </ZIndex>\n );\n }\n\n private getTransitionNames(): Record<string, string> {\n const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n return {\n enter: transition(),\n enterActive: styles.transitionActive(),\n exit: styles.transitionLeave(),\n exitActive: styles.transitionLeaveActive(),\n appear: transition(),\n appearActive: styles.transitionActive(),\n };\n }\n\n private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\n const sidePages = stack.filter((x) => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\n const currentSidePagePosition = sidePages.indexOf(this);\n\n const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n const hasBackground = ModalStack.isBlocking(this);\n\n this.setState({\n stackPosition: stack.indexOf(this),\n hasMargin,\n hasShadow,\n hasBackground,\n });\n };\n\n private handleClickOutside = (e: Event) => {\n if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\n // ignore mousedown on window scrollbar\n if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\n return;\n }\n this.requestClose();\n }\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (this.state.stackPosition !== 0) {\n return;\n }\n if (isKeyEscape(e)) {\n stopPropagation(e);\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n if (this.props.disableClose) {\n return;\n }\n if (this.props.onClose) {\n this.props.onClose();\n }\n };\n\n private headerRef = (ref: SidePageHeader | null) => {\n this.header = ref;\n };\n\n private footerRef = (ref: SidePageFooter | null) => {\n this.footer = ref;\n };\n\n private layoutRef = (ref: HTMLDivElement | null) => {\n this.layout = ref;\n };\n\n private setHasHeader = (hasHeader = true) => {\n this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n };\n\n private setHasFooter = (hasFooter = true) => {\n this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n };\n\n private setHasPanel = (hasPanel = false) => {\n this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["SidePage.tsx"],"names":["TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layout","header","footer","rootRef","React","createRef","updateLayout","update","getSidePageContextProps","requestClose","getWidth","headerRef","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","ModalStack","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","layoutRef","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","offset","styles","root","LayoutEvents","emit","right","left","focusLock","wrapper","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","shadow","children","overlay","background","backgroundGray","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","SidePageHeader","Body","SidePageBody","Footer","SidePageFooter","Container","SidePageContainer","defaultProps","isTestEnv"],"mappings":"ybAAA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAEA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8DA,IAAMA,kBAAkB,GAAG,GAA3B;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA,G;AACaC,Q;;;;;;;AAOJC,IAAAA,K,GAAuB;AAC5BC,MAAAA,SAAS,EAAE,KADiB;AAE5BC,MAAAA,SAAS,EAAE,KAFiB;AAG5BC,MAAAA,QAAQ,EAAE,KAHkB,E;;AAKtBC,IAAAA,K;AACAC,IAAAA,iB,GAAmD,I;AACnDC,IAAAA,M,GAA6B,I;AAC7BC,IAAAA,M,GAAgC,I;AAChCC,IAAAA,M,GAAgC,I;AAChCC,IAAAA,O,gBAAUC,eAAMC,SAAN,E;;;;;;;;;;;;;;;;;;;AAmBXC,IAAAA,Y,GAAe,YAAY;AAChC,4BAAKL,MAAL,kCAAaM,MAAb;AACA,4BAAKL,MAAL,kCAAaK,MAAb;AACD,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFOC,IAAAA,uB,GAA0B,YAA2B;AAC3D,aAAO;AACLb,QAAAA,SAAS,EAAE,MAAKD,KAAL,CAAWC,SADjB;AAELC,QAAAA,SAAS,EAAE,MAAKF,KAAL,CAAWE,SAFjB;AAGLC,QAAAA,QAAQ,EAAE,MAAKH,KAAL,CAAWG,QAHhB;AAILY,QAAAA,YAAY,EAAE,MAAKA,YAJd;AAKLC,QAAAA,QAAQ,EAAE,MAAKA,QALV;AAMLJ,QAAAA,YAAY,EAAE,MAAKA,YANd;AAOLK,QAAAA,SAAS,EAAE,MAAKA,SAPX;AAQLC,QAAAA,SAAS,EAAE,MAAKA,SARX;AASLC,QAAAA,YAAY,EAAE,MAAKA,YATd;AAULC,QAAAA,YAAY,EAAE,MAAKA,YAVd;AAWLC,QAAAA,WAAW,EAAE,MAAKA,WAXb,EAAP;;AAaD,K;;AAEOL,IAAAA,Q,GAAW,YAAM;AACvB,UAAI,CAAC,MAAKV,MAAV,EAAkB;AAChB,eAAO,MAAP;AACD;AACD,aAAO,MAAKA,MAAL,CAAYgB,WAAnB;AACD,K;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA8BOC,IAAAA,iB,GAAoB,UAACC,KAAD,EAA2C;AACrE,UAAMC,SAAS,GAAGD,KAAK,CAACE,MAAN,CAAa,UAACC,CAAD,UAAOA,CAAC,YAAY5B,QAAb,IAAyB4B,CAAC,CAACC,KAAF,CAAQC,QAAR,KAAqB,MAAKD,KAAL,CAAWC,QAAhE,EAAb,CAAlB;AACA,UAAMC,uBAAuB,GAAGL,SAAS,CAACM,OAAV,6CAAhC;;AAEA,UAAMC,SAAS,GAAGP,SAAS,CAACQ,MAAV,GAAmB,CAAnB,IAAwBH,uBAAuB,KAAKL,SAAS,CAACQ,MAAV,GAAmB,CAAzF;AACA,UAAMC,SAAS,GAAGT,SAAS,CAACQ,MAAV,GAAmB,CAAnB,IAAwBH,uBAAuB,GAAGL,SAAS,CAACQ,MAAV,GAAmB,CAAvF;AACA,UAAME,aAAa,GAAGC,uBAAWC,UAAX,6CAAtB;;AAEA,YAAKC,QAAL,CAAc;AACZC,QAAAA,aAAa,EAAEf,KAAK,CAACO,OAAN,6CADH;AAEZC,QAAAA,SAAS,EAATA,SAFY;AAGZE,QAAAA,SAAS,EAATA,SAHY;AAIZC,QAAAA,aAAa,EAAbA,aAJY,EAAd;;AAMD,K;;AAEOK,IAAAA,kB,GAAqB,UAACC,CAAD,EAAc;AACzC,UAAI,MAAKzC,KAAL,CAAWuC,aAAX,KAA6B,CAA7B,IAAkC,CAAC,MAAKX,KAAL,CAAWc,qBAAlD,EAAyE;AACvE;AACA,YAAID,CAAC,YAAYE,UAAb,IAA2BF,CAAC,CAACG,OAAF,GAAYC,QAAQ,CAACC,eAAT,CAAyBxB,WAApE,EAAiF;AAC/E;AACD;AACD,cAAKP,YAAL;AACD;AACF,K;;AAEOgC,IAAAA,a,GAAgB,UAACN,CAAD,EAAsB;AAC5C,UAAI,MAAKzC,KAAL,CAAWuC,aAAX,KAA6B,CAAjC,EAAoC;AAClC;AACD;AACD,UAAI,8BAAYE,CAAZ,CAAJ,EAAoB;AAClB,8CAAgBA,CAAhB;AACA,cAAK1B,YAAL;AACD;AACF,K;;AAEOA,IAAAA,Y,GAAe,YAAM;AAC3B,UAAI,MAAKa,KAAL,CAAWoB,YAAf,EAA6B;AAC3B;AACD;AACD,UAAI,MAAKpB,KAAL,CAAWqB,OAAf,EAAwB;AACtB,cAAKrB,KAAL,CAAWqB,OAAX;AACD;AACF,K;;AAEOhC,IAAAA,S,GAAY,UAACiC,GAAD,EAAgC;AAClD,YAAK3C,MAAL,GAAc2C,GAAd;AACD,K;;AAEOhC,IAAAA,S,GAAY,UAACgC,GAAD,EAAgC;AAClD,YAAK1C,MAAL,GAAc0C,GAAd;AACD,K;;AAEOC,IAAAA,S,GAAY,UAACD,GAAD,EAAgC;AAClD,YAAK5C,MAAL,GAAc4C,GAAd;AACD,K;;AAEO/B,IAAAA,Y,GAAe,UAAClB,SAAD,EAAsB,KAArBA,SAAqB,cAArBA,SAAqB,GAAT,IAAS;AAC3C,YAAKD,KAAL,CAAWC,SAAX,KAAyBA,SAAzB,IAAsC,MAAKqC,QAAL,CAAc,EAAErC,SAAS,EAATA,SAAF,EAAd,CAAtC;AACD,K;;AAEOmB,IAAAA,Y,GAAe,UAAClB,SAAD,EAAsB,KAArBA,SAAqB,cAArBA,SAAqB,GAAT,IAAS;AAC3C,YAAKF,KAAL,CAAWE,SAAX,KAAyBA,SAAzB,IAAsC,MAAKoC,QAAL,CAAc,EAAEpC,SAAS,EAATA,SAAF,EAAd,CAAtC;AACD,K;;AAEOmB,IAAAA,W,GAAc,UAAClB,QAAD,EAAsB,KAArBA,QAAqB,cAArBA,QAAqB,GAAV,KAAU;AAC1C,YAAKH,KAAL,CAAWG,QAAX,KAAwBA,QAAxB,IAAoC,MAAKmC,QAAL,CAAc,EAAEnC,QAAQ,EAARA,QAAF,EAAd,CAApC;AACD,K,sDAlOMiD,iB,GAAP,6BAA2B,CACzBC,MAAM,CAACC,gBAAP,CAAwB,SAAxB,EAAmC,KAAKP,aAAxC,EACA,KAAK1C,iBAAL,GAAyB+B,uBAAWmB,GAAX,CAAe,IAAf,EAAqB,KAAKhC,iBAA1B,CAAzB,CACD,C,QAEMiC,oB,GAAP,gCAA8B,CAC5BH,MAAM,CAACI,mBAAP,CAA2B,SAA3B,EAAsC,KAAKV,aAA3C,EACA,IAAI,KAAK1C,iBAAL,IAA0B,IAA9B,EAAoC,CAClC,KAAKA,iBAAL,CAAuBqD,MAAvB,GACD,CACDtB,uBAAWsB,MAAX,CAAkB,IAAlB,EACD,C,CAED;AACF;AACA;AACA,K,QAYSC,M,GAAP,kBAA6B,mBAC3B,oBACE,6BAAC,0BAAD,CAAc,QAAd,QACG,UAACvD,KAAD,EAAW,CACV,MAAI,CAACA,KAAL,GAAaA,KAAb,CACA,OAAO,MAAI,CAACwD,UAAL,EAAP,CACD,CAJH,CADF,CAQD,C,QAEOA,U,GAAR,sBAAqB,mBAC4B,KAAKhC,KADjC,CACXiC,eADW,eACXA,eADW,CACMC,iBADN,eACMA,iBADN,CAGnB,oBACE,6BAAC,gCAAD,qBACE,6BAAC,4BAAD,EAAmB,KAAKlC,KAAxB,eACE,0CACGiC,eAAe,IAAI,KAAKE,YAAL,EADtB,eAEE,6BAAC,mCAAD,IACE,EAAE,MADJ,EAEE,UAAU,EAAE,KAAKC,kBAAL,EAFd,EAGE,MAAM,EAAE,CAACF,iBAHX,EAIE,KAAK,EAAE,CAACA,iBAJV,EAKE,IAAI,EAAE,KALR,EAME,OAAO,EAAE,EACPG,KAAK,EAAEnE,kBADA,EAEPoE,IAAI,EAAEpE,kBAFC,EANX,EAUE,OAAO,EAAE,KAAKW,OAVhB,IAYG,KAAK0D,eAAL,EAZH,CAFF,CADF,CADF,CADF,CAuBD,C,QAEOA,e,GAAR,2BAAuC,kCACkC,KAAKvC,KADvC,CAC7BwC,KAD6B,gBAC7BA,KAD6B,CACtBP,eADsB,gBACtBA,eADsB,CACLhC,QADK,gBACLA,QADK,CACKwC,gBADL,gBACKA,gBADL,CACuBC,MADvB,gBACuBA,MADvB,CAGrC,oBACE,6BAAC,cAAD,IACE,QAAQ,EAAE,UADZ,EAEE,YAAS,gBAFX,EAGE,SAAS,EAAE,gCACRC,iBAAOC,IAAP,EADQ,IACQ,IADR,OAHb,EAME,QAAQ,EAAEC,YAAY,CAACC,IANzB,EAOE,qBAAqB,MAPvB,EAQE,KAAK,EAAE,EACLN,KAAK,EAAEA,KAAK,KAAKP,eAAe,GAAG,GAAH,GAAS,GAA7B,CADP,EAELc,KAAK,EAAE9C,QAAQ,GAAG,MAAH,GAAYyC,MAFtB,EAGLM,IAAI,EAAE/C,QAAQ,GAAGyC,MAAH,GAAY,MAHrB,EART,EAaE,UAAU,EAAE,KAAK7D,OAbnB,iBAeE,6BAAC,uBAAD,IAAW,QAAQ,EAAE4D,gBAAgB,IAAI,CAACR,eAA1C,EAA2D,SAAS,EAAE,KAAtE,EAA6E,SAAS,EAAEU,iBAAOM,SAAP,EAAxF,iBACE,6BAAC,wBAAD,IAAa,cAAc,EAAE,KAAKrC,kBAAlC,EAAsD,MAAM,MAA5D,iBACE,sCACE,YAAS,qBADX,EAEE,SAAS,EAAE,iBAAG+B,iBAAOO,OAAP,CAAe,KAAK1E,KAApB,CAAH,mBACRmE,iBAAOQ,WAAP,EADQ,IACelD,QADf,OAER0C,iBAAOS,iBAAP,EAFQ,IAEqB,KAAKhF,KAAL,CAAWgC,SAAX,IAAwBH,QAF7C,OAGR0C,iBAAOU,kBAAP,EAHQ,IAGsB,KAAKjF,KAAL,CAAWgC,SAAX,IAAwB,CAACH,QAH/C,OAIR0C,iBAAOW,MAAP,CAAc,KAAK9E,KAAnB,CAJQ,IAIoB,KAAKJ,KAAL,CAAWkC,SAJ/B,QAFb,EAQE,GAAG,EAAE,KAAKiB,SARZ,iBAUE,6BAAC,gCAAD,CAAiB,QAAjB,IAA0B,KAAK,EAAE,KAAKrC,uBAAL,EAAjC,IACG,KAAKc,KAAL,CAAWuD,QADd,CAVF,CADF,CADF,CAfF,CADF,CAoCD,C,QAyBOpB,Y,GAAR,wBAAoC,UAClC,oBACE,6BAAC,cAAD,IAAQ,QAAQ,EAAE,UAAlB,EAA8B,SAAS,EAAEQ,iBAAOa,OAAP,EAAzC,EAA2D,QAAQ,EAAEX,YAAY,CAACC,IAAlF,iBACE,6BAAC,8CAAD,IAAwB,GAAG,EAAC,MAA5B,GADF,eAEE,sCACE,GAAG,EAAC,SADN,EAEE,SAAS,EAAE,kCACRH,iBAAOc,UAAP,EADQ,IACc,IADd,OAERd,iBAAOe,cAAP,CAAsB,KAAKlF,KAA3B,CAFQ,IAE4B,KAAKJ,KAAL,CAAWmC,aAFvC,QAFb,GAFF,CADF,CAYD,C,QAEO6B,kB,GAAR,8BAAqD,CACnD,IAAMuB,UAAU,GAAG,KAAK3D,KAAL,CAAWC,QAAX,GAAsB0C,iBAAOiB,eAA7B,GAA+CjB,iBAAOkB,cAAzE,CAEA,OAAO,EACLxB,KAAK,EAAEsB,UAAU,EADZ,EAELG,WAAW,EAAEnB,iBAAOoB,gBAAP,EAFR,EAGLzB,IAAI,EAAEK,iBAAOqB,eAAP,EAHD,EAILC,UAAU,EAAEtB,iBAAOuB,qBAAP,EAJP,EAKLC,MAAM,EAAER,UAAU,EALb,EAMLS,YAAY,EAAEzB,iBAAOoB,gBAAP,EANT,EAAP,CAQD,C,mBAhL2BjF,eAAMuF,S,8BAAvBlG,Q,CACGmG,mB,GAAsB,U,CADzBnG,Q,CAGGoG,M,GAASC,8B,CAHZrG,Q,CAIGsG,I,GAAOC,0B,CAJVvG,Q,CAKGwG,M,GAASC,8B,CALZzG,Q,CAMG0G,S,GAAYC,oC,CANf3G,Q,CAyCG4G,Y,GAAe,EAC3B7C,iBAAiB,EAAE8C,6BADQ,EAE3BvC,gBAAgB,EAAE,IAFS,EAG3BC,MAAM,EAAE,CAHmB,E","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n /**\n * Добавить блокирующий фон, когда сайдпейдж открыт\n */\n blockBackground?: boolean;\n\n /**\n * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n */\n disableClose?: boolean;\n\n /**\n * Не закрывать сайдпейдж при клике на фон.\n */\n ignoreBackgroundClick?: boolean;\n\n /**\n * Задать ширину сайдпейджа\n */\n width?: number | string;\n\n /**\n * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n * Escape или на крестик).\n */\n onClose?: () => void;\n\n /**\n * Показывать сайдпэйдж слева\n *\n */\n fromLeft?: boolean;\n\n /**\n * Отключить анимации\n *\n */\n disableAnimations?: boolean;\n\n /**\n * Работает только при заблокированном фоне: `blockBackground = true`\n */\n disableFocusLock: boolean;\n\n /**\n * задает отступ от края экрана\n */\n offset?: number | string;\n}\n\nexport interface SidePageState {\n stackPosition?: number;\n hasMargin?: boolean;\n hasShadow?: boolean;\n hasBackground?: boolean;\n hasHeader: boolean;\n hasFooter: boolean;\n hasPanel: boolean;\n}\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n public static __KONTUR_REACT_UI__ = 'SidePage';\n\n public static Header = SidePageHeader;\n public static Body = SidePageBody;\n public static Footer = SidePageFooter;\n public static Container = SidePageContainer;\n public state: SidePageState = {\n hasHeader: false,\n hasFooter: false,\n hasPanel: false,\n };\n private theme!: Theme;\n private stackSubscription: ModalStackSubscription | null = null;\n private layout: HTMLElement | null = null;\n private header: SidePageHeader | null = null;\n private footer: SidePageFooter | null = null;\n private rootRef = React.createRef<HTMLDivElement>();\n\n public componentDidMount() {\n window.addEventListener('keydown', this.handleKeyDown);\n this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n }\n\n public componentWillUnmount() {\n window.removeEventListener('keydown', this.handleKeyDown);\n if (this.stackSubscription != null) {\n this.stackSubscription.remove();\n }\n ModalStack.remove(this);\n }\n\n /**\n * Обновляет разметку компонента.\n * @public\n */\n public updateLayout = (): void => {\n this.header?.update();\n this.footer?.update();\n };\n\n public static defaultProps = {\n disableAnimations: isTestEnv,\n disableFocusLock: true,\n offset: 0,\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { blockBackground, disableAnimations } = this.props;\n\n return (\n <RenderContainer>\n <CommonWrapper {...this.props}>\n <div>\n {blockBackground && this.renderShadow()}\n <CSSTransition\n in\n classNames={this.getTransitionNames()}\n appear={!disableAnimations}\n enter={!disableAnimations}\n exit={false}\n timeout={{\n enter: TRANSITION_TIMEOUT,\n exit: TRANSITION_TIMEOUT,\n }}\n nodeRef={this.rootRef}\n >\n {this.renderContainer()}\n </CSSTransition>\n </div>\n </CommonWrapper>\n </RenderContainer>\n );\n }\n\n private renderContainer(): JSX.Element {\n const { width, blockBackground, fromLeft, disableFocusLock, offset } = this.props;\n\n return (\n <ZIndex\n priority={'Sidepage'}\n data-tid=\"SidePage__root\"\n className={cx({\n [styles.root()]: true,\n })}\n onScroll={LayoutEvents.emit}\n createStackingContext\n style={{\n width: width || (blockBackground ? 800 : 500),\n right: fromLeft ? 'auto' : offset,\n left: fromLeft ? offset : 'auto',\n }}\n wrapperRef={this.rootRef}\n >\n <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>\n <RenderLayer onClickOutside={this.handleClickOutside} active>\n <div\n data-tid=\"SidePage__container\"\n className={cx(styles.wrapper(this.theme), {\n [styles.wrapperLeft()]: fromLeft,\n [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n [styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n [styles.shadow(this.theme)]: this.state.hasShadow,\n })}\n ref={this.layoutRef}\n >\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\n {this.props.children}\n </SidePageContext.Provider>\n </div>\n </RenderLayer>\n </FocusLock>\n </ZIndex>\n );\n }\n\n private getSidePageContextProps = (): SidePageContextType => {\n return {\n hasHeader: this.state.hasHeader,\n hasFooter: this.state.hasFooter,\n hasPanel: this.state.hasPanel,\n requestClose: this.requestClose,\n getWidth: this.getWidth,\n updateLayout: this.updateLayout,\n headerRef: this.headerRef,\n footerRef: this.footerRef,\n setHasHeader: this.setHasHeader,\n setHasFooter: this.setHasFooter,\n setHasPanel: this.setHasPanel,\n };\n };\n\n private getWidth = () => {\n if (!this.layout) {\n return 'auto';\n }\n return this.layout.clientWidth;\n };\n\n private renderShadow(): JSX.Element {\n return (\n <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n <HideBodyVerticalScroll key=\"hbvs\" />\n <div\n key=\"overlay\"\n className={cx({\n [styles.background()]: true,\n [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n })}\n />\n </ZIndex>\n );\n }\n\n private getTransitionNames(): Record<string, string> {\n const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n return {\n enter: transition(),\n enterActive: styles.transitionActive(),\n exit: styles.transitionLeave(),\n exitActive: styles.transitionLeaveActive(),\n appear: transition(),\n appearActive: styles.transitionActive(),\n };\n }\n\n private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\n const sidePages = stack.filter((x) => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\n const currentSidePagePosition = sidePages.indexOf(this);\n\n const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n const hasBackground = ModalStack.isBlocking(this);\n\n this.setState({\n stackPosition: stack.indexOf(this),\n hasMargin,\n hasShadow,\n hasBackground,\n });\n };\n\n private handleClickOutside = (e: Event) => {\n if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\n // ignore mousedown on window scrollbar\n if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\n return;\n }\n this.requestClose();\n }\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (this.state.stackPosition !== 0) {\n return;\n }\n if (isKeyEscape(e)) {\n stopPropagation(e);\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n if (this.props.disableClose) {\n return;\n }\n if (this.props.onClose) {\n this.props.onClose();\n }\n };\n\n private headerRef = (ref: SidePageHeader | null) => {\n this.header = ref;\n };\n\n private footerRef = (ref: SidePageFooter | null) => {\n this.footer = ref;\n };\n\n private layoutRef = (ref: HTMLDivElement | null) => {\n this.layout = ref;\n };\n\n private setHasHeader = (hasHeader = true) => {\n this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n };\n\n private setHasFooter = (hasFooter = true) => {\n this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n };\n\n private setHasPanel = (hasPanel = false) => {\n this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n };\n}\n"]}
|
|
@@ -62,17 +62,6 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
|
|
|
62
62
|
(_this$footer = _this.footer) == null ? void 0 : _this$footer.update();
|
|
63
63
|
};
|
|
64
64
|
|
|
65
|
-
_this.disablePageScroll = function (e) {
|
|
66
|
-
var layout = _this.layout;
|
|
67
|
-
if (!layout) return;
|
|
68
|
-
var reachedTop = layout.scrollTop <= 0 && e.deltaY < 0;
|
|
69
|
-
var reachedBottom = layout.scrollTop >= layout.scrollHeight - layout.offsetHeight && e.deltaY > 0;
|
|
70
|
-
|
|
71
|
-
if (!_this.props.blockBackground && (reachedTop || reachedBottom)) {
|
|
72
|
-
e.preventDefault();
|
|
73
|
-
}
|
|
74
|
-
};
|
|
75
|
-
|
|
76
65
|
_this.getSidePageContextProps = function () {
|
|
77
66
|
return {
|
|
78
67
|
hasHeader: _this.state.hasHeader,
|
|
@@ -195,20 +184,12 @@ export var SidePage = /*#__PURE__*/function (_React$Component) {
|
|
|
195
184
|
var _proto = SidePage.prototype;
|
|
196
185
|
|
|
197
186
|
_proto.componentDidMount = function componentDidMount() {
|
|
198
|
-
var _this$rootRef$current;
|
|
199
|
-
|
|
200
187
|
window.addEventListener('keydown', this.handleKeyDown);
|
|
201
|
-
(_this$rootRef$current = this.rootRef.current) == null ? void 0 : _this$rootRef$current.addEventListener('wheel', this.disablePageScroll, {
|
|
202
|
-
passive: false
|
|
203
|
-
});
|
|
204
188
|
this.stackSubscription = ModalStack.add(this, this.handleStackChange);
|
|
205
189
|
};
|
|
206
190
|
|
|
207
191
|
_proto.componentWillUnmount = function componentWillUnmount() {
|
|
208
|
-
var _this$rootRef$current2;
|
|
209
|
-
|
|
210
192
|
window.removeEventListener('keydown', this.handleKeyDown);
|
|
211
|
-
(_this$rootRef$current2 = this.rootRef.current) == null ? void 0 : _this$rootRef$current2.removeEventListener('wheel', this.disablePageScroll);
|
|
212
193
|
|
|
213
194
|
if (this.stackSubscription != null) {
|
|
214
195
|
this.stackSubscription.remove();
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["SidePage.tsx"],"names":["React","CSSTransition","FocusLock","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","cx","isTestEnv","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","styles","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layout","header","footer","rootRef","createRef","updateLayout","update","disablePageScroll","e","reachedTop","scrollTop","deltaY","reachedBottom","scrollHeight","offsetHeight","props","blockBackground","preventDefault","getSidePageContextProps","requestClose","getWidth","headerRef","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","isBlocking","setState","stackPosition","handleClickOutside","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","layoutRef","componentDidMount","window","addEventListener","current","passive","add","componentWillUnmount","removeEventListener","remove","render","renderMain","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","offset","root","emit","right","left","focusLock","wrapper","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","shadow","children","overlay","background","backgroundGray","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","Body","Footer","Container","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n /**\n * Добавить блокирующий фон, когда сайдпейдж открыт\n */\n blockBackground?: boolean;\n\n /**\n * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n */\n disableClose?: boolean;\n\n /**\n * Не закрывать сайдпейдж при клике на фон.\n */\n ignoreBackgroundClick?: boolean;\n\n /**\n * Задать ширину сайдпейджа\n */\n width?: number | string;\n\n /**\n * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n * Escape или на крестик).\n */\n onClose?: () => void;\n\n /**\n * Показывать сайдпэйдж слева\n *\n */\n fromLeft?: boolean;\n\n /**\n * Отключить анимации\n *\n */\n disableAnimations?: boolean;\n\n /**\n * Работает только при заблокированном фоне: `blockBackground = true`\n */\n disableFocusLock: boolean;\n\n /**\n * задает отступ от края экрана\n */\n offset?: number | string;\n}\n\nexport interface SidePageState {\n stackPosition?: number;\n hasMargin?: boolean;\n hasShadow?: boolean;\n hasBackground?: boolean;\n hasHeader: boolean;\n hasFooter: boolean;\n hasPanel: boolean;\n}\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n public static __KONTUR_REACT_UI__ = 'SidePage';\n\n public static Header = SidePageHeader;\n public static Body = SidePageBody;\n public static Footer = SidePageFooter;\n public static Container = SidePageContainer;\n public state: SidePageState = {\n hasHeader: false,\n hasFooter: false,\n hasPanel: false,\n };\n private theme!: Theme;\n private stackSubscription: ModalStackSubscription | null = null;\n private layout: HTMLElement | null = null;\n private header: SidePageHeader | null = null;\n private footer: SidePageFooter | null = null;\n private rootRef = React.createRef<HTMLDivElement>();\n\n public componentDidMount() {\n window.addEventListener('keydown', this.handleKeyDown);\n this.rootRef.current?.addEventListener('wheel', this.disablePageScroll, { passive: false });\n this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n }\n\n public componentWillUnmount() {\n window.removeEventListener('keydown', this.handleKeyDown);\n this.rootRef.current?.removeEventListener('wheel', this.disablePageScroll);\n if (this.stackSubscription != null) {\n this.stackSubscription.remove();\n }\n ModalStack.remove(this);\n }\n\n /**\n * Обновляет разметку компонента.\n * @public\n */\n public updateLayout = (): void => {\n this.header?.update();\n this.footer?.update();\n };\n\n public static defaultProps = {\n disableAnimations: isTestEnv,\n disableFocusLock: true,\n offset: 0,\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { blockBackground, disableAnimations } = this.props;\n\n return (\n <RenderContainer>\n <CommonWrapper {...this.props}>\n <div>\n {blockBackground && this.renderShadow()}\n <CSSTransition\n in\n classNames={this.getTransitionNames()}\n appear={!disableAnimations}\n enter={!disableAnimations}\n exit={false}\n timeout={{\n enter: TRANSITION_TIMEOUT,\n exit: TRANSITION_TIMEOUT,\n }}\n nodeRef={this.rootRef}\n >\n {this.renderContainer()}\n </CSSTransition>\n </div>\n </CommonWrapper>\n </RenderContainer>\n );\n }\n\n private renderContainer(): JSX.Element {\n const { width, blockBackground, fromLeft, disableFocusLock, offset } = this.props;\n\n return (\n <ZIndex\n priority={'Sidepage'}\n data-tid=\"SidePage__root\"\n className={cx({\n [styles.root()]: true,\n })}\n onScroll={LayoutEvents.emit}\n createStackingContext\n style={{\n width: width || (blockBackground ? 800 : 500),\n right: fromLeft ? 'auto' : offset,\n left: fromLeft ? offset : 'auto',\n }}\n wrapperRef={this.rootRef}\n >\n <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>\n <RenderLayer onClickOutside={this.handleClickOutside} active>\n <div\n data-tid=\"SidePage__container\"\n className={cx(styles.wrapper(this.theme), {\n [styles.wrapperLeft()]: fromLeft,\n [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n [styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n [styles.shadow(this.theme)]: this.state.hasShadow,\n })}\n ref={this.layoutRef}\n >\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\n {this.props.children}\n </SidePageContext.Provider>\n </div>\n </RenderLayer>\n </FocusLock>\n </ZIndex>\n );\n }\n\n private disablePageScroll = (e: WheelEvent) => {\n const layout = this.layout;\n if (!layout) return;\n const reachedTop = layout.scrollTop <= 0 && e.deltaY < 0;\n const reachedBottom = layout.scrollTop >= layout.scrollHeight - layout.offsetHeight && e.deltaY > 0;\n\n if (!this.props.blockBackground && (reachedTop || reachedBottom)) {\n e.preventDefault();\n }\n };\n\n private getSidePageContextProps = (): SidePageContextType => {\n return {\n hasHeader: this.state.hasHeader,\n hasFooter: this.state.hasFooter,\n hasPanel: this.state.hasPanel,\n requestClose: this.requestClose,\n getWidth: this.getWidth,\n updateLayout: this.updateLayout,\n headerRef: this.headerRef,\n footerRef: this.footerRef,\n setHasHeader: this.setHasHeader,\n setHasFooter: this.setHasFooter,\n setHasPanel: this.setHasPanel,\n };\n };\n\n private getWidth = () => {\n if (!this.layout) {\n return 'auto';\n }\n return this.layout.clientWidth;\n };\n\n private renderShadow(): JSX.Element {\n return (\n <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n <HideBodyVerticalScroll key=\"hbvs\" />\n <div\n key=\"overlay\"\n className={cx({\n [styles.background()]: true,\n [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n })}\n />\n </ZIndex>\n );\n }\n\n private getTransitionNames(): Record<string, string> {\n const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n return {\n enter: transition(),\n enterActive: styles.transitionActive(),\n exit: styles.transitionLeave(),\n exitActive: styles.transitionLeaveActive(),\n appear: transition(),\n appearActive: styles.transitionActive(),\n };\n }\n\n private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\n const sidePages = stack.filter((x) => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\n const currentSidePagePosition = sidePages.indexOf(this);\n\n const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n const hasBackground = ModalStack.isBlocking(this);\n\n this.setState({\n stackPosition: stack.indexOf(this),\n hasMargin,\n hasShadow,\n hasBackground,\n });\n };\n\n private handleClickOutside = (e: Event) => {\n if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\n // ignore mousedown on window scrollbar\n if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\n return;\n }\n this.requestClose();\n }\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (this.state.stackPosition !== 0) {\n return;\n }\n if (isKeyEscape(e)) {\n stopPropagation(e);\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n if (this.props.disableClose) {\n return;\n }\n if (this.props.onClose) {\n this.props.onClose();\n }\n };\n\n private headerRef = (ref: SidePageHeader | null) => {\n this.header = ref;\n };\n\n private footerRef = (ref: SidePageFooter | null) => {\n this.footer = ref;\n };\n\n private layoutRef = (ref: HTMLDivElement | null) => {\n this.layout = ref;\n };\n\n private setHasHeader = (hasHeader = true) => {\n this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n };\n\n private setHasFooter = (hasFooter = true) => {\n this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n };\n\n private setHasPanel = (hasPanel = false) => {\n this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n };\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["SidePage.tsx"],"names":["React","CSSTransition","FocusLock","isKeyEscape","LayoutEvents","stopPropagation","HideBodyVerticalScroll","ModalStack","RenderContainer","RenderLayer","ZIndex","ThemeContext","CommonWrapper","cx","isTestEnv","SidePageBody","SidePageContainer","SidePageContext","SidePageFooter","SidePageHeader","styles","TRANSITION_TIMEOUT","SidePage","state","hasHeader","hasFooter","hasPanel","theme","stackSubscription","layout","header","footer","rootRef","createRef","updateLayout","update","getSidePageContextProps","requestClose","getWidth","headerRef","footerRef","setHasHeader","setHasFooter","setHasPanel","clientWidth","handleStackChange","stack","sidePages","filter","x","props","fromLeft","currentSidePagePosition","indexOf","hasMargin","length","hasShadow","hasBackground","isBlocking","setState","stackPosition","handleClickOutside","e","ignoreBackgroundClick","MouseEvent","clientX","document","documentElement","handleKeyDown","disableClose","onClose","ref","layoutRef","componentDidMount","window","addEventListener","add","componentWillUnmount","removeEventListener","remove","render","renderMain","blockBackground","disableAnimations","renderShadow","getTransitionNames","enter","exit","renderContainer","width","disableFocusLock","offset","root","emit","right","left","focusLock","wrapper","wrapperLeft","wrapperMarginLeft","wrapperMarginRight","shadow","children","overlay","background","backgroundGray","transition","transitionRight","transitionLeft","enterActive","transitionActive","transitionLeave","exitActive","transitionLeaveActive","appear","appearActive","Component","__KONTUR_REACT_UI__","Header","Body","Footer","Container","defaultProps"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { CSSTransition } from 'react-transition-group';\nimport FocusLock from 'react-focus-lock';\n\nimport { isKeyEscape } from '../../lib/events/keyboard/identifiers';\nimport * as LayoutEvents from '../../lib/LayoutEvents';\nimport { stopPropagation } from '../../lib/events/stopPropagation';\nimport { HideBodyVerticalScroll } from '../../internal/HideBodyVerticalScroll';\nimport { ModalStack, ModalStackSubscription } from '../../lib/ModalStack';\nimport { RenderContainer } from '../../internal/RenderContainer';\nimport { RenderLayer } from '../../internal/RenderLayer';\nimport { ZIndex } from '../../internal/ZIndex';\nimport { ThemeContext } from '../../lib/theming/ThemeContext';\nimport { Theme } from '../../lib/theming/Theme';\nimport { CommonProps, CommonWrapper } from '../../internal/CommonWrapper';\nimport { cx } from '../../lib/theming/Emotion';\nimport { isTestEnv } from '../../lib/currentEnvironment';\n\nimport { SidePageBody } from './SidePageBody';\nimport { SidePageContainer } from './SidePageContainer';\nimport { SidePageContext, SidePageContextType } from './SidePageContext';\nimport { SidePageFooter } from './SidePageFooter';\nimport { SidePageHeader } from './SidePageHeader';\nimport { styles } from './SidePage.styles';\n\nexport interface SidePageProps extends CommonProps {\n /**\n * Добавить блокирующий фон, когда сайдпейдж открыт\n */\n blockBackground?: boolean;\n\n /**\n * Отключает событие onClose, также дизейблит кнопку закрытия сайдпейджа\n */\n disableClose?: boolean;\n\n /**\n * Не закрывать сайдпейдж при клике на фон.\n */\n ignoreBackgroundClick?: boolean;\n\n /**\n * Задать ширину сайдпейджа\n */\n width?: number | string;\n\n /**\n * Вызывается, когда пользователь запросил закрытие сайдпейджа (нажал на фон, на\n * Escape или на крестик).\n */\n onClose?: () => void;\n\n /**\n * Показывать сайдпэйдж слева\n *\n */\n fromLeft?: boolean;\n\n /**\n * Отключить анимации\n *\n */\n disableAnimations?: boolean;\n\n /**\n * Работает только при заблокированном фоне: `blockBackground = true`\n */\n disableFocusLock: boolean;\n\n /**\n * задает отступ от края экрана\n */\n offset?: number | string;\n}\n\nexport interface SidePageState {\n stackPosition?: number;\n hasMargin?: boolean;\n hasShadow?: boolean;\n hasBackground?: boolean;\n hasHeader: boolean;\n hasFooter: boolean;\n hasPanel: boolean;\n}\n\nconst TRANSITION_TIMEOUT = 200;\n\n/**\n * Сайдпейдж\n *\n * Содержит в себе три компоненты: **SidePage.Header**,\n * **SidePage.Body** и **SidePage.Footer**\n *\n * Для отображения серой плашки в футере в компонент\n * **Footer** необходимо передать пропс **panel**\n */\nexport class SidePage extends React.Component<SidePageProps, SidePageState> {\n public static __KONTUR_REACT_UI__ = 'SidePage';\n\n public static Header = SidePageHeader;\n public static Body = SidePageBody;\n public static Footer = SidePageFooter;\n public static Container = SidePageContainer;\n public state: SidePageState = {\n hasHeader: false,\n hasFooter: false,\n hasPanel: false,\n };\n private theme!: Theme;\n private stackSubscription: ModalStackSubscription | null = null;\n private layout: HTMLElement | null = null;\n private header: SidePageHeader | null = null;\n private footer: SidePageFooter | null = null;\n private rootRef = React.createRef<HTMLDivElement>();\n\n public componentDidMount() {\n window.addEventListener('keydown', this.handleKeyDown);\n this.stackSubscription = ModalStack.add(this, this.handleStackChange);\n }\n\n public componentWillUnmount() {\n window.removeEventListener('keydown', this.handleKeyDown);\n if (this.stackSubscription != null) {\n this.stackSubscription.remove();\n }\n ModalStack.remove(this);\n }\n\n /**\n * Обновляет разметку компонента.\n * @public\n */\n public updateLayout = (): void => {\n this.header?.update();\n this.footer?.update();\n };\n\n public static defaultProps = {\n disableAnimations: isTestEnv,\n disableFocusLock: true,\n offset: 0,\n };\n\n public render(): JSX.Element {\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n private renderMain() {\n const { blockBackground, disableAnimations } = this.props;\n\n return (\n <RenderContainer>\n <CommonWrapper {...this.props}>\n <div>\n {blockBackground && this.renderShadow()}\n <CSSTransition\n in\n classNames={this.getTransitionNames()}\n appear={!disableAnimations}\n enter={!disableAnimations}\n exit={false}\n timeout={{\n enter: TRANSITION_TIMEOUT,\n exit: TRANSITION_TIMEOUT,\n }}\n nodeRef={this.rootRef}\n >\n {this.renderContainer()}\n </CSSTransition>\n </div>\n </CommonWrapper>\n </RenderContainer>\n );\n }\n\n private renderContainer(): JSX.Element {\n const { width, blockBackground, fromLeft, disableFocusLock, offset } = this.props;\n\n return (\n <ZIndex\n priority={'Sidepage'}\n data-tid=\"SidePage__root\"\n className={cx({\n [styles.root()]: true,\n })}\n onScroll={LayoutEvents.emit}\n createStackingContext\n style={{\n width: width || (blockBackground ? 800 : 500),\n right: fromLeft ? 'auto' : offset,\n left: fromLeft ? offset : 'auto',\n }}\n wrapperRef={this.rootRef}\n >\n <FocusLock disabled={disableFocusLock || !blockBackground} autoFocus={false} className={styles.focusLock()}>\n <RenderLayer onClickOutside={this.handleClickOutside} active>\n <div\n data-tid=\"SidePage__container\"\n className={cx(styles.wrapper(this.theme), {\n [styles.wrapperLeft()]: fromLeft,\n [styles.wrapperMarginLeft()]: this.state.hasMargin && fromLeft,\n [styles.wrapperMarginRight()]: this.state.hasMargin && !fromLeft,\n [styles.shadow(this.theme)]: this.state.hasShadow,\n })}\n ref={this.layoutRef}\n >\n <SidePageContext.Provider value={this.getSidePageContextProps()}>\n {this.props.children}\n </SidePageContext.Provider>\n </div>\n </RenderLayer>\n </FocusLock>\n </ZIndex>\n );\n }\n\n private getSidePageContextProps = (): SidePageContextType => {\n return {\n hasHeader: this.state.hasHeader,\n hasFooter: this.state.hasFooter,\n hasPanel: this.state.hasPanel,\n requestClose: this.requestClose,\n getWidth: this.getWidth,\n updateLayout: this.updateLayout,\n headerRef: this.headerRef,\n footerRef: this.footerRef,\n setHasHeader: this.setHasHeader,\n setHasFooter: this.setHasFooter,\n setHasPanel: this.setHasPanel,\n };\n };\n\n private getWidth = () => {\n if (!this.layout) {\n return 'auto';\n }\n return this.layout.clientWidth;\n };\n\n private renderShadow(): JSX.Element {\n return (\n <ZIndex priority={'Sidepage'} className={styles.overlay()} onScroll={LayoutEvents.emit}>\n <HideBodyVerticalScroll key=\"hbvs\" />\n <div\n key=\"overlay\"\n className={cx({\n [styles.background()]: true,\n [styles.backgroundGray(this.theme)]: this.state.hasBackground,\n })}\n />\n </ZIndex>\n );\n }\n\n private getTransitionNames(): Record<string, string> {\n const transition = this.props.fromLeft ? styles.transitionRight : styles.transitionLeft;\n\n return {\n enter: transition(),\n enterActive: styles.transitionActive(),\n exit: styles.transitionLeave(),\n exitActive: styles.transitionLeaveActive(),\n appear: transition(),\n appearActive: styles.transitionActive(),\n };\n }\n\n private handleStackChange = (stack: ReadonlyArray<React.Component>) => {\n const sidePages = stack.filter((x) => x instanceof SidePage && x.props.fromLeft === this.props.fromLeft);\n const currentSidePagePosition = sidePages.indexOf(this);\n\n const hasMargin = sidePages.length > 1 && currentSidePagePosition === sidePages.length - 1;\n const hasShadow = sidePages.length < 3 || currentSidePagePosition > sidePages.length - 3;\n const hasBackground = ModalStack.isBlocking(this);\n\n this.setState({\n stackPosition: stack.indexOf(this),\n hasMargin,\n hasShadow,\n hasBackground,\n });\n };\n\n private handleClickOutside = (e: Event) => {\n if (this.state.stackPosition === 0 && !this.props.ignoreBackgroundClick) {\n // ignore mousedown on window scrollbar\n if (e instanceof MouseEvent && e.clientX > document.documentElement.clientWidth) {\n return;\n }\n this.requestClose();\n }\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (this.state.stackPosition !== 0) {\n return;\n }\n if (isKeyEscape(e)) {\n stopPropagation(e);\n this.requestClose();\n }\n };\n\n private requestClose = () => {\n if (this.props.disableClose) {\n return;\n }\n if (this.props.onClose) {\n this.props.onClose();\n }\n };\n\n private headerRef = (ref: SidePageHeader | null) => {\n this.header = ref;\n };\n\n private footerRef = (ref: SidePageFooter | null) => {\n this.footer = ref;\n };\n\n private layoutRef = (ref: HTMLDivElement | null) => {\n this.layout = ref;\n };\n\n private setHasHeader = (hasHeader = true) => {\n this.state.hasHeader !== hasHeader && this.setState({ hasHeader });\n };\n\n private setHasFooter = (hasFooter = true) => {\n this.state.hasFooter !== hasFooter && this.setState({ hasFooter });\n };\n\n private setHasPanel = (hasPanel = false) => {\n this.state.hasPanel !== hasPanel && this.setState({ hasPanel });\n };\n}\n"]}
|
|
@@ -91,7 +91,6 @@ export declare class SidePage extends React.Component<SidePageProps, SidePageSta
|
|
|
91
91
|
render(): JSX.Element;
|
|
92
92
|
private renderMain;
|
|
93
93
|
private renderContainer;
|
|
94
|
-
private disablePageScroll;
|
|
95
94
|
private getSidePageContextProps;
|
|
96
95
|
private getWidth;
|
|
97
96
|
private renderShadow;
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@skbkontur/react-ui",
|
|
3
|
-
"version": "3.12.
|
|
3
|
+
"version": "3.12.4",
|
|
4
4
|
"description": "UI Components",
|
|
5
5
|
"main": "cjs/index.js",
|
|
6
6
|
"module": "index.js",
|
|
7
7
|
"sideEffects": false,
|
|
8
|
-
"homepage": "https://tech.skbkontur.ru/react-ui/3.12.
|
|
8
|
+
"homepage": "https://tech.skbkontur.ru/react-ui/3.12.4/",
|
|
9
9
|
"repository": {
|
|
10
10
|
"type": "git",
|
|
11
11
|
"url": "git@github.com:skbkontur/retail-ui.git"
|