From d936f47f7afef65f39282ed68993dc70f9333870 Mon Sep 17 00:00:00 2001 From: js87zz Date: Mon, 5 Aug 2019 10:19:02 +0900 Subject: [PATCH 1/3] fix: frozenColumn props setting --- src/index.js | 25 +++++++++++++++++++------ 1 file changed, 19 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index fdae059..8a3718a 100644 --- a/src/index.js +++ b/src/index.js @@ -15,8 +15,8 @@ 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[A-Z][a-zA-Z]+/.test(key)) + .forEach(key => { const eventName = key[2].toLowerCase() + key.slice(3); // For if (prevProps && prevProps[key] !== props[key]) { @@ -35,21 +35,34 @@ export default class Grid extends React.Component { } componentDidMount() { + const { + frozenColumnCount: frozenCount = 0, + columnOptions: columnOptionsProp = {} + } = this.props; + + const columnOptions = { + 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) => { + reactiveProps.forEach(propName => { const currentValue = this.props[propName]; const nextValue = nextProps[propName]; if (currentValue !== nextValue) { From 8944efa01736a9af1b417c3d3a6f2b4fda040fd8 Mon Sep 17 00:00:00 2001 From: js87zz Date: Mon, 5 Aug 2019 10:19:19 +0900 Subject: [PATCH 2/3] chore: apply prettier rules --- .prettierrc | 4 +--- babel.config.js | 2 +- stories/index.stories.js | 34 ++++++++++++++++++---------------- 3 files changed, 20 insertions(+), 20 deletions(-) diff --git a/.prettierrc b/.prettierrc index 75dc327..dbaa464 100644 --- a/.prettierrc +++ b/.prettierrc @@ -1,6 +1,4 @@ { "printWidth" : 100, - "singleQuote" : true, - "bracketSpacing" : false, - "arrowParens": "always" + "singleQuote" : true } \ No newline at end of file diff --git a/babel.config.js b/babel.config.js index f47cfdc..2aefbf8 100644 --- a/babel.config.js +++ b/babel.config.js @@ -1,4 +1,4 @@ -module.exports = (api) => { +module.exports = api => { api.cache(true); return { diff --git a/stories/index.stories.js b/stories/index.stories.js index 4d2838b..370c039 100644 --- a/stories/index.stories.js +++ b/stories/index.stories.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', () => ); +stories.add('Normal', () => ); 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 = () => { @@ -204,15 +204,17 @@ stories.add('dataSource', () => { withCredentials: false, initialRequest: true, api: { - readData: {url: 'api/readData', method: 'GET'} + readData: { url: 'api/readData', method: 'GET' } } }; - return ; + return ( + + ); }); 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); @@ -225,7 +227,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 ( Date: Mon, 5 Aug 2019 13:08:20 +0900 Subject: [PATCH 3/3] chore: apply code review --- src/index.js | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/src/index.js b/src/index.js index 8a3718a..b25abc9 100644 --- a/src/index.js +++ b/src/index.js @@ -41,18 +41,15 @@ export default class Grid extends React.Component { } = this.props; const columnOptions = { - columnOptions: { - ...columnOptionsProp, - frozenCount - } + ...columnOptionsProp, + frozenCount }; this.gridInst = new TuiGrid({ el: this.rootEl.current, ...this.props, - ...columnOptions + columnOptions }); - this.bindEventHandlers(this.props); }