2018-05-01 01:23:25 +01:00
|
|
|
import { Components, registerComponent } from 'meteor/vulcan:core';
|
2017-05-19 14:42:43 -06:00
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
2016-04-05 18:05:41 +09:00
|
|
|
|
2017-05-19 14:42:43 -06:00
|
|
|
class ModalTrigger extends PureComponent {
|
2016-03-17 18:08:03 +09:00
|
|
|
constructor() {
|
|
|
|
super();
|
|
|
|
this.state = {
|
2018-07-30 14:59:36 +09:00
|
|
|
modalIsOpen: false,
|
2016-03-17 18:08:03 +09:00
|
|
|
};
|
|
|
|
}
|
2016-02-25 21:05:53 +09:00
|
|
|
|
2018-12-04 15:57:19 +09:00
|
|
|
clickHandler = () => {
|
|
|
|
if (this.props.onClick) {
|
|
|
|
this.props.onClick();
|
|
|
|
}
|
|
|
|
this.openModal();
|
|
|
|
}
|
|
|
|
|
|
|
|
openModal = () => {
|
2018-07-30 14:59:36 +09:00
|
|
|
this.setState({ modalIsOpen: true });
|
2016-03-17 18:08:03 +09:00
|
|
|
}
|
2016-02-25 21:05:53 +09:00
|
|
|
|
2018-12-04 15:57:19 +09:00
|
|
|
closeModal = () => {
|
2018-07-30 14:59:36 +09:00
|
|
|
this.setState({ modalIsOpen: false });
|
2016-03-17 18:08:03 +09:00
|
|
|
}
|
2016-02-25 21:05:53 +09:00
|
|
|
|
2016-03-30 19:08:06 +09:00
|
|
|
render() {
|
2018-07-30 14:59:36 +09:00
|
|
|
const {
|
|
|
|
trigger,
|
|
|
|
component,
|
|
|
|
children,
|
|
|
|
label,
|
|
|
|
size,
|
|
|
|
className,
|
|
|
|
dialogClassName,
|
|
|
|
title,
|
|
|
|
modalProps,
|
|
|
|
header,
|
|
|
|
footer,
|
|
|
|
} = this.props;
|
2016-02-25 21:32:13 +09:00
|
|
|
|
2018-07-30 14:59:36 +09:00
|
|
|
let triggerComponent = trigger || component;
|
|
|
|
triggerComponent = triggerComponent ? (
|
2018-12-04 15:57:19 +09:00
|
|
|
React.cloneElement(triggerComponent, { onClick: this.clickHandler })
|
2018-07-30 14:59:36 +09:00
|
|
|
) : (
|
2018-12-04 15:57:19 +09:00
|
|
|
<a href="javascript:void(0)" onClick={this.clickHandler}>
|
2018-07-30 14:59:36 +09:00
|
|
|
{label}
|
|
|
|
</a>
|
|
|
|
);
|
|
|
|
const childrenComponent = React.cloneElement(children, { closeModal: this.closeModal });
|
|
|
|
const headerComponent = header && React.cloneElement(header, { closeModal: this.closeModal });
|
|
|
|
const footerComponent = footer && React.cloneElement(footer, { closeModal: this.closeModal });
|
2016-03-24 10:56:47 +09:00
|
|
|
|
2016-02-25 21:05:53 +09:00
|
|
|
return (
|
2016-03-24 16:03:30 +09:00
|
|
|
<div className="modal-trigger">
|
2016-03-24 10:56:47 +09:00
|
|
|
{triggerComponent}
|
2018-05-01 01:23:25 +01:00
|
|
|
<Components.Modal
|
2018-07-30 14:59:36 +09:00
|
|
|
size={size}
|
|
|
|
className={className}
|
2017-08-05 14:46:02 +09:00
|
|
|
show={this.state.modalIsOpen}
|
|
|
|
onHide={this.closeModal}
|
2018-07-30 14:59:36 +09:00
|
|
|
dialogClassName={dialogClassName}
|
|
|
|
title={title}
|
|
|
|
header={headerComponent}
|
|
|
|
footer={footerComponent}
|
|
|
|
{...modalProps}
|
2017-08-05 14:46:02 +09:00
|
|
|
>
|
2018-05-01 01:23:25 +01:00
|
|
|
{childrenComponent}
|
|
|
|
</Components.Modal>
|
2016-02-25 21:05:53 +09:00
|
|
|
</div>
|
2018-05-01 01:23:25 +01:00
|
|
|
);
|
2016-02-25 21:05:53 +09:00
|
|
|
}
|
2016-11-26 02:46:55 +08:00
|
|
|
}
|
2016-03-17 18:08:03 +09:00
|
|
|
|
2016-03-24 10:56:47 +09:00
|
|
|
ModalTrigger.propTypes = {
|
2017-05-19 14:42:43 -06:00
|
|
|
className: PropTypes.string,
|
|
|
|
label: PropTypes.string,
|
2018-04-24 10:20:38 +09:00
|
|
|
component: PropTypes.object, // keep for backwards compatibility
|
|
|
|
trigger: PropTypes.object,
|
2017-08-02 18:56:29 +09:00
|
|
|
size: PropTypes.string,
|
2017-08-02 19:00:15 +09:00
|
|
|
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
|
2018-12-04 15:57:19 +09:00
|
|
|
onClick: PropTypes.func,
|
2018-07-30 14:59:36 +09:00
|
|
|
};
|
2016-04-03 11:42:07 +09:00
|
|
|
|
2017-01-30 19:46:48 +09:00
|
|
|
registerComponent('ModalTrigger', ModalTrigger);
|
|
|
|
|
2017-02-02 16:18:33 +01:00
|
|
|
export default ModalTrigger;
|