@netless/fastboard-react 0.1.0

package/LICENSE.txt

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 netless
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/dist/behaviors/style.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Fastboard.d.ts

@@ -0,0 +1,15 @@
+import type { FastboardApp } from "@netless/fastboard";
+import type { PropsWithChildren } from "react";
+import type { Language, Theme } from "../typings";
+export interface FastboardProps {
+    app?: FastboardApp | null;
+    theme?: Theme;
+    layout?: {
+        Toolbar?: boolean;
+        RedoUndo?: boolean;
+        ZoomControl?: boolean;
+        PageControl?: boolean;
+    };
+    language?: Language;
+}
+export declare function Fastboard({ app, ...restProps }: PropsWithChildren<FastboardProps>): JSX.Element;

package/dist/components/PageControl/PageControl.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CommonProps, GenericIcon } from "../../typings";
+export declare const name = "fastboard-page-control";
+export declare type PageControlProps = CommonProps & GenericIcon<"add" | "prev" | "next">;
+export declare function PageControl({ theme, addIcon, addIconDisable, prevIcon, prevIconDisable, nextIcon, nextIconDisable, }: PageControlProps): JSX.Element;

package/dist/components/PageControl/hooks.d.ts

@@ -0,0 +1,9 @@
+import type { Room } from "white-web-sdk";
+import type { WindowManager } from "@netless/window-manager";
+export declare function usePageControl(room?: Room | null, manager?: WindowManager | null): {
+    pageIndex: number;
+    pageCount: number;
+    prevPage: () => void;
+    nextPage: () => void;
+    addPage: () => Promise<void>;
+};

package/dist/components/PageControl/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { PageControl, type PageControlProps } from "./PageControl";

package/dist/components/PlayerControl/PlayerControl.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import type { Player } from "white-web-sdk";
+import type { CommonProps, GenericIcon } from "../../typings";
+export declare type PlayerControlProps = {
+    autoHide?: boolean;
+    player?: Player;
+} & Omit<CommonProps, "room"> & GenericIcon<"play" | "pause" | "loading">;
+export declare const name = "fastboard-player-control";
+export declare function PlayerControl({ theme, autoHide, player: player_, ...icons }: PlayerControlProps): JSX.Element;

package/dist/components/PlayerControl/hooks.d.ts

@@ -0,0 +1,11 @@
+import type { Player } from "white-web-sdk";
+import { PlayerPhase } from "white-web-sdk";
+export declare function usePlayerControl(player?: Player | null): {
+    phase: PlayerPhase;
+    currentTime: number;
+    totalTime: number;
+    speed: number;
+    setSpeed: (speed: number) => void;
+    togglePlay: () => void;
+    seekToProgressTime: (time: number) => void;
+};

package/dist/components/PlayerControl/icons/Loading.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Loading: (props: IconProps) => JSX.Element;

package/dist/components/PlayerControl/icons/Pause.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Pause: (props: IconProps) => JSX.Element;

package/dist/components/PlayerControl/icons/Play.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Play: (props: IconProps) => JSX.Element;

package/dist/components/PlayerControl/icons/index.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+export declare const Icons: {
+    Play: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Pause: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Loading: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+};

package/dist/components/PlayerControl/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { PlayerControl, type PlayerControlProps } from "./PlayerControl";

package/dist/components/RedoUndo/RedoUndo.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CommonProps, GenericIcon } from "../../typings";
+export declare const name = "fastboard-redo-undo";
+export declare type RedoUndoProps = CommonProps & GenericIcon<"undo" | "redo">;
+export declare function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable }: RedoUndoProps): JSX.Element;

package/dist/components/RedoUndo/hooks.d.ts

@@ -0,0 +1,6 @@
+export declare function useRedoUndo(): {
+    redoSteps: any;
+    undoSteps: any;
+    redo: () => void;
+    undo: () => void;
+};

package/dist/components/RedoUndo/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { RedoUndo, type RedoUndoProps } from "./RedoUndo";

package/dist/components/Toolbar/Content.d.ts

@@ -0,0 +1,2 @@
+import React from "react";
+export declare const Content: React.MemoExoticComponent<() => JSX.Element>;

package/dist/components/Toolbar/Toolbar.d.ts

@@ -0,0 +1,14 @@
+import type { CommonProps, GenericIcon, Theme } from "../../typings";
+import type { ToolbarHook } from "./hooks";
+import React from "react";
+export declare type ToolbarProps = CommonProps & {
+    icons?: GenericIcon<"clicker" | "selector" | "pencil" | "eraser" | "clean" | "expand" | "collapse" | "up" | "down" | "text" | "apps">;
+};
+declare type ToolbarContextType = ToolbarHook & {
+    theme: Theme;
+    icons?: ToolbarProps["icons"];
+};
+export declare const ToolbarContext: React.Context<ToolbarContextType>;
+export declare const name = "fastboard-toolbar";
+export declare const Toolbar: ({ theme, icons }: ToolbarProps) => JSX.Element;
+export {};

package/dist/components/Toolbar/components/ApplianceButtons.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import type { HotKey } from "white-web-sdk";
+export declare function renderToolTip(text: string | undefined, hotkey?: HotKey): string | JSX.Element | undefined;
+export declare function ClickerButton(): JSX.Element;
+export declare function SelectorButton(): JSX.Element;
+export declare function EraserButton(): JSX.Element;
+export declare function CleanButton(): JSX.Element;

package/dist/components/Toolbar/components/AppsButton.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+export interface AppsButtonProps {
+    content?: React.ReactNode;
+    onClick?: () => void;
+}
+export declare function AppsButton({ content, onClick }: AppsButtonProps): JSX.Element;

package/dist/components/Toolbar/components/ColorBox.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function ColorBox(): JSX.Element;

package/dist/components/Toolbar/components/CutLine.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function CutLine(): JSX.Element;

package/dist/components/Toolbar/components/Mask.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+interface MaskProps {
+    toolbar: HTMLDivElement | null;
+    children: React.ReactNode;
+}
+export declare const Mask: React.MemoExoticComponent<({ toolbar, children }: MaskProps) => React.ReactPortal | null>;
+export {};

package/dist/components/Toolbar/components/PencilButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function PencilButton(): JSX.Element;

package/dist/components/Toolbar/components/ShapesButton.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+export declare function ShapesButton(): JSX.Element;
+export declare function ShapesBox(): JSX.Element;

package/dist/components/Toolbar/components/Slider.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function Slider(): JSX.Element;

package/dist/components/Toolbar/components/TextButton.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="react" />
+export declare function TextButton(): JSX.Element;

package/dist/components/Toolbar/components/UpDownButtons.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export interface UpButtonProps {
+    disabled: boolean;
+    scrollTo: (height: number) => void;
+}
+export declare function UpButton({ disabled, scrollTo }: UpButtonProps): JSX.Element;
+export declare function DownButton({ disabled, scrollTo }: UpButtonProps): JSX.Element;

package/dist/components/Toolbar/const.d.ts

@@ -0,0 +1,18 @@
+/// <reference types="react" />
+import { ApplianceNames, ShapeType } from "white-web-sdk";
+export declare const ShapesMap: {
+    readonly rectangle: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
+    readonly ellipse: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
+    readonly straight: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
+    readonly arrow: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
+    readonly pentagram: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
+    readonly rhombus: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
+    readonly triangle: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
+    readonly speechBalloon: import("react").MemoExoticComponent<(props: import("../..").IconProps) => JSX.Element>;
+};
+export declare const ApplianceShapes: readonly [ApplianceNames.rectangle, ApplianceNames.ellipse, ApplianceNames.straight, ApplianceNames.arrow];
+export declare const Shapes: readonly [ShapeType.Pentagram, ShapeType.Rhombus, ShapeType.Triangle, ShapeType.SpeechBalloon];
+export declare const ItemHeight: number;
+export declare const ItemsCount = 8;
+export declare const MaxHeight: number;
+export declare const MinHeight: number;

package/dist/components/Toolbar/hooks.d.ts

@@ -0,0 +1,12 @@
+import type { ApplianceNames, Color, MemberState, ShapeType } from "white-web-sdk";
+export interface ToolbarHook {
+    readonly writable: boolean;
+    readonly memberState: MemberState | undefined;
+    cleanCurrentScene(): void;
+    setAppliance(appliance: ApplianceNames, shape?: ShapeType): void;
+    setStrokeWidth(width: number): void;
+    setStrokeColor(color: Color): void;
+}
+export declare function useRoomState(): any;
+export declare function useToolbar(): ToolbarHook;
+export declare const EmptyToolbarHook: ToolbarHook;

package/dist/components/Toolbar/icons/Apps.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Apps: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Arrow.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Arrow: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Circle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Circle: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Clean.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Clean: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Clicker.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Clicker: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Collapse.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Collapse: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Diamond.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Diamond: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Down.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Down: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Eraser.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Eraser: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Expand.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Expand: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Line.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Line: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Pencil.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Pencil: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Rectangle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Rectangle: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Selector.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Selector: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/SpeechBalloon.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const SpeechBalloon: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Star.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Star: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Text.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Text: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Triangle.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Triangle: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/Up.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../../../typings";
+export declare const Up: (props: IconProps) => JSX.Element;

package/dist/components/Toolbar/icons/index.d.ts

@@ -0,0 +1,22 @@
+/// <reference types="react" />
+export declare const Icons: {
+    Clicker: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Collapse: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Eraser: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Expand: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Pencil: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Selector: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Rectangle: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Text: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Apps: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Clean: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Circle: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Line: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Arrow: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Star: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Diamond: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    SpeechBalloon: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Triangle: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Up: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+    Down: import("react").MemoExoticComponent<(props: import("../../..").IconProps) => JSX.Element>;
+};

package/dist/components/Toolbar/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { Toolbar, type ToolbarProps } from "./Toolbar";

package/dist/components/ZoomControl/ZoomControl.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="react" />
+import type { CommonProps, GenericIcon } from "../../typings";
+export declare const name = "fastboard-zoom-control";
+export declare type ZoomControlProps = CommonProps & GenericIcon<"reset" | "minus" | "plus">;
+export declare function ZoomControl({ theme, resetIcon, resetIconDisable, minusIcon, minusIconDisable, plusIcon, plusIconDisable, }: ZoomControlProps): JSX.Element;

package/dist/components/ZoomControl/hooks.d.ts

@@ -0,0 +1,7 @@
+export declare const ScalePoints: readonly number[];
+export declare function useZoomControl(): {
+    scale: any;
+    resetCamera: () => void;
+    zoomIn: () => void;
+    zoomOut: () => void;
+};

package/dist/components/ZoomControl/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./hooks";
+export { ZoomControl, type ZoomControlProps } from "./ZoomControl";

package/dist/components/hooks.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import type { FastboardReadable } from "@netless/fastboard";
+import type { Theme } from "../typings";
+export declare const FastboardAppContext: import("react").Context<any>;
+export declare const ThemeContext: import("react").Context<Theme>;
+export declare function useTheme(userTheme?: Theme | null): Theme;
+export declare function useFastboardApp(): any;
+export declare function useFastboardValue<T>(val: FastboardReadable<T>): any;
+export declare function useWritable(): any;
+export declare function useBoxState(): any;
+export declare function useFocusedApp(): any;
+export declare function useMaximized(): boolean;
+export declare function useHideControls(): boolean | "toolbar-only";

package/dist/i18n/index.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import type { i18n } from "i18next";
+import type { Language } from "../typings";
+export interface CreateI18nParams {
+    language?: Language;
+}
+export declare const createI18n: ({ language, }?: CreateI18nParams) => Promise<i18n>;
+export declare const I18nContext: import("react").Context<i18n | null>;
+export declare function useTranslation(): {
+    t: import("i18next").TFunction | ((id: string) => string);
+    i18n: i18n | null;
+};

package/dist/icons/ChevronLeft.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../typings";
+export declare function ChevronLeft({ theme, active }: IconProps): JSX.Element;

package/dist/icons/ChevronRight.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../typings";
+export declare function ChevronRight({ theme, active }: IconProps): JSX.Element;

package/dist/icons/FilePlus.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../typings";
+export declare function FilePlus({ theme, active }: IconProps): JSX.Element;

package/dist/icons/Minus.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../typings";
+export declare function Minus({ theme, active }: IconProps): JSX.Element;

package/dist/icons/Plus.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../typings";
+export declare function Plus({ theme, active }: IconProps): JSX.Element;

package/dist/icons/Redo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../typings";
+export declare function Redo({ theme, active }: IconProps): JSX.Element;

package/dist/icons/Reset.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../typings";
+export declare function Reset({ theme, active }: IconProps): JSX.Element;

package/dist/icons/Undo.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { IconProps } from "../typings";
+export declare function Undo({ theme, active }: IconProps): JSX.Element;

package/dist/icons/index.d.ts

@@ -0,0 +1,7 @@
+import React from "react";
+export interface IconPropsWithFallback {
+    fallback: React.ReactElement;
+    src?: string;
+    alt?: string;
+}
+export declare function Icon({ fallback, src, alt }: IconPropsWithFallback): JSX.Element;

package/dist/index.d.ts

@@ -0,0 +1,9 @@
+import "./behaviors/style";
+export * from "./typings";
+export * from "./components/hooks";
+export * from "./components/RedoUndo";
+export * from "./components/ZoomControl";
+export * from "./components/PageControl";
+export * from "./components/Toolbar";
+export * from "./components/PlayerControl";
+export * from "./components/Fastboard";