| 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 {\n warnDeprecations,\n KeyCodes,\n getId,\n getNativeProps,\n divProperties,\n classNamesFunction,\n warn,\n initializeComponentRef,\n css,\n} from '../../Utilities';\nimport { CommandButton } from '../../Button';\nimport { IPivotProps, IPivotStyleProps, IPivotStyles } from './Pivot.types';\nimport { IPivotItemProps } from './PivotItem.types';\nimport { FocusZone, FocusZoneDirection, IFocusZoneProps } from '../../FocusZone';\nimport { PivotItem } from './PivotItem';\nimport { PivotLinkFormat } from './Pivot.types';\nimport { PivotLinkSize } from './Pivot.types';\nimport { Icon } from '../../Icon';\n\nconst getClassNames = classNamesFunction<IPivotStyleProps, IPivotStyles>();\nconst PivotName = 'Pivot';\n\nexport interface IPivotState {\n selectedKey: string | undefined;\n}\n\ntype PivotLinkCollection = {\n links: IPivotItemProps[];\n keyToIndexMapping: { [key: string]: number };\n keyToTabIdMapping: { [key: string]: string };\n};\n\n/**\n * Usage:\n *\n * <Pivot>\n * <PivotItem headerText=\"Foo\">\n * <Label>Pivot #1</Label>\n * </PivotItem>\n * <PivotItem headerText=\"Bar\">\n * <Label>Pivot #2</Label>\n * </PivotItem>\n * <PivotItem headerText=\"Bas\">\n * <Label>Pivot #3</Label>\n * </PivotItem>\n * </Pivot>\n */\nexport class PivotBase extends React.Component<IPivotProps, IPivotState> {\n private _pivotId: string;\n private _focusZone = React.createRef<FocusZone>();\n private _classNames: { [key in keyof IPivotStyles]: string };\n\n constructor(props: IPivotProps) {\n super(props);\n\n initializeComponentRef(this);\n\n if (process.env.NODE_ENV !== 'production') {\n warnDeprecations(PivotName, props, {\n initialSelectedKey: 'defaultSelectedKey',\n initialSelectedIndex: 'defaultSelectedIndex',\n });\n }\n\n this._pivotId = getId(PivotName);\n const links: IPivotItemProps[] = this._getPivotLinks(props).links;\n\n // eslint-disable-next-line deprecation/deprecation\n const { defaultSelectedKey = props.initialSelectedKey, defaultSelectedIndex = props.initialSelectedIndex } = props;\n\n let selectedKey: string | undefined;\n\n if (defaultSelectedKey) {\n selectedKey = defaultSelectedKey;\n } else if (typeof defaultSelectedIndex === 'number') {\n selectedKey = links[defaultSelectedIndex].itemKey!;\n } else if (links.length) {\n selectedKey = links[0].itemKey!;\n }\n\n this.state = {\n selectedKey,\n };\n }\n\n /**\n * Sets focus to the first pivot tab.\n */\n public focus(): void {\n if (this._focusZone.current) {\n this._focusZone.current.focus();\n }\n }\n\n public render(): JSX.Element {\n const { focusZoneProps } = this.props;\n const linkCollection = this._getPivotLinks(this.props);\n const selectedKey = this._getSelectedKey(linkCollection);\n\n const divProps = getNativeProps<React.HTMLAttributes<HTMLDivElement>>(this.props, divProperties);\n\n this._classNames = this._getClassNames(this.props);\n\n return (\n <div role=\"toolbar\" {...divProps}>\n {this._renderPivotLinks(linkCollection, selectedKey, focusZoneProps)}\n {selectedKey &&\n linkCollection.links.map(\n (link) =>\n (link.alwaysRender === true || selectedKey === link.itemKey) &&\n this._renderPivotItem(linkCollection, link.itemKey, selectedKey === link.itemKey),\n )}\n </div>\n );\n }\n\n private _getSelectedKey(linkCollection: PivotLinkCollection) {\n const { selectedKey: propsSelectedKey } = this.props;\n\n if (this._isKeyValid(linkCollection, propsSelectedKey) || propsSelectedKey === null) {\n return propsSelectedKey;\n }\n\n const { selectedKey: stateSelectedKey } = this.state;\n if (this._isKeyValid(linkCollection, stateSelectedKey)) {\n return stateSelectedKey;\n }\n\n if (linkCollection.links.length) {\n return linkCollection.links[0].itemKey;\n }\n\n return undefined;\n }\n\n /**\n * Renders the set of links to route between pivots\n */\n private _renderPivotLinks(\n linkCollection: PivotLinkCollection,\n selectedKey: string | null | undefined,\n focusZoneProps: IFocusZoneProps | undefined,\n ): JSX.Element {\n const items = linkCollection.links.map((l) => this._renderPivotLink(linkCollection, l, selectedKey));\n\n return (\n <FocusZone\n role=\"tablist\"\n componentRef={this._focusZone}\n direction={FocusZoneDirection.horizontal}\n {...focusZoneProps}\n className={css(this._classNames.root, focusZoneProps?.className)}\n >\n {items}\n </FocusZone>\n );\n }\n\n private _renderPivotLink = (\n linkCollection: PivotLinkCollection,\n link: IPivotItemProps,\n selectedKey: string | null | undefined,\n ): JSX.Element => {\n const { itemKey, headerButtonProps } = link;\n const tabId = linkCollection.keyToTabIdMapping[itemKey!];\n const { onRenderItemLink } = link;\n let linkContent: JSX.Element | null;\n const isSelected: boolean = selectedKey === itemKey;\n\n if (onRenderItemLink) {\n linkContent = onRenderItemLink(link, this._renderLinkContent);\n } else {\n linkContent = this._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 return (\n <CommandButton\n {...headerButtonProps}\n id={tabId}\n key={itemKey}\n className={isSelected ? this._classNames.linkIsSelected : this._classNames.link}\n // eslint-disable-next-line react/jsx-no-bind\n onClick={this._onLinkClick.bind(this, itemKey)}\n // eslint-disable-next-line react/jsx-no-bind\n onKeyDown={this._onKeyDown.bind(this, itemKey)}\n aria-label={link.ariaLabel}\n role=\"tab\"\n aria-selected={isSelected}\n name={link.headerText}\n keytipProps={link.keytipProps}\n data-content={contentString}\n >\n {linkContent}\n </CommandButton>\n );\n };\n\n private _renderLinkContent = (link: IPivotItemProps): JSX.Element => {\n const { itemCount, itemIcon, headerText } = link;\n const classNames = this._classNames;\n\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 /**\n * Renders a Pivot Item\n */\n private _renderPivotItem(\n linkCollection: PivotLinkCollection,\n itemKey: string | undefined,\n isActive: boolean,\n ): JSX.Element | null {\n if (this.props.headersOnly || !itemKey) {\n return null;\n }\n\n const index = linkCollection.keyToIndexMapping[itemKey];\n const selectedTabId = linkCollection.keyToTabIdMapping[itemKey];\n\n return (\n <div\n role=\"tabpanel\"\n hidden={!isActive}\n key={itemKey}\n aria-hidden={!isActive}\n aria-labelledby={selectedTabId}\n className={this._classNames.itemContainer}\n >\n {React.Children.toArray(this.props.children)[index]}\n </div>\n );\n }\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\n */\n private _getPivotLinks(props: IPivotProps): PivotLinkCollection {\n const result: PivotLinkCollection = {\n links: [],\n keyToIndexMapping: {},\n keyToTabIdMapping: {},\n };\n\n React.Children.map(React.Children.toArray(props.children), (child: React.ReactChild, index: number) => {\n if (_isPivotItem(child)) {\n const pivotItem = child;\n const { linkText, ...pivotItemProps } = pivotItem.props;\n const itemKey = pivotItem.props.itemKey || index.toString();\n\n result.links.push({\n // Use linkText (deprecated) if headerText is not provided\n headerText: linkText,\n ...pivotItemProps,\n itemKey: itemKey,\n });\n result.keyToIndexMapping[itemKey] = index;\n result.keyToTabIdMapping[itemKey] = this._getTabId(itemKey, index);\n } else {\n warn('The children of a Pivot component must be of type PivotItem to be rendered.');\n }\n });\n\n return result;\n }\n\n /**\n * Generates the Id for the tab button.\n */\n private _getTabId(itemKey: string, index: number): string {\n if (this.props.getTabId) {\n return this.props.getTabId(itemKey, index);\n }\n\n return this._pivotId + `-Tab${index}`;\n }\n\n /**\n * whether the key exists in the pivot items.\n */\n private _isKeyValid(linkCollection: PivotLinkCollection, itemKey: string | null | undefined): boolean {\n return itemKey !== undefined && itemKey !== null && linkCollection.keyToIndexMapping[itemKey] !== undefined;\n }\n\n /**\n * Handles the onClick event on PivotLinks\n */\n private _onLinkClick(itemKey: string, ev: React.MouseEvent<HTMLElement>): void {\n ev.preventDefault();\n this._updateSelectedItem(itemKey, ev);\n }\n\n /**\n * Handle the onKeyDown event on the PivotLinks\n */\n private _onKeyDown(itemKey: string, ev: React.KeyboardEvent<HTMLElement>): void {\n if (ev.which === KeyCodes.enter) {\n ev.preventDefault();\n this._updateSelectedItem(itemKey);\n }\n }\n\n /**\n * Updates the state with the new selected index\n */\n private _updateSelectedItem(itemKey: string, ev?: React.MouseEvent<HTMLElement>): void {\n this.setState({\n selectedKey: itemKey,\n });\n\n const linkCollection = this._getPivotLinks(this.props);\n\n if (this.props.onLinkClick && linkCollection.keyToIndexMapping[itemKey] >= 0) {\n const index = linkCollection.keyToIndexMapping[itemKey];\n\n // React.Element<any> cannot directly convert to PivotItem.\n const item = React.Children.toArray(this.props.children)[index];\n\n if (_isPivotItem(item)) {\n this.props.onLinkClick(item, ev);\n }\n }\n }\n\n private _getClassNames(props: IPivotProps): { [key in keyof IPivotStyles]: string } {\n const { theme } = props;\n const rootIsLarge: boolean = props.linkSize === PivotLinkSize.large;\n const rootIsTabs: boolean = props.linkFormat === PivotLinkFormat.tabs;\n\n return getClassNames(props.styles!, {\n theme: theme!,\n rootIsLarge,\n rootIsTabs,\n });\n }\n}\n\nfunction _isPivotItem(item: React.ReactNode): item is PivotItem {\n // In theory, we should be able to just check item.type === PivotItem.\n // However, under certain unclear circumstances (see https://github.com/microsoft/fluentui/issues/10785),\n // the object identity is different despite the function implementation being the same.\n return (\n !!item &&\n typeof item === 'object' &&\n !!(item as React.ReactElement).type &&\n // Casting as an any to avoid [ object Object ] errors.\n ((item as React.ReactElement).type as any).name === (PivotItem as any).name\n );\n}\n"]} |