myems/web/src/components/bootstrap-components/Modals.js

124 lines
4.2 KiB
Python
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

import React, { Fragment } from 'react';
import { Button, Card, CardBody } from 'reactstrap';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import FalconCardHeader from '../common/FalconCardHeader';
import FalconEditor from '../common/FalconEditor';
import PageHeader from '../common/PageHeader';
const basicModal = `function basicModalExample () {
const [collapseOne, collapseOneOpen] = useState(false);
return (
<Fragment>
<Button color="primary" onClick={() => collapseOneOpen(!collapseOne)}>
Launch demo modal
</Button>
<Modal isOpen={collapseOne} toggle={() => collapseOneOpen(!collapseOne)}>
<ModalHeader>Modal title</ModalHeader>
<ModalBody>
Woohoo, you're reading this text in a modal!
</ModalBody>
<ModalFooter>
<Button onClick={() => collapseOneOpen(!collapseOne)}>
Close
</Button>
<Button color="primary">Save changes</Button>
</ModalFooter>
</Modal>
</Fragment>
);
}`;
const properties = `Modal.propTypes = {
// boolean to control the state of the popover
isOpen: PropTypes.bool,
autoFocus: PropTypes.bool,
// if modal should be centered vertically in viewport
centered: PropTypes.bool,
// corresponds to bootstrap's modal sizes, ie. 'lg' or 'sm'
size: PropTypes.string,
// callback for toggling isOpen in the controlling component
toggle: PropTypes.func,
role: PropTypes.string, // defaults to "dialog"
// used to reference the ID of the title element in the modal
labelledBy: PropTypes.string,
keyboard: PropTypes.bool,
// control backdrop, see http://v4-alpha.getbootstrap.com/components/modal/#options
backdrop: PropTypes.oneOfType([
PropTypes.bool,
PropTypes.oneOf(['static'])
]),
// if body of modal should be scrollable when content is long
scrollable: PropTypes.bool,
// allows for a node/component to exist next to the modal (outside of it). Useful for external close buttons
// external: PropTypes.node,
// called on componentDidMount
onEnter: PropTypes.func,
// called on componentWillUnmount
onExit: PropTypes.func,
// called when done transitioning in
onOpened: PropTypes.func,
// called when done transitioning out
onClosed: PropTypes.func,
className: PropTypes.string,
wrapClassName: PropTypes.string,
modalClassName: PropTypes.string,
backdropClassName: PropTypes.string,
contentClassName: PropTypes.string,
// boolean to control whether the fade transition occurs (default: true)
fade: PropTypes.bool,
cssModule: PropTypes.object,
// zIndex defaults to 1000.
zIndex: PropTypes.oneOfType([
PropTypes.number,
PropTypes.string,
]),
// backdropTransition - controls backdrop transition
// timeout is 150ms by default to match bootstrap
// see Fade for more details
backdropTransition: PropTypes.shape(Fade.propTypes),
// modalTransition - controls modal transition
// timeout is 300ms by default to match bootstrap
// see Fade for more details
modalTransition: PropTypes.shape(Fade.propTypes),
innerRef: PropTypes.object,
// if modal should be destructed/removed from DOM after closing
unmountOnClose: PropTypes.bool // defaults to true
}`;
const Modals = () => (
<Fragment>
<PageHeader
title="Modals"
description="Use Bootstraps JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content."
className="mb-3"
>
<Button
tag="a"
href="https://reactstrap.github.io/components/modals"
target="_blank"
color="link"
size="sm"
className="pl-0"
>
Modals on reactstrap
<FontAwesomeIcon icon="chevron-right" className="ml-1 fs--2" />
</Button>
</PageHeader>
<Card className="mb-3">
<FalconCardHeader title="Modals" light={false} />
<CardBody className="bg-light">
<FalconEditor code={basicModal} language="jsx" />
</CardBody>
</Card>
<Card>
<FalconCardHeader title="Properties" light={false} />
<CardBody className="bg-light">
<FalconEditor code={properties} hidePreview />
</CardBody>
</Card>
</Fragment>
);
export default Modals;