| 1 | {"version":3,"file":"DocumentCardTitle.base.js","sourceRoot":"../src/","sources":["components/DocumentCard/DocumentCardTitle.base.tsx"],"names":[],"mappings":"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","sourcesContent":["import * as React from 'react';\n\nimport { Async, EventGroup, classNamesFunction } from '../../Utilities';\nimport {\n IDocumentCardTitleProps,\n IDocumentCardTitleStyleProps,\n IDocumentCardTitleStyles,\n} from './DocumentCardTitle.types';\nimport { IProcessedStyleSet } from '../../Styling';\nimport { initializeComponentRef } from '@uifabric/utilities';\n\nconst getClassNames = classNamesFunction<IDocumentCardTitleStyleProps, IDocumentCardTitleStyles>();\n\nexport interface IDocumentCardTitleState {\n truncatedTitleFirstPiece?: string;\n truncatedTitleSecondPiece?: string;\n clientWidth?: number;\n previousTitle: string;\n\n /**\n * In measuring, it will render a same style text with whiteSpace: 'nowrap', to get overflow rate.\n * So that the logic can predict truncated text well.\n */\n needMeasurement: boolean;\n}\n\nconst TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD = 5;\n\n/**\n * {@docCategory DocumentCard}\n */\nexport class DocumentCardTitleBase extends React.Component<IDocumentCardTitleProps, IDocumentCardTitleState> {\n private _titleElement = React.createRef<HTMLDivElement>();\n private _measureTitleElement = React.createRef<HTMLDivElement>();\n\n private _titleTruncationTimer: number;\n private _classNames: IProcessedStyleSet<IDocumentCardTitleStyles>;\n\n private _async: Async;\n private _events: EventGroup;\n\n constructor(props: IDocumentCardTitleProps) {\n super(props);\n\n initializeComponentRef(this);\n this._async = new Async(this);\n this._events = new EventGroup(this);\n\n this.state = {\n truncatedTitleFirstPiece: '',\n truncatedTitleSecondPiece: '',\n previousTitle: props.title,\n needMeasurement: !!props.shouldTruncate,\n };\n }\n\n public componentDidUpdate(): void {\n if (this.props.title !== this.state.previousTitle) {\n this.setState({\n truncatedTitleFirstPiece: undefined,\n truncatedTitleSecondPiece: undefined,\n clientWidth: undefined,\n previousTitle: this.props.title,\n needMeasurement: !!this.props.shouldTruncate,\n });\n }\n\n this._events.off(window, 'resize', this._updateTruncation);\n\n if (this.props.shouldTruncate) {\n this._truncateTitle();\n requestAnimationFrame(this._shrinkTitle);\n this._events.on(window, 'resize', this._updateTruncation);\n }\n }\n\n public componentDidMount(): void {\n if (this.props.shouldTruncate) {\n this._truncateTitle();\n this._events.on(window, 'resize', this._updateTruncation);\n }\n }\n\n public componentWillUnmount(): void {\n this._events.dispose();\n this._async.dispose();\n }\n\n public render(): JSX.Element {\n const { title, shouldTruncate, showAsSecondaryTitle, styles, theme, className } = this.props;\n const { truncatedTitleFirstPiece, truncatedTitleSecondPiece, needMeasurement } = this.state;\n\n this._classNames = getClassNames(styles!, {\n theme: theme!,\n className,\n showAsSecondaryTitle,\n });\n\n let documentCardTitle;\n if (needMeasurement) {\n documentCardTitle = (\n <div\n className={this._classNames.root}\n ref={this._measureTitleElement}\n title={title}\n style={{ whiteSpace: 'nowrap' }}\n >\n {title}\n </div>\n );\n } else if (shouldTruncate && truncatedTitleFirstPiece && truncatedTitleSecondPiece) {\n documentCardTitle = (\n <div className={this._classNames.root} ref={this._titleElement} title={title}>\n {truncatedTitleFirstPiece}\n …\n {truncatedTitleSecondPiece}\n </div>\n );\n } else {\n documentCardTitle = (\n <div className={this._classNames.root} ref={this._titleElement} title={title}>\n {title}\n </div>\n );\n }\n return documentCardTitle;\n }\n\n // Truncate logic here way can't handle the case that chars with different widths are mixed very well.\n // Let _shrinkTitle take care of that.\n private _truncateTitle = (): void => {\n if (!this.state.needMeasurement) {\n return;\n }\n\n this._async.requestAnimationFrame(this._truncateWhenInAnimation);\n };\n\n private _truncateWhenInAnimation: () => void = () => {\n const originalTitle = this.props.title;\n const element: HTMLDivElement | null = this._measureTitleElement.current;\n\n if (element) {\n const style: CSSStyleDeclaration = getComputedStyle(element);\n if (style.width && style.lineHeight && style.height) {\n const { clientWidth, scrollWidth } = element;\n const lines: number = Math.floor(\n (parseInt(style.height, 10) + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD) / parseInt(style.lineHeight, 10),\n );\n\n // Use overflow to predict truncated length.\n // Take an example.The text is: A text with A very long text that need to be truncated.ppt\n // if container is like\n // |A text with A very| long text that need to be truncated.ppt\n // The scroll width is 58, (take two | out of length)\n // The client width is 18\n // the overflow rate is scrollWidth/clientWidth which should be close to length(overflowText)/length(visualText)\n // And the length of remaining text should be truncated is (original Length)/(58/18) -3 = 15.\n // So that the logic can predict truncated text well.\n // first piece will be `A text `, * second piece will be `ated.ppt`\n // |A text ...ated.ppt|\n const overFlowRate: number = scrollWidth / (parseInt(style.width, 10) * lines);\n\n if (overFlowRate > 1) {\n const truncatedLength: number = originalTitle.length / overFlowRate - 3 /** Saved for separator */;\n return this.setState({\n truncatedTitleFirstPiece: originalTitle.slice(0, truncatedLength / 2),\n truncatedTitleSecondPiece: originalTitle.slice(originalTitle.length - truncatedLength / 2),\n clientWidth,\n needMeasurement: false,\n });\n }\n }\n }\n\n return this.setState({ needMeasurement: false });\n };\n\n private _shrinkTitle: () => void = () => {\n const { truncatedTitleFirstPiece, truncatedTitleSecondPiece } = this.state;\n if (truncatedTitleFirstPiece && truncatedTitleSecondPiece) {\n const titleElement = this._titleElement.current;\n\n if (!titleElement) {\n return;\n }\n\n if (\n titleElement.scrollHeight > titleElement.clientHeight + TRUNCATION_VERTICAL_OVERFLOW_THRESHOLD ||\n titleElement.scrollWidth > titleElement.clientWidth\n ) {\n this.setState({\n truncatedTitleFirstPiece: truncatedTitleFirstPiece.slice(0, truncatedTitleFirstPiece.length - 1),\n truncatedTitleSecondPiece: truncatedTitleSecondPiece.slice(1),\n });\n }\n }\n };\n\n private _updateTruncation(): void {\n this._async.requestAnimationFrame(() => {\n // Only update truncation if the title's size has changed since the last time we truncated\n if (this._titleElement.current) {\n const clientWidth: number = this._titleElement.current.clientWidth;\n // Throttle truncation so that it doesn't happen during a window resize\n clearTimeout(this._titleTruncationTimer);\n if (this.state.clientWidth !== clientWidth) {\n this._titleTruncationTimer = this._async.setTimeout(\n () =>\n this.setState({\n truncatedTitleFirstPiece: undefined,\n truncatedTitleSecondPiece: undefined,\n needMeasurement: true,\n }),\n 250,\n );\n }\n }\n });\n }\n}\n"]} |