React Arborist
https://github.com/brimdata/react-arborist?tab=readme-ov-file#node-component-props
지원 기능
- 드래그 앤 드롭 정렬
- 폴더 열기/닫기
- 인라인 이름 변경
- 가상 렌더링
- 사용자 정의 스타일링
- 키보드 탐색
- Aria 속성
- 트리 필터링
- 선택 동기화
- 콜백 (onScroll, onActivate, onSelect)
- 제어 또는 비제어 트리
설치
npm install react-arborist
사용
- 데이터를 아래와 같이 중첩 구조로 셋팅
const data = [
{ id: "1", name: "Unread" },
{ id: "2", name: "Threads" },
{
id: "3",
name: "Chat Rooms",
children: [
{ id: "c1", name: "General" },
{ id: "c2", name: "Random" },
{ id: "c3", name: "Open Source Projects" },
],
},
];- Tree 컴포넌트를 import 하여 데이터를 전달
- 기본적인 폴더 트리구조를 제공
import { Tree } from "react-arborist";
function App() {
return <Tree initialData={data}> </Tree>;
}트리 커스텀
트리 컨테이너 커스텀
- 트리 컴포넌트는 props로 스타일 관련 속성을 받는다.
- 이외의 스타일은 className으로 적용 가능 (tailwind 기준)
import { Tree } from "react-arborist";
function App() {
return <Tree initialData={data}
width={300} // 컨테이너 너비
height={300} // 컨테이너 높이
paddingTop={10} // 컨테이너 상단 패딩
paddingBottom={10} //컨테이너 하단 패딩
padding={20} // 컨테이너 상/하당 패딩
rowHeight={20} // 노드 높이
indent={20} // 하위 노드 깊이
className={"border"} // 컨테이너 className
rowClassName={"border"} // 노드 className
/>;
}노드 커스텀
- 트리 컴포넌트의 하위로 커스텀 컴포넌트를 전달할 수 있다.
- 하위 컴포넌트는 node, tree와 관련한 정보를 매개변수로 전달받는다.
import { Tree } from "react-arborist";
function App() {
return <Tree initialData={data}>{Node}</Tree>;
}// 커스텀 노드 생성
import { NodeRendererProps } from "react-arborist";
function Node({ node, tree, style, dragHandle }: NodeRendererProps<T>) {
return (
<div className="node-container" style={style} ref={dragHandle}>
<div
className="node-content"
onClick={() => node.isInternal && node.toggle()}
>
{/* isOpen : 하위 요소 노출 여부 */}
{node.isOpen ? "-" : "+"}
{/* isInternal: 하위 요소 존재 여부 */}
{node.isInternal ? "🗂️" : "📁"}
<span className="node-text">
<span>{node.data.name}</span>
</span>
</div>
</div>
);
}Node APIs
node.isRoot
- 이것이 루트 노드인 경우 true를 반환합니다. 루트 노드는 react-arborist에 의해 내부적으로 추가되며 UI에는 표시되지 않습니다.
node.isLeaf
- children 속성이 배열이 아닌 경우 true를 반환합니다.
node.isInternal
- children 속성이 배열인 경우 true를 반환합니다.
node.isOpen
- 노드가 내부에 있고 열린 상태인 경우 true를 반환합니다.
node.isEditing
- 이 노드가 현재 편집 중인 경우 true를 반환합니다. 이 속성을 NodeRenderer에서 사용하여 이름 변경 폼을 렌더링합니다.
node.isSelected
- 노드가 선택된 경우 true를 반환합니다.
node.isSelectedStart
- 노드가 연속된 그룹의 선택된 노드 중 첫 번째인 경우 true를 반환합니다. 스타일링에 유용합니다.
node.isSelectedEnd
- 노드가 연속된 그룹의 선택된 노드 중 마지막인 경우 true를 반환합니다. 스타일링에 유용합니다.
node.isOnlySelection
- 노드가 트리에서 선택된 유일한 노드인 경우 true를 반환합니다.
node.isFocused
- 노드가 포커스가 맞춰져 있으면 true를 반환합니다.
node.isDragging
- 노드가 드래그 중이면 true를 반환합니다.
node.willReceiveDrop
- 노드가 내부에 있고 사용자가 드래그 중인 노드를 그 위에 놓으면 true를 반환합니다.
node.state
- 위의 모든 속성을 키로 가진 객체를 반환합니다. 이는 clsx 또는 classnames 같은 라이브러리를 이용해 요소에 클래스 이름을 추가하는데 유용합니다.
type NodeState = {
isEditing: boolean;
isDragging: boolean;
isSelected: boolean;
isSelectedStart: boolean;
isSelectedEnd: boolean;
isFocused: boolean;
isOpen: boolean;
isClosed: boolean;
isLeaf: boolean;
isInternal: boolean;
willReceiveDrop: boolean;
};접근자
node.childIndex
- 노드의 형제들 사이에서의 인덱스를 반환합니다.
node.next
- 다음 보이는 노드를 반환합니다. 트리 컴포넌트에서 이 노드 아래에 있는 노드입니다. 존재하지 않으면 null을 반환합니다.
node.prev
- 이전 보이는 노드를 반환합니다. 트리 컴포넌트에서 이 노드 위에 있는 노드입니다. 존재하지 않으면 null을 반환합니다.
node.nextSibling
- 이 노드의 데이터에서 다음 형제를 반환합니다. 존재하지 않으면 null을 반환합니다.
선택 메소드
node.select()
- 이 노드만 선택합니다.
node.deselect()
- 이 노드의 선택을 해제합니다. 다른 노드들은 여전히 선택될 수 있습니다.
node.selectMulti()
- 이 노드를 선택하면서 다른 모든 선택을 유지합니다.
node.selectContiguous()
- 앵커 노드에서 마지막으로 선택된 노드까지 모든 노드의 선택을 해제하고, 앵커 노드에서 이 노드까지 모든 노드를 선택합니다. select() 또는 selectMulti()를 호출한 후 앵커는 포커스된 노드로 변경됩니다.
활성화
node.activate()
- 이 노드를 전달하여 Tree 속성의 onActivate 콜백을 실행합니다.
node.focus()
- 이 노드에 초점을 맞춥니다.
열기/닫기 메소드
node.open()
- 노드가 내부 노드인 경우 노드를 엽니다.
node.close()
- 노드가 내부 노드인 경우 노드를 닫습니다.
node.toggle()
- 노드가 내부 노드인 경우 노드의 열림/닫힘 상태를 전환합니다.
node.openParents()
- 이 노드의 모든 부모를 엽니다.
node.edit()
- 이 노드를 편집 상태로 이동시킵니다. node.isEditing을 호출하면 true를 반환합니다.
node.submit(newName)
- newName 문자열을 onRename 핸들러에 제출합니다. 이 노드를 편집 상태에서 이동시킵니다.
node.reset()
- 새 이름을 제출하지 않고 이 노드를 편집 상태에서 이동시킵니다.
이벤트 핸들러
node.handleClick(event)
- 노드가 클릭될 때 표준 선택 방법을 사용하는 데 유용합니다. 메타 키가 눌러져 있으면, multiSelect()를 호출합니다. 쉬프트 키가 눌러져 있으면, selectContiguous()를 호출합니다. 그렇지 않으면, select()와 activate()를 호출합니다.
Tree APIs
노드 접근자
tree.get(id) : NodeApi | null
- visibleNodes 배열에서 id로 노드를 가져옵니다.
tree.at(index) : NodeApi | null
- visibleNodes 배열에서 인덱스로 노드를 가져옵니다.
tree.visibleNodes : NodeApi[]
- 보이는 노드의 배열을 반환합니다.
tree.firstNode : NodeApi | null
- visibleNodes 배열의 첫 번째 노드입니다.
tree.lastNode : NodeApi | null
- visibleNodes 배열의 마지막 노드입니다.
tree.focusedNode : NodeApi | null
- 현재 초점이 맞춰진 노드입니다.
tree.mostRecentNode : NodeApi | null
- 가장 최근에 선택된 노드입니다.
tree.nextNode : NodeApi | null
- focusedNode 이후의 visibleNodes 배열에서 직후의 노드입니다.
tree.prevNode : NodeApi | null
- focusedNode 이전의 visibleNodes 배열에서 직전의 노드입니다.
Focus Methods
tree.hasFocus : boolean
- 트리 내 어딘가에 포커스가 있는 경우 true를 반환합니다.
tree.focus(id)
- id로 노드에 포커스를 맞춥니다.
tree.isFocused(id) : boolean
- id로 노드에 포커스가 맞춰져 있는지 확인합니다.
tree.pageUp()
- 포커스를 한 페이지 위로 올립니다.
tree.pageDown()
- 포커스를 한 페이지 아래로 내립니다.
선택 메소드
tree.selectedIds : Set
- 선택된 아이디의 집합을 반환합니다.
tree.selectedNodes : NodeApi[]
- 선택된 노드의 배열을 반환합니다.
tree.hasNoSelection : boolean
- 트리에 선택된 것이 없으면 true를 반환합니다.
tree.hasSingleSelection : boolean
- 선택된 것이 하나만 있으면 true를 반환합니다.
tree.hasMultipleSelections : boolean
- 선택된 것이 하나 이상이면 true를 반환합니다.
tree.isSelected(id) : boolean
- id로 노드가 선택되었으면 true를 반환합니다.
tree.select(id)
- id로 노드만 선택합니다.
tree.deselect(id)
- id로 노드의 선택을 취소합니다.
tree.selectMulti(id)
- id로 노드를 선택하면서 다른 모든 선택을 유지합니다.
tree.selectContiguous(id)
- 앵커 노드에서 마지막으로 선택된 노드까지 모든 노드의 선택을 해제하고, 앵커 노드에서 id로 노드까지 모든 노드를 선택합니다.
tree.deselectAll()
- 모든 노드의 선택을 취소합니다.
tree.selectAll()
- 모든 노드를 선택합니다.
가시성
tree.open(id)
- id로 노드를 엽니다.
tree.close(id)
- id로 노드를 닫습니다.
tree.toggle(id)
- id로 노드의 열림/닫힘 상태를 전환합니다.
tree.openParents(id)
- id로 노드의 모든 부모를 엽니다.
tree.openSiblings(id)
- id로 노드의 모든 형제를 엽니다.
tree.openAll()
- 모든 내부 노드를 엽니다.
tree.closeAll()
- 모든 내부 노드를 닫습니다.
tree.isOpen(id) : boolean
- id로 노드가 열려 있으면 true를 반환합니다.
드래그 앤 드롭
tree.isDragging(id) : boolean
- id가 부여된 노드가 드래그 중이면 true를 반환합니다.
tree.willReceiveDrop(id) : boolean
- id가 부여된 노드가 내부에 있고, 드래그 중인 노드 아래에 있으면 true를 반환합니다.
스크롤
tree.scrollTo(id, [align])
- id가 부여된 노드로 스크롤합니다. 만일 이 노드가 보이지 않는다면, 이 메소드는 그것의 모든 부모를 엽니다. 정렬 인수는 "auto" | "smart" | "center" | "end" | "start" 가 될 수 있습니다.
프로퍼티
tree.isEditing : boolean
- 트리가 노드를 편집 중인 경우 true를 반환합니다.
tree.isFiltered : boolean
- searchTerm 속성이 공백이 아닌 문자열일 경우 true를 반환합니다.
tree.props : TreeProps
- 컴포넌트에 전달된 모든 속성들을 반환합니다.
tree.root : NodeApi
- 루트 NodeApi 인스턴스를 반환합니다. 그것의 자식들은 data 속성 배열의 노드 표현입니다.
