Add Modal Component

.gitignore

@@ -0,0 +1 @@
+/.vscode

Modal/Modal.css

@@ -0,0 +1,42 @@
+.modal {
+ position: fixed;
+ z-index: 1;
+ padding-top: 100px;
+ left: 0;
+ top: 0;
+ width: 100%;
+ height: 100%;
+ overflow: auto;
+ background-color: rgb(0, 0, 0);
+ background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-content {
+ background-color: #fefefe;
+ margin: auto;
+ padding: 20px;
+ border: 1px solid #888;
+ width: 80%;
+}
+
+.close {
+ font: 2em sans-serif;
+ cursor: pointer;
+ float: right;
+}
+
+.modal-header.line {
+ border-bottom: 1px #ccc solid;
+}
+
+.modal-footer.line {
+ border-top: 1px #ccc solid;
+}
+
+.modal-body, .modal-footer {
+ padding: 1em 0 1em 0;
+}
+
+.hidden {
+ display: none;
+}

Modal/Modal.tsx

@@ -0,0 +1,67 @@
+import React, { Component, CSSProperties } from 'react';
+import './Modal.css';
+
+interface IProps {
+ title?: string,
+ footer?: any,
+ headerSeparator?: boolean,
+ footerSeparator?: boolean,
+ visibility?: boolean
+ bodyStyle?: CSSProperties 
+}
+
+interface IState {
+ visibility: boolean | undefined
+}
+
+
+class Modal extends Component<IProps, IState>{
+
+ static defaultProps = {
+ headerSeparator: true,
+ footerSeparator: true,
+ visibility: true
+ };
+
+ constructor(props: IProps) {
+ super(props);
+ this.state = {visibility: props.visibility || true};
+ }
+
+
+ componentWillReceiveProps(nextProps: IProps) {
+ // You don't have to do this check first, but it can help prevent an unneeded render
+ if (nextProps.visibility !== this.state.visibility) {
+ this.setState({ visibility: nextProps.visibility });
+ }
+ }
+
+ render() {
+
+ const { footer, headerSeparator, footerSeparator, visibility } = this.props;
+ const {visibility: stateVisibility} = this.state;
+ const titleNode = this.props.title != null ? <h2>{this.props.title}</h2> : null;
+
+ return (
+ <div className={stateVisibility ? "modal" : "modal hidden"}>
+ <div className="modal-content">
+ <div className={(headerSeparator) ? "modal-header line" : "modal-header"}>
+ <span className="close" onClick={(e: any)=>
+ {
+ this.setState({visibility : false});
+ }}>&times;</span>
+ {titleNode}
+ </div>
+ <div className="modal-body" style={this.props.bodyStyle}>
+ {this.props.children}
+ </div>
+ <div className={(footerSeparator) ? "modal-footer line" : "modal-footer"}
+ >
+ {footer}
+ </div>
+ </div>
+ </div>);
+ }
+}
+
+export default Modal;

README.md

@@ -1,2 +1,3 @@
-# react-components
-React components created for public use for free
+<h3 align=center style="padding-bottom:10px;border-bottom: 1px solid;">✔React components created for public use for free✔</h3>
+
+