@activecollab/components
Version:
ActiveCollab Components
49 lines • 1.87 kB
JavaScript
import React, { useCallback, useEffect, useRef, useState } from "react";
import { StyledChildrenWrapper, StyledCollapseExpandSingleIcon, StyledDividerLine, StyledTitle, StyledWrapper } from "./Styles";
import { Button } from "../Button";
export const EntitiesHeader = _ref => {
let onClick = _ref.onClick,
title = _ref.title,
children = _ref.children,
_ref$expanded = _ref.expanded,
expanded = _ref$expanded === void 0 ? true : _ref$expanded,
_ref$readOnly = _ref.readOnly,
readOnly = _ref$readOnly === void 0 ? false : _ref$readOnly,
className = _ref.className;
const ref = useRef(null);
const _useState = useState(expanded || readOnly),
open = _useState[0],
setOpen = _useState[1];
useEffect(() => {
setOpen(expanded || readOnly);
}, [expanded, readOnly]);
const handleOnClick = useCallback(() => {
var _ref$current;
(_ref$current = ref.current) == null || _ref$current.focus();
setOpen(prev => !prev);
if (onClick) onClick();
}, [onClick]);
return /*#__PURE__*/React.createElement(StyledWrapper, {
className: className,
tabIndex: 0,
ref: ref,
$expanded: open
}, !readOnly ? /*#__PURE__*/React.createElement(Button, {
variant: "text gray",
size: "small",
onClick: handleOnClick
}, /*#__PURE__*/React.createElement(StyledCollapseExpandSingleIcon, {
$expanded: open
}), /*#__PURE__*/React.createElement(StyledTitle, {
$readOnly: readOnly,
color: "secondary",
weight: "medium"
}, title)) : /*#__PURE__*/React.createElement(StyledTitle, {
$readOnly: readOnly,
color: "secondary",
weight: "medium"
}, title), !open && /*#__PURE__*/React.createElement(StyledDividerLine, {
"data-testid": "divider-line"
}), open && /*#__PURE__*/React.createElement(StyledChildrenWrapper, null, children));
};
//# sourceMappingURL=EntitiesHeader.js.map