@lobehub/ui 1.113.0 → 1.114.0

package/es/Avatar/index.js

@@ -1,6 +1,6 @@
 import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _objectWithoutProperties from "@babel/runtime/helpers/esm/objectWithoutProperties";
-var _excluded = ["className", "avatar", "title", "animation", "size", "shape", "background", "onClick", "style"];
+var _excluded = ["className", "avatar", "title", "animation", "size", "shape", "background", "style"];
 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; }
 import { Avatar as AntAvatar } from 'antd';
@@ -20,7 +20,6 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     shape = _ref$shape === void 0 ? 'circle' : _ref$shape,
     _ref$background = _ref.background,
     background = _ref$background === void 0 ? 'rgba(0,0,0,0)' : _ref$background,
-    onClick = _ref.onClick,
     style = _ref.style,
     props = _objectWithoutProperties(_ref, _excluded);
   var isImage = Boolean(avatar && ['/', 'http', 'data:'].some(function (index) {
@@ -38,18 +37,18 @@ var Avatar = /*#__PURE__*/memo(function (_ref) {
     styles = _useStyles.styles,
     cx = _useStyles.cx;
   var text = String(isImage ? title : avatar);
-  var avatarProps = {
+  var avatarProps = _objectSpread({
     className: cx(styles.avatar, className),
     shape: shape,
     size: size,
-    style: onClick ? style : _objectSpread({
+    style: props !== null && props !== void 0 && props.onClick ? style : _objectSpread({
       cursor: 'default'
     }, style)
-  };
-  return isImage ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({
+  }, props);
+  return isImage ? /*#__PURE__*/_jsx(AntAvatar, _objectSpread({
     src: isBase64 ? avatar : undefined,
     srcSet: isBase64 ? undefined : avatar
-  }, avatarProps), props)) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread(_objectSpread({}, avatarProps), props), {}, {
+  }, avatarProps)) : /*#__PURE__*/_jsx(AntAvatar, _objectSpread(_objectSpread({}, avatarProps), {}, {
     children: emoji ? /*#__PURE__*/_jsx(FluentEmoji, {
       emoji: emoji,
       size: size * 0.8,

package/es/EmojiPicker/index.d.ts

@@ -0,0 +1,10 @@
+/// <reference types="react" />
+export interface EmojiPickerProps {
+    backgroundColor?: string;
+    defaultAvatar?: string;
+    locale?: string;
+    onChange?: (emoji: string) => void;
+    value?: string;
+}
+declare const EmojiPicker: import("react").NamedExoticComponent<EmojiPickerProps>;
+export default EmojiPicker;

package/es/EmojiPicker/index.js

@@ -0,0 +1,92 @@
+import _asyncToGenerator from "@babel/runtime/helpers/esm/asyncToGenerator";
+import _slicedToArray from "@babel/runtime/helpers/esm/slicedToArray";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import data from '@emoji-mart/data';
+import defaultI18n from '@emoji-mart/data/i18n/en.json';
+import Picker from '@emoji-mart/react';
+import { Avatar } from "./..";
+import { Popover } from 'antd';
+import { memo, useEffect, useState } from 'react';
+import useMergeState from 'use-merge-value';
+import { useStyles } from "./style";
+import { jsx as _jsx } from "react/jsx-runtime";
+var EmojiPicker = /*#__PURE__*/memo(function (_ref) {
+  var value = _ref.value,
+    _ref$defaultAvatar = _ref.defaultAvatar,
+    defaultAvatar = _ref$defaultAvatar === void 0 ? '🤖' : _ref$defaultAvatar,
+    _ref$backgroundColor = _ref.backgroundColor,
+    backgroundColor = _ref$backgroundColor === void 0 ? 'rgba(0,0,0,0)' : _ref$backgroundColor,
+    onChange = _ref.onChange,
+    _ref$locale = _ref.locale,
+    locale = _ref$locale === void 0 ? 'en-US' : _ref$locale;
+  var _useStyles = useStyles(),
+    styles = _useStyles.styles;
+  var _useState = useState(defaultI18n),
+    _useState2 = _slicedToArray(_useState, 2),
+    i18n = _useState2[0],
+    setI18n = _useState2[1];
+  var _useMergeState = useMergeState('🤖', {
+      defaultValue: defaultAvatar,
+      onChange: onChange,
+      value: value
+    }),
+    _useMergeState2 = _slicedToArray(_useMergeState, 2),
+    ava = _useMergeState2[0],
+    setAva = _useMergeState2[1];
+  var getI18n = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee(localeName) {
+      var i18n;
+      return _regeneratorRuntime.wrap(function _callee$(_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            _context.next = 2;
+            return import("@emoji-mart/data/i18n/".concat(localeName, ".json"));
+          case 2:
+            i18n = _context.sent;
+            setI18n(i18n);
+          case 4:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function getI18n(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  useEffect(function () {
+    if (locale === 'en-US') return;
+    var localeName = locale.split('-')[0];
+    getI18n(localeName);
+  }, [locale]);
+  return /*#__PURE__*/_jsx(Popover, {
+    content: /*#__PURE__*/_jsx("div", {
+      className: styles.picker,
+      children: /*#__PURE__*/_jsx(Picker, {
+        data: data,
+        i18n: i18n,
+        locale: locale.split('-')[0],
+        onEmojiSelect: function onEmojiSelect(e) {
+          return setAva(e.native);
+        },
+        skinTonePosition: 'none',
+        theme: 'auto'
+      })
+    }),
+    placement: 'left',
+    rootClassName: styles.popover,
+    trigger: 'click',
+    children: /*#__PURE__*/_jsx("div", {
+      className: styles.avatar,
+      style: {
+        width: 'fit-content'
+      },
+      children: /*#__PURE__*/_jsx(Avatar, {
+        avatar: ava,
+        background: backgroundColor,
+        size: 44
+      })
+    })
+  });
+});
+export default EmojiPicker;

package/es/EmojiPicker/style.d.ts

@@ -0,0 +1,5 @@
+export declare const useStyles: (props?: unknown) => import("antd-style").ReturnStyles<{
+    avatar: import("antd-style").SerializedStyles;
+    picker: import("antd-style").SerializedStyles;
+    popover: import("antd-style").SerializedStyles;
+}>;

package/es/EmojiPicker/style.js

@@ -0,0 +1,14 @@
+import _taggedTemplateLiteral from "@babel/runtime/helpers/esm/taggedTemplateLiteral";
+var _templateObject, _templateObject2, _templateObject3;
+import { createStyles } from 'antd-style';
+import chroma from 'chroma-js';
+export var useStyles = createStyles(function (_ref) {
+  var css = _ref.css,
+    token = _ref.token,
+    prefixCls = _ref.prefixCls;
+  return {
+    avatar: css(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    border-radius: 50%;\n    transition:\n      scale 400ms ", ",\n      box-shadow 100ms ", ";\n\n    &:hover {\n      box-shadow: 0 0 0 3px ", ";\n    }\n\n    &:active {\n      scale: 0.8;\n    }\n  "])), token.motionEaseOut, token.motionEaseOut, token.colorText),
+    picker: css(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n    em-emoji-picker {\n      --rgb-accent: ", ";\n      --shadow: none;\n    }\n  "])), chroma(token.colorPrimary).rgb().join(',')),
+    popover: css(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n    .", "-popover-inner {\n      padding: 0;\n    }\n  "])), prefixCls)
+  };
+});

package/es/index.d.ts

@@ -23,6 +23,7 @@ export { default as DraggablePanelHeader, type DraggablePanelHeaderProps, } from
 export { default as EditableMessage, type EditableMessageProps } from './EditableMessage';
 export { default as EditableMessageList, type EditableMessageListProps, } from './EditableMessageList';
 export { default as EditableText, type EditableTextProps } from './EditableText';
+export { default as EmojiPicker, type EmojiPickerProps } from './EmojiPicker';
 export { default as EmptyCard, type EmptyCardProps } from './EmptyCard';
 export { type FeatureItem, default as Features, type FeaturesProps } from './Features';
 export { default as FluentEmoji, type FluentEmojiProps } from './FluentEmoji';

package/es/index.js

@@ -22,6 +22,7 @@ export { default as DraggablePanelHeader } from "./DraggablePanel/components/Dra
 export { default as EditableMessage } from "./EditableMessage";
 export { default as EditableMessageList } from "./EditableMessageList";
 export { default as EditableText } from "./EditableText";
+export { default as EmojiPicker } from "./EmojiPicker";
 export { default as EmptyCard } from "./EmptyCard";
 export { default as Features } from "./Features";
 export { default as FluentEmoji } from "./FluentEmoji";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lobehub/ui",
-  "version": "1.113.0",
+  "version": "1.114.0",
   "description": "Lobe UI is an open-source UI component library for building AIGC web apps",
   "keywords": [
     "lobehub",
@@ -73,6 +73,8 @@
     "@ant-design/colors": "^7",
     "@ant-design/icons": "^5",
     "@babel/runtime": "^7",
+    "@emoji-mart/data": "^1",
+    "@emoji-mart/react": "^1",
     "@floating-ui/react": "^0",
     "@giscus/react": "^2",
     "@lobehub/chat-plugin-sdk": "latest",