amis 1.4.2-beta.13 → 1.4.2-beta.18

package/src/components/Tree.tsx

@@ -24,6 +24,20 @@ import Checkbox from './Checkbox';
 import {LocaleProps, localeable} from '../locale';
 import Spinner from './Spinner';
 
+interface IDropIndicator {
+  left: number;
+  top: number;
+  width: number;
+  height?: number;
+}
+
+export interface IDropInfo {
+  dragNode: Option | null;
+  node: Option;
+  position: 'top' | 'bottom' | 'self';
+  indicator: IDropIndicator;
+}
+
 interface TreeSelectorProps extends ThemeProps, LocaleProps {
   highlightTxt?: string;
 
@@ -97,6 +111,8 @@ interface TreeSelectorProps extends ThemeProps, LocaleProps {
   onDelete?: (value: Option) => void;
   onDeferLoad?: (option: Option) => void;
   onExpandTree?: (nodePathArr: any[]) => void;
+  draggable?: boolean;
+  onMove?: (dropInfo: IDropInfo) => void;
 }
 
 interface TreeSelectorState {
@@ -106,6 +122,9 @@ interface TreeSelectorState {
   isAdding: boolean;
   isEditing: boolean;
   editingItem: Option | null;
+
+  // 拖拽指示器
+  dropIndicator?: IDropIndicator;
 }
 
 export class TreeSelector extends React.Component<
@@ -146,6 +165,16 @@ export class TreeSelector extends React.Component<
   };
 
   unfolded: WeakMap<Object, boolean> = new WeakMap();
+  dragNode: Option | null;
+  dropInfo: IDropInfo | null;
+  startPoint: {
+    x: number;
+    y: number;
+  } = {
+    x: 0,
+    y: 0
+  };
+  root = React.createRef<HTMLDivElement>();
 
   constructor(props: TreeSelectorProps) {
     super(props);
@@ -168,7 +197,8 @@ export class TreeSelector extends React.Component<
       addingParent: null,
       isAdding: false,
       isEditing: false,
-      editingItem: null
+      editingItem: null,
+      dropIndicator: undefined
     };
 
     this.syncUnFolded(props);
@@ -603,6 +633,129 @@ export class TreeSelector extends React.Component<
     );
   }
 
+  getOffsetPosition(element: HTMLElement) {
+    let left = 0;
+    let top = 0;
+
+    while (element.offsetParent) {
+      left += element.offsetLeft;
+      top += element.offsetTop;
+      element = element.offsetParent as HTMLElement;
+    }
+    return {left, top};
+  }
+
+  @autobind
+  getDropInfo(e: React.DragEvent<Element>, node: Option): IDropInfo {
+    let rect = e.currentTarget.getBoundingClientRect();
+
+    const dragNode = this.dragNode;
+    const deltaX = Math.min(50, rect.width * 0.3);
+    const gap = node?.children?.length ? 0 : 16;
+
+    // 计算相对位置
+    let offset = this.getOffsetPosition(this.root.current!);
+    let targetOffset = this.getOffsetPosition(e.currentTarget as HTMLElement);
+    let left = targetOffset.left - offset.left;
+    let top = targetOffset.top - offset.top;
+
+    let {clientX, clientY} = e;
+
+    let position: IDropInfo['position'] =
+      clientY >= rect.top + rect.height / 2 ? 'bottom' : 'top';
+    let indicator;
+    if (position === 'bottom' && clientX >= this.startPoint.x + deltaX) {
+      position = 'self';
+      indicator = {
+        top: top,
+        left: left,
+        width: rect.width,
+        height: rect.height
+      };
+    } else {
+      indicator = {
+        top: position === 'bottom' ? top + rect.height : top,
+        left: left + gap,
+        width: rect.width - gap
+      };
+    }
+
+    return {
+      node,
+      dragNode,
+      position,
+      indicator
+    };
+  }
+
+  @autobind
+  updateDropIndicator(e: React.DragEvent<Element>, node: Option) {
+    const gap = node?.children?.length ? 0 : 16;
+    this.dropInfo = this.getDropInfo(e, node);
+    let {dragNode, indicator} = this.dropInfo;
+    if (node === dragNode) {
+      this.setState({dropIndicator: undefined});
+      return;
+    }
+    this.setState({
+      dropIndicator: indicator
+    });
+  }
+
+  @autobind
+  onDragStart(node: Option) {
+    let draggable = this.props.draggable;
+    return (e: React.DragEvent<Element>) => {
+      if (draggable) {
+        e.dataTransfer.effectAllowed = 'copyMove';
+
+        this.dragNode = node;
+        this.dropInfo = null;
+        this.startPoint = {
+          x: e.clientX,
+          y: e.clientY
+        };
+
+        if (node?.children?.length) {
+          this.unfolded.set(node, false);
+          this.forceUpdate();
+        }
+      } else {
+        this.dragNode = null;
+        this.dropInfo = null;
+      }
+      e.stopPropagation();
+    };
+  }
+
+  @autobind
+  onDragOver(node: Option) {
+    return (e: React.DragEvent<Element>) => {
+      if (!this.dragNode) {
+        return;
+      }
+      this.updateDropIndicator(e, node);
+      e.preventDefault();
+    };
+  }
+
+  @autobind
+  onDragEnd(dragNode: Option) {
+    return (e: React.DragEvent<Element>) => {
+      this.setState({
+        dropIndicator: undefined
+      });
+      let node = this.dropInfo?.node;
+      if (!this.dropInfo || !node || dragNode === node) {
+        return;
+      }
+      this.props.onMove?.(this.dropInfo);
+      this.dragNode = null;
+      this.dropInfo = null;
+      e.preventDefault();
+    };
+  }
+
   @autobind
   renderList(
     list: Options,
@@ -633,7 +786,8 @@ export class TreeSelector extends React.Component<
       createTip,
       editTip,
       removeTip,
-      translate: __
+      translate: __,
+      draggable
     } = this.props;
     const {
       value: stateValue,
@@ -729,7 +883,17 @@ export class TreeSelector extends React.Component<
                 'is-checked': checked,
                 'is-disabled': nodeDisabled
               })}
+              draggable={draggable}
+              onDragStart={this.onDragStart(item)}
+              onDragOver={this.onDragOver(item)}
+              onDragEnd={this.onDragEnd(item)}
             >
+              {draggable && (
+                <a className={cx('Tree-itemDrager drag-bar')}>
+                  <Icon icon="drag-bar" className="icon" />
+                </a>
+              )}
+
               {item.loading ? (
                 <Spinner
                   size="sm"
@@ -756,7 +920,7 @@ export class TreeSelector extends React.Component<
                 <i
                   className={cx(
                     `Tree-itemIcon ${
-                      (childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon')
+                      childrenItems ? 'Tree-folderIcon' : 'Tree-leafIcon'
                     }`
                   )}
                   onClick={() =>
@@ -766,9 +930,11 @@ export class TreeSelector extends React.Component<
                       : this.handleSelect(item))
                   }
                 >
-                  {getIcon(iconValue)
-                    ? <Icon icon={iconValue} className="icon"/>
-                    : <i className={iconValue}></i>}
+                  {getIcon(iconValue) ? (
+                    <Icon icon={iconValue} className="icon" />
+                  ) : (
+                    <i className={iconValue}></i>
+                  )}
                 </i>
               ) : null}
 
@@ -872,10 +1038,19 @@ export class TreeSelector extends React.Component<
       rootCreatable,
       rootCreateTip,
       disabled,
+      draggable,
       translate: __
     } = this.props;
     let options = this.props.options;
-    const {value, isAdding, addingParent, isEditing, inputValue} = this.state;
+    const {
+      value,
+      isAdding,
+      addingParent,
+      isEditing,
+      inputValue,
+      dropIndicator
+    } = this.state;
+
     let addBtn = null;
 
     if (creatable && rootCreatable !== false && hideRoot) {
@@ -896,8 +1071,10 @@ export class TreeSelector extends React.Component<
       <div
         className={cx(`Tree ${className || ''}`, {
           'Tree--outline': showOutline,
-          'is-disabled': disabled
+          'is-disabled': disabled,
+          'is-draggable': draggable
         })}
+        ref={this.root}
       >
         {(options && options.length) || addBtn || hideRoot === false ? (
           <ul className={cx('Tree-list')}>
@@ -957,6 +1134,15 @@ export class TreeSelector extends React.Component<
         ) : (
           <div className={cx('Tree-placeholder')}>{placeholder}</div>
         )}
+
+        {dropIndicator && (
+          <div
+            className={cx('Tree-dropIndicator', {
+              'Tree-dropIndicator--hover': !!dropIndicator.height
+            })}
+            style={dropIndicator}
+          />
+        )}
       </div>
     );
   }

package/src/components/condition-builder/Field.tsx

@@ -96,7 +96,9 @@ export class ConditionField extends React.Component<
               options={this.state.options}
               value={[value]}
               option2value={option2value}
-              onChange={([value]: any) => onChange(value)}
+              onChange={(value: any) =>
+                onChange(Array.isArray(value) ? value[0] : value)
+              }
             />
           </>
         )}

package/src/components/icons.tsx

@@ -70,6 +70,10 @@ import ExpandAltIcon from '../icons/expand-alt.svg';
 import CompressAltIcon from '../icons/compress-alt.svg';
 import TransparentIcon from '../icons/transparent.svg';
 import LoadingOutline from '../icons/loading-outline.svg';
+import AlertSuccess from '../icons/alert-success.svg';
+import AlertInfo from '../icons/alert-info.svg';
+import AlertWarning from '../icons/alert-warning.svg';
+import AlertDanger from '../icons/alert-danger.svg';
 
 // 兼容原来的用法，后续不直接试用。
 
@@ -166,6 +170,10 @@ registerIcon('expand-alt', ExpandAltIcon);
 registerIcon('compress-alt', CompressAltIcon);
 registerIcon('transparent', TransparentIcon);
 registerIcon('loading-outline', LoadingOutline);
+registerIcon('alert-success', AlertSuccess);
+registerIcon('alert-info', AlertInfo);
+registerIcon('alert-warning', AlertWarning);
+registerIcon('alert-danger', AlertDanger);
 
 export function Icon({
   icon,

package/src/envOverwrite.ts

@@ -4,18 +4,31 @@
 
 import {SchemaNode, Schema} from './types';
 import {RendererProps, RendererConfig, addSchemaFilter} from './factory';
+import {findObjectsWithKey} from './utils/helper';
 const isMobile = (window as any).matchMedia?.('(max-width: 768px)').matches
   ? true
   : false;
 
-addSchemaFilter(function (schema: Schema, renderer, props?: any) {
-  if (schema && schema.mobile && isMobile) {
-    return {...schema, ...schema.mobile};
+// 这里不能用 addSchemaFilter 是因为还需要更深层的替换，比如 select 里的 options
+export const envOverwrite = (schema: any, locale?: string) => {
+  if (schema.mobile && isMobile) {
+    Object.assign(schema, schema.mobile);
+    delete schema.mobile;
   }
 
-  if (props?.locale && schema[props.locale]) {
-    return {...schema, ...schema[props.locale]};
+  if (locale) {
+    let schemaNodes = findObjectsWithKey(schema, locale);
+    for (let schemaNode of schemaNodes) {
+      Object.assign(schemaNode, schemaNode[locale]);
+      delete schemaNode[locale];
+    }
   }
 
-  return schema;
-});
+  if (isMobile) {
+    let schemaNodes = findObjectsWithKey(schema, 'mobile');
+    for (let schemaNode of schemaNodes) {
+      Object.assign(schemaNode, schemaNode['mobile']);
+      delete schemaNode['mobile'];
+    }
+  }
+};

package/src/factory.tsx

@@ -3,7 +3,14 @@ import {RendererStore, IRendererStore, IIRendererStore} from './store/index';
 import {getEnv, destroy} from 'mobx-state-tree';
 import {wrapFetcher} from './utils/api';
 import {normalizeLink} from './utils/normalizeLink';
-import {findIndex, promisify, qsparse, string2regExp} from './utils/helper';
+import {
+  findIndex,
+  isObject,
+  JSONTraverse,
+  promisify,
+  qsparse,
+  string2regExp
+} from './utils/helper';
 import {
   Api,
   fetcherResult,
@@ -25,6 +32,7 @@ import {getDefaultLocale, makeTranslator, LocaleProps} from './locale';
 import ScopedRootRenderer, {RootRenderProps} from './Root';
 import {HocStoreFactory} from './WithStore';
 import {EnvContext, RendererEnv} from './env';
+import {envOverwrite} from './envOverwrite';
 
 export interface TestFunc {
   (
@@ -127,12 +135,20 @@ export interface RenderOptions {
   affixOffsetTop?: number;
   affixOffsetBottom?: number;
   richTextToken?: string;
+  /**
+   * 替换文本，用于实现 URL 替换、语言替换等
+   */
+  replaceText?: {[propName: string]: any};
+  /**
+   * 文本替换的黑名单，因为属性太多了所以改成黑名单的 fangs
+   */
+  replaceTextIgnoreKeys?: String[];
   [propName: string]: any;
 }
 
 export interface fetcherConfig {
   url: string;
-  method?: 'get' | 'post' | 'put' | 'patch' | 'delete';
+  method?: 'get' | 'post' | 'put' | 'patch' | 'delete' | 'jsonp';
   data?: any;
   config?: any;
 }
@@ -275,19 +291,19 @@ const defaultOptions: RenderOptions = {
   },
   isCancel() {
     console.error(
-      'Please implements this. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
+      'Please implement isCancel. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
     );
     return false;
   },
   updateLocation() {
     console.error(
-      'Please implements this. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
+      'Please implement updateLocation. see https://baidu.gitee.io/amis/docs/start/getting-started#%E4%BD%BF%E7%94%A8%E6%8C%87%E5%8D%97'
     );
   },
   alert,
   confirm,
   notify: (type, msg, conf) =>
-    toast[type] ? toast[type](msg) : console.warn('[Notify]', type, msg),
+    toast[type] ? toast[type](msg, conf) : console.warn('[Notify]', type, msg),
 
   jumpTo: (to: string, action?: any) => {
     if (to === 'goBack') {
@@ -335,7 +351,15 @@ const defaultOptions: RenderOptions = {
   },
   // 用于跟踪用户在界面中的各种操作
   tracker(eventTrack: EventTrack, props: PlainObject) {},
-  rendererResolver: resolveRenderer
+  rendererResolver: resolveRenderer,
+  replaceTextIgnoreKeys: [
+    'type',
+    'name',
+    'mode',
+    'target',
+    'reload',
+    'persistData'
+  ]
 };
 let stores: {
   [propName: string]: IRendererStore;
@@ -355,6 +379,9 @@ export function render(
   const translate = props.translate || makeTranslator(locale);
   let store = stores[options.session || 'global'];
 
+  // 根据环境覆盖 schema，这个要在最前面做，不然就无法覆盖 validations
+  envOverwrite(schema, locale);
+
   if (!store) {
     options = {
       ...defaultOptions,
@@ -387,6 +414,25 @@ export function render(
     env.locale = locale;
   }
 
+  // 进行文本替换
+  if (env.replaceText && isObject(env.replaceText)) {
+    const replaceKeys = Object.keys(env.replaceText);
+    replaceKeys.sort().reverse(); // 避免用户将短的放前面
+    const replaceTextIgnoreKeys = new Set(env.replaceTextIgnoreKeys || []);
+    JSONTraverse(schema, (value: any, key: string, object: any) => {
+      if (typeof value === 'string' && !replaceTextIgnoreKeys.has(key)) {
+        for (const replaceKey of replaceKeys) {
+          if (~value.indexOf(replaceKey)) {
+            object[key] = value.replaceAll(
+              replaceKey,
+              env.replaceText[replaceKey]
+            );
+          }
+        }
+      }
+    });
+  }
+
   return (
     <EnvContext.Provider value={env}>
       <ScopedRootRenderer

package/src/icons/alert-danger.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M667.904 704.32L508.992 546.56l-157.888 158.912-45.376-45.056 157.824-158.976L304.64 343.488l45.12-45.376 158.912 157.824 157.888-158.848 45.44 45.056L553.984 501.12l158.976 157.888-45.12 45.44zM510.528 64a448 448 0 1 0 2.944 896 448 448 0 0 0-2.944-896z" fill="#E8684A"></path></svg>

package/src/icons/alert-info.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M512 64A448 448 0 1 1 512 960 448 448 0 0 1 512 64z m32 354.944h-64V768h64V418.944zM512 256a38.4 38.4 0 1 0-0.128 76.672A38.4 38.4 0 0 0 512 256z" fill="#2468F2"></path></svg>

package/src/icons/alert-success.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M449.856 706.56l-45.44-45.056 0.128-0.064L268.16 526.016l45.12-45.44 136.32 135.488 270.592-272.384 45.376 45.056-315.712 317.888zM510.528 64A448 448 0 1 0 960 510.528 448 448 0 0 0 510.528 64z" fill="#0BC286"></path></svg>

package/src/icons/alert-warning.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M512 64A448 448 0 1 1 512 960 448 448 0 0 1 512 64z m0 627.2A38.4 38.4 0 1 0 512 768a38.4 38.4 0 0 0 0-76.8zM544 256h-64v349.12h64V256z" fill="#FFB200"></path></svg>

package/src/icons/drag-bar.svg

@@ -1,7 +1,13 @@
-<svg viewBox="0 0 428 684" version="1.1" 
-    xmlns="http://www.w3.org/2000/svg" 
-    xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g id="drag-bar" fill="currentColor" fill-rule="nonzero">
-        <path d="M171.333333,86 C171.333333,133.128298 133.128298,171.333333 86,171.333333 C38.8717015,171.333333 0.666667,133.128298 0.666667,86 C0.666667,38.8717015 38.8717015,0.666667 86,0.666667 C133.128298,0.666667 171.333333,38.8717015 171.333333,86 L171.333333,86 Z M86,256.666667 C38.8717015,256.666667 0.666667,294.871702 0.666667,342 C0.666667,389.128298 38.8717015,427.333333 86,427.333333 C133.128298,427.333333 171.333333,389.128298 171.333333,342 C171.333333,294.871702 133.128298,256.666667 86,256.666667 L86,256.666667 Z M86,512.666667 C38.8717015,512.666667 0.666667,550.871702 0.666667,598 C0.666667,645.128298 38.8717015,683.333333 86,683.333333 C133.128298,683.333333 171.333333,645.128298 171.333333,598 C171.333333,550.871702 133.128298,512.666667 86,512.666667 L86,512.666667 Z M342,171.333333 C389.128298,171.333333 427.333333,133.128298 427.333333,86 C427.333333,38.8717015 389.128298,0.666667 342,0.666667 C294.871702,0.666667 256.666667,38.8717015 256.666667,86 C256.666667,133.128298 294.871702,171.333333 342,171.333333 L342,171.333333 Z M342,256.666667 C294.871702,256.666667 256.666667,294.871702 256.666667,342 C256.666667,389.128298 294.871702,427.333333 342,427.333333 C389.128298,427.333333 427.333333,389.128298 427.333333,342 C427.333333,294.871702 389.128298,256.666667 342,256.666667 L342,256.666667 Z M342,512.666667 C294.871702,512.666667 256.666667,550.871702 256.666667,598 C256.666667,645.128298 294.871702,683.333333 342,683.333333 C389.128298,683.333333 427.333333,645.128298 427.333333,598 C427.333333,575.368193 418.342883,553.663326 402.339778,537.660222 C386.336674,521.657117 364.631807,512.666667 342,512.666667 L342,512.666667 Z" id="形状"></path>
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g transform="translate(5.000000, 1.000000)" stroke-width="1" stroke="currentColor">
+        <circle cx="1" cy="1" r="1"></circle>
+        <circle cx="5" cy="1" r="1"></circle>
+        <circle cx="1" cy="5" r="1"></circle>
+        <circle cx="5" cy="5" r="1"></circle>
+        <circle cx="1" cy="9" r="1"></circle>
+        <circle cx="5" cy="9" r="1"></circle>
+        <circle cx="1" cy="13" r="1"></circle>
+        <circle cx="5" cy="13" r="1"></circle>
     </g>
-</svg>
+</svg>

package/src/index.tsx

@@ -56,6 +56,7 @@ import './renderers/Form/ButtonToolbar';
 import './renderers/Breadcrumb';
 import './renderers/DropDownButton';
 import './renderers/Collapse';
+import './renderers/CollapseGroup';
 import './renderers/Color';
 import './renderers/CRUD';
 import './renderers/Pagination';
@@ -167,6 +168,7 @@ import './renderers/Markdown';
 import './renderers/TableView';
 import './renderers/Code';
 import './renderers/WebComponent';
+import './renderers/GridNav';
 
 import Scoped, {ScopedContext} from './Scoped';
 

package/src/renderers/Alert.tsx

@@ -1,7 +1,12 @@
 import {Renderer, RendererProps} from '../factory';
 import React from 'react';
 import Alert, {AlertProps} from '../components/Alert2';
-import {BaseSchema, SchemaCollection} from '../Schema';
+import {
+  BaseSchema,
+  SchemaObject,
+  SchemaCollection,
+  SchemaIcon
+} from '../Schema';
 
 /**
  * Alert 提示渲染器。
@@ -13,6 +18,11 @@ export interface AlertSchema extends BaseSchema {
    */
   type: 'alert';
 
+  /**
+   * 提示框标题
+   */
+  title?: string;
+
   /**
    * 内容区域
    */
@@ -27,6 +37,26 @@ export interface AlertSchema extends BaseSchema {
    * 是否显示关闭按钮
    */
   showCloseButton?: boolean;
+
+  /**
+   * 关闭按钮CSS类名
+   */
+  closeButtonClassName?: string;
+
+  /**
+   * 是否显示ICON
+   */
+  showIcon?: boolean;
+
+  /**
+   * 左侧图标
+   */
+  icon?: SchemaIcon;
+
+  /**
+   * 图标CSS类名
+   */
+  iconClassName?: string;
 }
 
 @Renderer({

package/src/renderers/Card.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
 import {Renderer, RendererProps} from '../factory';
-import {SchemaNode, Schema, Action} from '../types';
+import {SchemaNode, Schema, Action, PlainObject} from '../types';
 import {filter, evalExpression} from '../utils/tpl';
 import cx from 'classnames';
 import Checkbox from '../components/Checkbox';
@@ -11,7 +11,8 @@ import {
   isVisible,
   isDisabled,
   noop,
-  isClickOnInput
+  isClickOnInput,
+  hashCode
 } from '../utils/helper';
 import {resolveVariable} from '../utils/tpl-builtin';
 import QuickEdit, {SchemaQuickEdit} from './QuickEdit';
@@ -128,6 +129,7 @@ export interface CardSchema extends BaseSchema {
     avatar?: SchemaUrlPath;
 
     avatarText?: SchemaTpl;
+    avatarTextBackground?: String[];
     avatarTextClassName?: SchemaClassName;
 
     /**
@@ -485,6 +487,7 @@ export class Card extends React.Component<CardProps> {
         highlight: highlightTpl,
         avatar: avatarTpl,
         avatarText: avatarTextTpl,
+        avatarTextBackground,
         title: titleTpl,
         subTitle: subTitleTpl,
         subTitlePlaceholder,
@@ -500,6 +503,13 @@ export class Card extends React.Component<CardProps> {
       const title = filter(titleTpl, data);
       const subTitle = filter(subTitleTpl, data);
       const desc = filter(header?.description || descTpl, data);
+      const avatarTextStyle: PlainObject = {};
+      if (avatarText && avatarTextBackground && avatarTextBackground.length) {
+        avatarTextStyle['background'] =
+          avatarTextBackground[
+            Math.abs(hashCode(avatarText)) % avatarTextBackground.length
+          ];
+      }
 
       heading = (
         <div className={cx('Card-heading', header?.className)}>
@@ -524,6 +534,7 @@ export class Card extends React.Component<CardProps> {
                 'Card-avtarText',
                 header?.avatarTextClassName || avatarTextClassName
               )}
+              style={avatarTextStyle}
             >
               {avatarText}
             </span>