amis 1.7.0 → 1.8.0-beta.2

package/src/components/formula/Picker.tsx

@@ -69,6 +69,11 @@ export interface FormulaPickerProps extends FormulaEditorProps {
    */
   disabled?: boolean;
 
+  /**
+   * 是否允许输入，否需要点击fx在弹窗中输入
+   */
+  allowInput?: boolean;
+
   /**
    * 占位文本
    */
@@ -96,12 +101,28 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
     this.props.onChange?.(value);
   }
 
+  @autobind
+  renderFormulaValue(item: any) {
+    const {allowInput, classnames: cx} = this.props;
+    const html = {__html: item.html};
+    if (allowInput) {
+      return '';
+    }
+    return (
+      <div
+        className={cx('FormulaPicker-ResultBox')}
+        dangerouslySetInnerHTML={html}
+      ></div>
+    );
+  }
+
   render() {
     let {
       classnames: cx,
       value,
       translate: __,
       disabled,
+      allowInput,
       className,
       onChange,
       size,
@@ -186,9 +207,15 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
                     'FormulaPicker-input',
                     isOpened ? 'is-active' : ''
                   )}
-                  allowInput
+                  allowInput={allowInput}
                   clearable={clearable}
                   value={value}
+                  result={FormulaEditor.highlightValue(
+                    value,
+                    variables,
+                    functions
+                  )}
+                  itemRender={this.renderFormulaValue}
                   onResultChange={noop}
                   onChange={this.handleConfirm}
                   disabled={disabled}

package/src/components/icons.tsx

@@ -83,6 +83,7 @@ import AlertDanger from '../icons/alert-danger.svg';
 import FunctionIcon from '../icons/function.svg';
 import InputClearIcon from '../icons/input-clear.svg';
 import SliderHandleIcon from '../icons/slider-handle-icon.svg';
+import TrashIcon from '../icons/trash.svg';
 
 // 兼容原来的用法，后续不直接试用。
 
@@ -192,6 +193,7 @@ registerIcon('slider-handle', SliderHandleIcon);
 registerIcon('cloud-upload', CloudUploadIcon);
 registerIcon('image', ImageIcon);
 registerIcon('refresh', RefreshIcon);
+registerIcon('trash', TrashIcon);
 
 export function Icon({
   icon,

package/src/factory.tsx

@@ -518,13 +518,13 @@ export function render(
   // 进行文本替换
   if (env.replaceText && isObject(env.replaceText)) {
     const replaceKeys = Object.keys(env.replaceText);
-    replaceKeys.sort().reverse(); // 避免用户将短的放前面
+    replaceKeys.sort((a, b) => b.length - a.length); // 避免用户将短的放前面
     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(
+            value = object[key] = value.replaceAll(
               replaceKey,
               env.replaceText[replaceKey]
             );

package/src/icons/trash.svg

@@ -0,0 +1,8 @@
+<?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">
+    <title>4.图标元件/3.操作/删除</title>
+    <g id="4.图标元件/3.操作/删除" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <rect id="矩形" stroke="#979797" fill="#D8D8D8" opacity="0" x="0.5" y="0.5" width="15" height="15"></rect>
+        <path d="M14,3.499 L14,4.5 L12.497,4.5 L12.498,14.5 L3.498,14.5 L3.497,4.5 L2,4.5 L2,3.499 L14,3.499 Z M11.498,4.5 L4.497,4.5 L4.497,13.5 L11.498,13.5 L11.498,4.5 Z M6.998,7.499 L6.998,11.499 L5.998,11.499 L5.998,7.499 L6.998,7.499 Z M9.998,7.499 L9.998,11.499 L8.998,11.499 L8.998,7.499 L9.998,7.499 Z M9.999,1.5 L9.999,2.499 L5.998,2.499 L5.998,1.5 L9.999,1.5 Z" id="形状结合" fill="#151B26"></path>
+    </g>
+</svg>

package/src/index.tsx

@@ -175,6 +175,7 @@ import './renderers/TableView';
 import './renderers/Code';
 import './renderers/WebComponent';
 import './renderers/GridNav';
+import './renderers/TooltipWrapper';
 
 import Scoped, {ScopedContext} from './Scoped';
 

package/src/renderers/Action.tsx

@@ -62,7 +62,8 @@ export interface ButtonSchema extends BaseSchema {
     | 'link'
     | 'primary'
     | 'dark'
-    | 'light';
+    | 'light'
+    | 'secondary';
 
   /**
    * @deprecated 通过 level 来配置
@@ -752,6 +753,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
       loading,
       body,
       render,
+      onMouseEnter,
+      onMouseLeave,
       classnames: cx,
       classPrefix: ns
     } = this.props;
@@ -767,7 +770,12 @@ export class Action extends React.Component<ActionProps, ActionState> {
           trigger={tooltipTrigger}
           rootClose={tooltipRootClose}
         >
-          <div className={cx('Action', className)} onClick={this.handleAction}>
+          <div
+            className={cx('Action', className)}
+            onClick={this.handleAction}
+            onMouseEnter={onMouseEnter}
+            onMouseLeave={onMouseLeave}
+          >
             {render('body', body) as JSX.Element}
           </div>
         </TooltipWrapper>
@@ -813,6 +821,8 @@ export class Action extends React.Component<ActionProps, ActionState> {
         loadingClassName={loadingClassName}
         loading={loading}
         onClick={this.handleAction}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         type={type && ~allowedType.indexOf(type) ? type : 'button'}
         disabled={disabled}
         componentClass={isMenuItem ? 'a' : componentClass}
@@ -876,6 +886,16 @@ export class ActionRenderer extends React.Component<
     }
   }
 
+  @autobind
+  handleMouseEnter(e: React.MouseEvent<any>) {
+    this.props.dispatchEvent(e, this.props.data);
+  }
+
+  @autobind
+  handleMouseLeave(e: React.MouseEvent<any>) {
+    this.props.dispatchEvent(e, this.props.data);
+  }
+
   @autobind
   isCurrentAction(link: string) {
     const {env, data} = this.props;
@@ -891,6 +911,8 @@ export class ActionRenderer extends React.Component<
         env={env}
         disabled={disabled || btnDisabled}
         onAction={this.handleAction}
+        onMouseEnter={this.handleMouseEnter}
+        onMouseLeave={this.handleMouseLeave}
         loading={loading}
         isCurrentUrl={this.isCurrentAction}
         tooltipContainer={

package/src/renderers/ButtonGroup.tsx

@@ -15,12 +15,12 @@ export interface ButtonGroupSchema extends BaseSchema {
   type: 'button-group';
 
   /**
-   * 给 Button 配置 className。
+   * @deprecated 给 Button 配置 className。建议用btnLevel
    */
   btnClassName?: SchemaClassName;
 
   /**
-   * 给选中态 Button 配置 className。
+   * @deprecated 给选中态 Button 配置 className。建议用btnActiveLevel
    */
   btnActiveClassName: string;
 

package/src/renderers/Dialog.tsx

@@ -90,6 +90,11 @@ export interface DialogSchema extends BaseSchema {
    * 是否显示错误信息
    */
   showErrorMsg?: boolean;
+
+  /**
+   * 是否显示 spinner
+   */
+  showLoading?: boolean;
 }
 
 export type DialogSchemaBase = Omit<DialogSchema, 'type'>;
@@ -424,13 +429,22 @@ export default class Dialog extends React.Component<DialogProps> {
       return null;
     }
 
-    const {store, render, classnames: cx, showErrorMsg} = this.props;
+    const {
+      store,
+      render,
+      classnames: cx,
+      showErrorMsg,
+      showLoading
+    } = this.props;
 
     return (
       <div className={cx('Modal-footer')}>
-        {store.loading || store.error ? (
+        {(showLoading !== false && store.loading) ||
+        (showErrorMsg !== false && store.error) ? (
           <div className={cx('Dialog-info')} key="info">
-            <Spinner size="sm" key="info" show={store.loading} />
+            {showLoading !== false ? (
+              <Spinner size="sm" key="info" show={store.loading} />
+            ) : null}
             {store.error && showErrorMsg !== false ? (
               <span className={cx('Dialog-error')}>{store.msg}</span>
             ) : null}

package/src/renderers/DropDownButton.tsx

@@ -147,12 +147,14 @@ export default class DropDownButton extends React.Component<
   };
 
   target: any;
+  timer: ReturnType<typeof setTimeout>;
   constructor(props: DropDownButtonProps) {
     super(props);
 
     this.open = this.open.bind(this);
     this.close = this.close.bind(this);
     this.toogle = this.toogle.bind(this);
+    this.keepOpen = this.keepOpen.bind(this);
     this.domRef = this.domRef.bind(this);
   }
 
@@ -183,9 +185,17 @@ export default class DropDownButton extends React.Component<
   }
 
   close() {
-    this.setState({
-      isOpened: false
-    });
+    this.timer = setTimeout(() => {
+      this.setState({
+        isOpened: false
+      });
+    }, 200);
+  }
+
+  keepOpen() {
+    if (this.timer) {
+      clearTimeout(this.timer);
+    }
   }
 
   renderButton(
@@ -260,6 +270,7 @@ export default class DropDownButton extends React.Component<
                 menuClassName
               )}
               onClick={closeOnClick ? this.close : noop}
+              onMouseEnter={this.keepOpen}
               ref={ref}
             >
               {children

package/src/renderers/Form/Combo.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import {findDOMNode} from 'react-dom';
+import cloneDeep from 'lodash/cloneDeep';
 import {
   FormItem,
   FormControlProps,
@@ -9,6 +10,7 @@ import {
 import {Schema, Action, Api} from '../../types';
 import {ComboStore, IComboStore} from '../../store/combo';
 import {default as CTabs, Tab} from '../../components/Tabs';
+import Button from '../../components/Button';
 
 import {
   guid,
@@ -255,6 +257,8 @@ export interface ComboControlSchema extends FormBaseControl {
   };
 }
 
+export type ComboRendererEvent = 'add' | 'delete' | 'tabsChange';
+
 function pickVars(vars: any, fields: Array<string>) {
   return fields.reduce((data: any, key: string) => {
     data[key] = resolveVariable(key, vars);
@@ -291,6 +295,8 @@ export default class ComboControl extends React.Component<ComboProps> {
     | 'tabsMode'
     | 'tabsStyle'
     | 'placeholder'
+    | 'itemClassName'
+    | 'itemsWrapperClassName'
   > = {
     minLength: 0,
     maxLength: 0,
@@ -307,7 +313,9 @@ export default class ComboControl extends React.Component<ComboProps> {
     deleteIcon: '',
     tabsMode: false,
     tabsStyle: '',
-    placeholder: 'placeholder.empty'
+    placeholder: 'placeholder.empty',
+    itemClassName: '',
+    itemsWrapperClassName: ''
   };
   static propsList: Array<string> = [
     'minLength',
@@ -334,7 +342,9 @@ export default class ComboControl extends React.Component<ComboProps> {
     'items',
     'conditions',
     'messages',
-    'formStore'
+    'formStore',
+    'itemClassName',
+    'itemsWrapperClassName'
   ];
 
   subForms: Array<any> = [];
@@ -469,9 +479,17 @@ export default class ComboControl extends React.Component<ComboProps> {
     this.props.onChange(value, submitOnChange, true);
   }
 
-  addItem() {
-    const {flat, joinValues, delimiter, scaffold, disabled, submitOnChange} =
-      this.props;
+  async addItem() {
+    const {
+      flat,
+      joinValues,
+      delimiter,
+      scaffold,
+      disabled,
+      submitOnChange,
+      data,
+      dispatchEvent
+    } = this.props;
 
     if (disabled) {
       return;
@@ -479,6 +497,18 @@ export default class ComboControl extends React.Component<ComboProps> {
 
     let value = this.getValueAsArray();
 
+    const rendererEvent = await dispatchEvent(
+      'add',
+      createObject(data, {
+        value:
+          flat && joinValues ? value.join(delimiter || ',') : cloneDeep(value)
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
     value.push(
       flat
         ? scaffold || ''
@@ -505,7 +535,8 @@ export default class ComboControl extends React.Component<ComboProps> {
       deleteConfirmText,
       data,
       env,
-      translate: __
+      translate: __,
+      dispatchEvent
     } = this.props;
 
     if (disabled) {
@@ -515,6 +546,19 @@ export default class ComboControl extends React.Component<ComboProps> {
     let value = this.getValueAsArray();
     const ctx = createObject(data, value[key]);
 
+    const rendererEvent = await dispatchEvent(
+      'delete',
+      createObject(data, {
+        key,
+        value:
+          flat && joinValues ? value.join(delimiter || ',') : cloneDeep(value)
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
+
     if (isEffectiveApi(deleteApi, ctx)) {
       const confirmed = await env.confirm(
         deleteConfirmText ? filter(deleteConfirmText, ctx) : __('deleteConfirm')
@@ -598,7 +642,8 @@ export default class ComboControl extends React.Component<ComboProps> {
 
     if (
       syncDefaultValue === false ||
-      this.subFormDefaultValues.length !== this.subForms.length
+      this.subFormDefaultValues.length !==
+        this.subForms.filter(item => item !== undefined).length
     ) {
       return;
     }
@@ -866,8 +911,19 @@ export default class ComboControl extends React.Component<ComboProps> {
   }
 
   @autobind
-  handleTabSelect(key: number) {
-    const {store} = this.props;
+  async handleTabSelect(key: number) {
+    const {store, data, dispatchEvent} = this.props;
+
+    const rendererEvent = await dispatchEvent(
+      'tabsChange',
+      createObject(data, {
+        key
+      })
+    );
+
+    if (rendererEvent?.prevented) {
+      return;
+    }
 
     store.setActiveKey(key);
   }
@@ -1138,7 +1194,9 @@ export default class ComboControl extends React.Component<ComboProps> {
       lazyLoad,
       changeImmediately,
       placeholder,
-      translate: __
+      translate: __,
+      itemClassName,
+      itemsWrapperClassName
     } = this.props;
 
     let items = this.props.items;
@@ -1165,7 +1223,7 @@ export default class ComboControl extends React.Component<ComboProps> {
             : ''
         )}
       >
-        <div className={cx(`Combo-items`)}>
+        <div className={cx(`Combo-items`, itemsWrapperClassName)}>
           {Array.isArray(value) && value.length ? (
             value.map((value, index, thelist) => {
               let delBtn: any = null;
@@ -1176,21 +1234,20 @@ export default class ComboControl extends React.Component<ComboProps> {
                   evalExpression(itemRemovableOn, value) !== false)
               ) {
                 delBtn = (
-                  <a
-                    onClick={this.removeItem.bind(this, index)}
+                  <Button
                     key="remove"
-                    className={cx(
-                      `Combo-delBtn ${!store.removable ? 'is-disabled' : ''}`
-                    )}
-                    data-tooltip={__('delete')}
-                    data-position="bottom"
+                    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" />
                     )}
-                  </a>
+                  </Button>
                 );
               }
 
@@ -1214,7 +1271,7 @@ export default class ComboControl extends React.Component<ComboProps> {
 
               return (
                 <div
-                  className={cx(`Combo-item`)}
+                  className={cx(`Combo-item`, itemClassName)}
                   key={this.keys[index] || (this.keys[index] = guid())}
                 >
                   {!disabled && draggable && thelist.length > 1 ? (
@@ -1315,15 +1372,14 @@ export default class ComboControl extends React.Component<ComboProps> {
                   }
                 )
               ) : (
-                <button
-                  type="button"
+                <Button
+                  className={cx(`Combo-addBtn`, addButtonClassName)}
+                  tooltip={__('Combo.add')}
                   onClick={this.addItem}
-                  className={cx(`Button Combo-addBtn`, addButtonClassName)}
-                  data-tooltip={__('Combo.add')}
                 >
                   {addIcon ? <Icon icon="plus" className="icon" /> : null}
                   <span>{__(addButtonText || 'Combo.add')}</span>
-                </button>
+                </Button>
               )
             ) : null}
             {draggable ? (
@@ -1352,7 +1408,8 @@ export default class ComboControl extends React.Component<ComboProps> {
       disabled,
       typeSwitchable,
       nullable,
-      translate: __
+      translate: __,
+      itemClassName
     } = this.props;
 
     let items = this.props.items;
@@ -1373,7 +1430,7 @@ export default class ComboControl extends React.Component<ComboProps> {
           disabled ? 'is-disabled' : ''
         )}
       >
-        <div className={cx(`Combo-item`)}>
+        <div className={cx(`Combo-item`, itemClassName)}>
           {condition && typeSwitchable !== false ? (
             <div className={cx('Combo-itemTag')}>
               <label>{__('Combo.type')}</label>

package/src/renderers/Form/InputCity.tsx

@@ -299,7 +299,16 @@ export class CityPicker extends React.Component<
     const {onChange, allowStreet, joinValues, extractValue, delimiter} =
       this.props;
 
-    const {code, province, city, district, street} = this.state;
+    const {
+      code,
+      province,
+      city,
+      district,
+      street,
+      provinceCode,
+      cityCode,
+      districtCode
+    } = this.state;
 
     if (typeof extractValue === 'undefined' ? joinValues : extractValue) {
       code
@@ -312,8 +321,11 @@ export class CityPicker extends React.Component<
     } else {
       onChange({
         code,
+        provinceCode,
         province,
+        cityCode,
         city,
+        districtCode,
         district,
         street
       });

package/src/renderers/Form/InputFormula.tsx

@@ -55,6 +55,11 @@ export interface InputFormulaControlSchema extends FormBaseControl {
    */
   inputMode?: 'button' | 'input-button';
 
+  /**
+   * 外层input是否允许输入，否需要点击fx在弹窗中输入
+   */
+  allowInput?: boolean;
+
   /**
    * 按钮图标
    */
@@ -139,6 +144,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
       className,
       classPrefix: ns,
       classnames: cx,
+      allowInput = true,
       borderMode,
       placeholder,
       inputMode,
@@ -156,6 +162,7 @@ export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
         className={className}
         value={value}
         disabled={disabled}
+        allowInput={allowInput}
         onChange={onChange}
         evalMode={evalMode}
         variables={variables}

package/src/renderers/Form/InputRange.tsx

@@ -22,12 +22,8 @@ import {Action} from '../../types';
 export type Value = string | MultipleValue | number | [number, number];
 export type FormatValue = MultipleValue | number;
 export type TooltipPosType = 'auto' | 'top' | 'right' | 'bottom' | 'left';
-export type InputTextRendererEvent =
-  | 'change'
-  | 'afterChange'
-  | 'blur'
-  | 'focus';
-export type InputTextRendererAction = 'clear';
+export type InputRangeRendererEvent = 'change' | 'blur' | 'focus';
+export type InputRangeRendererAction = 'clear';
 export interface RangeControlSchema extends FormBaseControl {
   type: 'input-range';
 

package/src/renderers/Form/InputTable.tsx

@@ -1082,7 +1082,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
       prefixRow,
       formInited,
       perPage,
-      classnames: cx
+      classnames: cx,
+      rowClassName,
+      rowClassNameExpr
     } = this.props;
 
     if (formInited === false) {
@@ -1131,7 +1133,9 @@ export default class FormTable extends React.Component<TableProps, TableState> {
             expandConfig,
             canAccessSuperData,
             reUseRow: false,
-            offset
+            offset,
+            rowClassName,
+            rowClassNameExpr
           }
         )}
         {(addable && showAddBtn !== false) || showPager ? (

package/src/renderers/Form/index.tsx

@@ -1410,7 +1410,7 @@ export default class Form extends React.Component<FormProps, object> {
       formHorizontal: horizontal,
       controlWidth,
       disabled: disabled || (control as Schema).disabled || form.loading,
-      btnDisabled: form.loading || form.validating,
+      btnDisabled: disabled || form.loading || form.validating,
       onAction: this.handleAction,
       onQuery: this.handleQuery,
       onChange: this.handleChange,

package/src/renderers/Form/wrapControl.tsx

@@ -353,7 +353,7 @@ export function wrapControl<
               this.model.clearValueOnHidden &&
                 this.model.form?.deleteValueByName(this.model.name);
 
-              rootStore.removeStore(this.model);
+              isAlive(rootStore) && rootStore.removeStore(this.model);
             }
             delete this.model;
           }

package/src/renderers/Page.tsx

@@ -853,7 +853,7 @@ export class PageRenderer extends Page {
     throwErrors: boolean = false,
     delegate?: IScopedContext
   ) {
-    const scoped = this.context as IScopedContext;
+    const scoped = delegate || (this.context as IScopedContext);
 
     if (action.actionType === 'reload') {
       action.target && scoped.reload(action.target, ctx);
@@ -877,7 +877,6 @@ export class PageRenderer extends Page {
         action.reload &&
         ~['url', 'link', 'jump'].indexOf(action.actionType!)
       ) {
-        const scoped = delegate || (this.context as IScopedContext);
         scoped.reload(action.reload, ctx);
       }
     }

package/src/renderers/Progress.tsx

@@ -59,7 +59,7 @@ export interface ProgressSchema extends BaseSchema {
   animate?: boolean;
 
   /**
-   * 圆形进度条线的宽度
+   * 进度条线的宽度
    */
   strokeWidth?: number;
   /**
@@ -95,7 +95,7 @@ export class ProgressField extends React.Component<ProgressProps, object> {
   @autobind
   format(value: number) {
     const {valueTpl, render, data} = this.props;
-    return render(`progress-value`, valueTpl + '', {
+    return render(`progress-value`, valueTpl || '${value}%', {
       data: createObject(data, {value})
     });
   }