@blocklet/discuss-kit-ux-lite 2.6.0

package/dist/components/editor/editor.d.ts

@@ -0,0 +1,17 @@
+/// <reference types="react" />
+import type { BlockletEditorProps } from '@blocklet/editor';
+import type { EditorState, LexicalEditor } from 'lexical';
+export type OnChangeHandler = ({ content, editorState, editor, isEmpty, }: {
+    content: string;
+    editorState: EditorState;
+    editor: LexicalEditor;
+    isEmpty: boolean;
+}) => void;
+export interface EditorProps extends Omit<BlockletEditorProps, 'onChange' | 'ref'> {
+    initialContent?: string;
+    onChange?: OnChangeHandler;
+    children?: React.ReactNode;
+    onSave?: () => void;
+    ignoreInitialChange?: boolean;
+}
+export default function Editor({ initialContent, onChange, children, onSave, ignoreInitialChange, ...rest }: EditorProps): import("react").JSX.Element;

package/dist/components/editor/editor.mjs

@@ -0,0 +1,35 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Box, styled } from "@mui/material";
+import { OnContentChangePlugin } from "@blocklet/editor/lib/ext/OnContentChangePlugin";
+import { CtrlsShortcutPlugin } from "@blocklet/editor/lib/ext/ShortcutPlugin";
+import { isEmptyContent, stringify } from "../lexical.mjs";
+import { BlockletEditor } from "./blocklet-editor.mjs";
+const Root = styled(Box)`
+  .be-editable,
+  .be-content {
+    min-height: 150px;
+  }
+`;
+export default function Editor({
+  initialContent,
+  onChange,
+  children,
+  onSave,
+  ignoreInitialChange = true,
+  ...rest
+}) {
+  const handleChange = async (editorState, editor) => {
+    const isEmpty = await isEmptyContent(editorState);
+    onChange?.({
+      content: isEmpty ? "" : stringify(editorState),
+      editorState,
+      editor,
+      isEmpty
+    });
+  };
+  return /* @__PURE__ */ jsx(Root, { children: /* @__PURE__ */ jsxs(BlockletEditor, { editorState: initialContent, ...rest, children: [
+    /* @__PURE__ */ jsx(OnContentChangePlugin, { onChange: handleChange, ignoreInitialChange }),
+    onSave && /* @__PURE__ */ jsx(CtrlsShortcutPlugin, { callback: onSave }),
+    children
+  ] }) });
+}

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

@@ -0,0 +1,4 @@
+export { LazyEditor } from './lazy-editor';
+export type { OnChangeHandler, EditorProps } from './editor';
+export { BlockletEditor, useBlockletEditorLoaded } from './blocklet-editor';
+export { BlockletEditorViewer, useBlockletEditorViewerLoaded } from './viewer';

package/dist/components/editor/index.mjs

@@ -0,0 +1,3 @@
+export { LazyEditor } from "./lazy-editor.mjs";
+export { BlockletEditor, useBlockletEditorLoaded } from "./blocklet-editor.mjs";
+export { BlockletEditorViewer, useBlockletEditorViewerLoaded } from "./viewer.mjs";

package/dist/components/editor/lazy-editor.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import type { EditorProps } from './editor';
+export declare function LazyEditor(props: EditorProps): import("react").JSX.Element;

package/dist/components/editor/lazy-editor.mjs

@@ -0,0 +1,14 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { lazyRetry as lazy } from "@arcblock/ux/lib/Util";
+import { Box, Skeleton } from "@mui/material";
+const Editor = lazy(() => import("./editor.mjs"));
+export function LazyEditor(props) {
+  const fallback = /* @__PURE__ */ jsxs(Box, { sx: { px: 3 }, children: [
+    /* @__PURE__ */ jsx(Skeleton, {}),
+    /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
+    /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
+    /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
+  ] });
+  return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(Editor, { ...props }) });
+}

package/dist/components/editor/viewer.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+import { useBlockletEditorViewerLoaded, EditorViewerProps } from '@blocklet/editor/lib/blocklet-editor-viewer';
+export interface EditorProps extends Omit<EditorViewerProps, 'editorState'> {
+    content: string;
+}
+export declare function BlockletEditorViewer({ content, prepend, ...rest }: EditorProps): import("react").JSX.Element;
+export declare namespace BlockletEditorViewer {
+    var fallback: import("react").JSX.Element;
+}
+export { useBlockletEditorViewerLoaded };

package/dist/components/editor/viewer.mjs

@@ -0,0 +1,18 @@
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Suspense } from "react";
+import { Skeleton } from "@mui/material";
+import {
+  BlockletEditorViewer as InternalBlockletEditorViewer,
+  useBlockletEditorViewerLoaded
+} from "@blocklet/editor/lib/blocklet-editor-viewer";
+const fallback = /* @__PURE__ */ jsxs(Fragment, { children: [
+  /* @__PURE__ */ jsx(Skeleton, {}),
+  /* @__PURE__ */ jsx(Skeleton, { width: "80%" }),
+  /* @__PURE__ */ jsx(Skeleton, { width: "60%" }),
+  /* @__PURE__ */ jsx(Skeleton, { width: "40%" })
+] });
+export function BlockletEditorViewer({ content, prepend, ...rest }) {
+  return /* @__PURE__ */ jsx(Suspense, { fallback, children: /* @__PURE__ */ jsx(InternalBlockletEditorViewer, { editorState: content, prepend, ...rest }) });
+}
+BlockletEditorViewer.fallback = fallback;
+export { useBlockletEditorViewerLoaded };

package/dist/components/emoji-icon.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { BoxProps } from '@mui/material/Box';
+interface InternalIconProps extends BoxProps {
+    title: string;
+    icon?: string;
+}
+interface IconProps extends InternalIconProps {
+    size?: 'small' | 'large';
+}
+declare function EmojiIcon({ title, icon, size, ...rest }: IconProps): import("react").JSX.Element;
+export default EmojiIcon;

package/dist/components/emoji-icon.mjs

@@ -0,0 +1,62 @@
+import { jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+const stringToColor = (str) => {
+  let hash = 0;
+  let i;
+  for (i = 0; i < str.length; i += 1) {
+    hash = str.charCodeAt(i) + ((hash << 5) - hash);
+  }
+  let color = "#";
+  for (i = 0; i < 3; i += 1) {
+    const value = hash >> i * 8 & 255;
+    color += `00${value.toString(16)}`.slice(-2);
+  }
+  return color;
+};
+function InternalIcon({ title, icon, ...rest }) {
+  const _icon = icon || Array.from(title)[0];
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      component: "span",
+      sx: {
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center",
+        width: "1.2em",
+        height: "1.2em",
+        lineHeight: 1,
+        ...!icon && { bgcolor: stringToColor(title), color: "#fff" }
+      },
+      ...rest,
+      children: _icon
+    }
+  );
+}
+function EmojiIcon({ title, icon, size = "small", ...rest }) {
+  if (size === "large") {
+    const letterIconStyles = {
+      width: "100%",
+      height: "100%",
+      fontSize: "1.2em"
+    };
+    return /* @__PURE__ */ jsx(
+      Box,
+      {
+        sx: {
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+          width: 40,
+          height: 40,
+          overflow: "hidden",
+          borderRadius: 1.5,
+          bgcolor: "grey.300"
+        },
+        children: /* @__PURE__ */ jsx(InternalIcon, { title, icon, ...rest, style: { ...!icon && letterIconStyles } })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(InternalIcon, { title, icon, ...rest });
+}
+export default EmojiIcon;

package/dist/components/empty-status/empty-status.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { SxProps } from '@mui/material';
+interface Props {
+    sx?: SxProps;
+}
+export default function EmptyStatus({ sx }: Props): import("react").JSX.Element;
+export {};

package/dist/components/empty-status/empty-status.mjs

@@ -0,0 +1,24 @@
+import { jsx } from "react/jsx-runtime";
+import Box from "@mui/material/Box";
+import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
+import Empty from "@arcblock/ux/lib/Empty";
+import { mergeSx } from "../utils.mjs";
+export default function EmptyStatus({ sx }) {
+  const { t } = useLocaleContext();
+  return /* @__PURE__ */ jsx(
+    Box,
+    {
+      sx: [
+        {
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        // @ts-expect-error
+        mergeSx({ height: "50vh", width: "100%" }, sx)
+      ],
+      children: /* @__PURE__ */ jsx(Empty, { children: t("profile.empty") })
+    }
+  );
+}

package/dist/components/empty-status/index.d.ts

@@ -0,0 +1 @@
+export { default as EmptyStatus } from './empty-status';

package/dist/components/empty-status/index.mjs

@@ -0,0 +1 @@
+export { default as EmptyStatus } from "./empty-status.mjs";

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

@@ -0,0 +1,10 @@
+interface Options {
+    tracking: (values: Record<string, any>) => boolean;
+    onChange?: () => void;
+}
+export declare const useChanged: (values: Record<string, any>, options: Options) => {
+    changed: boolean;
+    reset: (overrides?: Record<string, any>) => void;
+    initialValues: Record<string, any>;
+};
+export {};

package/dist/components/hooks/changed.mjs

@@ -0,0 +1,34 @@
+import { useRef, useEffect, useState } from "react";
+const isEqual = (a, b) => {
+  if (a === 0 && b === 0 || !a && !b) {
+    return true;
+  }
+  return a === b;
+};
+export const useChanged = (values, options) => {
+  const [trackingStarted, setTrackingStarted] = useState(false);
+  const [changed, setChanged] = useState(false);
+  const initialValues = useRef(values);
+  const detectChanges = () => {
+    const changesDetected = Object.keys(initialValues.current).some(
+      (key) => !isEqual(initialValues.current[key], values[key])
+    );
+    if (changesDetected) {
+      options.onChange?.();
+    }
+    setChanged(changesDetected);
+  };
+  const reset = (overrides) => {
+    initialValues.current = { ...values, ...overrides };
+    detectChanges();
+  };
+  useEffect(() => {
+    if (trackingStarted) {
+      detectChanges();
+    } else if (options.tracking(values) && !trackingStarted) {
+      initialValues.current = { ...values };
+      setTrackingStarted(true);
+    }
+  }, [values, trackingStarted]);
+  return { changed, reset, initialValues: initialValues.current };
+};

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

@@ -0,0 +1,6 @@
+export { useSessionContext } from './session';
+export { useChanged } from './changed';
+export { useNow } from './now';
+export { useInterval } from './interval';
+export { useDownBreakpoint, useUpBreakpoint } from './responsive';
+export { useEventCallback } from './use-event-callback';

package/dist/components/hooks/index.mjs

@@ -0,0 +1,6 @@
+export { useSessionContext } from "./session.mjs";
+export { useChanged } from "./changed.mjs";
+export { useNow } from "./now.mjs";
+export { useInterval } from "./interval.mjs";
+export { useDownBreakpoint, useUpBreakpoint } from "./responsive.mjs";
+export { useEventCallback } from "./use-event-callback.mjs";

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

@@ -0,0 +1,6 @@
+interface Options {
+    interval?: number;
+    paused?: boolean;
+}
+export declare const useInterval: (callback: () => void, options?: Options) => void;
+export {};

package/dist/components/hooks/interval.mjs

@@ -0,0 +1,16 @@
+import { useEffect, useRef } from "react";
+const DEFAULT_INTERVAL = 60 * 1e3;
+export const useInterval = (callback, options = {}) => {
+  const { interval = DEFAULT_INTERVAL, paused = false } = options;
+  const callbackRef = useRef(void 0);
+  useEffect(() => {
+    callbackRef.current = callback;
+  }, [callback]);
+  useEffect(() => {
+    if (!paused) {
+      const timer = setInterval(() => callbackRef.current?.(), interval);
+      return () => clearInterval(timer);
+    }
+    return void 0;
+  }, [interval, paused]);
+};

package/dist/components/hooks/locale-context.d.ts

@@ -0,0 +1,10 @@
+export interface Language {
+    name: string;
+    code: string;
+}
+export declare const useLocaleContext: () => {
+    locale: string;
+    t: (key: string, data: any) => string;
+    languages: Language[];
+    getLanguageName: (code: string) => string;
+};

package/dist/components/hooks/locale-context.mjs

@@ -0,0 +1,12 @@
+import { useLocaleContext as useLocaleContextUX } from "@arcblock/ux/lib/Locale/context";
+export const useLocaleContext = () => {
+  const { languages, ...rest } = useLocaleContextUX();
+  function getLanguageName(code) {
+    return languages.find((x) => x.code === code)?.name || code;
+  }
+  return {
+    languages,
+    getLanguageName,
+    ...rest
+  };
+};

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

@@ -0,0 +1,5 @@
+declare const useMeasure: () => [any, {
+    width: number;
+    height: number;
+}];
+export default useMeasure;

package/dist/components/hooks/measure.mjs

@@ -0,0 +1,8 @@
+import { useRef } from "react";
+import { useSize } from "ahooks";
+const useMeasure = () => {
+  const ref = useRef(null);
+  const size = useSize(ref);
+  return [ref, size || { width: 0, height: 0 }];
+};
+export default useMeasure;

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

@@ -0,0 +1 @@
+export declare const useNow: (interval?: number) => Date;

package/dist/components/hooks/now.mjs

@@ -0,0 +1,10 @@
+import { useEffect, useState } from "react";
+export const useNow = (interval = 1e3) => {
+  const [time, setTime] = useState(/* @__PURE__ */ new Date());
+  const updateTime = () => setTime(/* @__PURE__ */ new Date());
+  useEffect(() => {
+    const timer = setInterval(updateTime, interval);
+    return () => clearInterval(timer);
+  }, [interval]);
+  return time;
+};

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

@@ -0,0 +1,17 @@
+import { type Breakpoint } from '@mui/material';
+export declare const useDownBreakpoint: (breakpoint: Breakpoint) => boolean;
+export declare const useUpBreakpoint: (breakpoint: Breakpoint) => boolean;
+export declare function useResponsive(): (responsiveValues: {
+    xs?: any;
+    sm?: any;
+    md?: any;
+    lg?: any;
+    xl?: any;
+}) => any;
+export declare const useResponsiveValue: (values: {
+    xs?: any;
+    sm?: any;
+    md?: any;
+    lg?: any;
+    xl?: any;
+}) => any;

package/dist/components/hooks/responsive.mjs

@@ -0,0 +1,25 @@
+import { useTheme, useMediaQuery } from "@mui/material";
+export const useDownBreakpoint = (breakpoint) => {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.down(breakpoint));
+};
+export const useUpBreakpoint = (breakpoint) => {
+  const theme = useTheme();
+  return useMediaQuery(theme.breakpoints.up(breakpoint));
+};
+export function useResponsive() {
+  const theme = useTheme();
+  const matches = theme.breakpoints.keys.reduce(
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    (acc, cur) => ({ ...acc, [cur]: useMediaQuery(theme.breakpoints.up(cur)) }),
+    {}
+  );
+  return (responsiveValues) => {
+    const match = [...theme.breakpoints.keys].reverse().find((breakpoint) => matches[breakpoint] && breakpoint in responsiveValues);
+    return match && responsiveValues[match];
+  };
+}
+export const useResponsiveValue = (values) => {
+  const r = useResponsive();
+  return r(values);
+};

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

@@ -0,0 +1,12 @@
+export declare const useSessionContext: () => {
+    isAuthenticated: boolean;
+    isAdmin: boolean;
+    isMember: boolean;
+    isBlogEditor: boolean;
+    hasAnyPassport: (passports: string | string[]) => boolean;
+    hasAnyPermission: (perms: string | string[]) => boolean;
+    canUpdatePost: () => boolean;
+    sessionReadyPromise: Promise<unknown>;
+    session: Session;
+    connectApi: any;
+};

package/dist/components/hooks/session.mjs

@@ -0,0 +1,48 @@
+import { useContext, useEffect, useMemo, useRef } from "react";
+import { SessionContext } from "@arcblock/did-connect-react/lib/Session";
+export const useSessionContext = () => {
+  const ctx = useContext(SessionContext) || {};
+  const roles = [...ctx?.session?.user?.passports?.map((p) => p.role) || [], "guest"];
+  const permissionSet = useMemo(() => new Set(ctx.session?.user?.permissions || []), [ctx.session?.user?.permissions]);
+  const hasAnyPassport = (passports) => {
+    if (!passports || passports.length === 0) {
+      return true;
+    }
+    const passportsArr = Array.isArray(passports) ? passports : [passports];
+    return roles.some((x) => passportsArr.includes(x));
+  };
+  const hasAnyPermission = (perms) => {
+    if (!perms || perms.length === 0) {
+      return true;
+    }
+    const permsArr = Array.isArray(perms) ? perms : [perms];
+    return permsArr.some((item) => permissionSet.has(item));
+  };
+  const isAdmin = hasAnyPassport(["admin", "owner"]);
+  const isBlogEditor = hasAnyPassport(["blogEditor"]);
+  const canUpdatePost = () => {
+    return isAdmin || isBlogEditor || hasAnyPermission(["update_post"]);
+  };
+  const resolver = useRef(void 0);
+  const sessionReadyPromise = useMemo(() => {
+    return new Promise((resolve) => {
+      resolver.current = resolve;
+    });
+  }, []);
+  useEffect(() => {
+    if (ctx.session.initialized) {
+      resolver.current?.();
+    }
+  }, [ctx.session?.initialized]);
+  return {
+    ...ctx,
+    isAuthenticated: !!ctx.session?.user,
+    isAdmin,
+    isMember: hasAnyPassport(["member"]),
+    isBlogEditor,
+    hasAnyPassport,
+    hasAnyPermission,
+    canUpdatePost,
+    sessionReadyPromise
+  };
+};

package/dist/components/hooks/use-event-callback.d.ts

@@ -0,0 +1 @@
+export declare function useEventCallback<I extends unknown[], O>(fn: (...args: I) => O): (...args: I) => O;

package/dist/components/hooks/use-event-callback.mjs

@@ -0,0 +1,14 @@
+import { useCallback, useLayoutEffect, useRef } from "react";
+export function useEventCallback(fn) {
+  const ref = useRef(void 0);
+  useLayoutEffect(() => {
+    ref.current = fn;
+  });
+  return useCallback((...args) => {
+    const { current } = ref;
+    if (current == null) {
+      throw new Error("callback created in useEventCallback can only be called from event handlers");
+    }
+    return current(...args);
+  }, []);
+}

package/dist/components/icon-button.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { BoxProps, type IconButtonProps } from '@mui/material';
+export declare function IconButton<C extends React.ElementType>({ sx, ...rest }: IconButtonProps<C, {
+    component?: C;
+}>): import("react").JSX.Element;
+export declare function IconButtonGroup({ children, sx, ...rest }: BoxProps): import("react").JSX.Element;

package/dist/components/icon-button.mjs

@@ -0,0 +1,37 @@
+import { jsx } from "react/jsx-runtime";
+import { Box, IconButton as MuiIconButton } from "@mui/material";
+export function IconButton({ sx, ...rest }) {
+  const mergedSx = [
+    {
+      svg: {
+        width: "1em",
+        height: "1em",
+        fontSize: 20
+      },
+      color: "text.secondary",
+      "&:hover": {
+        color: "primary.main"
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsx(MuiIconButton, { color: "primary", size: "small", sx: mergedSx, ...rest, disableFocusRipple: true });
+}
+export function IconButtonGroup({ children, sx, ...rest }) {
+  const mergedSx = [
+    {
+      display: "flex",
+      alignItems: "center",
+      gap: 2,
+      "& > .MuiIconButton-root:first-child": {
+        ml: "-5px"
+      },
+      // 避免局部 theme 覆盖问题 (如 comment donation 中的 IconButton 会以 donation 局部的 theme palette 为准)
+      ".MuiIconButton-root:hover": {
+        color: "primary.main"
+      }
+    },
+    ...Array.isArray(sx) ? sx : [sx]
+  ];
+  return /* @__PURE__ */ jsx(Box, { ...rest, sx: mergedSx, children });
+}

package/dist/components/input/auto-clear-plugin.d.ts

@@ -0,0 +1,3 @@
+export declare function AutoClearPlugin({ clearKey }: {
+    clearKey: number;
+}): null;

package/dist/components/input/auto-clear-plugin.mjs

@@ -0,0 +1,20 @@
+import { useEffect } from "react";
+import { useLexicalComposerContext } from "@lexical/react/LexicalComposerContext";
+import { $createParagraphNode, $getRoot, $getSelection } from "lexical";
+export function AutoClearPlugin({ clearKey }) {
+  const [editor] = useLexicalComposerContext();
+  useEffect(() => {
+    if (editor && clearKey) {
+      editor.update(() => {
+        const root = $getRoot();
+        const paragraph = $createParagraphNode();
+        root.clear();
+        root.append(paragraph);
+        if ($getSelection() !== null) {
+          paragraph.select();
+        }
+      });
+    }
+  }, [editor, clearKey]);
+  return null;
+}

package/dist/components/input/comment-input.d.ts

@@ -0,0 +1,11 @@
+/// <reference types="react" />
+import { InputProps, RenderProps } from './input';
+interface Props extends Omit<InputProps, 'render'> {
+    sendText?: string;
+    sendIcon?: React.ReactNode;
+    disabledSend?: boolean;
+    renderInnerFooter?: (args: RenderProps) => React.ReactElement<any>;
+    disableCmdEnter?: boolean;
+}
+export default function CommentInput({ disabledSend, send, onSuccess, placeholder, sendText, sendIcon, draftKey, renderInnerFooter, disableCmdEnter, ...rest }: Props): import("react").JSX.Element;
+export {};