@alifd/chat 0.3.8-beta.4 → 0.3.9-beta.1

package/es/float-button/hooks/useAutoAlign.d.ts

@@ -1,14 +1,15 @@
-import type { BalloonProps } from '../types';
+import type { BalloonProps, Margin } from '../types';
 /**
  * 自动调整弹层 align 位置逻辑，设置Balloon 组件中的align参数
  * defaultMaxHeight 用户传的初始希望的面板高度
  */
 export declare function useAutoAlign(_dom: HTMLElement | null | undefined, // 弹层dom
 trigger: HTMLElement | null, // 触发器dom
-{ enable, defaultAlign, defaultMaxHeight }: {
+{ enable, defaultAlign, defaultMaxHeight, safeAreaMargin }: {
     enable?: boolean;
     defaultAlign: BalloonProps['align'];
     defaultMaxHeight?: number;
+    safeAreaMargin?: Margin;
 }): {
     align: "b" | "br" | "rt" | "tr" | "t" | "r" | "l" | "tl" | "bl" | "lt" | "lb" | "rb" | undefined;
     update: (dom?: HTMLElement | null | undefined) => void;

package/es/float-button/hooks/useAutoAlign.js

@@ -1,7 +1,6 @@
 import { useState, useEffect } from 'react';
 import { getNearlyEdge, isInScreen, getScreenSize } from '../util';
 import { useThrottle, useDebounce } from '../../utils';
-const DEFAULT_PANE_OFFSET = 20;
 const DEFAULT_EDGE_OFFSET = 10;
 /**
  * 自动调整弹层 align 位置逻辑，设置Balloon 组件中的align参数
@@ -9,7 +8,7 @@ const DEFAULT_EDGE_OFFSET = 10;
  */
 export function useAutoAlign(_dom, // 弹层dom
 trigger, // 触发器dom
-{ enable, defaultAlign, defaultMaxHeight }) {
+{ enable, defaultAlign, defaultMaxHeight, safeAreaMargin }) {
     var _a;
     const [align, setAlign] = useState(defaultAlign);
     const [maxHeight, setMaxHeight] = useState(defaultMaxHeight || ((_a = getScreenSize()) === null || _a === void 0 ? void 0 : _a.height));
@@ -33,26 +32,28 @@ trigger, // 触发器dom
         const { left, top, width, height } = trigger.getBoundingClientRect();
         let newAlign = align;
         let newMaxHeight = maxHeight;
+        const safeTopMargin = (safeAreaMargin === null || safeAreaMargin === void 0 ? void 0 : safeAreaMargin[0]) || DEFAULT_EDGE_OFFSET;
+        const safeBottomMargin = (safeAreaMargin === null || safeAreaMargin === void 0 ? void 0 : safeAreaMargin[2]) || DEFAULT_EDGE_OFFSET;
         // 去除bl/br/tl/tr的支持，因为会导致弹层面板高度变矮，所以目前只用了'rt'|'lt'|'rb'|'lb'4种布局
         switch (edge) {
             case 'top': {
                 newAlign = subEdge === 'left' ? 'rt' : 'lt';
-                newMaxHeight = screenHeight - top - DEFAULT_EDGE_OFFSET;
+                newMaxHeight = screenHeight - top - safeBottomMargin;
                 break;
             }
             case 'right': {
                 newAlign = subEdge === 'top' ? 'lt' : 'lb';
-                newMaxHeight = subEdge === 'top' ? screenHeight - top - DEFAULT_EDGE_OFFSET : top + height - DEFAULT_EDGE_OFFSET;
+                newMaxHeight = subEdge === 'top' ? screenHeight - top - safeBottomMargin : top + height - safeTopMargin;
                 break;
             }
             case 'bottom': {
                 newAlign = subEdge === 'left' ? 'rb' : 'lb';
-                newMaxHeight = top + height - DEFAULT_EDGE_OFFSET;
+                newMaxHeight = top + height - safeTopMargin;
                 break;
             }
             case 'left': {
                 newAlign = subEdge === 'top' ? 'rt' : 'rb';
-                newMaxHeight = subEdge === 'top' ? screenHeight - top - DEFAULT_EDGE_OFFSET : top + height - DEFAULT_EDGE_OFFSET;
+                newMaxHeight = subEdge === 'top' ? screenHeight - top - safeBottomMargin : top + height - safeTopMargin;
                 break;
             }
         }
@@ -60,7 +61,9 @@ trigger, // 触发器dom
             setAlign(newAlign);
         }
         if (newMaxHeight !== maxHeight) {
-            setMaxHeight(newMaxHeight);
+            // 最大高度不能超过屏幕高度减去上下的安全距离
+            const limitHeight = Math.max(0, screenHeight - safeTopMargin - safeBottomMargin);
+            setMaxHeight(Math.min(newMaxHeight, limitHeight));
         }
     };
     const debounceUpdate = useDebounce(() => update(), 200);

package/es/float-button/view/float-button.js

@@ -46,7 +46,8 @@ const FloatButton = forwardRef((props, ref) => {
     const { align: currentAlign, update: _updateAlign, maxHeight: currentMaxHeight } = useAutoAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
         enable: autoAlign,
         defaultAlign: align,
-        defaultMaxHeight: parseInt(((_a = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _a === void 0 ? void 0 : _a.height) ? ((_b = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _b === void 0 ? void 0 : _b.height) + '' : '600px')
+        defaultMaxHeight: parseInt(((_a = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _a === void 0 ? void 0 : _a.height) ? ((_b = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _b === void 0 ? void 0 : _b.height) + '' : '600px'),
+        safeAreaMargin,
     });
     const updateAlign = () => {
         _updateAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`));

package/es/index.js

@@ -20,4 +20,4 @@ export { default as CardLoading } from './card-loading';
 export { default as Origin } from './origin';
 export { default as Loading } from './loading';
 export { default as Drawer } from './drawer';
-export const version = '0.3.8-beta.4';
+export const version = '0.3.9-beta.1';

package/es/svg-render/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @component svg-render
+ * @en svg-render
+ * @type 通用 - svg 渲染组件
+ * @when svg 渲染
+ */
+import React from 'react';
+import type { SvgRenderProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<SvgRenderProps & React.RefAttributes<HTMLDivElement>, "key" | keyof SvgRenderProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLDivElement, {}>;
+export default _default;

package/es/svg-render/index.js

@@ -0,0 +1,27 @@
+/**
+ * @component svg-render
+ * @en svg-render
+ * @type 通用 - svg 渲染组件
+ * @when svg 渲染
+ */
+import React, { forwardRef } from 'react';
+import { ConfigProvider } from '@alifd/next';
+import cs from 'classnames';
+import { PREFIX_DEFAULT, assignSubComponent } from '../utils';
+import { ReactSVG } from 'react-svg';
+const SvgRender = forwardRef(({ className, svgClassName, src, options }) => {
+    return (React.createElement(ReactSVG, { className: cs(`${PREFIX_DEFAULT}svg-render`, className), src: src, beforeInjection: (svg) => {
+            if (options === null || options === void 0 ? void 0 : options.clearColor) {
+                // 去除 svg 下面 g 标签的 fill 属性
+                svg.querySelectorAll('*').forEach(dom => {
+                    dom.removeAttribute('fill');
+                });
+            }
+            svgClassName && svg.classList.add(svgClassName);
+        } }));
+});
+const SvgRenderWithSub = assignSubComponent(SvgRender, {
+    displayName: 'SvgRender',
+});
+export * from './types';
+export default ConfigProvider.config(SvgRenderWithSub);

package/es/svg-render/style.d.ts

@@ -0,0 +1 @@
+import './main.scss';

package/es/svg-render/style.js

@@ -0,0 +1 @@
+import './main.scss';

package/es/svg-render/types.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type CommonProps } from '@alifd/next';
+/**
+ * @api svg-render
+ */
+export interface SvgRenderProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    className?: string;
+    svgClassName?: string;
+    src: string;
+    options?: {
+        clearColor?: boolean;
+    };
+}

package/es/svg-render/types.js

@@ -0,0 +1 @@
+export {};

package/lib/float-button/hooks/useAutoAlign.d.ts

@@ -1,14 +1,15 @@
-import type { BalloonProps } from '../types';
+import type { BalloonProps, Margin } from '../types';
 /**
  * 自动调整弹层 align 位置逻辑，设置Balloon 组件中的align参数
  * defaultMaxHeight 用户传的初始希望的面板高度
  */
 export declare function useAutoAlign(_dom: HTMLElement | null | undefined, // 弹层dom
 trigger: HTMLElement | null, // 触发器dom
-{ enable, defaultAlign, defaultMaxHeight }: {
+{ enable, defaultAlign, defaultMaxHeight, safeAreaMargin }: {
     enable?: boolean;
     defaultAlign: BalloonProps['align'];
     defaultMaxHeight?: number;
+    safeAreaMargin?: Margin;
 }): {
     align: "b" | "br" | "rt" | "tr" | "t" | "r" | "l" | "tl" | "bl" | "lt" | "lb" | "rb" | undefined;
     update: (dom?: HTMLElement | null | undefined) => void;

package/lib/float-button/hooks/useAutoAlign.js

@@ -4,7 +4,6 @@ exports.useAutoAlign = useAutoAlign;
 const react_1 = require("react");
 const util_1 = require("../util");
 const utils_1 = require("../../utils");
-const DEFAULT_PANE_OFFSET = 20;
 const DEFAULT_EDGE_OFFSET = 10;
 /**
  * 自动调整弹层 align 位置逻辑，设置Balloon 组件中的align参数
@@ -12,7 +11,7 @@ const DEFAULT_EDGE_OFFSET = 10;
  */
 function useAutoAlign(_dom, // 弹层dom
 trigger, // 触发器dom
-{ enable, defaultAlign, defaultMaxHeight }) {
+{ enable, defaultAlign, defaultMaxHeight, safeAreaMargin }) {
     var _a;
     const [align, setAlign] = (0, react_1.useState)(defaultAlign);
     const [maxHeight, setMaxHeight] = (0, react_1.useState)(defaultMaxHeight || ((_a = (0, util_1.getScreenSize)()) === null || _a === void 0 ? void 0 : _a.height));
@@ -36,26 +35,28 @@ trigger, // 触发器dom
         const { left, top, width, height } = trigger.getBoundingClientRect();
         let newAlign = align;
         let newMaxHeight = maxHeight;
+        const safeTopMargin = (safeAreaMargin === null || safeAreaMargin === void 0 ? void 0 : safeAreaMargin[0]) || DEFAULT_EDGE_OFFSET;
+        const safeBottomMargin = (safeAreaMargin === null || safeAreaMargin === void 0 ? void 0 : safeAreaMargin[2]) || DEFAULT_EDGE_OFFSET;
         // 去除bl/br/tl/tr的支持，因为会导致弹层面板高度变矮，所以目前只用了'rt'|'lt'|'rb'|'lb'4种布局
         switch (edge) {
             case 'top': {
                 newAlign = subEdge === 'left' ? 'rt' : 'lt';
-                newMaxHeight = screenHeight - top - DEFAULT_EDGE_OFFSET;
+                newMaxHeight = screenHeight - top - safeBottomMargin;
                 break;
             }
             case 'right': {
                 newAlign = subEdge === 'top' ? 'lt' : 'lb';
-                newMaxHeight = subEdge === 'top' ? screenHeight - top - DEFAULT_EDGE_OFFSET : top + height - DEFAULT_EDGE_OFFSET;
+                newMaxHeight = subEdge === 'top' ? screenHeight - top - safeBottomMargin : top + height - safeTopMargin;
                 break;
             }
             case 'bottom': {
                 newAlign = subEdge === 'left' ? 'rb' : 'lb';
-                newMaxHeight = top + height - DEFAULT_EDGE_OFFSET;
+                newMaxHeight = top + height - safeTopMargin;
                 break;
             }
             case 'left': {
                 newAlign = subEdge === 'top' ? 'rt' : 'rb';
-                newMaxHeight = subEdge === 'top' ? screenHeight - top - DEFAULT_EDGE_OFFSET : top + height - DEFAULT_EDGE_OFFSET;
+                newMaxHeight = subEdge === 'top' ? screenHeight - top - safeBottomMargin : top + height - safeTopMargin;
                 break;
             }
         }
@@ -63,7 +64,9 @@ trigger, // 触发器dom
             setAlign(newAlign);
         }
         if (newMaxHeight !== maxHeight) {
-            setMaxHeight(newMaxHeight);
+            // 最大高度不能超过屏幕高度减去上下的安全距离
+            const limitHeight = Math.max(0, screenHeight - safeTopMargin - safeBottomMargin);
+            setMaxHeight(Math.min(newMaxHeight, limitHeight));
         }
     };
     const debounceUpdate = (0, utils_1.useDebounce)(() => update(), 200);

package/lib/float-button/view/float-button.js

@@ -48,7 +48,8 @@ const FloatButton = (0, react_1.forwardRef)((props, ref) => {
     const { align: currentAlign, update: _updateAlign, maxHeight: currentMaxHeight } = (0, useAutoAlign_1.useAutoAlign)(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`), triggerEl, {
         enable: autoAlign,
         defaultAlign: align,
-        defaultMaxHeight: parseInt(((_a = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _a === void 0 ? void 0 : _a.height) ? ((_b = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _b === void 0 ? void 0 : _b.height) + '' : '600px')
+        defaultMaxHeight: parseInt(((_a = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _a === void 0 ? void 0 : _a.height) ? ((_b = balloonProps === null || balloonProps === void 0 ? void 0 : balloonProps.popupStyle) === null || _b === void 0 ? void 0 : _b.height) + '' : '600px'),
+        safeAreaMargin,
     });
     const updateAlign = () => {
         _updateAlign(el === null || el === void 0 ? void 0 : el.querySelector(`.${cls}-popup`));

package/lib/index.js

@@ -46,4 +46,4 @@ var loading_1 = require("./loading");
 Object.defineProperty(exports, "Loading", { enumerable: true, get: function () { return tslib_1.__importDefault(loading_1).default; } });
 var drawer_1 = require("./drawer");
 Object.defineProperty(exports, "Drawer", { enumerable: true, get: function () { return tslib_1.__importDefault(drawer_1).default; } });
-exports.version = '0.3.8-beta.4';
+exports.version = '0.3.9-beta.1';

package/lib/svg-render/index.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @component svg-render
+ * @en svg-render
+ * @type 通用 - svg 渲染组件
+ * @when svg 渲染
+ */
+import React from 'react';
+import type { SvgRenderProps } from './types';
+export * from './types';
+declare const _default: import("@alifd/next/types/config-provider/types").ConfiguredComponentClass<Pick<SvgRenderProps & React.RefAttributes<HTMLDivElement>, "key" | keyof SvgRenderProps> & import("@alifd/next/types/config-provider/types").ComponentCommonProps, HTMLDivElement, {}>;
+export default _default;

package/lib/svg-render/index.js

@@ -0,0 +1,30 @@
+"use strict";
+/**
+ * @component svg-render
+ * @en svg-render
+ * @type 通用 - svg 渲染组件
+ * @when svg 渲染
+ */
+Object.defineProperty(exports, "__esModule", { value: true });
+const tslib_1 = require("tslib");
+const react_1 = tslib_1.__importStar(require("react"));
+const next_1 = require("@alifd/next");
+const classnames_1 = tslib_1.__importDefault(require("classnames"));
+const utils_1 = require("../utils");
+const react_svg_1 = require("react-svg");
+const SvgRender = (0, react_1.forwardRef)(({ className, svgClassName, src, options }) => {
+    return (react_1.default.createElement(react_svg_1.ReactSVG, { className: (0, classnames_1.default)(`${utils_1.PREFIX_DEFAULT}svg-render`, className), src: src, beforeInjection: (svg) => {
+            if (options === null || options === void 0 ? void 0 : options.clearColor) {
+                // 去除 svg 下面 g 标签的 fill 属性
+                svg.querySelectorAll('*').forEach(dom => {
+                    dom.removeAttribute('fill');
+                });
+            }
+            svgClassName && svg.classList.add(svgClassName);
+        } }));
+});
+const SvgRenderWithSub = (0, utils_1.assignSubComponent)(SvgRender, {
+    displayName: 'SvgRender',
+});
+tslib_1.__exportStar(require("./types"), exports);
+exports.default = next_1.ConfigProvider.config(SvgRenderWithSub);

package/lib/svg-render/style.d.ts

@@ -0,0 +1 @@
+import './main.scss';

package/lib/svg-render/style.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+require("./main.scss");

package/lib/svg-render/types.d.ts

@@ -0,0 +1,13 @@
+import React from 'react';
+import { type CommonProps } from '@alifd/next';
+/**
+ * @api svg-render
+ */
+export interface SvgRenderProps extends React.HTMLAttributes<HTMLElement>, CommonProps {
+    className?: string;
+    svgClassName?: string;
+    src: string;
+    options?: {
+        clearColor?: boolean;
+    };
+}

package/lib/svg-render/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alifd/chat",
-  "version": "0.3.8-beta.4",
+  "version": "0.3.9-beta.1",
   "description": "A configurable component library for chat built on React.",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -325,6 +325,18 @@
     "./drawer/style.js": {
       "import": "./es/drawer/style.js",
       "require": "./lib/drawer/style.js"
+    },
+    "./svg-render": {
+      "import": "./es/svg-render/index.js",
+      "require": "./lib/svg-render/index.js"
+    },
+    "./svg-render/style": {
+      "import": "./es/svg-render/style.js",
+      "require": "./lib/svg-render/style.js"
+    },
+    "./svg-render/style.js": {
+      "import": "./es/svg-render/style.js",
+      "require": "./lib/svg-render/style.js"
     }
   },
   "files": [
@@ -393,7 +405,7 @@
     "rehype-slug": "^6.0.0",
     "remark-gfm": "^4.0.0",
     "sass": "^1.70.0",
-    "sass-loader": "^14.0.0",
+    "sass-loader": "^16.0.0",
     "ts-morph": "^21.0.1",
     "tsconfck": "^3.1.1",
     "tsx": "^4.7.0",
@@ -422,7 +434,8 @@
     "react-copy-to-clipboard": "^5.1.0",
     "react-photo-view": "^1.2.6",
     "sanitize-html": "~2.7.3",
-    "tslib": "^2.6.2"
+    "tslib": "^2.6.2",
+    "react-svg": "^16.1.34"
   },
   "sideEffects": [
     "es/**/style.js",