choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
161 lines (141 loc) • 6.03 kB
JavaScript
import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
import _createClass from "@babel/runtime/helpers/createClass";
import _inherits from "@babel/runtime/helpers/inherits";
import _possibleConstructorReturn from "@babel/runtime/helpers/possibleConstructorReturn";
import _getPrototypeOf from "@babel/runtime/helpers/getPrototypeOf";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
function _createSuper(Derived) {
function isNativeReflectConstruct() {
if (typeof Reflect === "undefined" || !Reflect.construct) return false;
if (Reflect.construct.sham) return false;
if (typeof Proxy === "function") return true;
try {
Date.prototype.toString.call(Reflect.construct(Date, [], function () {}));
return true;
} catch (e) {
return false;
}
}
return function () {
var Super = _getPrototypeOf(Derived),
result;
if (isNativeReflectConstruct()) {
var NewTarget = _getPrototypeOf(this).constructor;
result = Reflect.construct(Super, arguments, NewTarget);
} else {
result = Super.apply(this, arguments);
}
return _possibleConstructorReturn(this, result);
};
}
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import noop from 'lodash/noop';
import PanelContent from './PanelContent';
import Animate from '../../animate';
var CollapsePanel =
/*#__PURE__*/
function (_Component) {
_inherits(CollapsePanel, _Component);
var _super = _createSuper(CollapsePanel);
function CollapsePanel() {
_classCallCheck(this, CollapsePanel);
return _super.apply(this, arguments);
}
_createClass(CollapsePanel, [{
key: "handleItemClick",
value: function handleItemClick() {
if (this.props.onItemClick) {
this.props.onItemClick();
}
}
}, {
key: "render",
value: function render() {
var _classNames, _classNames2, _classNames3;
var _this$props = this.props,
className = _this$props.className,
id = _this$props.id,
style = _this$props.style,
prefixCls = _this$props.prefixCls,
header = _this$props.header,
headerClass = _this$props.headerClass,
children = _this$props.children,
isActive = _this$props.isActive,
showArrow = _this$props.showArrow,
destroyInactivePanel = _this$props.destroyInactivePanel,
disabled = _this$props.disabled,
accordion = _this$props.accordion,
forceRender = _this$props.forceRender,
expandIcon = _this$props.expandIcon,
expandIconPosition = _this$props.expandIconPosition,
extra = _this$props.extra,
trigger = _this$props.trigger;
var headerCls = classNames("".concat(prefixCls, "-header"), (_classNames = {}, _defineProperty(_classNames, headerClass, headerClass), _defineProperty(_classNames, "".concat(prefixCls, "-item-expand-renderer"), showArrow && typeof expandIcon === 'function'), _classNames));
var itemCls = classNames((_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-item"), true), _defineProperty(_classNames2, "".concat(prefixCls, "-item-active"), isActive), _defineProperty(_classNames2, "".concat(prefixCls, "-item-disabled"), disabled), _classNames2), className);
var iconCls = classNames((_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-expand-icon"), true), _defineProperty(_classNames3, "".concat(prefixCls, "-expanded"), isActive), _defineProperty(_classNames3, "".concat(prefixCls, "-collapsed"), !isActive), _classNames3));
var icon = null;
if (showArrow) {
icon = React.createElement("span", {
className: "".concat(prefixCls, "-expand-icon-wrapper"),
onClick: trigger === 'icon' ? this.handleItemClick.bind(this) : noop
}, typeof expandIcon === 'function' ? expandIcon(this.props) : React.createElement("i", {
className: iconCls
}));
}
return React.createElement("div", {
className: itemCls,
style: style,
id: id
}, React.createElement("div", {
className: headerCls,
onClick: trigger === 'header' ? this.handleItemClick.bind(this) : noop,
role: accordion ? 'tab' : 'button',
tabIndex: disabled ? -1 : 0,
"aria-expanded": "".concat(isActive),
onKeyPress: this.handleKeyPress
}, showArrow && expandIconPosition !== 'text-right' && icon, header, showArrow && expandIconPosition === 'text-right' && icon, extra && React.createElement("div", {
className: "".concat(prefixCls, "-extra")
}, extra)), React.createElement(Animate, {
hiddenProp: "isInactive",
exclusive: true,
component: "",
animation: this.props.openAnimation
}, React.createElement(PanelContent, {
prefixCls: prefixCls,
isInactive: !isActive,
destroyInactivePanel: destroyInactivePanel,
forceRender: forceRender,
role: accordion ? 'tabpanel' : null
}, children)));
}
}]);
return CollapsePanel;
}(Component);
_defineProperty(CollapsePanel, "propTypes", {
className: PropTypes.oneOfType([PropTypes.string, PropTypes.object]),
id: PropTypes.string,
children: PropTypes.any,
openAnimation: PropTypes.object,
prefixCls: PropTypes.string,
header: PropTypes.oneOfType([PropTypes.string, PropTypes.number, PropTypes.node]),
headerClass: PropTypes.string,
showArrow: PropTypes.bool,
isActive: PropTypes.bool,
onItemClick: PropTypes.func,
style: PropTypes.object,
destroyInactivePanel: PropTypes.bool,
disabled: PropTypes.bool,
forceRender: PropTypes.bool
});
_defineProperty(CollapsePanel, "defaultProps", {
showArrow: true,
isActive: false,
destroyInactivePanel: false,
onItemClick: function onItemClick() {},
headerClass: '',
forceRender: false
});
export { CollapsePanel as default };
//# sourceMappingURL=Panel.js.map