superdesk-ui-framework 4.0.17 → 4.0.18
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.
- package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +14 -4
- package/dist/examples.bundle.js +8 -3
- package/dist/superdesk-ui.bundle.js +7 -2
- package/package.json +1 -1
- package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +3 -2
- package/react/components/ToggleBox/CustomHeaderToggleBox.js +7 -2
|
@@ -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:
|
|
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/dist/examples.bundle.js
CHANGED
|
@@ -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:
|
|
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.
|
|
187897
|
+
module.exports = {"name":"superdesk-ui-framework","version":"4.0.18","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 */
|
|
@@ -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:
|
|
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
|
@@ -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
|
|
9
|
-
contentRef
|
|
9
|
+
private htmlId;
|
|
10
|
+
private contentRef;
|
|
10
11
|
constructor(props: IPropsCustomHeader);
|
|
11
12
|
/**
|
|
12
13
|
* Called via ref
|
|
@@ -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:
|
|
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));
|