@skbkontur/react-ui 6.0.4 → 6.0.5
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/components/FileUploader/FileUploader.d.ts +28 -30
- package/components/FileUploader/FileUploader.js.map +1 -1
- package/components/FileUploader/FileUploader.styles.d.ts +0 -1
- package/components/FileUploader/FileUploader.styles.js +4 -4
- package/components/FileUploader/FileUploader.styles.js.map +1 -1
- package/components/FileUploader/FileUploaderControlProvider.d.ts +4 -0
- package/components/FileUploader/FileUploaderControlProvider.js.map +1 -1
- package/components/FileUploader/FileUploaderFile.d.ts +19 -11
- package/components/FileUploader/FileUploaderFile.js +1 -1
- package/components/FileUploader/FileUploaderFile.js.map +1 -1
- package/components/Group/Group.d.ts +2 -4
- package/components/Group/Group.js +1 -3
- package/components/Group/Group.js.map +1 -1
- package/components/Modal/ModalFooter.d.ts +1 -1
- package/components/Modal/ModalFooter.js.map +1 -1
- package/components/SidePage/SidePage.d.ts +19 -20
- package/components/SidePage/SidePage.js +5 -6
- package/components/SidePage/SidePage.js.map +1 -1
- package/components/SidePage/SidePageBody.d.ts +1 -1
- package/components/SidePage/SidePageBody.js +1 -1
- package/components/SidePage/SidePageBody.js.map +1 -1
- package/components/SidePage/SidePageContainer.d.ts +1 -1
- package/components/SidePage/SidePageContainer.js +1 -1
- package/components/SidePage/SidePageContainer.js.map +1 -1
- package/components/SidePage/SidePageFooter.d.ts +4 -4
- package/components/SidePage/SidePageFooter.js +1 -1
- package/components/SidePage/SidePageFooter.js.map +1 -1
- package/components/SidePage/SidePageHeader.d.ts +5 -4
- package/components/SidePage/SidePageHeader.js +1 -1
- package/components/SidePage/SidePageHeader.js.map +1 -1
- package/components/Sticky/Sticky.d.ts +8 -4
- package/components/Sticky/Sticky.js +5 -1
- package/components/Sticky/Sticky.js.map +1 -1
- package/package.json +1 -1
|
@@ -6,11 +6,11 @@ import type { SidePageContextType } from './SidePageContext.js';
|
|
|
6
6
|
export interface SidePageFooterProps extends Omit<CommonProps, 'children'> {
|
|
7
7
|
/** @ignore */
|
|
8
8
|
children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
|
|
9
|
-
/** Включает
|
|
9
|
+
/** Включает разделитель перед футером. */
|
|
10
10
|
panel?: boolean;
|
|
11
|
-
/** Закрепляет футер снизу
|
|
11
|
+
/** Закрепляет футер снизу сайдпейджа при скролле длинной контент-зоны. */
|
|
12
12
|
sticky?: boolean;
|
|
13
|
-
/**
|
|
13
|
+
/** Расстояние между элементами футера в пикселях. */
|
|
14
14
|
gap?: GappedProps['gap'];
|
|
15
15
|
}
|
|
16
16
|
interface SidePageFooterState {
|
|
@@ -20,7 +20,7 @@ export declare const SidePageFooterDataTids: {
|
|
|
20
20
|
readonly root: "SidePageFooter__root";
|
|
21
21
|
};
|
|
22
22
|
/**
|
|
23
|
-
* Футер
|
|
23
|
+
* Футер сайдпейджа, где обычно располагаются кнопки основных действий.
|
|
24
24
|
*
|
|
25
25
|
* @visibleName SidePage.Footer
|
|
26
26
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePageFooter.js","sourceRoot":"","sources":["../../../components/SidePage/SidePageFooter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isNonNullable } from '../../lib/utils.js';\nimport { Gapped } from '../Gapped/index.js';\nimport type { GappedProps } from '../Gapped/index.js';\nimport { ModalSeparator } from '../Modal/ModalSeparator.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageFooterProps extends Omit<CommonProps, 'children'> {\n /** @ignore */\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n\n /** Включает серый цвет в футере. */\n panel?: boolean;\n\n /** Закрепляет футер снизу сайдпейджа. */\n sticky?: boolean;\n\n /** Задает расстояние между элементами футера в пикселях. */\n gap?: GappedProps['gap'];\n}\n\ninterface SidePageFooterState {\n fixed: boolean;\n}\n\nexport const SidePageFooterDataTids = {\n root: 'SidePageFooter__root',\n} as const;\n\n/**\n * Футер сайдпейджа.\n *\n * @visibleName SidePage.Footer\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageFooter extends React.Component<React.PropsWithChildren<SidePageFooterProps>> {\n public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n public static displayName = 'SidePageFooter';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n private isMobileLayout!: boolean;\n\n public state: SidePageFooterState = {\n fixed: false,\n };\n\n private globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private theme!: Theme;\n private content: HTMLElement | null = null;\n private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.context.footerRef(this);\n this.update();\n this.layoutSub = LayoutEvents.addListener(this.update, this.globalObject);\n this.context.setHasFooter?.();\n this.context.setHasPanel?.(this.props.panel);\n }\n\n public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n }\n\n public componentWillUnmount() {\n this.context.footerRef(null);\n if (this.layoutSub) {\n this.layoutSub.remove();\n }\n this.context.setHasFooter?.(false);\n this.context.setHasPanel?.(false);\n }\n\n public getSticky(): boolean {\n if (typeof this.props.sticky !== 'undefined') {\n return this.props.sticky;\n }\n\n if (this.isMobileLayout) {\n return false;\n }\n\n return true;\n }\n\n public render(): JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public update = (): void => {\n this.setProperStyles();\n };\n\n private renderMain() {\n const separator: React.ReactNode = (this.props.panel || this.state.fixed) && (\n <ModalSeparator fixed={this.state.fixed} />\n );\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={SidePageFooterDataTids.root}\n style={{ height: this.getContentHeight() }}\n className={this.styles.footerWrapper()}\n >\n <SidePageContext.Consumer>\n {({ getWidth }) => (\n <div\n className={this.cx(this.styles.footer(this.theme), {\n [this.styles.positionStatic()]: !this.getSticky(),\n })}\n style={{\n width: getWidth(),\n }}\n >\n {separator}\n <div\n className={this.cx(this.styles.footerContent(this.theme), {\n [this.styles.footerFixed(this.theme)]: this.state.fixed,\n [this.styles.panel(this.theme)]: !!this.props.panel,\n [this.styles.panelFixed(this.theme)]: !!this.props.panel && this.state.fixed,\n [this.styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n })}\n ref={this.refContent}\n >\n {isNonNullable(this.props.gap) ? (\n <Gapped vertical={this.isMobileLayout} gap={this.props.gap}>\n {this.props.children}\n </Gapped>\n ) : (\n this.props.children\n )}\n </div>\n </div>\n )}\n </SidePageContext.Consumer>\n </div>\n </CommonWrapper>\n );\n }\n\n private refContent = (node: HTMLElement | null) => {\n this.content = node;\n };\n\n private setProperStyles = () => {\n const wrapper = getRootNode(this);\n if (wrapper && this.content) {\n const wrapperRect = getDOMRect(wrapper);\n const contentRect = getDOMRect(this.content);\n const fixed = wrapperRect.top > contentRect.top;\n this.setState({ fixed });\n }\n };\n\n private getContentHeight() {\n if (!this.content) {\n return 'auto';\n }\n return getDOMRect(this.content).height;\n }\n}\n"]}
|
|
1
|
+
{"version":3,"file":"SidePageFooter.js","sourceRoot":"","sources":["../../../components/SidePage/SidePageFooter.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isNonNullable } from '../../lib/utils.js';\nimport { Gapped } from '../Gapped/index.js';\nimport type { GappedProps } from '../Gapped/index.js';\nimport { ModalSeparator } from '../Modal/ModalSeparator.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageFooterProps extends Omit<CommonProps, 'children'> {\n /** @ignore */\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n\n /** Включает разделитель перед футером. */\n panel?: boolean;\n\n /** Закрепляет футер снизу сайдпейджа при скролле длинной контент-зоны. */\n sticky?: boolean;\n\n /** Расстояние между элементами футера в пикселях. */\n gap?: GappedProps['gap'];\n}\n\ninterface SidePageFooterState {\n fixed: boolean;\n}\n\nexport const SidePageFooterDataTids = {\n root: 'SidePageFooter__root',\n} as const;\n\n/**\n * Футер сайдпейджа, где обычно располагаются кнопки основных действий.\n *\n * @visibleName SidePage.Footer\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageFooter extends React.Component<React.PropsWithChildren<SidePageFooterProps>> {\n public static __KONTUR_REACT_UI__ = 'SidePageFooter';\n public static displayName = 'SidePageFooter';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n private isMobileLayout!: boolean;\n\n public state: SidePageFooterState = {\n fixed: false,\n };\n\n private globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private theme!: Theme;\n private content: HTMLElement | null = null;\n private layoutSub: ReturnType<typeof LayoutEvents.addListener> | null = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.context.footerRef(this);\n this.update();\n this.layoutSub = LayoutEvents.addListener(this.update, this.globalObject);\n this.context.setHasFooter?.();\n this.context.setHasPanel?.(this.props.panel);\n }\n\n public componentDidUpdate(prevProps: Readonly<SidePageFooterProps>) {\n this.props.panel !== prevProps.panel && this.context.setHasPanel?.(this.props.panel);\n }\n\n public componentWillUnmount() {\n this.context.footerRef(null);\n if (this.layoutSub) {\n this.layoutSub.remove();\n }\n this.context.setHasFooter?.(false);\n this.context.setHasPanel?.(false);\n }\n\n public getSticky(): boolean {\n if (typeof this.props.sticky !== 'undefined') {\n return this.props.sticky;\n }\n\n if (this.isMobileLayout) {\n return false;\n }\n\n return true;\n }\n\n public render(): JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public update = (): void => {\n this.setProperStyles();\n };\n\n private renderMain() {\n const separator: React.ReactNode = (this.props.panel || this.state.fixed) && (\n <ModalSeparator fixed={this.state.fixed} />\n );\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={SidePageFooterDataTids.root}\n style={{ height: this.getContentHeight() }}\n className={this.styles.footerWrapper()}\n >\n <SidePageContext.Consumer>\n {({ getWidth }) => (\n <div\n className={this.cx(this.styles.footer(this.theme), {\n [this.styles.positionStatic()]: !this.getSticky(),\n })}\n style={{\n width: getWidth(),\n }}\n >\n {separator}\n <div\n className={this.cx(this.styles.footerContent(this.theme), {\n [this.styles.footerFixed(this.theme)]: this.state.fixed,\n [this.styles.panel(this.theme)]: !!this.props.panel,\n [this.styles.panelFixed(this.theme)]: !!this.props.panel && this.state.fixed,\n [this.styles.mobileFooterContent(this.theme)]: this.isMobileLayout,\n })}\n ref={this.refContent}\n >\n {isNonNullable(this.props.gap) ? (\n <Gapped vertical={this.isMobileLayout} gap={this.props.gap}>\n {this.props.children}\n </Gapped>\n ) : (\n this.props.children\n )}\n </div>\n </div>\n )}\n </SidePageContext.Consumer>\n </div>\n </CommonWrapper>\n );\n }\n\n private refContent = (node: HTMLElement | null) => {\n this.content = node;\n };\n\n private setProperStyles = () => {\n const wrapper = getRootNode(this);\n if (wrapper && this.content) {\n const wrapperRect = getDOMRect(wrapper);\n const contentRect = getDOMRect(this.content);\n const fixed = wrapperRect.top > contentRect.top;\n this.setState({ fixed });\n }\n };\n\n private getContentHeight() {\n if (!this.content) {\n return 'auto';\n }\n return getDOMRect(this.content).height;\n }\n}\n"]}
|
|
@@ -4,12 +4,13 @@ import type { TGetRootNode } from '../../lib/rootNode/index.js';
|
|
|
4
4
|
import type { SidePageContextType } from './SidePageContext.js';
|
|
5
5
|
export interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {
|
|
6
6
|
children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
|
|
7
|
-
/** Закрепляет
|
|
7
|
+
/** Закрепляет заголовок сайдпейджа при скролле длинной контент-зоны.
|
|
8
|
+
*/
|
|
8
9
|
sticky?: boolean;
|
|
9
|
-
/** Определяет, нужно ли показывать ModalSeparator. */
|
|
10
|
+
/** Определяет, нужно ли показывать разделитель ModalSeparator. */
|
|
10
11
|
hasSeparator?: boolean;
|
|
11
12
|
/**
|
|
12
|
-
* Обрезает длинный
|
|
13
|
+
* Обрезает длинный заголовок. Работает, если включен проп `sticky`.
|
|
13
14
|
* @default false.
|
|
14
15
|
*/
|
|
15
16
|
cutTitleOnStuck?: boolean;
|
|
@@ -23,7 +24,7 @@ export declare const SidePageHeaderDataTids: {
|
|
|
23
24
|
readonly close: "SidePage__close";
|
|
24
25
|
};
|
|
25
26
|
/**
|
|
26
|
-
* Шапка
|
|
27
|
+
* Шапка сайдпейджа, состоит из заголовка и крестика закрытия.
|
|
27
28
|
*
|
|
28
29
|
* @visibleName SidePage.Header
|
|
29
30
|
*/
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"SidePageHeader.js","sourceRoot":"","sources":["../../../components/SidePage/SidePageHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport throttle from 'lodash.throttle';\nimport React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isFunction } from '../../lib/utils.js';\nimport { ModalSeparator } from '../Modal/ModalSeparator.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { Sticky } from '../Sticky/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageCloseButton } from './SidePageCloseButton.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n /** Закрепляет хедер сверху сайдпейджа. */\n sticky?: boolean;\n\n /** Определяет, нужно ли показывать ModalSeparator. */\n hasSeparator?: boolean;\n\n /**\n * Обрезает длинный заголовок при «залипании» шапки.\n * @default false.\n */\n cutTitleOnStuck?: boolean;\n}\n\nexport interface SidePageHeaderState {\n isNativeStuck: boolean;\n isReadyToStuck: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n root: 'SidePageHeader__root',\n close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа\n *\n * @visibleName SidePage.Header\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n public static displayName = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n private isMobileLayout!: boolean;\n\n public state: SidePageHeaderState = {\n isNativeStuck: true,\n isReadyToStuck: false,\n };\n\n public static defaultProps: Partial<SidePageHeaderProps> = {\n hasSeparator: false,\n };\n\n private theme!: Theme;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private sticky: Sticky | null = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount = () => {\n getRootNode(this)?.parentNode?.addEventListener?.('scroll', this.throttleHandleScroll, true);\n this.context.setHasHeader?.();\n this.context.headerRef(this);\n };\n\n public componentWillUnmount = () => {\n getRootNode(this)?.parentNode?.removeEventListener?.('scroll', this.throttleHandleScroll, true);\n this.context.setHasHeader?.(false);\n this.context.headerRef(null);\n };\n\n private throttleHandleScroll = throttle((event: Event) => {\n const target = event.currentTarget as HTMLElement;\n if (target && typeof target.scrollTop === 'number') {\n this.setState({ isNativeStuck: target.scrollTop === 0 });\n }\n this.update();\n }, 5);\n\n public update = (): void => {\n this.sticky?.reflow();\n };\n\n public render(): JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getStickyProp(): boolean {\n if (typeof this.props.sticky !== 'undefined') {\n return this.props.sticky;\n }\n\n if (this.isMobileLayout) {\n return false;\n }\n\n return true;\n }\n\n private renderMain() {\n const isStickyDesktop = !this.isMobileLayout && this.getStickyProp();\n const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n const header = this.renderHeader;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={SidePageHeaderDataTids.root}\n className={this.cx(this.styles.headerWrapper(), {\n [this.styles.headerNativeStuck(this.theme)]: this.state.isNativeStuck,\n })}\n >\n {!this.state.isNativeStuck && (isStickyDesktop || isStickyMobile) ? (\n <Sticky ref={this.stickyRef} side=\"top\">\n {header}\n </Sticky>\n ) : (\n header()\n )}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n const isDisplayed = this.props.hasSeparator || fixed;\n return (\n <div>\n <div\n className={this.cx(this.styles.header(this.theme), {\n [this.styles.headerFixed(this.theme)]: fixed,\n [this.styles.mobileHeader(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.renderClose(fixed)}\n <div\n className={this.cx(this.styles.title(this.theme), {\n [this.styles.mobileTitle(this.theme)]: this.isMobileLayout,\n [this.styles.titleCut()]: fixed && this.props.cutTitleOnStuck,\n })}\n >\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n {isDisplayed && <ModalSeparator fixed={fixed} />}\n </div>\n );\n };\n\n private renderClose = (fixed: boolean) => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n return (\n <div\n className={this.cx(this.styles.wrapperClose(this.theme), {\n [this.styles.wrapperCloseFixed(this.theme)]: fixed,\n [this.styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n })}\n >\n {!this.isMobileLayout ? (\n <Sticky side=\"top\" offset={stickyOffset}>\n <SidePageCloseButton isHeaderFixed={fixed} />\n </Sticky>\n ) : (\n <SidePageCloseButton isHeaderFixed={fixed} isMobile={this.isMobileLayout} />\n )}\n </div>\n );\n };\n\n private stickyRef = (el: Sticky | null) => {\n this.sticky = el;\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"SidePageHeader.js","sourceRoot":"","sources":["../../../components/SidePage/SidePageHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport throttle from 'lodash.throttle';\nimport React, { type JSX } from 'react';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { getRootNode, rootNode } from '../../lib/rootNode/index.js';\nimport type { Theme } from '../../lib/theming/Theme.js';\nimport { ThemeContext } from '../../lib/theming/ThemeContext.js';\nimport { isFunction } from '../../lib/utils.js';\nimport { ModalSeparator } from '../Modal/ModalSeparator.js';\nimport { responsiveLayout } from '../ResponsiveLayout/decorator.js';\nimport { Sticky } from '../Sticky/index.js';\nimport { getStyles } from './SidePage.styles.js';\nimport { SidePageCloseButton } from './SidePageCloseButton.js';\nimport { SidePageContext } from './SidePageContext.js';\nimport type { SidePageContextType } from './SidePageContext.js';\n\nexport interface SidePageHeaderProps extends Omit<CommonProps, 'children'> {\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n /** Закрепляет заголовок сайдпейджа при скролле длинной контент-зоны.\n */\n sticky?: boolean;\n\n /** Определяет, нужно ли показывать разделитель ModalSeparator. */\n hasSeparator?: boolean;\n\n /**\n * Обрезает длинный заголовок. Работает, если включен проп `sticky`.\n * @default false.\n */\n cutTitleOnStuck?: boolean;\n}\n\nexport interface SidePageHeaderState {\n isNativeStuck: boolean;\n isReadyToStuck: boolean;\n}\n\nexport const SidePageHeaderDataTids = {\n root: 'SidePageHeader__root',\n close: 'SidePage__close',\n} as const;\n\n/**\n * Шапка сайдпейджа, состоит из заголовка и крестика закрытия.\n *\n * @visibleName SidePage.Header\n */\n@withRenderEnvironment\n@responsiveLayout\n@rootNode\nexport class SidePageHeader extends React.Component<SidePageHeaderProps, SidePageHeaderState> {\n public static __KONTUR_REACT_UI__ = 'SidePageHeader';\n public static displayName = 'SidePageHeader';\n\n public static contextType = SidePageContext;\n public context: SidePageContextType = this.context;\n\n private isMobileLayout!: boolean;\n\n public state: SidePageHeaderState = {\n isNativeStuck: true,\n isReadyToStuck: false,\n };\n\n public static defaultProps: Partial<SidePageHeaderProps> = {\n hasSeparator: false,\n };\n\n private theme!: Theme;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private sticky: Sticky | null = null;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount = () => {\n getRootNode(this)?.parentNode?.addEventListener?.('scroll', this.throttleHandleScroll, true);\n this.context.setHasHeader?.();\n this.context.headerRef(this);\n };\n\n public componentWillUnmount = () => {\n getRootNode(this)?.parentNode?.removeEventListener?.('scroll', this.throttleHandleScroll, true);\n this.context.setHasHeader?.(false);\n this.context.headerRef(null);\n };\n\n private throttleHandleScroll = throttle((event: Event) => {\n const target = event.currentTarget as HTMLElement;\n if (target && typeof target.scrollTop === 'number') {\n this.setState({ isNativeStuck: target.scrollTop === 0 });\n }\n this.update();\n }, 5);\n\n public update = (): void => {\n this.sticky?.reflow();\n };\n\n public render(): JSX.Element {\n this.styles = getStyles(this.emotion);\n\n return (\n <ThemeContext.Consumer>\n {(theme) => {\n this.theme = theme;\n return this.renderMain();\n }}\n </ThemeContext.Consumer>\n );\n }\n\n public getStickyProp(): boolean {\n if (typeof this.props.sticky !== 'undefined') {\n return this.props.sticky;\n }\n\n if (this.isMobileLayout) {\n return false;\n }\n\n return true;\n }\n\n private renderMain() {\n const isStickyDesktop = !this.isMobileLayout && this.getStickyProp();\n const isStickyMobile = this.isMobileLayout && this.getStickyProp();\n\n const header = this.renderHeader;\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div\n data-tid={SidePageHeaderDataTids.root}\n className={this.cx(this.styles.headerWrapper(), {\n [this.styles.headerNativeStuck(this.theme)]: this.state.isNativeStuck,\n })}\n >\n {!this.state.isNativeStuck && (isStickyDesktop || isStickyMobile) ? (\n <Sticky ref={this.stickyRef} side=\"top\">\n {header}\n </Sticky>\n ) : (\n header()\n )}\n </div>\n </CommonWrapper>\n );\n }\n\n private renderHeader = (fixed = false) => {\n const isDisplayed = this.props.hasSeparator || fixed;\n return (\n <div>\n <div\n className={this.cx(this.styles.header(this.theme), {\n [this.styles.headerFixed(this.theme)]: fixed,\n [this.styles.mobileHeader(this.theme)]: this.isMobileLayout,\n })}\n >\n {this.renderClose(fixed)}\n <div\n className={this.cx(this.styles.title(this.theme), {\n [this.styles.mobileTitle(this.theme)]: this.isMobileLayout,\n [this.styles.titleCut()]: fixed && this.props.cutTitleOnStuck,\n })}\n >\n {isFunction(this.props.children) ? this.props.children(fixed) : this.props.children}\n </div>\n </div>\n {isDisplayed && <ModalSeparator fixed={fixed} />}\n </div>\n );\n };\n\n private renderClose = (fixed: boolean) => {\n const stickyOffset = parseInt(this.theme.sidePageHeaderStickyOffset);\n return (\n <div\n className={this.cx(this.styles.wrapperClose(this.theme), {\n [this.styles.wrapperCloseFixed(this.theme)]: fixed,\n [this.styles.mobileWrapperClose(this.theme)]: this.isMobileLayout,\n })}\n >\n {!this.isMobileLayout ? (\n <Sticky side=\"top\" offset={stickyOffset}>\n <SidePageCloseButton isHeaderFixed={fixed} />\n </Sticky>\n ) : (\n <SidePageCloseButton isHeaderFixed={fixed} isMobile={this.isMobileLayout} />\n )}\n </div>\n );\n };\n\n private stickyRef = (el: Sticky | null) => {\n this.sticky = el;\n };\n}\n"]}
|
|
@@ -3,12 +3,12 @@ import type { CommonProps } from '../../internal/CommonWrapper/index.js';
|
|
|
3
3
|
import type { TGetRootNode } from '../../lib/rootNode/index.js';
|
|
4
4
|
import type { Nullable } from '../../typings/utility-types.js';
|
|
5
5
|
export interface StickyProps extends Omit<CommonProps, 'children'> {
|
|
6
|
-
/**
|
|
6
|
+
/** Край, к которому будет закреплен элемент. */
|
|
7
7
|
side: 'top' | 'bottom';
|
|
8
|
-
/**
|
|
8
|
+
/** Отступ от края экрана в пикселях, на который сдвигается элемент в закреплённом состоянии.
|
|
9
9
|
* @default 0 */
|
|
10
10
|
offset?: number;
|
|
11
|
-
/**
|
|
11
|
+
/** Задаёт функцию, которая возвращает DOM-элемент, который нельзя пересекать. */
|
|
12
12
|
getStop?: () => Nullable<HTMLElement>;
|
|
13
13
|
/** @ignore */
|
|
14
14
|
children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);
|
|
@@ -28,7 +28,11 @@ export declare const StickyDataTids: {
|
|
|
28
28
|
type DefaultProps = Required<Pick<StickyProps, 'offset'>>;
|
|
29
29
|
/**
|
|
30
30
|
* `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.
|
|
31
|
-
* Это полезно для создания
|
|
31
|
+
* Это полезно для создания «прилипающих» элементов, которые должны оставаться видимыми при прокрутке содержимого.
|
|
32
|
+
*
|
|
33
|
+
* - `side` определяет край, к которому будет закрепляться элемент.
|
|
34
|
+
* - `offset` задаёт отступ от края экрана в пикселях, на который сдвигается элемент в закреплённом состоянии.
|
|
35
|
+
* - `getStop` задаёт функцию, которая возвращает DOM-элемент, который нельзя пересекать.
|
|
32
36
|
*/
|
|
33
37
|
export declare class Sticky extends React.Component<StickyProps, StickyState> {
|
|
34
38
|
static __KONTUR_REACT_UI__: string;
|
|
@@ -48,7 +48,11 @@ export var StickyDataTids = {
|
|
|
48
48
|
};
|
|
49
49
|
/**
|
|
50
50
|
* `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.
|
|
51
|
-
* Это полезно для создания
|
|
51
|
+
* Это полезно для создания «прилипающих» элементов, которые должны оставаться видимыми при прокрутке содержимого.
|
|
52
|
+
*
|
|
53
|
+
* - `side` определяет край, к которому будет закрепляться элемент.
|
|
54
|
+
* - `offset` задаёт отступ от края экрана в пикселях, на который сдвигается элемент в закреплённом состоянии.
|
|
55
|
+
* - `getStop` задаёт функцию, которая возвращает DOM-элемент, который нельзя пересекать.
|
|
52
56
|
*/
|
|
53
57
|
var Sticky = /** @class */ (function (_super) {
|
|
54
58
|
__extends(Sticky, _super);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Sticky.js","sourceRoot":"","sources":["../../../components/Sticky/Sticky.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\nimport shallowEqual from 'shallowequal';\nimport warning from 'warning';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { isFunction } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getStyles } from './Sticky.styles.js';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends Omit<CommonProps, 'children'> {\n /** Задает сторону залипания. */\n side: 'top' | 'bottom';\n\n /** Задает отступ от края экрана в пикселях, на который сдвигается элемент в залипшем состоянии.\n * @default 0 */\n offset?: number;\n\n /** Задает функцию, которая возвращает DOM-элемент, который нельзя пересекать. */\n getStop?: () => Nullable<HTMLElement>;\n\n /** @ignore */\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n fixed: boolean;\n deltaHeight: number;\n height?: number;\n width?: number;\n left?: number;\n stopped: boolean;\n relativeTop: number;\n}\n\nexport const StickyDataTids = {\n root: 'Sticky__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n/**\n * `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.\n * Это полезно для создания \"прилипающих\" элементов, которые остаются видимыми при прокрутке содержимого.\n */\n@withRenderEnvironment\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n public static __KONTUR_REACT_UI__ = 'Sticky';\n public static displayName = 'Sticky';\n\n public static defaultProps: DefaultProps = { offset: 0 };\n\n private getProps = createPropsGetter(Sticky.defaultProps);\n\n public state: StickyState = {\n fixed: false,\n deltaHeight: 0,\n stopped: false,\n relativeTop: 0,\n };\n\n private globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private wrapper: Nullable<HTMLElement>;\n private inner: Nullable<HTMLElement>;\n private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n private reflowCounter = 0;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.reflow();\n\n this.layoutSubscription = LayoutEvents.addListener(this.reflow, this.globalObject);\n }\n\n public componentWillUnmount() {\n if (this.layoutSubscription.remove) {\n this.layoutSubscription.remove();\n }\n }\n\n public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n this.reflow();\n this.reflowCounter += 1;\n return;\n }\n }\n this.reflowCounter = 0;\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n return this.renderMain();\n }\n\n private renderMain() {\n let { children } = this.props;\n const { side } = this.props;\n const offset = this.getProps().offset;\n const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n const innerStyle: React.CSSProperties = {};\n\n if (fixed) {\n if (stopped) {\n innerStyle.top = relativeTop;\n innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n } else {\n innerStyle.width = width;\n innerStyle[side] = offset;\n innerStyle.left = left;\n }\n }\n\n if (isFunction(children)) {\n children = children(fixed);\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={this.styles.wrapper()}>\n <ZIndex\n priority=\"Sticky\"\n applyZIndex={fixed}\n className={this.cx(this.styles.inner(), {\n [this.styles.fixed()]: fixed && !stopped,\n [this.styles.stopped()]: stopped,\n })}\n style={innerStyle}\n wrapperRef={this.refInner}\n >\n <div className={this.styles.container()}>{children}</div>\n </ZIndex>\n {fixed && !stopped ? <div style={{ width, height }} /> : null}\n </div>\n </CommonWrapper>\n );\n }\n\n private refWrapper = (ref: Nullable<HTMLElement>) => {\n this.wrapper = ref;\n };\n\n private refInner = (ref: Nullable<HTMLElement>) => {\n this.inner = ref;\n };\n\n /**\n * Пересчитать габариты и позицию залипшего элемента\n *\n * @public\n */\n public reflow = (): void => {\n if (!this.globalObject.document?.documentElement) {\n warning(false, 'There is no \"documentElement\" in document');\n return;\n }\n\n const windowHeight = this.globalObject.innerHeight || this.globalObject.document.documentElement.clientHeight;\n if (!this.wrapper || !this.inner) {\n return;\n }\n const { top, bottom, left, width } = getDOMRect(this.wrapper);\n const { height } = getDOMRect(this.inner);\n const { getStop, side } = this.props;\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\n const offset = this.getProps().offset;\n const fixed = side === 'top' ? Math.ceil(top) < offset : Math.floor(bottom) > windowHeight - offset;\n\n this.setState({ fixed, left });\n\n if (fixed && !prevFixed) {\n this.setState({ width, height });\n }\n\n if (fixed) {\n this.setState({ width });\n const stop = getStop && getStop();\n if (stop) {\n const deltaHeight = prevHeight - height;\n const stopRect = getDOMRect(stop);\n const outerHeight = height + offset;\n let stopped = false;\n let relativeTop = 0;\n\n if (side === 'top') {\n stopped = stopRect.top - outerHeight < 0;\n relativeTop = stopRect.top - prevHeight - top;\n } else {\n stopped = stopRect.bottom + outerHeight > windowHeight;\n relativeTop = stopRect.bottom - top;\n }\n\n this.setState({ relativeTop, deltaHeight, stopped });\n }\n }\n };\n}\n"]}
|
|
1
|
+
{"version":3,"file":"Sticky.js","sourceRoot":"","sources":["../../../components/Sticky/Sticky.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { Emotion } from '@emotion/css/create-instance';\nimport React from 'react';\nimport shallowEqual from 'shallowequal';\nimport warning from 'warning';\n\nimport type { CommonProps } from '../../internal/CommonWrapper/index.js';\nimport { CommonWrapper } from '../../internal/CommonWrapper/index.js';\nimport { ZIndex } from '../../internal/ZIndex/index.js';\nimport { createPropsGetter } from '../../lib/createPropsGetter.js';\nimport { getDOMRect } from '../../lib/dom/getDOMRect.js';\nimport type { GlobalObject } from '../../lib/globalObject.js';\nimport * as LayoutEvents from '../../lib/LayoutEvents.js';\nimport { withRenderEnvironment } from '../../lib/renderEnvironment/index.js';\nimport type { TGetRootNode, TSetRootNode } from '../../lib/rootNode/index.js';\nimport { rootNode } from '../../lib/rootNode/index.js';\nimport { isFunction } from '../../lib/utils.js';\nimport type { Nullable } from '../../typings/utility-types.js';\nimport { getStyles } from './Sticky.styles.js';\n\nconst MAX_REFLOW_RETRIES = 5;\n\nexport interface StickyProps extends Omit<CommonProps, 'children'> {\n /** Край, к которому будет закреплен элемент. */\n side: 'top' | 'bottom';\n\n /** Отступ от края экрана в пикселях, на который сдвигается элемент в закреплённом состоянии.\n * @default 0 */\n offset?: number;\n\n /** Задаёт функцию, которая возвращает DOM-элемент, который нельзя пересекать. */\n getStop?: () => Nullable<HTMLElement>;\n\n /** @ignore */\n children?: React.ReactNode | ((fixed: boolean) => React.ReactNode);\n}\n\nexport interface StickyState {\n fixed: boolean;\n deltaHeight: number;\n height?: number;\n width?: number;\n left?: number;\n stopped: boolean;\n relativeTop: number;\n}\n\nexport const StickyDataTids = {\n root: 'Sticky__root',\n} as const;\n\ntype DefaultProps = Required<Pick<StickyProps, 'offset'>>;\n\n/**\n * `Sticky` позволяет закреплять элемент интерфейса в определенной позиции на экране при прокрутке страницы.\n * Это полезно для создания «прилипающих» элементов, которые должны оставаться видимыми при прокрутке содержимого.\n *\n * - `side` определяет край, к которому будет закрепляться элемент.\n * - `offset` задаёт отступ от края экрана в пикселях, на который сдвигается элемент в закреплённом состоянии.\n * - `getStop` задаёт функцию, которая возвращает DOM-элемент, который нельзя пересекать.\n */\n@withRenderEnvironment\n@rootNode\nexport class Sticky extends React.Component<StickyProps, StickyState> {\n public static __KONTUR_REACT_UI__ = 'Sticky';\n public static displayName = 'Sticky';\n\n public static defaultProps: DefaultProps = { offset: 0 };\n\n private getProps = createPropsGetter(Sticky.defaultProps);\n\n public state: StickyState = {\n fixed: false,\n deltaHeight: 0,\n stopped: false,\n relativeTop: 0,\n };\n\n private globalObject!: GlobalObject;\n private emotion!: Emotion;\n private cx!: Emotion['cx'];\n private styles!: ReturnType<typeof getStyles>;\n private wrapper: Nullable<HTMLElement>;\n private inner: Nullable<HTMLElement>;\n private layoutSubscription: { remove: Nullable<() => void> } = { remove: null };\n private reflowCounter = 0;\n public getRootNode!: TGetRootNode;\n private setRootNode!: TSetRootNode;\n\n public componentDidMount() {\n this.reflow();\n\n this.layoutSubscription = LayoutEvents.addListener(this.reflow, this.globalObject);\n }\n\n public componentWillUnmount() {\n if (this.layoutSubscription.remove) {\n this.layoutSubscription.remove();\n }\n }\n\n public componentDidUpdate(prevProps: StickyProps, prevState: StickyState) {\n if (!shallowEqual(prevProps, this.props) || !shallowEqual(prevState, this.state)) {\n if (this.reflowCounter < MAX_REFLOW_RETRIES) {\n this.reflow();\n this.reflowCounter += 1;\n return;\n }\n }\n this.reflowCounter = 0;\n }\n\n public render(): React.JSX.Element {\n this.styles = getStyles(this.emotion);\n return this.renderMain();\n }\n\n private renderMain() {\n let { children } = this.props;\n const { side } = this.props;\n const offset = this.getProps().offset;\n const { fixed, stopped, relativeTop, deltaHeight, width, height, left } = this.state;\n const innerStyle: React.CSSProperties = {};\n\n if (fixed) {\n if (stopped) {\n innerStyle.top = relativeTop;\n innerStyle[side === 'top' ? 'marginTop' : 'marginBottom'] = deltaHeight;\n } else {\n innerStyle.width = width;\n innerStyle[side] = offset;\n innerStyle.left = left;\n }\n }\n\n if (isFunction(children)) {\n children = children(fixed);\n }\n\n return (\n <CommonWrapper rootNodeRef={this.setRootNode} {...this.props}>\n <div data-tid={StickyDataTids.root} ref={this.refWrapper} className={this.styles.wrapper()}>\n <ZIndex\n priority=\"Sticky\"\n applyZIndex={fixed}\n className={this.cx(this.styles.inner(), {\n [this.styles.fixed()]: fixed && !stopped,\n [this.styles.stopped()]: stopped,\n })}\n style={innerStyle}\n wrapperRef={this.refInner}\n >\n <div className={this.styles.container()}>{children}</div>\n </ZIndex>\n {fixed && !stopped ? <div style={{ width, height }} /> : null}\n </div>\n </CommonWrapper>\n );\n }\n\n private refWrapper = (ref: Nullable<HTMLElement>) => {\n this.wrapper = ref;\n };\n\n private refInner = (ref: Nullable<HTMLElement>) => {\n this.inner = ref;\n };\n\n /**\n * Пересчитать габариты и позицию залипшего элемента\n *\n * @public\n */\n public reflow = (): void => {\n if (!this.globalObject.document?.documentElement) {\n warning(false, 'There is no \"documentElement\" in document');\n return;\n }\n\n const windowHeight = this.globalObject.innerHeight || this.globalObject.document.documentElement.clientHeight;\n if (!this.wrapper || !this.inner) {\n return;\n }\n const { top, bottom, left, width } = getDOMRect(this.wrapper);\n const { height } = getDOMRect(this.inner);\n const { getStop, side } = this.props;\n const { fixed: prevFixed, height: prevHeight = height } = this.state;\n const offset = this.getProps().offset;\n const fixed = side === 'top' ? Math.ceil(top) < offset : Math.floor(bottom) > windowHeight - offset;\n\n this.setState({ fixed, left });\n\n if (fixed && !prevFixed) {\n this.setState({ width, height });\n }\n\n if (fixed) {\n this.setState({ width });\n const stop = getStop && getStop();\n if (stop) {\n const deltaHeight = prevHeight - height;\n const stopRect = getDOMRect(stop);\n const outerHeight = height + offset;\n let stopped = false;\n let relativeTop = 0;\n\n if (side === 'top') {\n stopped = stopRect.top - outerHeight < 0;\n relativeTop = stopRect.top - prevHeight - top;\n } else {\n stopped = stopRect.bottom + outerHeight > windowHeight;\n relativeTop = stopRect.bottom - top;\n }\n\n this.setState({ relativeTop, deltaHeight, stopped });\n }\n }\n };\n}\n"]}
|