From 6b4f2eb14e1906731276b039f5d9905c3c2f5f1b Mon Sep 17 00:00:00 2001 From: jung-han Date: Tue, 20 Aug 2019 15:24:24 +0900 Subject: [PATCH 1/4] 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/4] 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/4] 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, From 3363c9f7f866ef30a5288258534306b9d0944103 Mon Sep 17 00:00:00 2001 From: js87zz Date: Thu, 29 Aug 2019 15:28:00 +0900 Subject: [PATCH 4/4] chore: version up v2.0.4 --- package-lock.json | 62 +++++++++++++++++++---------------------------- package.json | 7 +++--- 2 files changed, 28 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4992c31..e4057ba 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@toast-ui/react-grid", - "version": "2.0.3", + "version": "2.0.4", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -7267,8 +7267,7 @@ "ansi-regex": { "version": "2.1.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "aproba": { "version": "1.2.0", @@ -7289,14 +7288,12 @@ "balanced-match": { "version": "1.0.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "brace-expansion": { "version": "1.1.11", "bundled": true, "dev": true, - "optional": true, "requires": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" @@ -7311,20 +7308,17 @@ "code-point-at": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "concat-map": { "version": "0.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "console-control-strings": { "version": "1.1.0", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "core-util-is": { "version": "1.0.2", @@ -7441,8 +7435,7 @@ "inherits": { "version": "2.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "ini": { "version": "1.3.5", @@ -7454,7 +7447,6 @@ "version": "1.0.0", "bundled": true, "dev": true, - "optional": true, "requires": { "number-is-nan": "^1.0.0" } @@ -7469,7 +7461,6 @@ "version": "3.0.4", "bundled": true, "dev": true, - "optional": true, "requires": { "brace-expansion": "^1.1.7" } @@ -7477,14 +7468,12 @@ "minimist": { "version": "0.0.8", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "minipass": { "version": "2.3.5", "bundled": true, "dev": true, - "optional": true, "requires": { "safe-buffer": "^5.1.2", "yallist": "^3.0.0" @@ -7503,7 +7492,6 @@ "version": "0.5.1", "bundled": true, "dev": true, - "optional": true, "requires": { "minimist": "0.0.8" } @@ -7584,8 +7572,7 @@ "number-is-nan": { "version": "1.0.1", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "object-assign": { "version": "4.1.1", @@ -7597,7 +7584,6 @@ "version": "1.4.0", "bundled": true, "dev": true, - "optional": true, "requires": { "wrappy": "1" } @@ -7683,8 +7669,7 @@ "safe-buffer": { "version": "5.1.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "safer-buffer": { "version": "2.1.2", @@ -7720,7 +7705,6 @@ "version": "1.0.2", "bundled": true, "dev": true, - "optional": true, "requires": { "code-point-at": "^1.0.0", "is-fullwidth-code-point": "^1.0.0", @@ -7740,7 +7724,6 @@ "version": "3.0.1", "bundled": true, "dev": true, - "optional": true, "requires": { "ansi-regex": "^2.0.0" } @@ -7784,14 +7767,12 @@ "wrappy": { "version": "1.0.2", "bundled": true, - "dev": true, - "optional": true + "dev": true }, "yallist": { "version": "3.0.3", "bundled": true, - "dev": true, - "optional": true + "dev": true } } }, @@ -9072,7 +9053,8 @@ "jquery": { "version": "1.12.4", "resolved": "https://registry.npmjs.org/jquery/-/jquery-1.12.4.tgz", - "integrity": "sha1-AeHfuikP5z3rp3zurLD5ui/sngw=" + "integrity": "sha1-AeHfuikP5z3rp3zurLD5ui/sngw=", + "dev": true }, "jquery-mockjax": { "version": "2.5.0", @@ -11462,7 +11444,8 @@ "preact": { "version": "8.5.2", "resolved": "https://registry.npmjs.org/preact/-/preact-8.5.2.tgz", - "integrity": "sha512-37tlDJGq5IQKqGUbqPZ7qPtsTOWFyxe+ojAOFfzKo0dEPreenqrqgJuS83zGpeGAqD9h9L9Yr7QuxH2W4ZrKxg==" + "integrity": "sha512-37tlDJGq5IQKqGUbqPZ7qPtsTOWFyxe+ojAOFfzKo0dEPreenqrqgJuS83zGpeGAqD9h9L9Yr7QuxH2W4ZrKxg==", + "dev": true }, "prelude-ls": { "version": "1.1.2", @@ -14006,12 +13989,14 @@ "tui-code-snippet": { "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==" + "integrity": "sha512-6UqTlQaaC1KLcmC0HAoq5dtl1G4Fib+R+NC7pmaV7kiIlZ7JqKhUmnOoGRcreAyzd81UTK/vCvhrw9QJskpCFQ==", + "dev": true }, "tui-date-picker": { "version": "3.3.4", "resolved": "https://registry.npmjs.org/tui-date-picker/-/tui-date-picker-3.3.4.tgz", "integrity": "sha512-tJekUFhVFh6OeHSkKP6zgVjMNacLToDxaNVpVtmEZgmEo7r1xCgqq3RgVOqf7Im+7cHE5BQtJdcX/ZNP3tO9Yg==", + "dev": true, "requires": { "jquery": "^1.11.0", "tui-code-snippet": "^1.5.0", @@ -14019,9 +14004,10 @@ } }, "tui-grid": { - "version": "4.4.1", - "resolved": "https://registry.npmjs.org/tui-grid/-/tui-grid-4.4.1.tgz", - "integrity": "sha512-BAki6uEiDjubcToMXIRRY6qHjtWzCP+dkNh4mYTloRzlG00VV5pY8AvykZ4cFZwabFT0JsbFI+IYP/bvejAFQQ==", + "version": "4.5.0", + "resolved": "https://registry.npmjs.org/tui-grid/-/tui-grid-4.5.0.tgz", + "integrity": "sha512-pZPTrcutMB/8/yaaf2iyY5gDrJ+Jlgw2iuJp20n57LHehky4hweLu/z2EEqAJuz0zzOjCvVr9kPt3QBIXzsBVw==", + "dev": true, "requires": { "preact": "^8.4.2", "tui-date-picker": "^3.3.3", @@ -14032,6 +14018,7 @@ "version": "3.3.2", "resolved": "https://registry.npmjs.org/tui-pagination/-/tui-pagination-3.3.2.tgz", "integrity": "sha512-boQ41QPJ0yaCcn4Gy6srMHijQb9zcg3g7EkPdugD3eaqkoLVH+yrd5Rn2rNpl+3UPfzfYE/1aOB55EFy9QzGcA==", + "dev": true, "requires": { "tui-code-snippet": "^1.5.0" } @@ -14040,6 +14027,7 @@ "version": "1.6.1", "resolved": "https://registry.npmjs.org/tui-time-picker/-/tui-time-picker-1.6.1.tgz", "integrity": "sha512-UynhhFjTh+fLMqCm8vbMVQZocKs9WweEZ9N66gHtPCv3JQQ1gg7ZKr8p6rOV9Z8F1aztmKGaSH+nIhwmQqwHQw==", + "dev": true, "requires": { "jquery": "^1.11.0", "tui-code-snippet": "^1.5.0" diff --git a/package.json b/package.json index 875c6fc..4ead1a1 100644 --- a/package.json +++ b/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.4.1" - } + "dependencies": {} }