| 1 | {"version":3,"file":"Pivot.base.js","sourceRoot":"../src/","sources":["components/Pivot/Pivot.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\nimport { useControllableValue, useId } from '@fluentui/react-hooks';\nimport { classNamesFunction, css, divProperties, getNativeProps, getRTL, KeyCodes, warn } from '@fluentui/utilities';\nimport { CommandButton } from '../../Button';\nimport { useOverflow } from '../../utilities/useOverflow';\nimport { FocusZone, FocusZoneDirection } from '../../FocusZone';\nimport { DirectionalHint } from '../ContextualMenu/ContextualMenu.types';\nimport { Icon } from '../Icon/Icon';\nimport { PivotItem } from './PivotItem';\nimport type { IButton } from '../../Button';\nimport type { IFocusZone } from '../../FocusZone';\nimport type { IContextualMenuProps } from '../ContextualMenu/ContextualMenu.types';\nimport type { IPivot, IPivotProps, IPivotStyleProps, IPivotStyles } from './Pivot.types';\nimport type { IPivotItemProps } from './PivotItem.types';\n\nconst getClassNames = classNamesFunction<IPivotStyleProps, IPivotStyles>();\n\nconst COMPONENT_NAME = 'Pivot';\n\ntype PivotLinkCollection = {\n links: IPivotItemProps[];\n keyToIndexMapping: { [key: string]: number };\n keyToTabIdMapping: { [key: string]: string };\n};\n\nconst getTabId = (props: IPivotProps, pivotId: string, itemKey: string, index: number): string => {\n if (props.getTabId) {\n return props.getTabId(itemKey, index);\n }\n return pivotId + `-Tab${index}`;\n};\n\n// Gets the set of PivotLinks as array of IPivotItemProps\n// The set of Links is determined by child components of type PivotItem\nconst getLinkItems = (props: IPivotProps, pivotId: string): PivotLinkCollection => {\n const result: PivotLinkCollection = {\n links: [],\n keyToIndexMapping: {},\n keyToTabIdMapping: {},\n };\n\n React.Children.forEach(React.Children.toArray(props.children), (child: React.ReactNode, index: number) => {\n if (isPivotItem(child)) {\n // eslint-disable-next-line deprecation/deprecation\n const { linkText, ...pivotItemProps } = child.props;\n const itemKey = child.props.itemKey || index.toString();\n result.links.push({\n headerText: linkText,\n ...pivotItemProps,\n itemKey: itemKey,\n });\n result.keyToIndexMapping[itemKey] = index;\n result.keyToTabIdMapping[itemKey] = getTabId(props, pivotId, itemKey, index);\n } else if (child) {\n warn('The children of a Pivot component must be of type PivotItem to be rendered.');\n }\n });\n return result;\n};\n\nconst isPivotItem = (item: React.ReactNode): item is PivotItem => {\n return React.isValidElement(item) && (item.type as React.ComponentType)?.name === PivotItem.name;\n};\n\nexport const PivotBase: React.FunctionComponent<IPivotProps> = React.forwardRef<HTMLDivElement, IPivotProps>(\n (props, ref) => {\n const focusZoneRef = React.useRef<IFocusZone>(null);\n const overflowMenuButtonComponentRef = React.useRef<IButton>(null);\n const pivotId: string = useId('Pivot');\n\n const [selectedKey, setSelectedKey] = useControllableValue(props.selectedKey, props.defaultSelectedKey);\n\n const { componentRef, theme, linkSize, linkFormat, overflowBehavior, overflowAriaLabel, focusZoneProps } = props;\n\n let classNames: { [key in keyof IPivotStyles]: string };\n const nameProps = {\n 'aria-label': props['aria-label'],\n 'aria-labelledby': props['aria-labelledby'],\n };\n const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(props, divProperties, [\n 'aria-label',\n 'aria-labelledby',\n ]);\n\n let linkCollection = getLinkItems(props, pivotId);\n\n React.useImperativeHandle(componentRef as React.RefObject<IPivot>, () => ({\n focus: () => {\n focusZoneRef.current?.focus();\n },\n }));\n\n const renderLinkContent = (link?: IPivotItemProps): JSX.Element | null => {\n if (!link) {\n return null;\n }\n\n const { itemCount, itemIcon, headerText } = link;\n return (\n <span className={classNames.linkContent}>\n {itemIcon !== undefined && (\n <span className={classNames.icon}>\n <Icon iconName={itemIcon} />\n </span>\n )}\n {headerText !== undefined && <span className={classNames.text}> {link.headerText}</span>}\n {itemCount !== undefined && <span className={classNames.count}> ({itemCount})</span>}\n </span>\n );\n };\n\n const renderPivotLink = (\n renderLinkCollection: PivotLinkCollection,\n link: IPivotItemProps,\n renderPivotLinkSelectedKey: string | null | undefined,\n className: string,\n ): JSX.Element => {\n const { itemKey, headerButtonProps, onRenderItemLink } = link;\n const tabId = renderLinkCollection.keyToTabIdMapping[itemKey!];\n let linkContent: JSX.Element | null;\n const isSelected: boolean = renderPivotLinkSelectedKey === itemKey;\n\n if (onRenderItemLink) {\n linkContent = onRenderItemLink(link, renderLinkContent);\n } else {\n linkContent = renderLinkContent(link);\n }\n\n let contentString = link.headerText || '';\n contentString += link.itemCount ? ' (' + link.itemCount + ')' : '';\n // Adding space supplementary for icon\n contentString += link.itemIcon ? ' xx' : '';\n\n const itemSemantics =\n link.role && link.role !== 'tab'\n ? {\n role: link.role,\n }\n : {\n role: 'tab',\n 'aria-selected': isSelected,\n };\n\n return (\n <CommandButton\n {...headerButtonProps}\n {...itemSemantics}\n id={tabId}\n key={itemKey}\n className={css(className, isSelected && classNames.linkIsSelected)}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={(ev: React.MouseEvent<HTMLElement>) => onLinkClick(itemKey!, ev)}\n // eslint-disable-next-line react/jsx-no-bind\n onKeyDown={(ev: React.KeyboardEvent<HTMLElement>) => onKeyDown(itemKey!, ev)}\n aria-label={link.ariaLabel}\n name={link.headerText}\n keytipProps={link.keytipProps}\n data-content={contentString}\n >\n {linkContent}\n </CommandButton>\n );\n };\n\n const onLinkClick = (itemKey: string, ev: React.MouseEvent<HTMLElement>): void => {\n ev.preventDefault();\n updateSelectedItem(itemKey, ev);\n };\n\n const onKeyDown = (itemKey: string, ev: React.KeyboardEvent<HTMLElement>): void => {\n // eslint-disable-next-line deprecation/deprecation\n if (ev.which === KeyCodes.enter) {\n ev.preventDefault();\n updateSelectedItem(itemKey);\n }\n };\n\n const updateSelectedItem = (itemKey: string, ev?: React.MouseEvent<HTMLElement>): void => {\n setSelectedKey(itemKey);\n linkCollection = getLinkItems(props, pivotId);\n if (props.onLinkClick && linkCollection.keyToIndexMapping[itemKey] >= 0) {\n const selectedIndex = linkCollection.keyToIndexMapping[itemKey];\n const item = React.Children.toArray(props.children)[selectedIndex];\n if (isPivotItem(item)) {\n props.onLinkClick(item, ev);\n }\n }\n\n overflowMenuButtonComponentRef.current?.dismissMenu();\n };\n\n const renderPivotItem = (itemKey: string | undefined, isActive: boolean): JSX.Element | null => {\n if (props.headersOnly || !itemKey) {\n return null;\n }\n\n const index = linkCollection.keyToIndexMapping[itemKey];\n const selectedTabId = linkCollection.keyToTabIdMapping[itemKey];\n return (\n <div\n role=\"tabpanel\"\n hidden={!isActive}\n key={itemKey}\n aria-hidden={!isActive}\n aria-labelledby={selectedTabId}\n className={classNames.itemContainer}\n >\n {React.Children.toArray(props.children)[index]}\n </div>\n );\n };\n\n const isKeyValid = (itemKey: string | null | undefined): boolean => {\n return itemKey === null || (itemKey !== undefined && linkCollection.keyToIndexMapping[itemKey] !== undefined);\n };\n\n const getSelectedKey = () => {\n if (isKeyValid(selectedKey)) {\n return selectedKey;\n }\n if (linkCollection.links.length) {\n return linkCollection.links[0].itemKey;\n }\n return undefined;\n };\n\n classNames = getClassNames(props.styles!, {\n theme: theme!,\n linkSize,\n linkFormat,\n });\n\n const renderedSelectedKey = getSelectedKey();\n const renderedSelectedIndex = renderedSelectedKey ? linkCollection.keyToIndexMapping[renderedSelectedKey] : 0;\n\n const items = linkCollection.links.map(l =>\n renderPivotLink(linkCollection, l, renderedSelectedKey, classNames.link),\n );\n\n // The overflow menu starts empty and items[] is updated as the overflow items change\n const overflowMenuProps: IContextualMenuProps = React.useMemo(\n () => ({\n items: [],\n alignTargetEdge: true,\n directionalHint: DirectionalHint.bottomRightEdge,\n }),\n [],\n );\n\n const { menuButtonRef: overflowMenuButtonRef } = useOverflow({\n onOverflowItemsChanged: (overflowIndex, elements) => {\n // Set data-is-overflowing on each item\n elements.forEach(({ ele, isOverflowing }) => (ele.dataset.isOverflowing = `${isOverflowing}`));\n\n // Update the menu items\n overflowMenuProps.items = linkCollection.links\n .slice(overflowIndex)\n .filter(link => link.itemKey !== renderedSelectedKey)\n .map((link, index) => {\n link.role = 'menuitem';\n\n return {\n key: link.itemKey || `${overflowIndex + index}`,\n onRender: () => renderPivotLink(linkCollection, link, renderedSelectedKey, classNames.linkInMenu),\n };\n });\n },\n rtl: getRTL(theme),\n pinnedIndex: renderedSelectedIndex,\n });\n\n return (\n <div ref={ref} {...divProps}>\n <FocusZone\n componentRef={focusZoneRef}\n role=\"tablist\"\n {...nameProps}\n direction={FocusZoneDirection.horizontal}\n {...focusZoneProps}\n className={css(classNames.root, focusZoneProps?.className)}\n >\n {items}\n {overflowBehavior === 'menu' && (\n <CommandButton\n className={css(classNames.link, classNames.overflowMenuButton)}\n elementRef={overflowMenuButtonRef}\n componentRef={overflowMenuButtonComponentRef}\n menuProps={overflowMenuProps}\n menuIconProps={{ iconName: 'More', style: { color: 'inherit' } }}\n ariaLabel={overflowAriaLabel}\n />\n )}\n </FocusZone>\n {renderedSelectedKey &&\n linkCollection.links.map(\n link =>\n (link.alwaysRender === true || renderedSelectedKey === link.itemKey) &&\n renderPivotItem(link.itemKey, renderedSelectedKey === link.itemKey),\n )}\n </div>\n );\n },\n);\nPivotBase.displayName = COMPONENT_NAME;\n"]} |