1#@!#!123s

ALWAYS HENGHENG888 1#@!#!123s
: / var / www / smartweb / priyoholidays.com / src / components / input /
Filename : PriceRangeInput.js
back
import React, { useEffect, useState } from 'react'
import { Input, Slider } from 'antd'

export default function PriceRangeInput({ query, onPriceChangeHandler }) {
    const [initial, setInitial] = useState(false)
    const [lowPrice, setLowPrice] = useState(query.min > 0 ? query.min : 0)
    const [highPrice, setHighPrice] = useState(query.max > 0 ? query.max : 100000)

    useEffect(() => {
        const delayDebounceFn = setTimeout(() => {
            if (initial) {
                onPriceChangeHandler(lowPrice, highPrice)
            } else {
                setInitial(true)
            }
        }, 500)
        return () => clearTimeout(delayDebounceFn)
    }, [lowPrice, highPrice])  // eslint-disable-line react-hooks/exhaustive-deps


    const onChange = (value) => {
        setLowPrice(value[0])
        setHighPrice(value[1])
    }
    const onAfterChange = (value) => {
        setLowPrice(value[0])
        setHighPrice(value[1])
    }

    return (
        <>
            <Slider
                range
                step={5}
                min={0}
                max={100000}
                value={[lowPrice, highPrice]}
                defaultValue={[lowPrice, highPrice]}
                onChange={onChange}
                onAfterChange={onAfterChange}
            />
            <Input.Group compact>
                <Input
                    style={{
                        width: '44%',
                        textAlign: 'center',
                    }}
                    defaultValue={lowPrice}
                    value={lowPrice}
                    onChange={e => setLowPrice(e.target.value)}
                    placeholder="Minimum"
                />
                <Input
                    className="site-input-split"
                    style={{
                        width: '12%',
                        borderLeft: 0,
                        borderRight: 0,
                        pointerEvents: 'none',
                    }}
                    placeholder="~"
                    disabled
                />
                <Input
                    className="site-input-right"
                    style={{
                        width: '44%',
                        textAlign: 'center',
                    }}
                    defaultValue={highPrice}
                    value={highPrice}
                    onChange={e => setHighPrice(e.target.value)}
                    placeholder="Maximum"
                />
            </Input.Group>
        </>
    )
}