pxt-core 7.5.2 → 7.5.5

package/react-common/components/controls/EditorToggle.tsx

@@ -0,0 +1,153 @@
+import * as React from "react";
+import { classList, ControlProps } from "../util";
+import { Button } from "./Button";
+import { FocusList } from "./FocusList";
+import { MenuDropdown } from "./MenuDropdown";
+
+export interface EditorToggleProps extends ControlProps {
+    items: EditorToggleItem[];
+    selected: number;
+    id: string;
+}
+
+export type EditorToggleItem = BasicEditorToggleItem | DropdownEditorToggleItem;
+
+export interface BasicEditorToggleItem {
+    label: string;
+    title: string;
+    focusable: boolean;
+    icon?: string;
+    onClick: () => void;
+}
+
+export interface DropdownEditorToggleItem extends BasicEditorToggleItem {
+    items: BasicEditorToggleItem[];
+}
+
+
+export const EditorToggle = (props: EditorToggleProps) => {
+    const {
+        id,
+        className,
+        ariaHidden,
+        ariaLabel,
+        role,
+        items,
+        selected
+    } = props;
+
+
+    const hasDropdown = items.some(item => isDropdownItem(item));
+
+    const onKeydown = (ev: React.KeyboardEvent) => {
+        // TODO
+    }
+
+    return (
+        <div className="common-editor-toggle-outer">
+            <EditorToggleAccessibleMenu {...props} />
+            <div id={id}
+                className={classList("common-editor-toggle", hasDropdown && "has-dropdown", className)}
+                role={role || "tablist"}
+                aria-hidden={true}
+                aria-label={ariaLabel}>
+                    {items.map((item, index) => {
+                        const isSelected = selected === index;
+                        return (
+                            <div key={index}
+                                className={classList(
+                                    "common-editor-toggle-item",
+                                    isSelected && "selected",
+                                    isDropdownItem(item) && "common-editor-toggle-item-dropdown",
+                                )} >
+                                <ToggleButton item={item} isSelected={isSelected} onKeydown={onKeydown} />
+                                { isDropdownItem(item) &&
+                                    <MenuDropdown
+                                        id="toggle-dropdown"
+                                        className="toggle-dropdown"
+                                        icon="fas fa-chevron-down"
+                                        title={lf("More options")}
+                                        tabIndex={-1}
+                                        ariaHidden={true}
+                                        items={item.items.map(item => ({
+                                            title: item.title,
+                                            label: item.label,
+                                            onClick: item.onClick,
+                                            leftIcon: item.icon
+                                        }))}
+                                        />
+                                }
+                            </div>
+                        );
+                    })}
+
+                    <div className="common-editor-toggle-handle"
+                        aria-hidden={true}
+                    />
+            </div>
+        </div>
+    );
+}
+
+interface ToggleButtonProps {
+    item: BasicEditorToggleItem;
+    isSelected?: boolean;
+    onKeydown: (ev: React.KeyboardEvent) => void;
+}
+
+const ToggleButton = (props: ToggleButtonProps) => {
+    const { item, isSelected, onKeydown } = props;
+    const { label, title, onClick, icon, focusable } = item;
+
+    return <Button
+        role={focusable ? "tab" : undefined}
+        tabIndex={-1}
+        onKeydown={onKeydown}
+        label={label}
+        title={title}
+        onClick={onClick}
+        leftIcon={icon}
+        ariaHidden={true}
+        />
+}
+
+
+interface ToggleTab extends BasicEditorToggleItem {
+    selected?: boolean;
+}
+
+const EditorToggleAccessibleMenu = (props: EditorToggleProps) => {
+    const { items, id, selected, ariaHidden } = props;
+
+    const tabs = items.reduce((prev, current, index) => {
+        const next: ToggleTab[] = [...prev]
+        next.push({...current});
+
+        // The selected item will always be a top-level option, not in a dropdown
+        if (selected === index) next[next.length - 1].selected = true;
+
+        if (isDropdownItem(current)) {
+            next.push(...current.items.filter(i => i.focusable))
+        }
+        return next;
+    }, [] as ToggleTab[]);
+
+    return <FocusList id={id} role="tablist" className="common-toggle-accessibility" childTabStopId={id + "-selected"}>
+        {tabs.map((item, index) =>
+            <Button
+                key={index}
+                className={item.selected ? "selected" : undefined}
+                id={item.selected ? id + "-selected" : undefined}
+                role="tab"
+                title={item.title}
+                label={item.label}
+                onClick={item.onClick}
+                ariaSelected={item.selected}
+                ariaHidden={ariaHidden}/>
+        )}
+    </FocusList>
+}
+
+function isDropdownItem(item: EditorToggleItem): item is DropdownEditorToggleItem {
+    return !!(item as DropdownEditorToggleItem).items?.length
+}

package/react-common/components/controls/FocusList.tsx

@@ -0,0 +1,120 @@
+import * as React from "react";
+import { ContainerProps } from "../util";
+
+export interface FocusListProps extends ContainerProps {
+    role: string;
+    childTabStopId?: string;
+}
+
+/**
+ * A list of focusable items that represents a single tab stop in the tab order. The
+ * children of the list can be navigated between using the arrow keys. Any child with
+ * a tabindex other than -1 will be included in the list.
+ *
+ * If childTabStopId is specified, then the tab stop will be placed on the child with
+ * the given id instead of the outer div.
+ */
+export const FocusList = (props: FocusListProps) => {
+    const {
+        id,
+        className,
+        role,
+        ariaHidden,
+        ariaLabel,
+        childTabStopId,
+        children,
+    } = props;
+
+    let focusableElements: HTMLElement[];
+    let focusList: HTMLDivElement;
+
+    const handleRef = (ref: HTMLDivElement) => {
+        if (!ref || focusList) return;
+
+        focusList = ref;
+
+        const focusable = ref.querySelectorAll(`[tabindex]:not([tabindex="-1"]),[data-isfocusable]`);
+        focusableElements = [];
+
+        for (const element of focusable.values()) {
+            focusableElements.push(element as HTMLElement);
+
+            // Remove them from the tab order, menu items are navigable using the arrow keys
+            element.setAttribute("tabindex", "-1");
+            element.setAttribute("data-isfocusable", "true");
+        }
+
+        if (childTabStopId) {
+            const childTabStop = focusList.querySelector("#" + childTabStopId);
+
+            if (childTabStop) {
+                childTabStop.setAttribute("tabindex", "0");
+            }
+        }
+    }
+
+    const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+        if  (!focusableElements?.length) return;
+
+        const target = document.activeElement as HTMLElement;
+        const index = focusableElements.indexOf(target);
+
+        if (index === -1 && target !== focusList) return;
+
+        if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            e.stopPropagation();
+
+            if (target.click) {
+                target.click();
+            }
+            else {
+                // SVG Elements
+                target.dispatchEvent(new Event("click"));
+            }
+        }
+        else if (e.key === "ArrowRight") {
+            if (index === focusableElements.length - 1 || target === focusList) {
+                focusableElements[0].focus();
+            }
+            else {
+                focusableElements[index + 1].focus();
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else if (e.key === "ArrowLeft") {
+            if (index === 0 || target === focusList) {
+                focusableElements[focusableElements.length - 1].focus();
+            }
+            else {
+                focusableElements[Math.max(index - 1, 0)].focus();
+            }
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else if (e.key === "Home") {
+            focusableElements[0].focus();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+        else if (e.key === "End") {
+            focusableElements[focusableElements.length - 1].focus();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+
+    return (
+        <div id={id}
+            className={className}
+            role={role}
+            tabIndex={childTabStopId ? undefined : 0}
+            onKeyDown={onKeyDown}
+            ref={handleRef}
+            aria-hidden={ariaHidden}
+            aria-label={ariaLabel}>
+            {children}
+        </div>
+    );
+}

package/react-common/components/controls/Input.tsx

@@ -21,7 +21,7 @@ export interface InputProps extends ControlProps {
     onIconClick?: (value: string) => void;
 }
 
-export function Input(props: InputProps) {
+export const Input = (props: InputProps) => {
     const {
         id,
         className,
@@ -78,7 +78,7 @@ export function Input(props: InputProps) {
 
     return (
         <div className={classList("common-input-wrapper", disabled && "disabled", className)}>
-            {label && <label className="common-input-label">
+            {label && <label className="common-input-label" htmlFor={id}>
                 {label}
             </label>}
             <div className="common-input-group">
@@ -86,8 +86,8 @@ export function Input(props: InputProps) {
                     id={id}
                     className={classList("common-input", icon && "has-icon")}
                     title={title}
-                    role={role || "button"}
-                    tabIndex={disabled ? 0 : -1}
+                    role={role || "textbox"}
+                    tabIndex={disabled ? -1 : 0}
                     aria-label={ariaLabel}
                     aria-hidden={ariaHidden}
                     type={type || "text"}

package/react-common/components/controls/Link.tsx

@@ -0,0 +1,36 @@
+import * as React from "react";
+import { classList, ContainerProps } from "../util";
+
+export interface LinkProps extends ContainerProps {
+    href: string;
+    target?: "_self" | "_blank" | "_parent" | "_top";
+}
+
+export const Link = (props: LinkProps) => {
+    const {
+        id,
+        className,
+        ariaLabel,
+        href,
+        target,
+        children
+    } = props;
+
+    const classes = classList(
+        "common-link",
+        className
+    );
+
+    return (
+        <a
+            id={id}
+            className={classes}
+            aria-label={ariaLabel}
+            href={href}
+            target={target}
+            rel={target === "_blank" ? "noopener noreferrer" : ""}
+            >
+            {children}
+        </a>
+    );
+}

package/react-common/components/controls/MenuBar.tsx

@@ -1,101 +1,11 @@
 import * as React from "react";
 import { classList, ContainerProps } from "../util";
+import { FocusList } from "./FocusList";
 
 export interface MenuBarProps extends ContainerProps {
 }
 
-export const MenuBar = (props: MenuBarProps) => {
-    const {
-        id,
-        className,
-        role,
-        ariaHidden,
-        ariaLabel,
-        children
-    } = props;
-
-    let focusableElements: HTMLElement[];
-    let menubar: HTMLDivElement;
-
-    const handleRef = (ref: HTMLDivElement) => {
-        if (!ref || menubar) return;
-
-        menubar = ref;
-
-        const focusable = ref.querySelectorAll(`[tabindex]:not([tabindex="-1"]),[data-isfocusable]`);
-        focusableElements = [];
-
-        for (const element of focusable.values()) {
-            focusableElements.push(element as HTMLElement);
-
-            // Remove them from the tab order, menu items are navigable using the arrow keys
-            element.setAttribute("tabindex", "-1");
-            element.setAttribute("data-isfocusable", "true");
-        }
-    }
-
-    const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
-        if  (!focusableElements?.length) return;
-
-        const target = document.activeElement as HTMLElement;
-        const index = focusableElements.indexOf(target);
-
-        if (index === -1 && target !== menubar) return;
-
-        if (e.key === "Enter" || e.key === " ") {
-            e.preventDefault();
-            e.stopPropagation();
-
-            if (target.click) {
-                target.click();
-            }
-            else {
-                // SVG Elements
-                target.dispatchEvent(new Event("click"));
-            }
-        }
-        else if (e.key === "ArrowRight") {
-            if (index === focusableElements.length - 1 || target === menubar) {
-                focusableElements[0].focus();
-            }
-            else {
-                focusableElements[index + 1].focus();
-            }
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        else if (e.key === "ArrowLeft") {
-            if (index === 0 || target === menubar) {
-                focusableElements[focusableElements.length - 1].focus();
-            }
-            else {
-                focusableElements[Math.max(index - 1, 0)].focus();
-            }
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        else if (e.key === "Home") {
-            focusableElements[0].focus();
-            e.preventDefault();
-            e.stopPropagation();
-        }
-        else if (e.key === "End") {
-            focusableElements[focusableElements.length - 1].focus();
-            e.preventDefault();
-            e.stopPropagation();
-        }
-    }
-
-    return (
-        <div id={id}
-            className={classList("common-menubar", className)}
-            role={role || "menubar"}
-            tabIndex={0}
-            onKeyDown={onKeyDown}
-            ref={handleRef}
-            aria-hidden={ariaHidden}
-            aria-label={ariaLabel}>
-            {children}
-        </div>
-    );
-}
+export const MenuBar = (props: MenuBarProps) =>
+    <FocusList {...props}
+        role="menubar"
+        className={classList("common-menubar", props.className)} />

package/react-common/components/controls/MenuDropdown.tsx

@@ -15,6 +15,7 @@ export interface MenuDropdownProps extends ControlProps {
     label?: string | JSX.Element;
     title: string;
     icon?: string;
+    tabIndex?: number;
 }
 
 export const MenuDropdown = (props: MenuDropdownProps) => {
@@ -27,7 +28,8 @@ export const MenuDropdown = (props: MenuDropdownProps) => {
         items,
         label,
         title,
-        icon
+        icon,
+        tabIndex
     } = props;
 
     const [ expanded, setExpanded ] = React.useState(false);
@@ -66,6 +68,7 @@ export const MenuDropdown = (props: MenuDropdownProps) => {
         <Button
             id={id}
             label={label}
+            tabIndex={tabIndex}
             buttonRef={handleButtonRef}
             title={title}
             leftIcon={icon}

package/react-common/components/controls/Textarea.tsx

@@ -0,0 +1,103 @@
+import * as React from "react";
+import { classList, ControlProps } from "../util";
+
+export interface TextareaProps extends ControlProps {
+    initialValue?: string;
+    label?: string;
+    title?: string;
+    placeholder?: string;
+    autoComplete?: boolean;
+    cols?: number;
+    rows?: number;
+    disabled?: boolean;
+    minLength?: number;
+    readOnly?: boolean;
+    resize?: "both" | "horizontal" | "vertical";
+    wrap?: "hard" | "soft" | "off";
+
+    onChange?: (newValue: string) => void;
+    onEnterKey?: (value: string) => void;
+}
+
+export const Textarea = (props: TextareaProps) => {
+    const {
+        id,
+        className,
+        role,
+        ariaHidden,
+        ariaLabel,
+        initialValue,
+        label,
+        title,
+        placeholder,
+        autoComplete,
+        cols,
+        rows,
+        disabled,
+        minLength,
+        readOnly,
+        resize,
+        wrap,
+        onChange,
+        onEnterKey
+    } = props;
+
+    const [value, setValue] = React.useState(initialValue || "");
+
+    React.useEffect(() => {
+        setValue(initialValue)
+    }, [initialValue])
+
+
+    const changeHandler = (e: React.ChangeEvent<any>) => {
+        const newValue = (e.target as any).value;
+        if (!readOnly && (value !== newValue)) {
+            setValue(newValue);
+        }
+        if (onChange) {
+            onChange(newValue);
+        }
+    }
+
+    const enterKeyHandler = (e: React.KeyboardEvent) => {
+        const charCode = (typeof e.which == "number") ? e.which : e.keyCode;
+        if (charCode === /*enter*/ 13 || charCode === /*space*/ 32) {
+            if (onEnterKey) {
+                e.preventDefault();
+                onEnterKey(value);
+            }
+        }
+    }
+
+    return (
+        <div className={classList("common-textarea-wrapper", disabled && "disabled", resize && `resize-${resize}`, className)}>
+            {label && <label className="common-textarea-label">
+                {label}
+            </label>}
+            <div className="common-textarea-group">
+                <textarea
+                    id={id}
+                    className={"common-textarea"}
+                    title={title}
+                    role={role || "textbox"}
+                    tabIndex={disabled ? -1 : 0}
+                    aria-label={ariaLabel}
+                    aria-hidden={ariaHidden}
+                    placeholder={placeholder}
+                    value={value || ''}
+                    cols={cols}
+                    rows={rows}
+                    minLength={minLength}
+                    wrap={wrap}
+                    readOnly={!!readOnly}
+                    onChange={changeHandler}
+                    onKeyDown={enterKeyHandler}
+                    autoComplete={autoComplete ? "" : "off"}
+                    autoCorrect={autoComplete ? "" : "off"}
+                    autoCapitalize={autoComplete ? "" : "off"}
+                    spellCheck={autoComplete}
+                    disabled={disabled} />
+            </div>
+        </div>
+    );
+}

package/react-common/components/share/GifInfo.tsx

@@ -0,0 +1,63 @@
+import * as React from "react";
+import { Button } from "../controls/Button";
+import { GifRecorder } from "./GifRecorder";
+
+export interface GifInfoProps {
+    initialUri?: string;
+
+    onApply: (uri: string) => void;
+    onCancel: () => void;
+
+    screenshotAsync?: () => Promise<string>;
+    gifRecordAsync?: () => Promise<void>;
+    gifRenderAsync?: () => Promise<string | void>;
+    gifAddFrame?: (dataUri: ImageData, delay?: number) => boolean;
+
+    registerSimulatorMsgHandler?: (handler: (msg: any) => void) => void;
+    unregisterSimulatorMsgHandler?: () => void;
+}
+
+export const GifInfo = (props: GifInfoProps) => {
+    const { initialUri, onApply, onCancel, screenshotAsync, gifRecordAsync, gifRenderAsync, gifAddFrame,
+        registerSimulatorMsgHandler, unregisterSimulatorMsgHandler } = props;
+    const [ uri, setUri ] =  React.useState(initialUri);
+
+    const handleApplyClick = (evt?: any) => {
+        onApply(uri);
+    }
+
+    const handleScreenshotClick = async () => {
+        const screenshotUri = await screenshotAsync();
+        setUri(screenshotUri);
+    }
+
+    const handleRecordStopClick = async () => {
+        const gifUri = await gifRenderAsync();
+        if (gifUri) setUri(gifUri);
+    }
+
+    return <>
+        <span className="thumbnail-label">{lf("Current Thumbnail")}</span>
+        <div className="thumbnail-image">
+            {uri
+                ? <img src={uri} />
+                : <div className="thumbnail-placeholder" />
+            }
+        </div>
+        <div className="thumbnail-actions">
+            <Button className="primary"
+                title={lf("Apply")}
+                label={lf("Apply")}
+                onClick={handleApplyClick} />
+            <Button title={lf("Cancel")}
+                label={lf("Cancel")}
+                onClick={onCancel} />
+        </div>
+        <GifRecorder onScreenshot={screenshotAsync ? handleScreenshotClick : undefined}
+            onRecordStart={gifRecordAsync}
+            onRecordStop={handleRecordStopClick}
+            onGifFrame={gifAddFrame}
+            registerSimulatorMsgHandler={registerSimulatorMsgHandler}
+            unregisterSimulatorMsgHandler={unregisterSimulatorMsgHandler} />
+    </>
+}