From 830b9905812c45bdeb8c8d7f8c6e09acf063e592 Mon Sep 17 00:00:00 2001 From: Claus Reinke Date: Fri, 2 Jul 2021 15:08:41 +0200 Subject: [PATCH 1/4] use cross-env to support build on windows --- package-lock.json | 11 ++++++++++- package.json | 19 ++++++++++--------- 2 files changed, 20 insertions(+), 10 deletions(-) diff --git a/package-lock.json b/package-lock.json index 9589552f..25f6a561 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "react-json-view", - "version": "1.21.1", + "version": "1.21.3", "lockfileVersion": 1, "requires": true, "dependencies": { @@ -5263,6 +5263,15 @@ "sha.js": "^2.4.8" } }, + "cross-env": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz", + "integrity": "sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.1" + } + }, "cross-fetch": { "version": "3.0.6", "resolved": "https://registry.npmjs.org/cross-fetch/-/cross-fetch-3.0.6.tgz", diff --git a/package.json b/package.json index 36d66aad..b0d11c24 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "babel-plugin-react-html-attrs": "^2.1.0", "chai": "^4.2.0", "coveralls": "^3.1.0", + "cross-env": "^7.0.3", "css-loader": "^4.3.0", "enzyme": "^3.2.0", "enzyme-adapter-react-16": "^1.15.5", @@ -52,19 +53,19 @@ "react-dom": "^17.0.0 || ^16.3.0 || ^15.5.4" }, "scripts": { - "build": "NODE_ENV=production webpack --config webpack/webpack.config.js -p --display-error-details --progress --optimize-minimize", - "prebuild": "NODE_ENV=test npm run test:unit", - "build:demo": "NODE_ENV=production webpack --config webpack/webpack.config-demo.js -p --display-error-details --progress --optimize-minimize", - "dev": "NODE_ENV=development webpack-dev-server --config webpack/webpack.config-dev.js --open", + "build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.js -p --display-error-details --progress --optimize-minimize", + "prebuild": "cross-env NODE_ENV=test npm run test:unit", + "build:demo": "cross-env NODE_ENV=production webpack --config webpack/webpack.config-demo.js -p --display-error-details --progress --optimize-minimize", + "dev": "cross-env NODE_ENV=development webpack-dev-server --config webpack/webpack.config-dev.js --open", "modules:debug": "./docker/debug.sh", "modules:tree": "webpack --config webpack/webpack.config.js --json ", "modules:size-analyzer": "webpack --config webpack/webpack.config.js --json | webpack-bundle-size-analyzer", "test": "npm run test:coverage", - "test:unit": "NODE_ENV=test nyc mocha test/**/*-test.js", - "test:coverage": "NODE_ENV=test nyc --reporter=text-lcov mocha test/**/*-test.js | coveralls", - "test:watch": "NODE_ENV=test nyc mocha -w test/**/*-test.js", - "lint": "NODE_ENV=test ./node_modules/.bin/eslint src", - "lint-fixup": "NODE_ENV=test ./node_modules/.bin/eslint src --ext .js,.jsx --fix" + "test:unit": "cross-env NODE_ENV=test nyc mocha test/**/*-test.js", + "test:coverage": "cross-env NODE_ENV=test nyc --reporter=text-lcov mocha test/**/*-test.js | coveralls", + "test:watch": "cross-env NODE_ENV=test nyc mocha -w test/**/*-test.js", + "lint": "cross-env NODE_ENV=test ./node_modules/.bin/eslint src", + "lint-fixup": "cross-env NODE_ENV=test ./node_modules/.bin/eslint src --ext .js,.jsx --fix" }, "repository": { "type": "git", From 723ae4a69a6c126f4ae61c3450c0e6d93106b04e Mon Sep 17 00:00:00 2001 From: Claus Reinke Date: Fri, 2 Jul 2021 15:10:13 +0200 Subject: [PATCH 2/4] align collapse behaviour for ArrayGroup (fix #363) --- src/js/components/ArrayGroup.js | 167 ++++++++++++-------- test/tests/js/components/ArrayGroup-test.js | 23 ++- 2 files changed, 123 insertions(+), 67 deletions(-) diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js index deae3f8e..d47e64b6 100644 --- a/src/js/components/ArrayGroup.js +++ b/src/js/components/ArrayGroup.js @@ -1,10 +1,14 @@ import React from 'react'; import Theme from './../themes/getStyle'; +import { toType } from './../helpers/util'; import VariableMeta from './VariableMeta'; import ObjectName from './ObjectName'; import ObjectComponent from './DataTypes/Object'; +//attribute store +import AttributeStore from './../stores/ObjectAttributes'; + //icons import { CollapsedIcon, ExpandedIcon } from './ToggleIcons'; @@ -14,15 +18,33 @@ const SINGLE_INDENT = 5; export default class extends React.PureComponent { constructor(props) { super(props); + const expanded = + (props.collapsed === false || + (props.collapsed !== true && props.collapsed > props.depth)) && + (!props.shouldCollapse || + props.shouldCollapse({ + name: props.name, + src: props.src, + type: toType(props.src), + namespace: props.namespace + }) === false); + const expandedAttribute = AttributeStore.get( + props.rjvId, + props.namespace, + 'expanded', + expanded + ); + this.state = { expanded: [] }; + this.state.expanded[-1] = expandedAttribute; } toggleCollapsed = i => { const newExpanded = []; for (const j in this.state.expanded) { - newExpanded.push(this.state.expanded[j]); + newExpanded[j] = this.state.expanded[j]; } newExpanded[i] = !newExpanded[i]; this.setState({ @@ -71,78 +93,93 @@ export default class extends React.PureComponent { paddingLeft: object_padding_left })} > - - - - - - {[...Array(groups)].map((_, i) => ( +
{ + this.toggleCollapsed(-1); + }} > - -
{ - this.toggleCollapsed(i); - }} - > - {this.getExpandedIcon(i)} -
- {this.state.expanded[i] ? ( - - ) : ( - + + + + + + + {(this.state.expanded[-1] + ? [...Array(groups)].map((_, i) => ( +
+ +
{ this.toggleCollapsed(i); }} - class="array-group-brace" > - [ -
+ {this.state.expanded[i] ? ( + + ) : ( + { + this.toggleCollapsed(i); + }} + class="array-group-brace" > - - {i * size} - {' - '} - {i * size + size > src.length - ? src.length - : i * size + size} - -
- ] - - )} - -
- ))} + + {i * size} + {' - '} + {i * size + size > src.length + ? src.length + : i * size + size} + +
+ ] + + )} + +
+ )) + : null + )} + ); } diff --git a/test/tests/js/components/ArrayGroup-test.js b/test/tests/js/components/ArrayGroup-test.js index 7295be47..c4369906 100644 --- a/test/tests/js/components/ArrayGroup-test.js +++ b/test/tests/js/components/ArrayGroup-test.js @@ -19,6 +19,7 @@ describe('', function () { theme="rjv-default" jsvRoot={false} indentWidth={4} + collapsed={false} /> ); @@ -35,8 +36,15 @@ describe('', function () { theme="rjv-default" jsvRoot={false} indentWidth={4} + shouldCollapse={() => false} + collapsed={0} + depth={10} /> ); + + wrapper.find('.icon-container').first().simulate('click'); + + expect(wrapper.state().expanded[-1]).to.equal(true); wrapper.find('.array-group-brace').first().simulate('click'); @@ -49,6 +57,11 @@ describe('', function () { .simulate('click'); expect(wrapper.state().expanded[0]).to.equal(false); + + wrapper.find('.icon-container').first().simulate('click'); + + expect(wrapper.state().expanded[-1]).to.equal(false); + }); it('ArrayGroup displays arrays on expansion', function () { @@ -61,10 +74,12 @@ describe('', function () { theme="rjv-default" jsvRoot={false} indentWidth={4} + collapsed={true} + shouldCollapse={()=>false} /> ); - wrapper.setState({ expanded: { 0: true } }); + wrapper.setState({ expanded: { [-1]: true, 0: true } }); expect(wrapper.find(JsonObject).length).to.equal(1); @@ -83,12 +98,15 @@ describe('', function () { theme="rjv-default" jsvRoot={false} indentWidth={4} + collapsed={10} + depth={0} + shouldCollapse={()=>false} /> ); expect(wrapper.find('.array-group').length).to.equal(4); - wrapper.setState({ expanded: { 3: true } }); + wrapper.setState({ expanded: { [-1]: true, 3: true } }); expect( wrapper.find('.array-group').last().find(JsonString).length @@ -105,6 +123,7 @@ describe('', function () { theme="rjv-default" jsvRoot={true} indentWidth={4} + collapsed={false} /> ); From 92b89644d9913ece052dc938fe229a3d478cdae6 Mon Sep 17 00:00:00 2001 From: Claus Reinke Date: Fri, 2 Jul 2021 15:44:04 +0200 Subject: [PATCH 3/4] do not pass on collapsed,shouldCollapse --- src/js/components/ArrayGroup.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js index d47e64b6..6f4055b6 100644 --- a/src/js/components/ArrayGroup.js +++ b/src/js/components/ArrayGroup.js @@ -72,6 +72,8 @@ export default class extends React.PureComponent { jsvRoot, namespace, parent_type, + collapsed, + shouldCollapse, ...rest } = this.props; From e57b5c0f36bb04d555bcd06831932ebc9ce30301 Mon Sep 17 00:00:00 2001 From: Claus Reinke Date: Tue, 20 Jul 2021 14:04:45 +0200 Subject: [PATCH 4/4] restore json copy button --- src/js/components/ArrayGroup.js | 132 +++++++++++++++++--------------- 1 file changed, 69 insertions(+), 63 deletions(-) diff --git a/src/js/components/ArrayGroup.js b/src/js/components/ArrayGroup.js index 6f4055b6..cac3dd75 100644 --- a/src/js/components/ArrayGroup.js +++ b/src/js/components/ArrayGroup.js @@ -91,6 +91,12 @@ export default class extends React.PureComponent { return (
+ this.setState({ ...this.state, hovered: true }) + } + onMouseLeave={() => + this.setState({ ...this.state, hovered: false }) + } {...Theme(theme, jsvRoot ? 'jsv-root' : 'objectKeyVal', { paddingLeft: object_padding_left })} @@ -105,81 +111,81 @@ export default class extends React.PureComponent { > {this.getExpandedIcon(-1)}
- + - + {(this.state.expanded[-1] - ? [...Array(groups)].map((_, i) => ( -
- -
{ - this.toggleCollapsed(i); - }} - > - {this.getExpandedIcon(i)} -
- {this.state.expanded[i] ? ( - - ) : ( - ( +
+ +
{ this.toggleCollapsed(i); }} - class="array-group-brace" > - [ -
+ {this.state.expanded[i] ? ( + + ) : ( + { + this.toggleCollapsed(i); + }} + class="array-group-brace" > - - {i * size} - {' - '} - {i * size + size > src.length - ? src.length - : i * size + size} - -
- ] - - )} - -
+ + {i * size} + {' - '} + {i * size + size > src.length + ? src.length + : i * size + size} + +
+ ] + + )} + +
)) - : null + : null )}