qc-EnterpriseWeChat-Pro/src/pages/weComTask/components/searchBox.tsx

import useNewToken from "@/Hook/useNewToken";
import { useSize } from "ahooks";
import { Button, Card, InputProps, Space, SelectProps, Input, Select } from "antd"
import { Key, useCallback, useEffect, useMemo, useRef, useState } from "react";
import { DownOutlined, UpOutlined } from '@ant-design/icons';
import React from "react";
import GlobalHeader from "./header";



interface IpnutType extends InputProps {
    label: 'Input',
    name: string
}
interface SelectType extends SelectProps {
    label: 'Select',
    name: string
}
export interface SearchBoxConfigPorps {
    config?: Array<IpnutType | SelectType>,
}
interface SearchBoxProps extends SearchBoxConfigPorps {
    children?: JSX.Element,
    buttons?: JSX.Element,
    bodyPadding?: string | number,//自定义bodyPadding
    isCustom?: boolean//是否自义定搜索条件
}
/**
 *@param buttons 按钮组件 <>...<Button/></>
 *@param config Array<IpnutType | SelectType> 搜索条件配置
 * */



function SearchBox(props: SearchBoxProps) {
    const { buttons, config, children, bodyPadding, isCustom = false } = props
    const [data, setData] = useState<any>(null)
    const ref: any = useRef(null);
    const refBtns: any = useRef(null);
    const refBox: any = useRef(null);
    const [show, setShow] = useState(false)
    const [setHeight, set_setHeight] = useState(false)
    const { token } = useNewToken()
    const size = useSize(ref);
    const sizeBtn = useSize(refBtns);
    const sizeBox = useSize(refBox);
    const [btnMinWidth, setBtnMinWindth] = useState(-1)
    const [chiMinWidth, setChiMinWindth] = useState(-1)
    const showDiv = useCallback(() => {
        set_setHeight(!setHeight)
    }, [setHeight])
    useEffect(() => {
        if (ref?.current && size.height) {
            let divH: any = size.height
            let childrenH = ref?.current?.children[0]?.offsetHeight
            console.log(ref?.current?.children[0])
            if (divH > childrenH || !childrenH) {
                setShow(false)
            } else {
                setShow(true)
            }
            // console.log(divH, childrenH)
        }
    }, [size, ref])
    useEffect(() => {
        if (refBtns?.current && ref.current && sizeBtn.width && sizeBox.width && size.width) {
            // console.log(sizeBox.width, size.width, sizeBtn.width)
            let btns = refBtns?.current?.children[0]?.children[0]?.children
            let chis = ref?.current?.children[0]?.children
            let wArr: any = []
            let cArr: any = []
            Array(chis?.length)?.fill('')?.forEach((a, b) => {
                if (b) {
                    cArr[b] = chis[b]?.offsetWidth + 8
                }
            })
            Array(btns?.length)?.fill('')?.forEach((a, b) => {
                let n = wArr[wArr.length - 1] || 0
                if (b % 2 === 1) {
                    // console.log('1=====>', b, n, wArr)
                    wArr[wArr.length - 1] = btns[b]?.offsetWidth + n

                } else {
                    wArr.push(btns[b].offsetWidth + 8)
                }
            })
            let maxBtnW = Math.max(...wArr)
            if (maxBtnW + 75 > sizeBtn.width && sizeBox.width - size.width < maxBtnW + 75) {
                let cW = sizeBox.width - 20 - maxBtnW - 75
                let newCw = 0
                for (let cw of cArr) {
                    if (newCw + cw < cW) {
                        newCw += cw
                    }
                }
                setChiMinWindth(newCw)
                setBtnMinWindth(maxBtnW)
            }
        }
    }, [refBtns, sizeBtn, sizeBox, refBox, size, ref])
    return <Card
        style={{ background: token.colortRansparency, borderRadius: 0, borderTop: 0, borderRight: 0, borderLeft: 0 }}
        styles={{
            body: { display: 'flex', justifyContent: !show ? 'flex-start' : 'flex-start', padding: bodyPadding ? bodyPadding : 'auto' }
        }}
        ref={refBox}
    >
        {children && <div style={{ flexShrink: 1, marginRight: !show ? 20 : 0 }} >
            <div ref={ref} style={{ height: setHeight ? 'auto' : '30px', overflow: 'hidden', width: chiMinWidth !== -1 ? chiMinWidth : 'auto' }}>
                {
                    isCustom ? children: <Space wrap >
                        {children}
                        {/* {config?.map((item, index) => {
                        if (item.label === 'Input') {
                            let { label, name, ...props } = item
                            return <Input
                                {...props}
                                key={index}
                                allowClear
                                onChange={(e) => {
                                    let v = e.target.value
                                    setData({ ...data, [name]: v })
                                }} />
                        }
                        if (item.label === 'Select') {
                            let { label, options, name, ...props } = item
                            return <Select {...props}
                                options={options?.map(item => ({ ...item }))}
                                key={index}
                                allowClear
                                onChange={(v) => {
                                    setData({ ...data, [name]: v })
                                }}
                            />
                        }
                    })} */}
                    </Space>
                }
            </div>
        </div>}
        <div style={{ height: setHeight ? 'auto' : '30px', overflow: 'hidden', flexShrink: 1, display: 'flex', justifyContent: !show ? 'flex-start' : 'space-between', alignItems: 'flex-start', width: btnMinWidth === -1 ? 'auto' : btnMinWidth + 75 }} ref={refBtns}>
            <div style={{ width: btnMinWidth === -1 ? 'auto' : btnMinWidth }}>
                <Space wrap >
                    {buttons}
                    {/* {buttons?.props?.children?.map((item: any) => {
                        if (item.props.name === 'submit') {
                            return <Button {...item.props} key='item.props.name' onClick={() => {
                                item.props.onClick && item.props.onClick(data)
                            }} />
                        }
                        return item
                    })} */}
                </Space></div>
            {show && <Space><div style={{ flexShrink: 1, width: '75px' }}><Button type="link" onClick={showDiv}>{!setHeight ? <> 展开 <DownOutlined /> </> : <>收起 <UpOutlined /></>}</Button></div></Space>}
        </div>
    </Card >
}

export default React.memo(SearchBox, (prevProps, nextProps) => {
    return false
})