Files
swagger-ui/src/core/components/operation-summary-path.jsx
Mingwei Samuel f88334a47d fix(paths): break long paths with <wbr> (#7516)
- use <wbr> instead of ZERO-WIDTH SPACE (U+200B) to break segments 
- remove no-longer-needed onCopyCapture listener which previously  stripped ZWSPs
- update's deep-link.jsx's `text` prop type to accept `PropType.node`  to allow the above.

Closes #7513
Co-authored-by: Vladimir Gorej <vladimir.gorej@gmail.com>
2021-09-30 15:52:33 +03:00

55 lines
1.4 KiB
JavaScript

import React, { PureComponent } from "react"
import PropTypes from "prop-types"
import { Iterable } from "immutable"
import { createDeepLinkPath } from "core/utils"
import ImPropTypes from "react-immutable-proptypes"
export default class OperationSummaryPath extends PureComponent{
static propTypes = {
specPath: ImPropTypes.list.isRequired,
operationProps: PropTypes.instanceOf(Iterable).isRequired,
getComponent: PropTypes.func.isRequired,
}
render(){
let {
getComponent,
operationProps,
} = this.props
let {
deprecated,
isShown,
path,
tag,
operationId,
isDeepLinkingEnabled,
} = operationProps.toJS()
/**
* Add <wbr> word-break elements between each segment, before the slash
* to allow browsers an opportunity to break long paths into sensible segments.
*/
const pathParts = path.split(/(?=\/)/g)
for (let i = 1; i < pathParts.length; i += 2) {
pathParts.splice(i, 0, <wbr key={i} />)
}
const DeepLink = getComponent( "DeepLink" )
return(
<span className={ deprecated ? "opblock-summary-path__deprecated" : "opblock-summary-path" }
data-path={path}>
<DeepLink
enabled={isDeepLinkingEnabled}
isShown={isShown}
path={createDeepLinkPath(`${tag}/${operationId}`)}
text={pathParts} />
</span>
)
}
}