fk-react-ui-components/lib/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 React.createElement(
            ReactModal,
            {
                isOpen: this.props.modalIsOpen,
                onRequestClose: this.props.closeModal,
                style: this.props.customStyles || customStyles
            },
            React.createElement(
                Header,
                {
                    height: this.props.headerHeight,
                    padding: this.props.headerPadding
                },
                React.createElement(
                    HeaderText,
                    { color: this.props.headerColor },
                    this.props.headerText ? React.createElement(
                        'span',
                        null,
                        this.props.headerText
                    ) : React.createElement(
                        'div',
                        null,
                        this.computeHeader()
                    )
                ),
                this.props.isClose ? React.createElement(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'
                }) : React.createElement('span', null)
            ),
            this.computeBody(),
            this.props.isFooter ? React.createElement(
                Footer,
                { footerHeight: self.props.footerHeight },
                this.computeFooter()
            ) : React.createElement('div', null)
        );
    }
}
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: {}
};
//# sourceMappingURL=index.js.map