pxt-core 7.4.13 → 7.4.17

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

@@ -0,0 +1,117 @@
+import * as React from "react";
+import { classList, ControlProps } from "../util";
+
+import { Button } from "./Button";
+
+export interface InputProps extends ControlProps {
+    initialValue?: string;
+    label?: string;
+    title?: string;
+    placeholder?: string;
+    icon?: string;
+    iconTitle?: string;
+    disabled?: boolean;
+    type?: string;
+    readOnly?: boolean;
+    autoComplete?: boolean;
+    selectOnClick?: boolean;
+
+    onChange?: (newValue: string) => void;
+    onEnterKey?: (value: string) => void;
+    onIconClick?: (value: string) => void;
+}
+
+export function Input(props: InputProps) {
+    const {
+        id,
+        className,
+        role,
+        ariaHidden,
+        ariaLabel,
+        initialValue,
+        label,
+        title,
+        placeholder,
+        icon,
+        iconTitle,
+        disabled,
+        type,
+        readOnly,
+        autoComplete,
+        selectOnClick,
+        onChange,
+        onEnterKey,
+        onIconClick
+    } = props;
+
+    const [value, setValue] = React.useState(initialValue || "");
+
+    const clickHandler = (evt: React.MouseEvent<any>) => {
+        if (selectOnClick) {
+            (evt.target as any).select()
+        }
+    }
+
+    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);
+            }
+        }
+    }
+
+    const iconClickHandler = () => {
+        if (onIconClick) onIconClick(value);
+    }
+
+    return (
+        <div className={classList("common-input-wrapper", disabled && "disabled", className)}>
+            {label && <label className="common-input-label">
+                {label}
+            </label>}
+            <div className="common-input-group">
+                <input
+                    id={id}
+                    className={classList("common-input", icon && "has-icon")}
+                    title={title}
+                    role={role || "button"}
+                    tabIndex={disabled ? 0 : -1}
+                    aria-label={ariaLabel}
+                    aria-hidden={ariaHidden}
+                    type={type || "text"}
+                    placeholder={placeholder}
+                    value={value || ''}
+                    readOnly={!!readOnly}
+                    onClick={clickHandler}
+                    onChange={changeHandler}
+                    onKeyDown={enterKeyHandler}
+                    autoComplete={autoComplete ? "" : "off"}
+                    autoCorrect={autoComplete ? "" : "off"}
+                    autoCapitalize={autoComplete ? "" : "off"}
+                    spellCheck={autoComplete}
+                    disabled={disabled} />
+                {icon && (onIconClick
+                    ? <Button
+                        leftIcon={icon}
+                        title={iconTitle}
+                        disabled={disabled}
+                        onClick={iconClickHandler} />
+                    : <i
+                        className={icon}
+                        aria-hidden={true} />) }
+            </div>
+        </div>
+    );
+}

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

@@ -0,0 +1,28 @@
+import * as React from "react";
+import { classList, ContainerProps } from "../util";
+
+export interface ListProps extends ContainerProps {
+}
+
+export const List = (props: ListProps) => {
+    const {
+        id,
+        className,
+        ariaHidden,
+        ariaLabel,
+        role
+    } = props;
+
+    return <div
+        id={id}
+        aria-hidden={ariaHidden}
+        aria-label={ariaLabel}
+        role={role}
+        className={classList("common-list", className)}>
+            {React.Children.map(props.children, (child, index) =>
+                <div key={index} className="common-list-item">
+                    {child}
+                </div>
+            )}
+    </div>
+}

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

@@ -0,0 +1,94 @@
+import * as React from "react";
+import { classList, ContainerProps } from "../util";
+
+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();
+            target.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>
+    );
+}

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

@@ -0,0 +1,108 @@
+import * as React from "react";
+import { classList, ControlProps } from "../util";
+import { Button, ButtonProps } from "./Button";
+import { FocusTrap } from "./FocusTrap";
+
+export interface MenuItem extends ButtonProps {
+    role?: "menuitem" | undefined;
+    ariaPosInSet?: undefined;
+    ariaSetSize?: undefined;
+}
+
+export interface MenuDropdownProps extends ControlProps {
+    id: string;
+    items: MenuItem[];
+    label?: string | JSX.Element;
+    title: string;
+    icon?: string;
+}
+
+export const MenuDropdown = (props: MenuDropdownProps) => {
+    const {
+        id,
+        className,
+        ariaHidden,
+        ariaLabel,
+        role,
+        items,
+        label,
+        title,
+        icon
+    } = props;
+
+    const [ expanded, setExpanded ] = React.useState(false);
+
+    let container: HTMLDivElement;
+    let expandButton: HTMLButtonElement;
+
+    const handleContainerRef = (ref: HTMLDivElement) => {
+        if (!ref) return;
+        container = ref;
+    }
+
+    const handleButtonRef = (ref: HTMLButtonElement) => {
+        if (!ref) return;
+        expandButton = ref;
+    }
+
+    const onMenuButtonClick = () => {
+        setExpanded(!expanded);
+    }
+
+    const onSubpaneEscape = () => {
+        setExpanded(false);
+        if (expandButton) expandButton.focus();
+    }
+
+    const onBlur = (e: React.FocusEvent) => {
+        if (!container) return;
+        if (expanded && !container.contains(e.relatedTarget as HTMLElement)) setExpanded(false);
+    }
+
+    const classes = classList("common-menu-dropdown", className);
+    const menuId = id + "-menu";
+
+    return <div className={classes} ref={handleContainerRef} onBlur={onBlur}>
+        <Button
+            id={id}
+            label={label}
+            buttonRef={handleButtonRef}
+            title={title}
+            leftIcon={icon}
+            role={role || "menuitem"}
+            className={classList("menu-button", expanded && "expanded")}
+            onClick={onMenuButtonClick}
+            ariaHasPopup="true"
+            ariaExpanded={expanded}
+            ariaControls={expanded ? menuId : undefined}
+            ariaLabel={ariaLabel}
+            ariaHidden={ariaHidden}
+            />
+        {expanded &&
+            <div role="menu"
+                className="common-menu-dropdown-pane"
+                tabIndex={0}
+                id={menuId}
+                aria-labelledby={id}>
+                <FocusTrap arrowKeyNavigation={true} onEscape={onSubpaneEscape}>
+                    <ul role="presentation">
+                        { items.map((item, index) =>
+                            <li key={index} role="presentation">
+                                <Button
+                                    {...item}
+                                    className={classList("common-menu-dropdown-item", item.className)}
+                                    onClick={() => {
+                                        setExpanded(false);
+                                        item.onClick();
+                                    }}
+                                    role="menuitem"
+                                    ariaPosInSet={index + 1}
+                                    ariaSetSize={items.length}/>
+                            </li>
+                        )}
+                    </ul>
+                </FocusTrap>
+            </div>
+        }
+    </div>
+}

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

@@ -0,0 +1,108 @@
+import React = require("react");
+import { classList, ContainerProps } from "../util";
+import { Button } from "./Button";
+import { FocusTrap } from "./FocusTrap";
+
+export interface ModalAction {
+    label: string;
+    className?: string;
+    disabled?: boolean;
+    icon?: string;
+    xicon?: boolean;
+    onClick: () => void;
+    url?: string;
+
+    // TODO: It would be nice to make fullscreen modals their own thing and deprecate this prop. right
+    // now it's required to render the back arrow
+    fullscreen?: boolean;
+}
+
+export interface ModalProps extends ContainerProps {
+    title: string;
+    ariaDescribedBy?: string;
+    actions?: ModalAction[];
+    onClose?: () => void;
+    fullscreen?: boolean;
+}
+
+export const Modal = (props: ModalProps) => {
+    const {
+        children,
+        id,
+        className,
+        ariaLabel,
+        ariaHidden,
+        ariaDescribedBy,
+        role,
+        title,
+        actions,
+        onClose,
+        fullscreen
+    } = props;
+
+    const closeClickHandler = (e?: React.MouseEvent<HTMLButtonElement>) => {
+        if (onClose) onClose();
+    }
+
+    const classes = classList(
+        "common-modal-container",
+        fullscreen && "fullscreen",
+        className
+    );
+
+    return <FocusTrap className={classes} onEscape={closeClickHandler}>
+        <div id={id}
+            className="common-modal"
+            role={role || "dialog"}
+            aria-hidden={ariaHidden}
+            aria-label={ariaLabel}
+            aria-describedby={ariaDescribedBy}
+            aria-labelledby="modal-title">
+            <div className="common-modal-header">
+                {fullscreen &&
+                    <div className="common-modal-back">
+                        <Button
+                            className="menu-button"
+                            onClick={closeClickHandler}
+                            title={lf("Go Back")}
+                            label={lf("Go Back")}
+                            leftIcon="fas fa-arrow-left"
+                        />
+                    </div>
+                }
+                <div id="modal-title" className="common-modal-title">
+                    {title}
+                </div>
+                {!fullscreen &&
+                    <div className="common-modal-close">
+                        <Button
+                            className="menu-button"
+                            onClick={closeClickHandler}
+                            title={lf("Close")}
+                            rightIcon="fas fa-times-circle"
+                        />
+                    </div>
+                }
+            </div>
+            <div className="common-modal-body">
+                {children}
+            </div>
+            {actions?.length &&
+                <div className="common-modal-footer">
+                    { actions.map((action, index) =>
+                        <Button
+                            key={index}
+                            className="primary inverted"
+                            disabled={action.disabled}
+                            onClick={action.onClick}
+                            href={action.url}
+                            label={action.label}
+                            title={action.label}
+                            rightIcon={(action.xicon ? "xicon " : "") + action.icon}
+                        />
+                    )}
+                </div>
+            }
+        </div>
+    </FocusTrap>
+}

package/react-common/components/profile/Profile.tsx

@@ -4,7 +4,7 @@ import * as React from "react";
 import { BadgeList } from "./BadgeList";
 import { UserPane } from "./UserPane";
 import { BadgeInfo } from "./BadgeInfo";
-import { CheckboxStatus } from "../Checkbox";
+import { CheckboxStatus } from "../util";
 
 export interface ProfileProps {
     user: pxt.auth.State;

package/react-common/components/profile/UserPane.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
-import { fireClickOnEnter } from "../util";
+import { fireClickOnEnter, CheckboxStatus } from "../util";
 import { UserNotification } from "./UserNotification";
-import { Checkbox, CheckboxStatus } from "../Checkbox";
+import { Checkbox } from "../controls/Checkbox";
 
 export interface UserPaneProps {
     profile: pxt.auth.UserProfile;
@@ -18,7 +18,11 @@ export const UserPane = (props: UserPaneProps) => {
 
     const { username, displayName, picture } = profile.idp;
 
-    const checkboxLabel = "email-optin-label"
+    const emailLabel = <>
+        {emailChecked === CheckboxStatus.Waiting ? <div className="common-spinner" /> : undefined}
+        {lf("I would like to receive the MakeCode newsletter. ")}
+        <a href="https://makecode.com/privacy" target="_blank" rel="noopener noreferrer">{lf("View Privacy Statement")}</a>
+    </>
 
     return <div className="profile-user-pane">
         <div className="profile-portrait">
@@ -42,11 +46,11 @@ export const UserPane = (props: UserPaneProps) => {
         { notification && <UserNotification notification={notification}/> }
         <div className="profile-spacer"></div>
         <div className="profile-email">
-            <Checkbox isChecked={emailChecked} onClick={onEmailCheckClick} label={checkboxLabel}/>
-            <div id={checkboxLabel}>
-                {lf("I would like to receive the MakeCode newsletter. ")}
-                <a href="https://makecode.com/privacy" target="_blank" rel="noopener noreferrer">{lf("View Privacy Statement")}</a>
-            </div>
+            <Checkbox id="profile-email-checkbox"
+                className={emailChecked === CheckboxStatus.Waiting ? "loading" : ""}
+                isChecked={emailChecked === CheckboxStatus.Selected}
+                onChange={onEmailCheckClick}
+                label={emailLabel}/>
         </div>
         <div className="profile-actions">
             <a role="button"

package/react-common/components/util.tsx

@@ -1,5 +1,16 @@
 import * as React from "react";
 
+export interface ControlProps {
+    id?: string;
+    className?: string;
+    ariaLabel?: string;
+    ariaHidden?: boolean;
+    role?: string;
+}
+
+export interface ContainerProps extends React.PropsWithChildren<ControlProps> {
+}
+
 export function jsxLF(loc: string, ...rest: JSX.Element[]) {
     const indices: number[] = [];
 
@@ -32,4 +43,28 @@ export function fireClickOnEnter(e: React.KeyboardEvent<HTMLElement>) {
         e.preventDefault();
         e.currentTarget.click();
     }
+}
+
+export function classList(...classes: string[]) {
+    return classes
+        .filter(c => typeof c === "string")
+        .reduce((prev, c) => prev.concat(c.split(" ")), [] as string[])
+        .map(c => c.trim())
+        .filter(c => !!c)
+        .join(" ");
+}
+
+export function nodeListToArray<U extends Node>(list: NodeListOf<U>): U[] {
+    const out: U[] = [];
+
+    for (const node of list) {
+        out.push(node);
+    }
+    return out;
+}
+
+export enum CheckboxStatus {
+    Selected,
+    Unselected,
+    Waiting
 }