Merge remote-tracking branch 'upstream/master' into feat-input-kv-value-schema

docs/zh-CN/extend/contribute.md

@@ -42,11 +42,11 @@ amis 主要代码在 `src` 和 `scss` 目录下，这里主要介绍 `src` 下
 
 虽然文件很多，但对于组件开发而言，大部分情况下只需要关注 `components` 及 `renderers` 目录下的内容就行，如果发现某个组件不满足需求，可以先在 `renderers` 中找到这个组件，对齐进行修改就行。
 
-下面我们将以一个实际例子来介绍如果新增一个组件。
+下面我们将以一个实际例子来介绍如何新增一个组件。
 
 ## 实战：avatar 组件
 
-本文的目标是新增 avatar 头像组件，完整演示如何在 amis 中添加一个新组建，完整实现可以参考这个 [pr](https://github.com/baidu/amis/pull/1684/files)，本文基于这个例子进行了简化。
+本文的目标是新增 avatar 头像组件，完整演示如何在 amis 中添加一个新组件，完整实现可以参考这个 [pr](https://github.com/baidu/amis/pull/1684/files)，本文基于这个例子进行了简化。
 
 ### 编写 React 组件代码代码
 

packages/amis-core/src/RootRenderer.tsx

@@ -65,6 +65,7 @@ export class RootRenderer extends React.Component<RootRendererProps> {
   }
 
   componentDidCatch(error: any, errorInfo: any) {
+    this.props.env?.errorCatcher?.(error, errorInfo);
     this.store.setRuntimeError(error, errorInfo);
   }
 

packages/amis-core/src/Scoped.tsx

@@ -54,7 +54,9 @@ export interface IScopedContext {
   closeById: (target: string) => void;
 }
 type AliasIScopedContext = IScopedContext;
-export const ScopedContext = React.createContext(createScopedTools(''));
+
+const rootScopedContext = createScopedTools('');
+export const ScopedContext = React.createContext(rootScopedContext);
 
 function createScopedTools(
   path?: string,
@@ -115,7 +117,7 @@ function createScopedTools(
     getComponentById(id: string) {
       let root: AliasIScopedContext = this;
       // 找到顶端scoped
-      while (root.parent) {
+      while (root.parent && root.parent !== rootScopedContext) {
         root = root.parent;
       }
 
@@ -130,6 +132,7 @@ function createScopedTools(
           return false;
         })
       ) as ScopedComponentType | undefined;
+
       return component;
     },
 

packages/amis-core/src/env.tsx

@@ -57,6 +57,10 @@ export interface RendererEnv {
   watchRouteChange?: (fn: () => void) => () => void;
   // 用于跟踪用户在界面中的各种操作
   tracker: (eventTrack: EventTrack, props?: PlainObject) => void;
+  /**
+   * 捕获amis执行中的错误信息
+   */
+  errorCatcher: (error: any, errorInfo: any) => void;
   rendererResolver?: (
     path: string,
     schema: Schema,

packages/amis-ui/scss/components/_modal.scss

@@ -112,7 +112,7 @@
     line-height: inherit;
     text-decoration: none;
     vertical-align: middle;
-    z-index: calc($zindex-spinner-overlay + 1);
+    z-index: calc(#{$zindex-spinner-overlay} + 1);
 
     svg {
       width: var(--dialog-icon-size);

packages/amis-ui/scss/components/_spinner.scss

@@ -148,7 +148,7 @@
 
 .#{$ns}Spinner-overlay {
   position: absolute;
-  z-index: calc($zindex-spinner-overlay - 1);
+  z-index: calc(#{$zindex-spinner-overlay} - 1);
   top: 0;
   left: 0;
   right: 0;

packages/amis-ui/scss/components/form/_number.scss

@@ -48,12 +48,6 @@
       var(--inputNumber-base-hover-bottom-right-border-radius)
       var(--inputNumber-base-hover-bottom-left-border-radius);
     background: var(--inputNumber-base-hover-bg-color);
-    .#{$ns}Number-input {
-      padding-right: calc(
-        var(--Number-handler-width) +
-          var(--inputNumber-base-default-paddingRight)
-      );
-    }
   }
 
   &-focused {
@@ -202,6 +196,10 @@
       border-left: px2rem(1px) solid var(--Form-input-borderColor);
       width: var(--Number-handler-width);
       height: 100%;
+      // 为了实现handle出现后，不遮挡内容，自然的留出padding的位置的效果
+      outline: var(--inputNumber-base-default-paddingRight)
+        var(--inputNumber-base-default-bg-color)
+        solid;
     }
 
     &-handler {

packages/amis/__tests__/renderers/Picker.test.tsx

@@ -143,6 +143,7 @@ test('Renderer:Picker with pickerSchema & valueField & labelField & multiple & v
   expect(fetcher).toHaveBeenCalled;
   expect(fetcher.mock.calls[0][0].query).toEqual({
     op: 'loadOptions',
+    id: 'a,b',
     value: 'a,b'
   });
 

packages/amis/src/renderers/Form/InputImage.tsx

@@ -14,7 +14,11 @@ import {FileRejection, ErrorCode, DropEvent} from 'react-dropzone';
 import 'blueimp-canvastoblob';
 import find from 'lodash/find';
 import {Payload, ActionObject} from 'amis-core';
-import {buildApi} from 'amis-core';
+import {buildApi,
+  isEffectiveApi,
+  normalizeApi,
+  isApiOutdated,
+  isApiOutdatedWithData} from 'amis-core';
 import {createObject, qsstringify, guid, isEmpty, qsparse} from 'amis-core';
 import {Icon, TooltipWrapper, Button} from 'amis-ui';
 import accepts from 'attr-accept';
@@ -1913,6 +1917,20 @@ export default class ImageControl extends React.Component<
 
 @FormItem({
   type: 'input-image',
-  sizeMutable: false
+  sizeMutable: false,
+  shouldComponentUpdate: (props: any, prevProps: any) =>
+    !!isEffectiveApi(props.receiver, props.data) &&
+    (isApiOutdated(
+      props.receiver,
+      prevProps.receiver,
+      props.data,
+      prevProps.data
+    ) ||
+    isApiOutdatedWithData(
+      props.receiver,
+      prevProps.receiver,
+      props.data,
+      prevProps.data
+    ))
 })
 export class ImageControlRenderer extends ImageControl {}

packages/amis/src/renderers/Form/Picker.tsx

@@ -159,6 +159,7 @@ export default class PickerControl extends React.PureComponent<
 
     const ctx = createObject(data, {
       value: value,
+      [valueField || 'value']: value,
       op: 'loadOptions'
     });