|
|
@@ -1,13 +1,13 @@
|
|
|
/* eslint-disable no-nested-ternary */
|
|
|
-import React, { CSSProperties } from 'react';
|
|
|
+import React, {CSSProperties} from 'react';
|
|
|
import BaseComponent from '../_base/baseComponent';
|
|
|
import PropTypes from 'prop-types';
|
|
|
import Portal from '../_portal';
|
|
|
import cls from 'classnames';
|
|
|
-import ConfigContext, { ContextValue } from '../configProvider/context';
|
|
|
-import { cssClasses, strings } from '@douyinfe/semi-foundation/sideSheet/constants';
|
|
|
+import ConfigContext, {ContextValue} from '../configProvider/context';
|
|
|
+import {cssClasses, strings} from '@douyinfe/semi-foundation/sideSheet/constants';
|
|
|
import SideSheetContent from './SideSheetContent';
|
|
|
-import { noop } from 'lodash';
|
|
|
+import {noop} from 'lodash';
|
|
|
import SideSheetFoundation, {
|
|
|
SideSheetAdapter,
|
|
|
SideSheetProps,
|
|
|
@@ -15,13 +15,13 @@ import SideSheetFoundation, {
|
|
|
} from '@douyinfe/semi-foundation/sideSheet/sideSheetFoundation';
|
|
|
import '@douyinfe/semi-foundation/sideSheet/sideSheet.scss';
|
|
|
import CSSAnimation from "../_cssAnimation";
|
|
|
-import { executeWhenCallTimesEnough } from "@douyinfe/semi-ui/_utils";
|
|
|
+import {executeWhenCallTimesEnough} from "@douyinfe/semi-ui/_utils";
|
|
|
|
|
|
const prefixCls = cssClasses.PREFIX;
|
|
|
const defaultWidthList = strings.WIDTH;
|
|
|
const defaultHeight = strings.HEIGHT;
|
|
|
|
|
|
-export { SideSheetContentProps } from './SideSheetContent';
|
|
|
+export {SideSheetContentProps} from './SideSheetContent';
|
|
|
|
|
|
export interface SideSheetReactProps extends SideSheetProps {
|
|
|
bodyStyle?: CSSProperties;
|
|
|
@@ -87,7 +87,7 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
|
|
|
|
|
|
constructor(props: SideSheetReactProps) {
|
|
|
super(props);
|
|
|
- this.state = { hidden: !this.props.visible, shouldRender: this.props.visible };
|
|
|
+ this.state = {hidden: !this.props.visible, shouldRender: this.props.visible};
|
|
|
this.foundation = new SideSheetFoundation(this.adapter);
|
|
|
}
|
|
|
|
|
|
@@ -97,13 +97,13 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
|
|
|
return {
|
|
|
...super.adapter,
|
|
|
disabledBodyScroll: () => {
|
|
|
- const { getPopupContainer } = this.props;
|
|
|
+ const {getPopupContainer} = this.props;
|
|
|
if (!getPopupContainer && document) {
|
|
|
document.body.style.overflow = 'hidden';
|
|
|
}
|
|
|
},
|
|
|
enabledBodyScroll: () => {
|
|
|
- const { getPopupContainer } = this.props;
|
|
|
+ const {getPopupContainer} = this.props;
|
|
|
if (!getPopupContainer && document) {
|
|
|
document.body.style.overflow = '';
|
|
|
}
|
|
|
@@ -126,12 +126,12 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
|
|
|
},
|
|
|
toggleHidden: (hidden: boolean) => {
|
|
|
if (hidden !== this.state.hidden) {
|
|
|
- this.setState({ hidden });
|
|
|
+ this.setState({hidden});
|
|
|
}
|
|
|
},
|
|
|
setShouldRender: (shouldRender: boolean) => {
|
|
|
if (shouldRender !== this.state.shouldRender) {
|
|
|
- this.setState({ shouldRender });
|
|
|
+ this.setState({shouldRender});
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
@@ -172,14 +172,10 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
|
|
|
this.foundation.setShouldRender(true);
|
|
|
}
|
|
|
|
|
|
- if (prevState.hidden!==this.state.hidden){
|
|
|
+ if (prevState.hidden !== this.state.hidden) {
|
|
|
this.foundation.onVisibleChange(!this.state.hidden);
|
|
|
}
|
|
|
|
|
|
- if (!this.props.motion){
|
|
|
- // if motion is true, we should set state after animation end, so we don't need to set state here
|
|
|
- this.updateState();
|
|
|
- }
|
|
|
}
|
|
|
|
|
|
componentWillUnmount() {
|
|
|
@@ -196,7 +192,7 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
|
|
|
this.foundation.handleKeyDown(e);
|
|
|
};
|
|
|
|
|
|
- updateState = ()=>{
|
|
|
+ updateState = () => {
|
|
|
const shouldRender = (this.props.visible || this.props.keepDOM);
|
|
|
this.foundation.setShouldRender(shouldRender);
|
|
|
this.foundation.toggleHidden(!this.props.visible);
|
|
|
@@ -219,7 +215,7 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
|
|
|
keepDOM,
|
|
|
...props
|
|
|
} = this.props;
|
|
|
- const { direction } = this.context;
|
|
|
+ const {direction} = this.context;
|
|
|
const isVertical = placement === 'left' || placement === 'right';
|
|
|
const isHorizontal = placement === 'top' || placement === 'bottom';
|
|
|
const sheetWidth = isVertical ? (width ? width : defaultWidthList[size]) : '100%';
|
|
|
@@ -242,46 +238,36 @@ export default class SideSheet extends BaseComponent<SideSheetReactProps, SideSh
|
|
|
};
|
|
|
|
|
|
// Since user could change animate duration , we don't know which animation end first. So we call updateState func twice.
|
|
|
+ return <CSSAnimation motion={this.props.motion} animationState={visible ? 'enter' : 'leave'} startClassName={
|
|
|
+ visible ? `${prefixCls}-animation-mask_show` : `${prefixCls}-animation-mask_hide`
|
|
|
+ } onAnimationEnd={this.updateState}>
|
|
|
+ {
|
|
|
+ ({
|
|
|
+ animationClassName: maskAnimationClassName,
|
|
|
+ animationEventsNeedBind: maskAnimationEventsNeedBind
|
|
|
+ }) => {
|
|
|
+ return <CSSAnimation
|
|
|
+ motion={this.props.motion}
|
|
|
+ animationState={visible ? 'enter' : 'leave'}
|
|
|
+ startClassName={visible ? `${prefixCls}-animation-content_show_${this.props.placement}` : `${prefixCls}-animation-content_hide_${this.props.placement}`}
|
|
|
+ onAnimationEnd={this.updateState /* for no mask case*/}
|
|
|
+ >
|
|
|
+ {({animationClassName, animationStyle, animationEventsNeedBind}) => {
|
|
|
+ return this.state.shouldRender ? <SideSheetContent
|
|
|
+ {...contentProps}
|
|
|
+ maskExtraProps={maskAnimationEventsNeedBind}
|
|
|
+ wrapperExtraProps={animationEventsNeedBind}
|
|
|
+ dialogClassName={animationClassName}
|
|
|
+ maskClassName={maskAnimationClassName}
|
|
|
+ style={{...animationStyle, ...style}}>
|
|
|
+ {children}
|
|
|
+ </SideSheetContent> : <></>;
|
|
|
+ }}
|
|
|
+ </CSSAnimation>;
|
|
|
|
|
|
- if (this.props.motion) {
|
|
|
- return <CSSAnimation animationState={visible ? 'enter' : 'leave'} startClassName={
|
|
|
- visible ? `${prefixCls}-animation-mask_show` : `${prefixCls}-animation-mask_hide`
|
|
|
- } onAnimationEnd={this.updateState}>
|
|
|
- {
|
|
|
- ({
|
|
|
- animationClassName: maskAnimationClassName,
|
|
|
- animationEventsNeedBind: maskAnimationEventsNeedBind
|
|
|
- }) => {
|
|
|
- return <CSSAnimation
|
|
|
- animationState={visible ? 'enter' : 'leave'}
|
|
|
- startClassName={visible ? `${prefixCls}-animation-content_show_${this.props.placement}` : `${prefixCls}-animation-content_hide_${this.props.placement}`}
|
|
|
- onAnimationEnd={this.updateState /* for no mask case*/}
|
|
|
- >
|
|
|
- {({ animationClassName, animationStyle, animationEventsNeedBind }) => {
|
|
|
- return this.state.shouldRender ? <SideSheetContent
|
|
|
- {...contentProps}
|
|
|
- maskExtraProps={maskAnimationEventsNeedBind}
|
|
|
- wrapperExtraProps={animationEventsNeedBind}
|
|
|
- dialogClassName={animationClassName}
|
|
|
- maskClassName={maskAnimationClassName}
|
|
|
- style={{ ...animationStyle, ...style }}>
|
|
|
- {children}
|
|
|
- </SideSheetContent> : <></>;
|
|
|
- }}
|
|
|
- </CSSAnimation>;
|
|
|
-
|
|
|
- }
|
|
|
}
|
|
|
- </CSSAnimation>;
|
|
|
- }
|
|
|
- if (this.state.shouldRender) {
|
|
|
- return (
|
|
|
- <SideSheetContent {...contentProps} style={style} maskStyle={maskStyle}>
|
|
|
- {children}
|
|
|
- </SideSheetContent>
|
|
|
- );
|
|
|
- }
|
|
|
- return null;
|
|
|
+ }
|
|
|
+ </CSSAnimation>;
|
|
|
}
|
|
|
|
|
|
render() {
|
代强