phx-react 1.3.955 → 1.3.956
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.
|
@@ -6,10 +6,24 @@ var react_1 = tslib_1.__importStar(require("react"));
|
|
|
6
6
|
var PHXColSpan = function (props) {
|
|
7
7
|
var children = props.children, _a = props.className, className = _a === void 0 ? '' : _a, _b = props.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = props.hiddenAction, hiddenAction = _c === void 0 ? false : _c, iconInformation = props.iconInformation, onClickIconInformation = props.onClickIconInformation, primaryTitle = props.primaryTitle, title = props.title;
|
|
8
8
|
var _d = (0, react_1.useState)(defaultOpen), isOpen = _d[0], setIsOpen = _d[1];
|
|
9
|
+
var _e = (0, react_1.useState)(defaultOpen ? 'auto' : 0), height = _e[0], setHeight = _e[1];
|
|
10
|
+
var contentRef = (0, react_1.useRef)(null);
|
|
9
11
|
var toggleCollapse = function () {
|
|
12
|
+
if (!isOpen && contentRef.current) {
|
|
13
|
+
var scrollHeight = contentRef.current.scrollHeight;
|
|
14
|
+
setHeight(scrollHeight);
|
|
15
|
+
}
|
|
16
|
+
else {
|
|
17
|
+
setHeight(0);
|
|
18
|
+
}
|
|
10
19
|
setIsOpen(function (prev) { return !prev; });
|
|
11
20
|
};
|
|
12
|
-
|
|
21
|
+
(0, react_1.useEffect)(function () {
|
|
22
|
+
if (defaultOpen && contentRef.current) {
|
|
23
|
+
setHeight('auto');
|
|
24
|
+
}
|
|
25
|
+
}, [defaultOpen]);
|
|
26
|
+
return (react_1["default"].createElement("div", { className: "".concat(className, " mx-auto") },
|
|
13
27
|
react_1["default"].createElement("div", { className: primaryTitle ? 'rounded-lg border border-gray-200 bg-white shadow-[0rem_0.0825rem_0rem_#00000012]' : '' },
|
|
14
28
|
react_1["default"].createElement("div", { className: primaryTitle ? 'px-4 py-4' : '' },
|
|
15
29
|
react_1["default"].createElement("div", { className: 'flex w-full items-center justify-between' },
|
|
@@ -20,11 +34,16 @@ var PHXColSpan = function (props) {
|
|
|
20
34
|
react_1["default"].createElement("path", { d: 'M11 6.5C11 7.05228 10.5523 7.5 10 7.5C9.44772 7.5 9 7.05228 9 6.5C9 5.94772 9.44772 5.5 10 5.5C10.5523 5.5 11 5.94772 11 6.5Z', fill: '#8A8A8A' }),
|
|
21
35
|
react_1["default"].createElement("path", { d: 'M10.75 9.25C10.75 8.83579 10.4142 8.5 10 8.5C9.58579 8.5 9.25 8.83579 9.25 9.25V13.75C9.25 14.1642 9.58579 14.5 10 14.5C10.4142 14.5 10.75 14.1642 10.75 13.75V9.25Z', fill: '#8A8A8A' }),
|
|
22
36
|
react_1["default"].createElement("path", { clipRule: 'evenodd', d: 'M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17ZM10 15.5C13.0376 15.5 15.5 13.0376 15.5 10C15.5 6.96243 13.0376 4.5 10 4.5C6.96243 4.5 4.5 6.96243 4.5 10C4.5 13.0376 6.96243 15.5 10 15.5Z', fill: '#8A8A8A', fillRule: 'evenodd' }))))),
|
|
23
|
-
!hiddenAction && (react_1["default"].createElement("button", { className: 'transition-transform duration-300', onClick: toggleCollapse, type: 'button' },
|
|
24
|
-
react_1["default"].createElement("svg", { className: "transform transition-transform duration-300 ".concat(isOpen ? 'rotate-180' : 'rotate-
|
|
37
|
+
!hiddenAction && (react_1["default"].createElement("button", { className: 'flex h-7 w-7 items-center justify-center rounded-lg transition-transform duration-300 hover:bg-gray-100', onClick: toggleCollapse, type: 'button' },
|
|
38
|
+
react_1["default"].createElement("svg", { className: "transform transition-transform duration-300 ".concat(isOpen ? 'rotate-180' : 'rotate-360'), fill: 'none', height: 20, viewBox: '0 0 20 20', width: 20, xmlns: 'http://www.w3.org/2000/svg' },
|
|
25
39
|
react_1["default"].createElement("path", { clipRule: 'evenodd', d: 'M6.23966 11.7996C6.5432 12.0814 7.01775 12.0639 7.2996 11.7603L10 8.85221L12.7004 11.7603C12.9823 12.0639 13.4568 12.0814 13.7603 11.7996C14.0639 11.5177 14.0815 11.0432 13.7996 10.7397L10.5496 7.23966C10.4077 7.08683 10.2086 7 10 7C9.79145 7 9.59232 7.08683 9.45041 7.23966L6.20041 10.7397C5.91856 11.0432 5.93613 11.5177 6.23966 11.7996Z', fill: '#4A4A4A', fillRule: 'evenodd' }))))),
|
|
26
|
-
react_1["default"].createElement("div", {
|
|
27
|
-
|
|
40
|
+
react_1["default"].createElement("div", { style: {
|
|
41
|
+
maxHeight: isOpen ? height : 0,
|
|
42
|
+
opacity: isOpen ? 1 : 0,
|
|
43
|
+
transition: 'all 0.3s ease-in-out',
|
|
44
|
+
overflow: 'hidden'
|
|
45
|
+
} },
|
|
46
|
+
react_1["default"].createElement("div", { ref: contentRef, className: ' pt-3' }, children))))));
|
|
28
47
|
};
|
|
29
48
|
exports.PHXColSpan = PHXColSpan;
|
|
30
49
|
//# sourceMappingURL=ColSpan.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColSpan.js","sourceRoot":"","sources":["../../../../src/components/ColSpan/ColSpan.tsx"],"names":[],"mappings":";;;;AAAA,
|
|
1
|
+
{"version":3,"file":"ColSpan.js","sourceRoot":"","sources":["../../../../src/components/ColSpan/ColSpan.tsx"],"names":[],"mappings":"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"}
|
|
@@ -1,11 +1,25 @@
|
|
|
1
|
-
import React, { useState } from 'react';
|
|
1
|
+
import React, { useEffect, useRef, useState } from 'react';
|
|
2
2
|
export var PHXColSpan = function (props) {
|
|
3
3
|
var children = props.children, _a = props.className, className = _a === void 0 ? '' : _a, _b = props.defaultOpen, defaultOpen = _b === void 0 ? false : _b, _c = props.hiddenAction, hiddenAction = _c === void 0 ? false : _c, iconInformation = props.iconInformation, onClickIconInformation = props.onClickIconInformation, primaryTitle = props.primaryTitle, title = props.title;
|
|
4
4
|
var _d = useState(defaultOpen), isOpen = _d[0], setIsOpen = _d[1];
|
|
5
|
+
var _e = useState(defaultOpen ? 'auto' : 0), height = _e[0], setHeight = _e[1];
|
|
6
|
+
var contentRef = useRef(null);
|
|
5
7
|
var toggleCollapse = function () {
|
|
8
|
+
if (!isOpen && contentRef.current) {
|
|
9
|
+
var scrollHeight = contentRef.current.scrollHeight;
|
|
10
|
+
setHeight(scrollHeight);
|
|
11
|
+
}
|
|
12
|
+
else {
|
|
13
|
+
setHeight(0);
|
|
14
|
+
}
|
|
6
15
|
setIsOpen(function (prev) { return !prev; });
|
|
7
16
|
};
|
|
8
|
-
|
|
17
|
+
useEffect(function () {
|
|
18
|
+
if (defaultOpen && contentRef.current) {
|
|
19
|
+
setHeight('auto');
|
|
20
|
+
}
|
|
21
|
+
}, [defaultOpen]);
|
|
22
|
+
return (React.createElement("div", { className: "".concat(className, " mx-auto") },
|
|
9
23
|
React.createElement("div", { className: primaryTitle ? 'rounded-lg border border-gray-200 bg-white shadow-[0rem_0.0825rem_0rem_#00000012]' : '' },
|
|
10
24
|
React.createElement("div", { className: primaryTitle ? 'px-4 py-4' : '' },
|
|
11
25
|
React.createElement("div", { className: 'flex w-full items-center justify-between' },
|
|
@@ -16,10 +30,15 @@ export var PHXColSpan = function (props) {
|
|
|
16
30
|
React.createElement("path", { d: 'M11 6.5C11 7.05228 10.5523 7.5 10 7.5C9.44772 7.5 9 7.05228 9 6.5C9 5.94772 9.44772 5.5 10 5.5C10.5523 5.5 11 5.94772 11 6.5Z', fill: '#8A8A8A' }),
|
|
17
31
|
React.createElement("path", { d: 'M10.75 9.25C10.75 8.83579 10.4142 8.5 10 8.5C9.58579 8.5 9.25 8.83579 9.25 9.25V13.75C9.25 14.1642 9.58579 14.5 10 14.5C10.4142 14.5 10.75 14.1642 10.75 13.75V9.25Z', fill: '#8A8A8A' }),
|
|
18
32
|
React.createElement("path", { clipRule: 'evenodd', d: 'M10 17C13.866 17 17 13.866 17 10C17 6.13401 13.866 3 10 3C6.13401 3 3 6.13401 3 10C3 13.866 6.13401 17 10 17ZM10 15.5C13.0376 15.5 15.5 13.0376 15.5 10C15.5 6.96243 13.0376 4.5 10 4.5C6.96243 4.5 4.5 6.96243 4.5 10C4.5 13.0376 6.96243 15.5 10 15.5Z', fill: '#8A8A8A', fillRule: 'evenodd' }))))),
|
|
19
|
-
!hiddenAction && (React.createElement("button", { className: 'transition-transform duration-300', onClick: toggleCollapse, type: 'button' },
|
|
20
|
-
React.createElement("svg", { className: "transform transition-transform duration-300 ".concat(isOpen ? 'rotate-180' : 'rotate-
|
|
33
|
+
!hiddenAction && (React.createElement("button", { className: 'flex h-7 w-7 items-center justify-center rounded-lg transition-transform duration-300 hover:bg-gray-100', onClick: toggleCollapse, type: 'button' },
|
|
34
|
+
React.createElement("svg", { className: "transform transition-transform duration-300 ".concat(isOpen ? 'rotate-180' : 'rotate-360'), fill: 'none', height: 20, viewBox: '0 0 20 20', width: 20, xmlns: 'http://www.w3.org/2000/svg' },
|
|
21
35
|
React.createElement("path", { clipRule: 'evenodd', d: 'M6.23966 11.7996C6.5432 12.0814 7.01775 12.0639 7.2996 11.7603L10 8.85221L12.7004 11.7603C12.9823 12.0639 13.4568 12.0814 13.7603 11.7996C14.0639 11.5177 14.0815 11.0432 13.7996 10.7397L10.5496 7.23966C10.4077 7.08683 10.2086 7 10 7C9.79145 7 9.59232 7.08683 9.45041 7.23966L6.20041 10.7397C5.91856 11.0432 5.93613 11.5177 6.23966 11.7996Z', fill: '#4A4A4A', fillRule: 'evenodd' }))))),
|
|
22
|
-
React.createElement("div", {
|
|
23
|
-
|
|
36
|
+
React.createElement("div", { style: {
|
|
37
|
+
maxHeight: isOpen ? height : 0,
|
|
38
|
+
opacity: isOpen ? 1 : 0,
|
|
39
|
+
transition: 'all 0.3s ease-in-out',
|
|
40
|
+
overflow: 'hidden'
|
|
41
|
+
} },
|
|
42
|
+
React.createElement("div", { ref: contentRef, className: ' pt-3' }, children))))));
|
|
24
43
|
};
|
|
25
44
|
//# sourceMappingURL=ColSpan.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ColSpan.js","sourceRoot":"","sources":["../../../../src/components/ColSpan/ColSpan.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAA;
|
|
1
|
+
{"version":3,"file":"ColSpan.js","sourceRoot":"","sources":["../../../../src/components/ColSpan/ColSpan.tsx"],"names":[],"mappings":"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"}
|