md合入master (#11435)

* feat: 地理位置静态展示支持内嵌地图方式展示 * feat: 图标支持link svg * feat: 地图静态展示支持设置大小 * feat: svg字符串支持颜色替换 * 图标支持mk模式 * 图标支持mk * 优化 * 优化 --------- Co-authored-by: jinye <[email protected]>
baidu · Dec 27, 2024 · 409722a · 409722a
1 parent d384ef4
commit 409722a
Show file tree

Hide file tree

Showing 5 changed files with 309 additions and 19 deletions.
diff --git a/packages/amis-core/src/index.tsx b/packages/amis-core/src/index.tsx
@@ -138,6 +138,8 @@ import styleManager from './StyleManager';
 
 import {bindGlobalEvent, dispatchGlobalEvent} from './utils/renderer-event';
 
+import {getCustomVendor, registerCustomVendor} from './utils/icon';
+
 // @ts-ignore
 export const version = '__buildVersion';
 (window as any).amisVersionInfo = {
@@ -250,7 +252,9 @@ export {
   getGlobalOptions,
   setGlobalOptions,
   wrapFetcher,
-  SchemaRenderer
+  SchemaRenderer,
+  getCustomVendor,
+  registerCustomVendor
 };
 
 export function render(

diff --git a/packages/amis-core/src/utils/icon.tsx b/packages/amis-core/src/utils/icon.tsx
@@ -73,3 +73,27 @@ export const generateIcon = (
     )
   ) : null;
 };
+
+type CustomVendorFn = (
+  icon: string,
+  options: {
+    [propName: string]: any;
+  }
+) => {
+  icon: string;
+  style: {
+    [propName: string]: any;
+  };
+};
+
+const customVendor = new Map<string, CustomVendorFn>();
+export function registerCustomVendor(vendor: string, fn: CustomVendorFn) {
+  customVendor.set(vendor, fn);
+}
+
+export function getCustomVendor(vendor?: string) {
+  if (!vendor) {
+    return null;
+  }
+  return customVendor.get(vendor);
+}
diff --git a/packages/amis-ui/src/components/icons.tsx b/packages/amis-ui/src/components/icons.tsx
@@ -3,7 +3,7 @@
  * @description
  * @author fex
  */
-import React, {createElement} from 'react';
+import React, {createElement, useEffect} from 'react';
 import cxClass from 'classnames';
 import CloseIcon from '../icons/close.svg';
 import CloseSmallIcon from '../icons/close-small.svg';
@@ -111,7 +111,7 @@ import If from '../icons/if.svg';
 import RotateScreen from '../icons/rotate-screen.svg';
 
 import isObject from 'lodash/isObject';
-import type {TestIdBuilder} from 'amis-core';
+import {getCustomVendor, type TestIdBuilder} from 'amis-core';
 
 // 兼容原来的用法，后续不直接试用。
 
@@ -265,6 +265,109 @@ export interface IconCheckedSchemaNew {
   icon: IconCheckedSchema;
 }
 
+function svgString2Dom(
+  icon: string,
+  {
+    className,
+    classNameProp,
+    style,
+    cx,
+    events,
+    extra
+  }: {
+    [propName: string]: any;
+  },
+  vendor?: string
+) {
+  icon = icon.replace(/\n/g, ' ').replace(/\s+/g, ' ');
+  const fn = getCustomVendor(vendor);
+  if (fn) {
+    const {icon: newIcon, style: newStyle} = fn(icon, {
+      ...extra,
+      width: style.width,
+      height: style.height
+    });
+    icon = newIcon;
+    style = Object.assign(style, newStyle);
+  }
+  const svgStr = /<svg .*?>(.*?)<\/svg>/.exec(icon);
+  const viewBox = /viewBox="(.*?)"/.exec(icon);
+  const svgHTML = createElement('svg', {
+    ...events,
+    className: cx('icon', className, classNameProp),
+    style,
+    dangerouslySetInnerHTML: {__html: svgStr ? svgStr[1] : ''},
+    viewBox: viewBox?.[1] || '0 0 16 16'
+  });
+  return svgHTML;
+}
+
+function LinkIcon({
+  icon,
+  vendor,
+  options: {className, classNameProp, style, cx, classPrefix, events, extra}
+}: {
+  icon: string;
+  vendor?: string;
+  options: {
+    [propName: string]: any;
+  };
+}) {
+  const [svgIcon, setSvgIcon] = React.useState<string | undefined>(undefined);
+  if (icon.endsWith('.svg')) {
+    useEffect(() => {
+      try {
+        fetch(icon)
+          .then(res => res.text())
+          .then(svg => {
+            setSvgIcon(svg);
+          })
+          .catch(() => {
+            setSvgIcon('error');
+          });
+      } catch (error) {
+        setSvgIcon('error');
+      }
+    }, [icon]);
+    if (svgIcon) {
+      if (svgIcon === 'error') {
+        return (
+          <img
+            {...events}
+            className={cx(`${classPrefix}Icon`, className, classNameProp)}
+            src={icon}
+            style={style}
+          />
+        );
+      } else {
+        return svgString2Dom(
+          svgIcon,
+          {
+            className,
+            classNameProp,
+            style,
+            cx,
+            events,
+            extra
+          },
+          vendor
+        );
+      }
+    } else {
+      return null;
+    }
+  } else {
+    return (
+      <img
+        {...events}
+        className={cx(`${classPrefix}Icon`, className, classNameProp)}
+        src={icon}
+        style={style}
+      />
+    );
+  }
+}
+
 export function Icon({
   icon,
   className,
@@ -288,6 +391,9 @@ export function Icon({
   onTouchEnd,
   onTouchCancel,
   style,
+  width,
+  height,
+  extra,
   testIdBuilder
 }: {
   icon: string;
@@ -296,6 +402,25 @@ export function Icon({
 } & React.ComponentProps<any>) {
   let cx = iconCx || cxClass;
 
+  // style = {
+  //   ...(style || {}),
+  //   width: width || style?.width,
+  //   height: height || style?.height
+  // };
+
+  if (width !== undefined) {
+    style = {
+      ...style,
+      width
+    };
+  }
+  if (height !== undefined) {
+    style = {
+      ...style,
+      height
+    };
+  }
+
   if (typeof jest !== 'undefined' && icon) {
     iconContent = '';
   }
@@ -416,28 +541,36 @@ export function Icon({
 
   // 直接传入svg字符串
   if (typeof icon === 'string' && icon.startsWith('<svg')) {
-    icon = icon.replace(/\n/g, ' ').replace(/\s+/g, ' ');
-    const svgStr = /<svg .*?>(.*?)<\/svg>/.exec(icon);
-    const viewBox = /viewBox="(.*?)"/.exec(icon);
-    const svgHTML = createElement('svg', {
-      ...events,
-      className: cx('icon', className, classNameProp),
-      style,
-      dangerouslySetInnerHTML: {__html: svgStr ? svgStr[1] : ''},
-      viewBox: viewBox?.[1] || '0 0 16 16'
-    });
-    return svgHTML;
+    return svgString2Dom(
+      icon,
+      {
+        className,
+        classNameProp,
+        style,
+        cx,
+        events,
+        extra
+      },
+      vendor
+    );
   }
 
   // icon是链接
   const isURLIcon = typeof icon === 'string' && icon?.indexOf('.') !== -1;
   if (isURLIcon) {
     return (
-      <img
-        {...events}
-        className={cx(`${classPrefix}Icon`, className, classNameProp)}
-        src={icon}
-        style={style}
+      <LinkIcon
+        icon={icon}
+        vendor={vendor}
+        options={{
+          className,
+          classNameProp,
+          style,
+          cx,
+          classPrefix,
+          events,
+          extra
+        }}
       />
     );
   }

diff --git a/packages/amis/src/index.tsx b/packages/amis/src/index.tsx
@@ -27,6 +27,7 @@ import {availableLanguages as EditorAvailableLanguages} from './renderers/Form/E
 import type {Action} from './types';
 import type {SchemaType} from './Schema';
 import {overrideSupportStatic} from './renderers/Form/StaticHoc';
+import './renderers/icons/mk';
 export * from './renderers/Form/IconPickerIcons';
 export * from './renderers/Form/IconSelectStore';