Merge branch 'master' into production

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toast-ui/react-grid",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "TOAST UI Grid for React",
   "main": "dist/toastui-react-grid.js",
   "files": [
@@ -47,12 +47,11 @@
     "react-dom": "^16.7.0",
     "storybook": "^1.0.0",
     "style-loader": "^0.23.1",
+    "tui-grid": "^4.5.0",
     "webpack": "^4.29.0",
     "webpack-cli": "^3.2.1",
     "webpack-dev-server": "^3.1.14",
     "xhr-mock": "^2.4.1"
   },
-  "dependencies": {
-    "tui-grid": "^4.3.0"
-  }
+  "dependencies": {}
 }

src/index.js

@@ -5,7 +5,8 @@ const reactivePropSetterMap = {
   data: 'resetData',
   columns: 'setColumns',
   bodyHeight: 'setBodyHeight',
-  frozenColumnCount: 'setFrozenColumnCount'
+  frozenColumnCount: 'setFrozenColumnCount',
+  columnOptions: 'setFrozenColumnCount'
 };
 
 export default class Grid extends React.Component {
@@ -35,15 +36,15 @@ export default class Grid extends React.Component {
   }
 
   componentDidMount() {
-    const {
-      frozenColumnCount: frozenCount = 0,
-      columnOptions: columnOptionsProp = {}
-    } = this.props;
+    const { frozenColumnCount: frozenCount, columnOptions: columnOptionsProp = {} } = this.props;
 
-    const columnOptions = {
-      ...columnOptionsProp,
-      frozenCount
-    };
+    const columnOptions =
+      typeof frozenCount === 'number'
+        ? {
+            ...columnOptionsProp,
+            frozenCount
+          }
+        : { ...columnOptionsProp };
 
     this.gridInst = new TuiGrid({
       el: this.rootEl.current,
@@ -53,15 +54,26 @@ export default class Grid extends React.Component {
     this.bindEventHandlers(this.props);
   }
 
+  componentWillUnmount() {
+    this.gridInst.destroy();
+  }
+
   shouldComponentUpdate(nextProps) {
     const { oneTimeBindingProps = [] } = this.props;
     const reactiveProps = Object.keys(reactivePropSetterMap).filter(
       propName => oneTimeBindingProps.indexOf(propName) === -1
     );
 
     reactiveProps.forEach(propName => {
-      const currentValue = this.props[propName];
-      const nextValue = nextProps[propName];
+      let currentValue, nextValue;
+      if (propName === 'columnOptions' && this.props.columnOptions) {
+        currentValue = this.props.columnOptions.frozenCount;
+        nextValue = nextProps.columnOptions.frozenCount;
+      } else {
+        currentValue = this.props[propName];
+        nextValue = nextProps[propName];
+      }
+
       if (currentValue !== nextValue) {
         const setterName = reactivePropSetterMap[propName];
         this.gridInst[setterName](nextValue);

stories/index.stories.js

@@ -120,6 +120,7 @@ stories.add('Events', () => {
 stories.add('Reactive Props', () => {
   const dataValue = object('data', data.slice(0, 5));
   const columnsValue = object('columns', columns);
+  const columnOptions = object('columnOptions', {frozenCount: 2});
   const bodyHeightValue = number('bodyHeight', 300, {
     range: true,
     min: 100,
@@ -137,6 +138,7 @@ stories.add('Reactive Props', () => {
       columns={columnsValue}
       data={dataValue}
       frozenColumnCount={frozenColumnCountValue}
+      columnOptions={columnOptions}
       pagination={false}
       bodyHeight={bodyHeightValue}
       oneTimeBindingProps={oneTimeBindingProps}