superdesk-ui-framework 4.0.17 → 4.0.19

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +14 -4
  2. package/app-typescript/components/TreeSelect/TreeSelect.tsx +1 -1
  3. package/dist/examples.bundle.js +9 -4
  4. package/dist/superdesk-ui.bundle.js +8 -3
  5. package/package.json +1 -1
  6. package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +3 -2
  7. package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -2
  8. package/react/components/TreeSelect/TreeSelect.js +1 -1
package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx CHANGED
@@ -5,18 +5,23 @@ import {IPropsCustomHeader} from "../ToggleBox/index";
5
5
 
6
6
  interface IState {
7
7
  isOpen: boolean;
8
+ wasOpened: boolean;
8
9
  isAnimating: boolean;
9
10
  }
10
11
 
11
12
  export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
12
- htmlId = nextId('togglebox-');
13
- contentRef = React.createRef<HTMLDivElement>();
13
+ private htmlId = nextId('togglebox-');
14
+ private contentRef = React.createRef<HTMLDivElement>();
14
15
 
15
16
  constructor(props: IPropsCustomHeader) {
16
17
  super(props);
18
+
19
+ const isOpen = this.props.initiallyOpen ?? false;
20
+
17
21
  this.state = {
18
- isOpen: this.props.initiallyOpen ?? false,
22
+ isOpen: isOpen,
19
23
  isAnimating: false,
24
+ wasOpened: isOpen,
20
25
  };
21
26
  }
22
27
 
@@ -41,6 +46,10 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
41
46
  this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
42
47
  }
43
48
  }
49
+
50
+ if (this.state.isOpen && !this.state.wasOpened) {
51
+ this.setState({wasOpened: true});
52
+ }
44
53
  }
45
54
 
46
55
  handleAnimationEnd = () => {
@@ -79,6 +88,7 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
79
88
  </button>
80
89
  </div>
81
90
 
91
+ {/** render wrapper unconditionally in order not to break the animation */}
82
92
  <div className='new-collapse-box__content'>
83
93
  <div
84
94
  id={this.htmlId}
@@ -87,7 +97,7 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
87
97
  'toggle-box__content--animation': this.state.isAnimating,
88
98
  })}
89
99
  >
90
- {this.props.children}
100
+ {this.state.isOpen || this.state.wasOpened ? this.props.children : null}
91
101
  </div>
92
102
  </div>
93
103
  </div>
package/app-typescript/components/TreeSelect/TreeSelect.tsx CHANGED
@@ -225,7 +225,7 @@ export class TreeSelect<T> extends React.Component<IProps<T>, IState<T>> {
225
225
  } else {
226
226
  this.props.onChange(this.state.value);
227
227
  }
228
- } else if (!isEqual(prevProps.value, this.props.value)) {
228
+ } else if (!isEqual(prevProps.value, this.props.value) && !isEqual(this.props.value, this.state.value)) {
229
229
  this.changesFromOutside = true;
230
230
  this.setState({
231
231
  value: this.props.value ?? [],
package/dist/examples.bundle.js CHANGED
@@ -79186,7 +79186,7 @@ var TreeSelect = /** @class */ (function (_super) {
79186
79186
  this.props.onChange(this.state.value);
79187
79187
  }
79188
79188
  }
79189
- else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
79189
+ else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value) && !(0, lodash_1.isEqual)(this.props.value, this.state.value)) {
79190
79190
  this.changesFromOutside = true;
79191
79191
  this.setState({
79192
79192
  value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],
@@ -150065,9 +150065,11 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
150065
150065
  _this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
150066
150066
  }
150067
150067
  };
150068
+ var isOpen = (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false;
150068
150069
  _this.state = {
150069
- isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
150070
+ isOpen: isOpen,
150070
150071
  isAnimating: false,
150072
+ wasOpened: isOpen,
150071
150073
  };
150072
150074
  return _this;
150073
150075
  }
@@ -150078,6 +150080,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
150078
150080
  this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
150079
150081
  }
150080
150082
  }
150083
+ if (this.state.isOpen && !this.state.wasOpened) {
150084
+ this.setState({ wasOpened: true });
150085
+ }
150081
150086
  };
150082
150087
  CustomHeaderToggleBox.prototype.render = function () {
150083
150088
  var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
@@ -150092,7 +150097,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
150092
150097
  React.createElement("div", { className: 'new-collapse-box__content' },
150093
150098
  React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
150094
150099
  'toggle-box__content--animation': this.state.isAnimating,
150095
- }) }, this.props.children))));
150100
+ }) }, this.state.isOpen || this.state.wasOpened ? this.props.children : null))));
150096
150101
  };
150097
150102
  return CustomHeaderToggleBox;
150098
150103
  }(React.PureComponent));
@@ -187889,7 +187894,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
187889
187894
  /* 938 */
187890
187895
  /***/ (function(module, exports) {
187891
187896
 
187892
- module.exports = {"name":"superdesk-ui-framework","version":"4.0.17","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","tippy.js":"^6.3.7"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
187897
+ module.exports = {"name":"superdesk-ui-framework","version":"4.0.19","license":"AGPL-3.0","repository":{"type":"git","url":"https://github.com/superdesk/superdesk-ui-framework.git"},"main":"dist/superdesk-ui.bundle.js","types":"react/index.d.ts","contributors":["Nemanja Pavlovic","Vladimir Stefanovic","Darko Tomic","Aleksandar Jelicic","Tomas Kikutis","Dragana Zivkovic"],"scripts":{"start":"webpack-dev-server --config tasks/webpack.dev.js","server":"webpack --watch --config tasks/webpack.prod.js && tsc-watch","build":"webpack --config tasks/webpack.prod.js && tsc","build-ui":"webpack && tsc && npm run lint","playground-lint":"tsc -p examples/pages/playgrounds/react-playgrounds --noEmit","lint":"eslint --parser=@typescript-eslint/parser app && tslint -c tslint.json 'app-typescript/**/*.{ts,tsx}' && npm run playground-lint","lint-fix":"tsc -p tsconfig.json --noEmit && tslint --fix -c tslint.json 'app-typescript/**/*.{ts,tsx}'","prepublishOnly":"npm run build","unit-test":"mocha","debug-unit-tests":"mocha --inspect-brk"},"devDependencies":{"@types/assert":"^1.5.6","@types/chart.js":"^2.9.24","@types/classnames":"^2.2.9","@types/enzyme":"^3.10.12","@types/enzyme-adapter-react-16":"^1.0.6","@types/lodash":"^4.14.161","@types/mocha":"^9.1.1","@types/react":"16.8.23","@types/react-beautiful-dnd":"^13.1.2","@types/react-dom":"16.8.0","@types/react-router-dom":"^5.1.2","@types/react-scrollspy":"^3.3.5","@typescript-eslint/parser":"^5.58.0","angular":"^1.7.9","angular-animate":"^1.7.9","angular-route":"^1.7.9","babel-core":"^6.26.0","babel-loader":"^7.1.2","babel-plugin-transform-object-rest-spread":"^6.26.0","babel-preset-es2015":"^6.24.1","babel-preset-react":"^6.24.1","classnames":"^2.2.5","clean-webpack-plugin":"^1.0.0","code-prettify":"^0.1.0","copy-webpack-plugin":"^4.6.0","css-loader":"^2.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.7","eslint":"^4.6.1","eslint-loader":"^1.9.0","eslint-plugin-angular":"^3.1.1","eslint-plugin-react":"^7.3.0","extract-text-webpack-plugin":"^3.0.2","file-loader":"^0.11.2","html-loader":"^0.5.1","html-webpack-plugin":"^2.30.1","jquery":"^3.1.1","jquery-ui":"^1.12.1","jsdom":"20.0.3","jsdom-global":"3.0.2","lodash":"4.17.21","mocha":"^8.4.0","moment":"^2.29.3","node-sass":"6.0","prismjs":"^1.28.0","prop-types":"^15.6.0","react":"16.8.6","react-dom":"16.8.6","react-redux":"^5.0.6","react-router-dom":"^5.1.2","redux":"^3.7.2","redux-form":"^7.0.4","sass-loader":"^6.0.6","style-loader":"^0.18.2","superdesk-code-style":"^1.1.2","ts-loader":"^6.0.2","ts-node":"^10.9.1","tslint":"^5.18.0","typescript":"4.9.5","url-loader":"^1.1.2","webpack":"^3.5.5","webpack-cli":"3.3.10","webpack-dev-server":"2.11.1","webpack-merge":"^4.2.1"},"dependencies":{"@popperjs/core":"^2.4.0","@superdesk/common":"0.0.28","@superdesk/primereact":"^5.0.2-12","@superdesk/react-resizable-panels":"0.0.39","chart.js":"^2.9.3","date-fns":"2.7.0","popper-max-size-modifier":"^0.2.0","popper.js":"1.14.4","primeicons":"2.0.0","react-beautiful-dnd":"^13.0.0","react-id-generator":"^3.0.0","react-scrollspy":"^3.4.3","tippy.js":"^6.3.7"},"peerDependencies":{"moment":"*"},"volta":{"node":"14.21.3"}}
187893
187898
 
187894
187899
  /***/ }),
187895
187900
  /* 939 */
package/dist/superdesk-ui.bundle.js CHANGED
@@ -78307,7 +78307,7 @@ var TreeSelect = /** @class */ (function (_super) {
78307
78307
  this.props.onChange(this.state.value);
78308
78308
  }
78309
78309
  }
78310
- else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
78310
+ else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value) && !(0, lodash_1.isEqual)(this.props.value, this.state.value)) {
78311
78311
  this.changesFromOutside = true;
78312
78312
  this.setState({
78313
78313
  value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],
@@ -149186,9 +149186,11 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
149186
149186
  _this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
149187
149187
  }
149188
149188
  };
149189
+ var isOpen = (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false;
149189
149190
  _this.state = {
149190
- isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
149191
+ isOpen: isOpen,
149191
149192
  isAnimating: false,
149193
+ wasOpened: isOpen,
149192
149194
  };
149193
149195
  return _this;
149194
149196
  }
@@ -149199,6 +149201,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
149199
149201
  this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
149200
149202
  }
149201
149203
  }
149204
+ if (this.state.isOpen && !this.state.wasOpened) {
149205
+ this.setState({ wasOpened: true });
149206
+ }
149202
149207
  };
149203
149208
  CustomHeaderToggleBox.prototype.render = function () {
149204
149209
  var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
@@ -149213,7 +149218,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
149213
149218
  React.createElement("div", { className: 'new-collapse-box__content' },
149214
149219
  React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
149215
149220
  'toggle-box__content--animation': this.state.isAnimating,
149216
- }) }, this.props.children))));
149221
+ }) }, this.state.isOpen || this.state.wasOpened ? this.props.children : null))));
149217
149222
  };
149218
149223
  return CustomHeaderToggleBox;
149219
149224
  }(React.PureComponent));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "superdesk-ui-framework",
3
- "version": "4.0.17",
3
+ "version": "4.0.19",
4
4
  "license": "AGPL-3.0",
5
5
  "repository": {
6
6
  "type": "git",
package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts CHANGED
@@ -2,11 +2,12 @@ import * as React from 'react';
2
2
  import { IPropsCustomHeader } from "../ToggleBox/index";
3
3
  interface IState {
4
4
  isOpen: boolean;
5
+ wasOpened: boolean;
5
6
  isAnimating: boolean;
6
7
  }
7
8
  export declare class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
8
- htmlId: string;
9
- contentRef: React.RefObject<HTMLDivElement>;
9
+ private htmlId;
10
+ private contentRef;
10
11
  constructor(props: IPropsCustomHeader);
11
12
  /**
12
13
  * Called via ref
package/react/components/ToggleBox/CustomHeaderToggleBox.js CHANGED
@@ -71,9 +71,11 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
71
71
  _this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
72
72
  }
73
73
  };
74
+ var isOpen = (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false;
74
75
  _this.state = {
75
- isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
76
+ isOpen: isOpen,
76
77
  isAnimating: false,
78
+ wasOpened: isOpen,
77
79
  };
78
80
  return _this;
79
81
  }
@@ -84,6 +86,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
84
86
  this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
85
87
  }
86
88
  }
89
+ if (this.state.isOpen && !this.state.wasOpened) {
90
+ this.setState({ wasOpened: true });
91
+ }
87
92
  };
88
93
  CustomHeaderToggleBox.prototype.render = function () {
89
94
  var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
@@ -98,7 +103,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
98
103
  React.createElement("div", { className: 'new-collapse-box__content' },
99
104
  React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
100
105
  'toggle-box__content--animation': this.state.isAnimating,
101
- }) }, this.props.children))));
106
+ }) }, this.state.isOpen || this.state.wasOpened ? this.props.children : null))));
102
107
  };
103
108
  return CustomHeaderToggleBox;
104
109
  }(React.PureComponent));
package/react/components/TreeSelect/TreeSelect.js CHANGED
@@ -197,7 +197,7 @@ var TreeSelect = /** @class */ (function (_super) {
197
197
  this.props.onChange(this.state.value);
198
198
  }
199
199
  }
200
- else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value)) {
200
+ else if (!(0, lodash_1.isEqual)(prevProps.value, this.props.value) && !(0, lodash_1.isEqual)(this.props.value, this.state.value)) {
201
201
  this.changesFromOutside = true;
202
202
  this.setState({
203
203
  value: (_a = this.props.value) !== null && _a !== void 0 ? _a : [],