@chayns-components/core 5.0.0-beta.807 → 5.0.0-beta.808
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/lib/cjs/components/list/list-item/list-item-body/ListItemBody.js +1 -20
- package/lib/cjs/components/list/list-item/list-item-body/ListItemBody.js.map +1 -1
- package/lib/esm/components/list/list-item/list-item-body/ListItemBody.js +2 -20
- package/lib/esm/components/list/list-item/list-item-body/ListItemBody.js.map +1 -1
- package/package.json +2 -2
|
@@ -13,26 +13,7 @@ const ListItemBody = ({
|
|
|
13
13
|
id
|
|
14
14
|
}) => {
|
|
15
15
|
const containerRef = (0, _react.useRef)(null);
|
|
16
|
-
const [height
|
|
17
|
-
(0, _react.useEffect)(() => {
|
|
18
|
-
if (containerRef.current) {
|
|
19
|
-
const resizeObserver = new ResizeObserver(entries => {
|
|
20
|
-
if (entries && entries[0]) {
|
|
21
|
-
var _entries$0$contentBox;
|
|
22
|
-
const observedHeight = (_entries$0$contentBox = entries[0].contentBoxSize[0]) === null || _entries$0$contentBox === void 0 ? void 0 : _entries$0$contentBox.blockSize;
|
|
23
|
-
if (!observedHeight) {
|
|
24
|
-
return;
|
|
25
|
-
}
|
|
26
|
-
setHeight(observedHeight);
|
|
27
|
-
}
|
|
28
|
-
});
|
|
29
|
-
resizeObserver.observe(containerRef.current);
|
|
30
|
-
return () => {
|
|
31
|
-
resizeObserver.disconnect();
|
|
32
|
-
};
|
|
33
|
-
}
|
|
34
|
-
return () => {};
|
|
35
|
-
}, []);
|
|
16
|
+
const [height] = (0, _react.useState)('auto');
|
|
36
17
|
return /*#__PURE__*/_react.default.createElement(_ListItemBody.StyledMotionListItemBody, {
|
|
37
18
|
key: id,
|
|
38
19
|
animate: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemBody.js","names":["_react","_interopRequireWildcard","require","_ListItemBody","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemBody","children","id","containerRef","useRef","height","
|
|
1
|
+
{"version":3,"file":"ListItemBody.js","names":["_react","_interopRequireWildcard","require","_ListItemBody","_getRequireWildcardCache","e","WeakMap","r","t","__esModule","default","has","get","n","__proto__","a","Object","defineProperty","getOwnPropertyDescriptor","u","hasOwnProperty","call","i","set","ListItemBody","children","id","containerRef","useRef","height","useState","createElement","StyledMotionListItemBody","key","animate","opacity","className","exit","initial","transition","type","ref","displayName","_default","exports"],"sources":["../../../../../../src/components/list/list-item/list-item-body/ListItemBody.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef, useState } from 'react';\nimport { StyledMotionListItemBody } from './ListItemBody.styles';\n\ninterface ListItemBodyProps {\n children?: ReactNode;\n id: string;\n}\n\nconst ListItemBody: FC<ListItemBodyProps> = ({ children, id }) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const [height] = useState<number | 'auto'>('auto');\n\n return (\n <StyledMotionListItemBody\n key={id}\n animate={{ height, opacity: 1 }}\n className=\"beta-chayns-list-item-body\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n transition={{ type: 'tween' }}\n >\n <div ref={containerRef}>{children}</div>\n </StyledMotionListItemBody>\n );\n};\n\nListItemBody.displayName = 'ListItemBody';\n\nexport default ListItemBody;\n"],"mappings":";;;;;;AAAA,IAAAA,MAAA,GAAAC,uBAAA,CAAAC,OAAA;AACA,IAAAC,aAAA,GAAAD,OAAA;AAAiE,SAAAE,yBAAAC,CAAA,6BAAAC,OAAA,mBAAAC,CAAA,OAAAD,OAAA,IAAAE,CAAA,OAAAF,OAAA,YAAAF,wBAAA,YAAAA,CAAAC,CAAA,WAAAA,CAAA,GAAAG,CAAA,GAAAD,CAAA,KAAAF,CAAA;AAAA,SAAAJ,wBAAAI,CAAA,EAAAE,CAAA,SAAAA,CAAA,IAAAF,CAAA,IAAAA,CAAA,CAAAI,UAAA,SAAAJ,CAAA,eAAAA,CAAA,uBAAAA,CAAA,yBAAAA,CAAA,WAAAK,OAAA,EAAAL,CAAA,QAAAG,CAAA,GAAAJ,wBAAA,CAAAG,CAAA,OAAAC,CAAA,IAAAA,CAAA,CAAAG,GAAA,CAAAN,CAAA,UAAAG,CAAA,CAAAI,GAAA,CAAAP,CAAA,OAAAQ,CAAA,KAAAC,SAAA,UAAAC,CAAA,GAAAC,MAAA,CAAAC,cAAA,IAAAD,MAAA,CAAAE,wBAAA,WAAAC,CAAA,IAAAd,CAAA,oBAAAc,CAAA,OAAAC,cAAA,CAAAC,IAAA,CAAAhB,CAAA,EAAAc,CAAA,SAAAG,CAAA,GAAAP,CAAA,GAAAC,MAAA,CAAAE,wBAAA,CAAAb,CAAA,EAAAc,CAAA,UAAAG,CAAA,KAAAA,CAAA,CAAAV,GAAA,IAAAU,CAAA,CAAAC,GAAA,IAAAP,MAAA,CAAAC,cAAA,CAAAJ,CAAA,EAAAM,CAAA,EAAAG,CAAA,IAAAT,CAAA,CAAAM,CAAA,IAAAd,CAAA,CAAAc,CAAA,YAAAN,CAAA,CAAAH,OAAA,GAAAL,CAAA,EAAAG,CAAA,IAAAA,CAAA,CAAAe,GAAA,CAAAlB,CAAA,EAAAQ,CAAA,GAAAA,CAAA;AAOjE,MAAMW,YAAmC,GAAGA,CAAC;EAAEC,QAAQ;EAAEC;AAAG,CAAC,KAAK;EAC9D,MAAMC,YAAY,GAAG,IAAAC,aAAM,EAAwB,IAAI,CAAC;EACxD,MAAM,CAACC,MAAM,CAAC,GAAG,IAAAC,eAAQ,EAAkB,MAAM,CAAC;EAElD,oBACI9B,MAAA,CAAAU,OAAA,CAAAqB,aAAA,CAAC5B,aAAA,CAAA6B,wBAAwB;IACrBC,GAAG,EAAEP,EAAG;IACRQ,OAAO,EAAE;MAAEL,MAAM;MAAEM,OAAO,EAAE;IAAE,CAAE;IAChCC,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAER,MAAM,EAAE,CAAC;MAAEM,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAET,MAAM,EAAE,CAAC;MAAEM,OAAO,EAAE;IAAE,CAAE;IACnCI,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBAE9BxC,MAAA,CAAAU,OAAA,CAAAqB,aAAA;IAAKU,GAAG,EAAEd;EAAa,GAAEF,QAAc,CACjB,CAAC;AAEnC,CAAC;AAEDD,YAAY,CAACkB,WAAW,GAAG,cAAc;AAAC,IAAAC,QAAA,GAAAC,OAAA,CAAAlC,OAAA,GAE3Bc,YAAY","ignoreList":[]}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, {
|
|
1
|
+
import React, { useRef, useState } from 'react';
|
|
2
2
|
import { StyledMotionListItemBody } from './ListItemBody.styles';
|
|
3
3
|
const ListItemBody = _ref => {
|
|
4
4
|
let {
|
|
@@ -6,25 +6,7 @@ const ListItemBody = _ref => {
|
|
|
6
6
|
id
|
|
7
7
|
} = _ref;
|
|
8
8
|
const containerRef = useRef(null);
|
|
9
|
-
const [height
|
|
10
|
-
useEffect(() => {
|
|
11
|
-
if (containerRef.current) {
|
|
12
|
-
const resizeObserver = new ResizeObserver(entries => {
|
|
13
|
-
if (entries && entries[0]) {
|
|
14
|
-
const observedHeight = entries[0].contentBoxSize[0]?.blockSize;
|
|
15
|
-
if (!observedHeight) {
|
|
16
|
-
return;
|
|
17
|
-
}
|
|
18
|
-
setHeight(observedHeight);
|
|
19
|
-
}
|
|
20
|
-
});
|
|
21
|
-
resizeObserver.observe(containerRef.current);
|
|
22
|
-
return () => {
|
|
23
|
-
resizeObserver.disconnect();
|
|
24
|
-
};
|
|
25
|
-
}
|
|
26
|
-
return () => {};
|
|
27
|
-
}, []);
|
|
9
|
+
const [height] = useState('auto');
|
|
28
10
|
return /*#__PURE__*/React.createElement(StyledMotionListItemBody, {
|
|
29
11
|
key: id,
|
|
30
12
|
animate: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ListItemBody.js","names":["React","
|
|
1
|
+
{"version":3,"file":"ListItemBody.js","names":["React","useRef","useState","StyledMotionListItemBody","ListItemBody","_ref","children","id","containerRef","height","createElement","key","animate","opacity","className","exit","initial","transition","type","ref","displayName"],"sources":["../../../../../../src/components/list/list-item/list-item-body/ListItemBody.tsx"],"sourcesContent":["import React, { FC, ReactNode, useRef, useState } from 'react';\nimport { StyledMotionListItemBody } from './ListItemBody.styles';\n\ninterface ListItemBodyProps {\n children?: ReactNode;\n id: string;\n}\n\nconst ListItemBody: FC<ListItemBodyProps> = ({ children, id }) => {\n const containerRef = useRef<HTMLDivElement | null>(null);\n const [height] = useState<number | 'auto'>('auto');\n\n return (\n <StyledMotionListItemBody\n key={id}\n animate={{ height, opacity: 1 }}\n className=\"beta-chayns-list-item-body\"\n exit={{ height: 0, opacity: 0 }}\n initial={{ height: 0, opacity: 0 }}\n transition={{ type: 'tween' }}\n >\n <div ref={containerRef}>{children}</div>\n </StyledMotionListItemBody>\n );\n};\n\nListItemBody.displayName = 'ListItemBody';\n\nexport default ListItemBody;\n"],"mappings":"AAAA,OAAOA,KAAK,IAAmBC,MAAM,EAAEC,QAAQ,QAAQ,OAAO;AAC9D,SAASC,wBAAwB,QAAQ,uBAAuB;AAOhE,MAAMC,YAAmC,GAAGC,IAAA,IAAsB;EAAA,IAArB;IAAEC,QAAQ;IAAEC;EAAG,CAAC,GAAAF,IAAA;EACzD,MAAMG,YAAY,GAAGP,MAAM,CAAwB,IAAI,CAAC;EACxD,MAAM,CAACQ,MAAM,CAAC,GAAGP,QAAQ,CAAkB,MAAM,CAAC;EAElD,oBACIF,KAAA,CAAAU,aAAA,CAACP,wBAAwB;IACrBQ,GAAG,EAAEJ,EAAG;IACRK,OAAO,EAAE;MAAEH,MAAM;MAAEI,OAAO,EAAE;IAAE,CAAE;IAChCC,SAAS,EAAC,4BAA4B;IACtCC,IAAI,EAAE;MAAEN,MAAM,EAAE,CAAC;MAAEI,OAAO,EAAE;IAAE,CAAE;IAChCG,OAAO,EAAE;MAAEP,MAAM,EAAE,CAAC;MAAEI,OAAO,EAAE;IAAE,CAAE;IACnCI,UAAU,EAAE;MAAEC,IAAI,EAAE;IAAQ;EAAE,gBAE9BlB,KAAA,CAAAU,aAAA;IAAKS,GAAG,EAAEX;EAAa,GAAEF,QAAc,CACjB,CAAC;AAEnC,CAAC;AAEDF,YAAY,CAACgB,WAAW,GAAG,cAAc;AAEzC,eAAehB,YAAY","ignoreList":[]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@chayns-components/core",
|
|
3
|
-
"version": "5.0.0-beta.
|
|
3
|
+
"version": "5.0.0-beta.808",
|
|
4
4
|
"description": "A set of beautiful React components for developing your own applications with chayns.",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"browserslist": [
|
|
@@ -85,5 +85,5 @@
|
|
|
85
85
|
"publishConfig": {
|
|
86
86
|
"access": "public"
|
|
87
87
|
},
|
|
88
|
-
"gitHead": "
|
|
88
|
+
"gitHead": "d9f1e129b6ea94a1a977b7f9d8c3c316dddc094e"
|
|
89
89
|
}
|