amis 1.7.0 → 1.8.0-beta.13

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

@@ -17,6 +17,7 @@ export interface ValueProps extends ThemeProps, LocaleProps {
   op?: OperatorType;
   disabled?: boolean;
   formula?: FormulaPickerProps;
+  popOverContainer?: any;
 }
 
 export class Value extends React.Component<ValueProps> {
@@ -30,7 +31,8 @@ export class Value extends React.Component<ValueProps> {
       translate: __,
       data,
       disabled,
-      formula
+      formula,
+      popOverContainer
     } = this.props;
     let input: JSX.Element | undefined = undefined;
     if (formula) {
@@ -76,6 +78,7 @@ export class Value extends React.Component<ValueProps> {
           onChange={onChange}
           timeFormat=""
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'time') {
@@ -90,6 +93,7 @@ export class Value extends React.Component<ValueProps> {
           dateFormat=""
           timeFormat={field.format || 'HH:mm'}
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'datetime') {
@@ -102,6 +106,7 @@ export class Value extends React.Component<ValueProps> {
           onChange={onChange}
           timeFormat={field.timeFormat || 'HH:mm'}
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'select') {
@@ -119,6 +124,7 @@ export class Value extends React.Component<ValueProps> {
           onChange={onChange}
           multiple={op === 'select_any_in' || op === 'select_not_any_in'}
           disabled={disabled}
+          popOverContainer={popOverContainer}
         />
       );
     } else if (field.type === 'boolean') {

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

@@ -10,7 +10,7 @@ import {FormulaPlugin, editorFactory} from './plugin';
 import FuncList from './FuncList';
 import {VariableList} from './VariableList';
 import CodeMirrorEditor from '../CodeMirror';
-import {autobind} from '../../utils/helper';
+import {autobind, eachTree} from '../../utils/helper';
 import {themeable, ThemeProps} from '../../theme';
 import {localeable, LocaleProps} from '../../locale';
 
@@ -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
   };
@@ -133,8 +131,40 @@ export class FormulaEditor extends React.Component<
     variables: Array<VariableItem>,
     functions: Array<FuncGroup>
   ) {
-    // todo 高亮原始文本
-    return value;
+    if (!Array.isArray(variables) || !variables.length || !value) {
+      return;
+    }
+
+    const varMap: {
+      [propname: string]: string;
+    } = {};
+
+    eachTree(
+      variables,
+      item => item.value && (varMap[item.value] = item.label)
+    );
+    const vars = Object.keys(varMap)
+      .filter(item => item)
+      .sort((a, b) => b.length - a.length);
+
+    const content = value || '';
+    let html = '';
+
+    // 标记方法调用
+    html = content.replace(/([A-Z]+)\s*\(/g, (_, func, pos) => {
+      return _?.replace(func, `<span class="c-func">${func}</span>`);
+    });
+
+    vars.forEach(v => {
+      let from = 0;
+      let idx = -1;
+      while (~(idx = content.indexOf(v, from))) {
+        html = content.replace(v, `<span class="c-field">${varMap[v]}</span>`);
+        from = idx + v.length;
+      }
+    });
+
+    return {html};
   }
 
   componentWillUnmount() {
@@ -223,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`, {
@@ -268,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

@@ -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,19 @@ export class FormulaPicker extends React.Component<FormulaPickerProps> {
                     'FormulaPicker-input',
                     isOpened ? 'is-active' : ''
                   )}
-                  allowInput
+                  allowInput={allowInput}
                   clearable={clearable}
                   value={value}
+                  result={
+                    allowInput
+                      ? void 0
+                      : 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

@@ -42,6 +42,7 @@ import {
   RendererEvent
 } from './utils/renderer-event';
 import {runActions} from './actions/Action';
+import {enableDebug} from './utils/debug';
 
 export interface TestFunc {
   (
@@ -102,6 +103,7 @@ export interface RenderSchemaFilter {
 
 export interface wsObject {
   url: string;
+  responseKey?: string;
   body?: any;
 }
 
@@ -152,6 +154,10 @@ export interface RenderOptions {
    * 过滤 html 标签，可用来添加 xss 保护逻辑
    */
   filterHtml?: (input: string) => string;
+  /**
+   * 是否开启 amis 调试
+   */
+  enableAMISDebug?: boolean;
   [propName: string]: any;
 }
 
@@ -271,6 +277,10 @@ const defaultOptions: RenderOptions = {
   affixOffsetBottom: 0,
   richTextToken: '',
   useMobileUI: true, // 是否启用移动端原生 UI
+  enableAMISDebug:
+    (window as any).enableAMISDebug ??
+    location.search.indexOf('amisDebug=1') !== -1 ??
+    false,
   loadRenderer,
   rendererEventListeners: [],
   fetcher() {
@@ -287,7 +297,18 @@ const defaultOptions: RenderOptions = {
       };
       socket.onmessage = event => {
         if (event.data) {
-          onMessage(JSON.parse(event.data));
+          let data;
+          try {
+            data = JSON.parse(event.data);
+          } catch (error) {}
+          if (typeof data !== 'object') {
+            let key = ws.responseKey || 'data';
+            data = {
+              [key]: event.data
+            };
+          }
+
+          onMessage(data);
         }
       };
       socket.onerror = onError;
@@ -492,6 +513,13 @@ export function render(
       translate
     } as any;
 
+    if (options.enableAMISDebug) {
+      // 因为里面还有 render
+      setTimeout(() => {
+        enableDebug();
+      }, 10);
+    }
+
     store = RendererStore.create({}, options);
     stores[options.session || 'global'] = store;
   }
@@ -518,13 +546,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/locale/de-DE.ts

@@ -75,6 +75,19 @@ register('de-DE', {
   'Date.weekslater': '{{weeks}} Wochen später',
   'Date.yesterday': 'Gestern',
   'dateformat.year': 'YYYY',
+  'DateRange.daysago': 'letzten {{days}} Tage',
+  'DateRange.dayslater': 'innerhalb von {{days}} Tagen',
+  'DateRange.weeksago': 'letzten {{weeks}} Wochen',
+  'DateRange.weekslater': 'innerhalb von {{weeks}} Wochen',
+  'DateRange.monthsago': 'letzten {{months}} Monate',
+  'DateRange.monthslater': 'innerhalb von {{months}} Monaten',
+  'DateRange.quartersago': 'letzten {{quarters}} Quartale',
+  'DateRange.quarterslater': 'innerhalb von {{quarters}} Quartalen',
+  'DateRange.yearsago': 'letzten {{years}} Jahre',
+  'DateRange.yearslater': '{{years}} Jahren',
+  'DateRange.hoursago': 'letzten {{hours}} Stunden',
+  'DateRange.hourslater': 'innerhalb von {{hours}} Stunden',
+  'DateRange.1dayago': 'Vor 1 Tag',
   'DateRange.1daysago': 'Vor 1 Tag',
   'DateRange.7daysago': 'Vor 7 Tagen',
   'DateRange.30daysago': 'Vor 30 Tagen',
@@ -276,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

@@ -72,6 +72,19 @@ register('en-US', {
   'Date.weekslater': '{{weeks}} week(s) later',
   'Date.yesterday': 'Yesterday',
   'dateformat.year': 'YYYY',
+  'DateRange.daysago': 'Last {{days}} day(s)',
+  'DateRange.dayslater': 'Within {{days}} day(s)',
+  'DateRange.weeksago': 'Last {{weeks}} week(s)',
+  'DateRange.weekslater': 'Within {{weeks}} week(s)',
+  'DateRange.monthsago': 'Last {{months}} month(s)',
+  'DateRange.monthslater': 'Within {{months}} month(s)',
+  'DateRange.quartersago': 'Last {{quarters}} quarter(s)',
+  'DateRange.quarterslater': 'Within {{quarters}} quarter(s)',
+  'DateRange.yearsago': 'Last {{years}} year(s)',
+  'DateRange.yearslater': 'Within {{years}} year(s)',
+  'DateRange.hoursago': 'Last {{hours}} hour(s)',
+  'DateRange.hourslater': 'Within {{hours}} hour(s)',
+  'DateRange.1dayago': '1 day ago',
   'DateRange.1daysago': '1 day ago',
   'DateRange.7daysago': '7 days ago',
   'DateRange.30daysago': '30 days ago',
@@ -278,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

@@ -75,7 +75,20 @@ register('zh-CN', {
   'Date.weekslater': '{{weeks}}周后',
   'Date.yesterday': '昨天',
   'dateformat.year': 'YYYY年',
+  'DateRange.daysago': '最近{{days}}天',
+  'DateRange.dayslater': '{{days}}天以内',
+  'DateRange.weeksago': '最近{{weeks}}周',
+  'DateRange.weekslater': '{{weeks}}周以内',
+  'DateRange.monthsago': '最近{{months}}月',
+  'DateRange.monthslater': '{{months}}月以内',
+  'DateRange.quartersago': '最近{{quarters}}季度',
+  'DateRange.quarterslater': '{{quarters}}季度以内',
+  'DateRange.yearsago': '最近{{years}}年',
+  'DateRange.yearslater': '{{years}}年以内',
+  'DateRange.hoursago': '最近{{hours}}小时',
+  'DateRange.hourslater': '{{hours}}小时以内',
   'DateRange.1daysago': '最近1天',
+  'DateRange.1dayago': '最近1天',
   'DateRange.7daysago': '最近7天',
   'DateRange.30daysago': '最近30天',
   'DateRange.90daysago': '最近90天',
@@ -285,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/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/App.tsx

@@ -417,4 +417,8 @@ export class AppRenderer extends App {
     scoped.unRegisterComponent(this);
     super.componentWillUnmount();
   }
+
+  setData(values: object) {
+    return this.props.store.updateData(values);
+  }
 }

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/CRUD.tsx

@@ -105,6 +105,16 @@ export interface CRUDCommonSchema extends BaseSchema {
    */
   perPage?: number;
 
+  /**
+   * 默认排序字段
+   */
+  orderBy?: string;
+
+  /**
+   * 默认排序方向
+   */
+  orderDir?: 'asc' | 'desc';
+
   /**
    * 可以默认给定初始参数如： {\"perPage\": 24}
    */
@@ -772,11 +782,17 @@ export default class CRUD extends React.Component<CRUDProps, any> {
   }
 
   handleFilterInit(values: object) {
-    const {defaultParams, data, store} = this.props;
+    const {defaultParams, data, store, orderBy, orderDir} = this.props;
+    const params = {...defaultParams};
+
+    if (orderBy) {
+      params['orderBy'] = orderBy;
+      params['orderDir'] = orderDir || 'asc';
+    }
 
     this.handleFilterSubmit(
       {
-        ...defaultParams,
+        ...params,
         ...values,
         ...store.query
       },
@@ -1025,7 +1041,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
       env,
       loadDataOnce,
       loadDataOnceFetchOnFilter,
-      source
+      source,
+      columns
     } = this.props;
 
     // reload 需要清空用户选择。
@@ -1066,7 +1083,8 @@ export default class CRUD extends React.Component<CRUDProps, any> {
             pageField,
             perPageField,
             loadDataMode,
-            syncResponse2Query
+            syncResponse2Query,
+            columns: store.columns ?? columns
           })
           .then(value => {
             interval &&
@@ -1592,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/Carousel.tsx

@@ -278,6 +278,13 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
     clearTimeout(this.durationTimeout as number);
   }
 
+  @autobind
+  changeSlide(index: number) {
+    this.setState({
+      current: index
+    });
+  }
+
   renderDots() {
     const {classnames: cx} = this.props;
     const {current, options} = this.state;
@@ -290,6 +297,7 @@ export class Carousel extends React.Component<CarouselProps, CarouselState> {
         {Array.from({length: options.length}).map((_, i) => (
           <span
             key={i}
+            onClick={() => this.changeSlide(i)}
             className={cx('Carousel-dot', current === i ? 'is-active' : '')}
           />
         ))}

package/src/renderers/Chart.tsx

@@ -489,4 +489,8 @@ export class ChartRenderer extends Chart {
     const scoped = this.context as IScopedContext;
     scoped.unRegisterComponent(this);
   }
+
+  setData(values: object) {
+    return this.props.store.updateData(values);
+  }
 }