overleaf/services/web/frontend/js/features/symbol-palette/components/symbol-palette-body.js
Alf Eaton 0360d01aeb Add Symbol Palette component, data and stories (#4027)
GitOrigin-RevId: b00128bc087e2ebe9911fa19b7e62fd4bb492226
2021-05-14 02:09:50 +00:00

53 lines
1.4 KiB
JavaScript

import React from 'react'
import { TabPanels, TabPanel } from '@reach/tabs'
import { useTranslation } from 'react-i18next'
import PropTypes from 'prop-types'
import SymbolPaletteItems from './symbol-palette-items'
export default function SymbolPaletteBody({
categories,
categorisedSymbols,
filteredSymbols,
handleSelect,
focusInput,
}) {
const { t } = useTranslation()
// not searching: show the symbols grouped by category
if (!filteredSymbols) {
return (
<TabPanels>
{categories.map(category => (
<TabPanel key={category.id} tabIndex={-1}>
<SymbolPaletteItems
items={categorisedSymbols[category.id]}
handleSelect={handleSelect}
focusInput={focusInput}
/>
</TabPanel>
))}
</TabPanels>
)
}
// searching with no matches: show a message
if (!filteredSymbols.length) {
return <div className="symbol-palette-empty">{t('no_symbols_found')}</div>
}
// searching with matches: show the matched symbols
return (
<SymbolPaletteItems
items={filteredSymbols}
handleSelect={handleSelect}
focusInput={focusInput}
/>
)
}
SymbolPaletteBody.propTypes = {
categories: PropTypes.arrayOf(PropTypes.object).isRequired,
categorisedSymbols: PropTypes.object,
filteredSymbols: PropTypes.arrayOf(PropTypes.object),
handleSelect: PropTypes.func.isRequired,
focusInput: PropTypes.func.isRequired,
}