Montassar Ghanmy
+118
@@ -0,0 +1,118 @@
|
||||
import React, { Component } from 'react';
|
||||
import Icon from 'app/components/icon/icon.jsx';
|
||||
import PerfectScrollbar from 'react-perfect-scrollbar';
|
||||
import Tabs from 'components/tabs/tabs.jsx';
|
||||
import './deprecated-object-modal.scss';
|
||||
import { Divider } from 'antd';
|
||||
|
||||
export class ObjectModalTitle extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className={'modal_title ' + this.props.className} style={this.props.style}>
|
||||
{this.props.children}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
//ObjectModalSeparator
|
||||
export class ObjectModalSeparator extends Component {
|
||||
render() {
|
||||
return <div className="separator"></div>;
|
||||
}
|
||||
}
|
||||
//ObjectModalSectionTitle
|
||||
export class ObjectModalSectionTitle extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
display: 'flex',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'space-between',
|
||||
marginBottom: this.props.smallMargin ? '16px' : '',
|
||||
}}
|
||||
>
|
||||
<b>{this.props.title || this.props.children}</b>
|
||||
<div>{this.props.action}</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// ObjectModalFormTitle
|
||||
export class ObjectModalFormTitle extends Component {
|
||||
render() {
|
||||
return (
|
||||
<div className={'section_title ' + this.props.className} style={this.props.style}>
|
||||
{this.props.icon && <Icon type={this.props.icon} className="m-icon-small" />}
|
||||
<span>{this.props.name}</span>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
export class ObjectModal extends Component {
|
||||
constructor(props) {
|
||||
super();
|
||||
this.state = {};
|
||||
}
|
||||
render() {
|
||||
return (
|
||||
<div className={'object_modal ' + this.props.className}>
|
||||
<div className="top_right_buttons">
|
||||
{this.props.onEdit && (
|
||||
<div className="square_button" onClick={this.props.onEdit}>
|
||||
<Icon type="edit-alt" className="m-icon-small" />
|
||||
</div>
|
||||
)}
|
||||
{this.props.onClose && (
|
||||
<div className="square_button" onClick={this.props.onClose}>
|
||||
<Icon type="times" className="m-icon-small" />
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div className={!this.props.noCloseButton ? 'title' : ''}>{this.props.title}</div>
|
||||
|
||||
{this.props.tabs && (
|
||||
<Tabs
|
||||
tabs={this.props.tabs.map(item => {
|
||||
return {
|
||||
title: item.title || '',
|
||||
render: (
|
||||
<div className="body">
|
||||
<PerfectScrollbar options={{ suppressScrollX: true }} component="div">
|
||||
{item.render}
|
||||
</PerfectScrollbar>
|
||||
</div>
|
||||
),
|
||||
};
|
||||
})}
|
||||
/>
|
||||
)}
|
||||
|
||||
{!this.props.tabs && (
|
||||
<div className="body">
|
||||
{!!this.props.noScrollBar && (
|
||||
<div className="child-with-margin">{this.props.children}</div>
|
||||
)}
|
||||
{!this.props.noScrollBar && (
|
||||
<PerfectScrollbar options={{ suppressScrollX: true }} component="div">
|
||||
{this.props.children}
|
||||
</PerfectScrollbar>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
|
||||
{this.props.footer && <div className="separator" style={{ marginTop: 0 }} />}
|
||||
{this.props.footer && (
|
||||
<div className="footer bottom-margin">
|
||||
<Divider />
|
||||
<div className="x-margin">{this.props.footer}</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
}
|
||||
+64
@@ -0,0 +1,64 @@
|
||||
.object_modal {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin-bottom: 24px;
|
||||
|
||||
& > .title {
|
||||
padding-right: 56px;
|
||||
margin: 16px 0 11px 16px;
|
||||
}
|
||||
|
||||
& > .top_right_buttons {
|
||||
position: absolute;
|
||||
top: 16px;
|
||||
right: 16px;
|
||||
left: 16px;
|
||||
text-align: right;
|
||||
|
||||
.square_button {
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: var(--border-radius-base);
|
||||
margin-left: 8px;
|
||||
background: var(--grey-background);
|
||||
cursor: pointer;
|
||||
|
||||
&:hover {
|
||||
background: var(--primary-background);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
& > .body {
|
||||
margin: 0 0;
|
||||
.scrollbar-container,
|
||||
.child-with-margin {
|
||||
padding: 16px;
|
||||
max-height: calc(80vh - 200px);
|
||||
}
|
||||
}
|
||||
|
||||
.modal_title {
|
||||
font-size: 24px;
|
||||
color: var(--black);
|
||||
}
|
||||
}
|
||||
|
||||
.section_title {
|
||||
color: var(--grey-dark);
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
margin-bottom: 8px;
|
||||
margin-top: 24px;
|
||||
|
||||
i {
|
||||
margin-right: 4px;
|
||||
&:before {
|
||||
margin-left: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,59 @@
|
||||
.modal-layout {
|
||||
padding: 0px;
|
||||
|
||||
h2.ant-typography img.emojione {
|
||||
width: 40px !important;
|
||||
height: 40px !important;
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
&,
|
||||
.modal-layout-footer {
|
||||
background: transparent !important;
|
||||
height: auto;
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.modal-layout-header {
|
||||
border-top-left-radius: var(--border-radius-large);
|
||||
border-top-right-radius: var(--border-radius-large);
|
||||
padding: 0;
|
||||
background: var(--white);
|
||||
height: auto;
|
||||
|
||||
& .modal-layout-row,
|
||||
& {
|
||||
min-height: 64px;
|
||||
}
|
||||
|
||||
.square-button {
|
||||
vertical-align: top;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
border-radius: var(--border-radius-large);
|
||||
cursor: pointer;
|
||||
background: var(--grey-background);
|
||||
|
||||
&.red {
|
||||
color: var(--red);
|
||||
background: var(--white);
|
||||
}
|
||||
&:hover {
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.modal-layout-row {
|
||||
height: 100%;
|
||||
padding: 0 22px;
|
||||
}
|
||||
|
||||
.modal-layout-footer {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,95 @@
|
||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
||||
import React, { FC } from 'react';
|
||||
|
||||
import classNames from 'classnames';
|
||||
import { Divider, Layout, Typography, Col, Row } from 'antd';
|
||||
|
||||
import ModalManager from 'app/components/modal/modal-manager';
|
||||
import Icon from 'app/components/icon/icon.jsx';
|
||||
|
||||
import './object-modal.scss';
|
||||
|
||||
type PropsType = {
|
||||
title?: string | JSX.Element;
|
||||
closable?: boolean;
|
||||
children?: React.Component | JSX.Element | any;
|
||||
footer?: React.Component | JSX.Element | any;
|
||||
hideFooterDivider?: boolean;
|
||||
footerAlign?: 'start' | 'end' | 'center' | 'space-around' | 'space-between' | undefined;
|
||||
titleCenter?: boolean;
|
||||
style?: React.CSSProperties;
|
||||
headerStyle?: React.CSSProperties;
|
||||
footerStyle?: React.CSSProperties;
|
||||
titleLevel?: 5 | 1 | 2 | 3 | 4 | undefined;
|
||||
titleColor?: string;
|
||||
colTitleStyle?: React.CSSProperties;
|
||||
contentStyle?: React.CSSProperties;
|
||||
titleTypographyStyle?: React.CSSProperties;
|
||||
className?: string;
|
||||
footerDividerStyle?: React.CSSProperties;
|
||||
onClose?: () => void;
|
||||
};
|
||||
|
||||
const { Header, Content, Footer } = Layout;
|
||||
const ObjectModal: FC<PropsType> = (props: PropsType) => {
|
||||
return (
|
||||
<Layout
|
||||
className={classNames('modal-layout', props.className)}
|
||||
hasSider={false}
|
||||
style={props.style || {}}
|
||||
>
|
||||
<Header className="modal-layout-header" style={props.headerStyle || {}}>
|
||||
<Row justify="space-between" align="middle" className="modal-layout-row" wrap={false}>
|
||||
{props.titleCenter && <Col style={{ width: 32 }}></Col>}
|
||||
{props.title && (
|
||||
<Col style={props.colTitleStyle}>
|
||||
<Typography.Title
|
||||
level={props.titleLevel || 5}
|
||||
style={{
|
||||
margin: 0,
|
||||
marginTop: props.titleCenter ? 8 : 0,
|
||||
color: props.titleColor,
|
||||
...props.titleTypographyStyle,
|
||||
}}
|
||||
>
|
||||
{props.title}
|
||||
</Typography.Title>
|
||||
</Col>
|
||||
)}
|
||||
{(props.closable === true && (
|
||||
<Col>
|
||||
<Icon
|
||||
type="times"
|
||||
className={`m-icon-small square-button ${
|
||||
props.headerStyle?.backgroundColor ? 'red' : ''
|
||||
}`}
|
||||
onClick={() => (props?.onClose ? props.onClose() : ModalManager.closeAll())}
|
||||
/>
|
||||
</Col>
|
||||
)) || <Col style={{ width: 32 }}></Col>}
|
||||
</Row>
|
||||
</Header>
|
||||
{props.children && <Content style={props.contentStyle}>{props.children}</Content>}
|
||||
{props.footer && (
|
||||
<Footer className="modal-layout-footer">
|
||||
{!props.hideFooterDivider && (
|
||||
<Divider className="y-margin" style={props.footerDividerStyle} />
|
||||
)}
|
||||
<Row align="middle" justify={props.footerAlign || 'end'}>
|
||||
<Col
|
||||
style={{
|
||||
marginBottom: props.footerAlign === 'center' ? 54 : 16,
|
||||
marginRight: !props.footerAlign ? 16 : 0,
|
||||
...props.footerStyle,
|
||||
}}
|
||||
>
|
||||
{props.footer}
|
||||
</Col>
|
||||
</Row>
|
||||
</Footer>
|
||||
)}
|
||||
</Layout>
|
||||
);
|
||||
};
|
||||
|
||||
export default ObjectModal;
|
||||
Reference in New Issue
Block a user