[21/07/28] 필터 추가 기능
병원도다니고.. 토익준비도하고.. 하튼 여러모로 바쁜 탓에 개발을 리팩토링 말고는 못했다..
오늘을 마무리로 내일부턴 검색 기능, 에디터 확장 기능 구현에 들어가야겠다..
선택한 아이템이면 focus
// true이면 포커스 해준다.
<DropDownItem
key={l}
onClick={(e) =>
onClick({
e,
value: l,
type,
allowDuplicate,
})
}
focus={
Array.isArray(selectedList.value)
// select.hashtag.value는 배열이므로 포함되었는지를 체크한다.
? selectedList.value.includes(l.id)
: selectedList.value === l.id
}
>
{l.name}
</DropDownItem>
FilterItem props로 전해주는걸 children으로 바꾸어 전달
직접 입력의 경우 input으로 내부 요소를 변경해주어야함. 다른 컴포넌트에서 사용하는 경우 input
은 사용되지 않으므로 이렇게 자식으로 넘겨주기로함.
<FilterItem
key={t}
onClick={onClickFilterItem}
focus={currentType === t}
type={t}
size={138}
>
{/* 직접입력인 경우 input을, 아닌 경우 current 값을 자식으로 보내준다. */}
{select[t].current === '직접입력' ? (
<Input
placeholder={'직접입력'}
onChange={(e) => onChangeInput(e, t)}
value={select[t].value === 0 ? '' : `${select[t].value}`}
></Input>
) : (
<div>
{Array.isArray(select[t].current)
? select[t].current.join(' / ')
: select[t].current}
</div>
)}
</FilterItem>
필터 텍스트가 요소 크기를 넘어가면
모바일
잘리고 스크롤이 가능해진다.
데스크탑
...으로 처리하고, 스크롤 불가능하게
& > div:first-child {
overflow-x: scroll;
// 줄바꿈 금지
white-space: nowrap;
/* No Scroll Bar */
-ms-overflow-style: none;
scrollbar-width: none;
&::-webkit-scrollbar {
display: none;
}
${(props) => props.theme.desktop} {
// 데스크탑
overflow-x: hidden;
// ... 처리
text-overflow: ellipsis;
}
}
직접입력을 선택하면 input으로 변경
FilterItem 다른곳에서도 사용하도록 변경
아래는 업체 탐색 페이지안에있는 FactoryItemsFilter Component
이다.
이 컴포넌트도 FilterItem
을 사용하므로 기존의 코드를 삭제하고 atomic
컴포넌트를 사용하도록 한다.
<FilterItem
key={f.eng}
type={f.eng}
onClick={onClick}
focus={
(
Array.isArray(querySelect[f.eng])
? querySelect[f.eng].length !== 0
: querySelect[f.eng] && querySelect[f.eng] !== 0
)
? true
: false
}
>
{f.kor}
</FilterItem>
Author And Source
이 문제에 관하여([21/07/28] 필터 추가 기능), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@rat8397/210728-필터-추가-기능저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)