amis 1.3.5-beta.3 → 1.4.1

package/src/components/Steps.tsx

@@ -14,12 +14,12 @@ export type StepSchema = {
   /**
    * 标题
    */
-  title: string;
+  title?: string | JSX.Element;
 
   /**
    * 子标题
    */
-  subTitle?: string;
+  subTitle?: string | JSX.Element;
 
   /**
    * 图标
@@ -31,7 +31,7 @@ export type StepSchema = {
   /**
    * 描述
    */
-  description?: string;
+  description?: string | JSX.Element;
 
   status?: StepStatus;
 } & Omit<BaseSchema, 'type'>;

package/src/components/WithRemoteConfig.tsx

@@ -4,6 +4,7 @@
  */
 import React from 'react';
 import hoistNonReactStatic from 'hoist-non-react-statics';
+import debounce from 'lodash/debounce';
 import {Api, Payload} from '../types';
 import {SchemaApi, SchemaTokenizeableString} from '../Schema';
 import {withStore} from './WithStore';
@@ -97,6 +98,7 @@ export interface OutterProps {
   env?: RendererEnv;
   data: any;
   source?: SchemaApi | SchemaTokenizeableString;
+  autoComplete?: SchemaApi | SchemaTokenizeableString;
   deferApi?: SchemaApi;
   remoteConfigRef?: (
     instance:
@@ -182,10 +184,16 @@ export function withRemoteConfig<P = any>(
           static displayName = `WithRemoteConfig(${
             ComposedComponent.displayName || ComposedComponent.name
           })`;
-          static ComposedComponent = ComposedComponent as React.ComponentType<T>;
+          static ComposedComponent =
+            ComposedComponent as React.ComponentType<T>;
           static contextType = EnvContext;
           toDispose: Array<() => void> = [];
 
+          loadOptions = debounce(this.loadAutoComplete.bind(this), 250, {
+            trailing: true,
+            leading: false
+          });
+
           constructor(
             props: FinalOutterProps & {
               store: IStore;
@@ -250,6 +258,7 @@ export function withRemoteConfig<P = any>(
             this.toDispose = [];
 
             this.props.remoteConfigRef?.(undefined);
+            this.loadOptions.cancel();
           }
 
           async loadConfig(ctx = this.props.data) {
@@ -261,6 +270,28 @@ export function withRemoteConfig<P = any>(
             }
           }
 
+          loadAutoComplete(input: string) {
+            const env: RendererEnv = this.props.env || this.context;
+            const {autoComplete, data, store} = this.props;
+
+            if (!env || !env.fetcher) {
+              throw new Error('fetcher is required');
+            }
+
+            const ctx = createObject(data, {
+              term: input,
+              value: input
+            });
+
+            if (!isEffectiveApi(autoComplete, ctx)) {
+              return Promise.resolve({
+                options: []
+              });
+            }
+
+            return store.load(env, autoComplete, ctx, config);
+          }
+
           setConfig(value: any, ctx?: any) {
             const {store} = this.props;
             store.setConfig(value, config, ctx);
@@ -321,13 +352,14 @@ export function withRemoteConfig<P = any>(
 
           render() {
             const store = this.props.store;
+            const env: RendererEnv = this.props.env || this.context;
             const injectedProps: RemoteOptionsProps<P> = {
               config: store.config,
               loading: store.fetching,
               deferLoad: this.deferLoadConfig,
               updateConfig: this.setConfig
             };
-            const {remoteConfigRef, ...rest} = this.props;
+            const {remoteConfigRef, autoComplete, ...rest} = this.props;
 
             return (
               <ComposedComponent
@@ -335,6 +367,9 @@ export function withRemoteConfig<P = any>(
                   T,
                   React.ComponentProps<T>
                 >)}
+                {...(env && isEffectiveApi(autoComplete) && this.loadOptions
+                  ? {loadOptions: this.loadOptions}
+                  : {})}
                 {...injectedProps}
               />
             );

package/src/components/calendar/DaysView.tsx

@@ -100,8 +100,8 @@ export class CustomDaysView extends DaysView {
   confirm = () => {
     let date = (this.props.selectedDate || this.props.viewDate).clone();
 
-    // 如果 minDate 是可用的，且比当前日期早，则用 minDate
-    if (this.props.minDate?.isValid() && this.props.minDate?.isBefore(date)) {
+    // 如果 minDate 是可用的，且比当前日期晚，则用 minDate
+    if (this.props.minDate?.isValid() && this.props.minDate?.isAfter(date)) {
       date = this.props.minDate.clone();
     }
 

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

@@ -33,7 +33,6 @@ export class ConditionField extends React.Component<
       options: props.options
     };
     this.onSearch = this.onSearch.bind(this);
-    this.onSearch = this.onSearch.bind(this);
   }
 
   onSearch(text: string) {
@@ -51,7 +50,7 @@ export class ConditionField extends React.Component<
             });
             return children.length > 0
               ? Object.assign({}, item, {children}) // 需要copy一份，防止覆盖原始数据
-              : false; 
+              : false;
           } else {
             return item.name.toLowerCase().includes(txt) ||
               item.label.toLowerCase().includes(txt)

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

@@ -92,11 +92,14 @@ export class Value extends React.Component<ValueProps> {
         />
       );
     } else if (field.type === 'select') {
+      const autoComplete = field.autoComplete;
+
       input = (
         <Select
           simpleValue
           options={field.options!}
           source={field.source}
+          autoComplete={autoComplete}
           searchable={field.searchable}
           value={value ?? field.defaultValue ?? ''}
           data={data}

package/src/components/condition-builder/types.ts

@@ -145,6 +145,12 @@ interface SelectField extends BaseField {
   options?: Array<any>;
   source?: SchemaApi;
   searchable?: boolean;
+
+  /**
+   * 自动完成 API，当输入部分文字的时候，会将这些文字通过 ${term} 可以取到，发送给接口。
+   * 接口可以返回匹配到的选项，帮助用户输入。
+   */
+  autoComplete?: SchemaApi;
 }
 
 interface BooleanField extends BaseField {

package/src/components/icons.tsx

@@ -61,6 +61,7 @@ import EllipsisVIcon from '../icons/ellipsis-v.svg';
 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';
 
 // 兼容原来的用法，后续不直接试用。
 
@@ -149,6 +150,7 @@ registerIcon('ellipsis-v', EllipsisVIcon);
 registerIcon('expand-alt', ExpandAltIcon);
 registerIcon('compress-alt', CompressAltIcon);
 registerIcon('transparent', TransparentIcon);
+registerIcon('loading-outline', LoadingOutline);
 
 export function Icon({
   icon,

package/src/factory.tsx

@@ -74,11 +74,16 @@ export interface RenderSchemaFilter {
   (schema: Schema, renderer: RendererConfig, props?: any): Schema;
 }
 
+export interface wsObject {
+  url: string;
+  body?: any;
+}
+
 export interface RenderOptions {
   session?: string;
   fetcher?: (config: fetcherConfig) => Promise<fetcherResult>;
   wsFetcher?: (
-    ws: string,
+    ws: wsObject,
     onMessage: (data: any) => void,
     onError: (error: any) => void
   ) => void;
@@ -234,8 +239,13 @@ const defaultOptions: RenderOptions = {
   // 使用 WebSocket 来实时获取数据
   wsFetcher(ws, onMessage, onError) {
     if (ws) {
-      const socket = new WebSocket(ws);
-      socket.onmessage = (event: any) => {
+      const socket = new WebSocket(ws.url);
+      socket.onopen = event => {
+        if (ws.body) {
+          socket.send(JSON.stringify(ws.body));
+        }
+      };
+      socket.onmessage = event => {
         if (event.data) {
           onMessage(JSON.parse(event.data));
         }

package/src/icons/loading-outline.svg

@@ -0,0 +1,4 @@
+<svg viewBox="0 0 1024 1024" focusable="false" data-icon="loading" width="1em" height="1em" fill="currentColor" aria-hidden="true">
+    <path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z">
+    </path>
+</svg>

package/src/index.tsx

@@ -174,6 +174,8 @@ import './compat';
 
 import './envOverwrite';
 
+import './schemaExtend';
+
 import './themes/ang';
 import './themes/cxd';
 import './themes/dark';

package/src/locale/de-DE.ts

@@ -158,6 +158,7 @@ register('de-DE', {
   'System.requestError': 'Anfragefehler: ',
   'System.requestErrorStatus': 'Anfragefehler, Statuscode:',
   'Table.addRow': 'Zeile hinzufügen',
+  'Table.copyRow': 'Zeile kopieren',
   'Table.columnsVisibility': 'Klicken, um die Sichtbarkeit der Spalten zu steuern',
   'Table.deleteRow': 'Aktuele Zeile löschen',
   'Table.discard': 'Verwerfen',

package/src/locale/en-US.ts

@@ -158,7 +158,8 @@ register('en-US', {
   'System.copy': 'Content copied',
   'System.requestError': 'Request error: ',
   'System.requestErrorStatus': 'Request error, status code: ',
-  'Table.addRow': 'Add a row',
+  'Table.addRow': 'Add row',
+  'Table.copyRow': 'Copy row',
   'Table.columnsVisibility': 'Click to control columns visibility',
   'Table.deleteRow': 'Delete current row',
   'Table.discard': 'Discard',

package/src/locale/zh-CN.ts

@@ -83,7 +83,7 @@ register('zh-CN', {
   'desc': '降序',
   'Dialog.close': '关闭',
   'Embed.invalidRoot': '选择器不对，页面上没有此元素',
-  'Embed.downloading': '文件即将开始下载。。',
+  'Embed.downloading': '文件即将开始下载',
   'Excel.placeholder': '拖拽 Excel 到这，或点击上传',
   'fetchFailed': '初始化失败',
   'File.continueAdd': '继续添加',
@@ -163,6 +163,7 @@ register('zh-CN', {
   'System.requestError': '接口报错：',
   'System.requestErrorStatus': '接口出错，状态码是：',
   'Table.addRow': '新增一行',
+  'Table.copyRow': '复制一行',
   'Table.columnsVisibility': '点击选择显示列',
   'Table.deleteRow': '删除当前行',
   'Table.discard': '放弃',

package/src/renderers/Action.tsx

@@ -35,6 +35,10 @@ export interface ButtonSchema extends BaseSchema {
    * 右侧 icon 上的 css 类名
    */
   rightIconClassName?: SchemaClassName;
+  /**
+   * loading 上的css 类名
+   */
+  loadingClassName?: SchemaClassName;
 
   /**
    * 按钮文字
@@ -131,6 +135,10 @@ export interface ButtonSchema extends BaseSchema {
    * 键盘快捷键
    */
   hotKey?: string;
+  /**
+   * 是否显示loading效果
+   */
+  loadingOn?: string;
 }
 
 export interface AjaxActionSchema extends ButtonSchema {
@@ -151,6 +159,14 @@ export interface AjaxActionSchema extends ButtonSchema {
   ignoreConfirm?: boolean;
 }
 
+export interface DownloadActionSchema
+  extends Omit<AjaxActionSchema, 'actionType'> {
+  /**
+   * 指定为下载行为
+   */
+  actionType: 'download';
+}
+
 export interface UrlActionSchema extends ButtonSchema {
   /**
    * 指定为打开链接
@@ -369,7 +385,7 @@ import {DialogSchema, DialogSchemaBase} from './Dialog';
 import {DrawerSchema, DrawerSchemaBase} from './Drawer';
 import {generateIcon} from '../utils/icon';
 import {BadgeSchema, withBadge} from '../components/Badge';
-import {str2AsyncFunction} from '../utils/api';
+import {normalizeApi, str2AsyncFunction} from '../utils/api';
 
 // 构造一个假的 React 事件避免可能的报错，主要用于快捷键功能
 // 来自 https://stackoverflow.com/questions/27062455/reactjs-can-i-create-my-own-syntheticevent
@@ -408,44 +424,80 @@ export const createSyntheticEvent = <T extends Element, E extends Event>(
 export interface ActionProps
   extends Omit<
       ButtonSchema,
-      'className' | 'iconClassName' | 'rightIconClassName'
+      'className' | 'iconClassName' | 'rightIconClassName' | 'loadingClassName'
     >,
     ThemeProps,
     Omit<
       AjaxActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       UrlActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       LinkActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       DialogActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       DrawerActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       CopyActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       ReloadActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       EmailActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     >,
     Omit<
       OtherActionSchema,
-      'type' | 'className' | 'iconClassName' | 'rightIconClassName'
+      | 'type'
+      | 'className'
+      | 'iconClassName'
+      | 'rightIconClassName'
+      | 'loadingClassName'
     > {
   actionType: any;
   onAction?: (
@@ -535,6 +587,15 @@ export class Action extends React.Component<ActionProps, ActionState> {
 
     e.preventDefault();
     const action = pick(this.props, ActionProps) as ActionSchema;
+
+    // download 是一种 ajax 的简写
+    if (action.actionType === 'download') {
+      action.actionType = 'ajax';
+      const api = normalizeApi((action as AjaxActionSchema).api);
+      api.responseType = 'blob';
+      (action as AjaxActionSchema).api = api;
+    }
+
     onAction(e, action);
 
     if (countDown) {
@@ -602,6 +663,7 @@ export class Action extends React.Component<ActionProps, ActionState> {
       iconClassName,
       rightIcon,
       rightIconClassName,
+      loadingClassName,
       primary,
       size,
       level,
@@ -621,7 +683,10 @@ export class Action extends React.Component<ActionProps, ActionState> {
       isMenuItem,
       active,
       activeLevel,
+      tooltipTrigger,
       tooltipContainer,
+      tooltipRootClose,
+      loading,
       classnames: cx
     } = this.props;
 
@@ -661,6 +726,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
             ? activeLevel
             : level || (primary ? 'primary' : undefined)
         }
+        loadingClassName={loadingClassName}
+        loading={loading}
         onClick={this.handleAction}
         type={type && ~allowedType.indexOf(type) ? type : 'button'}
         disabled={disabled}
@@ -668,12 +735,14 @@ export class Action extends React.Component<ActionProps, ActionState> {
         overrideClassName={isMenuItem}
         tooltip={filterContents(tooltip, data)}
         disabledTip={filterContents(disabledTip, data)}
-        placement={tooltipPlacement}
+        tooltipPlacement={tooltipPlacement}
         tooltipContainer={tooltipContainer}
+        tooltipTrigger={tooltipTrigger}
+        tooltipRootClose={tooltipRootClose}
         block={block}
         iconOnly={!!(icon && !label && level !== 'link')}
       >
-        {iconElement}
+        {!loading ? iconElement : ''}
         {label ? <span>{filter(String(label), data)}</span> : null}
         {rightIconElement}
       </Button>
@@ -719,13 +788,14 @@ export class ActionRenderer extends React.Component<
   }
 
   render() {
-    const {env, disabled, btnDisabled, ...rest} = this.props;
+    const {env, disabled, btnDisabled, loading, ...rest} = this.props;
 
     return (
       <Action
         {...(rest as any)}
         disabled={disabled || btnDisabled}
         onAction={this.handleAction}
+        loading={loading}
         isCurrentUrl={this.isCurrentAction}
         tooltipContainer={
           env.getModalContainer ? env.getModalContainer : undefined

package/src/renderers/CRUD.tsx

@@ -1057,7 +1057,10 @@ export default class CRUD extends React.Component<CRUDProps, any> {
               (!stopAutoRefreshWhen ||
                 !(
                   (stopAutoRefreshWhenModalIsOpen && store.hasModalOpened) ||
-                  evalExpression(stopAutoRefreshWhen, data)
+                  evalExpression(
+                    stopAutoRefreshWhen,
+                    createObject(store.data, store.query)
+                  )
                 )) &&
               (this.timer = setTimeout(
                 silentPolling
@@ -1497,15 +1500,11 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   hasBulkActions() {
     const {bulkActions, itemActions, store} = this.props;
 
-    if (
-      (!bulkActions || !bulkActions.length) &&
-      (!itemActions || !itemActions.length)
-    ) {
+    if (!bulkActions || !bulkActions.length) {
       return false;
     }
 
     let bulkBtns: Array<ActionSchema> = [];
-    let itemBtns: Array<ActionSchema> = [];
     const ctx = store.mergedData;
 
     if (bulkActions && bulkActions.length) {
@@ -1517,21 +1516,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
         .filter(item => !item.hidden && item.visible !== false);
     }
 
-    const itemData = createObject(
-      store.data,
-      store.selectedItems.length ? store.selectedItems[0] : {}
-    );
-
-    if (itemActions && itemActions.length) {
-      itemBtns = itemActions
-        .map(item => ({
-          ...item,
-          ...getExprProperties(item as Schema, itemData)
-        }))
-        .filter(item => !item.hidden && item.visible !== false);
-    }
-
-    return bulkBtns.length || itemBtns.length;
+    return bulkBtns.length;
   }
 
   renderBulkActions(childProps: any) {
@@ -1539,11 +1524,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
 
     const items = childProps.items;
 
-    if (
-      !items.length ||
-      ((!bulkActions || !bulkActions.length) &&
-        (!itemActions || !itemActions.length))
-    ) {
+    if (!items.length || !bulkActions || !bulkActions.length) {
       return null;
     }
 
@@ -1595,7 +1576,6 @@ export default class CRUD extends React.Component<CRUDProps, any> {
           render(
             `bulk-action/${index}`,
             {
-              size: 'sm',
               ...omit(btn, ['visibleOn', 'hiddenOn', 'disabledOn']),
               type: 'button',
               ignoreConfirm: true
@@ -1619,7 +1599,6 @@ export default class CRUD extends React.Component<CRUDProps, any> {
           render(
             `bulk-action/${index}`,
             {
-              size: 'sm',
               ...omit(btn, ['visibleOn', 'hiddenOn', 'disabledOn']),
               type: 'button'
             },
@@ -1776,16 +1755,17 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     );
   }
 
-  renderExportCSV() {
+  renderExportCSV(toolbar: Schema) {
     const {
       store,
       classPrefix: ns,
       classnames: cx,
       translate: __,
-      loadDataOnce,
-      api
+      loadDataOnce
     } = this.props;
 
+    const api = (toolbar as Schema).api;
+
     return (
       <Button
         classPrefix={ns}
@@ -1797,7 +1777,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
         }
         size="sm"
       >
-        {__('CRUD.exportCSV')}
+        {toolbar.label || __('CRUD.exportCSV')}
       </Button>
     );
   }
@@ -1827,7 +1807,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     } else if (type === 'filter-toggler') {
       return this.renderFilterToggler();
     } else if (type === 'export-csv') {
-      return this.renderExportCSV();
+      return this.renderExportCSV(toolbar as Schema);
     } else if (Array.isArray(toolbar)) {
       const children: Array<any> = toolbar
         .map((toolbar, index) => ({