amis 1.8.0-beta.0 → 1.8.0-beta.3

package/src/renderers/Wizard.tsx

@@ -253,7 +253,8 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
           }
         })
         .then(value => {
-          onInit && onInit(store.data);
+          this.handleInitEvent(store.data)
+
           const state = {
             currentStep:
               typeof this.props.startStep === 'string'
@@ -291,7 +292,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
               ? parseInt(tokenize(this.props.startStep, this.props.data))
               : 1
         },
-        () => onInit && onInit(store.data)
+        () => this.handleInitEvent(store.data)
       );
     }
 
@@ -336,6 +337,19 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
     this.unSensor && this.unSensor();
   }
 
+  async dispatchEvent(action: string, value?: object) {
+    const {dispatchEvent, data} = this.props;
+
+    const rendererEvent = await dispatchEvent(action, createObject(data, value ? {value} : {}));
+
+    return rendererEvent?.prevented ?? false;
+  }
+
+  async handleInitEvent(data: any) {
+    const {onInit} = this.props;
+    (await this.dispatchEvent('inited', data)) && onInit && onInit(data);
+  }
+
   @autobind
   affixDetect() {
     if (
@@ -364,11 +378,15 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
     affixed ? affixDom.classList.add('in') : affixDom.classList.remove('in');
   }
 
-  gotoStep(index: number) {
+  async gotoStep(index: number) {
     const steps = this.props.steps || [];
     index = Math.max(Math.min(steps.length, index), 1);
 
     if (index != this.state.currentStep) {
+      if (await this.dispatchEvent('stepChange')) {
+        return
+      }
+
       this.setState({
         currentStep: index,
         completeStep: Math.max(this.state.completeStep, index - 1)
@@ -517,9 +535,9 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
     throwErrors: boolean = false,
     delegate?: IScopedContext
   ) {
-    const {onAction, store, env} = this.props;
+    const {onAction, store, env, steps} = this.props;
 
-    if (action.actionType === 'next' || action.type === 'submit') {
+    if (action.actionType === 'next' || action.type === 'submit' || action.actionType === 'step-submit') {
       this.form.doAction(
         {
           ...action,
@@ -572,6 +590,14 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
         });
     } else if (action.actionType === 'reload') {
       action.target && this.reloadTarget(action.target, data);
+    } else if (action.actionType === 'goto-step') {
+      const targetStep = (data as any).step;
+
+      if (targetStep !== undefined && targetStep <= steps.length && targetStep >= 0) {
+        this.gotoStep((data as any).step);
+      }
+    } else if (action.actionType === 'submit') {
+      this.finalSubmit()
     } else if (onAction) {
       onAction(e, action, data, throwErrors, delegate || this.context);
     }
@@ -601,9 +627,17 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
   }
 
   @autobind
-  handleChange(values: object) {
+  async handleChange(values: object) {
     const {store} = this.props;
 
+    const previous =  store.data;
+    const final = {...previous, ...values};
+
+    if (await this.dispatchEvent('change', final)) {
+      return;
+    }
+
+
     store.updateData(values);
   }
 
@@ -630,9 +664,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
     store.updateData(reseted);
   }
 
-  // 接管里面 form 的提交，不能直接让 form 提交，因为 wizard 自己需要知道进度。
-  @autobind
-  handleSubmit(values: object, action: Action) {
+  async finalSubmit(values: object = {}, action: Action = {type: 'submit'}) {
     const {
       store,
       steps,
@@ -646,10 +678,118 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
       onFinished
     } = this.props;
 
+    if (await this.dispatchEvent('finished', store.data)) {
+      return;
+    }
+
     const step = steps[this.state.currentStep - 1];
     store.updateData(values);
 
+
+    // 最后一步
+    if (target) {
+      this.submitToTarget(target, store.data);
+      this.setState({completeStep: steps.length});
+    } else if (action.api || step.api || api) {
+      let finnalAsyncApi = action.asyncApi || step.asyncApi || asyncApi;
+
+      isEffectiveApi(finnalAsyncApi, store.data) &&
+        store.updateData({
+          [finishedField || 'finished']: false
+        });
+
+      const formStore = this.form
+        ? (this.form.props.store as IFormStore)
+        : store;
+      store.markSaving(true);
+
+      formStore
+        .saveRemote(action.api || step.api || api!, store.data, {
+          onSuccess: () => {
+            this.dispatchEvent('submitSucc', store.data);
+
+            if (
+              !isEffectiveApi(finnalAsyncApi, store.data) ||
+              store.data[finishedField || 'finished']
+            ) {
+              return;
+            }
+
+            return until(
+              () => store.checkRemote(finnalAsyncApi as Api, store.data),
+              (ret: any) => ret && ret[finishedField || 'finished'],
+              cancel => (this.asyncCancel = cancel)
+            );
+          },
+          onFailed: json => this.dispatchEvent('submitFail', json)
+        })
+        .then(async value => {
+          const feedback = action.feedback;
+          if (feedback && isVisible(feedback, value)) {
+            const confirmed = await this.openFeedback(feedback, value);
+
+            // 如果 feedback 配置了，取消就跳过原有逻辑。
+            if (feedback.skipRestOnCancel && !confirmed) {
+              throw new SkipOperation();
+            } else if (feedback.skipRestOnConfirm && confirmed) {
+              throw new SkipOperation();
+            }
+          }
+
+          this.setState({completeStep: steps.length});
+          store.updateData({
+            ...store.data,
+            ...value
+          });
+          store.markSaving(false);
+
+          if (value && typeof value.step === 'number') {
+            this.gotoStep(value.step);
+          } else if (onFinished && onFinished(value, action) === false) {
+            // 如果是 false 后面的操作就不执行
+            return value;
+          }
+
+          const finalRedirect =
+            (action.redirect || step.redirect || redirect) &&
+            filter(action.redirect || step.redirect || redirect, store.data);
+
+          if (finalRedirect) {
+            env.jumpTo(finalRedirect, action);
+          } else if (action.reload || step.reload || reload) {
+            this.reloadTarget(
+              action.reload || step.reload || reload!,
+              store.data
+            );
+          }
+
+          return value;
+        })
+        .catch(error => {
+          this.dispatchEvent('submitFail', error)
+          store.markSaving(false);
+          console.error(error);
+        });
+    } else {
+      onFinished && onFinished(store.data, action);
+      this.setState({completeStep: steps.length});
+    }
+  }
+
+  // 接管里面 form 的提交，不能直接让 form 提交，因为 wizard 自己需要知道进度。
+  @autobind
+  async handleSubmit(values: object, action: Action) {
+    const {
+      store,
+      steps,
+      finishedField
+    } = this.props;
+
+
     if (this.state.currentStep < steps.length) {
+      const step = steps[this.state.currentStep - 1];
+      store.updateData(values);
+
       let finnalAsyncApi = action.asyncApi || step.asyncApi;
 
       isEffectiveApi(finnalAsyncApi, store.data) &&
@@ -661,6 +801,8 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
         store
           .saveRemote(action.api || step.api!, store.data, {
             onSuccess: () => {
+              this.dispatchEvent('stepSubmitSucc', store.data);
+
               if (
                 !isEffectiveApi(finnalAsyncApi, store.data) ||
                 store.data[finishedField || 'finished']
@@ -675,6 +817,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
               );
             },
             onFailed: json => {
+              this.dispatchEvent('stepSubmitFail', json);
               if (json.status === 422 && json.errors && this.form) {
                 this.form.props.store.setFormItemErrors(json.errors);
               }
@@ -700,6 +843,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
             );
           })
           .catch(reason => {
+            this.dispatchEvent('stepSubmitFail', reason);
             if (reason instanceof SkipOperation) {
               return;
             }
@@ -709,90 +853,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
         this.gotoStep(this.state.currentStep + 1);
       }
     } else {
-      // 最后一步
-      if (target) {
-        this.submitToTarget(target, store.data);
-        this.setState({completeStep: steps.length});
-      } else if (action.api || step.api || api) {
-        let finnalAsyncApi = action.asyncApi || step.asyncApi || asyncApi;
-
-        isEffectiveApi(finnalAsyncApi, store.data) &&
-          store.updateData({
-            [finishedField || 'finished']: false
-          });
-
-        const formStore = this.form
-          ? (this.form.props.store as IFormStore)
-          : store;
-        store.markSaving(true);
-
-        formStore
-          .saveRemote(action.api || step.api || api!, store.data, {
-            onSuccess: () => {
-              if (
-                !isEffectiveApi(finnalAsyncApi, store.data) ||
-                store.data[finishedField || 'finished']
-              ) {
-                return;
-              }
-
-              return until(
-                () => store.checkRemote(finnalAsyncApi as Api, store.data),
-                (ret: any) => ret && ret[finishedField || 'finished'],
-                cancel => (this.asyncCancel = cancel)
-              );
-            }
-          })
-          .then(async value => {
-            const feedback = action.feedback;
-            if (feedback && isVisible(feedback, value)) {
-              const confirmed = await this.openFeedback(feedback, value);
-
-              // 如果 feedback 配置了，取消就跳过原有逻辑。
-              if (feedback.skipRestOnCancel && !confirmed) {
-                throw new SkipOperation();
-              } else if (feedback.skipRestOnConfirm && confirmed) {
-                throw new SkipOperation();
-              }
-            }
-
-            this.setState({completeStep: steps.length});
-            store.updateData({
-              ...store.data,
-              ...value
-            });
-            store.markSaving(false);
-
-            if (value && typeof value.step === 'number') {
-              this.gotoStep(value.step);
-            } else if (onFinished && onFinished(value, action) === false) {
-              // 如果是 false 后面的操作就不执行
-              return value;
-            }
-
-            const finalRedirect =
-              (action.redirect || step.redirect || redirect) &&
-              filter(action.redirect || step.redirect || redirect, store.data);
-
-            if (finalRedirect) {
-              env.jumpTo(finalRedirect, action);
-            } else if (action.reload || step.reload || reload) {
-              this.reloadTarget(
-                action.reload || step.reload || reload!,
-                store.data
-              );
-            }
-
-            return value;
-          })
-          .catch(e => {
-            store.markSaving(false);
-            console.error(e);
-          });
-      } else {
-        onFinished && onFinished(store.data, action);
-        this.setState({completeStep: steps.length});
-      }
+      this.finalSubmit(values, action);
     }
 
     return false;

package/src/store/index.ts

@@ -44,6 +44,10 @@ export const RendererStore = types
   .model('RendererStore', {
     storeType: 'RendererStore'
   })
+  .props({
+    visibleState: types.optional(types.frozen(), {}),
+    disableState: types.optional(types.frozen(), {})
+  })
   .views(self => ({
     get fetcher() {
       return getEnv(self).fetcher;
@@ -91,6 +95,22 @@ export const RendererStore = types
     removeStore(store: IStoreNode) {
       // store.dispose();
       removeStore(store);
+    },
+
+    setVisible(id: string, value: boolean) {
+      const state = {
+        ...self.visibleState,
+        [id]: value
+      };
+      self.visibleState = state;
+    },
+
+    setDisable(id: string, value: boolean) {
+      const state = {
+        ...self.disableState,
+        [id]: value
+      };
+      self.disableState = state;
     }
   }));
 

package/src/store/table.ts

@@ -152,7 +152,7 @@ export const Row = types
     },
 
     get expanded(): boolean {
-      return !this.collapsed && self.children.length > 0;
+      return !this.collapsed;
     },
 
     get moved() {
@@ -899,12 +899,12 @@ export const TableStore = iRendererStore
           : {
               item
             };
-        const id = item.id ?? guid();
+        const id = item.__id ?? guid();
 
         return {
           // id: String(item && (item as any)[self.primaryField] || `${pindex}-${depth}-${key}`),
           id: String(id),
-          parentId,
+          parentId: String(parentId),
           key: String(`${pindex}-${depth}-${index}`),
           path: `${path}${index}`,
           depth: depth,
@@ -941,7 +941,7 @@ export const TableStore = iRendererStore
 
       let arr: Array<SRow> = rows.map((item, index) => {
         let id = String(
-          getEntryId ? getEntryId(item, index) : item.id ?? guid()
+          getEntryId ? getEntryId(item, index) : item.__id ?? guid()
         );
         return {
           // id: getEntryId ? getEntryId(item, key) : String(item && (item as any)[self.primaryField] || `${key}-1-${key}`),

package/src/types.ts

@@ -102,7 +102,9 @@ export interface Action extends Button {
     | 'reset-and-submit'
     | 'clear'
     | 'clear-and-submit'
-    | 'toast';
+    | 'toast'
+    | 'goto-step'
+    | 'step-submit';
   api?: Api;
   asyncApi?: Api;
   payload?: any;

package/src/utils/columnsSplit.tsx

@@ -0,0 +1,57 @@
+/**
+ * columnsCount 支持数字和数组两种格式
+ */
+import React from 'react';
+import chunk from 'lodash/chunk';
+
+export function columnsSplit(
+  body: any[],
+  cx: any,
+  columnsCount?: number | number[]
+) {
+  if (Array.isArray(columnsCount) && columnsCount.length) {
+    let bodyIndex = 0;
+    const bodyList: JSX.Element[] = [];
+    const maxSize = Math.max(Math.round(12 / Math.max(...columnsCount)), 1);
+    let cellClassName = `Grid-col--sm${maxSize}`;
+    columnsCount.forEach((columnSize, groupIndex) => {
+      if (columnSize) {
+        bodyList.push(
+          <div className={cx('Grid')} key={groupIndex}>
+            {Array.from({length: columnSize}).map((_, index) => {
+              if (bodyIndex + index < body.length) {
+                // 避免溢出
+                return (
+                  <div key={index} className={cx(cellClassName)}>
+                    {body[bodyIndex + index]}
+                  </div>
+                );
+              } else {
+                return null;
+              }
+            })}
+          </div>
+        );
+        bodyIndex = bodyIndex + columnSize;
+      }
+    });
+
+    body = bodyList;
+  } else if (typeof columnsCount === 'number' && columnsCount > 1) {
+    let weight = 12 / (columnsCount as number);
+    let cellClassName = `Grid-col--sm${
+      weight === Math.round(weight) ? weight : ''
+    }`;
+    body = chunk(body, columnsCount).map((group, groupIndex) => (
+      <div className={cx('Grid')} key={groupIndex}>
+        {Array.from({length: columnsCount as number}).map((_, index) => (
+          <div key={index} className={cx(cellClassName)}>
+            {group[index]}
+          </div>
+        ))}
+      </div>
+    ));
+  }
+
+  return body;
+}

package/src/utils/debug.tsx

@@ -182,6 +182,7 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
     >
       <div
         className="AMISDebug-toggle"
+        title="open debug"
         onClick={() => {
           store.isExpanded = true;
         }}
@@ -284,24 +285,6 @@ const AMISDebug = observer(({store}: {store: AMISDebugStore}) => {
   );
 });
 
-export let enableAMISDebug = false;
-
-// 开启 debug 有两种方法，一个是设置 enableAMISDebug 全局变量，另一个是通过 amisDebug=1 query
-if (
-  (window as any).enableAMISDebug ||
-  location.search.indexOf('amisDebug=1') !== -1
-) {
-  enableAMISDebug = true;
-  // 页面只有一个
-  if (!(window as any).amisDebugElement) {
-    const amisDebugElement = document.createElement('div');
-    document.body.appendChild(amisDebugElement);
-    const element = <AMISDebug store={store} />;
-    render(element, amisDebugElement);
-    (window as any).amisDebugElement = true;
-  }
-}
-
 /**
  * 鼠标移动到某个组件的效果
  */
@@ -365,7 +348,20 @@ autorun(() => {
   }
 });
 
-if (enableAMISDebug) {
+// 页面中只能有一个实例
+let isEnabled = false;
+
+export function enableDebug() {
+  if (isEnabled) {
+    return;
+  }
+  isEnabled = true;
+
+  const amisDebugElement = document.createElement('div');
+  document.body.appendChild(amisDebugElement);
+  const element = <AMISDebug store={store} />;
+  render(element, amisDebugElement);
+
   document.body.appendChild(amisHoverBox);
   document.body.appendChild(amisActiveBox);
   document.addEventListener('mousemove', handleMouseMove);
@@ -378,9 +374,6 @@ interface DebugWrapperProps {
 
 export class DebugWrapper extends Component<DebugWrapperProps> {
   componentDidMount() {
-    if (!enableAMISDebug) {
-      return;
-    }
     const root = findDOMNode(this) as HTMLElement;
     if (!root) {
       return;
@@ -407,7 +400,7 @@ type Category = 'api' | 'event';
  * @param ext 扩展信息
  */
 export function debug(cat: Category, msg: string, ext?: object) {
-  if (!enableAMISDebug) {
+  if (!isEnabled) {
     return;
   }
   const log = {
@@ -426,7 +419,7 @@ export function debug(cat: Category, msg: string, ext?: object) {
  * @param ext 扩展信息
  */
 export function warning(cat: Category, msg: string, ext?: object) {
-  if (!enableAMISDebug) {
+  if (!isEnabled) {
     return;
   }
   store.logs.push({