superdesk-ui-framework 4.0.20 → 4.0.21
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/styles/components/_sd-collapse-box.scss +4 -0
- package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +19 -3
- package/dist/examples.bundle.js +17 -5
- package/dist/superdesk-ui.bundle.css +2 -0
- package/dist/superdesk-ui.bundle.js +16 -4
- package/package.json +1 -1
- package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +1 -1
- package/react/components/ToggleBox/CustomHeaderToggleBox.js +16 -4
|
@@ -152,6 +152,10 @@
|
|
|
152
152
|
overflow: hidden;
|
|
153
153
|
transition: all 0.2s ease;
|
|
154
154
|
outline: 1px solid var(--sd-colour-line--x-light);
|
|
155
|
+
|
|
156
|
+
.toggle-box__content--animation {
|
|
157
|
+
animation: fadeIn 0.3s ease-in 0s 1;
|
|
158
|
+
}
|
|
155
159
|
}
|
|
156
160
|
.new-collapse-box__header {
|
|
157
161
|
grid-row: 1 / 2;
|
|
@@ -32,9 +32,24 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
|
|
|
32
32
|
return this.state.isOpen;
|
|
33
33
|
}
|
|
34
34
|
|
|
35
|
-
public toggle = ():
|
|
36
|
-
|
|
37
|
-
this.
|
|
35
|
+
public toggle = (): Promise<boolean> => {
|
|
36
|
+
return new Promise((resolve, reject) => {
|
|
37
|
+
this.setState(
|
|
38
|
+
{isOpen: !this.state.isOpen, isAnimating: true},
|
|
39
|
+
() => {
|
|
40
|
+
if (this.contentRef.current) {
|
|
41
|
+
const handleAnimation = () => {
|
|
42
|
+
this.props.onToggle?.(this.state.isOpen);
|
|
43
|
+
this.handleAnimationEnd();
|
|
44
|
+
resolve(this.state.isOpen);
|
|
45
|
+
};
|
|
46
|
+
|
|
47
|
+
this.contentRef.current.addEventListener("animationend", handleAnimation, {once: true});
|
|
48
|
+
} else {
|
|
49
|
+
reject();
|
|
50
|
+
}
|
|
51
|
+
},
|
|
52
|
+
);
|
|
38
53
|
});
|
|
39
54
|
}
|
|
40
55
|
|
|
@@ -91,6 +106,7 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
|
|
|
91
106
|
{/** render wrapper unconditionally in order not to break the animation */}
|
|
92
107
|
<div className='new-collapse-box__content'>
|
|
93
108
|
<div
|
|
109
|
+
ref={this.contentRef}
|
|
94
110
|
id={this.htmlId}
|
|
95
111
|
aria-hidden={!isOpen}
|
|
96
112
|
className={classNames('new-collapse-box__content-inner p-2 pt-0-5', {
|
package/dist/examples.bundle.js
CHANGED
|
@@ -150054,9 +150054,21 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
150054
150054
|
return _this.state.isOpen;
|
|
150055
150055
|
};
|
|
150056
150056
|
_this.toggle = function () {
|
|
150057
|
-
|
|
150058
|
-
|
|
150059
|
-
|
|
150057
|
+
return new Promise(function (resolve, reject) {
|
|
150058
|
+
_this.setState({ isOpen: !_this.state.isOpen, isAnimating: true }, function () {
|
|
150059
|
+
if (_this.contentRef.current) {
|
|
150060
|
+
var handleAnimation = function () {
|
|
150061
|
+
var _a, _b;
|
|
150062
|
+
(_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
|
|
150063
|
+
_this.handleAnimationEnd();
|
|
150064
|
+
resolve(_this.state.isOpen);
|
|
150065
|
+
};
|
|
150066
|
+
_this.contentRef.current.addEventListener("animationend", handleAnimation, { once: true });
|
|
150067
|
+
}
|
|
150068
|
+
else {
|
|
150069
|
+
reject();
|
|
150070
|
+
}
|
|
150071
|
+
});
|
|
150060
150072
|
});
|
|
150061
150073
|
};
|
|
150062
150074
|
_this.handleAnimationEnd = function () {
|
|
@@ -150095,7 +150107,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
150095
150107
|
React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
|
|
150096
150108
|
React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.getToggleButtonLabel(isOpen)))),
|
|
150097
150109
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
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', {
|
|
150110
|
+
React.createElement("div", { ref: this.contentRef, id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
150099
150111
|
'toggle-box__content--animation': this.state.isAnimating,
|
|
150100
150112
|
}) }, this.state.isOpen || this.state.wasOpened || this.props.alwaysRenderChildren === true
|
|
150101
150113
|
? this.props.children
|
|
@@ -187896,7 +187908,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
187896
187908
|
/* 938 */
|
|
187897
187909
|
/***/ (function(module, exports) {
|
|
187898
187910
|
|
|
187899
|
-
module.exports = {"name":"superdesk-ui-framework","version":"4.0.
|
|
187911
|
+
module.exports = {"name":"superdesk-ui-framework","version":"4.0.21","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"}}
|
|
187900
187912
|
|
|
187901
187913
|
/***/ }),
|
|
187902
187914
|
/* 939 */
|
|
@@ -44664,6 +44664,8 @@ a.text-link {
|
|
|
44664
44664
|
overflow: hidden;
|
|
44665
44665
|
transition: all 0.2s ease;
|
|
44666
44666
|
outline: 1px solid var(--sd-colour-line--x-light); }
|
|
44667
|
+
.new-collapse-box .toggle-box__content--animation {
|
|
44668
|
+
animation: fadeIn 0.3s ease-in 0s 1; }
|
|
44667
44669
|
|
|
44668
44670
|
.new-collapse-box__header {
|
|
44669
44671
|
grid-row: 1 / 2;
|
|
@@ -149175,9 +149175,21 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
149175
149175
|
return _this.state.isOpen;
|
|
149176
149176
|
};
|
|
149177
149177
|
_this.toggle = function () {
|
|
149178
|
-
|
|
149179
|
-
|
|
149180
|
-
|
|
149178
|
+
return new Promise(function (resolve, reject) {
|
|
149179
|
+
_this.setState({ isOpen: !_this.state.isOpen, isAnimating: true }, function () {
|
|
149180
|
+
if (_this.contentRef.current) {
|
|
149181
|
+
var handleAnimation = function () {
|
|
149182
|
+
var _a, _b;
|
|
149183
|
+
(_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
|
|
149184
|
+
_this.handleAnimationEnd();
|
|
149185
|
+
resolve(_this.state.isOpen);
|
|
149186
|
+
};
|
|
149187
|
+
_this.contentRef.current.addEventListener("animationend", handleAnimation, { once: true });
|
|
149188
|
+
}
|
|
149189
|
+
else {
|
|
149190
|
+
reject();
|
|
149191
|
+
}
|
|
149192
|
+
});
|
|
149181
149193
|
});
|
|
149182
149194
|
};
|
|
149183
149195
|
_this.handleAnimationEnd = function () {
|
|
@@ -149216,7 +149228,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
149216
149228
|
React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
|
|
149217
149229
|
React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.getToggleButtonLabel(isOpen)))),
|
|
149218
149230
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
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', {
|
|
149231
|
+
React.createElement("div", { ref: this.contentRef, id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
149220
149232
|
'toggle-box__content--animation': this.state.isAnimating,
|
|
149221
149233
|
}) }, this.state.isOpen || this.state.wasOpened || this.props.alwaysRenderChildren === true
|
|
149222
149234
|
? this.props.children
|
package/package.json
CHANGED
|
@@ -13,7 +13,7 @@ export declare class CustomHeaderToggleBox extends React.PureComponent<IPropsCus
|
|
|
13
13
|
* Called via ref
|
|
14
14
|
*/
|
|
15
15
|
isOpen: () => boolean;
|
|
16
|
-
toggle: () =>
|
|
16
|
+
toggle: () => Promise<boolean>;
|
|
17
17
|
componentDidUpdate(_prevProps: IPropsCustomHeader, prevState: IState): void;
|
|
18
18
|
handleAnimationEnd: () => void;
|
|
19
19
|
render(): JSX.Element;
|
|
@@ -60,9 +60,21 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
60
60
|
return _this.state.isOpen;
|
|
61
61
|
};
|
|
62
62
|
_this.toggle = function () {
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
|
|
63
|
+
return new Promise(function (resolve, reject) {
|
|
64
|
+
_this.setState({ isOpen: !_this.state.isOpen, isAnimating: true }, function () {
|
|
65
|
+
if (_this.contentRef.current) {
|
|
66
|
+
var handleAnimation = function () {
|
|
67
|
+
var _a, _b;
|
|
68
|
+
(_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
|
|
69
|
+
_this.handleAnimationEnd();
|
|
70
|
+
resolve(_this.state.isOpen);
|
|
71
|
+
};
|
|
72
|
+
_this.contentRef.current.addEventListener("animationend", handleAnimation, { once: true });
|
|
73
|
+
}
|
|
74
|
+
else {
|
|
75
|
+
reject();
|
|
76
|
+
}
|
|
77
|
+
});
|
|
66
78
|
});
|
|
67
79
|
};
|
|
68
80
|
_this.handleAnimationEnd = function () {
|
|
@@ -101,7 +113,7 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
101
113
|
React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
|
|
102
114
|
React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.getToggleButtonLabel(isOpen)))),
|
|
103
115
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
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', {
|
|
116
|
+
React.createElement("div", { ref: this.contentRef, id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
105
117
|
'toggle-box__content--animation': this.state.isAnimating,
|
|
106
118
|
}) }, this.state.isOpen || this.state.wasOpened || this.props.alwaysRenderChildren === true
|
|
107
119
|
? this.props.children
|