Merge pull request #9 from nhn/feat/reactive-columnOptions

feat: add reactive options

Author: 한정

package-lock.json

@@ -53,6 +53,6 @@
     "xhr-mock": "^2.4.1"
   },
   "dependencies": {
-    "tui-grid": "^4.3.0"
+    "tui-grid": "^4.4.1"
   }
 }

package.json

@@ -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);

src/index.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}