Protei/PromucFlow_constructor
2
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Fix: Modal Size gets cut in smaller screens. (#3441)

Browse Source
This commit is contained in:
Ashok Kumar M 2021-03-09 11:27:44 +05:30 committed by GitHub
parent 0a7bf6d0d3
commit 4781f1096c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 23 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
app/client/src/components/designSystems/blueprint/ModalComponent.tsx
View File

@ -26,6 +26,7 @@ const Container = styled.div<{
justify-content: center;
align-items: center;
& .${Classes.OVERLAY_CONTENT} {
max-width: 95%;
width: ${(props) => props.width}px;
min-height: ${(props) => props.height}px;
background: white;

25
app/client/src/widgets/ModalWidget.tsx
View File

@ -9,10 +9,13 @@ import {
WidgetTypes,
RenderMode,
GridDefaults,
MAIN_CONTAINER_WIDGET_ID,
} from "constants/WidgetConstants";
import { generateClassName } from "utils/generators";
import * as Sentry from "@sentry/react";
import withMeta, { WithMeta } from "./MetaHOC";
import { AppState } from "reducers";
import { getWidget } from "sagas/selectors";
const MODAL_SIZE: { [id: string]: { width: number; height: number } } = {
MODAL_SMALL: {
@ -72,6 +75,14 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
canEscapeKeyClose: false,
};
getModalWidth() {
const widthFromOverlay = this.props.mainContainer.rightColumn * 0.95;
const defaultModalWidth = MODAL_SIZE[this.props.size].width;
return widthFromOverlay < defaultModalWidth
? widthFromOverlay
: defaultModalWidth;
}
renderChildWidget = (childWidgetData: WidgetProps): ReactNode => {
childWidgetData.parentId = this.props.widgetId;
childWidgetData.shouldScrollContents = false;
@ -82,7 +93,7 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
childWidgetData.isVisible = this.props.isVisible;
childWidgetData.containerStyle = "none";
childWidgetData.minHeight = MODAL_SIZE[this.props.size].height;
childWidgetData.rightColumn = MODAL_SIZE[this.props.size].width;
childWidgetData.rightColumn = this.getModalWidth();
return WidgetFactory.createWidget(childWidgetData, this.props.renderMode);
};
@ -108,7 +119,7 @@ export class ModalWidget extends BaseWidget<ModalWidgetProps, WidgetState> {
<ModalComponent
isOpen={!!this.props.isVisible}
onClose={this.closeModal}
width={MODAL_SIZE[this.props.size].width}
width={this.getModalWidth()}
height={MODAL_SIZE[this.props.size].height}
className={`t--modal-widget ${generateClassName(
this.props.widgetId,
@ -150,6 +161,7 @@ export interface ModalWidgetProps extends WidgetProps, WithMeta {
canEscapeKeyClose?: boolean;
shouldScrollContents?: boolean;
size: string;
mainContainer: WidgetProps;
}
const mapDispatchToProps = (dispatch: any) => ({
@ -169,8 +181,15 @@ const mapDispatchToProps = (dispatch: any) => ({
});
},
});
const mapStateToProps = (state: AppState) => {
const props = {
mainContainer: getWidget(state, MAIN_CONTAINER_WIDGET_ID),
};
return props;
};
export default ModalWidget;
export const ProfiledModalWidget = connect(
null,
mapStateToProps,
mapDispatchToProps,
)(Sentry.withProfiler(withMeta(ModalWidget)));