overleaf/services/web/frontend/js/features/file-tree/contexts/file-tree-selectable.js
Timothée Alby 420aa4a657 Merge pull request #3232 from overleaf/ta-file-tree-react
React File Tree

GitOrigin-RevId: fb3141ba8cd9ca0d68e87edb74764a360144c8fe
2020-11-27 03:05:05 +00:00

167 lines
4.4 KiB
JavaScript

import React, { createContext, useContext, useReducer, useEffect } from 'react'
import PropTypes from 'prop-types'
import classNames from 'classnames'
import { findInTree } from '../util/find-in-tree'
import { useFileTreeMutable } from './file-tree-mutable'
const FileTreeSelectableContext = createContext(new Set())
const ACTION_TYPES = {
SELECT: 'SELECT',
MULTI_SELECT: 'MULTI_SELECT',
UNSELECT: 'UNSELECT'
}
function fileTreeSelectableReadWriteReducer(selectedEntityIds, action) {
switch (action.type) {
case ACTION_TYPES.SELECT: {
// reset selection
return new Set([action.id])
}
case ACTION_TYPES.MULTI_SELECT: {
const selectedEntityIdsCopy = new Set(selectedEntityIds)
if (selectedEntityIdsCopy.has(action.id)) {
// entity already selected
if (selectedEntityIdsCopy.size > 1) {
// entity already multi-selected; remove from set
selectedEntityIdsCopy.delete(action.id)
}
} else {
// entity not selected: add to set
selectedEntityIdsCopy.add(action.id)
}
return selectedEntityIdsCopy
}
case ACTION_TYPES.UNSELECT: {
const selectedEntityIdsCopy = new Set(selectedEntityIds)
selectedEntityIdsCopy.delete(action.id)
return selectedEntityIdsCopy
}
default:
throw new Error(`Unknown selectable action type: ${action.type}`)
}
}
function fileTreeSelectableReadOnlyReducer(selectedEntityIds, action) {
switch (action.type) {
case ACTION_TYPES.SELECT:
return new Set([action.id])
case ACTION_TYPES.MULTI_SELECT:
case ACTION_TYPES.UNSELECT:
return selectedEntityIds
default:
throw new Error(`Unknown selectable action type: ${action.type}`)
}
}
export function FileTreeSelectableProvider({
hasWritePermissions,
initialSelectedEntityId = null,
onSelect,
children
}) {
const [selectedEntityIds, dispatch] = useReducer(
hasWritePermissions
? fileTreeSelectableReadWriteReducer
: fileTreeSelectableReadOnlyReducer,
initialSelectedEntityId ? new Set([initialSelectedEntityId]) : new Set()
)
const { fileTreeData } = useFileTreeMutable()
// calls `onSelect` on entities selection
useEffect(
() => {
const selectedEntities = Array.from(selectedEntityIds).map(id =>
findInTree(fileTreeData, id)
)
onSelect(selectedEntities)
},
[fileTreeData, selectedEntityIds]
)
useEffect(() => {
// listen for `editor.openDoc` and selected that doc
function handleOpenDoc(ev) {
dispatch({ type: ACTION_TYPES.SELECT, id: ev.detail })
}
window.addEventListener('editor.openDoc', handleOpenDoc)
return () => window.removeEventListener('editor.openDoc', handleOpenDoc)
}, [])
return (
<FileTreeSelectableContext.Provider value={{ selectedEntityIds, dispatch }}>
{children}
</FileTreeSelectableContext.Provider>
)
}
FileTreeSelectableProvider.propTypes = {
hasWritePermissions: PropTypes.bool.isRequired,
initialSelectedEntityId: PropTypes.string,
onSelect: PropTypes.func.isRequired,
children: PropTypes.oneOfType([
PropTypes.arrayOf(PropTypes.node),
PropTypes.node
]).isRequired
}
export function useSelectableEntity(id) {
const { selectedEntityIds, dispatch } = useContext(FileTreeSelectableContext)
const isSelected = selectedEntityIds.has(id)
function selectOrMultiSelectEntity(ev) {
const isMultiSelect = ev.ctrlKey || ev.metaKey
const actionType = isMultiSelect
? ACTION_TYPES.MULTI_SELECT
: ACTION_TYPES.SELECT
dispatch({ type: actionType, id })
}
function handleClick(ev) {
selectOrMultiSelectEntity(ev)
}
function handleKeyPress(ev) {
if (ev.key === 'Enter' || ev.key === ' ') {
selectOrMultiSelectEntity(ev)
}
}
function handleContextMenu(ev) {
// make sure the right-clicked entity gets selected
if (!selectedEntityIds.has(id)) selectOrMultiSelectEntity(ev)
}
return {
isSelected,
props: {
className: classNames({ selected: isSelected }),
'aria-selected': isSelected,
onClick: handleClick,
onContextMenu: handleContextMenu,
onKeyPress: handleKeyPress
}
}
}
export function useFileTreeSelectable() {
const { selectedEntityIds, dispatch } = useContext(FileTreeSelectableContext)
function unselect(id) {
dispatch({ type: ACTION_TYPES.UNSELECT, id })
}
return {
selectedEntityIds,
unselect
}
}