@netless/fastboard-react 0.2.13-canary.0 → 0.3.0-canary.2

package/README.md

@@ -0,0 +1,49 @@
+## @netless/fastboard-react
+
+The React wrapper of [@netless/fastboard-ui](https://github.com/netless-io/fastboard/tree/main/packages/fastboard-ui).
+
+## Usage
+
+```js
+import React, { useEffect, useState } from "react";
+import ReactDOM from "react-dom";
+import { createFastboard, Fastboard } from "@netless/fastboard-react";
+
+function App() {
+  const [app, setApp] = useState(null);
+
+  useEffect(() => {
+    let app_instance;
+
+    createFastboard({
+      sdkConfig: {
+        appIdentifier: "whiteboard_app_id",
+      },
+      joinRoom: {
+        uid: "unique_user_id",
+        uuid: "room-uuid",
+        roomToken: "NETLESSROOM_...",
+      },
+      managerConfig: {
+        cursor: true,
+      },
+    }).then(app => {
+      setApp((app_instance = app));
+    });
+
+    return () => {
+      if (app_instance) {
+        app_instance.destroy();
+      }
+    };
+  }, []);
+
+  return <Fastboard app={app} />;
+}
+
+ReactDOM.render(<App />, document.getElementById("app"));
+```
+
+### License
+
+MIT @ [netless](https://github.com/netless-io)

package/dist/index.d.ts

@@ -1,146 +1,17 @@
-import * as React from 'react';
-import React__default, { ForwardedRef } from 'react';
-import { FastboardApp, FastboardReadable, AppsStatus, FastboardPlayer } from '@netless/fastboard-core';
-import { MemberState, ApplianceNames, ShapeType, Color, Player, PlayerPhase } from 'white-web-sdk';
+export * from '@netless/fastboard-core';
+import { RedoUndoProps, ZoomControlProps, PageControlProps, ToolbarProps, FastboardProps, ReplayFastboardProps } from '@netless/fastboard-ui';
+export { FastboardProps, GenericIcon, Language, PageControlProps, RedoUndoProps, ReplayFastboardProps, Theme, ToolbarProps, ZoomControlProps } from '@netless/fastboard-ui';
+import * as react from 'react';
 
-declare type Theme = "light" | "dark";
-declare type Language = "en" | "zh-CN";
-interface IconProps {
-    theme?: Theme;
-    active?: boolean;
-}
-interface CommonProps {
-    theme?: Theme;
-}
-declare type GenericIcon<K extends string, E extends string = "disable"> = Partial<Record<`${K}Icon${Capitalize<E | "">}`, string>>;
+declare const RedoUndo: react.FunctionComponent<RedoUndoProps>;
 
-declare const FastboardAppContext: React.Context<FastboardApp | null>;
-declare const ThemeContext: React.Context<Theme>;
-declare function useTheme(userTheme?: Theme | null): Theme;
-declare function useFastboardApp(): FastboardApp;
-declare function useFastboardValue<T>(val: FastboardReadable<T>): T;
-declare function useWritable(): boolean;
-declare function useBoxState(): "normal" | "minimized" | "maximized" | undefined;
-declare function useFocusedApp(): string | undefined;
-declare function useMaximized(): boolean;
-declare function useHideControls(): boolean | "toolbar-only";
+declare const ZoomControl: react.FunctionComponent<ZoomControlProps>;
 
-declare function useRedoUndo(): {
-    redoSteps: number;
-    undoSteps: number;
-    redo: () => void;
-    undo: () => void;
-};
+declare const PageControl: react.FunctionComponent<PageControlProps>;
 
-declare type RedoUndoProps = CommonProps & GenericIcon<"undo" | "redo">;
-declare function RedoUndo({ theme, undoIcon, undoIconDisable, redoIcon, redoIconDisable }: RedoUndoProps): JSX.Element;
+declare const Toolbar: react.FunctionComponent<ToolbarProps>;
 
-declare const ScalePoints: readonly number[];
-declare function useZoomControl(): {
-    scale: number;
-    resetCamera: () => void;
-    zoomIn: () => void;
-    zoomOut: () => void;
-};
+declare const Fastboard: react.FunctionComponent<FastboardProps>;
+declare const ReplayFastboard: react.FunctionComponent<ReplayFastboardProps>;
 
-declare type ZoomControlProps = CommonProps & GenericIcon<"reset" | "minus" | "plus">;
-declare function ZoomControl({ theme, resetIcon, resetIconDisable, minusIcon, minusIconDisable, plusIcon, plusIconDisable, }: ZoomControlProps): JSX.Element;
-
-declare function usePageControl(): {
-    pageIndex: number;
-    pageCount: number;
-    prevPage: () => Promise<void>;
-    nextPage: () => Promise<void>;
-    addPage: () => Promise<void>;
-};
-
-declare type PageControlProps = CommonProps & GenericIcon<"add" | "prev" | "next">;
-declare function PageControl({ theme, addIcon, addIconDisable, prevIcon, prevIconDisable, nextIcon, nextIconDisable, }: PageControlProps): JSX.Element;
-
-declare const ShapesMap: {
-    readonly rectangle: React.MemoExoticComponent<(props: IconProps) => JSX.Element>;
-    readonly ellipse: React.MemoExoticComponent<(props: IconProps) => JSX.Element>;
-    readonly straight: React.MemoExoticComponent<(props: IconProps) => JSX.Element>;
-    readonly arrow: React.MemoExoticComponent<(props: IconProps) => JSX.Element>;
-    readonly pentagram: React.MemoExoticComponent<(props: IconProps) => JSX.Element>;
-    readonly rhombus: React.MemoExoticComponent<(props: IconProps) => JSX.Element>;
-    readonly triangle: React.MemoExoticComponent<(props: IconProps) => JSX.Element>;
-    readonly speechBalloon: React.MemoExoticComponent<(props: IconProps) => JSX.Element>;
-};
-
-declare type UnifiedShape = keyof typeof ShapesMap;
-interface ToolbarHook {
-    readonly writable: boolean;
-    readonly memberState: MemberState | undefined;
-    readonly lastShape: UnifiedShape;
-    readonly appsStatus: AppsStatus;
-    cleanCurrentScene(): void;
-    setAppliance(appliance: ApplianceNames, shape?: ShapeType): void;
-    setStrokeWidth(width: number): void;
-    setStrokeColor(color: Color): void;
-}
-declare function useRoomState(): MemberState;
-declare function useAppsStatus(): AppsStatus;
-declare function useToolbar(): ToolbarHook;
-declare const EmptyToolbarHook: ToolbarHook;
-
-declare type ToolbarProps = CommonProps & {
-    icons?: GenericIcon<"clicker" | "selector" | "pencil" | "eraser" | "clean" | "expand" | "collapse" | "up" | "down" | "text" | "apps">;
-};
-declare function Toolbar({ theme, icons }: ToolbarProps): JSX.Element;
-
-declare function usePlayerControl(player?: Player | null): {
-    phase: PlayerPhase;
-    currentTime: number;
-    totalTime: number;
-    speed: number;
-    setSpeed: (speed: number) => void;
-    togglePlay: () => void;
-    seekToProgressTime: (time: number) => void;
-};
-
-declare type PlayerControlProps = {
-    autoHide?: boolean;
-    player?: FastboardPlayer;
-} & Omit<CommonProps, "room"> & GenericIcon<"play" | "pause" | "loading">;
-declare function PlayerControl({ theme, autoHide, player: player_, ...icons }: PlayerControlProps): JSX.Element;
-
-interface FastboardProps {
-    app?: FastboardApp | null;
-    theme?: Theme;
-    layout?: {
-        Toolbar?: boolean;
-        RedoUndo?: boolean;
-        ZoomControl?: boolean;
-        PageControl?: boolean;
-    };
-    language?: Language;
-}
-declare type DivProps = React__default.DetailedHTMLProps<React__default.HTMLAttributes<HTMLDivElement>, HTMLDivElement>;
-declare type WithForwardedRef<T = HTMLDivElement> = {
-    forwardedRef: ForwardedRef<T>;
-};
-declare const Fastboard: React__default.ForwardRefExoticComponent<Pick<FastboardProps & React__default.ClassAttributes<HTMLDivElement> & React__default.HTMLAttributes<HTMLDivElement>, keyof React__default.HTMLAttributes<HTMLDivElement> | "key" | keyof FastboardProps> & React__default.RefAttributes<HTMLDivElement>>;
-
-interface ReplayFastboardProps {
-    player?: FastboardPlayer | null;
-    theme?: Theme;
-    autoHideControl?: boolean;
-}
-declare const ReplayFastboard: React__default.ForwardRefExoticComponent<Pick<ReplayFastboardProps & React__default.ClassAttributes<HTMLDivElement> & React__default.HTMLAttributes<HTMLDivElement>, keyof React__default.HTMLAttributes<HTMLDivElement> | "key" | keyof ReplayFastboardProps> & React__default.RefAttributes<HTMLDivElement>>;
-
-declare type MountProps = Omit<FastboardProps & DivProps, "ref">;
-/**
- * Mount fastboard app to some dom, returns the updater and disposer.
- * @example
- * let app = await createFastboard({ ...config })
- * const { update, destroy } = mount(app, document.getElementById("whiteboard"))
- * update({ theme: 'dark' })
- * destroy()
- */
-declare function mount(app: FastboardApp, dom: HTMLElement, props?: MountProps): {
-    update(props?: MountProps): void;
-    destroy(): void;
-};
-
-export { CommonProps, DivProps, EmptyToolbarHook, Fastboard, FastboardAppContext, FastboardProps, GenericIcon, IconProps, Language, MountProps, PageControl, PageControlProps, PlayerControl, PlayerControlProps, RedoUndo, RedoUndoProps, ReplayFastboard, ReplayFastboardProps, ScalePoints, Theme, ThemeContext, Toolbar, ToolbarHook, ToolbarProps, UnifiedShape, WithForwardedRef, ZoomControl, ZoomControlProps, mount, useAppsStatus, useBoxState, useFastboardApp, useFastboardValue, useFocusedApp, useHideControls, useMaximized, usePageControl, usePlayerControl, useRedoUndo, useRoomState, useTheme, useToolbar, useWritable, useZoomControl };
+export { Fastboard, PageControl, RedoUndo, ReplayFastboard, Toolbar, ZoomControl };