docs: convert examples to be functional components

docs/src/examples/addons/Confirm/Types/ConfirmExampleCallbacks.js

@@ -1,31 +1,32 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Button, Confirm } from 'semantic-ui-react'
 
-class ConfirmExampleCallbacks extends Component {
-  state = { open: false, result: 'show the modal to capture a result' }
+function ConfirmExampleCallbacks() {
+  const [open, setOpen] = React.useState(false)
+  const [result, setResult] = React.useState(
+    'show the modal to capture a result',
+  )
 
-  show = () => this.setState({ open: true })
-  handleConfirm = () => this.setState({ result: 'confirmed', open: false })
-  handleCancel = () => this.setState({ result: 'cancelled', open: false })
-
-  render() {
-    const { open, result } = this.state
+  const show = () => setOpen(true)
+  const handleConfirm = () => {
+    setResult('confirmed')
+    setOpen(false)
+  }
+  const handleCancel = () => {
+    setResult('cancelled')
+    setOpen(false)
+  }
 
-    return (
-      <div>
-        <p>
-          Result: <em>{result}</em>
-        </p>
+  return (
+    <div>
+      <p>
+        Result: <em>{result}</em>
+      </p>
 
-        <Button onClick={this.show}>Show</Button>
-        <Confirm
-          open={open}
-          onCancel={this.handleCancel}
-          onConfirm={this.handleConfirm}
-        />
-      </div>
-    )
-  }
+      <Button onClick={show}>Show</Button>
+      <Confirm open={open} onCancel={handleCancel} onConfirm={handleConfirm} />
+    </div>
+  )
 }
 
 export default ConfirmExampleCallbacks

docs/src/examples/addons/Confirm/Types/ConfirmExampleConfirm.js

@@ -1,24 +1,18 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Button, Confirm } from 'semantic-ui-react'
 
-class ConfirmExampleConfirm extends Component {
-  state = { open: false }
+function ConfirmExampleConfirm() {
+  const [open, setOpen] = React.useState(false)
 
-  open = () => this.setState({ open: true })
-  close = () => this.setState({ open: false })
+  const show = () => setOpen(true)
+  const close = () => setOpen(false)
 
-  render() {
-    return (
-      <div>
-        <Button onClick={this.open}>Show</Button>
-        <Confirm
-          open={this.state.open}
-          onCancel={this.close}
-          onConfirm={this.close}
-        />
-      </div>
-    )
-  }
+  return (
+    <div>
+      <Button onClick={show}>Show</Button>
+      <Confirm open={open} onCancel={close} onConfirm={close} />
+    </div>
+  )
 }
 
 export default ConfirmExampleConfirm

docs/src/examples/addons/Confirm/Variations/ConfirmExampleButtons.js

@@ -1,27 +1,25 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Button, Confirm } from 'semantic-ui-react'
 
-class ConfirmExampleHeader extends Component {
-  state = { open: false }
+function ConfirmExampleHeader() {
+  const [open, setOpen] = React.useState(false)
 
-  show = () => this.setState({ open: true })
-  handleConfirm = () => this.setState({ open: false })
-  handleCancel = () => this.setState({ open: false })
+  const show = () => setOpen(true)
+  const handleConfirm = () => setOpen(false)
+  const handleCancel = () => setOpen(false)
 
-  render() {
-    return (
-      <div>
-        <Button onClick={this.show}>Show</Button>
-        <Confirm
-          open={this.state.open}
-          cancelButton='Never mind'
-          confirmButton="Let's do it"
-          onCancel={this.handleCancel}
-          onConfirm={this.handleConfirm}
-        />
-      </div>
-    )
-  }
+  return (
+    <div>
+      <Button onClick={show}>Show</Button>
+      <Confirm
+        open={open}
+        cancelButton='Never mind'
+        confirmButton="Let's do it"
+        onCancel={handleCancel}
+        onConfirm={handleConfirm}
+      />
+    </div>
+  )
 }
 
 export default ConfirmExampleHeader

docs/src/examples/addons/Confirm/Variations/ConfirmExampleContent.js

@@ -1,26 +1,24 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Button, Confirm } from 'semantic-ui-react'
 
-class ConfirmExampleContent extends Component {
-  state = { open: false }
+function ConfirmExampleContent() {
+  const [open, setOpen] = React.useState(false)
 
-  show = () => this.setState({ open: true })
-  handleConfirm = () => this.setState({ open: false })
-  handleCancel = () => this.setState({ open: false })
+  const show = () => setOpen(true)
+  const handleConfirm = () => setOpen(false)
+  const handleCancel = () => setOpen(false)
 
-  render() {
-    return (
-      <div>
-        <Button onClick={this.show}>Show</Button>
-        <Confirm
-          open={this.state.open}
-          content='This is a custom message'
-          onCancel={this.handleCancel}
-          onConfirm={this.handleConfirm}
-        />
-      </div>
-    )
-  }
+  return (
+    <div>
+      <Button onClick={show}>Show</Button>
+      <Confirm
+        open={open}
+        content='This is a custom message'
+        onCancel={handleCancel}
+        onConfirm={handleConfirm}
+      />
+    </div>
+  )
 }
 
 export default ConfirmExampleContent

docs/src/examples/addons/Confirm/Variations/ConfirmExampleHeader.js

@@ -1,26 +1,24 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Button, Confirm } from 'semantic-ui-react'
 
-class ConfirmExampleHeader extends Component {
-  state = { open: false }
+function ConfirmExampleHeader() {
+  const [open, setOpen] = React.useState(false)
 
-  show = () => this.setState({ open: true })
-  handleConfirm = () => this.setState({ open: false })
-  handleCancel = () => this.setState({ open: false })
+  const show = () => setOpen(true)
+  const handleConfirm = () => setOpen(false)
+  const handleCancel = () => setOpen(false)
 
-  render() {
-    return (
-      <div>
-        <Button onClick={this.show}>Show</Button>
-        <Confirm
-          open={this.state.open}
-          header='This is a custom header'
-          onCancel={this.handleCancel}
-          onConfirm={this.handleConfirm}
-        />
-      </div>
-    )
-  }
+  return (
+    <div>
+      <Button onClick={show}>Show</Button>
+      <Confirm
+        open={open}
+        header='This is a custom header'
+        onCancel={handleCancel}
+        onConfirm={handleConfirm}
+      />
+    </div>
+  )
 }
 
 export default ConfirmExampleHeader

docs/src/examples/addons/Confirm/Variations/ConfirmExampleSize.js

@@ -1,25 +1,25 @@
-import React, { Component } from 'react'
+import React from 'react'
 import { Button, Confirm } from 'semantic-ui-react'
 
-export default class ConfirmExampleSize extends Component {
-  state = { open: false }
+function ConfirmExampleSize() {
+  const [open, setOpen] = React.useState(false)
 
-  handleButtonClick = () => this.setState({ open: true })
-  handleConfirm = () => this.setState({ open: false })
-  handleCancel = () => this.setState({ open: false })
+  const show = () => setOpen(true)
+  const handleConfirm = () => setOpen(false)
+  const handleCancel = () => setOpen(false)
 
-  render() {
-    return (
-      <div>
-        <Button onClick={this.handleButtonClick}>Show Large</Button>
-        <Confirm
-          header='This is a large confirm'
-          open={this.state.open}
-          onCancel={this.handleCancel}
-          onConfirm={this.handleConfirm}
-          size='large'
-        />
-      </div>
-    )
-  }
+  return (
+    <div>
+      <Button onClick={show}>Show Large</Button>
+      <Confirm
+        header='This is a large confirm'
+        open={open}
+        onCancel={handleCancel}
+        onConfirm={handleConfirm}
+        size='large'
+      />
+    </div>
+  )
 }
+
+export default ConfirmExampleSize