淘宝app搜索历史记录可折叠标签

import React, { useEffect, useRef, useState } from "react";
import { DeleteOutline } from "antd-mobile-icons";
import { Modal } from "pajk-design";
import "./HistoryTags.scss";
import { parseUrlParams } from "../../utils/parseUrlParams";
interface SearchHistoryProps {
    historyList: any[];
    onClear?: () => void;
    onExpand?: () => void;
    title: any;
    showicon: boolean;
    type: any;
    onCallCallback;
}

const HistoryTags = ({
    historyList,
    onClear,
    onExpand,
    title,
    showicon,
    type,
    onCallCallback,
}: SearchHistoryProps) => {
    const [showModal, setShowModal] = useState(false);
    const [showDelet, setShowDelet] = useState(false);
    const [modalTitle, setModalTitle] = useState<any>({}); // 常见症状
    const panelBodyRef = useRef<any>();
    const moreRef = useRef<any>();
    const [showIcon, setShowIcon] = useState<any>();
    const urlParams = parseUrlParams();
    let { preBizOrderId } = urlParams;
    useEffect(() => {
        // if (historyList) {
        insertRedDiv();
        // }
        // return () => {
        //     removeElement(moreRef.current);
        // };
    }, [historyList]);

    // 定义移除元素的函数
    const removeElement = (element) => {
        if (element && element.parentNode) {
            element.parentNode.removeChild(element);
        }
    };
    const insertRedDiv = () => {
        if (panelBodyRef.current) {
            const items = [...panelBodyRef.current.querySelectorAll("div")];
            const index = items.findIndex(
                (item) => item.offsetTop - items[0].offsetTop >= 72,
            );
            if (index >= 1 && !moreRef.current) {
                moreRef.current = document.createElement("DIV");
                moreRef.current.className = "more-arrow-v2";
                moreRef.current.innerHTML =
                    '<b class="bottom-v2"><i class="bottom-arrow1-v2"></i><i class="bottom-arrow2-v2"></i></b>';
                moreRef.current.addEventListener("click", () => {
                    console.log(1);
                    removeElement(moreRef.current);
                    setShowIcon(true);
                });
                panelBodyRef.current.insertBefore(
                    moreRef.current,
                    items[index],
                );
                if (moreRef.current.offsetTop - items[0].offsetTop >= 72) {
                    panelBodyRef.current.insertBefore(
                        moreRef.current,
                        items[index - 1],
                    );
                }
            } else if (moreRef.current) {
                removeElement(moreRef.current);
            }
        } else {
            removeElement(moreRef.current);
        }
    };

    return (
        <div className="search-history-container">
            <div className="header">
                <h3>{title}</h3>
                <span className="clear-btn">
                    {showicon && (
                        <DeleteOutline
                            fontSize={20}
                            color="#9b9b9c"
                            onClick={() => {
                                setShowDelet(true);
                            }}
                        />
                    )}
                </span>
            </div>
            <div
                className={!showIcon ? "tag-list" : "tag-list-icon"}
                ref={panelBodyRef}
            >
                {historyList.map((item, index) => (
                    <div
                        key={index}
                        className="tag"
                        onClick={() => {
                            setShowModal(true);
                            console.log(item);
                            if (type == "1") {
                                onCallCallback(item);
                            } else {
                                setModalTitle(item);
                            }
                        }}
                    >
                        {type == "1" && <span>{item}</span>}
                        {type == "2" && <span>{item.icdTagName}</span>}
                    </div>
                ))}
            </div>

            <Modal
                title={`确认删除历史搜索记录吗`}
                visible={showDelet}
                onCancel={() => {
                    setShowDelet(false);
                }}
                onOk={() => {
                    // @ts-ignore
                    onClear();
                    setShowDelet(false);
                }}
                buttonStyle="divider"
            ></Modal>
            {type == "2" && (
                <Modal
                    title={`确认选择【${modalTitle.icdTagName}】`}
                    visible={showModal}
                    onCancel={() => {
                        setShowModal(false);
                    }}
                    onOk={() => {
                        window.location.href = `${window.location.origin}/momonga/#/recommended-hospital-list?icdCode=${modalTitle.icdTagCode}&preBizOrderId=${preBizOrderId}`;
                        setShowModal(false);
                    }}
                    buttonStyle="divider"
                ></Modal>
            )}
        </div>
    );
};

export default HistoryTags;

`
.search-history-container {
    max-width: 600px;
    margin-top: 20px;
    padding: 0px 16px 0px 16px;
    background: #fff;
    border-radius: 8px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.tag-list {
    overflow: hidden;
    max-height: 72px;
    display: flex;
    flex-wrap: wrap;
    margin-top: 14px;
    gap: 8px;
}
.tag-list-icon {
    display: flex;
    flex-wrap: wrap;
    margin-top: 14px;
    gap: 8px;
}

.tag {
    display: inline-flex;
    align-items: center;
    color: #333;
    background: #f0f2f5;
    border-radius: 16px;
    span {
        font-family: PingFangSC-Regular;
        font-size: 12px;
        color: #333333;
        letter-spacing: 0;
        text-align: center;
        font-weight: 400;
        padding: 8px 12px 7px 12px;
    }
}

.arrow-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    font-size: 14px;
    color: #1677ff;
    background: #f0f2f5;
    border-radius: 16px;
    cursor: pointer;
}

.more-arrow-v2 {
    display: inline-block;
    position: relative;
}

.bottom-v2 {
    display: block;
    width: 32px;
    height: 32px;
    position: relative;
    background: #f5f5f5;
    border-radius: 16px;
    overflow: hidden;
    z-index: 2;
}
.bottom-arrow1-v2,
.bottom-arrow2-v2 {
    width: 0;
    height: 0;
    top: 12px;
    left: 10px;
    display: block;
    position: absolute;
    z-index: 5;
    border-bottom: 6px transparent dashed;
    border-left: 6px transparent dashed;
    border-right: 6px transparent dashed;
    border-top: 6px #333333 solid;
    overflow: hidden;
}

.bottom-arrow1-v2 {
    top: 13px;
    border-top: 6px #333333 solid;
}

.bottom-arrow2-v2 {
    border-top: 6px #f5f5f5 solid;
}

`