amis 1.5.4 → 1.5.6-beta.5

package/src/components/formula/plugin.ts

@@ -0,0 +1,177 @@
+/**
+ * @file 扩展 codemirror
+ */
+
+import type CodeMirror from 'codemirror';
+import {eachTree} from '../../utils/helper';
+import type {FormulaEditorProps, VariableItem} from './Editor';
+
+export function editorFactory(
+  dom: HTMLElement,
+  cm: typeof CodeMirror,
+  props: any
+) {
+  registerLaunguageMode(cm);
+
+  console.log('here', props.evalMode);
+
+  return cm(dom, {
+    value: props.value || '',
+    autofocus: true,
+    mode: props.evalMode ? 'text/formula' : 'text/formula-template'
+  });
+}
+
+export class FormulaPlugin {
+  constructor(
+    readonly editor: CodeMirror.Editor,
+    readonly cm: typeof CodeMirror,
+    readonly getProps: () => FormulaEditorProps
+  ) {
+    // editor.on('change', this.autoMarkText);
+    this.autoMarkText();
+  }
+
+  autoMarkText() {
+    const {functions, variables, value} = this.getProps();
+    if (value) {
+      // todo functions 也需要自动替换
+      this.autoMark(variables);
+    }
+  }
+
+  insertContent(value: any, type: 'variable' | 'func') {
+    const from = this.editor.getCursor();
+    if (type === 'variable') {
+      this.editor.replaceSelection(value.key);
+      var to = this.editor.getCursor();
+
+      this.markText(from, to, value.name, 'cm-field');
+    } else if (type === 'func') {
+      // todo 支持 snippet，目前是不支持的
+
+      this.editor.replaceSelection(`${value}()`);
+      var to = this.editor.getCursor();
+      this.markText(
+        from,
+        {
+          line: to.line,
+          ch: to.ch - 2
+        },
+        value,
+        'cm-func'
+      );
+
+      this.editor.setCursor({
+        line: to.line,
+        ch: to.ch - 1
+      });
+    } else if (typeof value === 'string') {
+      this.editor.replaceSelection(value);
+    }
+
+    this.editor.focus();
+  }
+
+  markText(
+    from: CodeMirror.Position,
+    to: CodeMirror.Position,
+    label: string,
+    className = 'cm-func'
+  ) {
+    const text = document.createElement('span');
+    text.className = className;
+    text.innerText = label;
+    this.editor.markText(from, to, {
+      atomic: true,
+      replacedWith: text
+    });
+  }
+
+  autoMark(variables: Array<VariableItem>) {
+    if (!Array.isArray(variables) || !variables.length) {
+      return;
+    }
+
+    const varMap: {
+      [propname: string]: string;
+    } = {};
+
+    eachTree(
+      variables,
+      item => item.value && (varMap[item.value] = item.label)
+    );
+    const vars = Object.keys(varMap).sort((a, b) => b.length - a.length);
+
+    const editor = this.editor;
+    const lines = editor.lineCount();
+    for (let line = 0; line < lines; line++) {
+      const content = editor.getLine(line);
+
+      // 标记方法调用
+      content.replace(/([A-Z]+)\s*\(/g, (_, func, pos) => {
+        this.markText(
+          {
+            line: line,
+            ch: pos
+          },
+          {
+            line: line,
+            ch: pos + func.length
+          },
+          func,
+          'cm-func'
+        );
+        return _;
+      });
+
+      // 标记变量
+      vars.forEach(v => {
+        let from = 0;
+        let idx = -1;
+        while (~(idx = content.indexOf(v, from))) {
+          this.markText(
+            {
+              line: line,
+              ch: idx
+            },
+            {
+              line: line,
+              ch: idx + v.length
+            },
+            varMap[v],
+            'cm-field'
+          );
+          from = idx + v.length;
+        }
+      });
+    }
+  }
+
+  dispose() {}
+
+  validate() {}
+}
+
+let modeRegisted = false;
+function registerLaunguageMode(cm: typeof CodeMirror) {
+  if (modeRegisted) {
+    return;
+  }
+  modeRegisted = true;
+
+  // 对应 evalMode
+  cm.defineMode('formula', (config: any, parserConfig: any) => {
+    var formula = cm.getMode(config, 'javascript');
+    if (!parserConfig || !parserConfig.base) return formula;
+
+    return cm.multiplexingMode(cm.getMode(config, parserConfig.base), {
+      open: '${',
+      close: '}',
+      mode: formula
+    });
+  });
+
+  cm.defineMIME('text/formula', {name: 'formula'});
+  cm.defineMIME('text/formula-template', {name: 'formula', base: 'htmlmixed'});
+}

package/src/components/index.tsx

@@ -12,6 +12,7 @@ import Button from './Button';
 import Checkbox from './Checkbox';
 import Checkboxes from './Selection';
 import Collapse from './Collapse';
+import CollapseGroup from './CollapseGroup';
 import DatePicker from './DatePicker';
 import DateRangePicker from './DateRangePicker';
 import Drawer from './Drawer';
@@ -69,6 +70,7 @@ export {
   Checkbox,
   Checkboxes,
   Collapse,
+  CollapseGroup,
   DatePicker,
   DateRangePicker,
   Drawer,

package/src/index.tsx

@@ -89,6 +89,7 @@ import './renderers/Form/Select';
 import './renderers/Form/Static';
 import './renderers/Form/InputDate';
 import './renderers/Form/InputDateRange';
+import './renderers/Form/InputFormula';
 import './renderers/Form/InputRepeat';
 import './renderers/Form/InputTree';
 import './renderers/Form/TreeSelect';

package/src/renderers/CRUD.tsx

@@ -885,7 +885,7 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       env
     } = this.props;
 
-    store.closeDialog();
+    store.closeDialog(true);
     const dialogAction = store.action as Action;
 
     if (stopAutoRefreshWhenModalIsOpen && interval) {
@@ -968,10 +968,10 @@ export default class CRUD extends React.Component<CRUDProps, any> {
     redirect && env.jumpTo(redirect, dialogAction);
   }
 
-  handleDialogClose() {
+  handleDialogClose(confirmed = false) {
     const {store, stopAutoRefreshWhenModalIsOpen, silentPolling, interval} =
       this.props;
-    store.closeDialog();
+    store.closeDialog(confirmed);
 
     if (stopAutoRefreshWhenModalIsOpen && interval) {
       this.timer = setTimeout(

package/src/renderers/Collapse.tsx

@@ -1,12 +1,7 @@
 import React from 'react';
 import {Renderer, RendererProps} from '../factory';
 import {Collapse as BasicCollapse} from '../components/Collapse';
-import {
-  BaseSchema,
-  SchemaCollection,
-  SchemaTpl,
-  SchemaObject
-} from '../Schema';
+import {BaseSchema, SchemaCollection, SchemaTpl, SchemaObject} from '../Schema';
 
 /**
  * Collapse 折叠渲染器，格式说明。
@@ -63,9 +58,9 @@ export interface CollapseSchema extends BaseSchema {
    */
   showArrow?: boolean;
 
-   /**
-    * 自定义切换图标
-    */
+  /**
+   * 自定义切换图标
+   */
   expandIcon?: SchemaObject;
 
   /**
@@ -104,14 +99,9 @@ export interface CollapseProps
   children?: JSX.Element | ((props?: any) => JSX.Element);
 }
 
-export default class Collapse extends React.Component<
-  CollapseProps,
-  {}
-> {
-
+export default class Collapse extends React.Component<CollapseProps, {}> {
   render() {
     const {
-      key,
       id,
       classPrefix: ns,
       classnames: cx,
@@ -144,7 +134,6 @@ export default class Collapse extends React.Component<
 
     return (
       <BasicCollapse
-        key={key}
         id={id}
         classnames={cx}
         classPrefix={ns}
@@ -162,19 +151,30 @@ export default class Collapse extends React.Component<
         showArrow={showArrow}
         disabled={disabled}
         propsUpdate={propsUpdate}
-        expandIcon={expandIcon ? render('arrow-icon', expandIcon || '', {className: cx('Collapse-icon-tranform')}) : null}
-        collapseHeader={collapseTitle || collapseHeader ? render('heading', collapseTitle || collapseHeader) : null}
+        expandIcon={
+          expandIcon
+            ? render('arrow-icon', expandIcon || '', {
+                className: cx('Collapse-icon-tranform')
+              })
+            : null
+        }
+        collapseHeader={
+          collapseTitle || collapseHeader
+            ? render('heading', collapseTitle || collapseHeader)
+            : null
+        }
         header={render('heading', title || header || '')}
-        body={children
-          ? typeof children === 'function'
-            ? children(this.props)
-            : children
-          : body
-          ? render('body', body)
-          : null}
+        body={
+          children
+            ? typeof children === 'function'
+              ? children(this.props)
+              : children
+            : body
+            ? render('body', body)
+            : null
+        }
         onCollapse={onCollapse}
-      >
-      </BasicCollapse>
+      ></BasicCollapse>
     );
   }
 }

package/src/renderers/CollapseGroup.tsx

@@ -41,11 +41,13 @@ export interface CollapseGroupSchema extends BaseSchema {
 export interface CollapseGroupProps
   extends RendererProps,
     Omit<CollapseGroupSchema, 'type' | 'className'> {
-
   children?: JSX.Element | ((props?: any) => JSX.Element);
 }
 
-export class CollapseGroupRender extends React.Component<CollapseGroupProps, {}> {
+export class CollapseGroupRender extends React.Component<
+  CollapseGroupProps,
+  {}
+> {
   constructor(props: CollapseGroupProps) {
     super(props);
   }
@@ -61,19 +63,18 @@ export class CollapseGroupRender extends React.Component<CollapseGroupProps, {}>
     } = this.props;
     return (
       <CollapseGroup
-          defaultActiveKey={defaultActiveKey}
-          accordion={accordion}
-          expandIcon={expandIcon}
-          expandIconPosition={expandIconPosition}
-          className={className}
-        >
-          {render('body', body || '')}
-        </CollapseGroup>
-    )
+        defaultActiveKey={defaultActiveKey}
+        accordion={accordion}
+        expandIcon={expandIcon}
+        expandIconPosition={expandIconPosition}
+        className={className}
+      >
+        {render('body', body || '')}
+      </CollapseGroup>
+    );
   }
 }
 
-
 @Renderer({
   type: 'collapse-group'
 })

package/src/renderers/Dialog.tsx

@@ -97,7 +97,7 @@ export type DialogSchemaBase = Omit<DialogSchema, 'type'>;
 export interface DialogProps
   extends RendererProps,
     Omit<DialogSchema, 'className'> {
-  onClose: () => void;
+  onClose: (confirmed?: boolean) => void;
   onConfirm: (
     values: Array<object>,
     action: Action,
@@ -214,12 +214,12 @@ export default class Dialog extends React.Component<DialogProps> {
     return ret;
   }
 
-  handleSelfClose() {
+  handleSelfClose(e?: any, confirmed?: boolean) {
     const {onClose, store} = this.props;
 
     // clear error
     store.updateMessage();
-    onClose();
+    onClose(confirmed);
   }
 
   handleAction(e: React.UIEvent<any>, action: Action, data: object) {
@@ -251,7 +251,7 @@ export default class Dialog extends React.Component<DialogProps> {
       return;
     }
 
-    store.closeDialog();
+    store.closeDialog(true);
   }
 
   handleDialogClose(...args: Array<any>) {
@@ -264,7 +264,7 @@ export default class Dialog extends React.Component<DialogProps> {
       return;
     }
 
-    store.closeDialog();
+    store.closeDialog(args[1]);
   }
 
   handleDrawerConfirm(values: object[], action: Action, ...args: Array<any>) {
@@ -743,7 +743,7 @@ export class DialogRenderer extends Dialog {
         },
         data,
         action
-      ) || this.handleSelfClose();
+      ) || this.handleSelfClose(undefined, true);
     } else if (action.actionType === 'next' || action.actionType === 'prev') {
       store.setCurrentAction(action);
       if (action.type === 'submit') {
@@ -755,7 +755,7 @@ export class DialogRenderer extends Dialog {
           },
           data,
           action
-        ) || this.handleSelfClose();
+        ) || this.handleSelfClose(undefined, true);
       } else {
         onConfirm([data], action, data, []);
       }
@@ -769,7 +769,7 @@ export class DialogRenderer extends Dialog {
       store.setCurrentAction(action);
       action.target && scoped.reload(action.target, data);
       if (action.close || action.type === 'submit') {
-        this.handleSelfClose();
+        this.handleSelfClose(undefined, action.type === 'submit');
         this.closeTarget(action.close);
       }
     } else if (this.tryChildrenToHandle(action, data)) {

package/src/renderers/Drawer.tsx

@@ -304,7 +304,7 @@ export default class Drawer extends React.Component<DrawerProps> {
       return;
     }
 
-    store.closeDialog();
+    store.closeDialog(true);
   }
 
   handleDialogClose(...args: Array<any>) {
@@ -317,7 +317,7 @@ export default class Drawer extends React.Component<DrawerProps> {
       return;
     }
 
-    store.closeDialog();
+    store.closeDialog(args[1]);
   }
 
   handleChildFinished(value: any, action: Action) {

package/src/renderers/Form/InputColor.tsx

@@ -68,12 +68,11 @@ export default class ColorControl extends React.PureComponent<
   };
 
   render() {
-    const {className, classPrefix: ns, value, ...rest} = this.props;
-
+    const {className, classPrefix: ns, value, env, ...rest} = this.props;
     return (
       <div className={cx(`${ns}ColorControl`, className)}>
         <Suspense fallback={<div>...</div>}>
-          <ColorPicker classPrefix={ns} {...rest} value={value || ''} />
+          <ColorPicker classPrefix={ns} {...rest} value={value || ''} useMobileUI={env.useMobileUI}/>
         </Suspense>
       </div>
     );

package/src/renderers/Form/InputDate.tsx

@@ -424,6 +424,7 @@ export default class DateControl extends React.PureComponent<
       format,
       timeFormat,
       valueFormat,
+      env,
       largeMode,
       render,
       ...rest
@@ -441,6 +442,7 @@ export default class DateControl extends React.PureComponent<
           format={valueFormat || format}
           {...this.state}
           classnames={cx}
+          useMobileUI={env.useMobileUI}
           schedules={this.state.schedules}
           largeMode={largeMode}
           onScheduleClick={this.onScheduleClick.bind(this)}

package/src/renderers/Form/InputDateRange.tsx

@@ -172,6 +172,7 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
       maxDuration,
       data,
       format,
+      env,
       ...rest
     } = this.props;
 
@@ -186,6 +187,7 @@ export default class DateRangeControl extends React.Component<DateRangeProps> {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
+          useMobileUI={env.useMobileUI}
         />
       </div>
     );

package/src/renderers/Form/InputFile.tsx

@@ -790,7 +790,7 @@ export default class FileControl extends React.Component<FileProps, FileState> {
       onProgress
     )
       .then(ret => {
-        if (ret.status || !ret.data) {
+        if ((ret.status && (ret as any).status !== '0') || !ret.data) {
           throw new Error(ret.msg || __('File.errorRetry'));
         }
 

package/src/renderers/Form/InputFormula.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import FormItem, {FormBaseControl, FormControlProps} from './Item';
+import FormulaPicker from '../../components/formula/Picker';
+import type {FuncGroup, VariableItem} from '../../components/formula/Editor';
+
+/**
+ * InputFormula 公式编辑器
+ * 文档：https://baidu.gitee.io/amis/docs/components/form/input-formula
+ */
+export interface InputFormulaControlSchema extends FormBaseControl {
+  type: 'input-formula';
+
+  /**
+   * evalMode 即直接就是表达式，否则
+   * 需要 ${这里面才是表达式}
+   * 默认为 true
+   */
+  evalMode?: boolean;
+
+  /**
+   * 用于提示的变量集合，默认为空
+   */
+  variables: Array<VariableItem>;
+
+  variableMode?: 'tabs' | 'tree';
+
+  /**
+   * 函数集合，默认不需要传，即  amis-formula 里面那个函数
+   * 如果有扩充，则需要传。
+   */
+  functions: Array<FuncGroup>;
+
+  /**
+   * 顶部标题，默认为表达式
+   */
+  header: string;
+}
+
+export interface InputFormulaProps
+  extends FormControlProps,
+    Omit<
+      InputFormulaControlSchema,
+      'options' | 'inputClassName' | 'className' | 'descriptionClassName'
+    > {}
+
+@FormItem({
+  type: 'input-formula'
+})
+export class InputFormulaRenderer extends React.Component<InputFormulaProps> {
+  render() {
+    const {
+      selectedOptions,
+      disabled,
+      onChange,
+      evalMode,
+      variables,
+      variableMode,
+      functions,
+      header
+    } = this.props;
+
+    return (
+      <FormulaPicker
+        value={selectedOptions}
+        disabled={disabled}
+        onChange={onChange}
+        evalMode={evalMode}
+        variables={variables}
+        variableMode={variableMode}
+        functions={functions}
+        header={header}
+      />
+    );
+  }
+}

package/src/renderers/Form/InputImage.tsx

@@ -1035,7 +1035,7 @@ export default class ImageControl extends React.Component<
     const __ = this.props.translate;
     this._send(file, this.props.receiver as string, {}, onProgress)
       .then((ret: Payload) => {
-        if (ret.status) {
+        if (ret.status && (ret as any).status !== '0') {
           throw new Error(ret.msg || __('File.errorRetry'));
         }
 

package/src/renderers/Form/InputMonthRange.tsx

@@ -170,6 +170,7 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
       maxDuration,
       data,
       format,
+      env,
       ...rest
     } = this.props;
 
@@ -184,6 +185,7 @@ export default class MonthRangeControl extends React.Component<MonthRangeProps>
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
+          useMobileUI={env.useMobileUI}
         />
       </div>
     );

package/src/renderers/Form/InputQuarterRange.tsx

@@ -26,6 +26,7 @@ export default class QuarterRangeControl extends InputDateRange {
       maxDuration,
       data,
       format,
+      env,
       ...rest
     } = this.props;
 
@@ -44,6 +45,7 @@ export default class QuarterRangeControl extends InputDateRange {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
+          useMobileUI={env.useMobileUI}
         />
       </div>
     );

package/src/renderers/Form/InputYearRange.tsx

@@ -26,6 +26,7 @@ export default class YearRangeControl extends InputDateRange {
       maxDuration,
       data,
       format,
+      env,
       ...rest
     } = this.props;
 
@@ -44,6 +45,7 @@ export default class YearRangeControl extends InputDateRange {
           maxDate={maxDate ? filterDate(maxDate, data, format) : undefined}
           minDuration={minDuration ? parseDuration(minDuration) : undefined}
           maxDuration={maxDuration ? parseDuration(maxDuration) : undefined}
+          useMobileUI={env.useMobileUI}
         />
       </div>
     );

package/src/renderers/Form/Item.tsx

@@ -436,12 +436,12 @@ export class FormItemWrap extends React.Component<FormItemProps> {
   }
 
   @autobind
-  handleDialogClose() {
+  handleDialogClose(confirmed = false) {
     const {formItem: model} = this.props;
     if (!model) {
       return;
     }
-    model.closeDialog();
+    model.closeDialog(confirmed);
   }
 
   renderControl(): JSX.Element | null {