From 5299337dcdc4e7690ecc035b2c905b7a0f60ad13 Mon Sep 17 00:00:00 2001
From: Eric Giovanola <ericgio@gmail.com>
Date: Sat, 25 Feb 2023 22:14:14 -0800
Subject: [PATCH] Convert BasicBehaviors example to TS

---
 example/src/examples/BasicBehaviorsExample.js |  89 -------------
 .../src/examples/BasicBehaviorsExample.tsx    | 121 ++++++++++++++++++
 2 files changed, 121 insertions(+), 89 deletions(-)
 delete mode 100644 example/src/examples/BasicBehaviorsExample.js
 create mode 100644 example/src/examples/BasicBehaviorsExample.tsx

diff --git a/example/src/examples/BasicBehaviorsExample.js b/example/src/examples/BasicBehaviorsExample.js
deleted file mode 100644
index 14e38635..00000000
--- a/example/src/examples/BasicBehaviorsExample.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/* eslint-disable import/no-unresolved */
-
-import React from 'react';
-import { Form } from 'react-bootstrap';
-import { Typeahead } from 'react-bootstrap-typeahead';
-
-import options from '../data';
-
-/* example-start */
-class BasicBehaviorsExample extends React.Component {
-  state = {
-    disabled: false,
-    dropup: false,
-    flip: false,
-    highlightOnlyResult: false,
-    minLength: 0,
-    open: undefined,
-  };
-
-  render() {
-    const { disabled, dropup, flip, highlightOnlyResult, minLength, open } =
-      this.state;
-
-    const checkboxes = [
-      { checked: disabled, label: 'Disable the input', name: 'disabled' },
-      { checked: dropup, label: 'Dropup menu', name: 'dropup' },
-      {
-        checked: flip,
-        label: 'Flip the menu position when it reaches the viewport bounds',
-        name: 'flip',
-      },
-      {
-        checked: !!minLength,
-        label: 'Require minimum input before showing results (2 chars)',
-        name: 'minLength',
-      },
-      {
-        checked: highlightOnlyResult,
-        label: 'Highlight the only result',
-        name: 'highlightOnlyResult',
-      },
-      { checked: !!open, label: 'Force the menu to stay open', name: 'open' },
-    ];
-
-    return (
-      <>
-        <Typeahead
-          {...this.state}
-          id="basic-behaviors-example"
-          labelKey="name"
-          options={options}
-          placeholder="Choose a state..."
-        />
-        <Form.Group>
-          {checkboxes.map((props) => (
-            <Form.Check
-              {...props}
-              id={props.name}
-              key={props.name}
-              onChange={this._handleChange}
-              type="checkbox"
-            />
-          ))}
-        </Form.Group>
-      </>
-    );
-  }
-
-  _handleChange = (e) => {
-    const { checked, name } = e.target;
-    const newState = { [name]: checked };
-
-    switch (name) {
-      case 'minLength':
-        newState[name] = checked ? 2 : 0;
-        break;
-      case 'open':
-        newState[name] = checked ? true : undefined;
-        break;
-      default:
-        break;
-    }
-
-    this.setState(newState);
-  };
-}
-/* example-end */
-
-export default BasicBehaviorsExample;
diff --git a/example/src/examples/BasicBehaviorsExample.tsx b/example/src/examples/BasicBehaviorsExample.tsx
new file mode 100644
index 00000000..8bc2fbd1
--- /dev/null
+++ b/example/src/examples/BasicBehaviorsExample.tsx
@@ -0,0 +1,121 @@
+/* eslint-disable import/no-unresolved */
+
+import React, { ChangeEvent, useReducer } from 'react';
+import { Form } from 'react-bootstrap';
+import { Typeahead } from 'react-bootstrap-typeahead';
+
+import options from '../data';
+
+interface State {
+  disabled: boolean;
+  dropup: boolean;
+  flip: boolean;
+  highlightOnlyResult: boolean;
+  minLength: number;
+  open?: boolean;
+}
+
+interface Action {
+  checked: boolean;
+  name: keyof State;
+}
+
+/* example-start */
+const initialState = {
+  disabled: false,
+  dropup: false,
+  flip: false,
+  highlightOnlyResult: false,
+  minLength: 0,
+  open: undefined,
+};
+
+function reducer(state: State, { checked, name }: Action) {
+  switch (name) {
+    case 'minLength':
+      return {
+        ...state,
+        [name]: checked ? 2 : 0,
+      };
+    case 'open':
+      return {
+        ...state,
+        [name]: checked ?? undefined,
+      };
+    default:
+      return {
+        ...state,
+        [name]: checked,
+      };
+      break;
+  }
+}
+
+function getCheckboxes({
+  disabled,
+  dropup,
+  flip,
+  highlightOnlyResult,
+  minLength,
+  open,
+}: State) {
+  return [
+    { checked: disabled, label: 'Disable the input', name: 'disabled' },
+    { checked: dropup, label: 'Dropup menu', name: 'dropup' },
+    {
+      checked: flip,
+      label: 'Flip the menu position when it reaches the viewport bounds',
+      name: 'flip',
+    },
+    {
+      checked: !!minLength,
+      label: 'Require minimum input before showing results (2 chars)',
+      name: 'minLength',
+    },
+    {
+      checked: highlightOnlyResult,
+      label: 'Highlight the only result',
+      name: 'highlightOnlyResult',
+    },
+    { checked: !!open, label: 'Force the menu to stay open', name: 'open' },
+  ];
+}
+
+function BasicBehaviorsExample() {
+  const [state, dispatch] = useReducer(reducer, initialState);
+
+  function onChange(e: ChangeEvent<HTMLInputElement>) {
+    const { checked, name } = e.target;
+
+    dispatch({
+      checked,
+      name: name as keyof State,
+    });
+  }
+
+  return (
+    <>
+      <Typeahead
+        {...state}
+        id="basic-behaviors-example"
+        labelKey="name"
+        options={options}
+        placeholder="Choose a state..."
+      />
+      <Form.Group>
+        {getCheckboxes(state).map((props) => (
+          <Form.Check
+            {...props}
+            id={props.name}
+            key={props.name}
+            onChange={onChange}
+            type="checkbox"
+          />
+        ))}
+      </Form.Group>
+    </>
+  );
+}
+/* example-end */
+
+export default BasicBehaviorsExample;