Vulcan/packages/vulcan-ui-bootstrap/lib/components/ui/ModalTrigger.jsx

89 lines
2.2 KiB
React
Raw Normal View History

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';
2017-05-19 14:42:43 -06:00
class ModalTrigger extends PureComponent {
constructor() {
super();
this.state = {
modalIsOpen: false,
};
}
2016-02-25 21:05:53 +09:00
clickHandler = () => {
if (this.props.onClick) {
this.props.onClick();
}
this.openModal();
}
openModal = () => {
this.setState({ modalIsOpen: true });
}
2016-02-25 21:05:53 +09:00
closeModal = () => {
this.setState({ modalIsOpen: false });
}
2016-02-25 21:05:53 +09:00
render() {
const {
trigger,
component,
children,
label,
size,
className,
dialogClassName,
title,
modalProps,
header,
footer,
} = this.props;
2016-02-25 21:32:13 +09:00
let triggerComponent = trigger || component;
triggerComponent = triggerComponent ? (
React.cloneElement(triggerComponent, { onClick: this.clickHandler })
) : (
<a href="javascript:void(0)" onClick={this.clickHandler}>
{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-02-25 21:05:53 +09:00
return (
2016-03-24 16:03:30 +09:00
<div className="modal-trigger">
{triggerComponent}
<Components.Modal
size={size}
className={className}
show={this.state.modalIsOpen}
onHide={this.closeModal}
dialogClassName={dialogClassName}
title={title}
header={headerComponent}
footer={footerComponent}
{...modalProps}
>
{childrenComponent}
</Components.Modal>
2016-02-25 21:05:53 +09:00
</div>
);
2016-02-25 21:05:53 +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,
title: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
onClick: PropTypes.func,
};
registerComponent('ModalTrigger', ModalTrigger);
export default ModalTrigger;