Merge branch 'master' into feat/reactive-columnOptions

Author: 한정

.prettierrc

@@ -1,6 +1,4 @@
 {
   "printWidth" : 100,
-  "singleQuote" : true,
-  "bracketSpacing" : false,
-  "arrowParens": "always"
+  "singleQuote" : true
 }

babel.config.js

@@ -1,4 +1,4 @@
-module.exports = (api) => {
+module.exports = api => {
   api.cache(true);
 
   return {

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@toast-ui/react-grid",
-  "version": "2.0.0",
+  "version": "2.0.3",
   "description": "TOAST UI Grid for React",
   "main": "dist/toastui-react-grid.js",
   "files": [
@@ -53,6 +53,6 @@
     "xhr-mock": "^2.4.1"
   },
   "dependencies": {
-    "tui-grid": "^4.0.0"
+    "tui-grid": "^4.3.0"
   }
 }

package.json

@@ -16,11 +16,11 @@ export default class Grid extends React.Component {
 
   bindEventHandlers(props, prevProps) {
     Object.keys(props)
-      .filter((key) => /on[A-Z][a-zA-Z]+/.test(key))
-      .forEach((key) => {
+      .filter(key => /on(?!Grid)[A-Z][a-zA-Z]+/.test(key))
+      .forEach(key => {
         const eventName = key[2].toLowerCase() + key.slice(3);
         // For <Grid onFocus={condition ? onFocus1 : onFocus2} />
-        if (prevProps && prevProps[key] === props[key]) {
+        if (prevProps && prevProps[key] !== props[key]) {
           this.gridInst.off(eventName);
         }
         this.gridInst.on(eventName, props[key]);
@@ -36,18 +36,28 @@ export default class Grid extends React.Component {
   }
 
   componentDidMount() {
+    const {
+      frozenColumnCount: frozenCount = 0,
+      columnOptions: columnOptionsProp = {}
+    } = this.props;
+
+    const columnOptions = {
+      ...columnOptionsProp,
+      frozenCount
+    };
+
     this.gridInst = new TuiGrid({
       el: this.rootEl.current,
-      ...this.props
+      ...this.props,
+      columnOptions
     });
-
     this.bindEventHandlers(this.props);
   }
 
   shouldComponentUpdate(nextProps) {
-    const {oneTimeBindingProps = []} = this.props;
+    const { oneTimeBindingProps = [] } = this.props;
     const reactiveProps = Object.keys(reactivePropSetterMap).filter(
-      (propName) => oneTimeBindingProps.indexOf(propName) === -1
+      propName => oneTimeBindingProps.indexOf(propName) === -1
     );
 
     reactiveProps.forEach((propName) => {

src/index.js

@@ -1,25 +1,25 @@
-import React, {useCallback} from 'react';
+import React, { useCallback } from 'react';
 import XHRMock from 'xhr-mock';
-import {storiesOf} from '@storybook/react';
+import { storiesOf } from '@storybook/react';
 import Grid from '../src/index';
 import TuiGrid from 'tui-grid';
-import {actions} from '@storybook/addon-actions';
-import {withKnobs, number, radios, button, object, array} from '@storybook/addon-knobs';
-import {data} from './dummy-data';
+import { actions } from '@storybook/addon-actions';
+import { withKnobs, number, radios, button, object, array } from '@storybook/addon-knobs';
+import { data } from './dummy-data';
 import 'tui-grid/dist/tui-grid.css';
 import 'tui-pagination/dist/tui-pagination.css';
 
 const columns = [
-  {header: 'Name', name: 'name'},
-  {header: 'Artist', name: 'artist'},
-  {header: 'Type', name: 'type', editor: 'text'},
-  {header: 'Release', name: 'release', editor: 'text'},
-  {header: 'Genre', name: 'genre', editor: 'text'}
+  { header: 'Name', name: 'name' },
+  { header: 'Artist', name: 'artist' },
+  { header: 'Type', name: 'type', editor: 'text' },
+  { header: 'Release', name: 'release', editor: 'text' },
+  { header: 'Genre', name: 'genre', editor: 'text' }
 ];
 
 const stories = storiesOf('Toast UI Grid', module).addDecorator(withKnobs);
 
-stories.add('Normal', () => <Grid columns={columns} data={data} header={{height: 60}} />);
+stories.add('Normal', () => <Grid columns={columns} data={data} header={{ height: 60 }} />);
 
 stories.add('Set Language', () => {
   const options = {
@@ -85,7 +85,7 @@ stories.add('Using Method', () => {
     }
 
     handleClickAppend = () => {
-      this.grid.appendRow({}, {at: 0});
+      this.grid.appendRow({}, { at: 0 });
     };
 
     handleClickSort = () => {
@@ -206,15 +206,17 @@ stories.add('dataSource', () => {
     withCredentials: false,
     initialRequest: true,
     api: {
-      readData: {url: 'api/readData', method: 'GET'}
+      readData: { url: 'api/readData', method: 'GET' }
     }
   };
 
-  return <Grid columns={columns} pagination={true} data={dataSource} pageOptions={{perPage: 3}} />;
+  return (
+    <Grid columns={columns} pagination={true} data={dataSource} pageOptions={{ perPage: 3 }} />
+  );
 });
 
 stories.add('hook', () => {
-  const condition = radios('condition', {true: 'true', false: 'false'}, 'true');
+  const condition = radios('condition', { true: 'true', false: 'false' }, 'true');
   const ReactComponent = () => {
     const onClick = useCallback(() => {
       console.log('condition:', condition);
@@ -227,7 +229,7 @@ stories.add('hook', () => {
 });
 
 stories.add('change event based on condition', () => {
-  const condition = radios('condition', {true: 'true', false: 'false'}, 'true');
+  const condition = radios('condition', { true: 'true', false: 'false' }, 'true');
 
   return (
     <Grid