From 6b4f2eb14e1906731276b039f5d9905c3c2f5f1b Mon Sep 17 00:00:00 2001 From: jung-han Date: Tue, 20 Aug 2019 15:24:24 +0900 Subject: [PATCH 1/3] feat: add reactive options --- src/index.js | 14 +++++++++++--- stories/index.stories.js | 2 ++ 2 files changed, 13 insertions(+), 3 deletions(-) diff --git a/src/index.js b/src/index.js index 6edaba3..c827126 100644 --- a/src/index.js +++ b/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 { @@ -50,8 +51,15 @@ export default class Grid extends React.Component { ); 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); diff --git a/stories/index.stories.js b/stories/index.stories.js index 4d2838b..4cd016f 100644 --- a/stories/index.stories.js +++ b/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} From 2b436c5a50df4a6f4ea7948056d64bcc02aade9c Mon Sep 17 00:00:00 2001 From: jung-han Date: Wed, 21 Aug 2019 14:31:05 +0900 Subject: [PATCH 2/3] fix: memory leak --- package-lock.json | 32 ++++++++++++++++---------------- package.json | 2 +- src/index.js | 6 +++++- 3 files changed, 22 insertions(+), 18 deletions(-) diff --git a/package-lock.json b/package-lock.json index bad49a0..4992c31 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@toast-ui/react-grid", - "version": "2.0.1", + "version": "2.0.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -11460,9 +11460,9 @@ "dev": true }, "preact": { - "version": "8.4.2", - "resolved": "https://registry.npmjs.org/preact/-/preact-8.4.2.tgz", - "integrity": "sha512-TsINETWiisfB6RTk0wh3/mvxbGRvx+ljeBccZ4Z6MPFKgu/KFGyf2Bmw3Z/jlXhL5JlNKY6QAbA9PVyzIy9//A==" + "version": "8.5.2", + "resolved": "https://registry.npmjs.org/preact/-/preact-8.5.2.tgz", + "integrity": "sha512-37tlDJGq5IQKqGUbqPZ7qPtsTOWFyxe+ojAOFfzKo0dEPreenqrqgJuS83zGpeGAqD9h9L9Yr7QuxH2W4ZrKxg==" }, "prelude-ls": { "version": "1.1.2", @@ -14004,14 +14004,14 @@ "dev": true }, "tui-code-snippet": { - "version": "1.5.1", - "resolved": "https://registry.npmjs.org/tui-code-snippet/-/tui-code-snippet-1.5.1.tgz", - "integrity": "sha512-a3udDRNFAJBKz7B/004ew4uyokObOrKpR8o0eq/33qap4i0xCah6SQ3eHDatZ+kdezJxSGEjW0FwewfX0d6PrQ==" + "version": "1.5.2", + "resolved": "https://registry.npmjs.org/tui-code-snippet/-/tui-code-snippet-1.5.2.tgz", + "integrity": "sha512-6UqTlQaaC1KLcmC0HAoq5dtl1G4Fib+R+NC7pmaV7kiIlZ7JqKhUmnOoGRcreAyzd81UTK/vCvhrw9QJskpCFQ==" }, "tui-date-picker": { - "version": "3.3.3", - "resolved": "https://registry.npmjs.org/tui-date-picker/-/tui-date-picker-3.3.3.tgz", - "integrity": "sha512-0i4QmAnvkS0LiBA68NAcbsfgoC2NPqaReb9+HzNtOoDCXoSAZvBOYS0koeRFlXMV1jPTBXZeH5LoMWifG39YMw==", + "version": "3.3.4", + "resolved": "https://registry.npmjs.org/tui-date-picker/-/tui-date-picker-3.3.4.tgz", + "integrity": "sha512-tJekUFhVFh6OeHSkKP6zgVjMNacLToDxaNVpVtmEZgmEo7r1xCgqq3RgVOqf7Im+7cHE5BQtJdcX/ZNP3tO9Yg==", "requires": { "jquery": "^1.11.0", "tui-code-snippet": "^1.5.0", @@ -14019,9 +14019,9 @@ } }, "tui-grid": { - "version": "4.0.3", - "resolved": "https://registry.npmjs.org/tui-grid/-/tui-grid-4.0.3.tgz", - "integrity": "sha512-vbl8UvVofjJaEfxiUjHJdy5UTq9sR93TLf2gW0qcNHkHqcfYu+0srADuyPsTTgXLkBdnQ85Wq9ZOGELVAwqoOQ==", + "version": "4.4.1", + "resolved": "https://registry.npmjs.org/tui-grid/-/tui-grid-4.4.1.tgz", + "integrity": "sha512-BAki6uEiDjubcToMXIRRY6qHjtWzCP+dkNh4mYTloRzlG00VV5pY8AvykZ4cFZwabFT0JsbFI+IYP/bvejAFQQ==", "requires": { "preact": "^8.4.2", "tui-date-picker": "^3.3.3", @@ -14037,9 +14037,9 @@ } }, "tui-time-picker": { - "version": "1.5.2", - "resolved": "https://registry.npmjs.org/tui-time-picker/-/tui-time-picker-1.5.2.tgz", - "integrity": "sha512-UXTosahradYt2Cql2c3kUxa3hQ5ogVVUywUDPqAKyion3tjtNRw/BwmGDmZxjVkgE+taw69o0uF0iZZDQmJ6yA==", + "version": "1.6.1", + "resolved": "https://registry.npmjs.org/tui-time-picker/-/tui-time-picker-1.6.1.tgz", + "integrity": "sha512-UynhhFjTh+fLMqCm8vbMVQZocKs9WweEZ9N66gHtPCv3JQQ1gg7ZKr8p6rOV9Z8F1aztmKGaSH+nIhwmQqwHQw==", "requires": { "jquery": "^1.11.0", "tui-code-snippet": "^1.5.0" diff --git a/package.json b/package.json index fc2dfba..875c6fc 100644 --- a/package.json +++ b/package.json @@ -53,6 +53,6 @@ "xhr-mock": "^2.4.1" }, "dependencies": { - "tui-grid": "^4.3.0" + "tui-grid": "^4.4.1" } } diff --git a/src/index.js b/src/index.js index 0c02926..8f78314 100644 --- a/src/index.js +++ b/src/index.js @@ -54,13 +54,17 @@ 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) => { + reactiveProps.forEach(propName => { let currentValue, nextValue; if (propName === 'columnOptions' && this.props.columnOptions) { currentValue = this.props.columnOptions.frozenCount; From 2e3cf5bc396667bf8d694a8b8e2b0beaf72537a1 Mon Sep 17 00:00:00 2001 From: jung-han Date: Thu, 29 Aug 2019 12:46:13 +0900 Subject: [PATCH 3/3] chore: apply review --- src/index.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/src/index.js b/src/index.js index 8f78314..1b55145 100644 --- a/src/index.js +++ b/src/index.js @@ -36,15 +36,15 @@ export default class Grid extends React.Component { } componentDidMount() { - const { - frozenColumnCount: frozenCount = 0, - columnOptions: columnOptionsProp = {} - } = this.props; - - const columnOptions = { - ...columnOptionsProp, - frozenCount - }; + const { frozenColumnCount: frozenCount, columnOptions: columnOptionsProp = {} } = this.props; + + const columnOptions = + typeof frozenCount === 'number' + ? { + ...columnOptionsProp, + frozenCount + } + : { ...columnOptionsProp }; this.gridInst = new TuiGrid({ el: this.rootEl.current,