feat: migrate doc examples to function components (#1572)

* feat: Migrate Alert docs to function component * feat: Migrate Badge doc examples to function components * feat: Migrate Button doc examples to function components * feat: Migrate Carousel doc examples to function components * feat: Migrate Collapse doc examples to function components * feat: Migrate Form doc examples to function components * feat: Migrate Fade doc examples to function components * feat: Migrate InputGroup doc examples to function components * feat: Migrate Layout & ListGroup examples to function components * feat: Migrate Modal doc examples to function components * feat: Migrate Navbar doc examples to function components * feat: Migrate Nav doc examples to function components * feat: Migrate Pagination doc examples to function components * feat: Migrate Popover doc examples to function components * feat: Migrate Spinner doc examples to function components * feat: Migrate Table doc examples to function components * feat: Migrate Tabs doc examples to function components * feat: Migrate Toast doc examples to function components * feat: Migrate Tooltip doc examples to function components * chore: Add contributor's name to contributor's list
reactstrap · Oct 11, 2019 · a5f4882 · a5f4882
1 parent 2fdf15a
commit a5f4882
Show file tree

Hide file tree

Showing 80 changed files with 2,404 additions and 2,795 deletions.
diff --git a/docs/lib/examples/AlertDismiss.js b/docs/lib/examples/AlertDismiss.js
@@ -1,28 +1,16 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { Alert } from 'reactstrap';
 
-class AlertExample extends React.Component {
-  constructor(props) {
-    super(props);
+const AlertExample = (props) => {
+  const [visible, setVisible] = useState(true);
 
-    this.state = {
-      visible: true
-    };
+  const onDismiss = () => setVisible(false);
 
-    this.onDismiss = this.onDismiss.bind(this);
-  }
-
-  onDismiss() {
-    this.setState({ visible: false });
-  }
-
-  render() {
-    return (
-      <Alert color="info" isOpen={this.state.visible} toggle={this.onDismiss}>
-        I am an alert and I can be dismissed!
-      </Alert>
-    );
-  }
+  return (
+    <Alert color="info" isOpen={visible} toggle={onDismiss}>
+      I am an alert and I can be dismissed!
+    </Alert>
+  );
 }
 
 export default AlertExample;
diff --git a/docs/lib/examples/AlertFadeless.js b/docs/lib/examples/AlertFadeless.js
@@ -1,32 +1,19 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { UncontrolledAlert } from 'reactstrap';
 import Alert from '../../../src/Alert';
 
-export class AlertFadelessExample extends React.Component {
+export const AlertFadelessExample = (props) => {
+  const [visible, setVisible] = useState(true);
 
-  constructor(props) {
-    super(props);
+  const onDismiss = () => setVisible(false);
 
-    this.state = {
-      visible: true
-    };
-
-    this.onDismiss = this.onDismiss.bind(this);
-  }
-
-  onDismiss() {
-    this.setState({ visible: false });
-  }
-
-  render() {
-    return (
-      <div>
-        <Alert color="primary" isOpen={this.state.visible} toggle={this.onDismiss} fade={false}>
-          I am a primary alert and I can be dismissed without animating!
-        </Alert>
+  return (
+    <div>
+      <Alert color="primary" isOpen={visible} toggle={onDismiss} fade={false}>
+        I am a primary alert and I can be dismissed without animating!
+      </Alert>
       </div>
-    );
-  }
+  );
 }
 
 export function UncontrolledAlertFadelessExample() {

diff --git a/docs/lib/examples/Badge.js b/docs/lib/examples/Badge.js
@@ -1,17 +1,17 @@
 import React from 'react';
 import { Badge } from 'reactstrap';
 
-export default class Example extends React.Component {
-  render() {
-    return (
-      <div>
-        <h1>Heading <Badge color="secondary">New</Badge></h1>
-        <h2>Heading <Badge color="secondary">New</Badge></h2>
-        <h3>Heading <Badge color="secondary">New</Badge></h3>
-        <h4>Heading <Badge color="secondary">New</Badge></h4>
-        <h5>Heading <Badge color="secondary">New</Badge></h5>
-        <h6>Heading <Badge color="secondary">New</Badge></h6>
-      </div>
-    );
-  }
+const Example = (props) => {
+  return (
+    <div>
+      <h1>Heading <Badge color="secondary">New</Badge></h1>
+      <h2>Heading <Badge color="secondary">New</Badge></h2>
+      <h3>Heading <Badge color="secondary">New</Badge></h3>
+      <h4>Heading <Badge color="secondary">New</Badge></h4>
+      <h5>Heading <Badge color="secondary">New</Badge></h5>
+      <h6>Heading <Badge color="secondary">New</Badge></h6>
+    </div>
+  );
 }
+
+export default Example;
diff --git a/docs/lib/examples/BadgeButton.js b/docs/lib/examples/BadgeButton.js
@@ -1,14 +1,14 @@
 import React from 'react';
 import { Badge, Button } from 'reactstrap';
 
-export default class Example extends React.Component {
-  render() {
-    return (
-      <div>
-        <Button color="primary" outline>
-          Notifications <Badge color="secondary">4</Badge>
-        </Button>
-      </div>
-    );
-  }
+const Example = (props) => {
+  return (
+    <div>
+      <Button color="primary" outline>
+        Notifications <Badge color="secondary">4</Badge>
+      </Button>
+    </div>
+  );
 }
+
+export default Example;
diff --git a/docs/lib/examples/BadgeLinks.js b/docs/lib/examples/BadgeLinks.js
@@ -1,19 +1,19 @@
 import React from 'react';
 import { Badge } from 'reactstrap';
 
-export default class Example extends React.Component {
-  render() {
-    return (
-      <div>
-        <Badge href="#" color="primary">Primary</Badge>
-        <Badge href="#" color="secondary">Secondary</Badge>
-        <Badge href="#" color="success">Success</Badge>
-        <Badge href="#" color="danger">Danger</Badge>
-        <Badge href="#" color="warning">Warning</Badge>
-        <Badge href="#" color="info">Info</Badge>
-        <Badge href="#" color="light">Light</Badge>
-        <Badge href="#" color="dark">Dark</Badge>
-      </div>
-    );
-  }
+const Example = (props) => {
+  return (
+    <div>
+      <Badge href="#" color="primary">Primary</Badge>
+      <Badge href="#" color="secondary">Secondary</Badge>
+      <Badge href="#" color="success">Success</Badge>
+      <Badge href="#" color="danger">Danger</Badge>
+      <Badge href="#" color="warning">Warning</Badge>
+      <Badge href="#" color="info">Info</Badge>
+      <Badge href="#" color="light">Light</Badge>
+      <Badge href="#" color="dark">Dark</Badge>
+    </div>
+  );
 }
+
+export default Example;
diff --git a/docs/lib/examples/BadgePills.js b/docs/lib/examples/BadgePills.js
@@ -1,19 +1,19 @@
 import React from 'react';
 import { Badge } from 'reactstrap';
 
-export default class Example extends React.Component {
-  render() {
-    return (
-      <div>
-        <Badge color="primary" pill>Primary</Badge>
-        <Badge color="secondary" pill>Secondary</Badge>
-        <Badge color="success" pill>Success</Badge>
-        <Badge color="danger" pill>Danger</Badge>
-        <Badge color="warning" pill>Warning</Badge>
-        <Badge color="info" pill>Info</Badge>
-        <Badge color="light" pill>Light</Badge>
-        <Badge color="dark" pill>Dark</Badge>
-      </div>
-    );
-  }
+const Example = (props) => {
+  return (
+    <div>
+      <Badge color="primary" pill>Primary</Badge>
+      <Badge color="secondary" pill>Secondary</Badge>
+      <Badge color="success" pill>Success</Badge>
+      <Badge color="danger" pill>Danger</Badge>
+      <Badge color="warning" pill>Warning</Badge>
+      <Badge color="info" pill>Info</Badge>
+      <Badge color="light" pill>Light</Badge>
+      <Badge color="dark" pill>Dark</Badge>
+    </div>
+  );
 }
+
+export default Example;
diff --git a/docs/lib/examples/BadgeVariations.js b/docs/lib/examples/BadgeVariations.js
@@ -1,19 +1,20 @@
 import React from 'react';
 import { Badge } from 'reactstrap';
 
-export default class Example extends React.Component {
-  render() {
-    return (
-      <div>
-        <Badge color="primary">Primary</Badge>
-        <Badge color="secondary">Secondary</Badge>
-        <Badge color="success">Success</Badge>
-        <Badge color="danger">Danger</Badge>
-        <Badge color="warning">Warning</Badge>
-        <Badge color="info">Info</Badge>
-        <Badge color="light">Light</Badge>
-        <Badge color="dark">Dark</Badge>
-      </div>
-    );
-  }
+const Example = (props) => {
+  return (
+    <div>
+      <Badge color="primary">Primary</Badge>
+      <Badge color="secondary">Secondary</Badge>
+      <Badge color="success">Success</Badge>
+      <Badge color="danger">Danger</Badge>
+      <Badge color="warning">Warning</Badge>
+      <Badge color="info">Info</Badge>
+      <Badge color="light">Light</Badge>
+      <Badge color="dark">Dark</Badge>
+    </div>
+  );
+
 }
+
+export default Example;
diff --git a/docs/lib/examples/Button.js b/docs/lib/examples/Button.js
@@ -1,18 +1,18 @@
 import React from 'react';
 import { Button } from 'reactstrap';
 
-export default class Example extends React.Component {
-  render() {
-    return (
-      <div>
-        <Button color="primary">primary</Button>{' '}
-        <Button color="secondary">secondary</Button>{' '}
-        <Button color="success">success</Button>{' '}
-        <Button color="info">info</Button>{' '}
-        <Button color="warning">warning</Button>{' '}
-        <Button color="danger">danger</Button>{' '}
-        <Button color="link">link</Button>
-      </div>
-    );
-  }
+const Example = (props) => {
+  return (
+    <div>
+      <Button color="primary">primary</Button>{' '}
+      <Button color="secondary">secondary</Button>{' '}
+      <Button color="success">success</Button>{' '}
+      <Button color="info">info</Button>{' '}
+      <Button color="warning">warning</Button>{' '}
+      <Button color="danger">danger</Button>{' '}
+      <Button color="link">link</Button>
+    </div>
+  );
 }
+
+export default Example;
diff --git a/docs/lib/examples/ButtonDropdown.js b/docs/lib/examples/ButtonDropdown.js
@@ -1,36 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
-export default class Example extends React.Component {
-  constructor(props) {
-    super(props);
+const Example = (props) => {
+  const [dropdownOpen, setOpen] = useState(false);
 
-    this.toggle = this.toggle.bind(this);
-    this.state = {
-      dropdownOpen: false
-    };
-  }
+  const toggle = () => setOpen(!dropdownOpen);
 
-  toggle() {
-    this.setState({
-      dropdownOpen: !this.state.dropdownOpen
-    });
-  }
-
-  render() {
-    return (
-      <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
-        <DropdownToggle caret>
-          Button Dropdown
-        </DropdownToggle>
-        <DropdownMenu>
-          <DropdownItem header>Header</DropdownItem>
-          <DropdownItem disabled>Action</DropdownItem>
-          <DropdownItem>Another Action</DropdownItem>
-          <DropdownItem divider />
-          <DropdownItem>Another Action</DropdownItem>
-        </DropdownMenu>
-      </ButtonDropdown>
-    );
-  }
+  return (
+    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
+      <DropdownToggle caret>
+        Button Dropdown
+      </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem header>Header</DropdownItem>
+        <DropdownItem disabled>Action</DropdownItem>
+        <DropdownItem>Another Action</DropdownItem>
+        <DropdownItem divider />
+        <DropdownItem>Another Action</DropdownItem>
+      </DropdownMenu>
+    </ButtonDropdown>
+  );
 }
+
+export default Example;
diff --git a/docs/lib/examples/ButtonDropdownMulti.js b/docs/lib/examples/ButtonDropdownMulti.js
@@ -1,36 +1,25 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { ButtonDropdown, DropdownToggle, DropdownMenu, DropdownItem } from 'reactstrap';
 
-export default class Example extends React.Component {
-  constructor(props) {
-    super(props);
+const Example = (props) => {
+  const [dropdownOpen, setOpen] = useState(false);
 
-    this.toggle = this.toggle.bind(this);
-    this.state = {
-      dropdownOpen: false
-    };
-  }
+  const toggle = () => setOpen(!dropdownOpen);
 
-  toggle() {
-    this.setState({
-      dropdownOpen: !this.state.dropdownOpen
-    });
-  }
-
-  render() {
-    return (
-      <ButtonDropdown isOpen={this.state.dropdownOpen} toggle={this.toggle}>
-        <DropdownToggle color={this.props.color} caret>
-          {this.props.text}
-        </DropdownToggle>
-        <DropdownMenu>
-          <DropdownItem header>Header</DropdownItem>
-          <DropdownItem disabled>Action</DropdownItem>
-          <DropdownItem>Another Action</DropdownItem>
-          <DropdownItem divider />
-          <DropdownItem>Another Action</DropdownItem>
-        </DropdownMenu>
-      </ButtonDropdown>
-    );
-  }
+  return (
+    <ButtonDropdown isOpen={dropdownOpen} toggle={toggle}>
+      <DropdownToggle color={props.color} caret>
+        {props.text}
+      </DropdownToggle>
+      <DropdownMenu>
+        <DropdownItem header>Header</DropdownItem>
+        <DropdownItem disabled>Action</DropdownItem>
+        <DropdownItem>Another Action</DropdownItem>
+        <DropdownItem divider />
+        <DropdownItem>Another Action</DropdownItem>
+      </DropdownMenu>
+    </ButtonDropdown>
+  );
 }
+
+export default Example;