Added Molecules / AccessibleList

Author: wintondeshong

src/constants/keyboard-keys.ts

@@ -0,0 +1,15 @@
+const KeyboardKeys = {
+    Comma: "Comma",
+    DownArrow: "ArrowDown",
+    End: "End",
+    Enter: "Enter",
+    Escape: "Escape",
+    Home: "Home",
+    LeftArrow: "ArrowLeft",
+    RightArrow: "ArrowRight",
+    Space: " ",
+    Tab: "Tab",
+    UpArrow: "ArrowUp",
+};
+
+export { KeyboardKeys };

src/index.ts

@@ -38,6 +38,7 @@ export { HeadingPriority } from "./atoms/constants/heading-priority";
 export { IconSizes } from "./atoms/constants/icon-sizes";
 export { Icons } from "./atoms/constants/icons";
 export { InputTypes } from "./atoms/constants/input-types";
+export { KeyboardKeys } from "./constants/keyboard-keys";
 export { ParagraphSizes } from "./atoms/constants/paragraph-sizes";
 export { SvgIcons } from "./atoms/constants/svg-icons";
 

src/molecules/accessible-list/accessible-list.stories.tsx

@@ -0,0 +1,19 @@
+import Faker from "faker";
+import { AccessibleList } from "./accessible-list";
+import React from "react";
+import { Button } from "../../atoms/buttons/button";
+import { ButtonSizes } from "../../atoms/constants/button-sizes";
+import { ButtonStyles } from "../../atoms/constants/button-styles";
+
+export default {
+    component: AccessibleList,
+    title: "Molecules | Accessible List / Accessible List",
+};
+
+export const accessibleListDefault = () => (
+    <AccessibleList focusFirstItem={true}>
+        <Button style={ButtonStyles.Primary} size={ButtonSizes.Medium}>
+            {Faker.lorem.words(5)}
+        </Button>
+    </AccessibleList>
+);

src/molecules/accessible-list/accessible-list.test.tsx

@@ -0,0 +1,7 @@
+// import React from "react";
+// import { render } from "@testing-library/react";
+// import { AccessibleList } from "./accessible-list";
+
+describe("AccessibleList", () => {
+    test.skip("TODO - https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/19", () => {});
+});

src/molecules/accessible-list/accessible-list.tsx

@@ -0,0 +1,114 @@
+import * as React from "react";
+import { useEffect } from "react";
+import { KeyboardKeys } from "../../constants/keyboard-keys";
+
+// -----------------------------------------------------------------------------------------
+// #region Interfaces
+// -----------------------------------------------------------------------------------------
+
+interface AccessibleListProps {
+    focusFirstItem: boolean;
+    onEsc?: () => void;
+}
+
+// #endregion Interfaces
+
+// -----------------------------------------------------------------------------------------
+// #region Component
+// -----------------------------------------------------------------------------------------
+
+/**
+ * Applies accessible keyboard functionality to a list of elements. For example, arrow key movement
+ * between items.
+ */
+const AccessibleList: React.FunctionComponent<AccessibleListProps> = (
+    props: React.PropsWithChildren<AccessibleListProps>
+) => {
+    const [current, setCurrent] = React.useState<number>(0);
+    const refArray: HTMLElement[] = [];
+
+    useEffect(() => {
+        const element = refArray[current];
+        if (element == null || !props.focusFirstItem) {
+            return;
+        }
+
+        element.focus();
+    }, [refArray, current, props.focusFirstItem]);
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+        if (
+            e.key === KeyboardKeys.DownArrow &&
+            current === refArray.length - 1
+        ) {
+            e.preventDefault();
+            setCurrent(0);
+            return;
+        }
+
+        if (e.key === KeyboardKeys.UpArrow && current === 0) {
+            e.preventDefault();
+            setCurrent(refArray.length - 1);
+            return;
+        }
+
+        if (
+            e.key === KeyboardKeys.DownArrow &&
+            current !== refArray.length - 1
+        ) {
+            e.preventDefault();
+
+            setCurrent(current + 1);
+            return;
+        }
+
+        if (e.key === KeyboardKeys.UpArrow && current !== 0) {
+            e.preventDefault();
+
+            setCurrent(current - 1);
+            return;
+        }
+
+        if (e.key === KeyboardKeys.Escape) {
+            e.preventDefault();
+            setCurrent(0);
+
+            if (props.onEsc != null) {
+                props.onEsc();
+            }
+            return;
+        }
+    };
+
+    const renderChildren = () => {
+        let validElementIndex = 0;
+        return React.Children.map(props.children, (child: React.ReactNode) => {
+            if (!React.isValidElement(child)) {
+                return child;
+            }
+
+            return React.cloneElement(child, {
+                ...child.props,
+                onClick: () => {
+                    if (child.props.onClick != null) {
+                        child.props.onClick();
+                    }
+                },
+                onKeyDown: handleKeyDown,
+                ref: (el: HTMLElement) => (refArray[validElementIndex++] = el),
+            });
+        });
+    };
+
+    return <React.Fragment>{renderChildren()}</React.Fragment>;
+};
+
+// #endregion Component
+
+// -----------------------------------------------------------------------------------------
+// #region Exports
+// -----------------------------------------------------------------------------------------
+
+export { AccessibleList };
+
+// #endregion Exports