phx-react
Version:
PHX REACT
47 lines • 4.12 kB
JavaScript
import React, { useEffect, useRef, useState } from 'react';
export const PHXColSpan = (props) => {
const { children, className = '', defaultOpen = false, hiddenAction = false, iconInformation, onClickIconInformation, primaryTitle, title, } = props;
const [isOpen, setIsOpen] = useState(defaultOpen);
const [height, setHeight] = useState(defaultOpen ? 'auto' : 0);
const contentRef = useRef(null);
const toggleCollapse = () => {
if (!isOpen && contentRef.current) {
const scrollHeight = contentRef.current.scrollHeight;
setHeight(scrollHeight);
}
else {
setHeight(0);
}
setIsOpen((prev) => !prev);
};
useEffect(() => {
if (defaultOpen && contentRef.current) {
setHeight('auto');
}
}, [defaultOpen]);
return (React.createElement("div", { className: `${className} mx-auto` },
React.createElement("div", { className: primaryTitle ? 'rounded-lg border border-gray-200 bg-white shadow-[0rem_0.0825rem_0rem_#00000012]' : '' },
React.createElement("div", { className: primaryTitle ? 'px-4 py-4' : '' },
React.createElement("div", { className: 'flex items-center justify-between w-full' },
React.createElement("div", { className: 'flex items-center gap-1' },
React.createElement("span", { className: primaryTitle ? 'text-sm font-semibold leading-5 text-gray-900' : 'text-xs leading-5 text-gray-800' }, title),
iconInformation && (React.createElement("button", { onClick: onClickIconInformation, type: 'button' },
React.createElement("svg", { fill: 'none', height: 20, viewBox: '0 0 20 20', width: 20, xmlns: 'http://www.w3.org/2000/svg' },
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' }),
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' }),
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' }))))),
!hiddenAction && (React.createElement("button", { className: 'flex items-center justify-center transition-transform duration-300 rounded-lg h-7 w-7 hover:bg-gray-100', onClick: toggleCollapse, type: 'button' },
React.createElement("svg", { className: `
transform-gpu origin-center transition-transform duration-300
${!isOpen ? 'scale-y-[-1]' : 'scale-y-100'}
`, fill: 'none', height: 20, viewBox: '0 0 20 20', width: 20, xmlns: 'http://www.w3.org/2000/svg' },
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' }))))),
React.createElement("div", { style: {
maxHeight: isOpen ? height : 0,
opacity: isOpen ? 1 : 0,
transition: 'all 0.3s ease-in-out',
overflow: 'hidden',
} },
React.createElement("div", { ref: contentRef, className: 'pt-3 ' }, children))))));
};
//# sourceMappingURL=ColSpan.js.map