amis 1.8.0-beta.5 → 1.8.0-beta.9

package/src/renderers/Wizard.tsx

@@ -253,7 +253,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
           }
         })
         .then(value => {
-          this.handleInitEvent(store.data)
+          this.handleInitEvent(store.data);
 
           const state = {
             currentStep:
@@ -340,14 +340,19 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
   async dispatchEvent(action: string, value?: object) {
     const {dispatchEvent, data} = this.props;
 
-    const rendererEvent = await dispatchEvent(action, createObject(data, value ? {value} : {}));
+    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);
+    (await this.dispatchEvent('inited', {formData: data})) &&
+      onInit &&
+      onInit(data);
   }
 
   @autobind
@@ -383,8 +388,13 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
     index = Math.max(Math.min(steps.length, index), 1);
 
     if (index != this.state.currentStep) {
-      if (await this.dispatchEvent('stepChange')) {
-        return
+      if (
+        await this.dispatchEvent('stepChange', {
+          step: index,
+          formData: this.props.store.data
+        })
+      ) {
+        return;
       }
 
       this.setState({
@@ -537,7 +547,11 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
   ) {
     const {onAction, store, env, steps} = this.props;
 
-    if (action.actionType === 'next' || action.type === 'submit' || action.actionType === 'step-submit') {
+    if (
+      action.actionType === 'next' ||
+      action.type === 'submit' ||
+      action.actionType === 'step-submit'
+    ) {
       this.form.doAction(
         {
           ...action,
@@ -593,11 +607,15 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
     } else if (action.actionType === 'goto-step') {
       const targetStep = (data as any).step;
 
-      if (targetStep !== undefined && targetStep <= steps.length && targetStep >= 0) {
+      if (
+        targetStep !== undefined &&
+        targetStep <= steps.length &&
+        targetStep >= 0
+      ) {
         this.gotoStep((data as any).step);
       }
     } else if (action.actionType === 'submit') {
-      this.finalSubmit()
+      this.finalSubmit();
     } else if (onAction) {
       onAction(e, action, data, throwErrors, delegate || this.context);
     }
@@ -630,14 +648,13 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
   async handleChange(values: object) {
     const {store} = this.props;
 
-    const previous =  store.data;
+    const previous = store.data;
     const final = {...previous, ...values};
 
-    if (await this.dispatchEvent('change', final)) {
+    if (await this.dispatchEvent('change', {formData: final})) {
       return;
     }
 
-
     store.updateData(values);
   }
 
@@ -678,14 +695,13 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
       onFinished
     } = this.props;
 
-    if (await this.dispatchEvent('finished', store.data)) {
+    if (await this.dispatchEvent('finished', {formData: store.data})) {
       return;
     }
 
     const step = steps[this.state.currentStep - 1];
     store.updateData(values);
 
-
     // 最后一步
     if (target) {
       this.submitToTarget(target, store.data);
@@ -706,7 +722,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
       formStore
         .saveRemote(action.api || step.api || api!, store.data, {
           onSuccess: () => {
-            this.dispatchEvent('submitSucc', store.data);
+            this.dispatchEvent('submitSucc', {formData: store.data});
 
             if (
               !isEffectiveApi(finnalAsyncApi, store.data) ||
@@ -721,7 +737,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
               cancel => (this.asyncCancel = cancel)
             );
           },
-          onFailed: json => this.dispatchEvent('submitFail', json)
+          onFailed: error => this.dispatchEvent('submitFail', {error})
         })
         .then(async value => {
           const feedback = action.feedback;
@@ -766,7 +782,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
           return value;
         })
         .catch(error => {
-          this.dispatchEvent('submitFail', error)
+          this.dispatchEvent('submitFail', {error});
           store.markSaving(false);
           console.error(error);
         });
@@ -779,12 +795,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
   // 接管里面 form 的提交，不能直接让 form 提交，因为 wizard 自己需要知道进度。
   @autobind
   async handleSubmit(values: object, action: Action) {
-    const {
-      store,
-      steps,
-      finishedField
-    } = this.props;
-
+    const {store, steps, finishedField} = this.props;
 
     if (this.state.currentStep < steps.length) {
       const step = steps[this.state.currentStep - 1];
@@ -801,7 +812,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
         store
           .saveRemote(action.api || step.api!, store.data, {
             onSuccess: () => {
-              this.dispatchEvent('stepSubmitSucc', store.data);
+              this.dispatchEvent('stepSubmitSucc', {formData: store.data});
 
               if (
                 !isEffectiveApi(finnalAsyncApi, store.data) ||
@@ -817,7 +828,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
               );
             },
             onFailed: json => {
-              this.dispatchEvent('stepSubmitFail', json);
+              this.dispatchEvent('stepSubmitFail', {error: json});
               if (json.status === 422 && json.errors && this.form) {
                 this.form.props.store.setFormItemErrors(json.errors);
               }
@@ -843,7 +854,7 @@ export default class Wizard extends React.Component<WizardProps, WizardState> {
             );
           })
           .catch(reason => {
-            this.dispatchEvent('stepSubmitFail', reason);
+            this.dispatchEvent('stepSubmitFail', {error: reason});
             if (reason instanceof SkipOperation) {
               return;
             }

package/src/store/crud.ts

@@ -272,6 +272,16 @@ export const CRUDStore = ServiceStore.named('CRUDStore')
             items = result.items || result.rows;
           }
 
+          // 如果不按照 items 格式返回，就拿第一个数组当成 items
+          if (!Array.isArray(items)) {
+            for (const key of Object.keys(result)) {
+              if (result.hasOwnProperty(key) && Array.isArray(result[key])) {
+                items = result[key];
+                break;
+              }
+            }
+          }
+
           if (!Array.isArray(items)) {
             throw new Error(self.__('CRUD.invalidArray'));
           } else {

package/src/types.ts

@@ -6,6 +6,8 @@ export interface ApiObject extends SchemaApiObject {
     withCredentials?: boolean;
     cancelExecutor?: (cancel: Function) => void;
   };
+  graphql?: string;
+  operationName?: string;
   body?: PlainObject;
   query?: PlainObject;
   adaptor?: (payload: object, response: fetcherResult, api: ApiObject) => any;
@@ -104,6 +106,8 @@ export interface Action extends Button {
     | 'clear-and-submit'
     | 'toast'
     | 'goto-step'
+    | 'expand'
+    | 'collapse'
     | 'step-submit';
   api?: Api;
   asyncApi?: Api;

package/src/utils/ColorScale.ts

@@ -0,0 +1,138 @@
+// 代码修改自 https://github.com/dalisc/color-scales-js
+// 主要是将校验功能改成修正而不是报错，比如 min 和 max 相等的时候自动给 max + 1
+
+class Color {
+  public r: number;
+  public g: number;
+  public b: number;
+  public a: number;
+
+  constructor(r: number, g: number, b: number, a: number = 1) {
+    this.r = r;
+    this.g = g;
+    this.b = b;
+    this.a = a;
+  }
+
+  toRGBString() {
+    return `rgb(${Math.floor(this.r * this.a)},${Math.floor(
+      this.g * this.a
+    )},${Math.floor(this.b * this.a)})`;
+  }
+
+  toRGBAString() {
+    return `rgba(${this.r},${this.g},${this.b},${this.a})`;
+  }
+
+  toHexString() {
+    return rgbaToHex(this);
+  }
+}
+
+function hexToColor(hex: string, alpha: number) {
+  if (isValid3DigitHexColor(hex)) {
+    hex = convertTo6DigitHexColor(hex);
+  }
+
+  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
+  if (result) {
+    return new Color(
+      parseInt(result[1], 16),
+      parseInt(result[2], 16),
+      parseInt(result[3], 16),
+      alpha
+    );
+  } else {
+    throw new Error(`${hex} is not a valid hex color.`);
+  }
+}
+
+function isValidHexColor(colorString: string) {
+  return (
+    isValid3DigitHexColor(colorString) || isValid6DigitHexColor(colorString)
+  );
+}
+
+function isValid3DigitHexColor(colorString: string) {
+  const hexColorRegex = /^#(?:[0-9a-fA-F]{3})$/;
+  return colorString.match(hexColorRegex);
+}
+
+function isValid6DigitHexColor(colorString: string) {
+  const hexColorRegex = /^#(?:[0-9a-fA-F]{6})$/;
+  return colorString.match(hexColorRegex);
+}
+
+function convertTo6DigitHexColor(threeDigitHex: string) {
+  return threeDigitHex
+    .substring(1)
+    .split('')
+    .map(char => {
+      return char + char;
+    })
+    .join('');
+}
+
+function componentToHex(c: number) {
+  const hex = c.toString(16);
+  return hex.length === 1 ? '0' + hex : hex;
+}
+
+function rgbaToHex(color: Color) {
+  const r = Math.floor(color.r * color.a);
+  const g = Math.floor(color.g * color.a);
+  const b = Math.floor(color.b * color.a);
+  return `#${componentToHex(r)}${componentToHex(g)}${componentToHex(b)}`;
+}
+
+export default class ColorScale {
+  private min: number;
+  private max: number;
+  private alpha: number;
+  private colorStops: Color[];
+
+  constructor(
+    min: number,
+    max: number,
+    colorStops: string[],
+    alpha: number = 1
+  ) {
+    this.min = isNaN(min) ? 0 : min;
+    this.max = isNaN(max) ? 0 : max;
+    if (this.min === this.max) {
+      this.max = this.min + 1;
+    }
+    if (this.max < this.min) {
+      [this.max, this.min] = [this.min, this.max];
+    }
+    if (colorStops.length < 2) {
+      colorStops = ['#FFEF9C', '#FF7127'];
+    }
+    this.alpha = alpha;
+    this.colorStops = colorStops.map(colorStop => hexToColor(colorStop, alpha));
+  }
+
+  getColor(value: number) {
+    const numOfColorStops = this.colorStops.length;
+    if (value < this.min) return this.colorStops[0];
+    if (value > this.max) return this.colorStops[numOfColorStops - 1];
+
+    const range = this.max - this.min;
+    let weight = (value - this.min) / range;
+    const colorStopIndex = Math.max(
+      Math.ceil(weight * (numOfColorStops - 1)),
+      1
+    );
+
+    const minColor = this.colorStops[colorStopIndex - 1];
+    const maxColor = this.colorStops[colorStopIndex];
+
+    weight = weight * (numOfColorStops - 1) - (colorStopIndex - 1);
+
+    const r = Math.floor(weight * maxColor.r + (1 - weight) * minColor.r);
+    const g = Math.floor(weight * maxColor.g + (1 - weight) * minColor.g);
+    const b = Math.floor(weight * maxColor.b + (1 - weight) * minColor.b);
+
+    return new Color(r, g, b, this.alpha);
+  }
+}

package/src/utils/api.ts

@@ -125,19 +125,25 @@ export function buildApi(
       undefined,
       api.convertKeyToPath
     );
-  } else if (api.method === 'post' || api.method === 'put') {
+  } else if (
+    api.method === 'post' ||
+    api.method === 'put' ||
+    api.method === 'patch'
+  ) {
     api.body = api.data = cloneObject(data);
   }
 
   // get 类请求，把 data 附带到 url 上。
   if (api.method === 'get' || api.method === 'jsonp') {
-    if (!~raw.indexOf('$') && !api.data && autoAppend) {
+    if (
+      !api.data &&
+      ((!~raw.indexOf('$') && autoAppend) || api.forceAppendDataToQuery)
+    ) {
       api.query = api.data = data;
     } else if (
       api.attachDataToQuery === false &&
       api.data &&
-      !~raw.indexOf('$') &&
-      autoAppend
+      ((!~raw.indexOf('$') && autoAppend) || api.forceAppendDataToQuery)
     ) {
       const idx = api.url.indexOf('?');
       if (~idx) {
@@ -168,6 +174,22 @@ export function buildApi(
     }
   }
 
+  if (api.graphql) {
+    if (api.method === 'get') {
+      api.query = api.data = {...api.query, query: api.graphql};
+    } else if (
+      api.method === 'post' ||
+      api.method === 'put' ||
+      api.method === 'patch'
+    ) {
+      api.body = api.data = {
+        query: api.graphql,
+        operationName: api.operationName,
+        variables: cloneObject(api.data)
+      };
+    }
+  }
+
   return api;
 }
 

package/src/utils/dom.tsx

@@ -82,7 +82,8 @@ export function calculatePosition(
   overlayNode: any,
   target: HTMLElement,
   container: any,
-  padding: any = 0
+  padding: any = 0,
+  customOffset: [number, number] = [0, 0]
 ) {
   const childOffset: any =
     container.tagName === 'BODY'
@@ -215,12 +216,12 @@ export function calculatePosition(
       `calcOverlayPosition(): No such placement of "${placement}" found.`
     );
   }
-
+  const [offSetX = 0, offSetY = 0] = customOffset;
   return {
-    positionLeft: positionLeft / scaleX,
-    positionTop: positionTop / scaleY,
-    arrowOffsetLeft: arrowOffsetLeft / scaleX,
-    arrowOffsetTop: arrowOffsetTop / scaleY,
+    positionLeft: (positionLeft + offSetX) / scaleX,
+    positionTop: (positionTop + offSetY) / scaleY,
+    arrowOffsetLeft: (arrowOffsetLeft + offSetX) / scaleX,
+    arrowOffsetTop: (arrowOffsetTop + offSetY) / scaleY,
     activePlacement
   };
 }