fk-react-ui-components/components/Modal/index.js

Step 1 : Create a file in [ Seeds / Plants / Trees ] <br> Step 2 : It should export an Object with component name and story Component [Refer other components] <br> Step 3 : Story Component should return a react component <br> Step 3 : Created file should

import { PropTypes } from 'prop-types';

import React from 'react';
import ReactModal from 'react-modal';
import styled from 'styled-components';
import styles from '../StyleComponents/index';
import { colors } from '../colorCodes';

const Icon = styles.icon;
const map = React.Children.map;
const Header = styled.div`
    position: relative;
    border-bottom: 1px solid ${colors.modalHeaderBorderColor};
    overflow: hidden;
    height: ${props => props.height || '40px'};
    line-height: 30px;
    padding: ${props => props.padding || '6px 10px'};
`;

const Footer = styled.div`
    -webkit-box-shadow: ${colors.modalFooterShadow};
    -moz-box-shadow: ${colors.modalFooterShadow};
    box-shadow: ${colors.modalFooterShadow};
    height: ${props => props.footerHeight || '65px'};
    line-height: 50px;
`;

const HeaderText = styled.div`
    font-size: 15px;
    color: ${props => props.color || '#545454'};
`;

const customStyles = {
    content: {
        top: '40%',
        left: '50%',
        right: 'auto',
        bottom: 'auto',
        marginRight: '-50%',
        transform: 'translate(-50%, -50%)',
        padding: '0px',
        width: '450px',
        overflow: 'visible',
        boxShadow: colors.modalShadow,
        border: `1px solid ${colors.modalBorderColor}`
    }
};

export default class Modal extends React.Component {
    computeBody() {
        return map(this.props.children, node => {
            if (node.props.refs === 'body') {
                return node;
            }
        });
    }

    computeFooter() {
        return map(this.props.children, node => {
            if (node.props.refs === 'footer') {
                return node;
            }
        });
    }

    computeHeader() {
        return map(this.props.children, node => {
            if (node.props.refs === 'header') {
                return node;
            }
        });
    }

    render() {
        const self = this;
        return (
            <ReactModal
                isOpen={this.props.modalIsOpen}
                onRequestClose={this.props.closeModal}
                style={this.props.customStyles || customStyles}
            >
                <Header
                    height={this.props.headerHeight}
                    padding={this.props.headerPadding}
                >
                    <HeaderText color={this.props.headerColor}>
                        {this.props.headerText ? (
                            <span>{this.props.headerText}</span>
                        ) : (
                            <div>{this.computeHeader()}</div>
                        )}
                    </HeaderText>
                    {this.props.isClose ? (
                        <Icon
                            position="absolute"
                            top={self.props.headerTop || '9px'}
                            right="30px"
                            width="0"
                            height="0"
                            fontSize="26px"
                            content="'\00d7'"
                            onClick={self.props.closeModal}
                            className="fa fa-times"
                            fontWeight="900"
                            cursor="pointer"
                        />
                    ) : (
                        <span />
                    )}
                </Header>
                {this.computeBody()}
                {this.props.isFooter ? (
                    <Footer footerHeight={self.props.footerHeight}>
                        {this.computeFooter()}
                    </Footer>
                ) : (
                    <div />
                )}
            </ReactModal>
        );
    }
}
Modal.propTypes = {
    modalIsOpen: PropTypes.bool,
    closeModal: PropTypes.func,
    customStyles: PropTypes.element,
    headerHeight: PropTypes.string,
    headerPadding: PropTypes.string,
    headerColor: PropTypes.string,
    headerText: PropTypes.string.isRequired,
    isClose: PropTypes.bool,
    isFooter: PropTypes.bool,
    children: PropTypes.element
};
Modal.defaultProps = {
    modalIsOpen: false,
    closeModal: false,
    isClose: false,
    isFooter: false,
    headerHeight: '',
    headerPadding: '',
    headerColor: '',
    customStyles,
    children: {}
};