@lobehub/ui 1.37.0 → 1.38.1

package/es/FluentEmoji/index.js

@@ -1,17 +1,12 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
-import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["emoji", "className", "style", "type", "size"];
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 import { kebabCase } from 'lodash-es';
-import { Loader2 } from 'lucide-react';
-import { memo, useEffect, useMemo, useState } from 'react';
-import Icon from "../Icon";
+import { memo, useEffect, useState } from 'react';
 import { getEmojiNameByCharacter } from "../utils/getEmojiByCharacter";
 import { useStyles } from "./style";
 import { jsx as _jsx } from "react/jsx-runtime";
-import { jsxs as _jsxs } from "react/jsx-runtime";
 var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
   var emoji = _ref.emoji,
     className = _ref.className,
@@ -19,66 +14,52 @@ var FluentEmoji = /*#__PURE__*/memo(function (_ref) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'modern' : _ref$type,
     _ref$size = _ref.size,
-    size = _ref$size === void 0 ? 40 : _ref$size,
-    props = _objectWithoutProperties(_ref, _excluded);
-  var _useState = useState(true),
+    size = _ref$size === void 0 ? 40 : _ref$size;
+  var _useState = useState(false),
     _useState2 = _slicedToArray(_useState, 2),
-    loading = _useState2[0],
-    setLoading = _useState2[1];
-  var _useState3 = useState(false),
+    loadingFail = _useState2[0],
+    setLoadingFail = _useState2[1];
+  var _useState3 = useState({}),
     _useState4 = _slicedToArray(_useState3, 2),
-    loadingFail = _useState4[0],
-    setLoadingFail = _useState4[1];
+    emojiUrl = _useState4[0],
+    setEmojiUrl = _useState4[1];
   var _useStyles = useStyles(),
     cx = _useStyles.cx,
     styles = _useStyles.styles;
   useEffect(function () {
-    setLoading(true);
-  }, [emoji]);
-  var emojiName = useMemo(function () {
-    return getEmojiNameByCharacter(emoji);
-  }, [emoji]);
-  if (!emojiName || loadingFail) return /*#__PURE__*/_jsx("div", _objectSpread(_objectSpread({
+    if (emojiUrl !== null && emojiUrl !== void 0 && emojiUrl[emoji] || (emojiUrl === null || emojiUrl === void 0 ? void 0 : emojiUrl[emoji]) === 'none') return;
+    var emojiName = getEmojiNameByCharacter(emoji);
+    if (emojiName) {
+      setEmojiUrl(_objectSpread(_objectSpread({}, emojiUrl), {}, _defineProperty({}, emoji, "https://npm.elemecdn.com/fluentui-emoji/icons/".concat(type, "/").concat(kebabCase(emojiName), ".svg"))));
+    } else {
+      setEmojiUrl(_objectSpread(_objectSpread({}, emojiUrl), {}, _defineProperty({}, emoji, 'none')));
+    }
+  }, [emoji, emojiUrl]);
+  if ((emojiUrl === null || emojiUrl === void 0 ? void 0 : emojiUrl[emoji]) === 'none' || loadingFail) return /*#__PURE__*/_jsx("div", {
     className: cx(styles.container, className),
     style: _objectSpread({
       fontSize: size,
       height: size,
       width: size
-    }, style)
-  }, props), {}, {
+    }, style),
     children: emoji
-  }));
-  return /*#__PURE__*/_jsxs("div", _objectSpread(_objectSpread({
+  });
+  return /*#__PURE__*/_jsx("div", {
     className: cx(styles.container, className),
     style: _objectSpread({
       height: size,
       width: size
-    }, style)
-  }, props), {}, {
-    children: [loading && /*#__PURE__*/_jsx("div", {
-      className: styles.loading,
-      children: /*#__PURE__*/_jsx(Icon, {
-        icon: Loader2,
-        size: {
-          fontSize: size * 0.75
-        },
-        spin: true
-      })
-    }), /*#__PURE__*/_jsx("img", {
-      alt: emojiName,
+    }, style),
+    children: /*#__PURE__*/_jsx("img", {
+      alt: emoji,
       height: "100%",
+      loading: "lazy",
       onError: function onError() {
         return setLoadingFail(true);
       },
-      onLoad: function onLoad() {
-        return setLoading(false);
-      },
-      src: "https://npm.elemecdn.com/fluentui-emoji/icons/".concat(type, "/").concat(kebabCase(emojiName), ".svg"),
-      style: {
-        opacity: loading ? 0 : 1
-      },
+      src: emojiUrl === null || emojiUrl === void 0 ? void 0 : emojiUrl[emoji],
       width: "100%"
-    })]
-  }));
+    })
+  });
 });
 export default FluentEmoji;

package/package.json

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