@khanacademy/wonder-blocks-timing 2.1.0 → 2.1.2

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

@@ -1,147 +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 {ClearPolicy, SchedulePolicy} from "../util/policies.js";
-import {useScheduledInterval} from "./use-scheduled-interval.js";
-
-<Meta
-    title="Timing/useScheduledInterval"
-    parameters={{
-        chromatic: {
-            disableSnapshot: true,
-        },
-    }}
-/>
-
-# `useScheduledInterval`
-
-`useScheduledInterval` is a hook that provides a convenient API for setting and clearing
-an interval. It is defined as follows:
-
-```ts
-function useScheduledInterval(
-    action: () => mixed,
-    timeoutMs: number,
-    options?: {|
-        schedulePolicy?: "schedule-immediately" | "schedule-on-demand",
-        clearPolicy?: "resolve-on-clear" | "cancel-on-clear",
-    |},
-): ITimeout;
-
-interface ITimeout {
-    get isSet(): boolean;
-    set(): void;
-    clear(policy?: ClearPolicy): void;
-}
-```
-
-By default the interval will be set immediately up creation. The `options` parameter can
-be used to control when when the interval is schedule and whether or not `action` should be
-called when the interval is cleared.
-
-Notes:
-
--   Because `clear` takes a param, it's import that you don't pass it directly to an event handler,
-    e.g. `<Button onClick={clear} />` will not work as expected.
--   Calling `set` after the interval has been cleared will restart the interval.
--   Updating the second paramter, `timeoutMs`, will also restart the interval.
--   When the component using this hooks is unmounted, the interval will automatically be cleared.
--   Calling `set` after the interval is already set does nothing.
-
-export const Immediately = () => {
-    const [callCount, setCallCount] = React.useState(0);
-    const callback = React.useCallback(() => {
-        setCallCount((callCount) => callCount + 1);
-    }, []);
-    const interval = useScheduledInterval(callback, 1000);
-    return (
-        <View>
-            <View>isSet = {interval.isSet.toString()}</View>
-            <View>callCount = {callCount}</View>
-            <View style={{flexDirection: "row"}}>
-                <Button onClick={() => interval.set()}>Set interval</Button>
-                <Button onClick={() => interval.clear()}>Clear interval</Button>
-            </View>
-        </View>
-    );
-};
-
-<Canvas>
-    <Story name="Immediately">
-        <Immediately />
-    </Story>
-</Canvas>
-
-```jsx
-const Immediately = () => {
-    const [callCount, setCallCount] = React.useState(0);
-    const callback = React.useCallback(() => {
-        setCallCount((callCount) => callCount + 1);
-    }, []);
-    const interval = useScheduledInterval(callback, 1000);
-    return (
-        <View>
-            <View>isSet = {interval.isSet.toString()}</View>
-            <View>callCount = {callCount}</View>
-            <View style={{flexDirection: "row"}}>
-                <Button onClick={() => interval.set()}>Set interval</Button>
-                <Button onClick={() => interval.clear()}>Clear interval</Button>
-            </View>
-        </View>
-    );
-};
-```
-
-export const OnDemandAndResolveOnClear = () => {
-    const [callCount, setCallCount] = React.useState(0);
-    const callback = React.useCallback(() => {
-        console.log("action called");
-        setCallCount((callCount) => callCount + 1);
-    }, []);
-    const interval = useScheduledInterval(callback, 1000, {
-        clearPolicy: ClearPolicy.Resolve,
-        schedulePolicy: SchedulePolicy.OnDemand,
-    });
-    return (
-        <View>
-            <View>isSet = {interval.isSet.toString()}</View>
-            <View>callCount = {callCount}</View>
-            <View style={{flexDirection: "row"}}>
-                <Button onClick={() => interval.set()}>Set interval</Button>
-                <Button onClick={() => interval.clear()}>Clear interval</Button>
-            </View>
-        </View>
-    );
-};
-
-<Canvas>
-    <Story name="OnDemandAndResolveOnClear">
-        <OnDemandAndResolveOnClear />
-    </Story>
-</Canvas>
-
-```jsx
-const OnDemandAndResolveOnClear = () => {
-    const [callCount, setCallCount] = React.useState(0);
-    const callback = React.useCallback(() => {
-        setCallCount((callCount) => callCount + 1);
-    }, []);
-    const interval = useScheduledInterval(callback, 1000, {
-        clearPolicy: ClearPolicy.Resolve,
-        schedulePolicy: SchedulePolicy.OnDemand,
-    });
-    return (
-        <View>
-            <View>isSet = {interval.isSet.toString()}</View>
-            <View>callCount = {callCount}</View>
-            <View style={{flexDirection: "row"}}>
-                <Button onClick={() => interval.set()}>Set interval</Button>
-                <Button onClick={() => interval.clear()}>Clear interval</Button>
-            </View>
-        </View>
-    );
-};
-```

package/src/hooks/use-scheduled-timeout.stories.mdx

@@ -1,148 +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 {ClearPolicy, SchedulePolicy} from "../util/policies.js";
-import {useScheduledTimeout} from "./use-scheduled-timeout.js";
-
-<Meta
-    title="Timing/useScheduledTimeout"
-    parameters={{
-        chromatic: {
-            disableSnapshot: true,
-        },
-    }}
-/>
-
-# `useScheduledTimeout`
-
-`useScheduledTimeout` is a hook that provides a convenient API for setting and clearing
-a timeout. It is defined as follows:
-
-```ts
-function useScheduledTimeout(
-    action: () => mixed,
-    timeoutMs: number,
-    options?: {|
-        schedulePolicy?: "schedule-immediately" | "schedule-on-demand",
-        clearPolicy?: "resolve-on-clear" | "cancel-on-clear",
-    |},
-): ITimeout;
-
-interface ITimeout {
-    get isSet(): boolean;
-    set(): void;
-    clear(policy?: ClearPolicy): void;
-}
-```
-
-By default the timeout will be set immediately up creation. The `options` parameter can
-be used to control when when the timeout is schedule and whether or not `action` should be
-called when the timeout is cleared.
-
-Notes:
-
--   Because `clear` takes a param, it's import that you don't pass it directly to an event handler,
-    e.g. `<Button onClick={clear} />` will not work as expected.
--   Calling `set` after the timeout has expired will restart the timeout.
--   Updating the second paramter, `timeoutMs`, will also restart the timeout.
--   When the component using this hooks is unmounted, the timeout will automatically be cleared.
--   Calling `set` after the timeout is set but before it expires means that the timeout will be
-    reset and will call `action`, `timeoutMs` after the most recent call to `set` was made.
-
-export const Immediately = () => {
-    const [callCount, setCallCount] = React.useState(0);
-    const callback = React.useCallback(() => {
-        setCallCount((callCount) => callCount + 1);
-    }, []);
-    const {isSet, set, clear} = useScheduledTimeout(callback, 1000);
-    return (
-        <View>
-            <View>isSet = {isSet.toString()}</View>
-            <View>callCount = {callCount}</View>
-            <View style={{flexDirection: "row"}}>
-                <Button onClick={set}>Set timeout</Button>
-                <Button onClick={clear}>Clear timeout</Button>
-            </View>
-        </View>
-    );
-};
-
-<Canvas>
-    <Story name="Immediately">
-        <Immediately />
-    </Story>
-</Canvas>
-
-```jsx
-const Immediately = () => {
-    const [callCount, setCallCount] = React.useState(0);
-    const callback = React.useCallback(() => {
-        setCallCount((callCount) => callCount + 1);
-    }, []);
-    const {isSet, set, clear} = useScheduledTimeout(callback, 1000);
-    return (
-        <View>
-            <View>isSet = {isSet.toString()}</View>
-            <View>callCount = {callCount}</View>
-            <View style={{flexDirection: "row"}}>
-                <Button onClick={() => set()}>Set timeout</Button>
-                <Button onClick={() => clear()}>Clear timeout</Button>
-            </View>
-        </View>
-    );
-};
-```
-
-export const OnDemandAndResolveOnClear = () => {
-    const [callCount, setCallCount] = React.useState(0);
-    const callback = React.useCallback(() => {
-        console.log("action called");
-        setCallCount((callCount) => callCount + 1);
-    }, []);
-    const {isSet, set, clear} = useScheduledTimeout(callback, 1000, {
-        clearPolicy: ClearPolicy.Resolve,
-        schedulePolicy: SchedulePolicy.OnDemand,
-    });
-    return (
-        <View>
-            <View>isSet = {isSet.toString()}</View>
-            <View>callCount = {callCount}</View>
-            <View style={{flexDirection: "row"}}>
-                <Button onClick={() => set()}>Set timeout</Button>
-                <Button onClick={() => clear()}>Clear timeout</Button>
-            </View>
-        </View>
-    );
-};
-
-<Canvas>
-    <Story name="OnDemandAndResolveOnClear">
-        <OnDemandAndResolveOnClear />
-    </Story>
-</Canvas>
-
-```jsx
-const OnDemandAndResolveOnClear = () => {
-    const [callCount, setCallCount] = React.useState(0);
-    const callback = React.useCallback(() => {
-        setCallCount((callCount) => callCount + 1);
-    }, []);
-    const {isSet, set, clear} = useScheduledTimeout(callback, 1000, {
-        clearPolicy: ClearPolicy.Resolve,
-        schedulePolicy: SchedulePolicy.OnDemand,
-    });
-    return (
-        <View>
-            <View>isSet = {isSet.toString()}</View>
-            <View>callCount = {callCount}</View>
-            <View style={{flexDirection: "row"}}>
-                <Button onClick={() => set()}>Set timeout</Button>
-                <Button onClick={() => clear()}>Clear timeout</Button>
-            </View>
-        </View>
-    );
-};
-```

package/src/hooks/use-timeout.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 {useTimeout} from "./use-timeout.js";
-
-<Meta
-    title="Timing/useTimeout"
-    parameters={{
-        chromatic: {
-            disableSnapshot: true,
-        },
-    }}
-/>
-
-# `useTimeout`
-
-`useTimeout` is a hook that provides a simple API for using timers safely.
-It is defined as follows:
-
-```ts
-function useTimeout(
-    action: () => mixed,
-    timeoutMs: number,
-    active: boolean,
-): void;
-```
-
-Notes:
-
--   Setting `active` to `true` will start the timeout and setting it to `false`
-    will stop it
--   Changing the value of `timeoutMs` will reset the timeout, 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);
-    }, []);
-    useTimeout(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);
-    }, []);
-    useTimeout(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>
-    );
-};
-```