streamlit-react-modal
Version:
[![NPM version][npm-image]][npm-url] [![Build][github-build]][github-build-url] ![npm-typescript] [![License][github-license]][github-license-url]
91 lines • 4.2 kB
JavaScript
import { __assign } from "tslib";
import * as React from 'react';
import * as utils from '../utils/common';
var defaultStyles = {
headerContainer: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'flex-start',
padding: '16px 24px'
},
title: {
margin: '0px',
fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
fontWeight: 500,
fontSize: '1.25rem',
lineHeight: '1.6',
letterSpacing: '0.0075em',
flex: 1
},
content: {
margin: '0px',
fontFamily: 'Roboto, Helvetica, Arial, sans-serif',
fontWeight: 400,
fontSize: '1rem',
lineHeight: '1.5',
letterSpacing: '0.00938em',
color: 'rgba(0, 0, 0, 0.6)',
padding: '16px 24px'
},
button: {
background: 'transparent',
cursor: 'pointer',
border: 'none',
color: 'gray'
},
closeButton: {
background: 'transparent',
cursor: 'pointer',
border: 'none',
marginTop: '10px'
},
closeButtonIcon: {
color: 'gray'
},
actionButtonContainer: {
display: 'flex',
padding: '16px 24px',
justifyContent: 'flex-end',
alignItems: 'center',
gap: '8px'
}
};
var Modal = function (props) {
var _a = props.open, open = _a === void 0 ? true : _a, _b = props.title, title = _b === void 0 ? 'eque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit.' : _b, _c = props.content, content = _c === void 0 ? '' : _c, _d = props.actions, actions = _d === void 0 ? [
{
text: 'Yes',
style: {},
onClick: function (action) {
console.log(action);
}
},
] : _d, _e = props.styles, styles = _e === void 0 ? {
headerContainer: {},
contentContainer: {},
actionButtonContainer: {},
header: {},
closeButton: {},
closeButtonIcon: {},
content: {}
} : _e, _f = props.onCloseClick, onCloseClick = _f === void 0 ? function () {
console.log('Modal closed');
} : _f;
utils.addCSS();
return (React.createElement("div", { id: 'streamlit-react-modal-container', style: { display: open ? 'block' : 'none' } },
React.createElement("div", { id: 'streamlit-react-modal' },
React.createElement("div", { style: { display: 'flex', flexDirection: 'column' } },
React.createElement("div", { style: __assign(__assign({}, defaultStyles.headerContainer), styles === null || styles === void 0 ? void 0 : styles.headerContainer) },
React.createElement("div", { style: __assign(__assign({}, defaultStyles.title), styles === null || styles === void 0 ? void 0 : styles.header) }, title),
React.createElement("button", { style: __assign(__assign({}, defaultStyles.closeButton), styles === null || styles === void 0 ? void 0 : styles.closeButton), onClick: onCloseClick }, "x")),
React.createElement("div", { style: __assign({ display: 'flex' }, styles === null || styles === void 0 ? void 0 : styles.contentContainer) },
React.createElement("div", { style: __assign(__assign({}, defaultStyles.content), styles === null || styles === void 0 ? void 0 : styles.content) }, content)),
React.createElement("div", { style: __assign(__assign({}, defaultStyles.actionButtonContainer), styles === null || styles === void 0 ? void 0 : styles.actionButtonContainer) }, actions.map(function (item, index) {
return (React.createElement("button", { key: "action-button-".concat(index), style: __assign(__assign({}, defaultStyles.button), item === null || item === void 0 ? void 0 : item.style), onClick: function () {
if (item.onClick) {
item.onClick(item.text);
}
} }, item.text));
}))))));
};
export default Modal;
//# sourceMappingURL=Modal.js.map