@schema-render/search-react/dist/esm/hooks/useCollapse.js

Conditional search component based on FormRender.

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { DownOutlined, UpOutlined } from "@ant-design/icons";
import { useMemoizedFn } from "@schema-render/core-react";
import { Button } from "antd";
import { useMemo, useRef, useState } from "react";
import { calcCollapsedNumber } from "../utils/collapsedNumber";
import createDisplayedSchema from "../utils/createDisplayedSchema";
import { size } from "../utils/tinyLodash";
import useResize from "./useResize";
/**
 * 「收起/展开」功能处理
 */ export default function useCollapse(props, formRenderRef) {
    const rawSchema = props.schema;
    const [isCollapsed, setIsCollapsed] = useState(props.defaultCollapsed);
    const [collapsedNumber, setCollapsedNumber] = useState(()=>{
        var _formRenderRef_current;
        return calcCollapsedNumber((_formRenderRef_current = formRenderRef.current) === null || _formRenderRef_current === void 0 ? void 0 : _formRenderRef_current.getRootElement(), props.collapsedRows, props.calcCollapsedNumber);
    });
    const schemaRef = useRef(rawSchema);
    /**
   * rawSchema 变化时更新展示的 Schema, useState 的方式会渲染 2 次，所以采用 ref 的方案
   * collapsedNumber、isCollapsed 变化时更新展示的 Schema
   */ useMemo(()=>{
        schemaRef.current = createDisplayedSchema({
            isCollapsed,
            collapsedNumber,
            rawSchema
        });
    }, [
        collapsedNumber,
        isCollapsed,
        rawSchema
    ]);
    /**
   * 容器元素窗口尺寸变化时，重新计算折叠个数
   */ useResize(formRenderRef, (rootElement)=>{
        setCollapsedNumber(calcCollapsedNumber(rootElement, props.collapsedRows, props.calcCollapsedNumber));
    });
    /**
   * 事件：处理「收起/展开」
   */ const handleCollapse = useMemoizedFn((isCollapsed)=>{
        var _props_onToggleCollapsed;
        setIsCollapsed(isCollapsed);
        (_props_onToggleCollapsed = props.onToggleCollapsed) === null || _props_onToggleCollapsed === void 0 ? void 0 : _props_onToggleCollapsed.call(props, isCollapsed);
    });
    /**
   * 注册「收起/展开」按钮
   */ const collapse = useMemoizedFn(({ locale })=>{
        var _locale_Search;
        // Schema 个数未超过折叠个数则不展示「展开/收起」按钮
        if (size(rawSchema.properties) <= collapsedNumber) {
            return null;
        }
        // 展开
        if (isCollapsed) {
            var _locale_Search1;
            return /*#__PURE__*/ _jsxs(Button, {
                type: "link",
                onClick: ()=>handleCollapse(false),
                style: {
                    padding: 0
                },
                children: [
                    locale === null || locale === void 0 ? void 0 : (_locale_Search1 = locale.Search) === null || _locale_Search1 === void 0 ? void 0 : _locale_Search1.expand,
                    /*#__PURE__*/ _jsx(DownOutlined, {})
                ]
            });
        }
        // 收起
        return /*#__PURE__*/ _jsxs(Button, {
            type: "link",
            onClick: ()=>handleCollapse(true),
            style: {
                padding: 0
            },
            children: [
                locale === null || locale === void 0 ? void 0 : (_locale_Search = locale.Search) === null || _locale_Search === void 0 ? void 0 : _locale_Search.collapse,
                /*#__PURE__*/ _jsx(UpOutlined, {})
            ]
        });
    });
    /**
   * 注册操作行为
   */ const registerActions = {
        collapse,
        ...props.registerActions
    };
    return {
        schema: schemaRef.current,
        registerActions
    };
}