Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | 1x 1x 1x 1x 1x 184x 1x 184x 8x 176x 176x 176x 160x 160x 160x 176x 176x 160x | import React from 'react';
import { Link, LinkTarget } from '../../../components/link';
import { DropdownItem } from '../../../components/selectinput';
import { i18nStrings } from '../../../constants';
import {
imageDropdownDescContainer,
imageDropdownOptionDesc,
imageDropdownOptionLabel,
imageDropdownOptionLink,
imageDropdownOptionSpan,
} from './studioStyles';
export const StudioImageSelectorOption = (option: DropdownItem, label?: string | JSX.Element, selected?: boolean) => {
return (
<span className={imageDropdownOptionSpan}>
<div className={imageDropdownOptionLabel} data-selected={selected}>
<p>{label ? label : option.label}</p>
</div>
{renderLinkInDescription(option.optionMetadata && option.optionMetadata.description)}
</span>
);
};
const renderLinkInDescription = (description: string): React.ReactElement | undefined => {
if (!description) {
return undefined;
}
const linkRegexExp = /(((https?:\/\/)|(www\.))[^\s]+)/g;
const links = description.match(linkRegexExp);
if (links) {
console.log('links', links);
for (const link of links) {
description = description.replace(link, ' ');
}
}
const trimmedDescription = description.trim();
return (
<div className={imageDropdownDescContainer}>
<span className={imageDropdownOptionDesc}>{trimmedDescription}</span>
{links &&
links.map((link) => (
<Link className={imageDropdownOptionLink} key={link} href={link} target={LinkTarget.External}>
{i18nStrings.KernelSelector.imageSelectorOption.linkText}
</Link>
))}
</div>
);
};
|