pxt-core 7.5.4 → 7.5.5

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} />
+    </>
+}

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

@@ -0,0 +1,97 @@
+import * as React from "react";
+import { Button } from "../controls/Button";
+
+type RecorderState = "default" | "recording" | "rendering";
+
+export interface GifRecorderProps {
+    onScreenshot?: () => void;
+    onRecordStart?: () => void;
+    onRecordStop?: () => Promise<void>;
+    onGifFrame?: (dataUri: ImageData, delay?: number) => boolean;
+    registerSimulatorMsgHandler?: (handler: (msg: any) => void) => void;
+    unregisterSimulatorMsgHandler?: () => void;
+}
+
+export const GifRecorder = (props: GifRecorderProps) => {
+    const { onScreenshot, onRecordStart, onRecordStop, onGifFrame,
+        registerSimulatorMsgHandler, unregisterSimulatorMsgHandler } = props;
+    const [ recorderState, _setRecorderState ] = React.useState<RecorderState>("default");
+    const recorderStateRef = React.useRef(recorderState);
+    const targetTheme = pxt.appTarget.appTheme;
+
+    const setRecorderState = (state: RecorderState) => {
+        _setRecorderState(state);
+        recorderStateRef.current = state;
+    }
+
+    const onGifRecordStop = async () => {
+        setRecorderState("rendering");
+        await onRecordStop();
+        setRecorderState("default");
+    }
+
+    const handleKeyDown = (e: KeyboardEvent) => {
+        const pressed = e.key.toLocaleLowerCase();
+        if (targetTheme.simScreenshotKey && pressed === targetTheme.simScreenshotKey.toLocaleLowerCase()) {
+            onScreenshot();
+        } else if (targetTheme.simGifKey && pressed === targetTheme.simGifKey.toLocaleLowerCase()) {
+            if (recorderStateRef.current === "recording") {
+                onGifRecordStop();
+            } else {
+                onGifRecordStart();
+            }
+        }
+    }
+
+    const handleSimulatorMsg = (e: any) => {
+        if (e.type === "screenshot") {
+            if (recorderStateRef.current === "recording") {
+                // Adds frame, returns true if we've exceeded the max frame count
+                if (onGifFrame(e.data, e.delay)) {
+                    onGifRecordStop();
+                }
+            } else {
+                onScreenshot();
+            }
+        } else if (e.event === "start") {
+            onGifRecordStart();
+        } else if (e.event === "stop") {
+            onGifRecordStop();
+        }
+    }
+
+    React.useEffect(() => {
+        document.addEventListener("keydown", handleKeyDown);
+        if (registerSimulatorMsgHandler) registerSimulatorMsgHandler(handleSimulatorMsg);
+
+        return () => {
+            document.removeEventListener("keydown", handleKeyDown);
+            if (unregisterSimulatorMsgHandler) unregisterSimulatorMsgHandler();
+        }
+    }, []);
+
+    const onGifRecordStart = () => {
+        setRecorderState("recording");
+        onRecordStart();
+    }
+
+    const screenshotLabel = lf("Take screenshot ({0})", targetTheme.simScreenshotKey);
+    const startRecordingLabel = lf("Record game play ({0})", targetTheme.simGifKey);
+    const stopRecordingLabel = lf("Stop recording ({0})", targetTheme.simGifKey) ;
+
+    return <div className="gif-recorder">
+        <div className="gif-recorder-label">{lf("Pick your project thumbnail")}</div>
+        <div className="gif-recorder-actions">
+            {!!onScreenshot && <Button className="teal inverted"
+                title={screenshotLabel}
+                label={screenshotLabel}
+                leftIcon="fas fa-camera"
+                onClick={onScreenshot} />}
+            {!!onRecordStart && <Button className="teal inverted"
+                title={recorderState === "recording" ? stopRecordingLabel : startRecordingLabel}
+                label={recorderState === "recording" ? stopRecordingLabel : startRecordingLabel}
+                leftIcon={`fas fa-${recorderState === "recording" ? "square" : "circle"}`}
+                onClick={recorderState === "recording" ? onGifRecordStop : onGifRecordStart} />}
+        </div>
+    </div>
+}

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

@@ -0,0 +1,49 @@
+/// <reference path="../types.d.ts" />
+
+import * as React from "react";
+import { ShareInfo } from "./ShareInfo";
+
+export interface ShareData {
+    url: string;
+    embed: {
+        code?: string;
+        editor?: string;
+        simulator?: string;
+        url?: string;
+    }
+    qr?: string;
+    error?: any;
+}
+
+export interface ShareProps {
+    projectName: string;
+    screenshotUri?: string;
+
+    screenshotAsync: () => Promise<string>;
+    gifRecordAsync: () => Promise<void>;
+    gifRenderAsync: () => Promise<string | void>;
+    gifAddFrame: (dataUri: ImageData, delay?: number) => boolean;
+    publishAsync: (name: string, screenshotUri?: string) => Promise<ShareData>;
+    registerSimulatorMsgHandler?: (handler: (msg: any) => void) => void;
+    unregisterSimulatorMsgHandler?: () => void;
+}
+
+export const Share = (props: ShareProps) => {
+    const { projectName, screenshotUri, screenshotAsync, gifRecordAsync, gifRenderAsync, gifAddFrame,
+        publishAsync, registerSimulatorMsgHandler, unregisterSimulatorMsgHandler } = props;
+
+return <div className="project-share">
+        {(!!screenshotAsync || !!gifRecordAsync) && <div className="project-share-simulator">
+            <div id="shareLoanedSimulator" />
+        </div>}
+        <ShareInfo projectName={projectName}
+            screenshotUri={screenshotUri}
+            screenshotAsync={screenshotAsync}
+            gifRecordAsync={gifRecordAsync}
+            gifRenderAsync={gifRenderAsync}
+            gifAddFrame={gifAddFrame}
+            publishAsync={publishAsync}
+            registerSimulatorMsgHandler={registerSimulatorMsgHandler}
+            unregisterSimulatorMsgHandler={unregisterSimulatorMsgHandler} />
+    </div>
+}