fix(custom): 完善custom自定义组件，增加属性变动更新逻辑 (#4288)

* fix(custom): 完善custom自定义组件，增加属性变动更新逻辑

* fix(custom): update

* fix(custom): 更新测试用例

__tests__/renderers/Custom.test.tsx

@@ -10,12 +10,13 @@ test('Renderer:custom', () => {
       {
         type: 'custom',
         name: 'myName',
+        className: 'amis-custom-demo',
+        html: '<div><h2>hello, world!</h2></div>',
         label: '自定义组件',
         onMount: (dom: HTMLElement, value: any, onChange: any, props: any) => {
           const button = document.createElement('button');
           button.innerText = '点击修改';
           button.onclick = event => {
-            onChange('new'); // 这个 onChange 方法只有放在表单项中才能调用
             event.preventDefault();
           };
           dom.appendChild(button);

__tests__/renderers/__snapshots__/Custom.test.tsx.snap

@@ -3,27 +3,14 @@
 exports[`Renderer:custom 1`] = `
 <div>
   <div
-    class="cxd-Form-item cxd-Form-item--normal"
-    data-role="form-item"
+    class="amis-custom-demo"
   >
-    <label
-      class="cxd-Form-label"
-    >
-      <span>
-        <span
-          class="cxd-TplField"
-        >
-          <span>
-            自定义组件
-          </span>
-        </span>
-      </span>
-    </label>
-    <div
-      class="cxd-Form-control"
-    >
-      <button />
+    <div>
+      <h2>
+        hello, world!
+      </h2>
     </div>
+    <button />
   </div>
 </div>
 `;

src/renderers/Custom.tsx

@@ -3,10 +3,9 @@ import ReactDOM from 'react-dom';
 import memoize from 'lodash/memoize';
 import isString from 'lodash/isString';
 import {Renderer, RendererProps} from '../factory';
-
-import {anyChanged} from '../utils/helper';
 import {BaseSchema} from '../Schema';
-import FormItem, {FormControlProps} from './Form/Item';
+import {FormControlProps} from './Form/Item';
+import isEqual from 'lodash/isEqual';
 
 /**
  * 自定义组件
@@ -57,6 +56,15 @@ export class Custom extends React.Component<CustomProps, object> {
   constructor(props: CustomProps) {
     super(props);
     this.dom = React.createRef();
+    this.initOnMount(props);
+    this.initOnUpdate(props);
+    this.initOnUnmount(props);
+    this.renderChild = this.renderChild.bind(this);
+    this.recordChildElem = this.recordChildElem.bind(this);
+    this.unmountChildElem = this.unmountChildElem.bind(this);
+  }
+
+  initOnMount(props: CustomProps) {
     if (props.onMount) {
       if (typeof props.onMount === 'string') {
         this.onMount = getFunction(
@@ -70,6 +78,9 @@ export class Custom extends React.Component<CustomProps, object> {
         this.onMount = props.onMount;
       }
     }
+  }
+
+  initOnUpdate(props: CustomProps) {
     if (props.onUpdate) {
       if (typeof props.onUpdate === 'string') {
         this.onUpdate = getFunction(
@@ -83,6 +94,9 @@ export class Custom extends React.Component<CustomProps, object> {
         this.onUpdate = props.onUpdate;
       }
     }
+  }
+
+  initOnUnmount(props: CustomProps) {
     if (props.onUnmount) {
       if (typeof props.onUnmount === 'string') {
         this.onUnmount = getFunction('props', props.onUnmount);
@@ -90,15 +104,20 @@ export class Custom extends React.Component<CustomProps, object> {
         this.onUnmount = props.onUnmount;
       }
     }
-    this.renderChild = this.renderChild.bind(this);
-    this.recordChildElem = this.recordChildElem.bind(this);
-    this.unmountChildElem = this.unmountChildElem.bind(this);
   }
 
   componentDidUpdate(prevProps: CustomProps) {
-    if (anyChanged(['data'], this.props, prevProps)) {
-      const {data} = this.props;
-      this.onUpdate(this.dom, data, prevProps.data, this.props);
+    if (!isEqual(this.props.onUpdate, prevProps.onUpdate)) {
+      this.initOnUpdate(this.props);
+    }
+    if (!isEqual(this.props.onUpdate, prevProps.onUpdate) || !isEqual(this.props.data, prevProps.data)) {
+      this.onUpdate(this.dom, this.props.data, prevProps.data, this.props);
+    }
+    if (!isEqual(this.props.onMount, prevProps.onMount)) {
+      this.initOnMount(this.props);
+    }
+    if (!isEqual(this.props.onUnmount, prevProps.onUnmount)) {
+      this.initOnUnmount(this.props);
     }
   }
 
@@ -180,7 +199,7 @@ export class Custom extends React.Component<CustomProps, object> {
   }
 }
 
-@FormItem({
+@Renderer({
   type: 'custom'
 })
 export class CustomRenderer extends Custom {}