choerodon-ui
Version:
An enterprise-class UI design language and React-based implementation
123 lines (117 loc) • 5.16 kB
JavaScript
import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
import _defineProperty from "@babel/runtime/helpers/defineProperty";
import React, { useCallback, useEffect, useRef } from 'react';
import classNames from 'classnames';
import { DataSetEvents } from 'choerodon-ui/dataset/data-set/enum';
import ConfigProvider from 'choerodon-ui/lib/config-provider';
import PanelContent from './PanelContent';
import Animate from '../../animate';
var CollapsePanel = function CollapsePanel(props) {
var _classNames2, _classNames3;
var className = props.className,
id = props.id,
style = props.style,
prefixCls = props.prefixCls,
header = props.header,
headerClass = props.headerClass,
children = props.children,
isActive = props.isActive,
showArrow = props.showArrow,
destroyInactivePanel = props.destroyInactivePanel,
disabled = props.disabled,
accordion = props.accordion,
forceRender = props.forceRender,
expandIcon = props.expandIcon,
expandIconPosition = props.expandIconPosition,
extra = props.extra,
trigger = props.trigger,
openAnimation = props.openAnimation,
onItemClick = props.onItemClick,
eventKey = props.eventKey,
dataSet = props.dataSet;
var headerCls = classNames("".concat(prefixCls, "-header"), headerClass, _defineProperty({}, "".concat(prefixCls, "-item-expand-renderer"), showArrow && typeof expandIcon === 'function'));
var itemCls = classNames("".concat(prefixCls, "-item"), (_classNames2 = {}, _defineProperty(_classNames2, "".concat(prefixCls, "-item-active"), isActive), _defineProperty(_classNames2, "".concat(prefixCls, "-item-disabled"), disabled), _classNames2), className);
var iconCls = classNames("".concat(prefixCls, "-expand-icon"), (_classNames3 = {}, _defineProperty(_classNames3, "".concat(prefixCls, "-expanded"), isActive), _defineProperty(_classNames3, "".concat(prefixCls, "-collapsed"), !isActive), _classNames3));
var handleItemClick = useCallback(function () {
if (onItemClick) {
onItemClick(eventKey);
}
}, [onItemClick, eventKey]);
var handleKeyPress = useCallback(function (e) {
if (e.key === 'Enter' || e.keyCode === 13 || e.which === 13) {
handleItemClick();
}
}, [handleItemClick]);
var icon = showArrow ? /*#__PURE__*/React.createElement("span", {
className: "".concat(prefixCls, "-expand-icon-wrapper"),
onClick: trigger === 'icon' ? handleItemClick : undefined
}, typeof expandIcon === 'function' ? expandIcon(props) : /*#__PURE__*/React.createElement("i", {
className: iconCls
})) : null;
var wrapRef = useRef(null);
var handleValidate = useCallback(function (_ref) {
var valid = _ref.valid,
noLocate = _ref.noLocate;
if (!noLocate && !valid && !isActive && !disabled) {
handleItemClick();
var current = wrapRef.current;
if (current) {
current.focus();
}
}
}, [handleItemClick, isActive, disabled]);
var dsList = dataSet ? [].concat(dataSet) : [];
var length = dsList.length;
useEffect(function () {
if (length && !disabled && !isActive) {
dsList.forEach(function (ds) {
return ds.addEventListener(DataSetEvents.validate, handleValidate).addEventListener(DataSetEvents.validateSelf, handleValidate);
});
return function () {
return dsList.forEach(function (ds) {
return ds.removeEventListener(DataSetEvents.validate, handleValidate).removeEventListener(DataSetEvents.validateSelf, handleValidate);
});
};
}
}, [isActive, disabled, handleValidate, length].concat(_toConsumableArray(dsList)));
var childrenWithProvider = length ? children : /*#__PURE__*/React.createElement(ConfigProvider, {
onValidate: handleValidate,
onValidateSelf: handleValidate
}, children);
return /*#__PURE__*/React.createElement("div", {
className: itemCls,
style: style,
id: id,
ref: wrapRef,
tabIndex: -1
}, /*#__PURE__*/React.createElement("div", {
className: headerCls,
onClick: trigger === 'header' ? handleItemClick : undefined,
role: accordion ? 'tab' : 'button',
tabIndex: disabled ? -1 : 0,
"aria-expanded": "".concat(isActive),
onKeyPress: handleKeyPress
}, showArrow && expandIconPosition !== 'text-right' && icon, header, showArrow && expandIconPosition === 'text-right' && icon, extra && /*#__PURE__*/React.createElement("div", {
className: "".concat(prefixCls, "-extra")
}, extra)), /*#__PURE__*/React.createElement(Animate, {
hiddenProp: "isInactive",
exclusive: true,
component: "",
animation: openAnimation
}, /*#__PURE__*/React.createElement(PanelContent, {
prefixCls: prefixCls,
isInactive: !isActive,
destroyInactivePanel: destroyInactivePanel,
forceRender: forceRender,
role: accordion ? 'tabpanel' : null
}, childrenWithProvider)));
};
CollapsePanel.displayName = 'RcCollapsePanel';
CollapsePanel.defaultProps = {
showArrow: true,
isActive: false,
destroyInactivePanel: false,
forceRender: false
};
export default CollapsePanel;
//# sourceMappingURL=Panel.js.map