@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/components/checkbox.jsx

@@ -0,0 +1,194 @@
+// @flow
+/**
+ * Reusable checkbox component.
+ **/
+import {globalStyles} from "@khanacademy/perseus";
+import {css, StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import HoverBehavior from "./hover-behavior.jsx";
+
+const {borderRadius, colors} = globalStyles;
+
+export type CheckboxProps = {
+    // Whether or not the checkbox is checked.  The parent responsible for
+    // responding to onChange events and updating this prop appropriately.
+    checked: boolean,
+    // When disable the checkbox will appear faded out and will not
+    // respond to events and cannot be tabbed to.
+    disabled?: boolean,
+    // Appear as if disabled but allow it to respond to events and be
+    // tabbed to.
+    // This allows us to hook alternate responses into clicking on a
+    // disabled checkbox.
+    appearDisabled?: boolean,
+    // Called when the value has changed.
+    onChange: (event: SyntheticInputEvent<>) => void,
+    tabIndex?: number | string,
+    style?: {|
+        marginTop: number,
+    |},
+    // For e2e test
+    dataTestId?: string,
+    // Unique identifier for this checkbox.
+    id?: string,
+    ...
+};
+
+// NOTE(jangmi): Checkbox may have `onChange` depends on circumstances but lack
+// of onChange causes Dev only alert so we provide the no op func as default
+// to prevent that.
+const onChangeCheckboxNoop = (event: SyntheticInputEvent<>) => {};
+
+export default class Checkbox extends React.Component<CheckboxProps> {
+    static defaultProps: {|
+        checked: boolean,
+        onChange: (event: SyntheticInputEvent<>) => void,
+    |} = {
+        checked: false,
+        onChange: onChangeCheckboxNoop,
+    };
+
+    render(): React.Node {
+        const {
+            checked,
+            disabled,
+            appearDisabled,
+            onChange,
+            tabIndex,
+            style,
+            dataTestId,
+            id,
+        } = this.props;
+
+        const checkedColor = colors.gray41;
+
+        return (
+            <HoverBehavior>
+                {({focused}, handlers) => (
+                    <div
+                        {...handlers}
+                        className={css(
+                            styles.container,
+                            focused && styles.focused,
+                        )}
+                        style={style}
+                        data-test-id={dataTestId}
+                        data-checked={checked}
+                    >
+                        <svg
+                            className={css(
+                                styles.svg,
+                                (disabled || appearDisabled) && styles.disabled,
+                            )}
+                            width={sizeWithPadding}
+                            height={sizeWithPadding}
+                            /* pad the viewbox to avoid bad clipping when zooming */
+                            viewBox={`-${padding} -${padding}
+                         ${sizeWithPadding} ${sizeWithPadding}`}
+                        >
+                            <g fill="none" fillRule="evenodd">
+                                {checked && (
+                                    <g>
+                                        <rect
+                                            fill={checkedColor}
+                                            width={size}
+                                            height={size}
+                                            x="0"
+                                            y="0"
+                                            rx={borderRadius}
+                                        />
+                                        <path
+                                            fill={colors.white}
+                                            stroke={colors.white}
+                                            d="M4.98 7.41a0.58.58 0 1 0-0.81.81L6.47
+                                 10.53c0.23.23.59.23.81
+                                 0l4.55-4.55a0.58.58 0 0
+                                 0-0.81-0.81L6.88 9.31 4.98 7.41z"
+                                        />
+                                    </g>
+                                )}
+                                {!checked && (
+                                    <rect
+                                        fill={colors.white}
+                                        stroke={colors.gray68}
+                                        width={size - 2 * padding}
+                                        height={size - 2 * padding}
+                                        x={padding}
+                                        y={padding}
+                                        rx="4"
+                                        strokeWidth={borderWidth}
+                                    />
+                                )}
+                            </g>
+                        </svg>
+                        <input
+                            type="checkbox"
+                            id={id}
+                            checked={checked}
+                            className={css(
+                                styles.checkbox,
+                                disabled && styles.defaultCursor,
+                            )}
+                            disabled={disabled}
+                            onChange={onChange}
+                            tabIndex={tabIndex}
+                        />
+                    </div>
+                )}
+            </HoverBehavior>
+        );
+    }
+}
+
+const size = 16;
+const padding = 0.5;
+const borderWidth = 1;
+const sizeWithPadding = size + 2 * padding;
+
+const styles = StyleSheet.create({
+    container: {
+        position: "relative",
+        display: "inline-block",
+        verticalAlign: "middle",
+        lineHeight: 0,
+        borderRadius: borderRadius,
+        width: sizeWithPadding,
+        height: sizeWithPadding,
+        flexShrink: 0,
+    },
+    focused: {
+        "::before": {
+            content: '""',
+            position: "absolute",
+            top: -2,
+            right: -2,
+            bottom: -2,
+            left: -2,
+            borderRadius: borderRadius + 2,
+            backgroundColor: "lightblue", // TODO(kevinb) get real focus ring
+        },
+    },
+    svg: {
+        position: "absolute",
+        left: 0,
+        top: 0,
+    },
+    checkbox: {
+        appearance: "none",
+        opacity: 0,
+        position: "absolute",
+        top: padding,
+        width: size,
+        height: size,
+        margin: 0,
+        outline: "none",
+        cursor: "pointer",
+    },
+    disabled: {
+        opacity: 0.5,
+    },
+    defaultCursor: {
+        cursor: "default",
+    },
+});

package/src/components/device-framer.jsx

@@ -0,0 +1,91 @@
+// @flow
+/**
+ * A component that displays its contents inside a device frame.
+ */
+
+import {constants} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+const SCREEN_SIZES = {
+    phone: {
+        width: 320,
+        height: 480,
+        framedWidth: 320,
+    },
+    tablet: {
+        width: 750,
+        height: 920,
+        framedWidth: 525,
+    },
+    desktop: {
+        width: 688,
+        height: 600,
+        framedWidth: 688,
+    },
+};
+
+type Props = $FlowFixMe;
+
+class DeviceFramer extends React.Component<Props> {
+    static propTypes = {
+        children: PropTypes.element.isRequired,
+        deviceType: PropTypes.oneOf([
+            constants.devices.PHONE,
+            constants.devices.TABLET,
+            constants.devices.DESKTOP,
+        ]).isRequired,
+        // TODO(kevinb) rename to variableHeight
+        nochrome: PropTypes.bool,
+    };
+
+    render(): React.Node {
+        const deviceType = this.props.deviceType;
+
+        if (this.props.nochrome) {
+            // Render content inside a variable height iframe.  Used on the
+            // "edit" table of the content editor. In this mode, PerseusFrame
+            // will draw the border and reserve space on the right for
+            // lint indicators.
+            return (
+                <div>
+                    <div
+                        key="screen"
+                        style={{
+                            width:
+                                SCREEN_SIZES[deviceType].framedWidth +
+                                2 * constants.perseusFrameBorderWidth +
+                                constants.lintGutterWidth,
+                        }}
+                    >
+                        <div>{this.props.children}</div>
+                    </div>
+                </div>
+            );
+        }
+        const scale =
+            SCREEN_SIZES[deviceType].framedWidth /
+            SCREEN_SIZES[deviceType].width;
+
+        // In this mode we draw our own border and don't reserve
+        // space for a lint gutter.
+        const screenStyle = {
+            backgroundColor: "white",
+            color: "black",
+            textAlign: "left",
+            width: SCREEN_SIZES[deviceType].width,
+            height: SCREEN_SIZES[deviceType].height,
+            border: "solid 1px #CCC",
+            margin: 8,
+            zoom: scale,
+        };
+
+        return (
+            <div key="screen" className="screen" style={screenStyle}>
+                {this.props.children}
+            </div>
+        );
+    }
+}
+
+export default DeviceFramer;

package/src/components/drag-target.jsx

@@ -0,0 +1,88 @@
+// @noflow
+/* This component makes its children a drag target. Example:
+ *
+ *     <DragTarget onDrop={this.handleDrop}>Drag to me</DragTarget>
+ *
+ *     ...
+ *
+ *     handleDrop: function(e) {
+ *         this.addImages(e.nativeEvent.dataTransfer.files);
+ *     }
+ *
+ * Now "Drag to me" will be a drag target - when something is dragged over it,
+ * the element will become partially transparent as a visual indicator that
+ * it's a target.
+ */
+// TODO(joel) - indicate before the hover is over the target that it's possible
+// to drag into the target. This would (I think) require a high level handler -
+// like on Perseus itself, waiting for onDragEnter, then passing down the
+// event. Sounds like a pain. Possible workaround - create a div covering the
+// entire page...
+//
+// Other extensions:
+// * custom styles for global drag and dragOver
+// * only respond to certain types of drags (only images for instance)!
+
+import createReactClass from "create-react-class";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+const DragTarget = createReactClass({
+    propTypes: {
+        // All props not listed here are forwarded to the root element without
+        // modification.
+        onDrop: PropTypes.func.isRequired,
+        component: PropTypes.any, // component type
+        shouldDragHighlight: PropTypes.func,
+        style: PropTypes.any,
+    },
+    getDefaultProps: function () {
+        return {
+            component: "div",
+            shouldDragHighlight: () => true,
+        };
+    },
+    getInitialState: function () {
+        return {dragHover: false};
+    },
+    handleDrop: function (e) {
+        e.stopPropagation();
+        e.preventDefault();
+        this.setState({dragHover: false});
+        this.props.onDrop(e);
+    },
+    handleDragEnd: function () {
+        this.setState({dragHover: false});
+    },
+    handleDragOver: function (e) {
+        e.preventDefault();
+    },
+    handleDragLeave: function () {
+        this.setState({dragHover: false});
+    },
+    handleDragEnter: function (e) {
+        this.setState({dragHover: this.props.shouldDragHighlight(e)});
+    },
+    render: function () {
+        const opacity = this.state.dragHover ? {opacity: 0.3} : {};
+        const Component = this.props.component;
+
+        const forwardProps = Object.assign({}, this.props);
+        delete forwardProps.component;
+        delete forwardProps.shouldDragHighlight;
+
+        return (
+            <Component
+                {...forwardProps}
+                style={Object.assign({}, this.props.style, opacity)}
+                onDrop={this.handleDrop}
+                onDragEnd={this.handleDragEnd}
+                onDragOver={this.handleDragOver}
+                onDragEnter={this.handleDragEnter}
+                onDragLeave={this.handleDragLeave}
+            />
+        );
+    },
+});
+
+export default DragTarget;

package/src/components/dropdown-option.jsx

@@ -0,0 +1,318 @@
+// @flow
+/**
+ * The Option is an item to be used in the Select components and the
+ * derivations such as MultiSelect, CheckList, and CheckBoxList. Also includes
+ * OptionGroup which is an internal component used in the dropdowns to house
+ * a list of options.
+ **/
+import {components, globalStyles} from "@khanacademy/perseus";
+import {css, StyleSheet} from "aphrodite";
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+import {focusWithChromeStickyFocusBugWorkaround} from "./util.js";
+
+export type OptionRenderer = (
+    children: ?React.Element<any>,
+    value: string,
+    selected: boolean,
+    disabled?: boolean,
+) => React.Element<any>;
+
+const {Icon} = components;
+const {colors} = globalStyles;
+
+const findAndFocusElement = (component: ?Element) => {
+    const DOMNode: ?(Element | Text) = ReactDOM.findDOMNode(component);
+    const button = ((DOMNode: any): HTMLInputElement);
+    // $FlowIgnore[method-unbinding]
+    if (button.focus) {
+        focusWithChromeStickyFocusBugWorkaround(button);
+    }
+};
+
+type OptionProps = {|
+    // The value to use when the option is selected
+    value: string,
+
+    // The display of the option
+    children?: React.Node,
+
+    // Is the current option selected?
+    selected?: boolean,
+
+    // Is the current option disabled?
+    disabled?: boolean,
+
+    // An event when an option is clicked
+    onClick?: () => void,
+
+    // An optional rendering function to render the details of the option
+    optionRenderer?: OptionRenderer,
+
+    // An optional function to call when the dropdown should close
+    // Only relevant if the Option is inside of a dropdown menu
+    onDropdownClose?: () => void,
+
+    // An optional value to override the focus styling of an option.
+    // Use caution when using this - keyboard users need to know what they're
+    // focused on in order to interact with the product!
+    hideFocusState?: boolean,
+
+    // An optional test id that can be used to identify this Option in automated tests.
+    testId?: string,
+
+    // Text to provide for assistive tech users
+    ariaLabel?: string,
+|};
+
+const check = `M10,3.8C10,4,9.9,4.2,9.8,4.3L5.1,8.9L4.3,9.8C4.2,9.9,4,10,3.8,10
+ S3.5,9.9,3.4,9.8L2.5,8.9L0.2,6.6C0.1,6.5,0,6.3,0,6.2s0.1-0.3,0.2-0.4
+ l0.9-0.9c0.1-0.1,0.3-0.2,0.4-0.2s0.3,0.1,0.4,0.2l1.9,1.9l4.2-4.2c0.1
+ -0.1,0.3-0.2,0.4-0.2c0.2,0,0.3,0.1,0.4,0.2l0.9,0.9C9.9,3.5,10,3.7,
+ 10,3.8z`;
+
+export const optionHeight = 30;
+
+class Option extends React.Component<OptionProps> {
+    node: HTMLDivElement;
+
+    handleKeyDown(event: any): void {
+        const {onDropdownClose} = this.props;
+        const pressedKey = event.key;
+        const focusedElement = event.target;
+
+        if (pressedKey === "ArrowDown" && focusedElement.nextSibling) {
+            event.preventDefault();
+            focusedElement.nextSibling.focus();
+        }
+        if (pressedKey === "ArrowUp" && focusedElement.previousSibling) {
+            event.preventDefault();
+            focusedElement.previousSibling.focus();
+        }
+        if (
+            pressedKey === "ArrowUp" &&
+            !focusedElement.previousSibling &&
+            onDropdownClose
+        ) {
+            event.preventDefault();
+            onDropdownClose();
+        }
+        if (
+            (pressedKey === "Escape" || pressedKey === "Tab") &&
+            onDropdownClose
+        ) {
+            onDropdownClose();
+        }
+    }
+
+    render(): React.Node {
+        const {
+            selected,
+            value,
+            onClick,
+            children,
+            optionRenderer,
+            disabled,
+            hideFocusState,
+            testId,
+            ariaLabel,
+        } = this.props;
+
+        return (
+            <button
+                // TODO(mdr): We found a new Flow error when upgrading:
+                //     "node (null) This type is incompatible with this.node (HTMLDivElement)"
+                // $FlowFixMe[incompatible-type](0.52.0->0.53.0)
+                ref={(node) => (this.node = node)}
+                value={value}
+                role="menuitemradio"
+                aria-checked={selected}
+                className={css(
+                    styles.notAButton,
+                    disabled && styles.cursorDefault,
+                    hideFocusState && styles.noFocus,
+                )}
+                onClick={(value: string) => {
+                    if (!disabled && onClick) {
+                        // TODO(mdr): We found a new Flow error here when upgrading
+                        //     from 0.35.0 to 0.52.0: "value (unused function
+                        //     argument)". This comment was automatically added to
+                        //     this file, to suppress the error for now. Please
+                        //     consider fixing!
+                        // $FlowFixMe[extra-arg]
+                        onClick(value);
+                    }
+                }}
+                onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}
+                aria-disabled={disabled}
+                aria-label={ariaLabel}
+                data-test-id={testId}
+            >
+                {optionRenderer &&
+                    optionRenderer(
+                        /**
+                         * This expects a `React.Element<>` but `children` is a
+                         * `React.Node`. We can convert a `React.Node` to a
+                         * `React.Element<>` by wrapping it in a fragment.
+                         */
+                        <>{children}</>,
+                        value || "",
+                        selected || false,
+                        disabled,
+                    )}
+
+                {!optionRenderer && (
+                    <span
+                        className={css(
+                            styles.option,
+                            selected && styles.optionSelected,
+                            disabled && styles.optionDisabled,
+                        )}
+                    >
+                        {children}
+                        {selected && (
+                            <span className={css(styles.check)}>
+                                <Icon icon={check} />
+                            </span>
+                        )}
+                    </span>
+                )}
+            </button>
+        );
+    }
+}
+
+// TODO(kevinb):
+// - keep the the option group within the page bounds
+// - do we really want to dismiss this on scroll
+// - how does the drop down interact with tooltips?  what's the z-index order?
+class OptionGroup extends React.Component<{
+    // An event when an option is selected
+    onSelected: (value: string) => void,
+    // The list of options to display
+    children?: Array<React.Element<typeof Option>>,
+    // The currently selected options
+    selectedValues: Array<string>,
+    // An optional rendering function to render the details of the options
+    optionRenderer?: OptionRenderer,
+    // An override to skip the bit of top/bottom spacing around the group
+    noMargin?: boolean,
+    // An optional function to call when the dropdown should close
+    onDropdownClose?: () => void,
+    // An optional value to override the focus styling of an option.
+    // Use caution when using this - keyboard users need to know what
+    // they're focused on in order to interact with the product!
+    hideFocusState?: boolean,
+    ...
+}> {
+    focusedElement: Element;
+
+    componentDidMount() {
+        if (this.focusedElement) {
+            findAndFocusElement(this.focusedElement);
+        }
+    }
+
+    render(): React.Element<"div"> {
+        const {
+            children,
+            onSelected,
+            selectedValues,
+            optionRenderer,
+            noMargin,
+            onDropdownClose,
+            hideFocusState,
+        } = this.props;
+
+        return (
+            <div
+                style={{top}}
+                className={css(
+                    styles.optionGroup,
+                    noMargin && styles.optionGroupNoMargin,
+                )}
+            >
+                {React.Children.map(children, (child, index) => {
+                    const selected = selectedValues.includes(child.props.value);
+
+                    const reference =
+                        selected || index === 0
+                            ? (node: Element) => (this.focusedElement = node)
+                            : null;
+
+                    return React.cloneElement(child, {
+                        ...child.props,
+                        key: index,
+                        selected: selected,
+                        onClick: () => onSelected(child.props.value),
+                        optionRenderer: optionRenderer,
+                        ref: reference,
+                        onDropdownClose: onDropdownClose,
+                        hideFocusState: hideFocusState,
+                    });
+                })}
+            </div>
+        );
+    }
+}
+
+const styles = StyleSheet.create({
+    optionGroup: {
+        margin: "4px 0",
+    },
+    optionGroupNoMargin: {
+        margin: 0,
+    },
+    option: {
+        display: "flex",
+        flexDirection: "row",
+        alignItems: "center",
+        paddingLeft: 32,
+        paddingRight: 32,
+        height: optionHeight,
+        whiteSpace: "nowrap",
+        overflow: "hidden",
+        textOverflow: "ellipsis",
+        color: colors.gray17,
+        userSelect: "none",
+
+        ":hover": {
+            backgroundColor: colors.gray95,
+        },
+    },
+    optionSelected: {
+        backgroundColor: colors.gray95,
+        color: "#11ACCD",
+    },
+    optionDisabled: {
+        color: colors.gray76,
+        ":hover": {
+            backgroundColor: "transparent",
+        },
+    },
+    check: {
+        position: "absolute",
+        left: 11,
+    },
+    notAButton: {
+        backgroundColor: "transparent",
+        border: "none",
+        display: "block",
+        padding: 0,
+        margin: 0,
+        width: "100%",
+        // <button> uses user agent stylesheet over inherit so we need to set
+        // it explicitly.
+        font: "inherit",
+    },
+    noFocus: {
+        outline: "none",
+    },
+    cursorDefault: {
+        cursor: "default",
+    },
+});
+
+export {OptionGroup};
+export default Option;