amis 1.4.2-beta.1 → 1.4.2-beta.15

package/src/envOverwrite.ts

@@ -4,19 +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,8 +3,24 @@ 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 {Api, fetcherResult, Payload, SchemaNode, Schema, Action} from './types';
+import {
+  findIndex,
+  isObject,
+  JSONTraverse,
+  promisify,
+  qsparse,
+  string2regExp
+} from './utils/helper';
+import {
+  Api,
+  fetcherResult,
+  Payload,
+  SchemaNode,
+  Schema,
+  Action,
+  EventTrack,
+  PlainObject
+} from './types';
 import {observer} from 'mobx-react';
 import Scoped from './Scoped';
 import {getTheme, ThemeInstance, ThemeProps} from './theme';
@@ -16,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 {
   (
@@ -58,6 +75,10 @@ export interface RendererProps extends ThemeProps, LocaleProps {
   };
   defaultData?: object;
   className?: any;
+  /**
+   * 是否使用移动端交互
+   */
+  useMobileUI?: boolean;
   [propName: string]: any;
 }
 
@@ -114,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;
 }
@@ -262,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') {
@@ -320,7 +349,17 @@ const defaultOptions: RenderOptions = {
   copy(contents: string) {
     console.error('copy contents', contents);
   },
-  rendererResolver: resolveRenderer
+  // 用于跟踪用户在界面中的各种操作
+  tracker(eventTrack: EventTrack, props: PlainObject) {},
+  rendererResolver: resolveRenderer,
+  replaceTextIgnoreKeys: [
+    'type',
+    'name',
+    'mode',
+    'target',
+    'reload',
+    'persistData'
+  ]
 };
 let stores: {
   [propName: string]: IRendererStore;
@@ -340,12 +379,15 @@ export function render(
   const translate = props.translate || makeTranslator(locale);
   let store = stores[options.session || 'global'];
 
+  // 根据环境覆盖 schema，这个要在最前面做，不然就无法覆盖 validations
+  envOverwrite(schema, locale);
+
   if (!store) {
     options = {
       ...defaultOptions,
       ...options,
       fetcher: options.fetcher
-        ? wrapFetcher(options.fetcher)
+        ? wrapFetcher(options.fetcher, options.tracker)
         : defaultOptions.fetcher,
       confirm: promisify(
         options.confirm || defaultOptions.confirm || window.confirm
@@ -372,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
@@ -416,7 +477,7 @@ export function updateEnv(options: Partial<RenderOptions>, session = 'global') {
   };
 
   if (options.fetcher) {
-    options.fetcher = wrapFetcher(options.fetcher) as any;
+    options.fetcher = wrapFetcher(options.fetcher, options.tracker) as any;
   }
 
   if (options.confirm) {

package/src/hooks/index.ts

@@ -0,0 +1,5 @@
+/**
+ * @file 常用 hooks
+ */
+export {default as useSetState} from './use-set-state';
+export {default as useUpdateEffect} from './use-update-effect';

package/src/hooks/use-set-state.ts

@@ -0,0 +1,19 @@
+import {useCallback, useState} from 'react';
+import isFunction from 'lodash/isFunction';
+
+const useSetState = <T extends object>(
+  initialState: T = {} as T
+): [T, (patch: Partial<T> | ((prevState: T) => Partial<T>)) => void] => {
+  const [state, setState] = useState<T>(initialState);
+
+  const setMergeState = useCallback(patch => {
+    setState(prevState => ({
+      ...prevState,
+      ...(isFunction(patch) ? patch(prevState) : patch)
+    }));
+  }, []);
+
+  return [state, setMergeState];
+};
+
+export default useSetState;

package/src/hooks/use-touch.ts

@@ -0,0 +1,100 @@
+import {useCallback, useRef} from 'react';
+
+const MIN_DISTANCE = 10;
+
+type Direction = '' | 'vertical' | 'horizontal';
+
+function getDirection(x: number, y: number) {
+  if (x > y && x > MIN_DISTANCE) {
+    return 'horizontal';
+  }
+  if (y > x && y > MIN_DISTANCE) {
+    return 'vertical';
+  }
+  return '';
+}
+
+const INITIAL_STATE = {
+  startX: 0,
+  startY: 0,
+  deltaX: 0,
+  deltaY: 0,
+  offsetX: 0,
+  offsetY: 0,
+  direction: '' as Direction
+};
+
+type StateType = Partial<typeof INITIAL_STATE>;
+type StateFunctionType = (value: StateType) => typeof INITIAL_STATE;
+
+const useTouch = () => {
+  const refState = useRef(INITIAL_STATE);
+  const innerState = refState.current;
+
+  const update = (value: StateType | StateFunctionType) => {
+    if (typeof value === 'function') {
+      value = value(refState.current);
+    }
+    Object.entries(value).forEach(([k, v]) => {
+      //@ts-ignore
+      refState.current[k] = v;
+    });
+  };
+
+  const isVertical = useCallback(
+    () => innerState.direction === 'vertical',
+    [innerState.direction]
+  );
+  const isHorizontal = useCallback(
+    () => innerState.direction === 'horizontal',
+    [innerState.direction]
+  );
+
+  const reset = () => {
+    update({
+      deltaX: 0,
+      deltaY: 0,
+      offsetX: 0,
+      offsetY: 0,
+      direction: ''
+    });
+  };
+
+  const start = ((event: TouchEvent) => {
+    reset();
+    update({
+      startX: event.touches[0].clientX,
+      startY: event.touches[0].clientY
+    });
+  }) as EventListener;
+
+  const move = ((event: TouchEvent) => {
+    const touch = event.touches[0];
+
+    update(value => {
+      // Fix: Safari back will set clientX to negative number
+      const newState = {...value} as typeof innerState;
+
+      newState.deltaX = touch.clientX < 0 ? 0 : touch.clientX - newState.startX;
+      newState.deltaY = touch.clientY - newState.startY;
+      newState.offsetX = Math.abs(newState.deltaX);
+      newState.offsetY = Math.abs(newState.deltaY);
+
+      if (!newState.direction) {
+        newState.direction = getDirection(newState.offsetX, newState.offsetY);
+      }
+      return newState;
+    });
+  }) as EventListener;
+
+  return {
+    ...innerState,
+    move,
+    start,
+    reset,
+    isVertical,
+    isHorizontal
+  };
+};
+
+export default useTouch;

package/src/hooks/use-update-effect.ts

@@ -0,0 +1,16 @@
+import {useEffect, useRef} from 'react';
+
+const useUpdateEffect: typeof useEffect = (effect, deps) => {
+  const isMounted = useRef(false);
+
+  useEffect(() => {
+    if (!isMounted.current) {
+      isMounted.current = true;
+    } else {
+      return effect();
+    }
+    return undefined;
+  }, deps);
+};
+
+export default useUpdateEffect;

package/src/icons/download.svg

@@ -0,0 +1,4 @@
+<svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="download" class="svg-inline--fa fa-download fa-w-16" role="img"
+    xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+    <path fill="currentColor" d="M216 0h80c13.3 0 24 10.7 24 24v168h87.7c17.8 0 26.7 21.5 14.1 34.1L269.7 378.3c-7.5 7.5-19.8 7.5-27.3 0L90.1 226.1c-12.6-12.6-3.7-34.1 14.1-34.1H192V24c0-13.3 10.7-24 24-24zm296 376v112c0 13.3-10.7 24-24 24H24c-13.3 0-24-10.7-24-24V376c0-13.3 10.7-24 24-24h146.7l49 49c20.1 20.1 52.5 20.1 72.6 0l49-49H488c13.3 0 24 10.7 24 24zm-124 88c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20zm64 0c0-11-9-20-20-20s-20 9-20 20 9 20 20 20 20-9 20-20z"></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';
@@ -111,12 +112,14 @@ import './renderers/Form/InputColor';
 import './renderers/Form/ChainedSelect';
 import './renderers/Form/NestedSelect';
 import './renderers/Form/Transfer';
+import './renderers/Form/TransferPicker';
 import './renderers/Form/InputTable';
 import './renderers/Form/Picker';
 import './renderers/Form/IconPicker';
 import './renderers/Form/Formula';
 import './renderers/Form/FieldSet';
 import './renderers/Form/TabsTransfer';
+import './renderers/Form/TabsTransferPicker';
 import './renderers/Form/Group';
 import './renderers/Form/InputGroup';
 import './renderers/Grid';
@@ -133,6 +136,7 @@ import './renderers/PaginationWrapper';
 import './renderers/Panel';
 import './renderers/Plain';
 import './renderers/Property';
+import './renderers/Portlet';
 import './renderers/Spinner';
 import './renderers/Table/index';
 import './renderers/Tabs';
@@ -164,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/locale/de-DE.ts

@@ -181,6 +181,7 @@ register('de-DE', {
   'Transfer.configError': 'Konfigurationsfehler',
   'Transfer.refreshIcon': 'Zum Aktualisieren klicken',
   'Transfer.searchKeyword': 'Stichwörter eingeben',
+  'Transfer.available': 'Verfügbar',
   'Transfer.selectd': 'Ausgewählt',
   'Transfer.selectFromLeft': 'Von links auswählen',
   'Tree.addChild': 'Untergeordnetes Element hinzufügen',
@@ -222,6 +223,7 @@ register('de-DE', {
   'Wizard.saveAndNext': 'Speichern & Weiter',
   'year-to-year': '{{from}} - {{to}}',
   'Year.placeholder': 'Wählen Sie ein Jahr',
+  'reload': 'Neu laden',
   'rotate': 'Drehen',
   'Editor.fullscreen': 'Schirmfüllend Modus',
   'Editor.exitFullscreen': 'Zurücktreten Schirmfüllend Modus',

package/src/locale/en-US.ts

@@ -85,6 +85,7 @@ register('en-US', {
   'Excel.placeholder': `Drag 'n' drop excel here, or click to select`,
   'fetchFailed': 'Fetch api failed',
   'File.continueAdd': 'Continue add',
+  'File.downloadTpl': 'Download template',
   'File.dragDrop': `Drag 'n' drop some files here`,
   'File.errorRetry': 'File upload failed, please try again',
   'File.failed': 'Failed files.',
@@ -182,6 +183,7 @@ register('en-US', {
   'Transfer.configError': 'Config error',
   'Transfer.refreshIcon': 'Click to refresh',
   'Transfer.searchKeyword': 'Enter keywords',
+  'Transfer.available': 'Available',
   'Transfer.selectd': 'Selected',
   'Transfer.selectFromLeft': 'Select from the left',
   'Tree.addChild': 'Add child',
@@ -223,6 +225,7 @@ register('en-US', {
   'Wizard.saveAndNext': 'Save & Next',
   'year-to-year': '{{from}} - {{to}}',
   'Year.placeholder': 'Select a Year',
+  'reload': 'Reload',
   'rotate': 'Rotate',
   'Editor.fullscreen': 'full screen',
   'Editor.exitFullscreen': 'exit fullscreen mode',

package/src/locale/zh-CN.ts

@@ -87,6 +87,7 @@ register('zh-CN', {
   'Excel.placeholder': '拖拽 Excel 到这，或点击上传',
   'fetchFailed': '初始化失败',
   'File.continueAdd': '继续添加',
+  'File.downloadTpl': '下载模板',
   'File.dragDrop': '将文件拖拽到此处',
   'File.errorRetry': '文件上传失败请重试',
   'File.failed': '失败文件',
@@ -186,8 +187,9 @@ register('zh-CN', {
   'Transfer.configError': '配置错误，选项无法与左侧选项对应',
   'Transfer.refreshIcon': '点击刷新重新加载',
   'Transfer.searchKeyword': '请输入关键字',
-  'Transfer.selectd': '当前选择',
-  'Transfer.selectFromLeft': '请从左侧选择数据',
+  'Transfer.available': '可选项',
+  'Transfer.selectd': '已选项',
+  'Transfer.selectFromLeft': '请选择左侧数据',
   'Tree.addChild': '添加子节点',
   'Tree.addRoot': '添加一级节点',
   'Tree.editNode': '编辑该节点',
@@ -227,6 +229,7 @@ register('zh-CN', {
   'Wizard.saveAndNext': '保存并下一步',
   'year-to-year': '{{from}} 年 - {{to}} 年',
   'Year.placeholder': '请选择年',
+  'reload': '刷新',
   'rotate': '旋转',
   'Editor.fullscreen': '全屏',
   'Editor.exitFullscreen': '退出全屏',

package/src/renderers/Action.tsx

@@ -4,8 +4,14 @@ import {Renderer, RendererProps} from '../factory';
 import {filter} from '../utils/tpl';
 import Button from '../components/Button';
 import pick from 'lodash/pick';
+import omit from 'lodash/omit';
 
 export interface ButtonSchema extends BaseSchema {
+  /**
+   * 主要用于用户行为跟踪里区分是哪个按钮
+   */
+  id?: string;
+
   /**
    * 是否为块状展示，默认为内联。
    */
@@ -332,6 +338,7 @@ export type ActionSchema =
   | VanillaAction;
 
 const ActionProps = [
+  'id',
   'dialog',
   'drawer',
   'url',
@@ -570,7 +577,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
 
   @autobind
   async handleAction(e: React.MouseEvent<any>) {
-    const {onAction, disabled, countDown} = this.props;
+    const {onAction, disabled, countDown, env} = this.props;
+
     // https://reactjs.org/docs/legacy-event-pooling.html
     e.persist();
     let onClick = this.props.onClick;
@@ -592,9 +600,26 @@ export class Action extends React.Component<ActionProps, ActionState> {
 
     e.preventDefault();
     const action = pick(this.props, ActionProps) as ActionSchema;
+    const actionType = action.actionType;
+
+    // ajax 会在 wrapFetcher 里记录，这里再处理就重复了，因此去掉
+    // add 一般是 input-table 之类的，会触发 formItemChange，为了避免重复也去掉
+    if (
+      actionType !== 'ajax' &&
+      actionType !== 'download' &&
+      actionType !== 'add'
+    ) {
+      env?.tracker(
+        {
+          eventType: actionType || this.props.type || 'click',
+          eventData: omit(action, ['type', 'actionType', 'tooltipPlacement'])
+        },
+        this.props
+      );
+    }
 
     // download 是一种 ajax 的简写
-    if (action.actionType === 'download') {
+    if (actionType === 'download') {
       action.actionType = 'ajax';
       const api = normalizeApi((action as AjaxActionSchema).api);
       api.responseType = 'blob';
@@ -798,6 +823,7 @@ export class ActionRenderer extends React.Component<
     return (
       <Action
         {...(rest as any)}
+        env={env}
         disabled={disabled || btnDisabled}
         onAction={this.handleAction}
         loading={loading}

package/src/renderers/AnchorNav.tsx

@@ -65,6 +65,8 @@ export interface AnchorNavSchema extends BaseSchema {
    * 楼层样式名
    */
   sectionClassName?: SchemaClassName;
+
+  direction?: 'vertical' | 'horizontal';
 }
 
 export interface AnchorNavProps
@@ -148,6 +150,7 @@ export default class AnchorNav extends React.Component<
       className,
       linkClassName,
       sectionClassName,
+      direction,
       sectionRender,
       render,
       data
@@ -187,6 +190,7 @@ export default class AnchorNav extends React.Component<
         sectionClassName={sectionClassName}
         onSelect={this.handleSelect}
         active={this.state.active}
+        direction={direction}
       >
         {children}
       </CAnchorNav>

package/src/renderers/Avatar.tsx

@@ -10,7 +10,11 @@ import {
   SchemaUrlPath
 } from '../Schema';
 import {BadgeSchema, withBadge} from '../components/Badge';
-import {isPureVariable, resolveVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
+import {
+  isPureVariable,
+  resolveVariable,
+  resolveVariableAndFilter
+} from '../utils/tpl-builtin';
 
 /**
  * Avatar 用户头像显示
@@ -102,15 +106,15 @@ export class AvatarField extends React.Component<AvatarProps, object> {
     };
 
     if (isPureVariable(text)) {
-      text = resolveVariable(text, data);
+      text = resolveVariableAndFilter(text, data);
     }
 
     if (isPureVariable(src)) {
-      src = resolveVariable(src, data);
+      src = resolveVariableAndFilter(src, data, '| raw');
     }
 
     if (isPureVariable(icon)) {
-      icon = resolveVariable(icon, data);
+      icon = resolveVariableAndFilter(icon, data);
     }
 
     let avatar = <i className={icon} />;

package/src/renderers/Breadcrumb.tsx

@@ -77,7 +77,11 @@ export class BreadcrumbField extends React.Component<BreadcrumbProps, object> {
 
     const crumbItems = items
       ? items
-      : (resolveVariable(source, data) as Array<BreadcrumbItemSchema>);
+      : (resolveVariableAndFilter(
+          source,
+          data,
+          '| raw'
+        ) as Array<BreadcrumbItemSchema>);
 
     const crumbs = crumbItems
       .map<React.ReactNode>((item, index) => (