[change] Add hrefAttrs prop to Text and View

When an 'href' is provided, the 'hrefAttr's prop can be used to set the 'download', 'rel', and 'target' attributes. The 'target' value does not require a "_" prefix.
This commit is contained in:
Nicolas Gallagher
2021-02-05 16:18:15 -08:00
parent 683962b961
commit 6efe1f90c2
4 changed files with 48 additions and 6 deletions
@@ -67,6 +67,17 @@ exports[`components/Text prop "accessibilityRole" value is set 1`] = `
/>
`;
exports[`components/Text prop "hrefAttrs" values are set 1`] = `
<div
class="css-text-901oao"
dir="auto"
download=""
href="#"
rel="noopener"
target="_blank"
/>
`;
exports[`components/Text prop "nativeID" value is set 1`] = `
<div
class="css-text-901oao"
@@ -54,6 +54,15 @@ describe('components/Text', () => {
expect(container.firstChild).toMatchSnapshot();
});
describe('prop "hrefAttrs"', () => {
test('values are set', () => {
const { container } = render(
<Text href="#" hrefAttrs={{ download: true, target: 'blank', rel: 'noopener' }} />
);
expect(container.firstChild).toMatchSnapshot();
});
});
describe('prop "nativeID"', () => {
test('value is set', () => {
const { container } = render(<Text nativeID="nativeID" />);
+14 -3
View File
@@ -65,9 +65,7 @@ const forwardPropsList = {
onMouseUp: true,
onScroll: true,
onWheel: true,
href: true,
rel: true,
target: true
href: true
};
const pickProps = props => pick(props, forwardPropsList);
@@ -75,6 +73,7 @@ const pickProps = props => pick(props, forwardPropsList);
const Text = forwardRef<TextProps, *>((props, forwardedRef) => {
const {
dir,
hrefAttrs,
numberOfLines,
onClick,
onLayout,
@@ -155,6 +154,18 @@ const Text = forwardRef<TextProps, *>((props, forwardedRef) => {
}
supportedProps.onClick = handleClick;
supportedProps.style = style;
if (props.href != null && hrefAttrs != null) {
const { download, rel, target } = hrefAttrs;
if (download != null) {
supportedProps.download = download;
}
if (rel != null) {
supportedProps.rel = rel;
}
if (typeof target === 'string' && target.charAt(0) !== '_') {
supportedProps.target = '_' + target;
}
}
const platformMethodsRef = usePlatformMethods(supportedProps);
const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);
+14 -3
View File
@@ -63,15 +63,14 @@ const forwardPropsList = {
onMouseUp: true,
onScroll: true,
onWheel: true,
href: true,
rel: true,
target: true
href: true
};
const pickProps = props => pick(props, forwardPropsList);
const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
const {
hrefAttrs,
onLayout,
onMoveShouldSetResponder,
onMoveShouldSetResponderCapture,
@@ -130,6 +129,18 @@ const View = forwardRef<ViewProps, *>((props, forwardedRef) => {
const supportedProps = pickProps(props);
supportedProps.classList = classList;
supportedProps.style = style;
if (props.href != null && hrefAttrs != null) {
const { download, rel, target } = hrefAttrs;
if (download != null) {
supportedProps.download = download;
}
if (rel != null) {
supportedProps.rel = rel;
}
if (typeof target === 'string' && target.charAt(0) !== '_') {
supportedProps.target = '_' + target;
}
}
const platformMethodsRef = usePlatformMethods(supportedProps);
const setRef = useMergeRefs(hostRef, platformMethodsRef, forwardedRef);