fix(prop-list): setChangeValue when propValue changes

easyops-cn · Aug 5, 2020 · 9eb595f · 9eb595f
1 parent d97abbe
commit 9eb595f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 2 deletions.
diff --git a/src/panel/components/PropList.spec.tsx b/src/panel/components/PropList.spec.tsx
@@ -1,5 +1,5 @@
 import React from "react";
-import { shallow } from "enzyme";
+import { shallow, mount } from "enzyme";
 import { Icon, TextArea } from "@blueprintjs/core";
 import { PropList, PropItem } from "./PropList";
 import { PROP_DEHYDRATED } from "../../shared/constants";
@@ -155,4 +155,16 @@ describe("PropItem", () => {
     wrapper.find(TextArea).invoke("onBlur")({} as any);
     expect(wrapper.find(".bp3-intent-danger").length).toBe(0);
   });
+
+  it("should set changeValue when propValue changes", () => {
+    const wrapper = mount(
+      <PropItem propName="quality" propValue="good" editable />
+    );
+    wrapper.find(".prop-value").invoke("onDoubleClick")({} as any);
+    wrapper.setProps({
+      propValue: "bad",
+    });
+    wrapper.update();
+    expect(wrapper.find(TextArea).prop("value")).toBe('"bad"');
+  });
 });
diff --git a/src/panel/components/PropList.tsx b/src/panel/components/PropList.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import classNames from "classnames";
 import { Icon, TextArea } from "@blueprintjs/core";
 import { PROP_DEHYDRATED } from "../../shared/constants";
@@ -98,6 +98,10 @@ export function PropItem({
 
   const hasChildren = isObject(propValue);
 
+  useEffect(() => {
+    setChangeValue(JSON.stringify(propValue, null, 2));
+  }, [propValue]);
+
   return React.createElement(
     standalone ? "div" : "li",
     {