@khanacademy/math-input 0.3.2 → 0.5.0

package/src/components/keypad/button.js

@@ -0,0 +1,106 @@
+// @flow
+import Clickable from "@khanacademy/wonder-blocks-clickable";
+import Color from "@khanacademy/wonder-blocks-color";
+import {View} from "@khanacademy/wonder-blocks-core";
+import {StyleSheet} from "aphrodite";
+import * as React from "react";
+
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+import type {Node} from "React";
+
+const styles = StyleSheet.create({
+    base: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        boxShadow: "0px 1px 0px rgba(33, 36, 44, 0.32)",
+        boxSizing: "border-box",
+        background: Color.white,
+        borderRadius: 4,
+        border: `1px solid transparent`,
+        flex: 1,
+        minHeight: 42,
+        minWidth: 42,
+        padding: 1,
+    },
+    hovered: {
+        border: `1px solid ${Color.blue}`,
+        padding: 1,
+        boxShadow: "none",
+    },
+    focused: {
+        border: `2px solid ${Color.blue}`,
+        padding: 0,
+        boxShadow: "none",
+    },
+    pressed: {
+        border: "2px solid #1B50B3",
+        padding: 0,
+        background: `linear-gradient(0deg, rgba(24, 101, 242, 0.32), rgba(24, 101, 242, 0.32)), ${Color.white}`,
+        boxShadow: "none",
+    },
+    outerBoxBase: {
+        padding: 1,
+        height: "100%",
+        width: "100%",
+        boxSizing: "border-box",
+        borderRadius: 7,
+        border: "2px solid transparent",
+    },
+    outerBoxHover: {
+        border: `2px solid ${Color.blue}`,
+    },
+    outerBoxPressed: {
+        border: "2px solid #1B50B3",
+    },
+    clickable: {
+        width: "100%",
+        height: "100%",
+        boxSizing: "border-box",
+    },
+});
+
+type Props = {|
+    onPress: () => void,
+    children: Node,
+    style?: StyleType,
+    tintColor?: string,
+|};
+
+type State = {};
+export default class Button extends React.Component<Props, State> {
+    render(): React.Node {
+        const {onPress, children, style, tintColor} = this.props;
+        return (
+            <View style={style}>
+                <Clickable onClick={onPress} style={styles.clickable}>
+                    {({hovered, focused, pressed}) => {
+                        return (
+                            <View
+                                style={[
+                                    styles.outerBoxBase,
+                                    hovered && styles.outerBoxHover,
+                                    pressed && styles.outerBoxPressed,
+                                ]}
+                            >
+                                <View
+                                    style={[
+                                        styles.base,
+                                        tintColor != null
+                                            ? {background: tintColor}
+                                            : undefined,
+                                        hovered && styles.hovered,
+                                        focused && styles.focused,
+                                        pressed && styles.pressed,
+                                    ]}
+                                >
+                                    {children}
+                                </View>
+                            </View>
+                        );
+                    }}
+                </Clickable>
+            </View>
+        );
+    }
+}

package/src/components/keypad/button.stories.js

@@ -0,0 +1,27 @@
+import {action} from "@storybook/addon-actions";
+import {withKnobs} from "@storybook/addon-knobs";
+import * as React from "react";
+
+import KeypadButton from "./button.js";
+
+export default {
+    title: "Keypad Button",
+    decorators: [withKnobs],
+    parameters: {
+        backgrounds: [
+            {name: "dark background", value: "#DBDCDD", default: true},
+        ],
+    },
+};
+
+export const Button = () => (
+    <div
+        style={{
+            width: 58,
+        }}
+    >
+        <KeypadButton onPress={action("pressed")}>
+            <p>1</p>
+        </KeypadButton>
+    </div>
+);

package/src/components/keypad/index.js

@@ -0,0 +1,64 @@
+//@flow
+import {View} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+
+import Tabbar from "../tabbar/tabbar.js";
+
+import NumericInputPage from "./numeric-input-page.js";
+import PreAlgebraPage from "./pre-algebra-page.js";
+import TrigonometryPage from "./trigonometry-page.js";
+
+import type {TabbarItemType} from "../tabbar/types.js";
+
+type Props = {|
+    onClickKey: (keyConfig: string) => void,
+    preAlgebra: boolean,
+    trigonometry: boolean,
+|};
+type State = {
+    selectedPage: TabbarItemType,
+};
+
+function allPages(props: Props): Array<TabbarItemType> {
+    const pages: Array<TabbarItemType> = ["Numbers"];
+
+    if (props.preAlgebra) {
+        pages.push("Operators");
+    }
+    if (props.trigonometry) {
+        pages.push("Geometry");
+    }
+    return pages;
+}
+
+export default class PreAlgebraKeypad extends React.Component<Props, State> {
+    state: State = {
+        selectedPage: "Numbers",
+    };
+    render(): React.Node {
+        const {selectedPage} = this.state;
+        const {onClickKey} = this.props;
+
+        const availablePages = allPages(this.props);
+
+        return (
+            <View>
+                <Tabbar
+                    items={availablePages}
+                    onSelect={(tabbarItem: TabbarItemType) => {
+                        this.setState({selectedPage: tabbarItem});
+                    }}
+                />
+                {selectedPage === "Numbers" && (
+                    <NumericInputPage onClickKey={onClickKey} />
+                )}
+                {selectedPage === "Operators" && (
+                    <PreAlgebraPage onClickKey={onClickKey} />
+                )}
+                {selectedPage === "Geometry" && (
+                    <TrigonometryPage onClickKey={onClickKey} />
+                )}
+            </View>
+        );
+    }
+}

package/src/components/keypad/keypad-page-items.js

@@ -0,0 +1,106 @@
+// @flow
+import {View} from "@khanacademy/wonder-blocks-core";
+import * as React from "react";
+
+import ButtonAsset from "./button-assets.js";
+import Button from "./button.js";
+
+import type {KeyConfig} from "../../data/key-configs.js";
+import type {StyleType} from "@khanacademy/wonder-blocks-core";
+import type {Node} from "React";
+
+export const KeypadPageContainer = ({
+    children,
+}: {
+    children: Node,
+}): React.Node => (
+    <View
+        style={{
+            backgroundColor: "#DBDCDD",
+            width: "100%",
+            height: 192,
+
+            display: "grid",
+            gridTemplateColumns: "repeat(6, 1fr)",
+            gridTemplateRows: "repeat(4, 1fr)",
+        }}
+    >
+        {children}
+    </View>
+);
+
+export const KeypadButton = ({
+    keyConfig,
+    onClickKey,
+    tintColor,
+    style,
+}: {
+    keyConfig: KeyConfig,
+    tintColor?: string,
+    style?: StyleType,
+    onClickKey: (keyConfig: string) => void,
+}): React.Node => (
+    <Button
+        onPress={() => onClickKey(keyConfig.id)}
+        tintColor={tintColor}
+        style={style}
+    >
+        <ButtonAsset id={keyConfig.id} />
+    </Button>
+);
+
+export const SecondaryKeypadButton = ({
+    keyConfig,
+    onClickKey,
+    style,
+}: {
+    keyConfig: KeyConfig,
+    style?: any,
+    onClickKey: (keyConfig: string) => void,
+}): React.Node => (
+    <KeypadButton
+        keyConfig={keyConfig}
+        onClickKey={onClickKey}
+        style={style}
+        tintColor={"#F6F6F7"}
+    />
+);
+
+export const KeypadActionButton = ({
+    keyConfig,
+    onClickKey,
+    style,
+}: {
+    keyConfig: KeyConfig,
+    style?: any,
+    onClickKey: (keyConfig: string) => void,
+}): React.Node => (
+    <KeypadButton
+        keyConfig={keyConfig}
+        onClickKey={onClickKey}
+        style={style}
+        tintColor={"#DBDCDD"}
+    />
+);
+
+export const PlaceHolderButton = (): React.Node => (
+    <View
+        style={{
+            height: "100%",
+            width: "100%",
+            boxSizing: "border-box",
+            borderRadius: 7,
+            border: "4px solid transparent",
+        }}
+    >
+        <View
+            style={{
+                background: "rgba(33, 36, 44, 0.04)",
+                width: "100%",
+                height: "100%",
+                borderRadius: 4,
+                border: `1px solid transparent`,
+            }}
+        />
+    </View>
+);

package/src/components/keypad/keypad-pages.stories.js

@@ -0,0 +1,32 @@
+//@flow
+
+import {action} from "@storybook/addon-actions";
+import {withKnobs} from "@storybook/addon-knobs";
+import * as React from "react";
+
+import NumericInputPage from "./numeric-input-page.js";
+import PrealgebraInputPage from "./pre-algebra-page.js";
+import TrigonometryInputPage from "./trigonometry-page.js";
+
+export default {
+    title: "Keypad pages",
+    decorators: [withKnobs],
+    parameters: {
+        backgrounds: [
+            {name: "light background", value: "white", default: true},
+        ],
+        viewport: {defaultViewport: "iphone6"},
+    },
+};
+
+export const NumericInput = (): React.Node => (
+    <NumericInputPage onClickKey={action("onClickKey")} />
+);
+
+export const PreAlgebraInput = (): React.Node => (
+    <PrealgebraInputPage onClickKey={action("onClickKey")} />
+);
+
+export const TrigonometryInput = (): React.Node => (
+    <TrigonometryInputPage onClickKey={action("onClickKey")} />
+);

package/src/components/keypad/keypad.stories.js

@@ -0,0 +1,35 @@
+//@flow
+
+import {action} from "@storybook/addon-actions";
+import {withKnobs} from "@storybook/addon-knobs";
+import {INITIAL_VIEWPORTS} from "@storybook/addon-viewport";
+import * as React from "react";
+
+import Keypad from "./index.js";
+
+export default {
+    title: "Full Keypad",
+    decorators: [withKnobs],
+    parameters: {
+        backgrounds: [
+            {name: "light background", value: "white", default: true},
+        ],
+        viewport: {defaultViewport: "iphone6", viewports: INITIAL_VIEWPORTS},
+    },
+};
+
+export const PreAlgebra = (): React.Node => (
+    <Keypad
+        onClickKey={action("onClickKey")}
+        preAlgebra={true}
+        trigonometry={false}
+    />
+);
+
+export const Trigonometry = (): React.Node => (
+    <Keypad
+        onClickKey={action("onClickKey")}
+        preAlgebra={true}
+        trigonometry={true}
+    />
+);

package/src/components/keypad/numeric-input-page.js

@@ -0,0 +1,100 @@
+// @flow
+import * as React from "react";
+
+import Keys from "../../data/key-configs.js";
+
+import {
+    KeypadPageContainer,
+    KeypadButton,
+    SecondaryKeypadButton,
+    KeypadActionButton,
+} from "./keypad-page-items.js";
+
+type Props = {|
+    onClickKey: (keyConfig: string) => void,
+|};
+
+export default class NumericInputPage extends React.Component<Props> {
+    render(): React.Node {
+        const {onClickKey} = this.props;
+        return (
+            <KeypadPageContainer>
+                {/* Row 1 */}
+                <KeypadButton keyConfig={Keys.NUM_7} onClickKey={onClickKey} />
+                <KeypadButton keyConfig={Keys.NUM_8} onClickKey={onClickKey} />
+                <KeypadButton keyConfig={Keys.NUM_9} onClickKey={onClickKey} />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.TIMES}
+                    onClickKey={onClickKey}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.LEFT_PAREN}
+                    onClickKey={onClickKey}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.RIGHT_PAREN}
+                    onClickKey={onClickKey}
+                />
+
+                {/* Row 2 */}
+                <KeypadButton keyConfig={Keys.NUM_4} onClickKey={onClickKey} />
+                <KeypadButton keyConfig={Keys.NUM_5} onClickKey={onClickKey} />
+                <KeypadButton keyConfig={Keys.NUM_6} onClickKey={onClickKey} />
+
+                <SecondaryKeypadButton
+                    keyConfig={Keys.MINUS}
+                    onClickKey={onClickKey}
+                />
+
+                <SecondaryKeypadButton
+                    keyConfig={Keys.FRAC_INCLUSIVE}
+                    onClickKey={onClickKey}
+                    style={{
+                        gridColumn: "5 / 7",
+                    }}
+                />
+                {/* Row 3 */}
+                <KeypadButton keyConfig={Keys.NUM_1} onClickKey={onClickKey} />
+                <KeypadButton keyConfig={Keys.NUM_2} onClickKey={onClickKey} />
+                <KeypadButton keyConfig={Keys.NUM_3} onClickKey={onClickKey} />
+
+                <SecondaryKeypadButton
+                    keyConfig={Keys.PLUS}
+                    style={{
+                        gridColumn: "4",
+                        gridRowStart: "3",
+                        gridRowEnd: "5",
+                    }}
+                    onClickKey={onClickKey}
+                />
+
+                <KeypadActionButton
+                    keyConfig={Keys.BACKSPACE}
+                    style={{
+                        gridColumn: "6",
+                    }}
+                    onClickKey={onClickKey}
+                />
+
+                {/* Row 4 */}
+                <KeypadButton keyConfig={Keys.NUM_0} onClickKey={onClickKey} />
+                <KeypadButton
+                    keyConfig={Keys.DECIMAL}
+                    onClickKey={onClickKey}
+                />
+                <KeypadButton
+                    keyConfig={Keys.NEGATIVE}
+                    onClickKey={onClickKey}
+                />
+
+                <KeypadActionButton
+                    keyConfig={Keys.DISMISS}
+                    style={{
+                        gridColumn: "6",
+                    }}
+                    onClickKey={onClickKey}
+                />
+            </KeypadPageContainer>
+        );
+    }
+}

package/src/components/keypad/pre-algebra-page.js

@@ -0,0 +1,98 @@
+// @flow
+import * as React from "react";
+
+import Keys from "../../data/key-configs.js";
+
+import {
+    KeypadPageContainer,
+    SecondaryKeypadButton,
+    KeypadActionButton,
+    PlaceHolderButton,
+} from "./keypad-page-items.js";
+
+type Props = {|
+    onClickKey: (keyConfig: string) => void,
+|};
+
+export default class NumericInputPage extends React.Component<Props> {
+    render(): React.Node {
+        const {onClickKey} = this.props;
+        return (
+            <KeypadPageContainer>
+                {/* Row 1 */}
+                <SecondaryKeypadButton
+                    keyConfig={Keys.EXP_2}
+                    onClickKey={onClickKey}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.EXP}
+                    onClickKey={onClickKey}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.SQRT}
+                    onClickKey={onClickKey}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.RADICAL}
+                    onClickKey={onClickKey}
+                />
+
+                <SecondaryKeypadButton
+                    keyConfig={Keys.LEFT_PAREN}
+                    onClickKey={onClickKey}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.RIGHT_PAREN}
+                    onClickKey={onClickKey}
+                />
+                {/* Row 2 */}
+                <PlaceHolderButton />
+                <PlaceHolderButton />
+                <PlaceHolderButton />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.X}
+                    onClickKey={onClickKey}
+                    style={{
+                        gridColumn: 5,
+                    }}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.FRAC_INCLUSIVE}
+                    onClickKey={onClickKey}
+                    style={{
+                        gridColumn: 6,
+                    }}
+                />
+                {/* Row 3 */}
+                <PlaceHolderButton />
+                <PlaceHolderButton />
+                <PlaceHolderButton />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.PI}
+                    onClickKey={onClickKey}
+                    style={{
+                        gridColumn: 5,
+                    }}
+                />
+                <KeypadActionButton
+                    keyConfig={Keys.BACKSPACE}
+                    style={{
+                        gridColumn: 6,
+                    }}
+                    onClickKey={onClickKey}
+                />
+                {/* Row 4 */}
+                <PlaceHolderButton />
+                <PlaceHolderButton />
+                <PlaceHolderButton />
+                <KeypadActionButton
+                    keyConfig={Keys.DISMISS}
+                    style={{
+                        gridColumn: "6",
+                    }}
+                    onClickKey={onClickKey}
+                />
+            </KeypadPageContainer>
+        );
+    }
+}

package/src/components/keypad/trigonometry-page.js

@@ -0,0 +1,90 @@
+// @flow
+import * as React from "react";
+
+import Keys from "../../data/key-configs.js";
+
+import {
+    KeypadPageContainer,
+    SecondaryKeypadButton,
+    KeypadActionButton,
+} from "./keypad-page-items.js";
+
+type Props = {|
+    onClickKey: (keyConfig: string) => void,
+|};
+
+export default class TrigonometryInputPage extends React.Component<Props> {
+    render(): React.Node {
+        const {onClickKey} = this.props;
+        return (
+            <KeypadPageContainer>
+                {/* Row 1 */}
+                <SecondaryKeypadButton
+                    keyConfig={Keys.SIN}
+                    onClickKey={onClickKey}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.COS}
+                    onClickKey={onClickKey}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.TAN}
+                    onClickKey={onClickKey}
+                />
+
+                <SecondaryKeypadButton
+                    keyConfig={Keys.LEFT_PAREN}
+                    onClickKey={onClickKey}
+                    style={{
+                        gridColumn: 5,
+                    }}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.RIGHT_PAREN}
+                    onClickKey={onClickKey}
+                    style={{
+                        gridColumn: 6,
+                    }}
+                />
+                {/* Row 2 */}
+                <SecondaryKeypadButton
+                    keyConfig={Keys.X}
+                    onClickKey={onClickKey}
+                    style={{
+                        gridColumn: 5,
+                    }}
+                />
+                <SecondaryKeypadButton
+                    keyConfig={Keys.FRAC_INCLUSIVE}
+                    onClickKey={onClickKey}
+                    style={{
+                        gridColumn: 6,
+                    }}
+                />
+                {/* Row 3 */}
+                <SecondaryKeypadButton
+                    keyConfig={Keys.PI}
+                    onClickKey={onClickKey}
+                    style={{
+                        gridColumn: 5,
+                    }}
+                />
+                <KeypadActionButton
+                    keyConfig={Keys.BACKSPACE}
+                    style={{
+                        gridColumn: "6",
+                    }}
+                    onClickKey={onClickKey}
+                />
+                {/* Row 4 */}
+                <KeypadActionButton
+                    keyConfig={Keys.DISMISS}
+                    style={{
+                        gridColumn: "6",
+                    }}
+                    onClickKey={onClickKey}
+                />
+            </KeypadPageContainer>
+        );
+    }
+}