amis 1.9.0-beta.12 → 1.9.0-beta.15

package/src/renderers/Tabs.tsx

@@ -612,7 +612,7 @@ export default class Tabs extends React.Component<TabsProps, TabsState> {
    */
   doAction(action: Action, args: any) {
     const actionType = action?.actionType as string;
-    const activeKey = action?.activeKey as number;
+    const activeKey = args?.activeKey as number;
     if (actionType === 'changeActiveKey') {
       this.handleSelect(activeKey);
     }

package/src/renderers/Tag.tsx

@@ -0,0 +1,128 @@
+/**
+ * @file Tag
+ */
+import React from 'react';
+import {Renderer, RendererProps} from '../factory';
+import {BaseSchema, SchemaClassName, SchemaIcon} from '../Schema';
+import {getPropValue} from '../utils/helper';
+import {isPureVariable, resolveVariableAndFilter} from '../utils/tpl-builtin';
+
+import Tag from '../components/Tag';
+
+/**
+ * Tag
+ */
+export interface TagSchema extends BaseSchema {
+  type: 'tag';
+  /**
+   * 类名
+   */
+  className?: SchemaClassName;
+
+  /**
+   * 自定义样式
+   */
+  style?: React.CSSProperties;
+
+  /**
+   * 标签颜色
+   */
+  color?: string;
+
+  /**
+   * 标签文本内容
+   */
+  label: string;
+
+  /**
+   * normal: 面性标签，对应color的背景色
+   * rounded: 线性标签， 对应color的边框
+   * status: 带图标的标签， 图标可以自定义
+   */
+  displayMode?: 'normal' | 'rounded' | 'status';
+
+  /**
+   * status模式时候设置的前置图标
+   */
+  icon?: SchemaIcon;
+
+  /**
+   * 是否展示关闭按钮
+   */
+  closable?: boolean;
+
+  /**
+   * 关闭图标
+   */
+  closeIcon: SchemaIcon;
+
+  /**
+   * 是否是可选的标签
+   */
+  checkable?: boolean;
+
+  /**
+   * 是否选中
+   */
+  checked?: boolean;
+
+  /**
+   * 是否禁用
+   */
+  disabled?: boolean;
+}
+
+export interface TagProps
+  extends RendererProps,
+    Omit<TagSchema, 'type' | 'className'> {}
+
+export class TagField extends React.Component<TagProps, object> {
+  static defaultProps: Partial<TagProps> = {
+    displayMode: 'normal'
+  };
+
+  render() {
+    let {
+      label,
+      icon,
+      displayMode,
+      color,
+      className,
+      data,
+      style = {}
+    } = this.props;
+
+    label =
+      getPropValue(this.props) ||
+      (label ? resolveVariableAndFilter(label, data, '| raw') : null);
+
+    if (isPureVariable(icon)) {
+      icon = resolveVariableAndFilter(icon, data);
+    }
+
+    if (isPureVariable(displayMode)) {
+      displayMode = resolveVariableAndFilter(displayMode, data);
+    }
+
+    if (isPureVariable(color)) {
+      color = resolveVariableAndFilter(color, data);
+    }
+
+    return (
+      <Tag
+        className={className}
+        displayMode={displayMode}
+        color={color}
+        icon={icon}
+        style={style}
+      >
+        {label}
+      </Tag>
+    );
+  }
+}
+
+@Renderer({
+  type: 'tag'
+})
+export class TagFieldRenderer extends TagField {}

package/src/renderers/Wizard.tsx

@@ -648,7 +648,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
     const previous = store.data;
     const final = {...previous, ...values};
 
-    if (await this.dispatchEvent('change', {formData: final})) {
+    if (await this.dispatchEvent('change', final)) {
       return;
     }
 
@@ -692,7 +692,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
       onFinished
     } = this.props;
 
-    if (await this.dispatchEvent('finished', {formData: store.data})) {
+    if (await this.dispatchEvent('finished', store.data)) {
       return;
     }
 
@@ -719,7 +719,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
       formStore
         .saveRemote(action.api || step.api || api!, store.data, {
           onSuccess: () => {
-            this.dispatchEvent('submitSucc', {formData: store.data});
+            this.dispatchEvent('submitSucc', store.data);
 
             if (
               !isEffectiveApi(finnalAsyncApi, store.data) ||

package/src/schemaExtend.ts

@@ -19,22 +19,15 @@ addSchemaFilter(function (schema: Schema, renderer, props?: any) {
         const arr: Array<any> = [];
         Object.keys(value).forEach(key => {
           const valueType = typeof value[key];
-          if (key.endsWith('___tmp')) {
-            arr.push({
-              key: key.replace('___tmp', ''),
-              value: ''
-            });
-          } else {
-            arr.push({
-              key: key || '',
-              value:
-                valueType === 'string' ||
-                valueType === 'number' ||
-                valueType === 'boolean'
-                  ? value[key]
-                  : JSON.stringify(value[key])
-            });
-          }
+          arr.push({
+            key: key || '',
+            value:
+              valueType === 'string' ||
+              valueType === 'number' ||
+              valueType === 'boolean'
+                ? value[key]
+                : JSON.stringify(value[key])
+          });
         });
         return arr;
       },
@@ -52,12 +45,7 @@ addSchemaFilter(function (schema: Schema, renderer, props?: any) {
             } catch (e) {}
           }
 
-          // 如果先输入了 a 作为 key，想输入 aa 的时候会先进入这里，导致无法输入 aa，因此当遇到 key 相同的时候加个 ___tmp 后缀
-          if (key in obj) {
-            obj[key + '___tmp'] = value;
-          } else {
-            obj[key] = value;
-          }
+          obj[key] = value;
         });
         return obj;
       },
@@ -67,13 +55,21 @@ addSchemaFilter(function (schema: Schema, renderer, props?: any) {
           type: 'input-text',
           unique: true,
           name: 'key',
-          required: true
+          required: true,
+          validateOnChange: true
         },
-        {
-          placeholder: schema.valuePlaceholder ?? 'Value',
-          type: schema.valueType || 'input-text',
-          name: 'value'
-        }
+        schema.valueComponent
+          ? {
+              placeholder: schema.valuePlaceholder ?? 'Value',
+              component: schema.valueComponent,
+              asFormItem: true,
+              name: 'value'
+            }
+          : {
+              placeholder: schema.valuePlaceholder ?? 'Value',
+              type: schema.valueType || 'input-text',
+              name: 'value'
+            }
       ]
     };
   }

package/src/store/formItem.ts

@@ -59,6 +59,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
   .props({
     isFocused: false,
     type: '',
+    label: '',
     unique: false,
     loading: false,
     required: false,
@@ -238,7 +239,8 @@ export const FormItemStore = StoreNode.named('FormItemStore')
       validateApi,
       maxLength,
       minLength,
-      validateOnChange
+      validateOnChange,
+      label
     }: {
       required?: boolean;
       unique?: boolean;
@@ -260,6 +262,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
       minLength?: number;
       maxLength?: number;
       validateOnChange?: boolean;
+      label?: string;
     }) {
       if (typeof rules === 'string') {
         rules = str2rules(rules);
@@ -287,6 +290,7 @@ export const FormItemStore = StoreNode.named('FormItemStore')
       typeof validateApi !== 'undefined' && (self.validateApi = validateApi);
       typeof validateOnChange !== 'undefined' &&
         (self.validateOnChange = !!validateOnChange);
+      typeof label === 'string' && (self.label = label);
 
       rules = {
         ...rules,

package/src/store/index.ts

@@ -12,6 +12,7 @@ import {ComboStore} from './combo';
 import {FormStore} from './form';
 import {CRUDStore} from './crud';
 import {TableStore} from './table';
+import {TableStoreV2} from './table-v2';
 import {ListStore} from './list';
 import {ModalStore} from './modal';
 import {TranslateFn} from '../locale';
@@ -33,6 +34,7 @@ const allowedStoreList = [
   ComboStore,
   CRUDStore,
   TableStore,
+  TableStoreV2,
   ListStore,
   ModalStore,
   FormItemStore,