amis 1.6.2 → 1.6.3

package/src/components/formula/FuncList.tsx

@@ -1,17 +1,28 @@
 import React from 'react';
+
 import {themeable, ThemeProps} from '../../theme';
 import Collapse from '../Collapse';
 import CollapseGroup from '../CollapseGroup';
 import SearchBox from '../SearchBox';
 import type {FuncGroup, FuncItem} from './Editor';
+import {generateIcon} from '../../utils/icon';
 
 export interface FuncListProps extends ThemeProps {
+  title?: string;
+  descClassName?: string;
+  bodyClassName?: string;
   data: Array<FuncGroup>;
   onSelect?: (item: FuncItem) => void;
 }
 
 export function FuncList(props: FuncListProps) {
-  const cx = props.classnames;
+  const {
+    title,
+    className,
+    classnames: cx,
+    bodyClassName,
+    descClassName
+  } = props;
   const [filteredFuncs, setFiteredFuncs] = React.useState(props.data);
   const [activeFunc, setActiveFunc] = React.useState<any>(null);
   function onSearch(term: string) {
@@ -29,52 +40,71 @@ export function FuncList(props: FuncListProps) {
   }
 
   return (
-    <div className={cx('FormulaFuncList')}>
-      <SearchBox
-        className="FormulaFuncList-searchBox"
-        mini={false}
-        onSearch={onSearch}
-      />
-      <div className={cx('FormulaFuncList-columns')}>
-        <CollapseGroup
-          className="FormulaFuncList-group"
-          defaultActiveKey={filteredFuncs[0]?.groupName}
-          accordion
-        >
-          {filteredFuncs.map(item => (
-            <Collapse
-              headingClassName="FormulaFuncList-groupTitle"
-              bodyClassName="FormulaFuncList-groupBody"
-              propKey={item.groupName}
-              header={item.groupName}
-              key={item.groupName}
+    <div className={cx('FormulaEditor-FuncList', className)}>
+      <div className={cx('FormulaEditor-panel')}>
+        <div className={cx('FormulaEditor-panel-header')}>{title}</div>
+        <div className={cx('FormulaEditor-panel-body')}>
+          <div className={cx('FormulaEditor-FuncList-searchBox')}>
+            <SearchBox mini={false} onSearch={onSearch} />
+          </div>
+          <div className={cx('FormulaEditor-FuncList-body', bodyClassName)}>
+            <CollapseGroup
+              className={cx('FormulaEditor-FuncList-collapseGroup')}
+              defaultActiveKey={filteredFuncs[0]?.groupName}
+              expandIcon={
+                generateIcon(
+                  cx,
+                  'fa fa-chevron-right FormulaEditor-FuncList-expandIcon',
+                  'Icon'
+                )!
+              }
+              accordion
             >
-              {item.items.map(item => (
-                <div
-                  className={cx(
-                    `FormulaFuncList-funcItem ${
-                      item.name === activeFunc?.name ? 'is-active' : ''
-                    }`
-                  )}
-                  onMouseEnter={() => setActiveFunc(item)}
-                  onClick={() => props.onSelect?.(item)}
-                  key={item.name}
+              {filteredFuncs.map(item => (
+                <Collapse
+                  className={cx('FormulaEditor-FuncList-collapse')}
+                  headingClassName={cx('FormulaEditor-FuncList-groupTitle')}
+                  bodyClassName={cx('FormulaEditor-FuncList-groupBody')}
+                  propKey={item.groupName}
+                  header={item.groupName}
+                  key={item.groupName}
                 >
-                  {item.name}
-                </div>
+                  {item.items.map(item => (
+                    <div
+                      className={cx('FormulaEditor-FuncList-item', {
+                        'is-active': item.name === activeFunc?.name
+                      })}
+                      onMouseEnter={() => setActiveFunc(item)}
+                      onClick={() => props.onSelect?.(item)}
+                      key={item.name}
+                    >
+                      {item.name}
+                    </div>
+                  ))}
+                </Collapse>
               ))}
-            </Collapse>
-          ))}
-        </CollapseGroup>
-        <div className={cx('FormulaFuncList-column')}>
-          {activeFunc ? (
-            <div className={cx('FormulaFuncList-funcDetail')}>
-              <pre>
-                <code>{activeFunc.example}</code>
-              </pre>
-              <div>{activeFunc.description}</div>
-            </div>
-          ) : null}
+            </CollapseGroup>
+          </div>
+        </div>
+      </div>
+
+      <div className={cx('FormulaEditor-panel')}>
+        <div className={cx('FormulaEditor-panel-header')}>
+          {activeFunc?.name || ''}
+        </div>
+        <div className={cx('FormulaEditor-panel-body')}>
+          <div className={cx('FormulaEditor-FuncList-doc', descClassName)}>
+            {activeFunc ? (
+              <>
+                <pre>
+                  <code>{activeFunc.example}</code>
+                </pre>
+                <div className={cx('FormulaEditor-FuncList-doc-desc')}>
+                  {activeFunc.description}
+                </div>
+              </>
+            ) : null}
+          </div>
         </div>
       </div>
     </div>

package/src/components/formula/Picker.tsx

@@ -2,23 +2,92 @@ import {uncontrollable} from 'uncontrollable';
 import React from 'react';
 import {FormulaEditor, FormulaEditorProps} from './Editor';
 import {autobind, noop} from '../../utils/helper';
+import {generateIcon} from '../../utils/icon';
 import PickerContainer from '../PickerContainer';
 import Editor from './Editor';
 import ResultBox from '../ResultBox';
+import Button from '../Button';
 import {Icon} from '../icons';
 import {themeable} from '../../theme';
 import {localeable} from '../../locale';
 
+import type {SchemaIcon} from '../../Schema';
+import {
+  resolveVariableAndFilter,
+  isPureVariable
+} from '../../utils/tpl-builtin';
+
 export interface FormulaPickerProps extends FormulaEditorProps {
   // 新的属性？
   size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
 
+  /**
+   * 编辑器标题
+   */
+  title?: string;
+
+  /**
+   * 按钮图标
+   */
+  icon?: SchemaIcon;
+
+  /**
+   * 控件模式
+   */
+  mode?: 'button' | 'input-button';
+
   /**
    * 边框模式，全边框，还是半边框，或者没边框。
    */
   borderMode?: 'full' | 'half' | 'none';
 
+  /**
+   * 按钮Label，inputMode为button时生效
+   */
+  btnLabel?: string;
+
+  /**
+   * 按钮样式
+   */
+  level?:
+    | 'info'
+    | 'success'
+    | 'warning'
+    | 'danger'
+    | 'link'
+    | 'primary'
+    | 'dark'
+    | 'light';
+
+  /**
+   * 按钮大小
+   */
+  btnSize?: 'xs' | 'sm' | 'md' | 'lg';
+
+  /**
+   * 禁用状态
+   */
   disabled?: boolean;
+
+  /**
+   * 占位文本
+   */
+  placeholder?: string;
+
+  /**
+   * 可清除
+   */
+  clearable?: boolean;
+
+  /**
+   * 支持通过上下文变量配置value
+   */
+  source?: string;
+
+  /**
+   * 外层透传的 data，和source配合使用
+   */
+  data?: any;
 }
 
 export class FormulaPicker extends React.Component<FormulaPickerProps> {
@@ -28,7 +97,7 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
   }
 
   render() {
-    const {
+    let {
       classnames: cx,
       value,
       translate: __,
@@ -37,41 +106,110 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
       onChange,
       size,
       borderMode,
+      placeholder,
+      mode,
+      btnLabel,
+      level,
+      btnSize,
+      icon,
+      title,
+      clearable,
+      variables,
+      functions,
       ...rest
     } = this.props;
+    if (isPureVariable(variables)) {
+      // 如果 variables 是 ${xxx} 这种形式，将其处理成实际的值
+      variables = resolveVariableAndFilter(variables, this.props.data, '| raw');
+    }
+
+    if (isPureVariable(functions)) {
+      // 如果 functions 是 ${xxx} 这种形式，将其处理成实际的值
+      functions = resolveVariableAndFilter(functions, this.props.data, '| raw');
+    }
+    const iconElement = generateIcon(cx, icon, 'Icon');
 
     return (
       <PickerContainer
-        showTitle={false}
+        title={__(title || 'FormulaEditor.title')}
+        headerClassName="font-bold"
         bodyRender={({onClose, value, onChange}) => {
-          return <Editor {...rest} value={value} onChange={onChange} />;
+          return (
+            <Editor
+              {...rest}
+              variables={variables}
+              functions={functions}
+              value={value}
+              onChange={onChange}
+            />
+          );
         }}
         value={value}
         onConfirm={this.handleConfirm}
         size={'md'}
       >
         {({onClick, isOpened}) => (
-          <ResultBox
-            className={cx(
-              'FormulaPicker',
-              className,
-              isOpened ? 'is-active' : ''
-            )}
-            allowInput={false}
-            result={FormulaEditor.highlightValue(
-              value,
-              rest.variables,
-              rest.functions
+          <div className={cx('FormulaPicker', className)}>
+            {mode === 'button' ? (
+              <Button
+                className={cx('FormulaPicker-action', 'w-full')}
+                level={level}
+                size={btnSize}
+                onClick={onClick}
+              >
+                {iconElement ? (
+                  React.cloneElement(iconElement, {
+                    className: cx(
+                      iconElement?.props?.className ?? '',
+                      'FormulaPicker-icon',
+                      {
+                        ['is-filled']: !!value
+                      }
+                    )
+                  })
+                ) : (
+                  <Icon
+                    icon="function"
+                    className={cx('FormulaPicker-icon', 'icon', {
+                      ['is-filled']: !!value
+                    })}
+                  />
+                )}
+                <span className={cx('FormulaPicker-label')}>
+                  {__(btnLabel || 'FormulaEditor.btnLabel')}
+                </span>
+              </Button>
+            ) : (
+              <>
+                <ResultBox
+                  className={cx(
+                    'FormulaPicker-input',
+                    isOpened ? 'is-active' : ''
+                  )}
+                  allowInput
+                  clearable={clearable}
+                  value={value}
+                  onResultChange={noop}
+                  onChange={this.handleConfirm}
+                  disabled={disabled}
+                  borderMode={borderMode}
+                  placeholder={placeholder}
+                />
+
+                <Button
+                  className={cx('FormulaPicker-action')}
+                  onClick={onClick}
+                >
+                  <Icon
+                    icon="function"
+                    className={cx('FormulaPicker-icon', 'icon', {
+                      ['is-filled']: !!value
+                    })}
+                  />
+                </Button>
+              </>
             )}
-            onResultChange={noop}
-            onResultClick={onClick}
-            disabled={disabled}
-            borderMode={borderMode}
-          >
-            <span className={cx('FormulaPicker-icon')}>
-              <Icon icon="pencil" className="icon" />
-            </span>
-          </ResultBox>
+          </div>
         )}
       </PickerContainer>
     );

package/src/components/formula/VariableList.tsx

@@ -1,29 +1,70 @@
 import React from 'react';
+import cx from 'classnames';
+
 import GroupedSelection from '../GroupedSelection';
 import Tabs, {Tab} from '../Tabs';
 import TreeSelection from '../TreeSelection';
+
 import type {VariableItem} from './Editor';
+import type {ItemRenderStates} from '../Selection';
+import type {Option} from '../Select';
+import type {TabsMode} from '../Tabs';
 
 export interface VariableListProps {
   className?: string;
+  itemClassName?: string;
+  classPrefix?: string;
   data: Array<VariableItem>;
   selectMode?: 'list' | 'tree' | 'tabs';
+  tabsMode?: TabsMode;
+  itemRender?: (option: Option, states: ItemRenderStates) => JSX.Element;
   onSelect?: (item: VariableItem) => void;
 }
 
-export function VariableList({
-  data: list,
-  className,
-  selectMode,
-  onSelect
-}: VariableListProps) {
+export function VariableList(props: VariableListProps) {
+  const {
+    data: list,
+    className,
+    tabsMode = 'card',
+    classPrefix: themePrefix,
+    itemClassName,
+    selectMode,
+    onSelect
+  } = props;
+  const classPrefix = `${themePrefix}FormulaEditor-VariableList`;
+  const itemRender =
+    props.itemRender && typeof props.itemRender === 'function'
+      ? props.itemRender
+      : (option: Option, states: ItemRenderStates): JSX.Element => {
+          return (
+            <span className={cx(`${classPrefix}-item`, itemClassName)}>
+              <label>{option.label}</label>
+              {option?.tag ? (
+                <span className={cx(`${classPrefix}-item-tag`)}>
+                  {option.tag}
+                </span>
+              ) : null}
+            </span>
+          );
+        };
+
   return (
-    <div className={className}>
+    <div className={cx(className, {'is-scrollable': selectMode !== 'tabs'})}>
       {selectMode === 'tabs' ? (
-        <Tabs tabsMode="radio">
+        <Tabs
+          tabsMode={tabsMode}
+          className={cx(`${classPrefix}-base ${classPrefix}-tabs`)}
+        >
           {list.map((item, index) => (
-            <Tab eventKey={index} key={index} title={item.label}>
+            <Tab
+              className={cx(`${classPrefix}-tab`)}
+              eventKey={index}
+              key={index}
+              title={item.label}
+            >
               <VariableList
+                className={cx(`${classPrefix}-sub`)}
+                itemRender={itemRender}
                 selectMode={item.selectMode}
                 data={item.children!}
                 onSelect={onSelect}
@@ -33,12 +74,16 @@ export function VariableList({
         </Tabs>
       ) : selectMode === 'tree' ? (
         <TreeSelection
+          itemRender={itemRender}
+          className={cx(`${classPrefix}-base`)}
           multiple={false}
           options={list}
           onChange={(item: any) => onSelect?.(item)}
         />
       ) : (
         <GroupedSelection
+          itemRender={itemRender}
+          className={cx(`${classPrefix}-base`)}
           multiple={false}
           options={list}
           onChange={(item: any) => onSelect?.(item)}

package/src/components/icons.tsx

@@ -76,6 +76,8 @@ 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';
+import FunctionIcon from '../icons/function.svg';
+import InputClearIcon from '../icons/input-clear.svg';
 
 // 兼容原来的用法，后续不直接试用。
 
@@ -178,6 +180,8 @@ registerIcon('alert-info', AlertInfo);
 registerIcon('alert-warning', AlertWarning);
 registerIcon('alert-danger', AlertDanger);
 registerIcon('tree-down', TreeDownIcon);
+registerIcon('function', FunctionIcon);
+registerIcon('input-clear', InputClearIcon);
 
 export function Icon({
   icon,
@@ -200,6 +204,7 @@ export function Icon({
 }
 
 export {
+  InputClearIcon,
   CloseIcon,
   UnDoIcon,
   ReDoIcon,
@@ -213,5 +218,6 @@ export {
   CheckIcon,
   PlusIcon,
   MinusIcon,
-  PencilIcon
+  PencilIcon,
+  FunctionIcon
 };

package/src/env.tsx

@@ -79,6 +79,11 @@ export interface RendererEnv {
     broadcast?: RendererEvent<any>
   ) => Promise<RendererEvent<any> | undefined>;
   rendererEventListeners: RendererEventListener[];
+
+  /**
+   * 过滤 html 标签，可用来添加 xss 保护逻辑
+   */
+  filterHtml: (input: string) => string;
   [propName: string]: any;
 }
 

package/src/factory.tsx

@@ -148,6 +148,10 @@ export interface RenderOptions {
    * 文本替换的黑名单，因为属性太多了所以改成黑名单的 fangs
    */
   replaceTextIgnoreKeys?: String[];
+  /**
+   * 过滤 html 标签，可用来添加 xss 保护逻辑
+   */
+  filterHtml?: (input: string) => string;
   [propName: string]: any;
 }
 
@@ -447,7 +451,11 @@ const defaultOptions: RenderOptions = {
     'target',
     'reload',
     'persistData'
-  ]
+  ],
+  /**
+   * 过滤 html 标签，可用来添加 xss 保护逻辑
+   */
+  filterHtml: (input: string) => input
 };
 let stores: {
   [propName: string]: IRendererStore;

package/src/icons/function.svg

@@ -0,0 +1,4 @@
+<svg t="1642059003991" class="icon" viewBox="0 0 1024 1024" version="1.1"
+    xmlns="http://www.w3.org/2000/svg" p-id="6131" width="200" height="200">
+    <path d="M510.665143 801.536c13.037714 0 22.253714-7.296 22.253714-20.333714 0-5.76-1.536-8.832-5.76-16.896-46.811429-72.502857-73.289143-155.757714-73.289143-245.924572 0-87.094857 24.941714-174.189714 73.289143-247.076571 4.205714-8.045714 5.76-11.117714 5.76-16.877714 0-12.288-9.216-20.333714-22.253714-20.333715-12.672 0-23.04 5.741714-35.291429 22.637715-57.563429 73.270857-86.710857 164.571429-86.710857 261.266285s27.995429 185.307429 86.692572 260.900572c12.288 16.877714 22.637714 22.637714 35.291428 22.637714z m391.716571 0c12.653714 0 22.637714-5.76 34.925715-22.637714C995.986286 703.305143 1024 614.692571 1024 517.997714c0-96.676571-28.781714-187.977143-86.710857-261.266285-12.269714-16.896-22.253714-22.637714-34.907429-22.637715-13.037714 0-22.253714 8.045714-22.253714 20.333715 0 5.76 1.152 8.813714 5.376 16.877714 48.731429 72.886857 73.654857 160 73.654857 247.076571 0 90.148571-26.843429 173.421714-73.270857 245.942857-4.608 8.045714-5.76 11.117714-5.76 16.877715 0 12.269714 9.216 20.333714 22.253714 20.333714z m-850.578285-0.768c75.190857 0 110.098286-32.237714 128.128-118.564571l43.739428-209.865143h69.449143c22.253714 0 36.443429-11.885714 36.443429-31.085715 0-16.475429-10.733714-26.843429-28.379429-26.843428h-64.841143l10.733714-52.169143c9.984-48.731429 25.325714-68.681143 67.913143-68.681143 6.144 0 12.269714-0.384 16.493715-0.768 19.2-1.92 27.611429-10.752 27.611428-27.245714 0-21.485714-18.011429-31.085714-54.857143-31.085714-73.270857 0-110.866286 36.461714-127.744 118.564571l-13.056 61.385143H115.858286c-22.235429 0-36.827429 11.885714-36.827429 31.085714 0 16.493714 11.136 26.843429 28.781714 26.843429h43.337143L108.982857 673.005714C98.194286 723.254857 82.468571 741.668571 41.435429 741.668571c-5.376 0-10.368 0.384-14.189715 0.768-17.664 2.304-27.245714 11.885714-27.245714 28.013715 0 20.717714 17.645714 30.317714 51.803429 30.317714z m539.044571-100.918857c12.653714 0 21.101714-4.205714 30.683429-18.029714l84.022857-119.698286h1.536l85.942857 121.618286c9.6 13.44 18.797714 16.109714 28.013714 16.109714 18.413714 0 30.701714-13.037714 30.701714-28.763429 0-7.296-2.304-14.189714-7.314285-20.717714l-98.194286-133.522286 98.194286-131.602285c5.010286-6.509714 7.314286-13.421714 7.314285-21.485715 0-16.493714-13.824-27.995429-29.165714-27.995428-13.805714 0-21.869714 6.912-29.165714 18.029714l-80.950857 118.546286h-1.92l-81.334857-118.930286c-7.296-11.136-16.493714-17.645714-31.085715-17.645714-17.645714 0-31.085714 14.189714-31.085714 29.531428 0 11.136 3.090286 18.048 8.466286 24.557715l93.220571 125.074285-98.980571 136.96c-5.76 7.314286-6.912 13.824-6.912 21.504 0 14.957714 12.672 26.459429 28.013714 26.459429z" p-id="6132"></path>
+</svg>

package/src/icons/input-clear.svg

@@ -0,0 +1 @@
+<svg t="1642652418667" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3606" width="200" height="200"><path d="M512 39.384615C250.092308 39.384615 39.384615 250.092308 39.384615 512s210.707692 472.615385 472.615385 472.615385 472.615385-210.707692 472.615385-472.615385S773.907692 39.384615 512 39.384615z m96.492308 488.369231l153.6 153.6c7.876923 7.876923 7.876923 19.692308 0 27.569231l-55.138462 55.138461c-7.876923 7.876923-19.692308 7.876923-27.569231 0L525.784615 610.461538c-7.876923-7.876923-19.692308-7.876923-27.56923 0l-153.6 153.6c-7.876923 7.876923-19.692308 7.876923-27.569231 0L261.907692 708.923077c-7.876923-7.876923-7.876923-19.692308 0-27.569231l153.6-153.6c7.876923-7.876923 7.876923-19.692308 0-27.569231l-155.56923-155.56923c-7.876923-7.876923-7.876923-19.692308 0-27.569231l55.138461-55.138462c7.876923-7.876923 19.692308-7.876923 27.569231 0l155.569231 155.569231c7.876923 7.876923 19.692308 7.876923 27.56923 0l153.6-153.6c7.876923-7.876923 19.692308-7.876923 27.569231 0l55.138462 55.138462c7.876923 7.876923 7.876923 19.692308 0 27.56923l-153.6 153.6c-5.907692 7.876923-5.907692 19.692308 0 27.569231z" p-id="3607"></path></svg>

package/src/index.tsx

@@ -57,6 +57,7 @@ import './renderers/ButtonGroup';
 import './renderers/Form/ButtonToolbar';
 import './renderers/Breadcrumb';
 import './renderers/DropDownButton';
+import './renderers/Calendar';
 import './renderers/Collapse';
 import './renderers/CollapseGroup';
 import './renderers/Color';

package/src/locale/de-DE.ts

@@ -15,6 +15,9 @@ register('de-DE', {
   'Calendar.toast': 'Außerhalb des Datumsbereichs',
   'Calendar.startPick': 'Wählen Sie Startzeit',
   'Calendar.endPick': 'Wählen Sie Endzeit',
+  'Schedule': 'Zeitplan',
+  'Time': 'Zeit',
+  'Content': 'Inhalt',
   'cancel': 'Abbrechen',
   'Card.dragTip': 'Obere Schaltfläche zum Sortieren ziehen',
   'Card.toggleDrag': 'Zum Sortieren umschalten',
@@ -269,5 +272,9 @@ register('de-DE', {
   'Condition.blank': 'leer',
   'InputTable.uniqueError': 'Column `{{label}}` unique validate failed',
   'Timeline.collapseText': 'Entfalten',
-  'Timeline.expandText': 'Falten'
+  'Timeline.expandText': 'Falten',
+  'FormulaEditor.btnLabel': 'Formel Bearbeiten',
+  'FormulaEditor.title': 'Formel Editor',
+  'FormulaEditor.variable': 'Variable',
+  'FormulaEditor.function': 'Funktion'
 });

package/src/locale/en-US.ts

@@ -271,5 +271,9 @@ register('en-US', {
   'Condition.blank': 'blank',
   'InputTable.uniqueError': 'Column `{{label}}` unique validate failed',
   'Timeline.collapseText': 'Unfold',
-  'Timeline.expandText': 'Fold'
+  'Timeline.expandText': 'Fold',
+  'FormulaEditor.btnLabel': 'Formula Edit',
+  'FormulaEditor.title': 'Formula Editor',
+  'FormulaEditor.variable': 'Variable',
+  'FormulaEditor.function': 'Function'
 });

package/src/locale/zh-CN.ts

@@ -15,6 +15,9 @@ register('zh-CN', {
   'Calendar.toast': '超出日期范围',
   'Calendar.startPick': '选择开始时间',
   'Calendar.endPick': '选择结束时间',
+  'Schedule': '日程',
+  'Time': '时间',
+  'Content': '内容',
   'cancel': '取消',
   'Card.dragTip': '请拖动顶部的按钮进行排序',
   'Card.toggleDrag': '对卡片进行排序操作',
@@ -275,5 +278,9 @@ register('zh-CN', {
   'Condition.blank': '空',
   'InputTable.uniqueError': '列`{{label}}`没有通过唯一验证',
   'Timeline.collapseText': '展开',
-  'Timeline.expandText': '折叠'
+  'Timeline.expandText': '折叠',
+  'FormulaEditor.btnLabel': '公式编辑',
+  'FormulaEditor.title': '公式编辑器',
+  'FormulaEditor.variable': '变量',
+  'FormulaEditor.function': '函数'
 });

package/src/renderers/Breadcrumb.tsx

@@ -82,7 +82,6 @@ export class BreadcrumbField extends React.Component<BreadcrumbProps, object> {
           data,
           '| raw'
         ) as Array<BreadcrumbItemSchema>);
-
     const crumbs = crumbItems
       .map<React.ReactNode>((item, index) => (
         <span className={cx('Breadcrumb-item', itemClassName)} key={index}>

package/src/renderers/CRUD.tsx

@@ -376,7 +376,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   ];
   static defaultProps = {
     toolbarInline: true,
-    headerToolbar: ['bulkActions', 'pagination'],
+    headerToolbar: ['bulkActions'],
     footerToolbar: ['statistics', 'pagination'],
     primaryField: 'id',
     syncLocation: true,
@@ -465,13 +465,16 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   }
 
   componentDidMount() {
-    const store = this.props.store;
+    const {store, autoGenerateFilter} = this.props;
 
     if (this.props.perPage) {
       store.changePage(store.page, this.props.perPage);
     }
 
-    if (!this.props.filter || (store.filterTogggable && !store.filterVisible)) {
+    if (
+      (!this.props.filter || (store.filterTogggable && !store.filterVisible)) &&
+      !autoGenerateFilter
+    ) {
       this.handleFilterInit({});
     }