@e1011/es-kit 1.0.64 → 1.0.66
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/dist/hooks/esm/index.css +72 -39
- package/dist/hooks/index.css +72 -39
- package/dist/lib/cjs/index.css +33 -0
- package/dist/lib/cjs/src/core/ui/components/container/CollapsibleContainer.js +2 -0
- package/dist/lib/cjs/src/core/ui/components/container/CollapsibleContainer.js.map +1 -0
- package/dist/lib/cjs/src/core/ui/components/container/CollapsibleContainer.module.scss.js +2 -0
- package/dist/lib/cjs/src/core/ui/components/container/CollapsibleContainer.module.scss.js.map +1 -0
- package/dist/lib/cjs/src/core/ui/components/container/CollapsibleContainerS.js +2 -0
- package/dist/lib/cjs/src/core/ui/components/container/CollapsibleContainerS.js.map +1 -0
- package/dist/lib/cjs/src/index.js +1 -1
- package/dist/lib/esm/index.css +33 -0
- package/dist/lib/esm/src/core/ui/components/container/CollapsibleContainer.js +2 -0
- package/dist/lib/esm/src/core/ui/components/container/CollapsibleContainer.js.map +1 -0
- package/dist/lib/esm/src/core/ui/components/container/CollapsibleContainer.module.scss.js +2 -0
- package/dist/lib/esm/src/core/ui/components/container/CollapsibleContainer.module.scss.js.map +1 -0
- package/dist/lib/esm/src/core/ui/components/container/CollapsibleContainerS.js +2 -0
- package/dist/lib/esm/src/core/ui/components/container/CollapsibleContainerS.js.map +1 -0
- package/dist/lib/esm/src/index.js +1 -1
- package/dist/lib/src/core/ui/components/container/CollapsibleContainer.js +40 -0
- package/dist/lib/src/core/ui/components/container/CollapsibleContainer.js.map +1 -0
- package/dist/lib/src/core/ui/components/container/CollapsibleContainerS.js +49 -0
- package/dist/lib/src/core/ui/components/container/CollapsibleContainerS.js.map +1 -0
- package/dist/lib/src/core/ui/components/container/index.js +2 -1
- package/dist/lib/src/core/ui/components/container/index.js.map +1 -1
- package/dist/lib/tsconfig.tsbuildinfo +1 -1
- package/dist/types/src/core/ui/components/container/CollapsibleContainer.d.ts +10 -0
- package/dist/types/src/core/ui/components/container/CollapsibleContainer.d.ts.map +1 -0
- package/dist/types/src/core/ui/components/container/CollapsibleContainerS.d.ts +11 -0
- package/dist/types/src/core/ui/components/container/CollapsibleContainerS.d.ts.map +1 -0
- package/dist/types/src/core/ui/components/container/index.d.ts +2 -1
- package/dist/types/src/core/ui/components/container/index.d.ts.map +1 -1
- package/dist/ui/esm/index.css +33 -0
- package/dist/ui/esm/src/core/ui/components/container/CollapsibleContainer.js +2 -0
- package/dist/ui/esm/src/core/ui/components/container/CollapsibleContainer.js.map +1 -0
- package/dist/ui/esm/src/core/ui/components/container/CollapsibleContainer.module.scss.js +2 -0
- package/dist/ui/esm/src/core/ui/components/container/CollapsibleContainer.module.scss.js.map +1 -0
- package/dist/ui/esm/src/core/ui/components/container/CollapsibleContainerS.js +2 -0
- package/dist/ui/esm/src/core/ui/components/container/CollapsibleContainerS.js.map +1 -0
- package/dist/ui/esm/src/core/ui/index.js +1 -1
- package/dist/ui/index.css +33 -0
- package/dist/ui/src/core/ui/components/container/CollapsibleContainer.js +2 -0
- package/dist/ui/src/core/ui/components/container/CollapsibleContainer.js.map +1 -0
- package/dist/ui/src/core/ui/components/container/CollapsibleContainer.module.scss.js +2 -0
- package/dist/ui/src/core/ui/components/container/CollapsibleContainer.module.scss.js.map +1 -0
- package/dist/ui/src/core/ui/components/container/CollapsibleContainerS.js +2 -0
- package/dist/ui/src/core/ui/components/container/CollapsibleContainerS.js.map +1 -0
- package/dist/ui/src/core/ui/index.js +1 -1
- package/dist/utils/esm/index.css +72 -39
- package/dist/utils/index.css +72 -39
- package/package.json +1 -1
package/dist/hooks/esm/index.css
CHANGED
|
@@ -1,45 +1,35 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
background-color: var(--color);
|
|
6
|
-
opacity: var(--opacity);
|
|
1
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm {
|
|
2
|
+
transform-origin: 0% 0%;
|
|
3
|
+
opacity: 0;
|
|
4
|
+
overflow: clip;
|
|
7
5
|
}
|
|
8
|
-
.
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
width: var(--width);
|
|
12
|
-
margin: var(--margin);
|
|
6
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN {
|
|
7
|
+
transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out, max-height 0.2s ease-in-out;
|
|
8
|
+
will-change: opacity, height, max-height;
|
|
13
9
|
}
|
|
14
|
-
.
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
margin: var(--margin);
|
|
10
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_collapsed__q8fs8 {
|
|
11
|
+
height: 0;
|
|
12
|
+
max-height: 0;
|
|
13
|
+
opacity: 0;
|
|
19
14
|
}
|
|
20
|
-
.
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
width:
|
|
37
|
-
|
|
38
|
-
max-width: none;
|
|
39
|
-
max-height: none;
|
|
40
|
-
min-width: 0;
|
|
41
|
-
min-height: 0;
|
|
42
|
-
border-radius: initial;
|
|
15
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_expanded__O6Vh8 {
|
|
16
|
+
height: var(--prop-value);
|
|
17
|
+
max-height: var(--prop-value);
|
|
18
|
+
opacity: 1;
|
|
19
|
+
}
|
|
20
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI- {
|
|
21
|
+
transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, max-width 0.2s ease-in-out;
|
|
22
|
+
will-change: opacity, width, max-width;
|
|
23
|
+
}
|
|
24
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_collapsed__q8fs8 {
|
|
25
|
+
width: 0;
|
|
26
|
+
max-width: 0;
|
|
27
|
+
opacity: 0;
|
|
28
|
+
}
|
|
29
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_expanded__O6Vh8 {
|
|
30
|
+
width: var(--prop-value);
|
|
31
|
+
max-width: var(--prop-value);
|
|
32
|
+
opacity: 1;
|
|
43
33
|
}
|
|
44
34
|
.icon-module_icon-base-parent__nOMvW {
|
|
45
35
|
line-height: 1px !important;
|
|
@@ -70,4 +60,47 @@
|
|
|
70
60
|
fill: var(--icon-content-color);
|
|
71
61
|
width: var(--height);
|
|
72
62
|
height: var(--width);
|
|
63
|
+
}
|
|
64
|
+
.fbox-module_flexible-box__rLJ93 {
|
|
65
|
+
display: flex;
|
|
66
|
+
position: relative;
|
|
67
|
+
flex-direction: row;
|
|
68
|
+
flex: 0;
|
|
69
|
+
flex-grow: 0;
|
|
70
|
+
flex-shrink: 0;
|
|
71
|
+
flex-basis: auto;
|
|
72
|
+
flex-wrap: nowrap;
|
|
73
|
+
gap: 0;
|
|
74
|
+
text-align: left;
|
|
75
|
+
justify-content: flex-start;
|
|
76
|
+
align-items: flex-start;
|
|
77
|
+
align-self: auto;
|
|
78
|
+
margin: 0;
|
|
79
|
+
padding: 0;
|
|
80
|
+
width: auto;
|
|
81
|
+
height: auto;
|
|
82
|
+
max-width: none;
|
|
83
|
+
max-height: none;
|
|
84
|
+
min-width: 0;
|
|
85
|
+
min-height: 0;
|
|
86
|
+
border-radius: initial;
|
|
87
|
+
}
|
|
88
|
+
.divider-module_divider-line__6CesR {
|
|
89
|
+
position: relative;
|
|
90
|
+
display: block;
|
|
91
|
+
transition: opacity, width, height 250ms ease-in-out;
|
|
92
|
+
background-color: var(--color);
|
|
93
|
+
opacity: var(--opacity);
|
|
94
|
+
}
|
|
95
|
+
.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
|
|
96
|
+
height: var(--length);
|
|
97
|
+
left: var(--left);
|
|
98
|
+
width: var(--width);
|
|
99
|
+
margin: var(--margin);
|
|
100
|
+
}
|
|
101
|
+
.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
|
|
102
|
+
width: var(--length);
|
|
103
|
+
left: var(--left);
|
|
104
|
+
height: var(--height);
|
|
105
|
+
margin: var(--margin);
|
|
73
106
|
}
|
package/dist/hooks/index.css
CHANGED
|
@@ -1,45 +1,35 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
background-color: var(--color);
|
|
6
|
-
opacity: var(--opacity);
|
|
1
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm {
|
|
2
|
+
transform-origin: 0% 0%;
|
|
3
|
+
opacity: 0;
|
|
4
|
+
overflow: clip;
|
|
7
5
|
}
|
|
8
|
-
.
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
width: var(--width);
|
|
12
|
-
margin: var(--margin);
|
|
6
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN {
|
|
7
|
+
transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out, max-height 0.2s ease-in-out;
|
|
8
|
+
will-change: opacity, height, max-height;
|
|
13
9
|
}
|
|
14
|
-
.
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
margin: var(--margin);
|
|
10
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_collapsed__q8fs8 {
|
|
11
|
+
height: 0;
|
|
12
|
+
max-height: 0;
|
|
13
|
+
opacity: 0;
|
|
19
14
|
}
|
|
20
|
-
.
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
width:
|
|
37
|
-
|
|
38
|
-
max-width: none;
|
|
39
|
-
max-height: none;
|
|
40
|
-
min-width: 0;
|
|
41
|
-
min-height: 0;
|
|
42
|
-
border-radius: initial;
|
|
15
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_expanded__O6Vh8 {
|
|
16
|
+
height: var(--prop-value);
|
|
17
|
+
max-height: var(--prop-value);
|
|
18
|
+
opacity: 1;
|
|
19
|
+
}
|
|
20
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI- {
|
|
21
|
+
transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, max-width 0.2s ease-in-out;
|
|
22
|
+
will-change: opacity, width, max-width;
|
|
23
|
+
}
|
|
24
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_collapsed__q8fs8 {
|
|
25
|
+
width: 0;
|
|
26
|
+
max-width: 0;
|
|
27
|
+
opacity: 0;
|
|
28
|
+
}
|
|
29
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_expanded__O6Vh8 {
|
|
30
|
+
width: var(--prop-value);
|
|
31
|
+
max-width: var(--prop-value);
|
|
32
|
+
opacity: 1;
|
|
43
33
|
}
|
|
44
34
|
.icon-module_icon-base-parent__nOMvW {
|
|
45
35
|
line-height: 1px !important;
|
|
@@ -70,4 +60,47 @@
|
|
|
70
60
|
fill: var(--icon-content-color);
|
|
71
61
|
width: var(--height);
|
|
72
62
|
height: var(--width);
|
|
63
|
+
}
|
|
64
|
+
.fbox-module_flexible-box__rLJ93 {
|
|
65
|
+
display: flex;
|
|
66
|
+
position: relative;
|
|
67
|
+
flex-direction: row;
|
|
68
|
+
flex: 0;
|
|
69
|
+
flex-grow: 0;
|
|
70
|
+
flex-shrink: 0;
|
|
71
|
+
flex-basis: auto;
|
|
72
|
+
flex-wrap: nowrap;
|
|
73
|
+
gap: 0;
|
|
74
|
+
text-align: left;
|
|
75
|
+
justify-content: flex-start;
|
|
76
|
+
align-items: flex-start;
|
|
77
|
+
align-self: auto;
|
|
78
|
+
margin: 0;
|
|
79
|
+
padding: 0;
|
|
80
|
+
width: auto;
|
|
81
|
+
height: auto;
|
|
82
|
+
max-width: none;
|
|
83
|
+
max-height: none;
|
|
84
|
+
min-width: 0;
|
|
85
|
+
min-height: 0;
|
|
86
|
+
border-radius: initial;
|
|
87
|
+
}
|
|
88
|
+
.divider-module_divider-line__6CesR {
|
|
89
|
+
position: relative;
|
|
90
|
+
display: block;
|
|
91
|
+
transition: opacity, width, height 250ms ease-in-out;
|
|
92
|
+
background-color: var(--color);
|
|
93
|
+
opacity: var(--opacity);
|
|
94
|
+
}
|
|
95
|
+
.divider-module_divider-line__6CesR.divider-module_vertical__qSVWD {
|
|
96
|
+
height: var(--length);
|
|
97
|
+
left: var(--left);
|
|
98
|
+
width: var(--width);
|
|
99
|
+
margin: var(--margin);
|
|
100
|
+
}
|
|
101
|
+
.divider-module_divider-line__6CesR.divider-module_horizontal__Gz-Oj {
|
|
102
|
+
width: var(--length);
|
|
103
|
+
left: var(--left);
|
|
104
|
+
height: var(--height);
|
|
105
|
+
margin: var(--margin);
|
|
73
106
|
}
|
package/dist/lib/cjs/index.css
CHANGED
|
@@ -22,6 +22,39 @@
|
|
|
22
22
|
min-height: 0;
|
|
23
23
|
border-radius: initial;
|
|
24
24
|
}
|
|
25
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm {
|
|
26
|
+
transform-origin: 0% 0%;
|
|
27
|
+
opacity: 0;
|
|
28
|
+
overflow: clip;
|
|
29
|
+
}
|
|
30
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN {
|
|
31
|
+
transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out, max-height 0.2s ease-in-out;
|
|
32
|
+
will-change: opacity, height, max-height;
|
|
33
|
+
}
|
|
34
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_collapsed__q8fs8 {
|
|
35
|
+
height: 0;
|
|
36
|
+
max-height: 0;
|
|
37
|
+
opacity: 0;
|
|
38
|
+
}
|
|
39
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_expanded__O6Vh8 {
|
|
40
|
+
height: var(--prop-value);
|
|
41
|
+
max-height: var(--prop-value);
|
|
42
|
+
opacity: 1;
|
|
43
|
+
}
|
|
44
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI- {
|
|
45
|
+
transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, max-width 0.2s ease-in-out;
|
|
46
|
+
will-change: opacity, width, max-width;
|
|
47
|
+
}
|
|
48
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_collapsed__q8fs8 {
|
|
49
|
+
width: 0;
|
|
50
|
+
max-width: 0;
|
|
51
|
+
opacity: 0;
|
|
52
|
+
}
|
|
53
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_expanded__O6Vh8 {
|
|
54
|
+
width: var(--prop-value);
|
|
55
|
+
max-width: var(--prop-value);
|
|
56
|
+
opacity: 1;
|
|
57
|
+
}
|
|
25
58
|
.divider-module_divider-line__6CesR {
|
|
26
59
|
position: relative;
|
|
27
60
|
display: block;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js");require("../../../../../node_modules/core-js/modules/es.array.concat.js");var l=require("react"),r=require("./CollapsibleContainer.module.scss.js"),a=["collapsed","collapseHandler","children","horizontal","className"],o={width:"scrollWidth",height:"scrollHeight"},t=l.memo((function(t){var n=t.collapsed,i=void 0!==n&&n,s=t.collapseHandler,c=t.children,u=t.horizontal,d=void 0!==u&&u,p=t.className,h=void 0===p?"":p,m=e.objectWithoutProperties(t,a),v=l.useRef(null),f=l.useState(0),b=e.slicedToArray(f,2),j=b[0],x=b[1],g=!d;l.useEffect((function(){null==s||s(i)}),[s,i]),l.useLayoutEffect((function(){if(null!=v&&v.current){var e=g?"height":"width";x(v.current[o[e]])}}),[v,g]);var y=l.useMemo((function(){return e.objectSpread2({"--prop-name":g?"height":"width","--prop-max-name":g?"max-height":"max-width","--prop-value":"".concat(j,"px")},m)}),[g,m,j]),C=l.useMemo((function(){var e=[g?r.vertical:r.horizontal];return i&&j&&null!=j&&e.push(r.collapsed),!i&&j&&null!=j&&e.push(r.expanded),e.join(" ")}),[i,j,g]);return React.createElement("div",{className:"".concat(r["collapsible-container"]," ").concat(C," ").concat(h," "),ref:v,style:y},c)}));t.displayName="CollapsibleContainer",exports.CollapsibleContainer=t;
|
|
2
|
+
//# sourceMappingURL=CollapsibleContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode, useEffect, useLayoutEffect, useMemo, CSSProperties } from 'react'\n\nimport classes from './CollapsibleContainer.module.scss'\n\nconst elementPropNameMap: Record<string, string> = {\n width: 'scrollWidth',\n height: 'scrollHeight',\n}\n\nexport type CollapsibleContainerProps = {\n collapsed?: boolean\n collapseHandler?: (collapsed: boolean) => void\n children?: ReactNode\n className?: string\n horizontal?: boolean\n}\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n collapsed = false, collapseHandler, children, horizontal = false, className = '', ...style\n}: CollapsibleContainerProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const [contentProp, setContentProp] = useState(0)\n\n const vertical = !horizontal\n\n useEffect(() => {\n collapseHandler?.(collapsed)\n }, [collapseHandler, collapsed])\n\n useLayoutEffect(() => {\n if (containerRef?.current) {\n const propName = vertical ? 'height' : 'width'\n\n setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n }\n }, [containerRef, vertical])\n\n const styleProps: CSSProperties = useMemo(() => ({\n '--prop-name': vertical ? 'height' : 'width',\n '--prop-max-name': vertical ? 'max-height' : 'max-width',\n '--prop-value': `${contentProp}px`,\n ...style,\n } as CSSProperties), [vertical, style, contentProp])\n\n const classNames = useMemo(() => {\n const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n classNames.push(classes.collapsed)\n }\n if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n classNames.push(classes.expanded)\n }\n return classNames.join(' ')\n }, [collapsed, contentProp, vertical])\n\n return (\n <div\n className={`${classes['collapsible-container']} ${classNames} ${className} `}\n ref={containerRef}\n style={styleProps}\n >\n {children}\n </div>\n )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","_ref$collapsed","collapsed","collapseHandler","children","_ref$horizontal","horizontal","_ref$className","className","style","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","_useState","useState","_useState2","_slicedToArray","contentProp","setContentProp","vertical","useEffect","useLayoutEffect","current","propName","styleProps","useMemo","_objectSpread","concat","classNames","classes","push","expanded","join","React","createElement","ref","displayName"],"mappings":"oWAIMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAUGC,EAAsDC,EAAAA,MAAK,SAAAC,GAEvC,IAAAC,EAAAD,EAD/BE,UAAAA,OAAY,IAAHD,GAAQA,EAAEE,EAAeH,EAAfG,gBAAiBC,EAAQJ,EAARI,SAAQC,EAAAL,EAAEM,WAAAA,OAAa,IAAHD,GAAQA,EAAAE,EAAAP,EAAEQ,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAKE,EAAKC,EAAAC,wBAAAX,EAAAY,GAEpFC,EAAeC,SAAuB,MAC5CC,EAAsCC,EAAQA,SAAC,GAAEC,EAAAC,EAAAA,cAAAH,EAAA,GAA1CI,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAE5BI,GAAYf,EAElBgB,EAAAA,WAAU,WACRnB,SAAAA,EAAkBD,EACpB,GAAG,CAACC,EAAiBD,IAErBqB,EAAAA,iBAAgB,WACd,GAAIV,SAAAA,EAAcW,QAAS,CACzB,IAAMC,EAAWJ,EAAW,SAAW,QAEvCD,EAAgBP,EAAaW,QAAgB7B,EAAmB8B,IAClE,CACF,GAAG,CAACZ,EAAcQ,IAElB,IAAMK,EAA4BC,EAAAA,SAAQ,WAAA,OAAAC,gBAAA,CACxC,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAc,GAAAQ,OAAKV,EAAW,OAC3BV,EACc,GAAE,CAACY,EAAUZ,EAAOU,IAEjCW,EAAaH,EAAAA,SAAQ,WACzB,IAAMG,EAAa,CAACT,EAAWU,EAAQV,SAAWU,EAAQzB,YAQ1D,OANIJ,GAAaiB,GAAbjB,MAA4BiB,GAC9BW,EAAWE,KAAKD,EAAQ7B,YAErBA,GAAaiB,GAAd,MAA6BA,GAC/BW,EAAWE,KAAKD,EAAQE,UAEnBH,EAAWI,KAAK,IACxB,GAAE,CAAChC,EAAWiB,EAAaE,IAE5B,OACEc,MAAAC,cAAA,MAAA,CACE5B,UAASqB,GAAAA,OAAKE,EAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIrB,EAAa,KAC7E6B,IAAKxB,EACLJ,MAAOiB,GAENtB,EAGP,IAEAN,EAAqBwC,YAAc"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";module.exports={"collapsible-container":"CollapsibleContainer-module_collapsible-container__u0Jmm",vertical:"CollapsibleContainer-module_vertical__w7MVN",collapsed:"CollapsibleContainer-module_collapsed__q8fs8",expanded:"CollapsibleContainer-module_expanded__O6Vh8",horizontal:"CollapsibleContainer-module_horizontal__QJWI-"};
|
|
2
|
+
//# sourceMappingURL=CollapsibleContainer.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleContainer.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("../../../../../_virtual/_rollupPluginBabelHelpers.js"),n=require("styled-components");require("../../../../../node_modules/core-js/modules/es.array.concat.js");var t=require("react");function o(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var a=o(n),l=["collapsed","collapseHandler","children","propName","className","css"],r={width:"scrollWidth",height:"scrollHeight"},i=function(e){return e.propName},c=t.memo(a.default.div.withConfig({displayName:"CollapsibleContainerS__StyledContainer",componentId:"sc-fj3lnl-0"})(["transform-origin:0% 0%;transition:opacity 0.2s ease-in-out,"," 0.2s ease-in-out,max-"," 0.2s ease-in-out;will-change:opacity,",",max-",";overflow:hidden;opacity:0;&.Collapsible__container__collapsed{",":0;max-",":0;opacity:0;}&.Collapsible__container__expanded{",":",";max-",":",";opacity:1;}"],i,i,i,i,i,i,i,(function(e){var n=e.contentProp;return"".concat(n,"px")}),i,(function(e){var n=e.contentProp;return"".concat(n,"px")}))),s=a.default(c).withConfig({displayName:"CollapsibleContainerS___StyledStyledContainer",componentId:"sc-fj3lnl-1"})(["",""],(function(e){return e.$_css})),p=t.memo((function(n){var o=n.collapsed,a=void 0!==o&&o,i=n.collapseHandler,c=n.children,p=n.propName,u=void 0===p?"height":p,d=n.className,_=n.css,f=e.objectWithoutProperties(n,l),m=t.useRef(),y=t.useState(0),h=e.slicedToArray(y,2),C=h[0],v=h[1];t.useEffect((function(){null==i||i(a)}),[i,a]),t.useEffect((function(){null!=m&&m.current&&v(m.current[r[u]])}),[m,u]);var x="";return a&&C&&null!=C&&(x="Collapsible__container__collapsed"),!a&&C&&null!=C&&(x="Collapsible__container__expanded"),React.createElement(s,e.extends({className:"".concat(d," ").concat(x),ref:m,contentProp:C,propName:u},f,{$_css:_}),c)}));p.displayName="ContainerS",exports.ContainerS=p;
|
|
2
|
+
//# sourceMappingURL=CollapsibleContainerS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleContainerS.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainerS.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode, useEffect } from 'react'\nimport styled from 'styled-components'\n\ntype StyledContainerProps = { propName: string; className: string; [key: string]: any }\n\nconst elementPropNameMap: Record<string, string> = {\n width: 'scrollWidth',\n height: 'scrollHeight',\n}\n\nconst propNameFunc = ({ propName }: { propName: StyledContainerProps['propName']}) => propName\n\nconst StyledContainer: FC<StyledContainerProps> = memo(styled.div<StyledContainerProps>`\n transform-origin: 0% 0%;\n transition: opacity 0.2s ease-in-out, ${propNameFunc} 0.2s ease-in-out, max-${propNameFunc} 0.2s ease-in-out;\n will-change: opacity, ${propNameFunc}, max-${propNameFunc};\n overflow: hidden;\n opacity: 0;\n\n &.Collapsible__container__collapsed {\n ${propNameFunc}: 0;\n max-${propNameFunc}: 0;\n opacity: 0;\n }\n\n &.Collapsible__container__expanded {\n ${propNameFunc}: ${({ contentProp }: Partial<StyledContainerProps>) => `${contentProp}px`};\n max-${propNameFunc}: ${({ contentProp }: Partial<StyledContainerProps>) => `${contentProp}px`};\n opacity: 1;\n }\n`)\n\nexport type ContainerProps = {\n collapsed?: boolean\n collapseHandler?: (collapsed: boolean) => void\n children?: ReactNode\n propName?: string\n className?: string\n css?: string\n}\nexport const ContainerS: FC<ContainerProps> = memo(({\n collapsed = false, collapseHandler, children, propName = 'height', className, css, ...props\n}: ContainerProps) => {\n const containerRef = useRef<HTMLDivElement>()\n const [contentProp, setContentProp] = useState(0)\n\n useEffect(() => {\n collapseHandler?.(collapsed)\n }, [collapseHandler, collapsed])\n\n useEffect(() => {\n if (containerRef?.current) {\n setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n }\n }, [containerRef, propName])\n\n let resolvedClassName = ''\n\n if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n resolvedClassName = 'Collapsible__container__collapsed'\n }\n if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n resolvedClassName = 'Collapsible__container__expanded'\n }\n\n return (\n <StyledContainer\n className={`${className} ${resolvedClassName}`}\n ref={containerRef}\n contentProp={contentProp}\n propName={propName}\n css={css}\n {...props}\n >\n {children}\n </StyledContainer>\n )\n})\n\nContainerS.displayName = 'ContainerS'\n"],"names":["elementPropNameMap","width","height","propNameFunc","_ref","propName","StyledContainer","memo","styled","div","withConfig","displayName","componentId","_ref2","contentProp","concat","_ref3","_StyledStyledContainer","p","$_css","ContainerS","_ref4","_ref4$collapsed","collapsed","collapseHandler","children","_ref4$propName","className","css","props","_objectWithoutProperties","objectWithoutProperties","_excluded","containerRef","useRef","_useState","useState","_useState2","_slicedToArray","setContentProp","useEffect","current","resolvedClassName","React","createElement","_extends","ref"],"mappings":"uaAKMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAGJC,EAAe,SAAHC,GAAc,OAAAA,EAARC,QAAsE,EAExFC,EAA4CC,EAAIA,KAACC,UAAOC,IAAGC,WAAA,CAAAC,YAAA,yCAAAC,YAAA,eAAVJ,CAAU,CAAA,8DAAA,yBAAA,yCAAA,QAAA,kEAAA,UAAA,oDAAA,IAAA,QAAA,IAAA,gBAEvBL,EAAsCA,EACtDA,EAAqBA,EAKzCA,EACIA,EAKJA,GAAiB,SAAAU,GAAA,IAAGC,EAAWD,EAAXC,YAAW,MAAAC,GAAAA,OAAyCD,EAAW,KAAA,GAC/EX,GAAiB,SAAAa,GAAA,IAAGF,EAAWE,EAAXF,YAAW,MAAAC,GAAAA,OAAyCD,EAAW,KAAA,KAG3FG,EAAAT,EAAA,QAAAF,GAAAI,WAAA,CAAAC,YAAA,gDAAAC,YAAA,eAAAJ,CAAA,CAAA,GAAA,KAAA,SAAAU,GAAA,OAAAA,EAAAC,KAAA,IAUWC,EAAiCb,EAAAA,MAAK,SAAAc,GAE7B,IAAAC,EAAAD,EADpBE,UAAAA,OAAY,IAAHD,GAAQA,EAAEE,EAAeH,EAAfG,gBAAiBC,EAAQJ,EAARI,SAAQC,EAAAL,EAAEhB,SAAAA,OAAW,IAAHqB,EAAG,SAAQA,EAAEC,EAASN,EAATM,UAAWC,EAAGP,EAAHO,IAAQC,EAAKC,EAAAC,wBAAAV,EAAAW,GAErFC,EAAeC,EAAAA,SACrBC,EAAsCC,EAAQA,SAAC,GAAEC,EAAAC,EAAAA,cAAAH,EAAA,GAA1CrB,EAAWuB,EAAA,GAAEE,EAAcF,EAAA,GAElCG,EAAAA,WAAU,WACRhB,SAAAA,EAAkBD,EACpB,GAAG,CAACC,EAAiBD,IAErBiB,EAAAA,WAAU,WACJP,SAAAA,EAAcQ,SAChBF,EAAgBN,EAAaQ,QAAgBzC,EAAmBK,IAEpE,GAAG,CAAC4B,EAAc5B,IAElB,IAAIqC,EAAoB,GASxB,OAPInB,GAAaT,GAAbS,MAA4BT,IAC9B4B,EAAoB,sCAEjBnB,GAAaT,GAAd,MAA6BA,IAC/B4B,EAAoB,oCAIpBC,MAAAC,cAAA3B,EAAA4B,UAAA,CACElB,UAAS,GAAAZ,OAAKY,OAASZ,OAAI2B,GAC3BI,IAAKb,EACLnB,YAAaA,EACbT,SAAUA,GAENwB,EAAK,CAAAV,MADJS,IAGJH,EAGP,IAEAL,EAAWT,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./core/hooks/useApi.js"),r=require("./core/hooks/useToggle.js"),t=require("./core/hooks/useTranslations.js"),o=require("./core/hooks/useOutsideClick.js"),s=require("./core/hooks/useResize.js"),i=require("./core/utils/helpers/birthnumber.validator.js"),a=require("./core/utils/helpers/birthnumberCZSKvalidator.js"),n=require("./core/utils/helpers/fileValidator.js"),l=require("./core/utils/helpers/date.js"),p=require("./core/utils/helpers/deviceInfo.js"),c=require("./core/utils/helpers/emailMatcher.js"),u=require("./core/utils/helpers/file.js"),x=require("./core/utils/helpers/objectOperations.js"),m=require("./core/utils/helpers/other.js"),d=require("./core/utils/helpers/textValueOperations.js"),
|
|
1
|
+
"use strict";Object.defineProperty(exports,"__esModule",{value:!0});var e=require("./core/hooks/useApi.js"),r=require("./core/hooks/useToggle.js"),t=require("./core/hooks/useTranslations.js"),o=require("./core/hooks/useOutsideClick.js"),s=require("./core/hooks/useResize.js"),i=require("./core/utils/helpers/birthnumber.validator.js"),a=require("./core/utils/helpers/birthnumberCZSKvalidator.js"),n=require("./core/utils/helpers/fileValidator.js"),l=require("./core/utils/helpers/date.js"),p=require("./core/utils/helpers/deviceInfo.js"),c=require("./core/utils/helpers/emailMatcher.js"),u=require("./core/utils/helpers/file.js"),x=require("./core/utils/helpers/objectOperations.js"),m=require("./core/utils/helpers/other.js"),d=require("./core/utils/helpers/textValueOperations.js"),C=require("./core/utils/helpers/valueOperations.js"),T=require("./core/utils/helpers/cancelableDelayedFunction.js"),b=require("./core/utils/keyExtractor.js"),v=require("./core/utils/date.js"),h=require("./core/utils/webComponents/webComponent.utils.js"),j=require("./core/ui/utils/style.js"),F=require("./core/ui/components/container/FBox.js"),g=require("./core/ui/components/container/Flex.js"),S=require("./core/ui/components/container/Placeholder.js"),f=require("./core/ui/components/container/CollapsibleContainerS.js"),q=require("./core/ui/components/container/CollapsibleContainer.js"),I=require("./core/ui/components/container/ResizableContainer.js"),D=require("./core/ui/components/field/Field.js"),O=require("./core/ui/components/dividers/DividerLine.js"),y=require("./core/ui/components/icon/IconBase.js"),z=require("./core/ui/components/icon/Icon.js"),V=require("./core/ui/components/icon/IconWC.js"),R=require("./core/constants/ui.constants.js");exports.useApi=e.useApi,exports.useToggle=r.useToggle,exports.createSafeT=t.createSafeT,exports.setUseTranslation=t.setUseTranslation,exports.useTranslations=t.useTranslations,exports.useOutsideClick=o.useOutsideClick,exports.useResize=s.useResize,exports.isBirthNumberValid=i.isBirthNumberValid,exports.getMatch=a.getMatch,exports.isValidFormat=a.isValidFormat,exports.isValidModulo11=a.isValidModulo11,exports.parse=a.parse,exports.regex=a.regex,exports.parseCSVdata=n.parseCSVdata,exports.validateCSVFile=n.validateCSVFile,exports.validateCSVlines=n.validateCSVlines,exports.validateJSONFile=n.validateJSONFile,exports.validateLineCellTrimmed=n.validateLineCellTrimmed,exports.validateLineNumColumns=n.validateLineNumColumns,exports.validateSDFFile=n.validateSDFFile,exports.DATE_FORMAT=l.DATE_FORMAT,exports.formatDateToTimestamp=l.formatDateToTimestamp,exports.getDate=l.getDate,exports.getDeviceId=p.getDeviceId,exports.emailMatch=c.emailMatch,exports.emailMatcher=c.emailMatcher,exports.regexBuilder=c.regexBuilder,exports.cleanCsvLines=u.cleanCsvLines,exports.formatFilePath=u.formatFilePath,exports.arrayToObjectTree=x.arrayToObjectTree,exports.chunkArray=x.chunkArray,exports.duplicatesInArray=x.duplicatesInArray,exports.formatJsonString=x.formatJsonString,exports.formatObj=x.formatObj,exports.formatObj2=x.formatObj2,exports.debounce=m.debounce,exports.delay=m.delay,exports.memoize=m.memoize,exports.memoizeComplex=m.memoizeComplex,exports.memoizer=m.memoizer,exports.nestedTernary=m.nestedTernary,exports.escapeRegExp=d.escapeRegExp,exports.fileNameExt=d.fileNameExt,exports.findStringInText=d.findStringInText,exports.normalizeString=d.normalizeString,exports.removeWhitespaces=d.removeWhitespaces,exports.sanitizeId=d.sanitizeId,exports.sanitizePathId=d.sanitizePathId,exports.toLowerCase=d.toLowerCase,exports.toUpperCase=d.toUpperCase,exports.truncateText=d.truncateText,Object.defineProperty(exports,"Operation",{enumerable:!0,get:function(){return C.Operation}}),exports.decrementValue=C.decrementValue,exports.incerementValue=C.incerementValue,exports.numberDefined=C.numberDefined,exports.numberOperation=C.numberOperation,exports.restrictNumberInLimits=C.restrictNumberInLimits,exports.setValue=C.setValue,exports.cancelableSetInterval=T.cancelableSetInterval,exports.cancelableSetTimeout=T.cancelableSetTimeout,exports.keyExtractor=b.keyExtractor,exports.keyExtractorFunction=b.keyExtractorFunction,exports.dateRangeFormat=v.dateRangeFormat,exports.getDateTime=v.getDateTime,exports.getTimeFromNow=v.getTimeFromNow,exports.getTimeFromNowOriginal=v.getTimeFromNowOriginal,exports.getTimeTo=v.getTimeTo,exports.ced=h.ced,exports.createResolveAttribute=h.createResolveAttribute,exports.customElementDefine=h.customElementDefine,exports.resolveAttributes=h.resolveAttributes,exports.calculateColors=j.calculateColors,exports.calculatePercColor=j.calculatePercColor,exports.convertHex=j.convertHex,exports.convertRGB=j.convertRGB,Object.defineProperty(exports,"defaultFontSize",{enumerable:!0,get:function(){return j.defaultFontSize}}),exports.pxToRem=j.pxToRem,exports.resolveStyleValue=j.resolveStyleValue,exports.setDefaultFontSize=j.setDefaultFontSize,exports.toHex=j.toHex,exports.FBox=F.FBox,exports.Flex=g.Flex,exports.FlexTight=g.FlexTight,exports.FlexTightStyled=g.FlexTightStyled,exports.FlexWrapper=g.FlexWrapper,exports.Placeholder=S.Placeholder,exports.ContainerS=f.ContainerS,exports.CollapsibleContainer=q.CollapsibleContainer,exports.ResizableContainer=I.ResizableContainer,exports.Field=D.Field,exports.FieldWrapper=D.FieldWrapper,exports.Select=D.Select,exports.setIconColor=D.setIconColor,exports.setIconComponent=D.setIconComponent,exports.DividerHorizontal=O.DividerHorizontal,exports.DividerLine=O.DividerLine,exports.DividerVertical=O.DividerVertical,exports.IconBase=y.IconBase,exports.Icon=z.Icon,exports.IconBaseWC=V.IconBaseWC,Object.defineProperty(exports,"EventName",{enumerable:!0,get:function(){return R.EventName}});
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
package/dist/lib/esm/index.css
CHANGED
|
@@ -22,6 +22,39 @@
|
|
|
22
22
|
min-height: 0;
|
|
23
23
|
border-radius: initial;
|
|
24
24
|
}
|
|
25
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm {
|
|
26
|
+
transform-origin: 0% 0%;
|
|
27
|
+
opacity: 0;
|
|
28
|
+
overflow: clip;
|
|
29
|
+
}
|
|
30
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN {
|
|
31
|
+
transition: opacity 0.2s ease-in-out, height 0.2s ease-in-out, max-height 0.2s ease-in-out;
|
|
32
|
+
will-change: opacity, height, max-height;
|
|
33
|
+
}
|
|
34
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_collapsed__q8fs8 {
|
|
35
|
+
height: 0;
|
|
36
|
+
max-height: 0;
|
|
37
|
+
opacity: 0;
|
|
38
|
+
}
|
|
39
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_vertical__w7MVN.CollapsibleContainer-module_expanded__O6Vh8 {
|
|
40
|
+
height: var(--prop-value);
|
|
41
|
+
max-height: var(--prop-value);
|
|
42
|
+
opacity: 1;
|
|
43
|
+
}
|
|
44
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI- {
|
|
45
|
+
transition: opacity 0.2s ease-in-out, width 0.2s ease-in-out, max-width 0.2s ease-in-out;
|
|
46
|
+
will-change: opacity, width, max-width;
|
|
47
|
+
}
|
|
48
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_collapsed__q8fs8 {
|
|
49
|
+
width: 0;
|
|
50
|
+
max-width: 0;
|
|
51
|
+
opacity: 0;
|
|
52
|
+
}
|
|
53
|
+
.CollapsibleContainer-module_collapsible-container__u0Jmm.CollapsibleContainer-module_horizontal__QJWI-.CollapsibleContainer-module_expanded__O6Vh8 {
|
|
54
|
+
width: var(--prop-value);
|
|
55
|
+
max-width: var(--prop-value);
|
|
56
|
+
opacity: 1;
|
|
57
|
+
}
|
|
25
58
|
.divider-module_divider-line__6CesR {
|
|
26
59
|
position: relative;
|
|
27
60
|
display: block;
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{objectWithoutProperties as e,slicedToArray as l,objectSpread2 as o}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import"../../../../../node_modules/core-js/modules/es.array.concat.js";import{memo as a,useRef as r,useState as t,useEffect as n,useLayoutEffect as i,useMemo as c}from"react";import s from"./CollapsibleContainer.module.scss.js";var p=["collapsed","collapseHandler","children","horizontal","className"],d={width:"scrollWidth",height:"scrollHeight"},u=a((function(a){var u=a.collapsed,h=void 0!==u&&u,m=a.collapseHandler,v=a.children,f=a.horizontal,j=void 0!==f&&f,b=a.className,g=void 0===b?"":b,x=e(a,p),w=r(null),y=t(0),C=l(y,2),H=C[0],N=C[1],z=!j;n((function(){null==m||m(h)}),[m,h]),i((function(){if(null!=w&&w.current){var e=z?"height":"width";N(w.current[d[e]])}}),[w,z]);var _=c((function(){return o({"--prop-name":z?"height":"width","--prop-max-name":z?"max-height":"max-width","--prop-value":"".concat(H,"px")},x)}),[z,x,H]),P=c((function(){var e=[z?s.vertical:s.horizontal];return h&&H&&null!=H&&e.push(s.collapsed),!h&&H&&null!=H&&e.push(s.expanded),e.join(" ")}),[h,H,z]);return React.createElement("div",{className:"".concat(s["collapsible-container"]," ").concat(P," ").concat(g," "),ref:w,style:_},v)}));u.displayName="CollapsibleContainer";export{u as CollapsibleContainer};
|
|
2
|
+
//# sourceMappingURL=CollapsibleContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleContainer.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode, useEffect, useLayoutEffect, useMemo, CSSProperties } from 'react'\n\nimport classes from './CollapsibleContainer.module.scss'\n\nconst elementPropNameMap: Record<string, string> = {\n width: 'scrollWidth',\n height: 'scrollHeight',\n}\n\nexport type CollapsibleContainerProps = {\n collapsed?: boolean\n collapseHandler?: (collapsed: boolean) => void\n children?: ReactNode\n className?: string\n horizontal?: boolean\n}\nexport const CollapsibleContainer: FC<CollapsibleContainerProps> = memo(({\n collapsed = false, collapseHandler, children, horizontal = false, className = '', ...style\n}: CollapsibleContainerProps) => {\n const containerRef = useRef<HTMLDivElement>(null)\n const [contentProp, setContentProp] = useState(0)\n\n const vertical = !horizontal\n\n useEffect(() => {\n collapseHandler?.(collapsed)\n }, [collapseHandler, collapsed])\n\n useLayoutEffect(() => {\n if (containerRef?.current) {\n const propName = vertical ? 'height' : 'width'\n\n setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n }\n }, [containerRef, vertical])\n\n const styleProps: CSSProperties = useMemo(() => ({\n '--prop-name': vertical ? 'height' : 'width',\n '--prop-max-name': vertical ? 'max-height' : 'max-width',\n '--prop-value': `${contentProp}px`,\n ...style,\n } as CSSProperties), [vertical, style, contentProp])\n\n const classNames = useMemo(() => {\n const classNames = [vertical ? classes.vertical : classes.horizontal]\n\n if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n classNames.push(classes.collapsed)\n }\n if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n classNames.push(classes.expanded)\n }\n return classNames.join(' ')\n }, [collapsed, contentProp, vertical])\n\n return (\n <div\n className={`${classes['collapsible-container']} ${classNames} ${className} `}\n ref={containerRef}\n style={styleProps}\n >\n {children}\n </div>\n )\n})\n\nCollapsibleContainer.displayName = 'CollapsibleContainer'\n"],"names":["elementPropNameMap","width","height","CollapsibleContainer","memo","_ref","_ref$collapsed","collapsed","collapseHandler","children","_ref$horizontal","horizontal","_ref$className","className","style","_objectWithoutProperties","_excluded","containerRef","useRef","_useState","useState","_useState2","_slicedToArray","contentProp","setContentProp","vertical","useEffect","useLayoutEffect","current","propName","styleProps","useMemo","_objectSpread","concat","classNames","classes","push","expanded","join","React","createElement","ref","displayName"],"mappings":"mbAIMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAUGC,EAAsDC,GAAK,SAAAC,GAEvC,IAAAC,EAAAD,EAD/BE,UAAAA,OAAY,IAAHD,GAAQA,EAAEE,EAAeH,EAAfG,gBAAiBC,EAAQJ,EAARI,SAAQC,EAAAL,EAAEM,WAAAA,OAAa,IAAHD,GAAQA,EAAAE,EAAAP,EAAEQ,UAAAA,OAAY,IAAHD,EAAG,GAAEA,EAAKE,EAAKC,EAAAV,EAAAW,GAEpFC,EAAeC,EAAuB,MAC5CC,EAAsCC,EAAS,GAAEC,EAAAC,EAAAH,EAAA,GAA1CI,EAAWF,EAAA,GAAEG,EAAcH,EAAA,GAE5BI,GAAYd,EAElBe,GAAU,WACRlB,SAAAA,EAAkBD,EACpB,GAAG,CAACC,EAAiBD,IAErBoB,GAAgB,WACd,GAAIV,SAAAA,EAAcW,QAAS,CACzB,IAAMC,EAAWJ,EAAW,SAAW,QAEvCD,EAAgBP,EAAaW,QAAgB5B,EAAmB6B,IAClE,CACF,GAAG,CAACZ,EAAcQ,IAElB,IAAMK,EAA4BC,GAAQ,WAAA,OAAAC,EAAA,CACxC,cAAeP,EAAW,SAAW,QACrC,kBAAmBA,EAAW,aAAe,YAC7C,eAAc,GAAAQ,OAAKV,EAAW,OAC3BT,EACc,GAAE,CAACW,EAAUX,EAAOS,IAEjCW,EAAaH,GAAQ,WACzB,IAAMG,EAAa,CAACT,EAAWU,EAAQV,SAAWU,EAAQxB,YAQ1D,OANIJ,GAAagB,GAAbhB,MAA4BgB,GAC9BW,EAAWE,KAAKD,EAAQ5B,YAErBA,GAAagB,GAAd,MAA6BA,GAC/BW,EAAWE,KAAKD,EAAQE,UAEnBH,EAAWI,KAAK,IACxB,GAAE,CAAC/B,EAAWgB,EAAaE,IAE5B,OACEc,MAAAC,cAAA,MAAA,CACE3B,UAASoB,GAAAA,OAAKE,EAAQ,yBAAwBF,KAAAA,OAAIC,EAAU,KAAAD,OAAIpB,EAAa,KAC7E4B,IAAKxB,EACLH,MAAOgB,GAENrB,EAGP,IAEAN,EAAqBuC,YAAc"}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
var l={"collapsible-container":"CollapsibleContainer-module_collapsible-container__u0Jmm",vertical:"CollapsibleContainer-module_vertical__w7MVN",collapsed:"CollapsibleContainer-module_collapsed__q8fs8",expanded:"CollapsibleContainer-module_expanded__O6Vh8",horizontal:"CollapsibleContainer-module_horizontal__QJWI-"};export{l as default};
|
|
2
|
+
//# sourceMappingURL=CollapsibleContainer.module.scss.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleContainer.module.scss.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
|
|
@@ -0,0 +1,2 @@
|
|
|
1
|
+
import{objectWithoutProperties as e,slicedToArray as o,extends as n}from"../../../../../_virtual/_rollupPluginBabelHelpers.js";import a from"styled-components";import"../../../../../node_modules/core-js/modules/es.array.concat.js";import{memo as t,useRef as l,useState as r,useEffect as i}from"react";var c=["collapsed","collapseHandler","children","propName","className","css"],s={width:"scrollWidth",height:"scrollHeight"},p=function(e){return e.propName},d=t(a.div.withConfig({displayName:"CollapsibleContainerS__StyledContainer",componentId:"sc-fj3lnl-0"})(["transform-origin:0% 0%;transition:opacity 0.2s ease-in-out,"," 0.2s ease-in-out,max-"," 0.2s ease-in-out;will-change:opacity,",",max-",";overflow:hidden;opacity:0;&.Collapsible__container__collapsed{",":0;max-",":0;opacity:0;}&.Collapsible__container__expanded{",":",";max-",":",";opacity:1;}"],p,p,p,p,p,p,p,(function(e){var o=e.contentProp;return"".concat(o,"px")}),p,(function(e){var o=e.contentProp;return"".concat(o,"px")}))),m=a(d).withConfig({displayName:"CollapsibleContainerS___StyledStyledContainer",componentId:"sc-fj3lnl-1"})(["",""],(function(e){return e.$_css})),u=t((function(a){var t=a.collapsed,p=void 0!==t&&t,d=a.collapseHandler,u=a.children,_=a.propName,f=void 0===_?"height":_,h=a.className,y=a.css,C=e(a,c),v=l(),x=r(0),N=o(x,2),b=N[0],g=N[1];i((function(){null==d||d(p)}),[d,p]),i((function(){null!=v&&v.current&&g(v.current[s[f]])}),[v,f]);var j="";return p&&b&&null!=b&&(j="Collapsible__container__collapsed"),!p&&b&&null!=b&&(j="Collapsible__container__expanded"),React.createElement(m,n({className:"".concat(h," ").concat(j),ref:v,contentProp:b,propName:f},C,{$_css:y}),u)}));u.displayName="ContainerS";export{u as ContainerS};
|
|
2
|
+
//# sourceMappingURL=CollapsibleContainerS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleContainerS.js","sources":["../../../../../../../../src/core/ui/components/container/CollapsibleContainerS.tsx"],"sourcesContent":["import { FC, useRef, useState, memo, ReactNode, useEffect } from 'react'\nimport styled from 'styled-components'\n\ntype StyledContainerProps = { propName: string; className: string; [key: string]: any }\n\nconst elementPropNameMap: Record<string, string> = {\n width: 'scrollWidth',\n height: 'scrollHeight',\n}\n\nconst propNameFunc = ({ propName }: { propName: StyledContainerProps['propName']}) => propName\n\nconst StyledContainer: FC<StyledContainerProps> = memo(styled.div<StyledContainerProps>`\n transform-origin: 0% 0%;\n transition: opacity 0.2s ease-in-out, ${propNameFunc} 0.2s ease-in-out, max-${propNameFunc} 0.2s ease-in-out;\n will-change: opacity, ${propNameFunc}, max-${propNameFunc};\n overflow: hidden;\n opacity: 0;\n\n &.Collapsible__container__collapsed {\n ${propNameFunc}: 0;\n max-${propNameFunc}: 0;\n opacity: 0;\n }\n\n &.Collapsible__container__expanded {\n ${propNameFunc}: ${({ contentProp }: Partial<StyledContainerProps>) => `${contentProp}px`};\n max-${propNameFunc}: ${({ contentProp }: Partial<StyledContainerProps>) => `${contentProp}px`};\n opacity: 1;\n }\n`)\n\nexport type ContainerProps = {\n collapsed?: boolean\n collapseHandler?: (collapsed: boolean) => void\n children?: ReactNode\n propName?: string\n className?: string\n css?: string\n}\nexport const ContainerS: FC<ContainerProps> = memo(({\n collapsed = false, collapseHandler, children, propName = 'height', className, css, ...props\n}: ContainerProps) => {\n const containerRef = useRef<HTMLDivElement>()\n const [contentProp, setContentProp] = useState(0)\n\n useEffect(() => {\n collapseHandler?.(collapsed)\n }, [collapseHandler, collapsed])\n\n useEffect(() => {\n if (containerRef?.current) {\n setContentProp((containerRef.current as any)[elementPropNameMap[propName]])\n }\n }, [containerRef, propName])\n\n let resolvedClassName = ''\n\n if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n resolvedClassName = 'Collapsible__container__collapsed'\n }\n if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {\n resolvedClassName = 'Collapsible__container__expanded'\n }\n\n return (\n <StyledContainer\n className={`${className} ${resolvedClassName}`}\n ref={containerRef}\n contentProp={contentProp}\n propName={propName}\n css={css}\n {...props}\n >\n {children}\n </StyledContainer>\n )\n})\n\nContainerS.displayName = 'ContainerS'\n"],"names":["elementPropNameMap","width","height","propNameFunc","_ref","propName","StyledContainer","memo","styled","div","withConfig","displayName","componentId","_ref2","contentProp","concat","_ref3","_StyledStyledContainer","p","$_css","ContainerS","_ref4","_ref4$collapsed","collapsed","collapseHandler","children","_ref4$propName","className","css","props","_objectWithoutProperties","_excluded","containerRef","useRef","_useState","useState","_useState2","_slicedToArray","setContentProp","useEffect","current","resolvedClassName","React","createElement","_extends","ref"],"mappings":"2XAKMA,EAA6C,CACjDC,MAAO,cACPC,OAAQ,gBAGJC,EAAe,SAAHC,GAAc,OAAAA,EAARC,QAAsE,EAExFC,EAA4CC,EAAKC,EAAOC,IAAGC,WAAA,CAAAC,YAAA,yCAAAC,YAAA,eAAVJ,CAAU,CAAA,8DAAA,yBAAA,yCAAA,QAAA,kEAAA,UAAA,oDAAA,IAAA,QAAA,IAAA,gBAEvBL,EAAsCA,EACtDA,EAAqBA,EAKzCA,EACIA,EAKJA,GAAiB,SAAAU,GAAA,IAAGC,EAAWD,EAAXC,YAAW,MAAAC,GAAAA,OAAyCD,EAAW,KAAA,GAC/EX,GAAiB,SAAAa,GAAA,IAAGF,EAAWE,EAAXF,YAAW,MAAAC,GAAAA,OAAyCD,EAAW,KAAA,KAG3FG,EAAAT,EAAAF,GAAAI,WAAA,CAAAC,YAAA,gDAAAC,YAAA,eAAAJ,CAAA,CAAA,GAAA,KAAA,SAAAU,GAAA,OAAAA,EAAAC,KAAA,IAUWC,EAAiCb,GAAK,SAAAc,GAE7B,IAAAC,EAAAD,EADpBE,UAAAA,OAAY,IAAHD,GAAQA,EAAEE,EAAeH,EAAfG,gBAAiBC,EAAQJ,EAARI,SAAQC,EAAAL,EAAEhB,SAAAA,OAAW,IAAHqB,EAAG,SAAQA,EAAEC,EAASN,EAATM,UAAWC,EAAGP,EAAHO,IAAQC,EAAKC,EAAAT,EAAAU,GAErFC,EAAeC,IACrBC,EAAsCC,EAAS,GAAEC,EAAAC,EAAAH,EAAA,GAA1CpB,EAAWsB,EAAA,GAAEE,EAAcF,EAAA,GAElCG,GAAU,WACRf,SAAAA,EAAkBD,EACpB,GAAG,CAACC,EAAiBD,IAErBgB,GAAU,WACJP,SAAAA,EAAcQ,SAChBF,EAAgBN,EAAaQ,QAAgBxC,EAAmBK,IAEpE,GAAG,CAAC2B,EAAc3B,IAElB,IAAIoC,EAAoB,GASxB,OAPIlB,GAAaT,GAAbS,MAA4BT,IAC9B2B,EAAoB,sCAEjBlB,GAAaT,GAAd,MAA6BA,IAC/B2B,EAAoB,oCAIpBC,MAAAC,cAAA1B,EAAA2B,EAAA,CACEjB,UAAS,GAAAZ,OAAKY,OAASZ,OAAI0B,GAC3BI,IAAKb,EACLlB,YAAaA,EACbT,SAAUA,GAENwB,EAAK,CAAAV,MADJS,IAGJH,EAGP,IAEAL,EAAWT,YAAc"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export{useApi}from"./core/hooks/useApi.js";export{useToggle}from"./core/hooks/useToggle.js";export{createSafeT,setUseTranslation,useTranslations}from"./core/hooks/useTranslations.js";export{useOutsideClick}from"./core/hooks/useOutsideClick.js";export{useResize}from"./core/hooks/useResize.js";export{isBirthNumberValid}from"./core/utils/helpers/birthnumber.validator.js";export{getMatch,isValidFormat,isValidModulo11,parse,regex}from"./core/utils/helpers/birthnumberCZSKvalidator.js";export{parseCSVdata,validateCSVFile,validateCSVlines,validateJSONFile,validateLineCellTrimmed,validateLineNumColumns,validateSDFFile}from"./core/utils/helpers/fileValidator.js";export{DATE_FORMAT,formatDateToTimestamp,getDate}from"./core/utils/helpers/date.js";export{getDeviceId}from"./core/utils/helpers/deviceInfo.js";export{emailMatch,emailMatcher,regexBuilder}from"./core/utils/helpers/emailMatcher.js";export{cleanCsvLines,formatFilePath}from"./core/utils/helpers/file.js";export{arrayToObjectTree,chunkArray,duplicatesInArray,formatJsonString,formatObj,formatObj2}from"./core/utils/helpers/objectOperations.js";export{debounce,delay,memoize,memoizeComplex,memoizer,nestedTernary}from"./core/utils/helpers/other.js";export{escapeRegExp,fileNameExt,findStringInText,normalizeString,removeWhitespaces,sanitizeId,sanitizePathId,toLowerCase,toUpperCase,truncateText}from"./core/utils/helpers/textValueOperations.js";export{Operation,decrementValue,incerementValue,numberDefined,numberOperation,restrictNumberInLimits,setValue}from"./core/utils/helpers/valueOperations.js";export{cancelableSetInterval,cancelableSetTimeout}from"./core/utils/helpers/cancelableDelayedFunction.js";export{keyExtractor,keyExtractorFunction}from"./core/utils/keyExtractor.js";export{dateRangeFormat,getDateTime,getTimeFromNow,getTimeFromNowOriginal,getTimeTo}from"./core/utils/date.js";export{ced,createResolveAttribute,customElementDefine,resolveAttributes}from"./core/utils/webComponents/webComponent.utils.js";export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./core/ui/utils/style.js";export{FBox}from"./core/ui/components/container/FBox.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./core/ui/components/container/Flex.js";export{Placeholder}from"./core/ui/components/container/Placeholder.js";export{
|
|
1
|
+
export{useApi}from"./core/hooks/useApi.js";export{useToggle}from"./core/hooks/useToggle.js";export{createSafeT,setUseTranslation,useTranslations}from"./core/hooks/useTranslations.js";export{useOutsideClick}from"./core/hooks/useOutsideClick.js";export{useResize}from"./core/hooks/useResize.js";export{isBirthNumberValid}from"./core/utils/helpers/birthnumber.validator.js";export{getMatch,isValidFormat,isValidModulo11,parse,regex}from"./core/utils/helpers/birthnumberCZSKvalidator.js";export{parseCSVdata,validateCSVFile,validateCSVlines,validateJSONFile,validateLineCellTrimmed,validateLineNumColumns,validateSDFFile}from"./core/utils/helpers/fileValidator.js";export{DATE_FORMAT,formatDateToTimestamp,getDate}from"./core/utils/helpers/date.js";export{getDeviceId}from"./core/utils/helpers/deviceInfo.js";export{emailMatch,emailMatcher,regexBuilder}from"./core/utils/helpers/emailMatcher.js";export{cleanCsvLines,formatFilePath}from"./core/utils/helpers/file.js";export{arrayToObjectTree,chunkArray,duplicatesInArray,formatJsonString,formatObj,formatObj2}from"./core/utils/helpers/objectOperations.js";export{debounce,delay,memoize,memoizeComplex,memoizer,nestedTernary}from"./core/utils/helpers/other.js";export{escapeRegExp,fileNameExt,findStringInText,normalizeString,removeWhitespaces,sanitizeId,sanitizePathId,toLowerCase,toUpperCase,truncateText}from"./core/utils/helpers/textValueOperations.js";export{Operation,decrementValue,incerementValue,numberDefined,numberOperation,restrictNumberInLimits,setValue}from"./core/utils/helpers/valueOperations.js";export{cancelableSetInterval,cancelableSetTimeout}from"./core/utils/helpers/cancelableDelayedFunction.js";export{keyExtractor,keyExtractorFunction}from"./core/utils/keyExtractor.js";export{dateRangeFormat,getDateTime,getTimeFromNow,getTimeFromNowOriginal,getTimeTo}from"./core/utils/date.js";export{ced,createResolveAttribute,customElementDefine,resolveAttributes}from"./core/utils/webComponents/webComponent.utils.js";export{calculateColors,calculatePercColor,convertHex,convertRGB,defaultFontSize,pxToRem,resolveStyleValue,setDefaultFontSize,toHex}from"./core/ui/utils/style.js";export{FBox}from"./core/ui/components/container/FBox.js";export{Flex,FlexTight,FlexTightStyled,FlexWrapper}from"./core/ui/components/container/Flex.js";export{Placeholder}from"./core/ui/components/container/Placeholder.js";export{ContainerS}from"./core/ui/components/container/CollapsibleContainerS.js";export{CollapsibleContainer}from"./core/ui/components/container/CollapsibleContainer.js";export{ResizableContainer}from"./core/ui/components/container/ResizableContainer.js";export{Field,FieldWrapper,Select,setIconColor,setIconComponent}from"./core/ui/components/field/Field.js";export{DividerHorizontal,DividerLine,DividerVertical}from"./core/ui/components/dividers/DividerLine.js";export{IconBase}from"./core/ui/components/icon/IconBase.js";export{Icon}from"./core/ui/components/icon/Icon.js";export{IconBaseWC}from"./core/ui/components/icon/IconWC.js";export{EventName}from"./core/constants/ui.constants.js";
|
|
2
2
|
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState, memo, useEffect, useLayoutEffect, useMemo } from 'react';
|
|
3
|
+
import classes from './CollapsibleContainer.module.scss';
|
|
4
|
+
const elementPropNameMap = {
|
|
5
|
+
width: 'scrollWidth',
|
|
6
|
+
height: 'scrollHeight',
|
|
7
|
+
};
|
|
8
|
+
export const CollapsibleContainer = memo(({ collapsed = false, collapseHandler, children, horizontal = false, className = '', ...style }) => {
|
|
9
|
+
const containerRef = useRef(null);
|
|
10
|
+
const [contentProp, setContentProp] = useState(0);
|
|
11
|
+
const vertical = !horizontal;
|
|
12
|
+
useEffect(() => {
|
|
13
|
+
collapseHandler?.(collapsed);
|
|
14
|
+
}, [collapseHandler, collapsed]);
|
|
15
|
+
useLayoutEffect(() => {
|
|
16
|
+
if (containerRef?.current) {
|
|
17
|
+
const propName = vertical ? 'height' : 'width';
|
|
18
|
+
setContentProp(containerRef.current[elementPropNameMap[propName]]);
|
|
19
|
+
}
|
|
20
|
+
}, [containerRef, vertical]);
|
|
21
|
+
const styleProps = useMemo(() => ({
|
|
22
|
+
'--prop-name': vertical ? 'height' : 'width',
|
|
23
|
+
'--prop-max-name': vertical ? 'max-height' : 'max-width',
|
|
24
|
+
'--prop-value': `${contentProp}px`,
|
|
25
|
+
...style,
|
|
26
|
+
}), [vertical, style, contentProp]);
|
|
27
|
+
const classNames = useMemo(() => {
|
|
28
|
+
const classNames = [vertical ? classes.vertical : classes.horizontal];
|
|
29
|
+
if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {
|
|
30
|
+
classNames.push(classes.collapsed);
|
|
31
|
+
}
|
|
32
|
+
if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {
|
|
33
|
+
classNames.push(classes.expanded);
|
|
34
|
+
}
|
|
35
|
+
return classNames.join(' ');
|
|
36
|
+
}, [collapsed, contentProp, vertical]);
|
|
37
|
+
return (_jsx("div", { className: `${classes['collapsible-container']} ${classNames} ${className} `, ref: containerRef, style: styleProps, children: children }));
|
|
38
|
+
});
|
|
39
|
+
CollapsibleContainer.displayName = 'CollapsibleContainer';
|
|
40
|
+
//# sourceMappingURL=CollapsibleContainer.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleContainer.js","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainer.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAa,SAAS,EAAE,eAAe,EAAE,OAAO,EAAiB,MAAM,OAAO,CAAA;AAEjH,OAAO,OAAO,MAAM,oCAAoC,CAAA;AAExD,MAAM,kBAAkB,GAA2B;IACjD,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,cAAc;CACvB,CAAA;AASD,MAAM,CAAC,MAAM,oBAAoB,GAAkC,IAAI,CAAC,CAAC,EACvE,SAAS,GAAG,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,UAAU,GAAG,KAAK,EAAE,SAAS,GAAG,EAAE,EAAE,GAAG,KAAK,EAChE,EAAE,EAAE;IAC9B,MAAM,YAAY,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IACjD,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEjD,MAAM,QAAQ,GAAG,CAAC,UAAU,CAAA;IAE5B,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,EAAE,CAAC,SAAS,CAAC,CAAA;IAC9B,CAAC,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,CAAA;IAEhC,eAAe,CAAC,GAAG,EAAE;QACnB,IAAI,YAAY,EAAE,OAAO,EAAE;YACzB,MAAM,QAAQ,GAAG,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAA;YAE9C,cAAc,CAAE,YAAY,CAAC,OAAe,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;SAC5E;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE5B,MAAM,UAAU,GAAkB,OAAO,CAAC,GAAG,EAAE,CAAC,CAAC;QAC/C,aAAa,EAAE,QAAQ,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO;QAC5C,iBAAiB,EAAE,QAAQ,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW;QACxD,cAAc,EAAE,GAAG,WAAW,IAAI;QAClC,GAAG,KAAK;KACS,CAAA,EAAE,CAAC,QAAQ,EAAE,KAAK,EAAE,WAAW,CAAC,CAAC,CAAA;IAEpD,MAAM,UAAU,GAAG,OAAO,CAAC,GAAG,EAAE;QAC9B,MAAM,UAAU,GAAG,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAC,CAAC,OAAO,CAAC,UAAU,CAAC,CAAA;QAErE,IAAI,SAAS,IAAI,WAAW,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,IAAI,EAAE;YACjF,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,SAAS,CAAC,CAAA;SACnC;QACD,IAAI,CAAC,SAAS,IAAI,WAAW,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,IAAI,EAAE;YAClF,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,QAAQ,CAAC,CAAA;SAClC;QACD,OAAO,UAAU,CAAC,IAAI,CAAC,GAAG,CAAC,CAAA;IAC7B,CAAC,EAAE,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,CAAC,CAAC,CAAA;IAEtC,OAAO,CACL,cACE,SAAS,EAAE,GAAG,OAAO,CAAC,uBAAuB,CAAC,IAAI,UAAU,IAAI,SAAS,GAAG,EAC5E,GAAG,EAAE,YAAY,EACjB,KAAK,EAAE,UAAU,YAEhB,QAAQ,GACL,CACP,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,oBAAoB,CAAC,WAAW,GAAG,sBAAsB,CAAA"}
|
|
@@ -0,0 +1,49 @@
|
|
|
1
|
+
import { jsx as _jsx } from "react/jsx-runtime";
|
|
2
|
+
import { useRef, useState, memo, useEffect } from 'react';
|
|
3
|
+
import styled from 'styled-components';
|
|
4
|
+
const elementPropNameMap = {
|
|
5
|
+
width: 'scrollWidth',
|
|
6
|
+
height: 'scrollHeight',
|
|
7
|
+
};
|
|
8
|
+
const propNameFunc = ({ propName }) => propName;
|
|
9
|
+
const StyledContainer = memo(styled.div `
|
|
10
|
+
transform-origin: 0% 0%;
|
|
11
|
+
transition: opacity 0.2s ease-in-out, ${propNameFunc} 0.2s ease-in-out, max-${propNameFunc} 0.2s ease-in-out;
|
|
12
|
+
will-change: opacity, ${propNameFunc}, max-${propNameFunc};
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
opacity: 0;
|
|
15
|
+
|
|
16
|
+
&.Collapsible__container__collapsed {
|
|
17
|
+
${propNameFunc}: 0;
|
|
18
|
+
max-${propNameFunc}: 0;
|
|
19
|
+
opacity: 0;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&.Collapsible__container__expanded {
|
|
23
|
+
${propNameFunc}: ${({ contentProp }) => `${contentProp}px`};
|
|
24
|
+
max-${propNameFunc}: ${({ contentProp }) => `${contentProp}px`};
|
|
25
|
+
opacity: 1;
|
|
26
|
+
}
|
|
27
|
+
`);
|
|
28
|
+
export const ContainerS = memo(({ collapsed = false, collapseHandler, children, propName = 'height', className, css, ...props }) => {
|
|
29
|
+
const containerRef = useRef();
|
|
30
|
+
const [contentProp, setContentProp] = useState(0);
|
|
31
|
+
useEffect(() => {
|
|
32
|
+
collapseHandler?.(collapsed);
|
|
33
|
+
}, [collapseHandler, collapsed]);
|
|
34
|
+
useEffect(() => {
|
|
35
|
+
if (containerRef?.current) {
|
|
36
|
+
setContentProp(containerRef.current[elementPropNameMap[propName]]);
|
|
37
|
+
}
|
|
38
|
+
}, [containerRef, propName]);
|
|
39
|
+
let resolvedClassName = '';
|
|
40
|
+
if (collapsed && contentProp && contentProp !== undefined && contentProp !== null) {
|
|
41
|
+
resolvedClassName = 'Collapsible__container__collapsed';
|
|
42
|
+
}
|
|
43
|
+
if (!collapsed && contentProp && contentProp !== undefined && contentProp !== null) {
|
|
44
|
+
resolvedClassName = 'Collapsible__container__expanded';
|
|
45
|
+
}
|
|
46
|
+
return (_jsx(StyledContainer, { className: `${className} ${resolvedClassName}`, ref: containerRef, contentProp: contentProp, propName: propName, css: css, ...props, children: children }));
|
|
47
|
+
});
|
|
48
|
+
ContainerS.displayName = 'ContainerS';
|
|
49
|
+
//# sourceMappingURL=CollapsibleContainerS.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"CollapsibleContainerS.js","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/CollapsibleContainerS.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAM,MAAM,EAAE,QAAQ,EAAE,IAAI,EAAa,SAAS,EAAE,MAAM,OAAO,CAAA;AACxE,OAAO,MAAM,MAAM,mBAAmB,CAAA;AAItC,MAAM,kBAAkB,GAA2B;IACjD,KAAK,EAAE,aAAa;IACpB,MAAM,EAAE,cAAc;CACvB,CAAA;AAED,MAAM,YAAY,GAAG,CAAC,EAAE,QAAQ,EAAiD,EAAE,EAAE,CAAC,QAAQ,CAAA;AAE9F,MAAM,eAAe,GAA6B,IAAI,CAAC,MAAM,CAAC,GAAG,CAAsB;;0CAE7C,YAAY,0BAA0B,YAAY;0BAClE,YAAY,SAAS,YAAY;;;;;MAKrD,YAAY;UACR,YAAY;;;;;MAKhB,YAAY,KAAK,CAAC,EAAE,WAAW,EAAiC,EAAE,EAAE,CAAC,GAAG,WAAW,IAAI;UACnF,YAAY,KAAK,CAAC,EAAE,WAAW,EAAiC,EAAE,EAAE,CAAC,GAAG,WAAW,IAAI;;;CAGhG,CAAC,CAAA;AAUF,MAAM,CAAC,MAAM,UAAU,GAAuB,IAAI,CAAC,CAAC,EAClD,SAAS,GAAG,KAAK,EAAE,eAAe,EAAE,QAAQ,EAAE,QAAQ,GAAG,QAAQ,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,KAAK,EAC5E,EAAE,EAAE;IACnB,MAAM,YAAY,GAAG,MAAM,EAAkB,CAAA;IAC7C,MAAM,CAAC,WAAW,EAAE,cAAc,CAAC,GAAG,QAAQ,CAAC,CAAC,CAAC,CAAA;IAEjD,SAAS,CAAC,GAAG,EAAE;QACb,eAAe,EAAE,CAAC,SAAS,CAAC,CAAA;IAC9B,CAAC,EAAE,CAAC,eAAe,EAAE,SAAS,CAAC,CAAC,CAAA;IAEhC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,YAAY,EAAE,OAAO,EAAE;YACzB,cAAc,CAAE,YAAY,CAAC,OAAe,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAA;SAC5E;IACH,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAA;IAE5B,IAAI,iBAAiB,GAAG,EAAE,CAAA;IAE1B,IAAI,SAAS,IAAI,WAAW,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,IAAI,EAAE;QACjF,iBAAiB,GAAG,mCAAmC,CAAA;KACxD;IACD,IAAI,CAAC,SAAS,IAAI,WAAW,IAAI,WAAW,KAAK,SAAS,IAAI,WAAW,KAAK,IAAI,EAAE;QAClF,iBAAiB,GAAG,kCAAkC,CAAA;KACvD;IAED,OAAO,CACL,KAAC,eAAe,IACd,SAAS,EAAE,GAAG,SAAS,IAAI,iBAAiB,EAAE,EAC9C,GAAG,EAAE,YAAY,EACjB,WAAW,EAAE,WAAW,EACxB,QAAQ,EAAE,QAAQ,EAClB,GAAG,EAAE,GAAG,KACJ,KAAK,YAER,QAAQ,GACO,CACnB,CAAA;AACH,CAAC,CAAC,CAAA;AAEF,UAAU,CAAC,WAAW,GAAG,YAAY,CAAA"}
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
export * from './FBox';
|
|
2
2
|
export * from './Flex';
|
|
3
3
|
export * from './Placeholder';
|
|
4
|
-
export * from './
|
|
4
|
+
export * from './CollapsibleContainerS';
|
|
5
|
+
export * from './CollapsibleContainer';
|
|
5
6
|
export * from './ResizableContainer';
|
|
6
7
|
//# sourceMappingURL=index.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../../../src/core/ui/components/container/index.ts"],"names":[],"mappings":"AAAA,cAAc,QAAQ,CAAA;AACtB,cAAc,QAAQ,CAAA;AACtB,cAAc,eAAe,CAAA;AAC7B,cAAc,yBAAyB,CAAA;AACvC,cAAc,wBAAwB,CAAA;AACtC,cAAc,sBAAsB,CAAA"}
|