@khanacademy/wonder-blocks-timing 2.1.0 → 2.1.2

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap

@@ -1,353 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`wonder-blocks-timing example 1 1`] = `
-<div
-  className=""
-  style={
-    Object {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    style={
-      Object {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <button
-      className=""
-      disabled={false}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onDragStart={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      onMouseUp={[Function]}
-      onTouchCancel={[Function]}
-      onTouchEnd={[Function]}
-      onTouchStart={[Function]}
-      role="button"
-      style={
-        Object {
-          "::MozFocusInner": Object {
-            "border": 0,
-          },
-          ":focus": Object {
-            "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          },
-          "alignItems": "center",
-          "background": "#1865f2",
-          "border": "none",
-          "borderRadius": 4,
-          "boxSizing": "border-box",
-          "color": "#ffffff",
-          "cursor": "pointer",
-          "display": "inline-flex",
-          "height": 40,
-          "justifyContent": "center",
-          "margin": 0,
-          "outline": "none",
-          "paddingBottom": 0,
-          "paddingLeft": 16,
-          "paddingRight": 16,
-          "paddingTop": 0,
-          "position": "relative",
-          "textDecoration": "none",
-          "touchAction": "manipulation",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={0}
-      type="button"
-    >
-      <span
-        className=""
-        style={
-          Object {
-            "MozOsxFontSmoothing": "grayscale",
-            "WebkitFontSmoothing": "antialiased",
-            "alignItems": "center",
-            "display": "inline-block",
-            "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
-            "fontSize": 16,
-            "fontWeight": "bold",
-            "lineHeight": "20px",
-            "overflow": "hidden",
-            "pointerEvents": "none",
-            "textOverflow": "ellipsis",
-            "whiteSpace": "nowrap",
-          }
-        }
-      >
-        Unmount
-      </span>
-    </button>
-    <div
-      className=""
-      style={
-        Object {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      NaughtyComponent here
-    </div>
-  </div>
-  <div
-    className=""
-    style={
-      Object {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      id="uid--0-wb-id"
-      style={
-        Object {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-  </div>
-</div>
-`;
-
-exports[`wonder-blocks-timing example 2 1`] = `
-<div
-  className=""
-  style={
-    Object {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <div
-    className=""
-    style={
-      Object {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <button
-      className=""
-      disabled={false}
-      onBlur={[Function]}
-      onClick={[Function]}
-      onDragStart={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      onMouseUp={[Function]}
-      onTouchCancel={[Function]}
-      onTouchEnd={[Function]}
-      onTouchStart={[Function]}
-      role="button"
-      style={
-        Object {
-          "::MozFocusInner": Object {
-            "border": 0,
-          },
-          ":focus": Object {
-            "WebkitTapHighlightColor": "rgba(0,0,0,0)",
-          },
-          "alignItems": "center",
-          "background": "#1865f2",
-          "border": "none",
-          "borderRadius": 4,
-          "boxSizing": "border-box",
-          "color": "#ffffff",
-          "cursor": "pointer",
-          "display": "inline-flex",
-          "height": 40,
-          "justifyContent": "center",
-          "margin": 0,
-          "outline": "none",
-          "paddingBottom": 0,
-          "paddingLeft": 16,
-          "paddingRight": 16,
-          "paddingTop": 0,
-          "position": "relative",
-          "textDecoration": "none",
-          "touchAction": "manipulation",
-          "userSelect": "none",
-        }
-      }
-      tabIndex={0}
-      type="button"
-    >
-      <span
-        className=""
-        style={
-          Object {
-            "MozOsxFontSmoothing": "grayscale",
-            "WebkitFontSmoothing": "antialiased",
-            "alignItems": "center",
-            "display": "inline-block",
-            "fontFamily": "Lato, \\"Noto Sans\\", sans-serif",
-            "fontSize": 16,
-            "fontWeight": "bold",
-            "lineHeight": "20px",
-            "overflow": "hidden",
-            "pointerEvents": "none",
-            "textOverflow": "ellipsis",
-            "whiteSpace": "nowrap",
-          }
-        }
-      >
-        Unmount
-      </span>
-    </button>
-    <div
-      className=""
-      style={
-        Object {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    >
-      GoodComponent here
-    </div>
-  </div>
-  <div
-    className=""
-    style={
-      Object {
-        "alignItems": "stretch",
-        "borderStyle": "solid",
-        "borderWidth": 0,
-        "boxSizing": "border-box",
-        "display": "flex",
-        "flexDirection": "column",
-        "margin": 0,
-        "minHeight": 0,
-        "minWidth": 0,
-        "padding": 0,
-        "position": "relative",
-        "zIndex": 0,
-      }
-    }
-  >
-    <div
-      className=""
-      id="uid--1-wb-id"
-      style={
-        Object {
-          "alignItems": "stretch",
-          "borderStyle": "solid",
-          "borderWidth": 0,
-          "boxSizing": "border-box",
-          "display": "flex",
-          "flexDirection": "column",
-          "margin": 0,
-          "minHeight": 0,
-          "minWidth": 0,
-          "padding": 0,
-          "position": "relative",
-          "zIndex": 0,
-        }
-      }
-    />
-  </div>
-</div>
-`;

package/src/__tests__/generated-snapshot.test.js

@@ -1,155 +0,0 @@
-// This file is auto-generated by gen-snapshot-tests.js
-// Do not edit this file.  To make changes to these snapshot tests:
-//   1. edit the markdown documentation files in the package,
-//        packages/wonder-blocks-timing
-//   2. Run `yarn run gen-snapshot-tests`.
-import React from "react";
-import renderer from "react-test-renderer";
-
-// Mock react-dom as jest doesn't like findDOMNode.
-jest.mock("react-dom");
-import Button from "@khanacademy/wonder-blocks-button";
-import {IDProvider, View} from "@khanacademy/wonder-blocks-core";
-import {withActionScheduler} from "@khanacademy/wonder-blocks-timing";
-
-describe("wonder-blocks-timing", () => {
-    it("example 1", () => {
-        class Unmounter extends React.Component {
-            constructor() {
-                super();
-                this.state = {
-                    mountKids: true,
-                };
-            }
-
-            maybeRenderKids() {
-                if (this.state.mountKids) {
-                    return (
-                        <React.Fragment>
-                            <Button onClick={() => this.onClick()}>
-                                Unmount
-                            </Button>
-                            {this.props.children}
-                        </React.Fragment>
-                    );
-                } else {
-                    return "Children unmounted";
-                }
-            }
-
-            onClick() {
-                this.setState({
-                    mountKids: false,
-                });
-            }
-
-            render() {
-                return <View>{this.maybeRenderKids()}</View>;
-            }
-        }
-
-        class MyNaughtyComponent extends React.Component {
-            componentDidMount() {
-                const {targetId} = this.props;
-                let counter = 0;
-                const domElement = document.getElementById(targetId);
-                setInterval(() => {
-                    domElement.innerText =
-                        "Naughty interval logged: " + counter++;
-                }, 200);
-            }
-
-            render() {
-                return <View>NaughtyComponent here</View>;
-            }
-        }
-
-        const example = (
-            <IDProvider>
-                {(id) => (
-                    <View>
-                        <Unmounter>
-                            <MyNaughtyComponent targetId={id} />
-                        </Unmounter>
-                        <View>
-                            <View id={id}></View>
-                        </View>
-                    </View>
-                )}
-            </IDProvider>
-        );
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-
-    it("example 2", () => {
-        class Unmounter extends React.Component {
-            constructor() {
-                super();
-                this.state = {
-                    mountKids: true,
-                };
-            }
-
-            maybeRenderKids() {
-                if (this.state.mountKids) {
-                    return (
-                        <React.Fragment>
-                            <Button onClick={() => this.onClick()}>
-                                Unmount
-                            </Button>
-                            {this.props.children}
-                        </React.Fragment>
-                    );
-                } else {
-                    return "Children unmounted";
-                }
-            }
-
-            onClick() {
-                this.setState({
-                    mountKids: false,
-                });
-            }
-
-            render() {
-                return <View>{this.maybeRenderKids()}</View>;
-            }
-        }
-
-        class MyGoodComponent extends React.Component {
-            componentDidMount() {
-                const {targetId, schedule} = this.props;
-                let counter = 0;
-                const domElement = document.getElementById(targetId);
-                schedule.interval(() => {
-                    domElement.innerText =
-                        "Naughty interval logged: " + counter++;
-                }, 200);
-            }
-
-            render() {
-                return <View>GoodComponent here</View>;
-            }
-        }
-
-        const MyGoodComponentWithScheduler =
-            withActionScheduler(MyGoodComponent);
-        const example = (
-            <IDProvider>
-                {(id) => (
-                    <View>
-                        <Unmounter>
-                            <MyGoodComponentWithScheduler targetId={id} />
-                        </Unmounter>
-                        <View>
-                            <View id={id}></View>
-                        </View>
-                    </View>
-                )}
-            </IDProvider>
-        );
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/src/components/with-action-scheduler.md

@@ -1,18 +0,0 @@
-This is a higher order component (HOC) that attaches the given component to an
-[`IScheduleActions`](#ischeduleactions) instance. Any actions scheduled will automatically be
-cleared on unmount. This allows for "set it and forget it" behavior that won't
-leave timers dangling when the component's lifecycle ends.
-
-For more details on using this component and the [`IScheduleActions`](#ischeduleactions) interface,
-see the [API overview](#timing-api-overview).
-
-### Flow Types
-If you are using Flow typing, you can use the `WithActionSchedulerProps` type
-to build the props for the component that you will pass to the `withActionScheduler`
-function by spreading the type into your component's `Props` type.
-
-The added `schedule` prop is of type [`IScheduleActions`](#ischeduleactions). This is what the
-`withActionScheduler` function injects to your component.
-
-The returned value from `withActionScheduler` is a React component with props of
-type `TProps`.

package/src/hooks/use-interval.stories.mdx

@@ -1,80 +0,0 @@
-import {Meta, Story, Source, Canvas} from "@storybook/addon-docs";
-
-import {Body, HeadingSmall} from "@khanacademy/wonder-blocks-typography";
-import {View} from "@khanacademy/wonder-blocks-core";
-import Button from "@khanacademy/wonder-blocks-button";
-
-import {useInterval} from "./use-interval.js";
-
-<Meta
-    title="Timing/useInterval"
-    parameters={{
-        chromatic: {
-            disableSnapshot: true,
-        },
-    }}
-/>
-
-# `useInterval`
-
-`useInterval` is a hook that provides a simple API for using intervals safely.
-It is defined as follows:
-
-```ts
-function useInterval(
-    action: () => mixed,
-    intervalMs: number,
-    active: boolean,
-): void;
-```
-
-Notes:
-
--   Setting `active` to `true` will start the interval and setting it to `false`
-    will stop it
--   Changing the value of `timeoutMs` will reset the interval, changing `action`
-    will not.
-
-export const BasicUsage = () => {
-    const [callCount, setCallCount] = React.useState(0);
-    const [active, setActive] = React.useState(false);
-    const callback = React.useCallback(() => {
-        setCallCount((callCount) => callCount + 1);
-    }, []);
-    useInterval(callback, 1000, active);
-    return (
-        <View>
-            <View>callCount = {callCount}</View>
-            <View>active = {active.toString()}</View>
-            <Button onClick={() => setActive(!active)} style={{width: 200}}>
-                Toggle active
-            </Button>
-        </View>
-    );
-};
-
-<Canvas>
-    <Story name="BasicUsage">
-        <BasicUsage />
-    </Story>
-</Canvas>
-
-```jsx
-export const BasicUsage = () => {
-    const [callCount, setCallCount] = React.useState(0);
-    const [active, setActive] = React.useState(false);
-    const callback = React.useCallback(() => {
-        setCallCount((callCount) => callCount + 1);
-    }, []);
-    useInterval(callback, 1000, active);
-    return (
-        <View>
-            <View>callCount = {callCount}</View>
-            <View>active = {active.toString()}</View>
-            <Button onClick={() => setActive(!active)} style={{width: 200}}>
-                Toggle active
-            </Button>
-        </View>
-    );
-};
-```