xph-form/dist/components/Collapse/index.js

This is a configurable form component that supports React

import { jsx as _jsx } from "react/jsx-runtime";
import { useState, forwardRef, useImperativeHandle, useMemo } from "react";
import { Button } from "antd";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import style from "./index.module.css";
const Collapse = forwardRef(({ collapsible, onClickExpand, onClickFold, }, ref) => {
    /** 是否折叠 */
    const [collapseState, setCollapseState] = useState(collapsible);
    const collapse = useMemo(() => {
        return collapseState;
    }, [collapseState]);
    /** 点击折叠 */
    const handleCollapseChangeTrue = () => {
        onClickFold();
        setCollapseState(true);
    };
    /** 点击展开 */
    const handleCollapseChangeFalse = () => {
        onClickExpand();
        setCollapseState(false);
    };
    useImperativeHandle(ref, () => ({
        handleCollapseChangeFalse,
    }));
    return (_jsx("div", { className: style["collapse-wrapper"], children: collapse ? (_jsx(Button, { onClick: handleCollapseChangeFalse, type: "link", icon: _jsx(DownOutlined, {}), children: "\u5C55\u5F00" })) : (_jsx(Button, { onClick: handleCollapseChangeTrue, type: "link", icon: _jsx(UpOutlined, {}), children: "\u6298\u53E0" })) }));
});
export default Collapse;