@khanacademy/wonder-blocks-dropdown 2.3.19

package/src/components/multi-select.stories.js

@@ -0,0 +1,111 @@
+// @flow
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+
+import {View} from "@khanacademy/wonder-blocks-core";
+import {MultiSelect, OptionItem} from "@khanacademy/wonder-blocks-dropdown";
+
+import type {Labels} from "@khanacademy/wonder-blocks-dropdown";
+import type {StoryComponentType} from "@storybook/react";
+
+export default {
+    title: "Dropdown / MultiSelect",
+};
+
+// Custom MultiSelect labels
+const dropdownLabels: $Shape<Labels> = {
+    noneSelected: "Solar system",
+    someSelected: (numSelectedValues) => `${numSelectedValues} planets`,
+};
+
+type Props = {|
+    opened: boolean,
+|};
+
+type State = {|
+    opened: boolean,
+    selectedValues: Array<string>,
+|};
+
+type DefaultProps = {|
+    opened: $PropertyType<Props, "opened">,
+|};
+
+class MultiSelectWithCustomStyles extends React.Component<Props, State> {
+    static defaultProps: DefaultProps = {
+        opened: false,
+    };
+
+    state: State = {
+        selectedValues: [],
+        opened: this.props.opened,
+    };
+
+    handleChange: (update: Array<string>) => void = (update) => {
+        this.setState({
+            selectedValues: update,
+        });
+    };
+
+    handleToggleMenu: (opened: boolean) => void = (opened) => {
+        this.setState({
+            opened,
+        });
+    };
+
+    render(): React.Node {
+        return (
+            <View style={styles.wrapper}>
+                <MultiSelect
+                    onChange={this.handleChange}
+                    selectedValues={this.state.selectedValues}
+                    style={styles.setWidth}
+                    dropdownStyle={styles.customDropdown}
+                    labels={dropdownLabels}
+                    opened={this.state.opened}
+                    onToggle={this.handleToggleMenu}
+                >
+                    <OptionItem label="Mercury" value="1" />
+                    <OptionItem label="Venus" value="2" />
+                    <OptionItem label="Earth" value="3" disabled />
+                    <OptionItem label="Mars" value="4" />
+                    <OptionItem label="Jupiter" value="5" />
+                    <OptionItem label="Saturn" value="6" />
+                    <OptionItem label="Neptune" value="7" />
+                    <OptionItem label="Uranus" value="8" />
+                </MultiSelect>
+            </View>
+        );
+    }
+}
+
+export const customStyles: StoryComponentType = () => (
+    <MultiSelectWithCustomStyles />
+);
+
+customStyles.story = {
+    parameters: {
+        chromatic: {
+            // we don't need screenshots because this story only tests behavior.
+            disable: true,
+        },
+    },
+};
+
+export const customStylesOpened: StoryComponentType = () => (
+    <MultiSelectWithCustomStyles opened={true} />
+);
+
+const styles = StyleSheet.create({
+    setWidth: {
+        minWidth: 170,
+        width: "100%",
+    },
+    customDropdown: {
+        maxHeight: 200,
+    },
+    wrapper: {
+        height: "800px",
+        width: "1200px",
+    },
+});

package/src/components/option-item.js

@@ -0,0 +1,239 @@
+// @flow
+
+import * as React from "react";
+import {StyleSheet} from "aphrodite";
+import * as PropTypes from "prop-types";
+
+import Color, {mix, fade} from "@khanacademy/wonder-blocks-color";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import {LabelMedium} from "@khanacademy/wonder-blocks-typography";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {getClickableBehavior} from "@khanacademy/wonder-blocks-clickable";
+
+import type {AriaProps, StyleType} from "@khanacademy/wonder-blocks-core";
+
+import {DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
+import Check from "./check.js";
+import Checkbox from "./checkbox.js";
+
+type OptionProps = {|
+    ...AriaProps,
+
+    /**
+     * Display text of the option item.
+     */
+    label: string,
+
+    /**
+     * Value of the item, used as a key of sorts for the parent to manage its
+     * items, because label/display text may be identical for some selects. This
+     * is the value passed back when the item is selected.
+     */
+    value: string,
+
+    /**
+     * Whether this option item is disabled.
+     */
+    disabled: boolean,
+
+    /**
+     * Optional user-supplied callback when this item is called.
+     */
+    onClick?: () => mixed,
+
+    /**
+     * Callback for when this item is pressed to change its selection state.
+     * Passes value of the item. Auto-populated by menu or select.
+     * @ignore
+     */
+    onToggle: (value: string) => mixed,
+
+    /**
+     * Whether this item is selected. Auto-populated by menu or select.
+     * @ignore
+     */
+    selected: boolean,
+
+    /**
+     * Aria role to use, defaults to "option".
+     */
+    role: "menuitem" | "option",
+
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string,
+
+    /**
+     * Whether the item should show a check or checkbox to indicate selection
+     * state. Auto-populated by menu or select.
+     * @ignore
+     */
+    variant?: "check" | "checkbox",
+
+    /**
+     * In case we use react-window, this needs to be added in order to inject
+     * styles to calculate the position
+     * @ignore
+     */
+    style?: StyleType,
+|};
+
+type ContextTypes = {|
+    router: $FlowFixMe,
+|};
+
+type DefaultProps = {|
+    disabled: $PropertyType<OptionProps, "disabled">,
+    onToggle: $PropertyType<OptionProps, "onToggle">,
+    role: $PropertyType<OptionProps, "role">,
+    selected: $PropertyType<OptionProps, "selected">,
+|};
+
+/**
+ * For option items that can be selected in a dropdown, selection denoted either
+ * with a check ✔️ or a checkbox ☑️. Use as children in SingleSelect or
+ * MultiSelect.
+ */
+export default class OptionItem extends React.Component<OptionProps> {
+    static isClassOf(instance: React.Element<any>): boolean {
+        return instance && instance.type && instance.type.__IS_OPTION_ITEM__;
+    }
+    static contextTypes: ContextTypes = {router: PropTypes.any};
+    static defaultProps: DefaultProps = {
+        disabled: false,
+        onToggle: () => void 0,
+        role: "option",
+        selected: false,
+    };
+    static __IS_OPTION_ITEM__: boolean = true;
+
+    getCheckComponent(): typeof Check | typeof Checkbox {
+        if (this.props.variant === "check") {
+            return Check;
+        } else {
+            return Checkbox;
+        }
+    }
+
+    handleClick: () => void = () => {
+        const {onClick, onToggle, value} = this.props;
+        onToggle(value);
+        if (onClick) {
+            onClick();
+        }
+    };
+
+    render(): React.Node {
+        const {
+            disabled,
+            label,
+            role,
+            selected,
+            testId,
+            style,
+            // eslint-disable-next-line no-unused-vars
+            value,
+            /* eslint-disable no-unused-vars */
+            onClick,
+            onToggle,
+            variant,
+            /* eslint-enable no-unused-vars */
+            ...sharedProps
+        } = this.props;
+
+        const ClickableBehavior = getClickableBehavior();
+        const CheckComponent = this.getCheckComponent();
+
+        return (
+            <ClickableBehavior
+                disabled={disabled}
+                onClick={this.handleClick}
+                role={role}
+            >
+                {(state, childrenProps) => {
+                    const {pressed, hovered, focused} = state;
+
+                    const defaultStyle = [
+                        styles.itemContainer,
+                        pressed
+                            ? styles.active
+                            : (hovered || focused) && styles.focus,
+                        disabled && styles.disabled,
+                        // pass optional styles from react-window (if applies)
+                        style,
+                    ];
+
+                    return (
+                        <View
+                            {...sharedProps}
+                            testId={testId}
+                            style={defaultStyle}
+                            aria-selected={selected ? "true" : "false"}
+                            role={role}
+                            {...childrenProps}
+                        >
+                            <CheckComponent
+                                disabled={disabled}
+                                selected={selected}
+                                pressed={pressed}
+                                hovered={hovered}
+                                focused={focused}
+                            />
+                            <LabelMedium style={styles.label}>
+                                {label}
+                            </LabelMedium>
+                        </View>
+                    );
+                }}
+            </ClickableBehavior>
+        );
+    }
+}
+
+const {blue, white, offBlack, offBlack32} = Color;
+
+const styles = StyleSheet.create({
+    itemContainer: {
+        flexDirection: "row",
+        backgroundColor: white,
+        color: offBlack,
+        alignItems: "center",
+        height: DROPDOWN_ITEM_HEIGHT,
+        minHeight: DROPDOWN_ITEM_HEIGHT,
+        border: 0,
+        outline: 0,
+        paddingLeft: Spacing.xSmall_8,
+        paddingRight: Spacing.medium_16,
+        whiteSpace: "nowrap",
+        cursor: "default",
+    },
+
+    focus: {
+        color: white,
+        background: blue,
+    },
+
+    active: {
+        color: mix(fade(blue, 0.32), white),
+        background: mix(offBlack32, blue),
+    },
+
+    disabled: {
+        color: offBlack32,
+        background: white,
+    },
+
+    label: {
+        whiteSpace: "nowrap",
+        userSelect: "none",
+        marginLeft: Spacing.xSmall_8,
+        // added to truncate strings that are longer than expected
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+    },
+
+    hide: {
+        visibility: "hidden",
+    },
+});

package/src/components/search-text-input.js

@@ -0,0 +1,227 @@
+// @flow
+// A TextField with a search icon on its left side and X icon on its right side
+
+import * as React from "react";
+import {StyleSheet, css} from "aphrodite";
+
+import {styles as typographyStyles} from "@khanacademy/wonder-blocks-typography";
+import {View} from "@khanacademy/wonder-blocks-core";
+import IconButton from "@khanacademy/wonder-blocks-icon-button";
+import Icon, {icons} from "@khanacademy/wonder-blocks-icon";
+import Color from "@khanacademy/wonder-blocks-color";
+import Spacing from "@khanacademy/wonder-blocks-spacing";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+
+import {defaultLabels, DROPDOWN_ITEM_HEIGHT} from "../util/constants.js";
+
+type Labels = {|
+    clearSearch: string,
+    filter: string,
+|};
+
+type Props = {|
+    /**
+     * The object containing the custom labels used inside this component.
+     */
+    labels: Labels,
+
+    /**
+     * the text input
+     */
+    searchText: string,
+
+    /**
+     * Called when the input value is changed
+     */
+    onChange: (searchText: string) => mixed,
+
+    /**
+     * Handler that is triggered when this component is clicked. For example,
+     * use this to adjust focus in parent component. This gets called when we
+     * click the dismiss icon button within the SearchTextInput.
+     */
+    onClick?: () => mixed,
+
+    /**
+     * Used to handle the focus order in its parent component. The itemRef is
+     * applied to the input directly.
+     */
+    itemRef?: {|current: any|},
+
+    /**
+     * Custom styles for the main wrapper
+     */
+    style?: StyleType,
+
+    /**
+     * Test ID used for e2e testing.
+     */
+    testId?: string,
+|};
+
+type DefaultProps = {|
+    labels: $PropertyType<Props, "labels">,
+|};
+
+type State = {|
+    focused: boolean,
+
+    /**
+     * The object containing the custom labels used inside this component.
+     */
+    labels: Labels,
+|};
+
+export default class SearchTextInput extends React.Component<Props, State> {
+    static isClassOf(instance: React.Element<any>): boolean {
+        return (
+            instance && instance.type && instance.type.__IS_SEARCH_TEXT_INPUT__
+        );
+    }
+
+    static defaultProps: DefaultProps = {
+        labels: {
+            clearSearch: defaultLabels.clearSearch,
+            filter: defaultLabels.filter,
+        },
+    };
+
+    state: State = {
+        focused: false,
+        labels: {
+            clearSearch: defaultLabels.clearSearch,
+            filter: defaultLabels.filter,
+            ...this.props.labels,
+        },
+    };
+
+    componentDidUpdate(prevProps: Props) {
+        if (this.props.labels !== prevProps.labels) {
+            // eslint-disable-next-line react/no-did-update-set-state
+            this.setState({
+                labels: {...this.state.labels, ...this.props.labels},
+            });
+        }
+    }
+
+    static __IS_SEARCH_TEXT_INPUT__: boolean = true;
+
+    handleChange: (e: SyntheticInputEvent<>) => void = (e) => {
+        e.preventDefault();
+        this.props.onChange(e.target.value);
+    };
+
+    handleDismiss: () => void = () => {
+        const {onClick, onChange} = this.props;
+        // Empty the search text and focus the SearchTextInput
+        onChange("");
+        if (onClick) {
+            onClick();
+        }
+    };
+
+    handleBlur: (e: SyntheticInputEvent<>) => void = (e) => {
+        this.setState({focused: false});
+    };
+
+    handleFocus: (e: SyntheticInputEvent<>) => void = (e) => {
+        this.setState({focused: true});
+    };
+
+    maybeRenderDismissIconButton(): React.Node {
+        const {searchText} = this.props;
+        const {clearSearch} = this.state.labels;
+
+        if (searchText.length > 0) {
+            return (
+                <IconButton
+                    icon={icons.dismiss}
+                    kind="tertiary"
+                    onClick={this.handleDismiss}
+                    style={styles.dismissIcon}
+                    aria-label={clearSearch}
+                />
+            );
+        }
+        return null;
+    }
+
+    render(): React.Node {
+        const {onClick, itemRef, searchText, style, testId} = this.props;
+        const {filter} = this.state.labels;
+
+        return (
+            <View
+                onClick={onClick}
+                style={[
+                    styles.inputContainer,
+                    this.state.focused && styles.focused,
+                    style,
+                ]}
+            >
+                <Icon
+                    icon={icons.search}
+                    size="medium"
+                    color={Color.offBlack64}
+                    style={styles.searchIcon}
+                    aria-hidden="true"
+                />
+                <input
+                    type="text"
+                    onChange={this.handleChange}
+                    onFocus={this.handleFocus}
+                    onBlur={this.handleBlur}
+                    ref={itemRef}
+                    placeholder={filter}
+                    value={searchText}
+                    className={css(
+                        styles.inputStyleReset,
+                        typographyStyles.LabelMedium,
+                    )}
+                    data-test-id={testId}
+                />
+                {this.maybeRenderDismissIconButton()}
+            </View>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    inputContainer: {
+        flexDirection: "row",
+        border: `1px solid ${Color.offBlack16}`,
+        borderRadius: Spacing.xxxSmall_4,
+        alignItems: "center",
+        // The height of the text input is 40 in design spec and we need to
+        // specify the height as well as minHeight to make sure the search text
+        // input takes enough height to render. (otherwise, it will get
+        // squashed)
+        height: DROPDOWN_ITEM_HEIGHT,
+        minHeight: DROPDOWN_ITEM_HEIGHT,
+    },
+    focused: {
+        border: `1px solid ${Color.blue}`,
+    },
+    searchIcon: {
+        marginLeft: Spacing.xSmall_8,
+        marginRight: Spacing.xSmall_8,
+    },
+    dismissIcon: {
+        margin: 0,
+        ":hover": {
+            border: "none",
+        },
+    },
+    inputStyleReset: {
+        display: "flex",
+        flex: 1,
+        background: "inherit",
+        border: "none",
+        outline: "none",
+        "::placeholder": {
+            color: Color.offBlack64,
+        },
+        width: "100%",
+        color: "inherit",
+    },
+});