@khanacademy/perseus-editor 0.0.1 → 0.1.2

package/src/components/sortable.jsx

@@ -0,0 +1,186 @@
+// @noflow
+import createReactClass from "create-react-class";
+import PropTypes from "prop-types";
+import * as React from "react";
+import ReactDOM from "react-dom";
+
+const PT = PropTypes;
+
+// Takes an array of components to sort
+// eslint-disable-next-line react/no-unsafe
+const SortableArea = createReactClass({
+    propTypes: {
+        className: PT.string,
+        components: PT.arrayOf(PT.node).isRequired,
+        onReorder: PT.func.isRequired,
+        style: PT.any,
+        verify: PT.func,
+    },
+    getDefaultProps: function () {
+        return {verify: () => true};
+    },
+    getInitialState: function () {
+        return {
+            // index of the component being dragged
+            dragging: null,
+            components: this.props.components,
+        };
+    },
+    // Firefox refuses to drag an element unless you set data on it. Hackily
+    // add data each time an item is dragged.
+    componentDidMount: function () {
+        this._setDragEvents();
+    },
+    UNSAFE_componentWillReceiveProps: function (nextProps) {
+        this.setState({components: nextProps.components});
+    },
+    componentDidUpdate: function () {
+        this._setDragEvents();
+    },
+    // Alternatively send each handler to each component individually,
+    // partially applied
+    onDragStart: function (startIndex) {
+        this.setState({dragging: startIndex});
+    },
+    onDrop: function () {
+        // tell the parent component
+        this.setState({dragging: null});
+        this.props.onReorder(this.state.components);
+    },
+    onDragEnter: function (enterIndex) {
+        // When a label is first dragged it triggers a dragEnter with itself,
+        // which we don't care about.
+        if (this.state.dragging === enterIndex) {
+            return;
+        }
+
+        const newComponents = this.state.components.slice();
+
+        // splice the tab out of its old position
+        const removed = newComponents.splice(this.state.dragging, 1);
+        // ... and into its new position
+        newComponents.splice(enterIndex, 0, removed[0]);
+
+        const verified = this.props.verify(newComponents);
+        if (verified) {
+            this.setState({
+                dragging: enterIndex,
+                components: newComponents,
+            });
+        }
+        return verified;
+    },
+    _listenEvent: function (e) {
+        e.dataTransfer.setData("hackhackhack", "because browsers!");
+    },
+    _cancelEvent: function (e) {
+        // prevent the browser from redirecting to 'because browsers!'
+        e.preventDefault();
+    },
+    _setDragEvents: function () {
+        this._dragItems = this._dragItems || [];
+        const items =
+            ReactDOM.findDOMNode(this).querySelectorAll("[draggable=true]");
+
+        const oldItems = [];
+        const newItems = [];
+
+        for (let i = 0; i < this._dragItems.length; i++) {
+            const item = this._dragItems[i];
+            if (items.indexOf(item) < 0) {
+                oldItems.push(item);
+            }
+        }
+
+        for (let i = 0; i < items.length; i++) {
+            const item = items[i];
+            if (this._dragItems.indexOf(item) < 0) {
+                newItems.push(item);
+            }
+        }
+
+        for (let i = 0; i < newItems.length; i++) {
+            const dragItem = newItems[i];
+            dragItem.addEventListener("dragstart", this._listenEvent);
+            dragItem.addEventListener("drop", this._cancelEvent);
+        }
+
+        for (let i = 0; i < oldItems.length; i++) {
+            const dragItem = oldItems[i];
+            dragItem.removeEventListener("dragstart", this._listenEvent);
+            dragItem.removeEventListener("drop", this._cancelEvent);
+        }
+    },
+    render: function () {
+        const sortables = this.state.components.map((component, index) => (
+            <SortableItem
+                index={index}
+                component={component}
+                area={this}
+                key={component.key}
+                draggable={component.props.draggable}
+                dragging={index === this.state.dragging}
+            />
+        ));
+        return (
+            <ol className={this.props.className} style={this.props.style}>
+                {sortables}
+            </ol>
+        );
+    },
+});
+
+// An individual sortable item
+const SortableItem = createReactClass({
+    propTypes: {
+        area: PT.shape({
+            onDragEnter: PT.func.isRequired,
+            onDragStart: PT.func.isRequired,
+            onDrop: PT.func.isRequired,
+        }),
+        component: PT.node.isRequired,
+        dragging: PT.bool.isRequired,
+        draggable: PT.bool.isRequired,
+        index: PT.number.isRequired,
+    },
+    handleDragStart: function (e) {
+        e.nativeEvent.dataTransfer.effectAllowed = "move";
+        this.props.area.onDragStart(this.props.index);
+    },
+    handleDrop: function () {
+        this.props.area.onDrop(this.props.index);
+    },
+    handleDragEnter: function (e) {
+        const verified = this.props.area.onDragEnter(this.props.index);
+        // Ideally this would change the cursor based on whether this is a
+        // valid place to drop.
+        e.nativeEvent.dataTransfer.effectAllowed = verified ? "move" : "none";
+    },
+    handleDragOver: function (e) {
+        // allow a drop by preventing default handling
+        e.preventDefault();
+    },
+    render: function () {
+        let dragState = "sortable-disabled";
+        if (this.props.dragging) {
+            dragState = "sortable-dragging";
+        } else if (this.props.draggable) {
+            dragState = "sortable-enabled";
+        }
+
+        return (
+            <li
+                draggable={this.props.draggable}
+                className={dragState}
+                onDragStart={this.handleDragStart}
+                onDrop={this.handleDrop}
+                onDragEnter={this.handleDragEnter}
+                onDragOver={this.handleDragOver}
+            >
+                {this.props.component}
+            </li>
+        );
+    },
+});
+
+export default SortableArea;

package/src/components/util.js

@@ -0,0 +1,39 @@
+// @flow
+export function focusWithChromeStickyFocusBugWorkaround(element: Element) {
+    // NOTE(marksandstrom) Chrome sticky focus bug.
+    //
+    // There is a bug in Chrome related to sticky positioning and
+    // focus: When a child of an element with sticky positioning is
+    // focused with the focus() method, the scrollable area
+    // containing that element will scroll to the top (even though
+    // the element is already visble on the page). For a dropdown
+    // this means that the area will be scrolled to the top when
+    // the user interacts with the dropdown (since we actively
+    // manage dropdown header and option focus for keyboard users).
+    //
+    // To work around this bug the `preventScroll` focus option is
+    // used.
+    //
+    // Using `focusOptions` is an experimental browser feature
+    // "that should not be used in production code". However, since
+    // Chrome is the only browser we support that exhibits this
+    // buggy behavior and using `focusOptions` works around the
+    // bug, it is perfectly reasonable to use the feature in this
+    // case. We are not relying on the effect of the
+    // `preventScroll` option otherwise.
+    //
+    // focusOptions documentation:
+    //
+    // https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/focus
+    //
+    // Note that there could be cases where we want default focus() behavior.
+    // One that comes to mind is a dropdown with a long list of options that
+    // might be rendered off screen when opened. With this workaround the
+    // selected option would not be scrolled into view if the option is near
+    // the end of the list. We're not aware of any uses of the dropdown where
+    // this is an issue, however, so there isn't currently a way to out of the
+    // `preventScroll` behavior.
+
+    // $FlowIgnore[prop-missing]
+    element.focus({preventScroll: true});
+}

package/src/components/viewport-resizer.jsx

@@ -0,0 +1,73 @@
+// @flow
+/**
+ * A component that displays controls for choosing a viewport size.
+ * Renders three buttons: "Phone", "Tablet", and "Desktop".
+ */
+import {components, constants, icons} from "@khanacademy/perseus";
+import PropTypes from "prop-types";
+import * as React from "react";
+
+import type {DeviceType} from "@khanacademy/perseus";
+
+const {ButtonGroup, InlineIcon} = components;
+const {devices} = constants;
+const {iconDesktop, iconMobilePhone, iconTablet} = icons;
+
+type Props = {|
+    deviceType: DeviceType,
+    onViewportSizeChanged: (DeviceType) => mixed,
+|};
+
+class ViewportResizer extends React.Component<Props> {
+    static propTypes = {
+        // The current device type that is selected.
+        deviceType: PropTypes.string.isRequired,
+        // A callback that is passed (width, height) as the dimensions of the
+        // viewport to resize to.
+        onViewportSizeChanged: PropTypes.func.isRequired,
+    };
+
+    handleChange: (value: DeviceType) => void = (value: DeviceType) => {
+        this.props.onViewportSizeChanged(value);
+    };
+
+    render(): React.Element<"span"> {
+        const phoneButtonContents = (
+            <span>
+                <InlineIcon {...iconMobilePhone} /> Phone
+            </span>
+        );
+        const tabletButtonContents = (
+            <span>
+                <InlineIcon {...iconTablet} /> Tablet
+            </span>
+        );
+        const desktopButtonContents = (
+            <span>
+                <InlineIcon {...iconDesktop} /> Desktop
+            </span>
+        );
+
+        // TODO(david): Allow input of custom viewport sizes.
+        return (
+            <span className="viewport-resizer">
+                Viewport:{" "}
+                <ButtonGroup
+                    value={this.props.deviceType}
+                    allowEmpty={false}
+                    buttons={[
+                        {value: devices.PHONE, content: phoneButtonContents},
+                        {value: devices.TABLET, content: tabletButtonContents},
+                        {
+                            value: devices.DESKTOP,
+                            content: desktopButtonContents,
+                        },
+                    ]}
+                    onChange={this.handleChange}
+                />
+            </span>
+        );
+    }
+}
+
+export default ViewportResizer;

package/src/diffs/__stories__/perseus-diff-wrapper.jsx

@@ -0,0 +1,8 @@
+// @flow
+import * as React from "react";
+
+const Wrapper = ({children}: {|children: React.Node|}): React.Node => {
+    return <div className="perseus-diff">{children}</div>;
+};
+
+export default Wrapper;