lowcode-engine/packages/material-parser/test/fixtures/fusion-next-component/src/collapse/panel.jsx

import React from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import ConfigProvider from '../config-provider';
import Icon from '../icon';
import { func, KEYCODE } from '../util';

/** Collapse.Panel */
class Panel extends React.Component {
    static propTypes = {
        /**
         * 样式类名的品牌前缀
         */
        prefix: PropTypes.string,
        /**
         * 子组件接受行内样式
         */
        style: PropTypes.object,
        children: PropTypes.any,
        isExpanded: PropTypes.bool,
        /**
         * 是否禁止用户操作
         */
        disabled: PropTypes.bool,
        /**
         * 标题
         */
        title: PropTypes.node,
        /**
         * 扩展class
         */
        className: PropTypes.string,
        onClick: PropTypes.func,
        id: PropTypes.string,
    };

    static defaultProps = {
        prefix: 'next-',
        isExpanded: false,
        onClick: func.noop,
    };

    static isNextPanel = true; //

    onKeyDown = e => {
        const { keyCode } = e;
        if (keyCode === KEYCODE.SPACE) {
            const { onClick } = this.props;
            e.preventDefault();
            onClick && onClick(e);
        }
    };
    render() {
        const {
            title,
            children,
            className,
            isExpanded,
            disabled,
            style,
            prefix,
            onClick,
            id,
            ...others
        } = this.props;

        const cls = classNames({
            [`${prefix}collapse-panel`]: true,
            [`${prefix}collapse-panel-hidden`]: !isExpanded,
            [`${prefix}collapse-panel-expanded`]: isExpanded,
            [`${prefix}collapse-panel-disabled`]: disabled,
            [className]: className,
        });

        const iconCls = classNames({
            [`${prefix}collapse-panel-icon`]: true,
            [`${prefix}collapse-panel-icon-expanded`]: isExpanded,
        });

        // 为了无障碍 需要添加两个id
        const headingId = id ? `${id}-heading` : undefined;
        const regionId = id ? `${id}-region` : undefined;
        return (
            <div className={cls} style={style} id={id} {...others}>
                <div
                    id={headingId}
                    className={`${prefix}collapse-panel-title`}
                    onClick={onClick}
                    onKeyDown={this.onKeyDown}
                    tabIndex="0"
                    aria-disabled={disabled}
                    aria-expanded={isExpanded}
                    aria-controls={regionId}
                    role="button"
                >
                    <Icon
                        type="arrow-up"
                        className={iconCls}
                        aria-hidden="true"
                    />
                    {title}
                </div>
                <div
                    className={`${prefix}collapse-panel-content`}
                    role="region"
                    id={regionId}
                >
                    {children}
                </div>
            </div>
        );
    }
}

export default ConfigProvider.config(Panel);