superdesk-ui-framework 3.1.22 → 3.1.24
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/_boxed-list.scss +2 -1
- package/app/styles/_toggle-box.scss +3 -4
- package/app/styles/components/_sd-collapse-box.scss +0 -2
- package/app-typescript/components/ToggleBox/CustomHeaderToggleBox.tsx +30 -2
- package/app-typescript/components/ToggleBox/SimpleToggleBox.tsx +32 -2
- package/dist/examples.bundle.js +39 -3
- package/dist/superdesk-ui.bundle.css +4 -4
- package/dist/superdesk-ui.bundle.js +38 -2
- package/package.json +1 -1
- package/react/components/ToggleBox/CustomHeaderToggleBox.d.ts +4 -0
- package/react/components/ToggleBox/CustomHeaderToggleBox.js +19 -1
- package/react/components/ToggleBox/SimpleToggleBox.d.ts +4 -0
- package/react/components/ToggleBox/SimpleToggleBox.js +19 -1
|
@@ -28,6 +28,7 @@ $boxed-list-palette: $sd-basic-palette;
|
|
|
28
28
|
background-color: var(--sd-item__main-Bg);
|
|
29
29
|
box-shadow: $shadow__base--z1;
|
|
30
30
|
transition: all 0.2s ease-in-out;
|
|
31
|
+
flex-shrink: 0;
|
|
31
32
|
|
|
32
33
|
@each $name, $color in $boxed-list-palette {
|
|
33
34
|
&.boxed-list__item--#{$name} {
|
|
@@ -240,6 +241,6 @@ $boxed-list-palette: $sd-basic-palette;
|
|
|
240
241
|
.boxed-list__item-content {
|
|
241
242
|
justify-content: center;
|
|
242
243
|
}
|
|
243
|
-
|
|
244
|
+
|
|
244
245
|
}
|
|
245
246
|
}
|
|
@@ -159,7 +159,6 @@
|
|
|
159
159
|
padding: 0;
|
|
160
160
|
overflow: hidden;
|
|
161
161
|
transition: all 0.2s ease;
|
|
162
|
-
min
|
|
163
162
|
.hide-on-open {
|
|
164
163
|
display: none;
|
|
165
164
|
}
|
|
@@ -180,7 +179,6 @@
|
|
|
180
179
|
grid-template-rows: auto 1fr auto;
|
|
181
180
|
.new-collapse-box__content {
|
|
182
181
|
> .new-collapse-box__content-inner {
|
|
183
|
-
animation: fadeIn 0.3s ease-in 0s 1;
|
|
184
182
|
overflow-y: auto;
|
|
185
183
|
.new-collapse-box { // Nested -- collapse-box inside a parent collapse-box
|
|
186
184
|
&.new-collapse-box--open {
|
|
@@ -5,14 +5,18 @@ import {IPropsCustomHeader} from "../ToggleBox/index";
|
|
|
5
5
|
|
|
6
6
|
interface IState {
|
|
7
7
|
isOpen: boolean;
|
|
8
|
+
isAnimating: boolean;
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
|
|
11
12
|
htmlId = nextId('togglebox-');
|
|
13
|
+
contentRef = React.createRef<HTMLDivElement>();
|
|
14
|
+
|
|
12
15
|
constructor(props: IPropsCustomHeader) {
|
|
13
16
|
super(props);
|
|
14
17
|
this.state = {
|
|
15
18
|
isOpen: this.props.initiallyOpen ?? false,
|
|
19
|
+
isAnimating: false,
|
|
16
20
|
};
|
|
17
21
|
}
|
|
18
22
|
|
|
@@ -22,8 +26,26 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
|
|
|
22
26
|
});
|
|
23
27
|
}
|
|
24
28
|
|
|
29
|
+
componentDidUpdate(_prevProps: IPropsCustomHeader, prevState: IState) {
|
|
30
|
+
if (prevState.isOpen !== this.state.isOpen) {
|
|
31
|
+
this.setState({ isAnimating: true });
|
|
32
|
+
|
|
33
|
+
if (this.contentRef.current) {
|
|
34
|
+
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
35
|
+
}
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
handleAnimationEnd = () => {
|
|
40
|
+
this.setState({ isAnimating: false });
|
|
41
|
+
|
|
42
|
+
if (this.contentRef.current) {
|
|
43
|
+
this.contentRef.current.removeEventListener('animationend', this.handleAnimationEnd);
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
25
47
|
render() {
|
|
26
|
-
|
|
48
|
+
const classes = classNames('sd-shadow--z1 new-collapse-box', {
|
|
27
49
|
'new-collapse-box--open': this.state.isOpen,
|
|
28
50
|
});
|
|
29
51
|
const { isOpen } = this.state;
|
|
@@ -51,7 +73,13 @@ export class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeade
|
|
|
51
73
|
</div>
|
|
52
74
|
|
|
53
75
|
<div className='new-collapse-box__content'>
|
|
54
|
-
<div
|
|
76
|
+
<div
|
|
77
|
+
id={this.htmlId}
|
|
78
|
+
aria-hidden={!isOpen}
|
|
79
|
+
className={classNames('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
80
|
+
'toggle-box__content--animation': this.state.isAnimating,
|
|
81
|
+
})}
|
|
82
|
+
>
|
|
55
83
|
{this.props.children}
|
|
56
84
|
</div>
|
|
57
85
|
</div>
|
|
@@ -5,6 +5,7 @@ import {IPropsSimple} from "../ToggleBox/index";
|
|
|
5
5
|
|
|
6
6
|
interface IState {
|
|
7
7
|
isOpen: boolean;
|
|
8
|
+
isAnimating: boolean;
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
/**
|
|
@@ -15,10 +16,13 @@ interface IState {
|
|
|
15
16
|
|
|
16
17
|
export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
|
|
17
18
|
htmlId = nextId('togglebox-');
|
|
19
|
+
contentRef = React.createRef<HTMLDivElement>();
|
|
20
|
+
|
|
18
21
|
constructor(props: IPropsSimple) {
|
|
19
22
|
super(props);
|
|
20
23
|
this.state = {
|
|
21
24
|
isOpen: this.props.initiallyOpen ?? false,
|
|
25
|
+
isAnimating: false,
|
|
22
26
|
};
|
|
23
27
|
}
|
|
24
28
|
|
|
@@ -42,8 +46,26 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
|
|
|
42
46
|
});
|
|
43
47
|
}
|
|
44
48
|
|
|
49
|
+
componentDidUpdate(_prevProps: IPropsSimple, prevState: IState) {
|
|
50
|
+
if (prevState.isOpen !== this.state.isOpen) {
|
|
51
|
+
this.setState({ isAnimating: true });
|
|
52
|
+
|
|
53
|
+
if (this.contentRef.current) {
|
|
54
|
+
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
55
|
+
}
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
handleAnimationEnd = () => {
|
|
60
|
+
this.setState({ isAnimating: false });
|
|
61
|
+
|
|
62
|
+
if (this.contentRef.current) {
|
|
63
|
+
this.contentRef.current.removeEventListener('animationend', this.handleAnimationEnd);
|
|
64
|
+
}
|
|
65
|
+
}
|
|
66
|
+
|
|
45
67
|
render() {
|
|
46
|
-
|
|
68
|
+
const classes = classNames('toggle-box', {
|
|
47
69
|
'toggle-box--margin-normal': this.props.margin === undefined,
|
|
48
70
|
'toggle-box--large-title': this.props.largeTitle,
|
|
49
71
|
'toggle-box--circle': this.props.circledChevron,
|
|
@@ -51,6 +73,7 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
|
|
|
51
73
|
'hidden': !this.state.isOpen,
|
|
52
74
|
'open': this.state.isOpen,
|
|
53
75
|
}, this.props.className);
|
|
76
|
+
|
|
54
77
|
const { title, children, badge } = this.props;
|
|
55
78
|
const { isOpen } = this.state;
|
|
56
79
|
|
|
@@ -79,7 +102,14 @@ export class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
|
|
|
79
102
|
{badge ? badge : null}
|
|
80
103
|
</a>
|
|
81
104
|
<div className="toggle-box__content-wraper">
|
|
82
|
-
<div
|
|
105
|
+
<div
|
|
106
|
+
id={this.htmlId}
|
|
107
|
+
className={classNames('toggle-box__content', {
|
|
108
|
+
'toggle-box__content--animation': this.state.isAnimating,
|
|
109
|
+
})}
|
|
110
|
+
aria-hidden={!isOpen}
|
|
111
|
+
ref={this.contentRef}
|
|
112
|
+
>
|
|
83
113
|
{children}
|
|
84
114
|
</div>
|
|
85
115
|
</div>
|
package/dist/examples.bundle.js
CHANGED
|
@@ -147289,6 +147289,7 @@ var SimpleToggleBox = /** @class */ (function (_super) {
|
|
|
147289
147289
|
var _a;
|
|
147290
147290
|
_this = _super.call(this, props) || this;
|
|
147291
147291
|
_this.htmlId = (0, react_id_generator_1.default)('togglebox-');
|
|
147292
|
+
_this.contentRef = React.createRef();
|
|
147292
147293
|
_this.handleKeyDown = function (event) {
|
|
147293
147294
|
if (event.key === "ArrowRight" && !_this.state.isOpen) {
|
|
147294
147295
|
_this.setState({ isOpen: true });
|
|
@@ -147310,11 +147311,26 @@ var SimpleToggleBox = /** @class */ (function (_super) {
|
|
|
147310
147311
|
}
|
|
147311
147312
|
});
|
|
147312
147313
|
};
|
|
147314
|
+
_this.handleAnimationEnd = function () {
|
|
147315
|
+
_this.setState({ isAnimating: false });
|
|
147316
|
+
if (_this.contentRef.current) {
|
|
147317
|
+
_this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
|
|
147318
|
+
}
|
|
147319
|
+
};
|
|
147313
147320
|
_this.state = {
|
|
147314
147321
|
isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
|
|
147322
|
+
isAnimating: false,
|
|
147315
147323
|
};
|
|
147316
147324
|
return _this;
|
|
147317
147325
|
}
|
|
147326
|
+
SimpleToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
|
|
147327
|
+
if (prevState.isOpen !== this.state.isOpen) {
|
|
147328
|
+
this.setState({ isAnimating: true });
|
|
147329
|
+
if (this.contentRef.current) {
|
|
147330
|
+
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
147331
|
+
}
|
|
147332
|
+
}
|
|
147333
|
+
};
|
|
147318
147334
|
SimpleToggleBox.prototype.render = function () {
|
|
147319
147335
|
var _a;
|
|
147320
147336
|
var classes = (0, classnames_1.default)('toggle-box', (_a = {
|
|
@@ -147336,7 +147352,9 @@ var SimpleToggleBox = /** @class */ (function (_super) {
|
|
|
147336
147352
|
React.createElement("div", { className: "toggle-box__line" }),
|
|
147337
147353
|
badge ? badge : null),
|
|
147338
147354
|
React.createElement("div", { className: "toggle-box__content-wraper" },
|
|
147339
|
-
React.createElement("div", { id: this.htmlId, className:
|
|
147355
|
+
React.createElement("div", { id: this.htmlId, className: (0, classnames_1.default)('toggle-box__content', {
|
|
147356
|
+
'toggle-box__content--animation': this.state.isAnimating,
|
|
147357
|
+
}), "aria-hidden": !isOpen, ref: this.contentRef }, children))));
|
|
147340
147358
|
};
|
|
147341
147359
|
return SimpleToggleBox;
|
|
147342
147360
|
}(React.PureComponent));
|
|
@@ -147402,17 +147420,33 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
147402
147420
|
var _a;
|
|
147403
147421
|
_this = _super.call(this, props) || this;
|
|
147404
147422
|
_this.htmlId = (0, react_id_generator_1.default)('togglebox-');
|
|
147423
|
+
_this.contentRef = React.createRef();
|
|
147405
147424
|
_this.toggle = function () {
|
|
147406
147425
|
_this.setState({ isOpen: !_this.state.isOpen }, function () {
|
|
147407
147426
|
var _a, _b;
|
|
147408
147427
|
(_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
|
|
147409
147428
|
});
|
|
147410
147429
|
};
|
|
147430
|
+
_this.handleAnimationEnd = function () {
|
|
147431
|
+
_this.setState({ isAnimating: false });
|
|
147432
|
+
if (_this.contentRef.current) {
|
|
147433
|
+
_this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
|
|
147434
|
+
}
|
|
147435
|
+
};
|
|
147411
147436
|
_this.state = {
|
|
147412
147437
|
isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
|
|
147438
|
+
isAnimating: false,
|
|
147413
147439
|
};
|
|
147414
147440
|
return _this;
|
|
147415
147441
|
}
|
|
147442
|
+
CustomHeaderToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
|
|
147443
|
+
if (prevState.isOpen !== this.state.isOpen) {
|
|
147444
|
+
this.setState({ isAnimating: true });
|
|
147445
|
+
if (this.contentRef.current) {
|
|
147446
|
+
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
147447
|
+
}
|
|
147448
|
+
}
|
|
147449
|
+
};
|
|
147416
147450
|
CustomHeaderToggleBox.prototype.render = function () {
|
|
147417
147451
|
var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
|
|
147418
147452
|
'new-collapse-box--open': this.state.isOpen,
|
|
@@ -147424,7 +147458,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
147424
147458
|
React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
|
|
147425
147459
|
React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.toggleButtonLabel))),
|
|
147426
147460
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
147427
|
-
React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: 'new-collapse-box__content-inner p-2 pt-0-5'
|
|
147461
|
+
React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
147462
|
+
'toggle-box__content--animation': this.state.isAnimating,
|
|
147463
|
+
}) }, this.props.children))));
|
|
147428
147464
|
};
|
|
147429
147465
|
return CustomHeaderToggleBox;
|
|
147430
147466
|
}(React.PureComponent));
|
|
@@ -185499,7 +185535,7 @@ exports.ThreePaneLayoutPattern = ThreePaneLayoutPattern;
|
|
|
185499
185535
|
/* 935 */
|
|
185500
185536
|
/***/ (function(module, exports) {
|
|
185501
185537
|
|
|
185502
|
-
module.exports = {"name":"superdesk-ui-framework","version":"3.1.
|
|
185538
|
+
module.exports = {"name":"superdesk-ui-framework","version":"3.1.24","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"},"peerDependencies":{"moment":"*"}}
|
|
185503
185539
|
|
|
185504
185540
|
/***/ }),
|
|
185505
185541
|
/* 936 */
|
|
@@ -36185,7 +36185,7 @@ a.label {
|
|
|
36185
36185
|
color: var(--color-text-light); }
|
|
36186
36186
|
.toggle-box.hidden .toggle-box__content-wraper {
|
|
36187
36187
|
transition: all ease-out .5s; }
|
|
36188
|
-
.toggle-box
|
|
36188
|
+
.toggle-box .toggle-box__content--animation {
|
|
36189
36189
|
animation: fadeIn 0.3s ease-in 0s 1; }
|
|
36190
36190
|
.toggle-box.toggle-box--circle .toggle-box__chevron {
|
|
36191
36191
|
background-color: var(--sd-colour-btn-bg-neutral); }
|
|
@@ -36995,7 +36995,8 @@ tags-input,
|
|
|
36995
36995
|
border-radius: var(--b-radius--small);
|
|
36996
36996
|
background-color: var(--sd-item__main-Bg);
|
|
36997
36997
|
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.16), 0 0 1px rgba(0, 0, 0, 0.1);
|
|
36998
|
-
transition: all 0.2s ease-in-out;
|
|
36998
|
+
transition: all 0.2s ease-in-out;
|
|
36999
|
+
flex-shrink: 0; }
|
|
36999
37000
|
.boxed-list__item.boxed-list__item--default::before {
|
|
37000
37001
|
content: "";
|
|
37001
37002
|
width: 4px;
|
|
@@ -44664,7 +44665,7 @@ a.text-link {
|
|
|
44664
44665
|
padding: 0;
|
|
44665
44666
|
overflow: hidden;
|
|
44666
44667
|
transition: all 0.2s ease; }
|
|
44667
|
-
.new-collapse-box__header
|
|
44668
|
+
.new-collapse-box__header .hide-on-open {
|
|
44668
44669
|
display: none; }
|
|
44669
44670
|
|
|
44670
44671
|
.new-collapse-box__content {
|
|
@@ -44681,7 +44682,6 @@ a.text-link {
|
|
|
44681
44682
|
.new-collapse-box.new-collapse-box--open {
|
|
44682
44683
|
grid-template-rows: auto 1fr auto; }
|
|
44683
44684
|
.new-collapse-box.new-collapse-box--open .new-collapse-box__content > .new-collapse-box__content-inner {
|
|
44684
|
-
animation: fadeIn 0.3s ease-in 0s 1;
|
|
44685
44685
|
overflow-y: auto; }
|
|
44686
44686
|
.new-collapse-box.new-collapse-box--open .new-collapse-box__content > .new-collapse-box__content-inner .new-collapse-box.new-collapse-box--open .new-collapse-box__content .new-collapse-box__content-inner {
|
|
44687
44687
|
animation: fadeIn2 0.3s ease-in 0s 1; }
|
|
@@ -146410,6 +146410,7 @@ var SimpleToggleBox = /** @class */ (function (_super) {
|
|
|
146410
146410
|
var _a;
|
|
146411
146411
|
_this = _super.call(this, props) || this;
|
|
146412
146412
|
_this.htmlId = (0, react_id_generator_1.default)('togglebox-');
|
|
146413
|
+
_this.contentRef = React.createRef();
|
|
146413
146414
|
_this.handleKeyDown = function (event) {
|
|
146414
146415
|
if (event.key === "ArrowRight" && !_this.state.isOpen) {
|
|
146415
146416
|
_this.setState({ isOpen: true });
|
|
@@ -146431,11 +146432,26 @@ var SimpleToggleBox = /** @class */ (function (_super) {
|
|
|
146431
146432
|
}
|
|
146432
146433
|
});
|
|
146433
146434
|
};
|
|
146435
|
+
_this.handleAnimationEnd = function () {
|
|
146436
|
+
_this.setState({ isAnimating: false });
|
|
146437
|
+
if (_this.contentRef.current) {
|
|
146438
|
+
_this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
|
|
146439
|
+
}
|
|
146440
|
+
};
|
|
146434
146441
|
_this.state = {
|
|
146435
146442
|
isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
|
|
146443
|
+
isAnimating: false,
|
|
146436
146444
|
};
|
|
146437
146445
|
return _this;
|
|
146438
146446
|
}
|
|
146447
|
+
SimpleToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
|
|
146448
|
+
if (prevState.isOpen !== this.state.isOpen) {
|
|
146449
|
+
this.setState({ isAnimating: true });
|
|
146450
|
+
if (this.contentRef.current) {
|
|
146451
|
+
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
146452
|
+
}
|
|
146453
|
+
}
|
|
146454
|
+
};
|
|
146439
146455
|
SimpleToggleBox.prototype.render = function () {
|
|
146440
146456
|
var _a;
|
|
146441
146457
|
var classes = (0, classnames_1.default)('toggle-box', (_a = {
|
|
@@ -146457,7 +146473,9 @@ var SimpleToggleBox = /** @class */ (function (_super) {
|
|
|
146457
146473
|
React.createElement("div", { className: "toggle-box__line" }),
|
|
146458
146474
|
badge ? badge : null),
|
|
146459
146475
|
React.createElement("div", { className: "toggle-box__content-wraper" },
|
|
146460
|
-
React.createElement("div", { id: this.htmlId, className:
|
|
146476
|
+
React.createElement("div", { id: this.htmlId, className: (0, classnames_1.default)('toggle-box__content', {
|
|
146477
|
+
'toggle-box__content--animation': this.state.isAnimating,
|
|
146478
|
+
}), "aria-hidden": !isOpen, ref: this.contentRef }, children))));
|
|
146461
146479
|
};
|
|
146462
146480
|
return SimpleToggleBox;
|
|
146463
146481
|
}(React.PureComponent));
|
|
@@ -146523,17 +146541,33 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
146523
146541
|
var _a;
|
|
146524
146542
|
_this = _super.call(this, props) || this;
|
|
146525
146543
|
_this.htmlId = (0, react_id_generator_1.default)('togglebox-');
|
|
146544
|
+
_this.contentRef = React.createRef();
|
|
146526
146545
|
_this.toggle = function () {
|
|
146527
146546
|
_this.setState({ isOpen: !_this.state.isOpen }, function () {
|
|
146528
146547
|
var _a, _b;
|
|
146529
146548
|
(_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
|
|
146530
146549
|
});
|
|
146531
146550
|
};
|
|
146551
|
+
_this.handleAnimationEnd = function () {
|
|
146552
|
+
_this.setState({ isAnimating: false });
|
|
146553
|
+
if (_this.contentRef.current) {
|
|
146554
|
+
_this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
|
|
146555
|
+
}
|
|
146556
|
+
};
|
|
146532
146557
|
_this.state = {
|
|
146533
146558
|
isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
|
|
146559
|
+
isAnimating: false,
|
|
146534
146560
|
};
|
|
146535
146561
|
return _this;
|
|
146536
146562
|
}
|
|
146563
|
+
CustomHeaderToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
|
|
146564
|
+
if (prevState.isOpen !== this.state.isOpen) {
|
|
146565
|
+
this.setState({ isAnimating: true });
|
|
146566
|
+
if (this.contentRef.current) {
|
|
146567
|
+
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
146568
|
+
}
|
|
146569
|
+
}
|
|
146570
|
+
};
|
|
146537
146571
|
CustomHeaderToggleBox.prototype.render = function () {
|
|
146538
146572
|
var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
|
|
146539
146573
|
'new-collapse-box--open': this.state.isOpen,
|
|
@@ -146545,7 +146579,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
146545
146579
|
React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
|
|
146546
146580
|
React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.toggleButtonLabel))),
|
|
146547
146581
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
146548
|
-
React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: 'new-collapse-box__content-inner p-2 pt-0-5'
|
|
146582
|
+
React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
146583
|
+
'toggle-box__content--animation': this.state.isAnimating,
|
|
146584
|
+
}) }, this.props.children))));
|
|
146549
146585
|
};
|
|
146550
146586
|
return CustomHeaderToggleBox;
|
|
146551
146587
|
}(React.PureComponent));
|
package/package.json
CHANGED
|
@@ -2,11 +2,15 @@ import * as React from 'react';
|
|
|
2
2
|
import { IPropsCustomHeader } from "../ToggleBox/index";
|
|
3
3
|
interface IState {
|
|
4
4
|
isOpen: boolean;
|
|
5
|
+
isAnimating: boolean;
|
|
5
6
|
}
|
|
6
7
|
export declare class CustomHeaderToggleBox extends React.PureComponent<IPropsCustomHeader, IState> {
|
|
7
8
|
htmlId: string;
|
|
9
|
+
contentRef: React.RefObject<HTMLDivElement>;
|
|
8
10
|
constructor(props: IPropsCustomHeader);
|
|
9
11
|
toggle: () => void;
|
|
12
|
+
componentDidUpdate(_prevProps: IPropsCustomHeader, prevState: IState): void;
|
|
13
|
+
handleAnimationEnd: () => void;
|
|
10
14
|
render(): JSX.Element;
|
|
11
15
|
}
|
|
12
16
|
export {};
|
|
@@ -52,17 +52,33 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
52
52
|
var _a;
|
|
53
53
|
_this = _super.call(this, props) || this;
|
|
54
54
|
_this.htmlId = (0, react_id_generator_1.default)('togglebox-');
|
|
55
|
+
_this.contentRef = React.createRef();
|
|
55
56
|
_this.toggle = function () {
|
|
56
57
|
_this.setState({ isOpen: !_this.state.isOpen }, function () {
|
|
57
58
|
var _a, _b;
|
|
58
59
|
(_b = (_a = _this.props).onToggle) === null || _b === void 0 ? void 0 : _b.call(_a, _this.state.isOpen);
|
|
59
60
|
});
|
|
60
61
|
};
|
|
62
|
+
_this.handleAnimationEnd = function () {
|
|
63
|
+
_this.setState({ isAnimating: false });
|
|
64
|
+
if (_this.contentRef.current) {
|
|
65
|
+
_this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
|
|
66
|
+
}
|
|
67
|
+
};
|
|
61
68
|
_this.state = {
|
|
62
69
|
isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
|
|
70
|
+
isAnimating: false,
|
|
63
71
|
};
|
|
64
72
|
return _this;
|
|
65
73
|
}
|
|
74
|
+
CustomHeaderToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
|
|
75
|
+
if (prevState.isOpen !== this.state.isOpen) {
|
|
76
|
+
this.setState({ isAnimating: true });
|
|
77
|
+
if (this.contentRef.current) {
|
|
78
|
+
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
};
|
|
66
82
|
CustomHeaderToggleBox.prototype.render = function () {
|
|
67
83
|
var classes = (0, classnames_1.default)('sd-shadow--z1 new-collapse-box', {
|
|
68
84
|
'new-collapse-box--open': this.state.isOpen,
|
|
@@ -74,7 +90,9 @@ var CustomHeaderToggleBox = /** @class */ (function (_super) {
|
|
|
74
90
|
React.createElement("button", { className: 'new-collapse-box__divider', onClick: this.toggle, "aria-controls": this.htmlId },
|
|
75
91
|
React.createElement("span", { className: 'label label--translucent new-collapse-box__divider-label' }, this.props.toggleButtonLabel))),
|
|
76
92
|
React.createElement("div", { className: 'new-collapse-box__content' },
|
|
77
|
-
React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: 'new-collapse-box__content-inner p-2 pt-0-5'
|
|
93
|
+
React.createElement("div", { id: this.htmlId, "aria-hidden": !isOpen, className: (0, classnames_1.default)('new-collapse-box__content-inner p-2 pt-0-5', {
|
|
94
|
+
'toggle-box__content--animation': this.state.isAnimating,
|
|
95
|
+
}) }, this.props.children))));
|
|
78
96
|
};
|
|
79
97
|
return CustomHeaderToggleBox;
|
|
80
98
|
}(React.PureComponent));
|
|
@@ -2,6 +2,7 @@ import * as React from 'react';
|
|
|
2
2
|
import { IPropsSimple } from "../ToggleBox/index";
|
|
3
3
|
interface IState {
|
|
4
4
|
isOpen: boolean;
|
|
5
|
+
isAnimating: boolean;
|
|
5
6
|
}
|
|
6
7
|
/**
|
|
7
8
|
* @ngdoc react
|
|
@@ -10,9 +11,12 @@ interface IState {
|
|
|
10
11
|
*/
|
|
11
12
|
export declare class SimpleToggleBox extends React.PureComponent<IPropsSimple, IState> {
|
|
12
13
|
htmlId: string;
|
|
14
|
+
contentRef: React.RefObject<HTMLDivElement>;
|
|
13
15
|
constructor(props: IPropsSimple);
|
|
14
16
|
handleKeyDown: (event: React.KeyboardEvent<HTMLAnchorElement>) => void;
|
|
15
17
|
toggle: () => void;
|
|
18
|
+
componentDidUpdate(_prevProps: IPropsSimple, prevState: IState): void;
|
|
19
|
+
handleAnimationEnd: () => void;
|
|
16
20
|
render(): JSX.Element;
|
|
17
21
|
}
|
|
18
22
|
export {};
|
|
@@ -57,6 +57,7 @@ var SimpleToggleBox = /** @class */ (function (_super) {
|
|
|
57
57
|
var _a;
|
|
58
58
|
_this = _super.call(this, props) || this;
|
|
59
59
|
_this.htmlId = (0, react_id_generator_1.default)('togglebox-');
|
|
60
|
+
_this.contentRef = React.createRef();
|
|
60
61
|
_this.handleKeyDown = function (event) {
|
|
61
62
|
if (event.key === "ArrowRight" && !_this.state.isOpen) {
|
|
62
63
|
_this.setState({ isOpen: true });
|
|
@@ -78,11 +79,26 @@ var SimpleToggleBox = /** @class */ (function (_super) {
|
|
|
78
79
|
}
|
|
79
80
|
});
|
|
80
81
|
};
|
|
82
|
+
_this.handleAnimationEnd = function () {
|
|
83
|
+
_this.setState({ isAnimating: false });
|
|
84
|
+
if (_this.contentRef.current) {
|
|
85
|
+
_this.contentRef.current.removeEventListener('animationend', _this.handleAnimationEnd);
|
|
86
|
+
}
|
|
87
|
+
};
|
|
81
88
|
_this.state = {
|
|
82
89
|
isOpen: (_a = _this.props.initiallyOpen) !== null && _a !== void 0 ? _a : false,
|
|
90
|
+
isAnimating: false,
|
|
83
91
|
};
|
|
84
92
|
return _this;
|
|
85
93
|
}
|
|
94
|
+
SimpleToggleBox.prototype.componentDidUpdate = function (_prevProps, prevState) {
|
|
95
|
+
if (prevState.isOpen !== this.state.isOpen) {
|
|
96
|
+
this.setState({ isAnimating: true });
|
|
97
|
+
if (this.contentRef.current) {
|
|
98
|
+
this.contentRef.current.addEventListener('animationend', this.handleAnimationEnd);
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
};
|
|
86
102
|
SimpleToggleBox.prototype.render = function () {
|
|
87
103
|
var _a;
|
|
88
104
|
var classes = (0, classnames_1.default)('toggle-box', (_a = {
|
|
@@ -104,7 +120,9 @@ var SimpleToggleBox = /** @class */ (function (_super) {
|
|
|
104
120
|
React.createElement("div", { className: "toggle-box__line" }),
|
|
105
121
|
badge ? badge : null),
|
|
106
122
|
React.createElement("div", { className: "toggle-box__content-wraper" },
|
|
107
|
-
React.createElement("div", { id: this.htmlId, className:
|
|
123
|
+
React.createElement("div", { id: this.htmlId, className: (0, classnames_1.default)('toggle-box__content', {
|
|
124
|
+
'toggle-box__content--animation': this.state.isAnimating,
|
|
125
|
+
}), "aria-hidden": !isOpen, ref: this.contentRef }, children))));
|
|
108
126
|
};
|
|
109
127
|
return SimpleToggleBox;
|
|
110
128
|
}(React.PureComponent));
|