@lobehub/ui 2.24.2 → 2.24.3

package/es/EmojiPicker/AvatarUploader.d.ts

@@ -1,13 +1,4 @@
 /// <reference types="react" />
-export interface AvatarUploaderProps {
-    compressSize?: number;
-    onChange: (avatar: string) => void;
-    onUpload?: (file: File) => void;
-    texts?: {
-        draggerDesc?: string;
-        fileTypeError?: string;
-        uploadBtn?: string;
-    };
-}
+import { AvatarUploaderProps } from './type';
 declare const AvatarUploader: import("react").NamedExoticComponent<AvatarUploaderProps>;
 export default AvatarUploader;

package/es/EmojiPicker/AvatarUploader.js

@@ -13,6 +13,8 @@ import AvatarEditor from 'react-avatar-editor';
 import { Center, Flexbox } from 'react-layout-kit';
 import Button from "../Button";
 import Icon from "../Icon";
+import Tag from "../Tag";
+import Text from "../Text";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -27,7 +29,8 @@ var createUploadImageHandler = function createUploadImageHandler(onUploadImage)
   };
 };
 var AvatarUploader = /*#__PURE__*/memo(function (_ref) {
-  var onChange = _ref.onChange,
+  var shape = _ref.shape,
+    onChange = _ref.onChange,
     texts = _ref.texts,
     _ref$compressSize = _ref.compressSize,
     compressSize = _ref$compressSize === void 0 ? 256 : _ref$compressSize,
@@ -38,11 +41,12 @@ var AvatarUploader = /*#__PURE__*/memo(function (_ref) {
     previewImage = _useState2[0],
     setPreviewImage = _useState2[1];
   var _useStyles = useStyles(),
-    styles = _useStyles.styles;
+    styles = _useStyles.styles,
+    theme = _useStyles.theme;
   var beforeUpload = useCallback(function (file) {
-    var isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
+    var isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/gif' || file.type === 'image/webp';
     if (!isJpgOrPng) {
-      message.error((texts === null || texts === void 0 ? void 0 : texts.fileTypeError) || 'You can only upload JPG/PNG file!');
+      message.error((texts === null || texts === void 0 ? void 0 : texts.fileTypeError) || 'You can only upload image file!');
       return;
     }
     return createUploadImageHandler(function (avatar) {
@@ -55,10 +59,16 @@ var AvatarUploader = /*#__PURE__*/memo(function (_ref) {
     var dataUrl = canvasScaled.toDataURL();
     onChange(dataUrl);
     if (!onUpload) return;
-    var file = new File([dataUrl], 'avatar.webp', {
-      type: 'image/webp'
-    });
-    onUpload === null || onUpload === void 0 || onUpload(file);
+
+    // 使用 toBlob 直接获取 Blob，然后创建 File 对象
+    canvasScaled.toBlob(function (blob) {
+      if (blob) {
+        var file = new File([blob], 'avatar.webp', {
+          type: 'image/webp'
+        });
+        onUpload(file);
+      }
+    }, 'image/webp', 0.95); // 0.95 是图片质量
   };
   return /*#__PURE__*/_jsxs(Flexbox, {
     padding: 10,
@@ -79,10 +89,24 @@ var AvatarUploader = /*#__PURE__*/memo(function (_ref) {
         height: compressSize,
         width: compressSize,
         children: [/*#__PURE__*/_jsx(Icon, {
+          color: theme.colorTextDescription,
           icon: ImageUpIcon,
           size: 48
-        }), /*#__PURE__*/_jsx("div", {
+        }), /*#__PURE__*/_jsx(Text, {
+          color: theme.colorTextSecondary,
           children: (texts === null || texts === void 0 ? void 0 : texts.draggerDesc) || 'Click or Drag image to this area to upload'
+        }), /*#__PURE__*/_jsxs(Center, {
+          gap: 4,
+          horizontal: true,
+          children: [/*#__PURE__*/_jsx(Tag, {
+            children: "JPG"
+          }), /*#__PURE__*/_jsx(Tag, {
+            children: "PNG"
+          }), /*#__PURE__*/_jsx(Tag, {
+            children: "GIF"
+          }), /*#__PURE__*/_jsx(Tag, {
+            children: "WEBP"
+          })]
         })]
       })
     }), previewImage && /*#__PURE__*/_jsxs(Center, {
@@ -93,7 +117,7 @@ var AvatarUploader = /*#__PURE__*/memo(function (_ref) {
       width: '100%',
       children: [/*#__PURE__*/_jsx(AvatarEditor, {
         border: 0,
-        borderRadius: compressSize / 2,
+        borderRadius: shape === 'square' ? undefined : compressSize / 2,
         className: styles.editor,
         height: compressSize,
         image: previewImage,

package/es/EmojiPicker/EmojiPicker.js

@@ -1,7 +1,7 @@
 'use client';
 
 function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
-var _excluded = ["value", "defaultAvatar", "onChange", "locale", "allowUpload", "allowDelete", "texts", "onDelete", "compressSize", "customEmojis", "className", "loading", "onUpload", "customTabs", "popupClassName", "popupStyle", "customRender", "open", "defaultOpen", "onOpenChange", "popupProps"];
+var _excluded = ["value", "defaultAvatar", "onChange", "locale", "allowUpload", "allowDelete", "texts", "onDelete", "compressSize", "customEmojis", "className", "loading", "onUpload", "customTabs", "popupClassName", "popupStyle", "customRender", "open", "defaultOpen", "onOpenChange", "popupProps", "shape"];
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
@@ -67,6 +67,7 @@ var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
     defaultOpen = _ref$defaultOpen === void 0 ? false : _ref$defaultOpen,
     onOpenChange = _ref.onOpenChange,
     popupProps = _ref.popupProps,
+    shape = _ref.shape,
     rest = _objectWithoutProperties(_ref, _excluded);
   var ref = useRef(null);
   var _useMergeState = useMergeState(defaultOpen, {
@@ -196,6 +197,7 @@ var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
       compressSize: compressSize,
       onChange: handleAvatarChange,
       onUpload: onUpload,
+      shape: shape,
       texts: texts
     }), customTabs.map(function (item) {
       return tab === item.value && /*#__PURE__*/_jsx(Flexbox, {
@@ -220,7 +222,8 @@ var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
     children: customRender ? customRender(ava) : /*#__PURE__*/_jsx(Avatar, _objectSpread({
       avatar: ava,
       className: cx(styles.root, className),
-      loading: loading
+      loading: loading,
+      shape: shape
     }, rest))
   }));
 });

package/es/EmojiPicker/type.d.ts

@@ -1,7 +1,17 @@
 import { PopoverProps } from 'antd';
 import { CSSProperties, ReactNode } from 'react';
 import type { AvatarProps } from "../Avatar/type";
-import type { AvatarUploaderProps } from "./AvatarUploader";
+export interface AvatarUploaderProps {
+    compressSize?: number;
+    onChange: (avatar: string) => void;
+    onUpload?: (file: File) => void;
+    shape?: 'circle' | 'square';
+    texts?: {
+        draggerDesc?: string;
+        fileTypeError?: string;
+        uploadBtn?: string;
+    };
+}
 export interface EmojiPickerCustomEmoji {
     emojis: [
         {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "2.24.2",
+  "version": "2.24.3",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",