import { Dispatch } from 'redux';
import { navigationNotAvailable } from 'store/navigation/navigation-action';
-type CssRules = 'root' | 'space';
+type CssRules = 'root' | 'inlineRoot' | 'space' | 'inline';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
root: {
boxSizing: 'border-box',
overflow: 'auto',
- padding: theme.spacing.unit
+ padding: theme.spacing.unit,
+ },
+ inlineRoot: {
+ padding: "3px",
+ display: "inline",
},
space: {
- marginLeft: '15px'
- }
+ marginLeft: '15px',
+ },
+ inline: {
+ display: 'inline',
+ },
});
export interface CodeSnippetDataProps {
apiResponse?: boolean;
linked?: boolean;
children?: JSX.Element;
+ inline?: boolean;
}
interface CodeSnippetAuthProps {
});
export const CodeSnippet = withStyles(styles)(connect(mapStateToProps)(
- ({ classes, lines, linked, className, apiResponse, dispatch, auth, children }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) =>
+ ({ classes, lines, linked, className, apiResponse, dispatch, auth, children, inline }: CodeSnippetProps & CodeSnippetAuthProps & DispatchProp) =>
<Typography
- component="div"
- className={classNames(classes.root, className)}>
- <Typography className={apiResponse ? classes.space : className} component="pre">
+ component="div"
+ className={classNames([classes.root, className, inline ? classes.inlineRoot : undefined])}>
+ <Typography className={apiResponse ? classes.space : classNames([className, inline ? classes.inline : undefined])} component="pre">
{children}
{linked ?
lines.map((line, index) => <React.Fragment key={index}>{renderLinks(auth, dispatch)(line)}{`\n`}</React.Fragment>) :
}
</Typography>
</Typography>
- ));
+));
-const renderLinks = (auth: FederationConfig, dispatch: Dispatch) => (text: string): JSX.Element => {
+export const renderLinks = (auth: FederationConfig, dispatch: Dispatch) => (text: string): JSX.Element => {
// Matches UUIDs & PDHs
const REGEX = /[a-z0-9]{5}-[a-z0-9]{5}-[a-z0-9]{15}|[0-9a-f]{32}\+\d+/g;
const links = text.match(REGEX);
<React.Fragment key={index}>
{part}
{links[index] &&
- <Link onClick={() => {
- const url = getNavUrl(links[index], auth)
- if (url) {
- window.open(`${window.location.origin}${url}`, '_blank');
- } else {
- dispatch(navigationNotAvailable(links[index]));
- }
- }}
- style={ {cursor: 'pointer'} }>
- {links[index]}
- </Link>}
+ <Link onClick={() => {
+ const url = getNavUrl(links[index], auth)
+ if (url) {
+ window.open(`${window.location.origin}${url}`, '_blank', "noopener");
+ } else {
+ dispatch(navigationNotAvailable(links[index]));
+ }
+ }}
+ style={{ cursor: 'pointer' }}>
+ {links[index]}
+ </Link>}
</React.Fragment>
)}
</>;
- };
+};