feat(bs5): add Offcanvas

docs/lib/Components/OffcanvasPage.js

@@ -0,0 +1,80 @@
+/* eslint react/no-multi-comp: 0, react/prop-types: 0 */
+import React from 'react';
+import { PrismCode } from 'react-prism';
+import PageTitle from '../UI/PageTitle';
+import SectionTitle from '../UI/SectionTitle';
+
+import OffcanvasExample from '../examples/Offcanvas';
+const OffcanvasExampleSource = require('!!raw-loader!../examples/Offcanvas');
+
+export default class OffcanvasPage extends React.Component {
+  render() {
+    return (
+      <div>
+        <PageTitle title="Offcanvas" />
+        <div className="docs-example">
+          <OffcanvasExample />
+        </div>
+        <pre>
+          <PrismCode className="language-jsx">
+            {OffcanvasExampleSource}
+          </PrismCode>
+        </pre>
+        <SectionTitle>Properties</SectionTitle>
+        <pre>
+          <PrismCode className="language-jsx">
+{`
+Offcanvas.propTypes = {
+  autoFocus: PropTypes.bool,
+  backdrop: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['static'])]),
+  backdropClassName: PropTypes.string,
+  backdropTransition: FadePropTypes,
+  children: PropTypes.node,
+  className: PropTypes.string,
+  container: targetPropType,
+  cssModule: PropTypes.object,
+  direction: PropTypes.oneOf(['start', 'end', 'bottom', 'left', 'right']),
+  fade: PropTypes.bool,
+  innerRef: PropTypes.oneOfType([PropTypes.object, PropTypes.string, PropTypes.func,]),
+  isOpen: PropTypes.bool,
+  keyboard: PropTypes.bool,
+  labelledBy: PropTypes.string,
+  offcanvasClassName: PropTypes.string,
+  offcanvasTransition: FadePropTypes,
+  onClosed: PropTypes.func,
+  onEnter: PropTypes.func,
+  onExit: PropTypes.func,
+  onOpened: PropTypes.func,
+  returnFocusAfterClose: PropTypes.bool,
+  role: PropTypes.string,
+  scrollable: PropTypes.bool,
+  toggle: PropTypes.func,
+  trapFocus: PropTypes.bool,
+  unmountOnClose: PropTypes.bool,
+  wrapClassName: PropTypes.string,
+  zIndex: PropTypes.oneOfType([PropTypes.number, PropTypes.string,])
+}
+
+OffcanvasBody.propTypes = {
+  tag: tagPropType,
+  className: PropTypes.string,
+  cssModule: PropTypes.object,
+}
+
+OffcanvasHeader.propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+  close: PropTypes.object,
+  closeAriaLabel: PropTypes.string,
+  cssModule: PropTypes.object,
+  tag: tagPropType,
+  toggle: PropTypes.func,
+  wrapTag: tagPropType
+}
+`}
+          </PrismCode>
+        </pre>
+      </div>
+    );
+  }
+}

docs/lib/Components/index.js

@@ -86,6 +86,10 @@ const items = [
     name: 'Navs',
     to: '/components/navs/'
   },
+  {
+    name: 'Offcanvas',
+    to: '/components/offcanvas/'
+  },
   {
     name: 'Placeholder',
     to: '/components/placeholder/'

docs/lib/examples/Offcanvas.js

@@ -0,0 +1,60 @@
+import React, { useState } from 'react';
+import { Button, ButtonToolbar, Offcanvas, OffcanvasBody, OffcanvasHeader } from 'reactstrap';
+
+const Example = () => {
+  const [direction, setDirection] = useState();
+  const [open, setOpen] = useState();
+  const toggle = () => setOpen(!open);
+
+  return (
+    <div>
+      <ButtonToolbar>
+        <Button
+          color="primary"
+          onClick={() => {
+            setDirection('start');
+            setOpen(true);
+          }}
+        >
+          Open Start (default)
+        </Button>
+        <Button
+          onClick={() => {
+            setDirection('end');
+            setOpen(true);
+          }}
+        >
+          Open End
+        </Button>
+        <Button
+          color="success"
+          onClick={() => {
+            setDirection('top');
+            setOpen(true);
+          }}
+        >
+          Open Top
+        </Button>
+        <Button
+          color="danger"
+          onClick={() => {
+            setDirection('bottom');
+            setOpen(true);
+          }}
+        >
+          Open Bottom
+        </Button>
+      </ButtonToolbar>
+      <Offcanvas isOpen={open} direction={direction} toggle={toggle}>
+        <OffcanvasHeader toggle={toggle}>
+          Offcanvas {direction}
+        </OffcanvasHeader>
+        <OffcanvasBody>
+          <strong>This is the Offcanvas body.</strong>
+        </OffcanvasBody>
+      </Offcanvas>
+    </div>
+  );
+};
+
+export default Example;

docs/lib/routes.js

@@ -5,6 +5,7 @@ import PremiumThemes from './PremiumThemes';
 import LayoutPage from './Components/LayoutPage';
 import NavsPage from './Components/NavsPage';
 import NavbarPage from './Components/NavbarPage';
+import OffcanvasPage from './Components/OffcanvasPage';
 import BreadcrumbsPage from './Components/BreadcrumbsPage';
 import ButtonsPage from './Components/ButtonsPage';
 import ButtonGroupPage from './Components/ButtonGroupPage';
@@ -63,6 +64,7 @@ const routes = (
         <Route path="layout/" component={LayoutPage} />
         <Route path="navs/" component={NavsPage} />
         <Route path="navbar/" component={NavbarPage} />
+        <Route path="offcanvas/" component={OffcanvasPage} />
         <Route path="media/" component={MediaPage} />
         <Route path="pagination/" component={PaginationPage} />
         <Route path="tabs/" component={TabsPage} />

package.json

@@ -1,7 +1,7 @@
 {
   "name": "reactstrap",
   "version": "9.0.0-0",
-  "description": "React Bootstrap 4 components",
+  "description": "React Bootstrap components",
   "main": "lib/index.js",
   "types": "es/index.d.ts",
   "jsnext:main": "es/index.js",