@nordicsemiconductor/pc-nrfconnect-shared 161.0.0 → 162.0.0
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/Changelog.md +22 -0
- package/package.json +1 -1
- package/src/Device/DeviceSetup/DeviceSetupView.tsx +1 -1
- package/src/Dropdown/Dropdown.tsx +1 -1
- package/src/ErrorBoundary/ErrorBoundary.tsx +8 -5
- package/src/Group/Group.tsx +175 -0
- package/src/NumberInput/NumberInput.tsx +1 -0
- package/src/StateSelector/state-selector.scss +3 -0
- package/src/index.ts +1 -1
- package/typings/generated/src/ErrorBoundary/ErrorBoundary.d.ts.map +1 -1
- package/typings/generated/src/Group/Group.d.ts +13 -0
- package/typings/generated/src/Group/Group.d.ts.map +1 -0
- package/typings/generated/src/NumberInput/NumberInput.d.ts.map +1 -1
- package/typings/generated/src/index.d.ts +1 -1
- package/typings/generated/src/index.d.ts.map +1 -1
- package/src/SidePanel/Group.tsx +0 -106
- package/src/SidePanel/group.scss +0 -42
- package/typings/generated/src/SidePanel/Group.d.ts +0 -17
- package/typings/generated/src/SidePanel/Group.d.ts.map +0 -1
package/Changelog.md
CHANGED
|
@@ -7,6 +7,28 @@ This project does _not_ adhere to
|
|
|
7
7
|
[Semantic Versioning](https://semver.org/spec/v2.0.0.html) but contrary to it
|
|
8
8
|
every new version is a new major version.
|
|
9
9
|
|
|
10
|
+
## 162.0.0 - 2024-03-05
|
|
11
|
+
|
|
12
|
+
### Changed
|
|
13
|
+
|
|
14
|
+
- Device programming dialog changes to `programming` when programming starts.
|
|
15
|
+
- `Group` now combines `CollapsibleGroup` functionality with `collapsible`
|
|
16
|
+
property. New properties have also been added: `gap`, `headingFullWidth`,
|
|
17
|
+
|
|
18
|
+
### Fixed
|
|
19
|
+
|
|
20
|
+
- Pass `disable` prop to `Dropdown` in `NumberInput`.
|
|
21
|
+
- Weird visual fragments when hovering over non-active `StateSelector` part.
|
|
22
|
+
- `Dropdown elements font size is 12px everywhere in apps and not just the side panel`
|
|
23
|
+
|
|
24
|
+
### Removed
|
|
25
|
+
|
|
26
|
+
- `CollapsibleGroup`. Use `Group` component as a replacement.
|
|
27
|
+
|
|
28
|
+
### Steps to upgrade
|
|
29
|
+
|
|
30
|
+
- Replace all `CollapsibleGroup` with `Group` component.
|
|
31
|
+
|
|
10
32
|
## 161.0.0 - 2024-02-26
|
|
11
33
|
|
|
12
34
|
### Fixed
|
package/package.json
CHANGED
|
@@ -10,7 +10,7 @@ import { getCurrentWindow } from '@electron/remote';
|
|
|
10
10
|
import Button from '../Button/Button';
|
|
11
11
|
import { Device } from '../Device/deviceSlice';
|
|
12
12
|
import FactoryResetButton from '../FactoryReset/FactoryResetButton';
|
|
13
|
-
import {
|
|
13
|
+
import { Group } from '../Group/Group';
|
|
14
14
|
import Spinner from '../Spinner/Spinner';
|
|
15
15
|
import telemetry from '../telemetry/telemetry';
|
|
16
16
|
import { openUrl } from '../utils/open';
|
|
@@ -132,22 +132,25 @@ class ErrorBoundary extends React.Component<
|
|
|
132
132
|
<div className="error-boundary__footer">
|
|
133
133
|
{error !== null && (
|
|
134
134
|
<div className="error-boundary__message">
|
|
135
|
-
<
|
|
135
|
+
<Group
|
|
136
|
+
heading="Show detailed error message"
|
|
137
|
+
collapsible
|
|
138
|
+
>
|
|
136
139
|
<div className="report">
|
|
137
140
|
<h4>{error.message}</h4>
|
|
138
141
|
<pre>{error.stack}</pre>
|
|
139
142
|
</div>
|
|
140
|
-
</
|
|
143
|
+
</Group>
|
|
141
144
|
</div>
|
|
142
145
|
)}
|
|
143
146
|
<hr />
|
|
144
147
|
{systemReport !== null ? (
|
|
145
148
|
<div className="error-boundary__message">
|
|
146
|
-
<
|
|
149
|
+
<Group heading="Show system report" collapsible>
|
|
147
150
|
<div className="report">
|
|
148
151
|
<pre>{systemReport}</pre>
|
|
149
152
|
</div>
|
|
150
|
-
</
|
|
153
|
+
</Group>
|
|
151
154
|
</div>
|
|
152
155
|
) : (
|
|
153
156
|
<div className="error-boundary__message--loading">
|
|
@@ -0,0 +1,175 @@
|
|
|
1
|
+
/*
|
|
2
|
+
* Copyright (c) 2015 Nordic Semiconductor ASA
|
|
3
|
+
*
|
|
4
|
+
* SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
|
|
5
|
+
*/
|
|
6
|
+
|
|
7
|
+
import React, { useRef, useState } from 'react';
|
|
8
|
+
|
|
9
|
+
import classNames from '../utils/classNames';
|
|
10
|
+
|
|
11
|
+
const collapseSection = (element: HTMLDivElement) => {
|
|
12
|
+
const sectionHeight = element.scrollHeight;
|
|
13
|
+
element.style.overflow = 'hidden';
|
|
14
|
+
|
|
15
|
+
element.addEventListener(
|
|
16
|
+
'transitionstart',
|
|
17
|
+
() => {
|
|
18
|
+
element.setAttribute('data-animating', 'true');
|
|
19
|
+
element.style.pointerEvents = 'none';
|
|
20
|
+
},
|
|
21
|
+
{ once: true }
|
|
22
|
+
);
|
|
23
|
+
|
|
24
|
+
// on the next frame (as soon as the previous style change has taken effect),
|
|
25
|
+
// explicitly set the element's height to its current pixel height, so we
|
|
26
|
+
// aren't transitioning out of 'auto'
|
|
27
|
+
requestAnimationFrame(() => {
|
|
28
|
+
element.style.height = `${sectionHeight}px`;
|
|
29
|
+
|
|
30
|
+
// on the next frame (as soon as the previous style change has taken effect),
|
|
31
|
+
// have the element transition to height: 0
|
|
32
|
+
requestAnimationFrame(() => {
|
|
33
|
+
element.style.height = `${0}px`;
|
|
34
|
+
element.addEventListener(
|
|
35
|
+
'transitionend',
|
|
36
|
+
() => {
|
|
37
|
+
element.style.pointerEvents = '';
|
|
38
|
+
element.setAttribute('data-animating', 'false');
|
|
39
|
+
},
|
|
40
|
+
{ once: true }
|
|
41
|
+
);
|
|
42
|
+
});
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
const expandSection = (element: HTMLDivElement) => {
|
|
47
|
+
const sectionHeight = element.scrollHeight;
|
|
48
|
+
|
|
49
|
+
if (sectionHeight === 0) return;
|
|
50
|
+
|
|
51
|
+
element.style.height = `${sectionHeight}px`;
|
|
52
|
+
|
|
53
|
+
element.addEventListener(
|
|
54
|
+
'transitionstart',
|
|
55
|
+
() => {
|
|
56
|
+
element.style.pointerEvents = 'none';
|
|
57
|
+
element.setAttribute('data-animating', 'true');
|
|
58
|
+
},
|
|
59
|
+
{ once: true }
|
|
60
|
+
);
|
|
61
|
+
element.addEventListener(
|
|
62
|
+
'transitionend',
|
|
63
|
+
() => {
|
|
64
|
+
element.style.height = '';
|
|
65
|
+
element.style.pointerEvents = '';
|
|
66
|
+
element.style.overflow = '';
|
|
67
|
+
element.setAttribute('data-animating', 'false');
|
|
68
|
+
},
|
|
69
|
+
{ once: true }
|
|
70
|
+
);
|
|
71
|
+
};
|
|
72
|
+
|
|
73
|
+
export const Group = ({
|
|
74
|
+
className = '',
|
|
75
|
+
heading,
|
|
76
|
+
title,
|
|
77
|
+
children,
|
|
78
|
+
gap = 2,
|
|
79
|
+
headingFullWidth = true,
|
|
80
|
+
collapsible = false,
|
|
81
|
+
defaultCollapsed = !!collapsible,
|
|
82
|
+
onToggled,
|
|
83
|
+
}: {
|
|
84
|
+
className?: string;
|
|
85
|
+
heading: string;
|
|
86
|
+
headingFullWidth?: boolean;
|
|
87
|
+
title?: string;
|
|
88
|
+
children?: React.ReactNode;
|
|
89
|
+
gap?: 0.5 | 1 | 2 | 4 | 8;
|
|
90
|
+
collapsible?: boolean;
|
|
91
|
+
defaultCollapsed?: boolean;
|
|
92
|
+
onToggled?: (isNowExpanded: boolean) => void;
|
|
93
|
+
}) => {
|
|
94
|
+
const [collapsed, setCollapsed] = useState(defaultCollapsed);
|
|
95
|
+
const collapsibleDivRef = useRef<HTMLDivElement | null>(null);
|
|
96
|
+
const initStateSet = useRef(false);
|
|
97
|
+
|
|
98
|
+
return (
|
|
99
|
+
<div className={className}>
|
|
100
|
+
<button
|
|
101
|
+
className={classNames(
|
|
102
|
+
'tw-row tw-preflight tw-flex tw-items-center tw-justify-between tw-text-left',
|
|
103
|
+
headingFullWidth && 'tw-w-full'
|
|
104
|
+
)}
|
|
105
|
+
type="button"
|
|
106
|
+
onClick={() => {
|
|
107
|
+
if (!collapsibleDivRef.current || !initStateSet.current)
|
|
108
|
+
return;
|
|
109
|
+
|
|
110
|
+
if (
|
|
111
|
+
collapsibleDivRef.current.getAttribute(
|
|
112
|
+
'data-animating'
|
|
113
|
+
) === 'true'
|
|
114
|
+
)
|
|
115
|
+
return;
|
|
116
|
+
|
|
117
|
+
if (collapsed) {
|
|
118
|
+
expandSection(collapsibleDivRef.current);
|
|
119
|
+
} else {
|
|
120
|
+
collapseSection(collapsibleDivRef.current);
|
|
121
|
+
}
|
|
122
|
+
|
|
123
|
+
onToggled?.(collapsed);
|
|
124
|
+
setCollapsed(!collapsed);
|
|
125
|
+
}}
|
|
126
|
+
>
|
|
127
|
+
<p
|
|
128
|
+
className="tw-text-[10px] tw-uppercase tw-tracking-[0.5ex]"
|
|
129
|
+
title={title}
|
|
130
|
+
>
|
|
131
|
+
{heading}
|
|
132
|
+
</p>
|
|
133
|
+
{collapsible && (
|
|
134
|
+
<span
|
|
135
|
+
className={classNames(
|
|
136
|
+
'mdi mdi-chevron-down tw-inline tw-text-xl/3 tw-transition-transform',
|
|
137
|
+
!collapsed && 'tw-rotate-180'
|
|
138
|
+
)}
|
|
139
|
+
/>
|
|
140
|
+
)}
|
|
141
|
+
</button>
|
|
142
|
+
<div
|
|
143
|
+
ref={ref => {
|
|
144
|
+
if (!initStateSet.current && ref) {
|
|
145
|
+
if (defaultCollapsed) {
|
|
146
|
+
collapseSection(ref);
|
|
147
|
+
} else {
|
|
148
|
+
expandSection(ref);
|
|
149
|
+
}
|
|
150
|
+
initStateSet.current = true;
|
|
151
|
+
}
|
|
152
|
+
collapsibleDivRef.current = ref;
|
|
153
|
+
}}
|
|
154
|
+
className={classNames(
|
|
155
|
+
'tw-transition-all',
|
|
156
|
+
!initStateSet.current && collapsed && 'tw-h-0',
|
|
157
|
+
!initStateSet.current && !collapsed && 'tw-h-full'
|
|
158
|
+
)}
|
|
159
|
+
>
|
|
160
|
+
<div
|
|
161
|
+
className={classNames(
|
|
162
|
+
'tw-flex tw-flex-col tw-pt-4',
|
|
163
|
+
gap === 0.5 && 'tw-gap-0.5',
|
|
164
|
+
gap === 1 && 'tw-gap-1',
|
|
165
|
+
gap === 2 && 'tw-gap-2',
|
|
166
|
+
gap === 4 && 'tw-gap-4',
|
|
167
|
+
gap === 8 && 'tw-gap-8'
|
|
168
|
+
)}
|
|
169
|
+
>
|
|
170
|
+
{children}
|
|
171
|
+
</div>
|
|
172
|
+
</div>
|
|
173
|
+
</div>
|
|
174
|
+
);
|
|
175
|
+
};
|
package/src/index.ts
CHANGED
|
@@ -44,7 +44,7 @@ export { default as FileLink } from './Link/FileLink';
|
|
|
44
44
|
export { default as Overlay } from './Overlay/Overlay';
|
|
45
45
|
|
|
46
46
|
export { default as SidePanel } from './SidePanel/SidePanel';
|
|
47
|
-
export { Group
|
|
47
|
+
export { Group } from './Group/Group';
|
|
48
48
|
|
|
49
49
|
export { default as InlineInput } from './InlineInput/InlineInput';
|
|
50
50
|
export { default as NumberInlineInput } from './InlineInput/NumberInlineInput';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../src/ErrorBoundary/ErrorBoundary.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAW/C,OAAO,uBAAuB,CAAC;AAM/B,UAAU,KAAK;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAOD,cAAM,aAAc,SAAQ,KAAK,CAAC,SAAS,CACvC,KAAK,EACL;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAC1E;gBACe,KAAK,EAAE,KAAK;IASxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;;IAO5C,iBAAiB,CAAC,KAAK,EAAE,KAAK;IAsB9B,MAAM;
|
|
1
|
+
{"version":3,"file":"ErrorBoundary.d.ts","sourceRoot":"","sources":["../../../../src/ErrorBoundary/ErrorBoundary.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAIzC,OAAO,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AAW/C,OAAO,uBAAuB,CAAC;AAM/B,UAAU,KAAK;IACX,QAAQ,EAAE,SAAS,CAAC;IACpB,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,kBAAkB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,KAAK,IAAI,CAAC;CAClD;AAOD,cAAM,aAAc,SAAQ,KAAK,CAAC,SAAS,CACvC,KAAK,EACL;IAAE,QAAQ,EAAE,OAAO,CAAC;IAAC,KAAK,EAAE,KAAK,GAAG,IAAI,CAAC;IAAC,YAAY,EAAE,MAAM,GAAG,IAAI,CAAA;CAAE,CAC1E;gBACe,KAAK,EAAE,KAAK;IASxB,MAAM,CAAC,wBAAwB,CAAC,KAAK,EAAE,KAAK;;;;IAO5C,iBAAiB,CAAC,KAAK,EAAE,KAAK;IAsB9B,MAAM;CAiGT;AAED,eAAe,aAAa,CAAC"}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
export declare const Group: ({ className, heading, title, children, gap, headingFullWidth, collapsible, defaultCollapsed, onToggled, }: {
|
|
3
|
+
className?: string | undefined;
|
|
4
|
+
heading: string;
|
|
5
|
+
headingFullWidth?: boolean | undefined;
|
|
6
|
+
title?: string | undefined;
|
|
7
|
+
children?: React.ReactNode;
|
|
8
|
+
gap?: 1 | 2 | 4 | 8 | 0.5 | undefined;
|
|
9
|
+
collapsible?: boolean | undefined;
|
|
10
|
+
defaultCollapsed?: boolean | undefined;
|
|
11
|
+
onToggled?: ((isNowExpanded: boolean) => void) | undefined;
|
|
12
|
+
}) => JSX.Element;
|
|
13
|
+
//# sourceMappingURL=Group.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../src/Group/Group.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA2B,MAAM,OAAO,CAAC;AAkEhD,eAAO,MAAM,KAAK;;aAYL,MAAM;;;eAGJ,MAAM,SAAS;;;;iCAIE,OAAO,KAAK,IAAI;iBAmF/C,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAiB,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAsChD,UAAU,YAAY,CAAC,CAAC;IACpB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACjD;;WAuBU,aAAa;WACb,MAAM;sBACK,MAAM,KAAK,IAAI;gCACN,MAAM,KAAK,IAAI;;;WAGnC,MAAM,SAAS;;;;;;AAnB1B,
|
|
1
|
+
{"version":3,"file":"NumberInput.d.ts","sourceRoot":"","sources":["../../../../src/NumberInput/NumberInput.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,OAAiB,EAAE,KAAK,YAAY,EAAE,MAAM,sBAAsB,CAAC;AAEnE,OAAO,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAsChD,UAAU,YAAY,CAAC,CAAC;IACpB,YAAY,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IAC9B,KAAK,EAAE,YAAY,CAAC,CAAC,CAAC,EAAE,CAAC;IACzB,YAAY,EAAE,CAAC,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;CACjD;;WAuBU,aAAa;WACb,MAAM;sBACK,MAAM,KAAK,IAAI;gCACN,MAAM,KAAK,IAAI;;;WAGnC,MAAM,SAAS;;;;;;AAnB1B,wBAuEE"}
|
|
@@ -32,7 +32,7 @@ export { default as ExternalLink } from './Link/ExternalLink';
|
|
|
32
32
|
export { default as FileLink } from './Link/FileLink';
|
|
33
33
|
export { default as Overlay } from './Overlay/Overlay';
|
|
34
34
|
export { default as SidePanel } from './SidePanel/SidePanel';
|
|
35
|
-
export { Group
|
|
35
|
+
export { Group } from './Group/Group';
|
|
36
36
|
export { default as InlineInput } from './InlineInput/InlineInput';
|
|
37
37
|
export { default as NumberInlineInput } from './InlineInput/NumberInlineInput';
|
|
38
38
|
export { default as NumberInput } from './NumberInput/NumberInput';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"AAQA,eAAO,MAAM,kBAAkB;;;;;;;;;CAA6B,CAAC;AAE7D,OAAO,EAAE,OAAO,IAAI,GAAG,EAAE,MAAM,EAAE,KAAK,SAAS,EAAE,MAAM,WAAW,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EACH,OAAO,IAAI,cAAc,EACzB,KAAK,KAAK,IAAI,mBAAmB,GACpC,MAAM,wCAAwC,CAAC;AAChD,OAAO,EACH,MAAM,EACN,aAAa,EACb,kBAAkB,EAClB,UAAU,EACV,WAAW,EACX,YAAY,EACZ,YAAY,GACf,MAAM,iBAAiB,CAAC;AACzB,YAAY,EAAE,iBAAiB,EAAE,MAAM,iBAAiB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,2BAA2B,CAAC;AACvE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,YAAY,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,aAAa,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,+BAA+B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,KAAK,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC7E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,mCAAmC,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,8BAA8B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,IAAI,EAAE,MAAM,mBAAmB,CAAC;AAC9C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AACtD,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AAEvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,uBAAuB,CAAC;AAC7D,OAAO,EAAE,KAAK,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/index.ts"],"names":[],"mappings":"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"}
|
package/src/SidePanel/Group.tsx
DELETED
|
@@ -1,106 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2015 Nordic Semiconductor ASA
|
|
3
|
-
*
|
|
4
|
-
* SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
import React, { useContext, useRef } from 'react';
|
|
8
|
-
import Accordion from 'react-bootstrap/Accordion';
|
|
9
|
-
import AccordionContext from 'react-bootstrap/AccordionContext';
|
|
10
|
-
import { useAccordionToggle } from 'react-bootstrap/AccordionToggle';
|
|
11
|
-
|
|
12
|
-
import PseudoButton from '../PseudoButton/PseudoButton';
|
|
13
|
-
import classNames from '../utils/classNames';
|
|
14
|
-
|
|
15
|
-
import './group.scss';
|
|
16
|
-
|
|
17
|
-
const Heading = ({ label, title }: { label?: string; title?: string }) =>
|
|
18
|
-
label == null ? null : (
|
|
19
|
-
<h2 className="heading" title={title}>
|
|
20
|
-
{label}
|
|
21
|
-
</h2>
|
|
22
|
-
);
|
|
23
|
-
|
|
24
|
-
const ContextAwareToggle = ({
|
|
25
|
-
heading,
|
|
26
|
-
title,
|
|
27
|
-
eventKey,
|
|
28
|
-
onToggled,
|
|
29
|
-
}: {
|
|
30
|
-
heading: string;
|
|
31
|
-
title?: string;
|
|
32
|
-
eventKey: string;
|
|
33
|
-
onToggled?: ((isNowExpanded: boolean) => void) | null;
|
|
34
|
-
}) => {
|
|
35
|
-
const currentEventKey = useContext(AccordionContext);
|
|
36
|
-
const isCurrentEventKey = currentEventKey === eventKey;
|
|
37
|
-
const decoratedOnClick = useAccordionToggle(
|
|
38
|
-
eventKey,
|
|
39
|
-
() => onToggled && onToggled(!isCurrentEventKey)
|
|
40
|
-
);
|
|
41
|
-
|
|
42
|
-
return (
|
|
43
|
-
<PseudoButton
|
|
44
|
-
onClick={decoratedOnClick}
|
|
45
|
-
className={classNames('group-toggle', isCurrentEventKey && 'show')}
|
|
46
|
-
>
|
|
47
|
-
<Heading label={heading} title={title} />
|
|
48
|
-
<span className="mdi mdi-chevron-down" />
|
|
49
|
-
</PseudoButton>
|
|
50
|
-
);
|
|
51
|
-
};
|
|
52
|
-
|
|
53
|
-
export const CollapsibleGroup = ({
|
|
54
|
-
className = '',
|
|
55
|
-
heading,
|
|
56
|
-
title,
|
|
57
|
-
children = null,
|
|
58
|
-
defaultCollapsed = true,
|
|
59
|
-
onToggled,
|
|
60
|
-
}: {
|
|
61
|
-
className?: string;
|
|
62
|
-
heading: string;
|
|
63
|
-
title?: string;
|
|
64
|
-
children?: React.ReactNode;
|
|
65
|
-
defaultCollapsed?: boolean | null;
|
|
66
|
-
onToggled?: ((isNowExpanded: boolean) => void) | null;
|
|
67
|
-
}) => {
|
|
68
|
-
const eventKey = useRef(Math.random().toString());
|
|
69
|
-
|
|
70
|
-
return (
|
|
71
|
-
<div className={`sidepanel-group ${className}`}>
|
|
72
|
-
<Accordion
|
|
73
|
-
defaultActiveKey={defaultCollapsed ? '' : eventKey.current}
|
|
74
|
-
>
|
|
75
|
-
<div className="collapse-container">
|
|
76
|
-
<ContextAwareToggle
|
|
77
|
-
heading={heading}
|
|
78
|
-
title={title}
|
|
79
|
-
eventKey={eventKey.current}
|
|
80
|
-
onToggled={onToggled}
|
|
81
|
-
/>
|
|
82
|
-
<Accordion.Collapse eventKey={eventKey.current}>
|
|
83
|
-
<div className="body">{children}</div>
|
|
84
|
-
</Accordion.Collapse>
|
|
85
|
-
</div>
|
|
86
|
-
</Accordion>
|
|
87
|
-
</div>
|
|
88
|
-
);
|
|
89
|
-
};
|
|
90
|
-
|
|
91
|
-
export const Group = ({
|
|
92
|
-
className = '',
|
|
93
|
-
heading,
|
|
94
|
-
title,
|
|
95
|
-
children,
|
|
96
|
-
}: {
|
|
97
|
-
className?: string;
|
|
98
|
-
heading?: string;
|
|
99
|
-
title?: string;
|
|
100
|
-
children?: React.ReactNode;
|
|
101
|
-
}) => (
|
|
102
|
-
<div className={`sidepanel-group ${className}`}>
|
|
103
|
-
<Heading label={heading} title={title} />
|
|
104
|
-
<div className="body">{children}</div>
|
|
105
|
-
</div>
|
|
106
|
-
);
|
package/src/SidePanel/group.scss
DELETED
|
@@ -1,42 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
* Copyright (c) 2021 Nordic Semiconductor ASA
|
|
3
|
-
*
|
|
4
|
-
* SPDX-License-Identifier: LicenseRef-Nordic-4-Clause
|
|
5
|
-
*/
|
|
6
|
-
|
|
7
|
-
.sidepanel-group {
|
|
8
|
-
.body {
|
|
9
|
-
> * {
|
|
10
|
-
margin-bottom: 8px;
|
|
11
|
-
}
|
|
12
|
-
|
|
13
|
-
> *:last-child {
|
|
14
|
-
margin-bottom: 0px;
|
|
15
|
-
}
|
|
16
|
-
}
|
|
17
|
-
|
|
18
|
-
.heading {
|
|
19
|
-
margin-bottom: 16px;
|
|
20
|
-
|
|
21
|
-
font-size: 10px;
|
|
22
|
-
font-weight: normal;
|
|
23
|
-
letter-spacing: 0.5ex;
|
|
24
|
-
|
|
25
|
-
text-transform: uppercase;
|
|
26
|
-
}
|
|
27
|
-
|
|
28
|
-
.group-toggle {
|
|
29
|
-
display: flex;
|
|
30
|
-
justify-content: space-between;
|
|
31
|
-
|
|
32
|
-
.mdi-chevron-down::before {
|
|
33
|
-
font-size: 20px;
|
|
34
|
-
position: relative;
|
|
35
|
-
top: -9px;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
&.show .mdi-chevron-down::before {
|
|
39
|
-
transform: rotate(180deg);
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import './group.scss';
|
|
3
|
-
export declare const CollapsibleGroup: ({ className, heading, title, children, defaultCollapsed, onToggled, }: {
|
|
4
|
-
className?: string | undefined;
|
|
5
|
-
heading: string;
|
|
6
|
-
title?: string | undefined;
|
|
7
|
-
children?: React.ReactNode;
|
|
8
|
-
defaultCollapsed?: boolean | null | undefined;
|
|
9
|
-
onToggled?: ((isNowExpanded: boolean) => void) | null | undefined;
|
|
10
|
-
}) => JSX.Element;
|
|
11
|
-
export declare const Group: ({ className, heading, title, children, }: {
|
|
12
|
-
className?: string | undefined;
|
|
13
|
-
heading?: string | undefined;
|
|
14
|
-
title?: string | undefined;
|
|
15
|
-
children?: React.ReactNode;
|
|
16
|
-
}) => JSX.Element;
|
|
17
|
-
//# sourceMappingURL=Group.d.ts.map
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"Group.d.ts","sourceRoot":"","sources":["../../../../src/SidePanel/Group.tsx"],"names":[],"mappings":"AAMA,OAAO,KAA6B,MAAM,OAAO,CAAC;AAQlD,OAAO,cAAc,CAAC;AAsCtB,eAAO,MAAM,gBAAgB;;aAShB,MAAM;;eAEJ,MAAM,SAAS;;iCAEG,OAAO,KAAK,IAAI;iBAuBhD,CAAC;AAEF,eAAO,MAAM,KAAK;;;;eASH,MAAM,SAAS;iBAM7B,CAAC"}
|