@atlaskit/editor-common
Version:
A package that contains common classes and components for editor and renderer
325 lines (323 loc) • 9.53 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
/** @jsx jsx */
import React, { memo, useCallback, useEffect, useState } from 'react';
import { css, jsx } from '@emotion/react';
import { FormattedMessage } from 'react-intl-next';
import { withAnalyticsContext, withAnalyticsEvents } from '@atlaskit/analytics-next';
import { ACTION, ACTION_SUBJECT, EVENT_TYPE, fireAnalyticsEvent } from '../../analytics';
import { DEVICE_BREAKPOINT_NUMBERS, GRID_SIZE, INLINE_SIDEBAR_HEIGHT, SIDEBAR_HEADING_WRAPPER_HEIGHT, SIDEBAR_WIDTH } from '../constants';
import useContainerWidth from '../hooks/use-container-width';
import useSelectAndFocusOnArrowNavigation from '../hooks/use-select-and-focus-on-arrow-navigation';
import { ViewMore } from '../ViewMore';
import CategoryList from './CategoryList';
import ElementList from './ElementList/ElementList';
import ElementSearch from './ElementSearch';
const wrapper = css({
width: '100%',
maxHeight: 'inherit',
overflow: 'hidden'
});
const baseBrowserContainerStyles = css({
display: 'flex',
height: '100%',
minHeight: '-webkit-fill-available'
});
const mobileElementBrowserContainer = css(baseBrowserContainerStyles, {
flexDirection: 'column'
});
const elementBrowserContainer = css(baseBrowserContainerStyles, {
flexDirection: 'row'
});
const baseSidebarStyles = css({
display: 'flex',
flexDirection: 'column',
overflowX: 'auto',
overflowY: 'hidden'
});
const mobileSideBar = css(baseSidebarStyles, {
flex: `0 0 ${INLINE_SIDEBAR_HEIGHT}`,
padding: `${"var(--ds-space-150, 12px)"} ${"var(--ds-space-150, 12px)"} 0 ${"var(--ds-space-150, 12px)"}`
});
const mobileSideBarShowCategories = css({
flex: '0 0 auto'
});
const sideBar = css(baseSidebarStyles, {
flex: "0 0 'auto'"
});
const sideBarShowCategories = css(baseSidebarStyles, {
flex: `0 0 ${SIDEBAR_WIDTH}`
});
const sidebarHeading = css({
flex: `0 0 ${SIDEBAR_HEADING_WRAPPER_HEIGHT}`,
display: 'inline-flex',
alignItems: 'center',
paddingLeft: "var(--ds-space-150, 12px)",
fontWeight: 700
});
const mobileMainContent = css({
flex: '1 1 auto',
display: 'flex',
flexDirection: 'column',
overflowY: 'auto',
height: '100%'
});
const mainContent = css(mobileMainContent, {
marginLeft: "var(--ds-space-200, 16px)",
height: 'auto'
});
const searchContainer = css({
paddingBottom: "var(--ds-space-200, 16px)"
});
const mobileCategoryListWrapper = css({
display: 'flex',
overflowX: 'auto',
padding: `${"var(--ds-space-200, 8px)"} 0 ${"var(--ds-space-200, 16px)"} 0`,
minHeight: `${GRID_SIZE * 4}px`,
overflow: '-moz-scrollbars-none',
'::-webkit-scrollbar': {
display: 'none'
},
scrollbarWidth: 'none',
MsOverflowStyle: 'none'
});
const categoryListWrapper = css(mobileCategoryListWrapper, {
padding: 0,
marginTop: "var(--ds-space-200, 24px)",
flexDirection: 'column'
});
function StatelessElementBrowser(props) {
const {
items,
onSelectItem,
onInsertItem,
viewMoreItem
} = props;
const {
containerWidth,
ContainerWidthMonitor
} = useContainerWidth();
const [columnCount, setColumnCount] = useState(1);
const {
selectedItemIndex,
focusedItemIndex,
setFocusedItemIndex,
focusOnSearch,
focusOnViewMore,
onKeyDown,
setFocusOnSearch
} = useSelectAndFocusOnArrowNavigation(items.length - 1, columnCount, !!viewMoreItem);
useEffect(() => {
fireAnalyticsEvent(props.createAnalyticsEvent)({
payload: {
action: ACTION.OPENED,
actionSubject: ACTION_SUBJECT.ELEMENT_BROWSER,
eventType: EVENT_TYPE.UI,
attributes: {
mode: props.mode
}
}
});
return () => {
fireAnalyticsEvent(props.createAnalyticsEvent)({
payload: {
action: ACTION.CLOSED,
actionSubject: ACTION_SUBJECT.ELEMENT_BROWSER,
eventType: EVENT_TYPE.UI,
attributes: {
mode: props.mode
}
}
});
};
}, [props.createAnalyticsEvent, props.mode]);
/* Only for hitting enter to select item when focused on search bar,
* The actual enter key press is handled on individual items level.
*/
const selectedItem = selectedItemIndex !== undefined ? items[selectedItemIndex] : null;
const onItemsEnterKeyPress = useCallback(e => {
if (e.key !== 'Enter') {
return;
}
if (onInsertItem && selectedItem != null) {
onInsertItem(selectedItem);
}
e.preventDefault();
}, [onInsertItem, selectedItem]);
/**
* On arrow key selection and clicks the selectedItemIndex will change.
* Making sure to update parent component.
*/
useEffect(() => {
if (onSelectItem && selectedItem != null) {
onSelectItem(selectedItem);
}
}, [onSelectItem, selectedItem]);
return jsx("div", {
css: wrapper,
"data-testid": "element-browser"
}, jsx(ContainerWidthMonitor, null), containerWidth < DEVICE_BREAKPOINT_NUMBERS.medium ? jsx(MobileBrowser, _extends({}, props, {
selectedItemIndex: selectedItemIndex,
focusedItemIndex: focusedItemIndex,
setFocusedItemIndex: setFocusedItemIndex,
focusOnSearch: focusOnSearch,
setColumnCount: setColumnCount,
setFocusOnSearch: setFocusOnSearch,
onKeyPress: onItemsEnterKeyPress,
onKeyDown: onKeyDown,
viewMoreItem: viewMoreItem,
focusOnViewMore: focusOnViewMore
})) : jsx(DesktopBrowser, _extends({}, props, {
selectedItemIndex: selectedItemIndex,
focusedItemIndex: focusedItemIndex,
setFocusedItemIndex: setFocusedItemIndex,
focusOnSearch: focusOnSearch,
setColumnCount: setColumnCount,
setFocusOnSearch: setFocusOnSearch,
onKeyPress: onItemsEnterKeyPress,
onKeyDown: onKeyDown
})));
}
function MobileBrowser({
showCategories,
showSearch,
onSearch,
mode,
categories,
onSelectCategory,
items,
onInsertItem,
selectedCategory,
selectedItemIndex,
focusedItemIndex,
setFocusedItemIndex,
focusOnSearch,
focusOnViewMore,
setColumnCount,
setFocusOnSearch,
onKeyPress,
onKeyDown,
searchTerm,
createAnalyticsEvent,
emptyStateHandler,
viewMoreItem
}) {
return jsx("div", {
css: mobileElementBrowserContainer,
onKeyDown: onKeyDown,
"data-testid": "mobile__element-browser"
}, jsx("div", {
css: showCategories ? [mobileSideBar, mobileSideBarShowCategories] : mobileSideBar
}, showSearch && jsx(ElementSearch, {
onSearch: onSearch,
onKeyDown: onKeyPress,
mode: mode,
focus: focusOnSearch,
onClick: setFocusOnSearch,
searchTerm: searchTerm,
items: items,
selectedItemIndex: selectedItemIndex
}), showCategories && jsx("nav", {
css: mobileCategoryListWrapper,
tabIndex: -1
}, jsx(CategoryList, {
categories: categories,
onSelectCategory: onSelectCategory,
selectedCategory: selectedCategory
}))), jsx("div", {
css: mobileMainContent
}, jsx(ElementList, {
items: items,
mode: mode,
onInsertItem: onInsertItem,
selectedItemIndex: selectedItemIndex,
focusedItemIndex: focusedItemIndex,
setFocusedItemIndex: setFocusedItemIndex,
setColumnCount: setColumnCount,
createAnalyticsEvent: createAnalyticsEvent,
emptyStateHandler: emptyStateHandler,
selectedCategory: selectedCategory,
searchTerm: searchTerm
})), viewMoreItem && jsx(ViewMore, {
item: viewMoreItem,
focus: focusOnViewMore
}));
}
function DesktopBrowser({
showCategories,
showSearch,
onSearch,
mode,
categories,
onSelectCategory,
items,
onInsertItem,
selectedCategory,
selectedItemIndex,
focusedItemIndex,
setFocusedItemIndex,
focusOnSearch,
setColumnCount,
setFocusOnSearch,
onKeyPress,
onKeyDown,
searchTerm,
createAnalyticsEvent,
emptyStateHandler
}) {
return jsx("div", {
css: elementBrowserContainer,
"data-testid": "desktop__element-browser"
}, showCategories && jsx("div", {
css: showCategories ? sideBarShowCategories : sideBar
}, jsx("h2", {
css: sidebarHeading,
"data-testid": "sidebar-heading",
id: "sidebar-heading"
}, jsx(FormattedMessage, {
id: "fabric.editor.elementbrowser.sidebar.heading",
defaultMessage: "Browse",
description: "Sidebar heading"
})), jsx("nav", {
role: "tablist",
"aria-labelledby": "sidebar-heading",
css: categoryListWrapper
}, jsx(CategoryList, {
categories: categories,
onSelectCategory: onSelectCategory,
selectedCategory: selectedCategory,
createAnalyticsEvent: createAnalyticsEvent
}))), jsx("div", {
css: mainContent,
onKeyDown: onKeyDown,
"data-testid": "main-content"
}, showSearch &&
// eslint-disable-next-line
jsx("div", {
css: searchContainer
}, jsx(ElementSearch, {
onSearch: onSearch,
onKeyDown: onKeyPress,
mode: mode,
focus: focusOnSearch,
onClick: setFocusOnSearch,
searchTerm: searchTerm,
items: items,
selectedItemIndex: selectedItemIndex
})), jsx(ElementList, {
items: items,
mode: mode,
onInsertItem: onInsertItem,
selectedItemIndex: selectedItemIndex,
focusedItemIndex: focusedItemIndex,
setFocusedItemIndex: setFocusedItemIndex,
setColumnCount: setColumnCount,
createAnalyticsEvent: createAnalyticsEvent,
emptyStateHandler: emptyStateHandler,
selectedCategory: selectedCategory,
searchTerm: searchTerm
})));
}
const MemoizedElementBrowser = /*#__PURE__*/memo(withAnalyticsContext({
source: 'ElementBrowser'
})(withAnalyticsEvents()(StatelessElementBrowser)));
export default MemoizedElementBrowser;