Skip to content
Permalink
Browse files

fix(Modal): directly show backdrop if no animation (fix: #4190) (#4192)

  • Loading branch information
mxschmitt committed Aug 6, 2019
1 parent 0a041cb commit 0d02bf6d279d227f92703520b3e45727bfded3bf
Showing with 46 additions and 2 deletions.
  1. +6 −2 src/Modal.js
  2. +31 −0 www/src/examples/Modal/WithoutAnimation.js
  3. +9 −0 www/src/pages/components/modal.js
@@ -273,12 +273,16 @@ class Modal extends React.Component {
}

renderBackdrop = props => {
const { bsPrefix, backdropClassName } = this.props;
const { bsPrefix, backdropClassName, animation } = this.props;

return (
<div
{...props}
className={classNames(`${bsPrefix}-backdrop`, backdropClassName)}
className={classNames(
`${bsPrefix}-backdrop`,
backdropClassName,
!animation && 'show',
)}
/>
);
};
@@ -0,0 +1,31 @@
function Example() {
const [show, setShow] = useState(false);

const handleClose = () => setShow(false);
const handleShow = () => setShow(true);

return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>

<Modal show={show} onHide={handleClose} animation={false}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}

render(<Example />);
@@ -11,6 +11,7 @@ import ModalBasic from '../../examples/Modal/Basic';
import ModalDefaultSizing from '../../examples/Modal/DefaultSizing';
import ModalCustomSizing from '../../examples/Modal/CustomSizing';
import ModalVerticallyCentered from '../../examples/Modal/VerticallyCentered';
import ModalWithoutAnimation from '../../examples/Modal/WithoutAnimation';
import ModalGrid from '../../examples/Modal/Grid';
import withLayout from '../../withLayout';

@@ -85,6 +86,14 @@ export default withLayout(function ModalSection({ data }) {
content.
</p>
<ReactPlayground codeText={ModalBasic} />
<LinkedHeading h="3" id="modals-live">
Without Animation
</LinkedHeading>
<p>
A Modal can also be without an animation. For that set the "animation"
prop to <code>false</code>.
</p>
<ReactPlayground codeText={ModalWithoutAnimation} />
<div className="bs-callout bs-callout-info">
<div className="h4">Additional Import Options</div>
<p>

0 comments on commit 0d02bf6

Please sign in to comment.
You can’t perform that action at this time.