pxt-core 7.4.11 → 7.4.15

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/Modal.tsx

@@ -0,0 +1,143 @@
+import React = require("react");
+import { classList, ContainerProps } from "../util";
+import { Button } from "./Button";
+
+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();
+    }
+
+    let firstFocusableElement: HTMLElement;
+    let lastFocusableElement: HTMLElement;
+
+    const handleRef = (ref: HTMLDivElement) => {
+        if (!ref) return;
+
+        const focusable = ref.querySelectorAll(`[tabindex]:not([tabindex="-1"])`);
+
+        firstFocusableElement = focusable.item(0) as HTMLElement;
+        lastFocusableElement = focusable.item(focusable.length - 1) as HTMLElement;
+
+        // TODO: Add an error here? this should never happen
+        if (!firstFocusableElement) return;
+
+        if (!ref.contains(document.activeElement)) firstFocusableElement.focus();
+    }
+
+    const onKeyDown = (e: React.KeyboardEvent<HTMLElement>) => {
+        if (e.key !== "Tab") return;
+
+        const target = e.target;
+
+        if (e.shiftKey) {
+            if (target === firstFocusableElement) {
+                lastFocusableElement.focus();
+                e.preventDefault();
+                e.stopPropagation();
+            }
+        }
+        else if (target === lastFocusableElement) {
+            firstFocusableElement.focus();
+            e.preventDefault();
+            e.stopPropagation();
+        }
+    }
+
+    const classes = classList(
+        "common-modal-container",
+        fullscreen && "fullscreen",
+        className
+    );
+
+    return <div className={classes} ref={handleRef} onKeyDown={onKeyDown}>
+        <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>
+    </div>
+}

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

@@ -0,0 +1,33 @@
+import * as React from "react";
+import { fireClickOnEnter } from "../util";
+
+export interface BadgeProps {
+    onClick?: (badge: pxt.auth.Badge) => void;
+    badge: pxt.auth.Badge;
+    disabled?: boolean;
+    isNew?: boolean;
+}
+
+export const Badge = (props: BadgeProps) => {
+    const { badge, disabled, isNew, onClick } = props;
+
+    const onBadgeClick = onClick && (() => {
+        onClick(badge);
+    })
+
+    const image = (disabled && badge.lockedImage) || badge.image;
+    const alt = disabled ? pxt.U.lf("Locked '{0}' badge", badge.title) : badge.title;
+
+    return (
+        <div className={`profile-badge ${onClick ? "clickable" : ""}`}
+            role={onClick ? "button" : undefined}
+            tabIndex={onClick ? 0 : undefined}
+            title={lf("{0} Badge", badge.title)}
+            onClick={onBadgeClick}
+            onKeyDown={fireClickOnEnter}>
+            {isNew && <div className="profile-badge-notification">{pxt.U.lf("New!")}</div>}
+            <img src={image} alt={alt} />
+        </div>
+    );
+}
+

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

@@ -0,0 +1,74 @@
+import * as React from "react";
+import { jsxLF } from "../util";
+import { Badge } from "./Badge";
+
+export interface BadgeInfoProps {
+    badge: pxt.auth.Badge;
+}
+
+export const BadgeInfo = (props: BadgeInfoProps) => {
+    const { badge } = props;
+
+    const date = new Date(badge.timestamp)
+
+    return <div className="profile-badge-info">
+        <div className="profile-badge-info-image">
+            <Badge badge={badge} disabled={!badge.timestamp} />
+        </div>
+        <div className="profile-badge-info-item">
+            <div className="profile-badge-info-header">
+                {lf("Awarded For:")}
+            </div>
+            <div className="profile-badge-info-text">
+                {badgeDescription(badge)}
+            </div>
+        </div>
+        { badge.timestamp ?
+            <div className="profile-badge-info-item">
+                <div className="profile-badge-info-header">
+                    {lf("Awarded On:")}
+                </div>
+                <div className="profile-badge-info-text">
+                    {date.toLocaleDateString(pxt.U.userLanguage())}
+                </div>
+            </div>
+        : undefined }
+    </div>
+}
+
+
+export const badgeDescription = (badge: pxt.auth.Badge) => {
+    switch (badge.type) {
+        case "skillmap-completion":
+            return <span>{jsxLF(
+                lf("Completing {0}"),
+                <a target="_blank" rel="noopener noreferrer" href={sourceURLToSkillmapURL(badge.sourceURL)}>{pxt.U.rlf(badge.title)}</a>
+            )}</span>
+    }
+}
+
+function sourceURLToSkillmapURL(sourceURL: string) {
+    if (sourceURL.indexOf("/api/md/") !== -1) {
+        // docs url: https://www.makecode.com/api/md/arcade/skillmap/forest
+        const path = sourceURL.split("/api/md/")[1];
+        // remove the target from the url
+        const docsPath = path.split("/").slice(1).join("/");
+        return pxt.webConfig?.skillmapUrl + "#docs:" + docsPath;
+    }
+    else {
+        // github url: /user/repo#filename
+        const parts = sourceURL.split("#");
+
+        if (parts.length == 2) {
+            return pxt.webConfig.skillmapUrl + "#github:https://github.com/" + parts[0] + "/" + parts[1];
+        }
+    }
+
+    if (pxt.BrowserUtils.isLocalHostDev()) {
+        // local url: skillmap/forest
+        return "http://localhost:3000#local:" + sourceURL
+    }
+
+    return sourceURL;
+}
+

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

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { Badge } from "./Badge";
+
+export interface BadgeListProps {
+    onBadgeClick: (badge: pxt.auth.Badge) => void;
+    availableBadges: pxt.auth.Badge[];
+    userState: pxt.auth.UserBadgeState;
+}
+
+export const BadgeList = (props: BadgeListProps) => {
+    const { onBadgeClick, availableBadges, userState } = props;
+
+    const badges = availableBadges.slice();
+
+    let unlocked: pxt.Map<boolean> = {};
+
+    for (const badge of userState.badges) {
+        unlocked[badge.id] = true;
+        const existing = badges.findIndex(b => b.id === badge.id);
+        if (existing > -1) {
+            badges[existing] = {
+                ...badges[existing],
+                timestamp: badges[existing].timestamp || badge.timestamp
+            }
+        } else {
+            badges.push(badge);
+        }
+    }
+
+    const bg: JSX.Element[] = []
+    for (let i = 0; i < Math.max(badges.length + 10, 20); i++) {
+        bg.push(<div key={i} className="placeholder-badge" />)
+    }
+
+    return <div className="profile-badge-list">
+        <div className="profile-badge-header">
+            <span className="profile-badge-title">
+                {lf("Badges")}
+            </span>
+
+            <span className="profile-badge-subtitle">
+                {lf("Click each badge to see details")}
+            </span>
+        </div>
+        <div className="profile-badges-scroller">
+            <div className="profile-badges">
+                <div className="profile-badges-background-container">
+                    <div className="profile-badges-background">
+                        { bg }
+                    </div>
+                </div>
+                { badges.map(badge =>
+                    <div className="profile-badge-and-title">
+                        <Badge key={badge.id}
+                            onClick={onBadgeClick}
+                            badge={badge}
+                            disabled={!unlocked[badge.id]}
+                        />
+                        <div className="profile-badge-name">
+                            {badge.title}
+                        </div>
+                    </div>
+                ) }
+            </div>
+        </div>
+    </div>
+}

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

@@ -0,0 +1,42 @@
+/// <reference path="../types.d.ts" />
+
+import * as React from "react";
+import { BadgeList } from "./BadgeList";
+import { UserPane } from "./UserPane";
+import { BadgeInfo } from "./BadgeInfo";
+import { CheckboxStatus } from "../util";
+
+export interface ProfileProps {
+    user: pxt.auth.State;
+    signOut: () => void;
+    deleteProfile: () => void;
+    checkedEmail: CheckboxStatus;
+    onClickedEmail: (isChecked: boolean) => void;
+    notification?: pxt.ProfileNotification;
+    showModalAsync(options: DialogOptions): Promise<void>;
+}
+
+export const Profile = (props: ProfileProps) => {
+    const { user, signOut, deleteProfile, onClickedEmail, notification, checkedEmail, showModalAsync } = props;
+    const userProfile = user?.profile || { idp: {} };
+    const userBadges = user?.preferences?.badges || { badges: [] };
+
+    const onBadgeClick = (badge: pxt.auth.Badge) => {
+        showModalAsync({
+            header: lf("{0} Badge", badge.title),
+            size: "tiny",
+            hasCloseIcon: true,
+            jsx: <BadgeInfo badge={badge} />
+        });
+    }
+
+    return <div className="user-profile">
+        <UserPane profile={userProfile} onSignOutClick={signOut} onDeleteProfileClick={deleteProfile} notification={notification}
+                  emailChecked={checkedEmail} onEmailCheckClick={onClickedEmail}/>
+        <BadgeList
+            availableBadges={pxt.appTarget.defaultBadges || []}
+            userState={userBadges}
+            onBadgeClick={onBadgeClick}
+        />
+    </div>
+}

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

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+export interface UserNotificationProps {
+    notification: pxt.ProfileNotification;
+}
+
+export const UserNotification = (props: UserNotificationProps) => {
+    const { message, icon, actionText, link, xicon, title } = props.notification;
+
+    const onActionClick = () => {
+        window.open(link, "_blank");
+    }
+
+
+    return (
+        <div className="profile-notification">
+            <div className="profile-notification-icon">
+                <i className={`${xicon ? "xicon" : "ui large circular icon "} ${icon}`} />
+            </div>
+            <div className="profile-notification-title">
+                {title}
+            </div>
+            <div className="profile-notification-message">
+                {message}
+            </div>
+            <button className="ui icon button profile-notification-button" onClick={onActionClick} role="link" >
+                <i className="icon external alternate"></i>
+                {actionText}
+            </button>
+        </div>
+    );
+}

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

@@ -0,0 +1,68 @@
+import * as React from "react";
+import { fireClickOnEnter, CheckboxStatus } from "../util";
+import { UserNotification } from "./UserNotification";
+import { Checkbox } from "../controls/Checkbox";
+
+export interface UserPaneProps {
+    profile: pxt.auth.UserProfile;
+    notification?: pxt.ProfileNotification;
+    emailChecked: CheckboxStatus;
+
+    onSignOutClick: () => void;
+    onDeleteProfileClick: () => void;
+    onEmailCheckClick: (isChecked: boolean) => void;
+}
+
+export const UserPane = (props: UserPaneProps) => {
+    const { profile, onSignOutClick, onDeleteProfileClick, onEmailCheckClick, notification, emailChecked } = props;
+
+    const { username, displayName, picture } = profile.idp;
+
+    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">
+            { picture?.dataUrl ?
+                <img src={picture?.dataUrl} alt={pxt.U.lf("Profile Picture")} />
+                : <div className="profile-initials-portrait">
+                    {pxt.auth.userInitials(profile)}
+                </div>
+            }
+        </div>
+        <div className="profile-user-details">
+            <div className="profile-display-name">
+                {displayName}
+            </div>
+            { username &&
+                <div className="profile-username">
+                    {username}
+                </div>
+            }
+        </div>
+        { notification && <UserNotification notification={notification}/> }
+        <div className="profile-spacer"></div>
+        <div className="profile-email">
+            <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"
+                tabIndex={0}
+                onKeyPress={fireClickOnEnter}
+                onClick={onDeleteProfileClick}>
+                {lf("Delete Profile")}
+            </a>
+            <button onClick={onSignOutClick} className="ui icon button sign-out">
+                <i className="icon sign-out"></i>
+                {lf("Sign Out")}
+            </button>
+        </div>
+    </div>
+}

package/react-common/components/types.d.ts

@@ -0,0 +1,29 @@
+/// <reference path="../../built/pxtlib.d.ts" />
+
+
+interface DialogOptions {
+    type?: string;
+    hideCancel?: boolean;
+    disagreeLbl?: string;
+    disagreeClass?: string;
+    disagreeIcon?: string;
+    logos?: string[];
+    className?: string;
+    header: string;
+    headerIcon?: string;
+    body?: string;
+    jsx?: JSX.Element;
+    jsxd?: () => JSX.Element; // dynamic-er version of jsx
+    copyable?: string;
+    size?: "" | "small" | "fullscreen" | "large" | "mini" | "tiny"; // defaults to "small"
+    onLoaded?: (_: HTMLElement) => void;
+    // buttons?: sui.ModalButton[];
+    timeout?: number;
+    modalContext?: string;
+    hasCloseIcon?: boolean;
+    helpUrl?: string;
+    bigHelpButton?: boolean;
+    confirmationText?: string;      // Display a text input the user must type to confirm.
+    confirmationCheckbox?: string;  // Display a checkbox the user must check to confirm.
+    confirmationGranted?: boolean;
+}