Repository: DevExpress/devextreme-react
Pull request #60 (2018-04-17 16:04:49)

Replace symbols with generatedId (Support IE11)


Patch:
diff --git a/src/core/component.ts b/src/core/component.ts
index 74dc5fe..7a440f8 100644
--- a/src/core/component.ts
+++ b/src/core/component.ts
@@ -6,6 +6,8 @@ import * as events from "devextreme/events";
 const DX_TEMPLATE_WRAPPER_CLASS = "dx-template-wrapper";
 const DX_REMOVE_EVENT = "dxremove";
 
+const generateID = () => Math.random().toString(36).substr(2);
+
 interface ITemplateMeta {
   tmplOption: string;
   render: string;
@@ -51,7 +53,7 @@ export default class Component<P> extends React.PureComponent<P, any> {
       if (!!this.props.children) {
         args.push(this.props.children);
       }
-      const templates = Object.getOwnPropertySymbols(this.state.templates);
+      const templates = Object.getOwnPropertyNames(this.state.templates);
       if (templates.length) {
         args.push(templates.map((m: any) => this.state.templates[m]()));
       }
@@ -199,11 +201,11 @@ export default class Component<P> extends React.PureComponent<P, any> {
         element.className = DX_TEMPLATE_WRAPPER_CLASS;
         data.container.appendChild(element);
 
-        const elementSymbol = Symbol();
+        const templateId = "__template_" + generateID();
         events.one(element, DX_REMOVE_EVENT, () => {
           this.setState((state: any) => {
             const updatedTemplates = {...state.templates};
-            delete updatedTemplates[elementSymbol];
+            delete updatedTemplates[templateId];
             return {
               templates : updatedTemplates
             };
@@ -214,7 +216,7 @@ export default class Component<P> extends React.PureComponent<P, any> {
 
         this.setState((state: any) => {
           const updatedTemplates = {...state.templates};
-          updatedTemplates[elementSymbol] = portal;
+          updatedTemplates[templateId] = portal;
           return {
             templates : updatedTemplates
           };


Test patch:
diff --git a/src/core/component.test.tsx b/src/core/component.test.tsx
index ee57b18..e111c6f 100644
--- a/src/core/component.test.tsx
+++ b/src/core/component.test.tsx
@@ -129,7 +129,7 @@ describe("templates", () => {
                 <ComponentWithTemplates itemRender={itemRender} />
             );
             renderItemTemplate({ text: "is rendered" });
-            expect(Object.getOwnPropertySymbols(component.state("templates")).length).toBe(1);
+            expect(Object.getOwnPropertyNames(component.state("templates")).length).toBe(1);
             component.update();
             expect(component.find(".template").html()).toBe('<div class="template">Template is rendered</div>');
         });
@@ -172,7 +172,7 @@ describe("templates", () => {
                 <ComponentWithTemplates itemComponent={ItemTemplate} />
             );
             renderItemTemplate({ text: "is rendered" });
-            expect(Object.getOwnPropertySymbols(component.state("templates")).length).toBe(1);
+            expect(Object.getOwnPropertyNames(component.state("templates")).length).toBe(1);
             component.update();
             expect(component.find(".template").html()).toBe('<div class="template">Template is rendered</div>');
         });
@@ -205,11 +205,11 @@ describe("templates", () => {
             <ComponentWithTemplates itemComponent={ItemTemplate} />
         );
         renderItemTemplate({});
-        expect(Object.getOwnPropertySymbols(component.state("templates")).length).toBe(1);
+        expect(Object.getOwnPropertyNames(component.state("templates")).length).toBe(1);
         component.update();
         events.triggerHandler(component.find(".template").getDOMNode().parentNode, "dxremove");
         component.update();
-        expect(Object.getOwnPropertySymbols(component.state("templates")).length).toBe(0);
+        expect(Object.getOwnPropertyNames(component.state("templates")).length).toBe(0);
     });
 
     // tslint:disable-next-line:max-classes-per-file