amis 1.7.0 → 1.8.0-beta.13

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/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({

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
   };
 }

package/src/utils/position.ts

@@ -20,7 +20,6 @@ export default function position(
 ) {
   let parentOffset = {top: 0, left: 0};
   let offset;
-  getComputedStyle;
   // Fixed elements are offset from window (parentOffset = {top:0, left: 0},
   // because it is its only offset parent
   if (getComputedStyle(node).getPropertyValue('position') === 'fixed') {

package/src/utils/scrollPosition.ts

@@ -0,0 +1,29 @@
+import position from './position';
+
+function getScrollParent(element: HTMLElement | null, includeHidden?: boolean) {
+  if (!element) {
+    return document.body;
+  }
+
+  let style = getComputedStyle(element);
+  const excludeStaticParent = style.position === 'absolute';
+  const overflowRegex = includeHidden
+    ? /(auto|scroll|hidden)/
+    : /(auto|scroll)/;
+
+  if (style.position === 'fixed') return document.body;
+  for (let parent = element; (parent = parent.parentElement!); ) {
+    style = getComputedStyle(parent);
+    if (excludeStaticParent && style.position === 'static') {
+      continue;
+    }
+    if (overflowRegex.test(style.overflow + style.overflowY + style.overflowX))
+      return parent;
+  }
+
+  return document.body;
+}
+
+export function scrollPosition(dom: HTMLElement) {
+  return position(dom, getScrollParent(dom));
+}