UNPKG

choerodon-ui

Version:

An enterprise-class UI design language and React-based implementation

123 lines (117 loc) 5.16 kB
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