{"version":3,"file":"FilterLayout.module-f559ddbd.js","sources":["../src/components/SelectorsForm/index.jsx"],"sourcesContent":["import React, { useState, useEffect, useRef } from 'react';\nimport PropTypes from 'prop-types';\nimport styles from '@styles/SelectorsForm.module.css';\nimport styles_input from '@styles/InputContainer.module.css';\nimport { MdOutlineLocationOn, MdSearch } from 'react-icons/md';\nimport Floated from '@components/Floated';\nimport { SelectorCityOptions } from '@utils/constants';\nimport { useSearchParams } from 'react-router-dom';\nimport { useDebounce } from '../../hooks/useDebounce';\n\nfunction SelectorsForm({\n    placeholderSearch = '关键字搜索',\n    placeholderTag = '选择地点',\n    options = [],\n    tagOptions = [],\n    handleSubmit,\n    replace = true,\n}) {\n    const [searchParams, setSearchParams] = useSearchParams();\n    const setDebounceSearchParams = useDebounce(setSearchParams, 500);\n    const [pickerActive, setPickerActive] = useState(false);\n    const [selectorOptions, setSelectorOptions] = useState([...SelectorCityOptions]);\n    const [selectorName, setSelectorName] = useState('');\n    const textRef = useRef();\n\n    useEffect(() => {\n        if (options.length > 0) {\n            setSelectorOptions(options);\n        }\n    }, [options]);\n\n    // Update display text and selector name\n    useEffect(() => {\n        const params = new URLSearchParams(searchParams);\n        const selector = params.get('selector');\n        let name;\n        if (selector) {\n            if (!!selector) {\n                const item = selectorOptions.find((item) => item.value == selector);\n                if (item) {\n                    name = item.name;\n                }\n            }\n        }\n        setSelectorName(name);\n        const text = params.get('text');\n        if (text) {\n            textRef.current.value = text;\n        }\n    }, [searchParams]);\n\n    const handleOnSelect = (e) => {\n        const selector = e.target.attributes.value.nodeValue;\n        const params = new URLSearchParams(searchParams);\n        params.set('selector', selector || '');\n        setSearchParams(params, { replace: replace });\n        setPickerActive(false);\n    };\n\n    const handleOnTagClick = (name, selector) => {\n        const params = new URLSearchParams(searchParams);\n        const sel = params.get('selector');\n        if (selector == sel) {\n            selector = '';\n            params.delete('selector');\n        } else {\n            params.set('selector', selector);\n        }\n        setSearchParams(params, { replace: replace });\n    };\n\n    const handleOoTextChange = (e) => {\n        const text = textRef.current.value;\n        const params = new URLSearchParams(searchParams);\n        if (!!text) {\n            params.set('text', text || '');\n        } else {\n            params.delete('text');\n        }\n        setDebounceSearchParams(params, { replace: replace });\n    };\n\n    return (\n        <div className={styles.container}>\n            <div className={styles.inputs_container}>\n                <div className={`${styles_input.input_container} ${styles.selector_container}`}>\n                    <MdOutlineLocationOn className={styles_input.icon} />\n                    <input className={styles_input.input} placeholder={placeholderTag} defaultValue={selectorName} />\n                    <button className={styles_input.trigger_btn} onClick={() => setPickerActive(true)} />\n                    <Floated active={pickerActive} setActive={setPickerActive} fluid>\n                        <div className={styles.dropdown_container}>\n                            {selectorOptions?.map((item, index) => {\n                                return (\n                                    <div\n                                        key={index}\n                                        className={styles.dropdown_item_container}\n                                        onClick={handleOnSelect}\n                                        value={item.value}\n                                        aria-selected={item.name == selectorName && 'true'}\n                                    >\n                                        {item.name}\n                                    </div>\n                                );\n                            })}\n                        </div>\n                    </Floated>\n                </div>\n                <div className={`${styles_input.input_container} ${styles.text_container}`}>\n                    <MdSearch className={styles_input.icon} />\n                    <input\n                        className={styles_input.input}\n                        placeholder={placeholderSearch}\n                        onChange={handleOoTextChange}\n                        ref={textRef}\n                    />\n                </div>\n\n                {handleSubmit && (\n                    <div className={styles.action_container}>\n                        <button className=\"primary_btn\" onClick={handleSubmit}>\n                            查询\n                        </button>\n                    </div>\n                )}\n            </div>\n\n            {tagOptions.length > 0 && (\n                <div className={styles.bottom_container}>\n                    <label htmlFor=\"\">Top 城市</label>\n                    <div className={styles.tags_container}>\n                        {tagOptions?.map((item, index) => {\n                            const params = new URLSearchParams(searchParams);\n                            const selector = params.get('selector');\n                            const selected = selector == item.value;\n                            return (\n                                <div\n                                    key={index}\n                                    className={styles.tag_container}\n                                    onClick={() => handleOnTagClick(item.name, item.value)}\n                                    aria-selected={selected && 'true'}\n                                >\n                                    {item.name}\n                                </div>\n                            );\n                        })}\n                    </div>\n                </div>\n            )}\n        </div>\n    );\n}\n\nSelectorsForm.propTypes = {\n    placeholderSearch: PropTypes.string,\n    placeholderTag: PropTypes.string,\n    options: PropTypes.array,\n    tagOptions: PropTypes.array,\n    handleSubmit: PropTypes.func,\n    replace: PropTypes.bool,\n};\n\nexport default SelectorsForm;\n"],"names":["SelectorsForm","placeholderSearch","placeholderTag","options","tagOptions","handleSubmit","replace","searchParams","setSearchParams","useSearchParams","setDebounceSearchParams","useDebounce","pickerActive","setPickerActive","useState","selectorOptions","setSelectorOptions","SelectorCityOptions","selectorName","setSelectorName","textRef","useRef","useEffect","params","selector","name","item","text","handleOnSelect","handleOnTagClick","sel","handleOoTextChange","jsxs","styles","styles_input","jsx","MdOutlineLocationOn","Floated","index","MdSearch","selected","PropTypes"],"mappings":"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"}