add filter by area

This commit is contained in:
b1ek 2023-05-08 20:58:40 +10:00
parent b5828134a9
commit abe92545cf
Signed by: blek
GPG Key ID: 14546221E3595D0C
1 changed files with 51 additions and 15 deletions

View File

@ -84,14 +84,6 @@ const ClearButton = styled(PeriodButton)`
margin-right: 0; margin-right: 0;
`; `;
const SearchBarFilter = styled.div`
background: #f2f3f2;
border-radius: 12px;
width: 100%;
height: 56px;
margin: 12px 0;
font-weight: 400
`;
const SubmitBtn = styled.button` const SubmitBtn = styled.button`
background: royalblue; background: royalblue;
@ -105,17 +97,44 @@ const SubmitBtn = styled.button`
} }
`; `;
const SearchBarFilter = styled.div`
background: #f2f3f2;
border-radius: 12px;
width: 100%;
height: 56px;
margin: 12px 0;
font-weight: 400;
padding: 0 16px
`;
const SearchBarText = styled.div`
position: relative;
top: 50%;
transform: translateY(-50%);
`;
const FilterArea = styled.input`
border: 0; background: 0;
margin: 0 16px;
font-size: 105%;
width: 30px;
outline: none;
`;
const FiltersForm = () => { const FiltersForm = () => {
const def_form = { const def_form = {
per_day: false, per_day: false,
per_month: false per_month: false,
area_from: 0,
area_to: 0
}; };
const [ state, setState ] = useState(def_form); const [ state, setState_ ] = useState(def_form);
const submitted = (a) => { const setState = (new_state) => {
console.log(a); return setState_({...state, ...new_state});
} }
return ( return (
@ -135,17 +154,34 @@ const FiltersForm = () => {
<SVGIcon src='/images/icons/calendar.svg' width='14' height='14' /> <SVGIcon src='/images/icons/calendar.svg' width='14' height='14' />
Ежемесячно Ежемесячно
</PeriodButton> </PeriodButton>
<ClearButton> <ClearButton onClick={() => setState(def_form)}>
<SVGIcon src='/images/icons/eraser-fill.svg' width='14' height='14' /> <SVGIcon src='/images/icons/eraser-fill.svg' width='14' height='14' />
Сбросить Сбросить
</ClearButton> </ClearButton>
</PeriodFilter> </PeriodFilter>
<SearchBarFilter> <SearchBarFilter>
asbvccxcz <SearchBarText>
Площадь
<span style={{color:'gray'}}> от </span>
<FilterArea
type='text'
placeholder='—'
maxLength='3'
value={state.area_from}
onChange={(e) => setState({area_from: e.target.value})}/>
<span style={{color:'gray'}}> до </span>
<FilterArea
type='text'
placeholder='—'
maxLength='3'
value={state.area_to}
onChange={(e) => setState({area_to: e.target.value})}/>
</SearchBarText>
</SearchBarFilter> </SearchBarFilter>
<SubmitBtn type='submit'> <SubmitBtn onClick={() => console.log(state)}>
<SVGIcon src='/images/icons/search.svg' width='14' height='14' /> <SVGIcon src='/images/icons/search.svg' width='14' height='14' />
Показать варианты Показать варианты
</SubmitBtn> </SubmitBtn>