@atlaskit/panel
Version:
A React component rendering a collapsible panel
40 lines (38 loc) • 1.47 kB
JavaScript
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { PureComponent } from 'react';
import AnimateHeight from 'react-animate-height';
import Button from '@atlaskit/button/custom-theme-button';
import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
import * as styles from './styledPanel';
export default class PanelStateless extends PureComponent {
render() {
const {
children,
header,
isExpanded,
onChange
} = this.props;
return /*#__PURE__*/React.createElement(styles.PanelWrapper, null, /*#__PURE__*/React.createElement(styles.PanelHeader, {
onClick: () => onChange(!isExpanded)
}, /*#__PURE__*/React.createElement(styles.ButtonWrapper, {
isHidden: isExpanded
}, /*#__PURE__*/React.createElement(Button, {
appearance: "subtle",
"aria-expanded": isExpanded,
spacing: "none",
iconBefore: isExpanded ? /*#__PURE__*/React.createElement(ChevronDownIcon, {
label: "collapse"
}) : /*#__PURE__*/React.createElement(ChevronRightIcon, {
label: "expand"
})
})), /*#__PURE__*/React.createElement("span", null, header)), /*#__PURE__*/React.createElement(AnimateHeight, {
duration: 200,
easing: "linear",
height: isExpanded ? 'auto' : 0
}, children));
}
}
_defineProperty(PanelStateless, "defaultProps", {
isExpanded: false
});