Merge pull request #5 from komarovalexander/dev

RowDataChanged Event
komarovalexander · Dec 27, 2019 · 938afbb · 938afbb
2 parents cc05289 + 7c6895c
commit 938afbb
Show file tree

Hide file tree

Showing 8 changed files with 81 additions and 13 deletions.
diff --git a/package.json b/package.json
@@ -1,11 +1,14 @@
 {
   "name": "ka-table",
-  "version": "1.1.1",
+  "version": "1.2.1",
   "license": "MIT",
   "repository": "github:komarovalexander/ka-table",
   "homepage": "https://komarovalexander.github.io/ka-table/#/command-column",
   "dependencies": {
+    "@types/enzyme": "^3.10.4",
+    "@types/enzyme-adapter-react-16": "^1.0.5",
     "@types/react": "16.9.16",
+    "@types/sinon": "^7.5.1",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
   },
@@ -43,6 +46,8 @@
     "@types/react-highlight": "^0.12.2",
     "@types/react-router-dom": "^5.1.3",
     "coveralls": "^3.0.2",
+    "enzyme": "^3.11.0",
+    "enzyme-adapter-react-16": "^1.15.2",
     "gulp": "^4.0.2",
     "gulp-file": "^0.4.0",
     "gulp-gh-pages": "^0.5.4",
@@ -56,6 +61,7 @@
     "react-highlight": "^0.12.0",
     "react-router-dom": "^5.1.2",
     "react-scripts": "^3.3.0",
+    "sinon": "^8.0.1",
     "tslint": "^5.20.0",
     "tslint-react": "^4.1.0",
     "typescript": "3.6.3"

diff --git a/src/Demos/Demos.scss b/src/Demos/Demos.scss
@@ -94,12 +94,12 @@ body {
         border-radius: 12px;
         box-shadow: 5px 15px 30px rgba(0, 0, 0, 0.1);
       }
-      .ka-tbody{
-        max-height: 600px;
-      }
     }
     .code{
       padding: 60px 80px;
     }
   }
+}
+.ka-tbody{
+  max-height: 600px;
 }
diff --git a/src/Demos/EventsDemo/EventsDemo.scss b/src/Demos/EventsDemo/EventsDemo.scss
@@ -0,0 +1,21 @@
+.events-demo{
+  .ka-tbody{
+    max-height: 300px;
+  }
+
+  .events{
+    margin: 20px 0 0 0;
+    max-height: 200px;
+    overflow: auto;
+
+    > div{
+      padding: 5px;
+      background-color: #d1d5d7;
+      border: 1px solid #f1f5f7;
+
+      .type{
+        color: #00f;
+      }
+    }
+  }
+}
diff --git a/src/Demos/EventsDemo/EventsDemo.tsx b/src/Demos/EventsDemo/EventsDemo.tsx
@@ -1,3 +1,5 @@
+import './EventsDemo.scss';
+
 import React, { useState } from 'react';
 
 import { ITableOption, Table } from '../../lib';
@@ -37,21 +39,27 @@ const EventsDemo: React.FC = () => {
     changeData(newValue);
   };
 
-  const [events, changeEvents] = useState([] as string []);
+  const [events, changeEvents] = useState([] as any []);
   const onEvent: EventFunc = (event, eventData) => {
-    changeEvents([`onEvent: ${event}, data:${JSON.stringify(eventData)}`, ...events]);
+    changeEvents((prevValue) => ([{ type: event, data: `${JSON.stringify(eventData)}` }, ...prevValue]));
   };
   return (
-    <>
+    <div className='events-demo'>
       <Table
         {...option}
         data={data}
         onOptionChange={onOptionChange}
         onDataChange={onDataChange}
         onEvent={onEvent}
       />
-      {events.map((e, i) => (<div key={i}>{e}</div>))}
-    </>
+      <div className='events'>{events.map((e, i) =>
+        (
+          <div key={i}>
+            <span className='type'>{e.type}</span> <span className='data'>{e.data}</span>
+          </div>
+        ))}
+      </div>
+    </div>
   );
 };
 

diff --git a/src/lib/Components/CellComponent/CellComponent.test.tsx b/src/lib/Components/CellComponent/CellComponent.test.tsx
@@ -1,9 +1,14 @@
+import Enzyme, { mount } from 'enzyme';
+import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import ReactDOM from 'react-dom';
+import sinon from 'sinon';
 
-import { DataType } from '../../enums';
-import CellComponent, { ICellComponentProps } from './CellComponent';
+import { DataType, Events } from '../../enums';
+import CellEditor from '../CellEditor/CellEditor';
+import CellComponent from './CellComponent';
 
+Enzyme.configure({ adapter: new Adapter() });
 const props: any = {
   column: {
     dataType: DataType.String,
@@ -24,3 +29,17 @@ it('renders without crashing', () => {
   ReactDOM.render(<CellComponent {...props} />, element);
   ReactDOM.unmountComponentAtNode(element);
 });
+
+it('call RowDataChanged when onValueChange', () => {
+  const dispatch = sinon.spy();
+  const newValue = {a: 1};
+  const wrapper = mount(
+    <CellComponent {...props} isEditableCell='true' dispatch={dispatch} />,
+    {
+      attachTo: document.createElement('tr'),
+    },
+  );
+  wrapper.find(CellEditor).last().prop('onValueChange')(newValue);
+  expect(dispatch.calledOnce).toBeTruthy();
+  expect(dispatch.args).toMatchSnapshot();
+});
diff --git a/src/lib/Components/CellComponent/CellComponent.tsx b/src/lib/Components/CellComponent/CellComponent.tsx
@@ -31,7 +31,7 @@ const CellComponent: React.FunctionComponent<ICellComponentProps> = (props) => {
           <CellEditor
             {...props}
             field={getField(column)}
-            onValueChange={dispatch.bind(null, Events.RowDataChanged)}
+            onValueChange={(newValue) => { dispatch(Events.RowDataChanged, { newValue }); }}
           />
         )
         : (

diff --git a/src/lib/Components/CellComponent/__snapshots__/CellComponent.test.tsx.snap b/src/lib/Components/CellComponent/__snapshots__/CellComponent.test.tsx.snap
@@ -0,0 +1,14 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`call RowDataChanged when onValueChange 1`] = `
+Array [
+  Array [
+    "RowDataChanged",
+    Object {
+      "newValue": Object {
+        "a": 1,
+      },
+    },
+  ],
+]
+`;
diff --git a/src/lib/Utils/EventUtils.ts b/src/lib/Utils/EventUtils.ts
@@ -31,7 +31,7 @@ export const getOnEventHandler = ({
           onOptionChange);
         break;
       case Events.RowDataChanged:
-          const newData = getCopyOfArrayAndInsertOrReplaceItem(eventData, rowKeyField, data);
+          const newData = getCopyOfArrayAndInsertOrReplaceItem(eventData.newValue, rowKeyField, data);
           onDataChange(newData);
           break;
       case Events.RowSelected: