mirror of
https://github.com/zoriya/react-native-web.git
synced 2026-05-25 07:34:45 +00:00
[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:
@@ -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
@@ -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
@@ -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);
|
||||
|
||||
Reference in New Issue
Block a user