@upendradevsingh/webcore
Version:
UI Core Components for web
222 lines (189 loc) • 8.09 kB
JavaScript
/**
* ====================================================================================
* Open a Modal and fetch the content from defined url
* @author yogendra.singh@jabong.com
* @date May, 2017
*
* <Modal
* header={true}
* footer={true}
* customBodyClass="" title="Modal Title"
* dataContent={{"data": {"name": "yogendra"}, "headers": {}, "method": "GET"}}
* optionType="link"
* dataUrl="https://jsonplaceholder.typicode.com/users"
* dialogLinkContent="Open Me"
* dataTarget=""
* onModalOpen={ res => { this.setState({ ModalBodyContent: res.statusText}); } }
* >
* Content
* </Modal>
* <Modal
* header={true}
* footer={true}
* customBodyClass="" title="Modal Title"
* dataContent={{"data": {"name": "yogendra"}, "headers": {}, "method": "GET"}}
* optionType="button"
* dataUrl="https://jsonplaceholder.typicode.com/users"
* dialogLinkContent="Open Me"
* dataTarget=""
* onModalOpen={ res => { this.setState({ ModalBodyContent: res.statusText}); } }
* >
* Content
* </Modal>
* need to define a handleModalOpen(event, resData) in your component where you are going to handle state changes
* ====================================================================================
*/
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.Modal = undefined;
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _reactDom = require('react-dom');
var _reactDom2 = _interopRequireDefault(_reactDom);
var _reactModalBootstrap = require('react-modal-bootstrap');
var _style = require('./style');
var _style2 = _interopRequireDefault(_style);
var _request = require('../utils/request');
var _request2 = _interopRequireDefault(_request);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var customStyles = {};
var Modal = function (_Component) {
_inherits(Modal, _Component);
function Modal(props) {
_classCallCheck(this, Modal);
var _this2 = _possibleConstructorReturn(this, (Modal.__proto__ || Object.getPrototypeOf(Modal)).call(this, props));
_this2.openModal = function () {
_this2.setState({ isOpen: true });
_this2.initializeModal(function (res, _this) {
_this.props.onModalOpen(res);
});
};
_this2.afterOpenModal = function () {};
_this2.handleRequestResponse = function () {
var requestMethod = _this2.props.dataContent.method;
if (requestMethod === 'GET' || requestMethod === 'get') {
return _request2.default.get(_this2.props.dataUrl, _this2.props.dataContent.params ? _this2.props.dataContent.params : {});
}
return _request2.default.post(_this2.props.dataUrl, _this2.props.dataContent ? _this2.props.dataContent : {});
};
_this2.hideModal = function () {
_this2.setState({ isOpen: false });
};
_this2.initializeModal = function (cb) {
var resData = _this2.props.responseData,
_self = _this2;
if (_this2.props.dataUrl) {
//send the ajax request for fetching the data from request url
_self.handleRequestResponse().then(function (res) {
cb(res, _self);
}).catch(function (err) {
cb(err.response, _self);
});
return;
}
cb(resData, _self);
};
_this2.state = { //defaut state for the component
isOpen: false,
defaultLinkData: "Open Dialog",
responseData: {
"status": 200
}
};
_this2.openModal = _this2.openModal.bind(_this2);
_this2.afterOpenModal = _this2.afterOpenModal.bind(_this2);
_this2.hideModal = _this2.hideModal.bind(_this2);
_this2.initializeModal = _this2.initializeModal.bind(_this2);
return _this2;
}
_createClass(Modal, [{
key: 'render',
value: function render() {
var _this3 = this;
var _props = this.props,
title = _props.title,
header = _props.header,
footer = _props.footer,
optionType = _props.optionType,
dataUrl = _props.dataUrl,
dataTarget = _props.dataTarget,
dialogLinkContent = _props.dialogLinkContent,
customBodyClass = _props.customBodyClass;
var LinkData = this.state.defaultLinkData;
var linkContent = '';
if (optionType === 'link') {
linkContent = _react2.default.createElement(
'a',
{
href: 'javascript:void(0);',
onClick: function onClick(event) {
_this3.openModal(event);
} },
dialogLinkContent ? dialogLinkContent : {
LinkData: LinkData
}
);
} else {
linkContent = _react2.default.createElement(
'button',
{ onClick: function onClick(event) {
_this3.openModal(event);
} },
dialogLinkContent ? dialogLinkContent : {
LinkData: LinkData
}
);
}
return _react2.default.createElement(
'div',
null,
linkContent,
_react2.default.createElement(
_reactModalBootstrap.Modal,
{ isOpen: this.state.isOpen, onRequestHide: this.hideModal },
header && _react2.default.createElement(
_reactModalBootstrap.ModalHeader,
null,
_react2.default.createElement(_reactModalBootstrap.ModalClose, { onClick: this.hideModal }),
_react2.default.createElement(
_reactModalBootstrap.ModalTitle,
null,
title
)
),
_react2.default.createElement(
_reactModalBootstrap.ModalBody,
null,
_react2.default.createElement(
'div',
{
className: 'Modal-body-inner ' + (customBodyClass ? customBodyClass : '') },
this.props.children
)
),
footer && _react2.default.createElement(
_reactModalBootstrap.ModalFooter,
null,
_react2.default.createElement(
'div',
{ className: 'Modal-footer-inner' },
_react2.default.createElement(
'button',
{ className: 'btn btn-default', onClick: this.hideModal },
'Close'
)
)
)
)
);
}
}]);
return Modal;
}(_react.Component);
exports.Modal = Modal;