amis 1.8.0-beta.5 → 1.8.0-beta.9

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

@@ -13,7 +13,6 @@ import {
   mapTree,
   guid
 } from '../../utils/helper';
-import {findDOMNode} from 'react-dom';
 import animtion from '../../utils/Animation';
 import {FormulaPickerProps} from '../formula/Picker';
 
@@ -31,6 +30,7 @@ export interface ConditionBuilderProps extends ThemeProps, LocaleProps {
   searchable?: boolean;
   fieldClassName?: string;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 export class QueryBuilder extends React.Component<ConditionBuilderProps> {
@@ -210,7 +210,8 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
       disabled,
       searchable,
       builderMode,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
 
     const normalizedValue = Array.isArray(value?.children)
@@ -247,6 +248,7 @@ export class QueryBuilder extends React.Component<ConditionBuilderProps> {
         disabled={disabled}
         searchable={searchable}
         formula={formula}
+        popOverContainer={popOverContainer}
       />
     );
   }

package/src/components/formula/Editor.tsx

@@ -29,7 +29,9 @@ export interface FuncGroup {
 }
 
 export interface FuncItem {
-  name: string;
+  name: string; // 函数名
+  example?: string; // 示例
+  description?: string; // 描述
   [propName: string]: any;
 }
 
@@ -119,11 +121,7 @@ export class FormulaEditor extends React.Component<
     return funcs;
   }
 
-  static defaultProps: Pick<
-    FormulaEditorProps,
-    'functions' | 'variables' | 'evalMode'
-  > = {
-    functions: FormulaEditor.buildDefaultFunctions(doc),
+  static defaultProps: Pick<FormulaEditorProps, 'variables' | 'evalMode'> = {
     variables: [],
     evalMode: true
   };
@@ -145,11 +143,15 @@ export class FormulaEditor extends React.Component<
       variables,
       item => item.value && (varMap[item.value] = item.label)
     );
-    const vars = Object.keys(varMap).sort((a, b) => b.length - a.length);
-    let content = value || '';
+    const vars = Object.keys(varMap)
+      .filter(item => item)
+      .sort((a, b) => b.length - a.length);
+
+    const content = value || '';
+    let html = '';
 
     // 标记方法调用
-    content = content.replace(/([A-Z]+)\s*\(/g, (_, func, pos) => {
+    html = content.replace(/([A-Z]+)\s*\(/g, (_, func, pos) => {
       return _?.replace(func, `<span class="c-func">${func}</span>`);
     });
 
@@ -157,15 +159,12 @@ export class FormulaEditor extends React.Component<
       let from = 0;
       let idx = -1;
       while (~(idx = content.indexOf(v, from))) {
-        content = content.replace(
-          v,
-          `<span class="c-field">${varMap[v]}</span>`
-        );
+        html = content.replace(v, `<span class="c-field">${varMap[v]}</span>`);
         from = idx + v.length;
       }
     });
 
-    return {html: content};
+    return {html};
   }
 
   componentWillUnmount() {
@@ -254,6 +253,12 @@ export class FormulaEditor extends React.Component<
       classPrefix
     } = this.props;
     const {focused} = this.state;
+    const customFunctions = Array.isArray(functions) ? functions : [];
+    const functionList = [
+      ...FormulaEditor.buildDefaultFunctions(doc),
+      ...customFunctions
+    ];
+
     return (
       <div
         className={cx(`FormulaEditor`, {
@@ -299,7 +304,7 @@ export class FormulaEditor extends React.Component<
           <FuncList
             className={functionClassName}
             title={__('FormulaEditor.function')}
-            data={functions}
+            data={functionList}
             onSelect={this.handleFunctionSelect}
           />
         </section>

package/src/components/formula/Picker.tsx

@@ -210,11 +210,15 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
                   allowInput={allowInput}
                   clearable={clearable}
                   value={value}
-                  result={FormulaEditor.highlightValue(
-                    value,
-                    variables,
-                    functions
-                  )}
+                  result={
+                    allowInput
+                      ? void 0
+                      : FormulaEditor.highlightValue(
+                          value,
+                          variables,
+                          functions
+                        )
+                  }
                   itemRender={this.renderFormulaValue}
                   onResultChange={noop}
                   onChange={this.handleConfirm}

package/src/locale/de-DE.ts

@@ -289,5 +289,9 @@ register('de-DE', {
   'FormulaEditor.btnLabel': 'Formel Bearbeiten',
   'FormulaEditor.title': 'Formel Editor',
   'FormulaEditor.variable': 'Variable',
-  'FormulaEditor.function': 'Funktion'
+  'FormulaEditor.function': 'Funktion',
+  'pullRefresh.pullingText': 'Zum Aktualisieren nach unten ziehen...',
+  'pullRefresh.loosingText': 'Zum Aktualisieren freigeben...',
+  'pullRefresh.loadingText': 'Laden...',
+  'pullRefresh.successText': 'Laden erfolgreich'
 });

package/src/locale/en-US.ts

@@ -291,5 +291,9 @@ register('en-US', {
   'FormulaEditor.btnLabel': 'Formula Edit',
   'FormulaEditor.title': 'Formula Editor',
   'FormulaEditor.variable': 'Variable',
-  'FormulaEditor.function': 'Function'
+  'FormulaEditor.function': 'Function',
+  'pullRefresh.pullingText': 'Pull down to refresh...',
+  'pullRefresh.loosingText': 'Release to refresh...',
+  'pullRefresh.loadingText': 'Loading...',
+  'pullRefresh.successText': 'Loading success'
 });

package/src/locale/zh-CN.ts

@@ -298,5 +298,9 @@ register('zh-CN', {
   'FormulaEditor.btnLabel': '公式编辑',
   'FormulaEditor.title': '公式编辑器',
   'FormulaEditor.variable': '变量',
-  'FormulaEditor.function': '函数'
+  'FormulaEditor.function': '函数',
+  'pullRefresh.pullingText': '下拉即可刷新...',
+  'pullRefresh.loosingText': '释放即可刷新...',
+  'pullRefresh.loadingText': '加载中...',
+  'pullRefresh.successText': '加载成功'
 });

package/src/renderers/CRUD.tsx

@@ -1610,7 +1610,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             `bulk-action/${index}`,
             {
               ...omit(btn, ['visibleOn', 'hiddenOn', 'disabledOn']),
-              type: 'button',
+              type: btn.type || 'button',
               ignoreConfirm: true
             },
             {

package/src/renderers/Form/Combo.tsx

@@ -1,13 +1,8 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
 import cloneDeep from 'lodash/cloneDeep';
-import {
-  FormItem,
-  FormControlProps,
-  FormBaseControl,
-  FormControlSchemaAlias
-} from './Item';
-import {Schema, Action, Api} from '../../types';
+import {FormItem, FormControlProps, FormBaseControl} from './Item';
+import {Action, Api} from '../../types';
 import {ComboStore, IComboStore} from '../../store/combo';
 import {default as CTabs, Tab} from '../../components/Tabs';
 import Button from '../../components/Button';
@@ -26,7 +21,7 @@ import {evalExpression, filter} from '../../utils/tpl';
 import find from 'lodash/find';
 import Select from '../../components/Select';
 import {dataMapping, resolveVariable} from '../../utils/tpl-builtin';
-import {isEffectiveApi} from '../../utils/api';
+import {isEffectiveApi, str2AsyncFunction} from '../../utils/api';
 import {Alert2} from '../../components';
 import memoize from 'lodash/memoize';
 import {Icon} from '../../components/icons';
@@ -34,8 +29,6 @@ import {isAlive} from 'mobx-state-tree';
 import {
   SchemaApi,
   SchemaClassName,
-  SchemaCollection,
-  SchemaIcon,
   SchemaObject,
   SchemaTpl
 } from '../../Schema';
@@ -369,7 +362,7 @@ export default class ComboControl extends React.Component<ComboProps> {
     this.handleFormInit = this.handleFormInit.bind(this);
     this.handleAction = this.handleAction.bind(this);
     this.addItem = this.addItem.bind(this);
-    this.removeItem = this.removeItem.bind(this);
+    this.deleteItem = this.deleteItem.bind(this);
     this.dragTipRef = this.dragTipRef.bind(this);
     this.flush = this.flush.bind(this);
     this.handleComboTypeChange = this.handleComboTypeChange.bind(this);
@@ -525,7 +518,7 @@ export default class ComboControl extends React.Component<ComboProps> {
     this.props.onChange(value, submitOnChange, true);
   }
 
-  async removeItem(key: number) {
+  async deleteItem(key: number) {
     const {
       flat,
       joinValues,
@@ -699,7 +692,7 @@ export default class ComboControl extends React.Component<ComboProps> {
     const {onAction} = this.props;
 
     if (action.actionType === 'delete') {
-      action.index !== void 0 && this.removeItem(action.index);
+      action.index !== void 0 && this.deleteItem(action.index);
       return;
     }
 
@@ -1054,8 +1047,8 @@ export default class ComboControl extends React.Component<ComboProps> {
           ) {
             toolbar = (
               <div
-                onClick={this.removeItem.bind(this, index)}
-                key="remove"
+                onClick={this.deleteItem.bind(this, index)}
+                key="delete"
                 className={cx(
                   `Combo-tab-delBtn ${!store.removable ? 'is-disabled' : ''}`
                 )}
@@ -1161,6 +1154,99 @@ export default class ComboControl extends React.Component<ComboProps> {
     );
   }
 
+  renderDelBtn(value: any, index: number) {
+    const {
+      classPrefix: ns,
+      classnames: cx,
+      render,
+      store,
+      deleteIcon,
+      translate: __,
+      itemRemovableOn,
+      disabled,
+      removable,
+      deleteBtn
+    } = this.props;
+
+    const finnalRemovable =
+      store.removable !== false && // minLength ?
+      !disabled && // 控件自身是否禁用
+      removable !== false; // 是否可以删除
+
+    if (
+      !(
+        finnalRemovable && // 表达式判断单条是否可删除
+        (!itemRemovableOn || evalExpression(itemRemovableOn, value) !== false)
+      )
+    ) {
+      // 不符合删除条件，则不渲染删除按钮
+      return null;
+    }
+
+    // deleteBtn是对象，则根据自定义配置渲染按钮
+    if (isObject(deleteBtn)) {
+      return render('delete-btn', {
+        ...deleteBtn,
+        type: 'button',
+        className: cx(
+          'Combo-delController',
+          deleteBtn ? deleteBtn.classname : ''
+        ),
+        onClick: (e: any) => {
+          if (!deleteBtn.onClick) {
+            this.deleteItem(index);
+            return;
+          }
+
+          let originClickHandler = deleteBtn.onClick;
+          if (typeof originClickHandler === 'string') {
+            originClickHandler = str2AsyncFunction(
+              deleteBtn.onClick,
+              'e',
+              'index',
+              'props'
+            );
+          }
+          const result = originClickHandler(e, index, this.props);
+          if (result && result.then) {
+            result.then(() => {
+              this.deleteItem(index);
+            });
+          } else {
+            this.deleteItem(index);
+          }
+        }
+      });
+    }
+
+    // deleteBtn是string，则渲染按钮文本
+    if (typeof deleteBtn === 'string') {
+      return render('delete-btn', {
+        type: 'button',
+        className: cx('Combo-delController'),
+        label: deleteBtn,
+        onClick: this.deleteItem.bind(this, index)
+      });
+    }
+
+    // 如果上述按钮不满足，则渲染默认按钮
+    return (
+      <a
+        onClick={this.deleteItem.bind(this, index)}
+        key="delete"
+        className={cx(`Combo-delBtn ${!store.removable ? 'is-disabled' : ''}`)}
+        data-tooltip={__('delete')}
+        data-position="bottom"
+      >
+        {deleteIcon ? (
+          <i className={deleteIcon} />
+        ) : (
+          <Icon icon="status-close" className="icon" />
+        )}
+      </a>
+    );
+  }
+
   renderMultipe() {
     if (this.props.tabsMode) {
       return this.renderTabsMode();
@@ -1183,12 +1269,10 @@ export default class ComboControl extends React.Component<ComboProps> {
       addable,
       removable,
       typeSwitchable,
-      itemRemovableOn,
       delimiter,
       canAccessSuperData,
       addIcon,
       dragIcon,
-      deleteIcon,
       noBorder,
       conditions,
       lazyLoad,
@@ -1206,11 +1290,6 @@ export default class ComboControl extends React.Component<ComboProps> {
       value = value.split(delimiter || ',');
     }
 
-    const finnalRemovable =
-      store.removable !== false && // minLength ?
-      !disabled && // 控件自身是否禁用
-      removable !== false; // 是否可以删除
-
     return (
       <div
         className={cx(
@@ -1226,30 +1305,7 @@ export default class ComboControl extends React.Component<ComboProps> {
         <div className={cx(`Combo-items`, itemsWrapperClassName)}>
           {Array.isArray(value) && value.length ? (
             value.map((value, index, thelist) => {
-              let delBtn: any = null;
-
-              if (
-                finnalRemovable && // 表达式判断单条是否可删除
-                (!itemRemovableOn ||
-                  evalExpression(itemRemovableOn, value) !== false)
-              ) {
-                delBtn = (
-                  <Button
-                    key="remove"
-                    className={cx('Combo-delBtn')}
-                    disabled={!store.removable}
-                    tooltip={__('delete')}
-                    tooltipPlacement="bottom"
-                    onClick={this.removeItem.bind(this, index)}
-                  >
-                    {deleteIcon ? (
-                      <i className={deleteIcon} />
-                    ) : (
-                      <Icon icon="status-close" className="icon" />
-                    )}
-                  </Button>
-                );
-              }
+              let delBtn: any = this.renderDelBtn(value, index);
 
               const data = this.formatValue(value, index);
               let condition: ComboCondition | null = null;

package/src/renderers/Form/InputDate.tsx

@@ -423,8 +423,14 @@ export default class DateControl extends React.PureComponent<
   // 动作
   doAction(action: Action, data: object, throwErrors: boolean) {
     const {resetValue, onChange} = this.props;
+
     if (action.actionType === 'clear') {
-      onChange(resetValue ?? '');
+      onChange('');
+      return;
+    }
+
+    if (action.actionType === 'reset' && resetValue) {
+      onChange(resetValue);
     }
   }
 
@@ -457,15 +463,23 @@ export default class DateControl extends React.PureComponent<
       useMobileUI,
       ...rest
     } = this.props;
+    const mobileUI = useMobileUI && isMobile();
 
     if (type === 'time' && timeFormat) {
       format = timeFormat;
     }
 
-    const mobileUI = useMobileUI && isMobile();
-
     return (
-      <div className={cx(`DateControl`, className)}>
+      <div
+        className={cx(
+          `DateControl`,
+          {
+            'is-date': /date$/.test(type),
+            'is-datetime': /datetime$/.test(type)
+          },
+          className
+        )}
+      >
         <DatePicker
           {...rest}
           useMobileUI={useMobileUI}

package/src/renderers/Form/InputDateRange.tsx

@@ -180,8 +180,14 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
   // 动作
   doAction(action: Action, data: object, throwErrors: boolean) {
     const {resetValue, onChange} = this.props;
+
     if (action.actionType === 'clear') {
-      onChange(resetValue ?? '');
+      onChange('');
+      return;
+    }
+
+    if (action.actionType === 'reset' && resetValue) {
+      onChange(resetValue);
     }
   }
 
@@ -213,8 +219,19 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
       ...rest
     } = this.props;
     const mobileUI = useMobileUI && isMobile();
+    const comptType = this.props?.type;
+
     return (
-      <div className={cx(`${ns}DateRangeControl`, className)}>
+      <div
+        className={cx(
+          `${ns}DateRangeControl`,
+          {
+            'is-date': /date-/.test(comptType),
+            'is-datetime': /datetime-/.test(comptType)
+          },
+          className
+        )}
+      >
         <DateRangePicker
           {...rest}
           useMobileUI={useMobileUI}

package/src/renderers/Form/InputFile.tsx

@@ -818,7 +818,11 @@ export default class FileControl extends React.Component<FileProps, FileState> {
         let value =
           (ret.data as any).value || (ret.data as any).url || ret.data;
 
-        const dispatcher = await this.dispatchEvent('success', file);
+        const dispatcher = await this.dispatchEvent('success', {
+          ...file,
+          value,
+          state: 'uploaded'
+        });
         if (dispatcher?.prevented) {
           return;
         }
@@ -1220,11 +1224,19 @@ export default class FileControl extends React.Component<FileProps, FileState> {
 
   async dispatchEvent(e: string, data?: Record<string, any>) {
     const {dispatchEvent} = this.props;
-    data = data || this.state.files;
+    const getEventData = (item: Record<string, any>) => ({
+      name: item.path || item.name,
+      value: item.value,
+      state: item.state,
+      error: item.error
+    });
+    const value = data
+      ? getEventData(data)
+      : this.state.files.map(item => getEventData(item));
     return dispatchEvent(
       e,
       createObject(this.props.data, {
-        file: data
+        file: value
       })
     );
   }
@@ -1316,7 +1328,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
             >
               <input disabled={disabled} {...getInputProps()} />
 
-              {drag ? (
+              {drag || isDragActive ? (
                 <div
                   className={cx('FileControl-acceptTip')}
                   onClick={this.handleSelect}

package/src/renderers/Form/InputImage.tsx

@@ -1081,7 +1081,11 @@ export default class ImageControl extends React.Component<
         };
         obj.value = obj.value || obj.url;
 
-        const dispatcher = await this.dispatchEvent('success', obj);
+        const dispatcher = await this.dispatchEvent('success', {
+          ...file,
+          value: obj.value,
+          state: 'uploaded'
+        });
         if (dispatcher?.prevented) {
           return;
         }
@@ -1252,8 +1256,16 @@ export default class ImageControl extends React.Component<
 
   async dispatchEvent(e: string, data?: Record<string, any>) {
     const {dispatchEvent} = this.props;
-    data = data ? data : this.files;
-    return dispatchEvent(e, createObject(this.props.data, {file: data}));
+    const getEventData = (item: Record<string, any>) => ({
+      name: item.path || item.name,
+      value: item.value,
+      state: item.state,
+      error: item.error
+    });
+    const value = data
+      ? getEventData(data)
+      : this.files.map(item => getEventData(item));
+    return dispatchEvent(e, createObject(this.props.data, {file: value}));
   }
 
   // 动作

package/src/renderers/Form/InputMonthRange.tsx

@@ -170,8 +170,14 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
   // 动作
   doAction(action: Action, data: object, throwErrors: boolean) {
     const {resetValue, onChange} = this.props;
+
     if (action.actionType === 'clear') {
-      onChange(resetValue ?? '');
+      onChange('');
+      return;
+    }
+
+    if (action.actionType === 'reset' && resetValue) {
+      onChange(resetValue);
     }
   }
 

package/src/renderers/Form/InputText.tsx

@@ -179,7 +179,7 @@ export default class TextControl extends React.PureComponent<
             term: ''
           })
         );
-      } else {
+      } else if (addHook) {
         this.unHook = addHook(async (data: any) => {
           await formItem.loadOptions(
             autoComplete,
@@ -546,6 +546,8 @@ export default class TextControl extends React.PureComponent<
       multiple,
       creatable,
       borderMode,
+      showCounter,
+      maxLength,
       translate: __
     } = this.props;
     let type = this.props.type?.replace(/^(?:native|input)\-/, '');
@@ -664,6 +666,16 @@ export default class TextControl extends React.PureComponent<
                 </a>
               ) : null}
 
+              {showCounter ? (
+                <span className={cx('TextControl-counter')}>
+                  {`${this.valueToString(value)?.length}${
+                    typeof maxLength === 'number' && maxLength
+                      ? `/${maxLength}`
+                      : ''
+                  }`}
+                </span>
+              ) : null}
+
               {loading ? (
                 <Spinner
                   show
@@ -832,8 +844,8 @@ export default class TextControl extends React.PureComponent<
         </div>
       ) : (
         <div className={cx(`${ns}TextControl-addOn`, addOn.className)}>
-          {addOn.label ? filter(addOn.label, data) : null}
           {iconElement}
+          {addOn.label ? filter(addOn.label, data) : null}
         </div>
       )
     ) : null;