WB-483: Add custom labels to MultiSelect

packages/wonder-blocks-dropdown/components/action-menu.js

@@ -1,11 +1,20 @@
 // @flow
 
 import * as React from "react";
+import ReactDOM from "react-dom";
 import {StyleSheet} from "aphrodite";
-import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
-import Dropdown from "./dropdown.js";
+import type {
+    AriaProps,
+    ClickableState,
+    StyleType,
+} from "@khanacademy/wonder-blocks-core";
+import DropdownOpener from "./dropdown-opener.js";
+import ActionItem from "./action-item.js";
+import OptionItem from "./option-item.js";
+import DropdownCore from "./dropdown-core.js";
+
 import ActionMenuOpenerCore from "./action-menu-opener-core.js";
-import type {Item} from "../util/types.js";
+import type {Item, DropdownItem} from "../util/types.js";
 
 type Props = {|
     ...AriaProps,
@@ -70,6 +79,13 @@ type Props = {|
      * Optional styling for the entire dropdown component.
      */
     style?: StyleType,
+
+    /**
+     * The child function that returns the anchor the ActionMenu will be
+     * activated by. This function takes eventState, which allows the opener
+     * element to access pointer event state.
+     */
+    opener?: (eventState: ClickableState) => React.Element<any>,
 |};
 
 type State = {|
@@ -95,6 +111,7 @@ export default class ActionMenu extends React.Component<Props, State> {
     };
 
     state = {
+        keyboard: false,
         opened: false,
     };
 
@@ -109,69 +126,154 @@ export default class ActionMenu extends React.Component<Props, State> {
         };
     }
 
-    /**
-     * Update the internal state and notify the parent component when menu is
-     * toggled
-     */
-    handleToggleMenu = (opened: boolean) => {
+    handleItemSelected = () => {
+        // close menu
+        this.handleOpenChanged(false);
+
+        // Bring focus back to the opener element.
+        if (this.openerElement) {
+            this.openerElement.focus();
+        }
+    };
+
+    handleOpenChanged = (opened: boolean, keyboard?: boolean) => {
         this.setState({
-            opened: opened,
+            opened,
+            keyboard,
         });
 
         if (this.props.onToggle) {
             this.props.onToggle(opened);
         }
     };
 
+    handleOptionSelected = (selectedValue: string) => {
+        const {onChange, selectedValues} = this.props;
+
+        // If either of these are not defined, return.
+        if (!onChange || !selectedValues) {
+            return;
+        }
+
+        if (selectedValues.includes(selectedValue)) {
+            const index = selectedValues.indexOf(selectedValue);
+            const updatedSelection = [
+                ...selectedValues.slice(0, index),
+                ...selectedValues.slice(index + 1),
+            ];
+            onChange(updatedSelection);
+        } else {
+            // Item was newly selected
+            onChange([...selectedValues, selectedValue]);
+        }
+        this.handleItemSelected();
+    };
+
+    getMenuItems(): Array<DropdownItem> {
+        const {children, selectedValues} = this.props;
+        const allChildren = React.Children.toArray(children).filter(Boolean);
+
+        // verify if there's at least one OptionItem element to indent the
+        // possible Action items
+        const isOptionItemIncluded = allChildren.some((item) =>
+            OptionItem.isClassOf(item),
+        );
+
+        return allChildren.map((item) => {
+            const {value, disabled} = item.props;
+            const itemObject = {
+                component: item,
+                focusable:
+                    ActionItem.isClassOf(item) || OptionItem.isClassOf(item)
+                        ? !disabled
+                        : false,
+                populatedProps: {},
+            };
+            if (ActionItem.isClassOf(item)) {
+                return {
+                    ...itemObject,
+                    populatedProps: {
+                        indent: isOptionItemIncluded,
+                        onClick: this.handleItemSelected,
+                    },
+                };
+            } else if (OptionItem.isClassOf(item)) {
+                return {
+                    ...itemObject,
+                    populatedProps: {
+                        onToggle: this.handleOptionSelected,
+                        selected: selectedValues
+                            ? selectedValues.includes(value)
+                            : false,
+                        variant: "check",
+                    },
+                };
+            } else {
+                return itemObject;
+            }
+        });
+    }
+
+    handleOpenerRef = (node: any) => {
+        this.openerElement = ((ReactDOM.findDOMNode(node): any): HTMLElement);
+    };
+
+    handleClick = (e: SyntheticEvent<>) => {
+        this.handleOpenChanged(!this.state.opened, e.type === "keyup");
+    };
+
+    renderOpener(numItems: number) {
+        const {disabled, menuText, opened, opener, testId} = this.props;
+
+        return (
+            <DropdownOpener
+                onClick={this.handleClick}
+                disabled={numItems === 0 || disabled}
+                text={menuText}
+                ref={this.handleOpenerRef}
+                testId={opener ? undefined : testId}
+            >
+                {opener
+                    ? opener
+                    : (eventState) => {
+                          return (
+                              <ActionMenuOpenerCore
+                                  {...eventState}
+                                  disabled={disabled}
+                                  opened={opened}
+                                  testId={testId}
+                              >
+                                  {menuText}
+                              </ActionMenuOpenerCore>
+                          );
+                      }}
+            </DropdownOpener>
+        );
+    }
+
     render() {
-        const {
-            alignment,
-            disabled,
-            menuText,
-            testId,
-            dropdownStyle,
-            // the following props are being included here to avoid
-            // passing them down to the opener as part of sharedProps
-            /* eslint-disable no-unused-vars */
-            children,
-            onChange,
-            onToggle,
-            opened,
-            selectedValues,
-            style,
-            "aria-disabled": ariaDisabled, // WB-535 avoids passing this prop to the opener
-            /* eslint-enable no-unused-vars */
-            ...sharedProps
-        } = this.props;
-        const menuItems = React.Children.toArray(this.props.children);
+        const {alignment, dropdownStyle, style} = this.props;
+
+        const items = this.getMenuItems();
+        const dropdownOpener = this.renderOpener(items.length);
 
         return (
-            <Dropdown
+            <DropdownCore
+                role="menu"
                 style={style}
-                onChange={onChange}
-                onToggle={this.handleToggleMenu}
-                opened={this.state.opened}
+                opener={dropdownOpener}
                 alignment={alignment}
-                menuItems={menuItems}
-                selectedValues={selectedValues}
-                disabled={menuItems.length === 0 || disabled}
+                open={this.state.opened}
+                items={items}
+                keyboard={this.state.keyboard}
+                openerElement={this.openerElement}
+                onOpenChanged={this.handleOpenChanged}
                 dropdownStyle={[styles.menuTopSpace, dropdownStyle]}
-            >
-                {(eventState) => (
-                    <ActionMenuOpenerCore
-                        {...sharedProps}
-                        {...eventState}
-                        testId={testId}
-                        opened={this.state.opened}
-                        disabled={menuItems.length === 0 || disabled}
-                    >
-                        {menuText}
-                    </ActionMenuOpenerCore>
-                )}
-            </Dropdown>
+            />
         );
     }
 }
+
 const styles = StyleSheet.create({
     caret: {
         marginLeft: 4,

packages/wonder-blocks-dropdown/components/action-menu.md

@@ -267,4 +267,72 @@ class ControlledActionMenuExample extends React.Component {
 }
 
 <ControlledActionMenuExample />
-```
+```
+
+### Example: ActionMenu with custom opener
+
+In case you need to use a custom opener, you can use the `opener` property to
+achieve this. In this example, the `opener` prop accepts a
+function with the following arguments:
+
+- `eventState`: lets you customize the style for different states, such as
+  `pressed`, `hovered` and `focused`.
+- `text`: Passes the menu label defined in the parent component. This value is
+  passed using the `placeholder` prop set in the `ActionMenu` component.
+
+**Note:** If you need to use a custom ID for testing the opener, make sure to
+pass the `testId` prop inside the opener component/element.
+
+```js
+import {ActionMenu, ActionItem, OptionItem, SeparatorItem} from "@khanacademy/wonder-blocks-dropdown";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {LabelLarge} from "@khanacademy/wonder-blocks-typography";
+import {StyleSheet} from "aphrodite";
+
+const styles = StyleSheet.create({
+    focused: {
+        color: Color.purple,
+    },
+    hovered: {
+        textDecoration: "underline",
+        color: Color.purple,
+        cursor: "pointer",
+    },
+    pressed: {
+        color: Color.blue,
+    },
+});
+
+<ActionMenu
+    disabled={false}
+    menuText="Custom opener"
+    opener={(eventState, text) => (
+        <LabelLarge
+            onClick={()=>{console.log('custom click!!!!!')}}
+            testId="teacher-menu-custom-opener"
+            style={[
+                eventState.focused && styles.focused,
+                eventState.hovered && styles.hovered,
+                eventState.pressed && styles.pressed
+            ]}
+        >
+            {text}
+        </LabelLarge>
+    )}
+>
+    <ActionItem label="Profile" href="http://khanacademy.org/profile" testId="profile" />
+    <ActionItem label="Settings" onClick={() => console.log("user clicked on settings")} testId="settings" />
+    <ActionItem label="Help" disabled={true} onClick={() => console.log("this item is disabled...")} testId="help" />
+    <SeparatorItem />
+    <ActionItem label="Log out" href="http://khanacademy.org/logout" testId="logout" />
+    <OptionItem
+        label="Show homework assignments" value="homework"
+        onClick={() => console.log(`Show homework assignments toggled`)}
+    />
+    <OptionItem
+        label="Show in-class assignments" value="in-class"
+        onClick={() => console.log(`Show in-class assignments toggled`)}
+    />
+</ActionMenu>
+```