diff --git a/change/react-native-windows-02413c33-df01-48d8-beb1-092c80f1f706.json b/change/react-native-windows-02413c33-df01-48d8-beb1-092c80f1f706.json new file mode 100644 index 00000000000..daa55ef6122 --- /dev/null +++ b/change/react-native-windows-02413c33-df01-48d8-beb1-092c80f1f706.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Allow text components to have children", + "packageName": "react-native-windows", + "email": "tatianakapos@microsoft.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-17b0a7f2-3a73-40cf-9fb1-2a99ef16d226.json b/change/react-native-windows-17b0a7f2-3a73-40cf-9fb1-2a99ef16d226.json new file mode 100644 index 00000000000..f004772889d --- /dev/null +++ b/change/react-native-windows-17b0a7f2-3a73-40cf-9fb1-2a99ef16d226.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Add ImageRequestParams", + "packageName": "react-native-windows", + "email": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-1d2e90db-6fa1-47f8-aee1-959aadf54774.json b/change/react-native-windows-1d2e90db-6fa1-47f8-aee1-959aadf54774.json new file mode 100644 index 00000000000..62dc8873ff4 --- /dev/null +++ b/change/react-native-windows-1d2e90db-6fa1-47f8-aee1-959aadf54774.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Added override Text.d.ts to src-win/Libraries/Text/ to add tooltip prop to Text component", + "packageName": "react-native-windows", + "email": "email not defined", + "dependentChangeType": "none" +} diff --git a/change/react-native-windows-1dcd74f9-fb9a-4bc3-b8fb-fc5a53c9a661.json b/change/react-native-windows-1dcd74f9-fb9a-4bc3-b8fb-fc5a53c9a661.json new file mode 100644 index 00000000000..b1beab691b8 --- /dev/null +++ b/change/react-native-windows-1dcd74f9-fb9a-4bc3-b8fb-fc5a53c9a661.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Add SetProperties method to ReactNativeIsland", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-262555bf-8b8f-4511-b814-9ed70a0cb8b4.json b/change/react-native-windows-262555bf-8b8f-4511-b814-9ed70a0cb8b4.json new file mode 100644 index 00000000000..30cd61c3051 --- /dev/null +++ b/change/react-native-windows-262555bf-8b8f-4511-b814-9ed70a0cb8b4.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implementation of adjustFontSizeToFit for Text in Fabric", + "packageName": "react-native-windows", + "email": "kvineeth@microsoft.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-38ddfc46-37fc-42ff-90d8-d3f72a15f8a2.json b/change/react-native-windows-38ddfc46-37fc-42ff-90d8-d3f72a15f8a2.json new file mode 100644 index 00000000000..cb971b96e0d --- /dev/null +++ b/change/react-native-windows-38ddfc46-37fc-42ff-90d8-d3f72a15f8a2.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implement scrollEventThrottle for ScrollView in Fabric", + "packageName": "react-native-windows", + "email": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-537a723b-a3c7-48fe-aec0-c53ca7d201e3.json b/change/react-native-windows-537a723b-a3c7-48fe-aec0-c53ca7d201e3.json new file mode 100644 index 00000000000..b72988b6450 --- /dev/null +++ b/change/react-native-windows-537a723b-a3c7-48fe-aec0-c53ca7d201e3.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "added check for double click on textInput component view connecting it to WM_LBUTTONDBLCLK", + "packageName": "react-native-windows", + "email": "email not defined", + "dependentChangeType": "none" +} diff --git a/change/react-native-windows-53cc2215-aea1-4487-be63-34056926b427.json b/change/react-native-windows-53cc2215-aea1-4487-be63-34056926b427.json new file mode 100644 index 00000000000..b2026641510 --- /dev/null +++ b/change/react-native-windows-53cc2215-aea1-4487-be63-34056926b427.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implement decelerationRate in ScrollView", + "packageName": "react-native-windows", + "email": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-54a72170-7490-4502-8483-62b58bbe76fd.json b/change/react-native-windows-54a72170-7490-4502-8483-62b58bbe76fd.json new file mode 100644 index 00000000000..c2a3d11290f --- /dev/null +++ b/change/react-native-windows-54a72170-7490-4502-8483-62b58bbe76fd.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": " Add Custom Font Family support in TextInput", + "packageName": "react-native-windows", + "email": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-62631742-8186-482d-8779-3bdc35d1a131.json b/change/react-native-windows-62631742-8186-482d-8779-3bdc35d1a131.json new file mode 100644 index 00000000000..fefbcacdc99 --- /dev/null +++ b/change/react-native-windows-62631742-8186-482d-8779-3bdc35d1a131.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Fix Narrator Bug", + "packageName": "react-native-windows", + "email": "34109996+chiaramooney@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-7291aa87-457c-43d8-8f82-b2fedf913592.json b/change/react-native-windows-7291aa87-457c-43d8-8f82-b2fedf913592.json new file mode 100644 index 00000000000..00b782425c2 --- /dev/null +++ b/change/react-native-windows-7291aa87-457c-43d8-8f82-b2fedf913592.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implement zoomScale, maximumZoomScale and minimumZoomScale in ScrollView", + "packageName": "react-native-windows", + "email": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-7d072016-5414-4327-b40c-a149c1dc34b9.json b/change/react-native-windows-7d072016-5414-4327-b40c-a149c1dc34b9.json new file mode 100644 index 00000000000..0f95aad40d3 --- /dev/null +++ b/change/react-native-windows-7d072016-5414-4327-b40c-a149c1dc34b9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Add IScrollProvider Implementation", + "packageName": "react-native-windows", + "email": "34109996+chiaramooney@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-99f88013-45df-4134-99df-b0fb86dc5e88.json b/change/react-native-windows-99f88013-45df-4134-99df-b0fb86dc5e88.json new file mode 100644 index 00000000000..ca0285f75c4 --- /dev/null +++ b/change/react-native-windows-99f88013-45df-4134-99df-b0fb86dc5e88.json @@ -0,0 +1,7 @@ +{ + "type": "prerelease", + "comment": "Implement SpellCheck and AutoCorrect for TextInput", + "packageName": "react-native-windows", + "email": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-9ee8d633-698c-476d-9334-170be2c5dc25.json b/change/react-native-windows-9ee8d633-698c-476d-9334-170be2c5dc25.json new file mode 100644 index 00000000000..183d59c5fca --- /dev/null +++ b/change/react-native-windows-9ee8d633-698c-476d-9334-170be2c5dc25.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implement letterSpacing for TextInput", + "packageName": "react-native-windows", + "email": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-a2bdf157-2fb8-43f8-8541-56ca50021d6c.json b/change/react-native-windows-a2bdf157-2fb8-43f8-8541-56ca50021d6c.json new file mode 100644 index 00000000000..6d9d85d086b --- /dev/null +++ b/change/react-native-windows-a2bdf157-2fb8-43f8-8541-56ca50021d6c.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implement showsVerticalScrollIndicatorValue and showsVerticalScrollIndicatorValue for ScrollView", + "packageName": "react-native-windows", + "email": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json b/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json new file mode 100644 index 00000000000..ae103eb4668 --- /dev/null +++ b/change/react-native-windows-b165413e-a3de-4ba5-8511-cc1f22727002.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implement OnScrollBeginDrag Event", + "packageName": "react-native-windows", + "email": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-b25b85e4-b99c-4ba7-92db-ac45afed3cc9.json b/change/react-native-windows-b25b85e4-b99c-4ba7-92db-ac45afed3cc9.json new file mode 100644 index 00000000000..a9fee0a6049 --- /dev/null +++ b/change/react-native-windows-b25b85e4-b99c-4ba7-92db-ac45afed3cc9.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implemented textAlign in TextInput for Fabric", + "packageName": "react-native-windows", + "email": "14967941+danielayala94@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-b86e11e6-8cbc-4602-b53a-e199ce0f6b2e.json b/change/react-native-windows-b86e11e6-8cbc-4602-b53a-e199ce0f6b2e.json new file mode 100644 index 00000000000..9182b15023b --- /dev/null +++ b/change/react-native-windows-b86e11e6-8cbc-4602-b53a-e199ce0f6b2e.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Allow TextInput to scroll", + "packageName": "react-native-windows", + "email": "30809111+acoates-ms@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-dee3a16c-0e0f-4af4-b524-b216b0a19255.json b/change/react-native-windows-dee3a16c-0e0f-4af4-b524-b216b0a19255.json new file mode 100644 index 00000000000..19c43f27d73 --- /dev/null +++ b/change/react-native-windows-dee3a16c-0e0f-4af4-b524-b216b0a19255.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Button should pass onAccessibilityTap to native", + "packageName": "react-native-windows", + "email": "34109996+chiaramooney@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-eed51fa4-43c0-4164-8892-4c3fa0571940.json b/change/react-native-windows-eed51fa4-43c0-4164-8892-4c3fa0571940.json new file mode 100644 index 00000000000..9d0f1b136bc --- /dev/null +++ b/change/react-native-windows-eed51fa4-43c0-4164-8892-4c3fa0571940.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implement onProgress for Image", + "packageName": "react-native-windows", + "email": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-eed821fc-4d11-4ca3-a820-682d1aba1977.json b/change/react-native-windows-eed821fc-4d11-4ca3-a820-682d1aba1977.json new file mode 100644 index 00000000000..1270f923f34 --- /dev/null +++ b/change/react-native-windows-eed821fc-4d11-4ca3-a820-682d1aba1977.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Implement body in Image Source", + "packageName": "react-native-windows", + "email": "54227869+anupriya13@users.noreply.github.com", + "dependentChangeType": "patch" +} \ No newline at end of file diff --git a/change/react-native-windows-f2a8e41c-6064-487c-85d9-b2151db6436c.json b/change/react-native-windows-f2a8e41c-6064-487c-85d9-b2151db6436c.json new file mode 100644 index 00000000000..e59e2ddbe13 --- /dev/null +++ b/change/react-native-windows-f2a8e41c-6064-487c-85d9-b2151db6436c.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "implemented on onEndEditing", + "packageName": "react-native-windows", + "email": "email not defined", + "dependentChangeType": "none" +} diff --git a/packages/@react-native-windows/tester/overrides.json b/packages/@react-native-windows/tester/overrides.json index 895dccf4135..534658d7bec 100644 --- a/packages/@react-native-windows/tester/overrides.json +++ b/packages/@react-native-windows/tester/overrides.json @@ -7,6 +7,12 @@ ], "baseVersion": "0.76.6", "overrides": [ + { + "type": "derived", + "file": "src/js/components/TextInlineView.windows.js", + "baseFile": "packages/rn-tester/js/components/TextInlineView.js", + "baseHash": "40db48c2d0556cc66f8ac6940441b1bc01ad1d48" + }, { "type": "derived", "file": "src/js/examples-win/Button/ButtonExample.windows.js", @@ -66,6 +72,12 @@ "baseFile": "packages/rn-tester/js/examples/Text/TextExample.android.js", "baseHash": "985cb24e1f56c30288537e72db20c602614b64c3" }, + { + "type": "derived", + "file": "src/js/examples/Text/TextInlineViewsExample.windows.js", + "baseFile": "packages/rn-tester/js/examples/Text/TextInlineViewsExample.js", + "baseHash": "63088038921558214c480b323dd2099698911f3f" + }, { "type": "patch", "file": "src/js/examples/TextInput/TextInputExample.windows.js", diff --git a/packages/@react-native-windows/tester/src/js/components/TextInlineView.windows.js b/packages/@react-native-windows/tester/src/js/components/TextInlineView.windows.js new file mode 100644 index 00000000000..208f14fa969 --- /dev/null +++ b/packages/@react-native-windows/tester/src/js/components/TextInlineView.windows.js @@ -0,0 +1,224 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow strict-local + */ + +'use strict'; + +import React from 'react'; +import {Image, TouchableHighlight, Text, View} from 'react-native'; + +function Basic(): React.Node { + return ( + + This text contains an inline blue view{' '} + and + an inline image . Neat, + huh? + + ); +} + +function NestedTexts(): React.Node { + // [Windows] accessible = {true} is needed to find Views in e2etests + return ( + + This is the first row + + + This is a nested text + + with a Red View + + + + ); +} + +function ClippedByText(): React.Node { + // [Windows] accessible = {true} is needed to find Views in e2etests + return ( + + {/* + * Inline View + **/} + + The inline view below is + taller than its Text parent and should be clipped. + + + This is an inline view + {/* Render a red border around the steelblue rectangle to make it clear how the inline view is being clipped */} + + + + + + {/* + * Inline Image + **/} + + The inline image below is + taller than its Text parent and should be clipped. + + + This is an inline image + + + + ); +} + +type ChangeSizeState = {| + width: number, +|}; + +class ChangeImageSize extends React.Component { + state: ChangeSizeState = { + width: 50, + }; + + render(): React.Node { + return ( + + { + this.setState({width: this.state.width === 50 ? 100 : 50}); + }}> + + Change Image Width (width={this.state.width}) + + + + This is an + + inline image + + + ); + } +} + +class ChangeViewSize extends React.Component { + state: ChangeSizeState = { + width: 50, + }; + + render(): React.Node { + return ( + + { + this.setState({width: this.state.width === 50 ? 100 : 50}); + }}> + + Change View Width (width={this.state.width}) + + + + This is an + + inline view + + + ); + } +} + +class ChangeInnerViewSize extends React.Component { + state: ChangeSizeState = { + width: 50, + }; + + render(): React.Node { + return ( + + { + this.setState({width: this.state.width === 50 ? 100 : 50}); + }}> + {/* When updating `state.width`, it's important that the only thing that + changes is the width of the pink inline view. When we do this, we + demonstrate a bug in RN Android where the pink view doesn't get + rerendered and remains at its old size. If other things change + (e.g. we display `state.width` as text somewhere) it could circumvent + the bug and cause the pink view to be rerendered at its new size. */} + Change Pink View Width + + + This is an + + + + inline view + + + ); + } +} + +module.exports = { + Basic, + NestedTexts, + ClippedByText, + ChangeImageSize, + ChangeViewSize, + ChangeInnerViewSize, +}; diff --git a/packages/@react-native-windows/tester/src/js/examples-win/LegacyTests/TextInputTestPage.tsx b/packages/@react-native-windows/tester/src/js/examples-win/LegacyTests/TextInputTestPage.tsx index 739f3f49458..552718b6331 100644 --- a/packages/@react-native-windows/tester/src/js/examples-win/LegacyTests/TextInputTestPage.tsx +++ b/packages/@react-native-windows/tester/src/js/examples-win/LegacyTests/TextInputTestPage.tsx @@ -62,6 +62,8 @@ export class TextInputTestPage extends React.Component< style={{height: 80}} placeholder="MultiLine" multiline={true} + spellCheck={false} + autoCorrect={false} /> {'Nested s:'} @@ -977,78 +977,95 @@ function TextBaseLineLayoutExample(props: {}): React.Node { {texts} {marker} - {/* [Windows #12997 - This tests renders nested within which is not supported yet] - {'Interleaving and :'} + + ) : ( + + {'Nested s:'} {marker} - - Some text. - - {marker} - Text inside View. - {marker} - - + {texts} {marker} - - {'Multi-line interleaved and :'} - + {'Array of s in :'} - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris - venenatis,{' '} - - mauris eu commodo maximus - {' '} - , ante arcu vestibulum ligula, et scelerisque diam. - + {marker} + {texts} + {marker} - - {'Multi-line alignment'} - - - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. + + {'Interleaving and :'} + + {marker} + + Some text. + + {marker} + Text inside View. + {marker} + + {marker} - - - Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do - eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + {'Multi-line interleaved and :'} + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris + venenatis,{' '} + + mauris eu commodo maximus + {' '} + , ante arcu vestibulum ligula, et scelerisque diam. - - {':'} - - {marker} - {texts} - {marker} - + {'Multi-line alignment'} + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. + + + - {':'} - - {marker} - - {texts} - - {marker} + {':'} + + {marker} + {texts} + {marker} + + + {':'} + + {marker} + + {texts} + + {marker} + -*/} ); + // Windows] } function TextBorderExample(props: {}): React.Node { @@ -1457,50 +1474,55 @@ const examples = [ ); }, }, - /* [Windows #12997 - This tests renders nested within which is not supported yet] - { - title: 'Inline views', - name: 'inlineViewsBasic', - render(): React.Node { - return ; - }, - }, - { - title: 'Inline views with multiple nested texts', - name: 'inlineViewsMultiple', - render(): React.Node { - return ; - }, - }, - { - title: 'Inline image/view clipped by ', - name: 'inlineViewsClipped', - render(): React.Node { - return ; - }, - }, - { - title: 'Relayout inline image', - name: 'relayoutInlineImage', - render(): React.Node { - return ; - }, - }, - { - title: 'Relayout inline view', - name: 'relayoutInlineView', - render(): React.Node { - return ; - }, - }, - { - title: 'Relayout nested inline view', - name: 'relayoutNestedInlineView', - render(): React.Node { - return ; - }, - }, -*/ + // [Windows - Paper doesn't support Views in Text while Fabric does + ...(global.RN$Bridgeless === true + ? [ + { + title: 'Inline views', + name: 'inlineViewsBasic', + render(): React.Node { + return ; + }, + }, + { + title: 'Inline views with multiple nested texts', + name: 'inlineViewsMultiple', + render(): React.Node { + return ; + }, + }, + { + title: 'Inline image/view clipped by ', + name: 'inlineViewsClipped', + render(): React.Node { + return ; + }, + }, + { + title: 'Relayout inline image', + name: 'relayoutInlineImage', + render(): React.Node { + return ; + }, + }, + { + title: 'Relayout inline view', + name: 'relayoutInlineView', + render(): React.Node { + return ; + }, + }, + { + title: 'Relayout nested inline view', + name: 'relayoutNestedInlineView', + render(): React.Node { + return ; + }, + }, + TextInlineViewsExample, + ] + : []), + // Windows] { title: 'Text shadow', name: 'textShadow', @@ -1637,8 +1659,6 @@ const examples = [ ); }, }, - // [Windows #12997] - // TextInlineViewsExample, { title: 'Customized Accessibility', name: 'textAccessibility', @@ -1692,6 +1712,76 @@ const examples = [ ); }, }, + { + title: 'AdjustFontSize according to the Width, Height and LinesCount', + name: 'adjustFontSizeToFit', + render: function (): React.Node { + return ( + + + {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20`} + + + {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20`} + + {[ + {width: 500, height: 80, lineCount: 3}, + {width: 475, height: 120, lineCount: 5}, + {width: 450, height: 160, lineCount: 0}, + ].map((item, index) => ( + + + {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:${item.height},width:${item.width},lineCount:${item.lineCount},fontSize:40`} + + + {`Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:${item.height},width:${item.width},lineCount:${item.lineCount},fontSize:40`} + + + ))} + + ); + }, + }, ]; const styles = StyleSheet.create({ diff --git a/packages/@react-native-windows/tester/src/js/examples/Text/TextInlineViewsExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/Text/TextInlineViewsExample.windows.js new file mode 100644 index 00000000000..a60cf411f31 --- /dev/null +++ b/packages/@react-native-windows/tester/src/js/examples/Text/TextInlineViewsExample.windows.js @@ -0,0 +1,67 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @format + * @flow strict-local + */ + +import type {RNTesterModuleExample} from '../../types/RNTesterTypes'; + +import * as React from 'react'; +import {Text, View} from 'react-native'; + +function InlineView(props: { + textAlign: 'auto' | 'left' | 'right' | 'center' | 'justify', + long?: boolean, +}): React.Node { + return ( + + + Parent + Child + + Child + {props !== null && props.long === true && ( + + aaaa a aaaa aaaaaa aaa a a a aaaaa sdsds dsdSAD asd ASDasd ASDas + + )} + + + ); +} + +export function TextInlineViewsExample(props: {}): React.Node { + return ( + <> + + BoringLayout + + + + + + StaticLayout + + + + + + + ); +} + +export default ({ + title: 'TextInlineViewsExample', + name: 'inlineViews', + description: + ('Shows how inline views are rendered when text is subject to alignment.': string), + expect: 'The red box should align correctly with the rest of the text.', + render: (): React.Node => , +}: RNTesterModuleExample); diff --git a/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js b/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js index 556db2c3044..e8ebba4dd42 100644 --- a/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js +++ b/packages/@react-native-windows/tester/src/js/examples/TextInput/TextInputExample.windows.js @@ -377,6 +377,36 @@ const examples: Array = [ ); }, }, + { + title: 'Font Family', + render: function (): React.Node { + return ( + + + {[ + 'normal', + 'Times New Roman', + 'Courier New', + 'Arial', + 'Comic Sans MS', + 'Georgia', + 'Verdana', + ].map(fontFamily => ( + + ))} + + ); + }, + }, { title: 'Text input, themes and heights', render: function (): React.Node { diff --git a/packages/e2e-test-app-fabric/test/ScrollViewComponentTest.test.ts b/packages/e2e-test-app-fabric/test/ScrollViewComponentTest.test.ts index f8a4d699e6a..fa0f7467143 100644 --- a/packages/e2e-test-app-fabric/test/ScrollViewComponentTest.test.ts +++ b/packages/e2e-test-app-fabric/test/ScrollViewComponentTest.test.ts @@ -49,13 +49,12 @@ describe('ScrollView Tests', () => { const dump = await dumpVisualTree('flash_scroll_indicators_button'); expect(dump).toMatchSnapshot(); }); - // Disable tests where testID is not found. - /*test('ScrollViews can scroll an item list horizontally', async () => { + test('ScrollViews can scroll an item list horizontally', async () => { const component = await app.findElementByTestID('scroll_horizontal'); await component.waitForDisplayed({timeout: 20000}); const dump = await dumpVisualTree('scroll_horizontal'); expect(dump).toMatchSnapshot(); - });*/ + }); test('ScrollView has scrollTo method, scroll to start button', async () => { const component = await app.findElementByTestID('scroll_to_start_button'); await component.waitForDisplayed({timeout: 20000}); diff --git a/packages/e2e-test-app-fabric/test/TextComponentTest.test.ts b/packages/e2e-test-app-fabric/test/TextComponentTest.test.ts index 19539c92404..57604a1becb 100644 --- a/packages/e2e-test-app-fabric/test/TextComponentTest.test.ts +++ b/packages/e2e-test-app-fabric/test/TextComponentTest.test.ts @@ -111,4 +111,97 @@ describe('Text Tests', () => { const dump = await dumpVisualTree('advanced-borders'); expect(dump).toMatchSnapshot(); }); + test('Text can have inline views/images', async () => { + const component = await app.findElementByTestID('text-view'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-view'); + expect(dump).toMatchSnapshot(); + }); + test('Text can have nested views', async () => { + const component = await app.findElementByTestID('text-nested-view'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-nested-view'); + expect(dump).toMatchSnapshot(); + }); + test('Texts can clip inline View/Images', async () => { + const component = await app.findElementByTestID('text-view-images-clipped'); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-view-images-clipped'); + expect(dump).toMatchSnapshot(); + }); + test('Text can adjust its fontsize according to its limitations, default a', async () => { + const component = await app.findElementByTestID( + 'text-adjustfontsizetofit-default-a', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-adjustfontsizetofit-default-a'); + expect(dump).toMatchSnapshot(); + }); + test('Text can adjust its fontsize according to its limitations, default b', async () => { + const component = await app.findElementByTestID( + 'text-adjustfontsizetofit-default-b', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-adjustfontsizetofit-default-b'); + expect(dump).toMatchSnapshot(); + }); + test('Text can adjust its fontsize according to its limitations, case 0 a', async () => { + const component = await app.findElementByTestID( + 'text-adjustfontsizetofit-0-a', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-adjustfontsizetofit-0-a'); + expect(dump).toMatchSnapshot(); + }); + test('Text can adjust its fontsize according to its limitations, case 0 b', async () => { + const component = await app.findElementByTestID( + 'text-adjustfontsizetofit-0-b', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-adjustfontsizetofit-0-b'); + expect(dump).toMatchSnapshot(); + }); + test('Text can adjust its fontsize according to its limitations, case 1 a', async () => { + const component = await app.findElementByTestID( + 'text-adjustfontsizetofit-1-a', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-adjustfontsizetofit-1-a'); + expect(dump).toMatchSnapshot(); + }); + test('Text can adjust its fontsize according to its limitations, case 1 b', async () => { + const component = await app.findElementByTestID( + 'text-adjustfontsizetofit-1-b', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-adjustfontsizetofit-1-b'); + expect(dump).toMatchSnapshot(); + }); + test('Text can adjust its fontsize according to its limitations, case 2 a', async () => { + const component = await app.findElementByTestID( + 'text-adjustfontsizetofit-2-a', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-adjustfontsizetofit-2-a'); + expect(dump).toMatchSnapshot(); + }); + test('Text can adjust its fontsize according to its limitations, case 2 b', async () => { + const component = await app.findElementByTestID( + 'text-adjustfontsizetofit-2-b', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('text-adjustfontsizetofit-2-b'); + expect(dump).toMatchSnapshot(); + }); + + /* For some reason WebDriver can't find this view even though accessible={true} + test('Texts can align inline View/Images', async () => { + const component = await app.findElementByTestID( + 'view-test-inline-text-alignment', + ); + await component.waitForDisplayed({timeout: 5000}); + const dump = await dumpVisualTree('view-test-inline-text-alignment'); + expect(dump).toMatchSnapshot(); + }); + */ }); diff --git a/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts b/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts index 7e901d3dcb3..f47ff7b7215 100644 --- a/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts +++ b/packages/e2e-test-app-fabric/test/TextInputComponentTest.test.ts @@ -236,7 +236,6 @@ describe('TextInput Tests', () => { await component.waitForDisplayed({timeout: 5000}); const dump = await dumpVisualTree('style-fontFamily'); expect(dump).toMatchSnapshot(); - // Behavior not implemented yet }); test('TextInputs can have a font size', async () => { const component = await app.findElementByTestID('style-fontSize'); diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap index 41968769ec3..cf7f392168f 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/AccessibilityTest.test.ts.snap @@ -245,50 +245,58 @@ exports[`Accessibility Tests Selectable items must have a Selection Container. E "SelectionPattern.IsSelectionRequired": true, "__Children": [ { - "AutomationId": "Selectable item 1", - "ControlType": 50000, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Selectable item 1", + "AutomationId": "", + "ControlType": 50033, + "LocalizedControlType": "pane", + "Name": "List of selectable items", "__Children": [ { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "Unselected", - "TextRangePattern.GetText": "Unselected", + "AutomationId": "Selectable item 1", + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Selectable item 1", + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Unselected", + "TextRangePattern.GetText": "Unselected", + }, + ], }, - ], - }, - { - "AutomationId": "Selectable item 2", - "ControlType": 50000, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Selectable item 2", - "__Children": [ { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "Unselected", - "TextRangePattern.GetText": "Unselected", + "AutomationId": "Selectable item 2", + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Selectable item 2", + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Unselected", + "TextRangePattern.GetText": "Unselected", + }, + ], }, - ], - }, - { - "AutomationId": "Selectable item 3", - "ControlType": 50000, - "IsKeyboardFocusable": true, - "LocalizedControlType": "button", - "Name": "Selectable item 3", - "__Children": [ { - "AutomationId": "", - "ControlType": 50020, - "LocalizedControlType": "text", - "Name": "Unselected", - "TextRangePattern.GetText": "Unselected", + "AutomationId": "Selectable item 3", + "ControlType": 50000, + "IsKeyboardFocusable": true, + "LocalizedControlType": "button", + "Name": "Selectable item 3", + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Unselected", + "TextRangePattern.GetText": "Unselected", + }, + ], }, ], }, diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/ImageComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/ImageComponentTest.test.ts.snap index d23347ab617..a16869bdce1 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/ImageComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/ImageComponentTest.test.ts.snap @@ -1431,12 +1431,12 @@ exports[`Image Tests An Image can have a tint color 1`] = ` }, { "Offset": "0, 29, 0", - "Size": "916, 20", + "Size": "916, 19", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 20", + "Size": "916, 19", "Visual Type": "SpriteVisual", }, ], @@ -1491,12 +1491,12 @@ exports[`Image Tests An Image can have a tint color 1`] = ` }, { "Offset": "0, 82, 0", - "Size": "916, 19", + "Size": "916, 20", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 19", + "Size": "916, 20", "Visual Type": "SpriteVisual", }, ], @@ -2394,12 +2394,12 @@ exports[`Image Tests An Image customized how it is rendered within the frame usi "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", }, ], @@ -2460,12 +2460,12 @@ exports[`Image Tests An Image customized how it is rendered within the frame usi }, { "Offset": "100, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", }, ], @@ -2526,12 +2526,12 @@ exports[`Image Tests An Image customized how it is rendered within the frame usi }, { "Offset": "0, 78, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", }, ], @@ -2592,12 +2592,12 @@ exports[`Image Tests An Image customized how it is rendered within the frame usi }, { "Offset": "100, 78, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", }, ], @@ -2658,12 +2658,12 @@ exports[`Image Tests An Image customized how it is rendered within the frame usi }, { "Offset": "0, 155, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", }, ], @@ -2724,12 +2724,12 @@ exports[`Image Tests An Image customized how it is rendered within the frame usi }, { "Offset": "100, 155, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", }, ], @@ -2790,12 +2790,12 @@ exports[`Image Tests An Image customized how it is rendered within the frame usi }, { "Offset": "0, 233, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", }, ], @@ -2856,12 +2856,12 @@ exports[`Image Tests An Image customized how it is rendered within the frame usi }, { "Offset": "100, 233, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", }, ], @@ -3255,7 +3255,7 @@ exports[`Image Tests Images have multiple resize modes 1`] = ` "Visual Tree": { "Comment": "image-resize-mode", "Offset": "0, 0, 0", - "Size": "916, 310", + "Size": "916, 311", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3392,12 +3392,12 @@ exports[`Image Tests Images have multiple resize modes 1`] = ` }, { "Offset": "0, 78, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", }, ], @@ -3458,12 +3458,12 @@ exports[`Image Tests Images have multiple resize modes 1`] = ` }, { "Offset": "100, 78, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", }, ], @@ -3524,12 +3524,12 @@ exports[`Image Tests Images have multiple resize modes 1`] = ` }, { "Offset": "200, 78, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", }, ], @@ -3590,12 +3590,12 @@ exports[`Image Tests Images have multiple resize modes 1`] = ` }, { "Offset": "0, 155, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", }, ], @@ -3656,12 +3656,12 @@ exports[`Image Tests Images have multiple resize modes 1`] = ` }, { "Offset": "100, 155, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 15", + "Size": "90, 16", "Visual Type": "SpriteVisual", }, ], @@ -3722,12 +3722,12 @@ exports[`Image Tests Images have multiple resize modes 1`] = ` }, { "Offset": "0, 233, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", }, ], @@ -3788,12 +3788,12 @@ exports[`Image Tests Images have multiple resize modes 1`] = ` }, { "Offset": "100, 233, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", }, ], @@ -3854,12 +3854,12 @@ exports[`Image Tests Images have multiple resize modes 1`] = ` }, { "Offset": "200, 233, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "90, 16", + "Size": "90, 15", "Visual Type": "SpriteVisual", }, ], diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap index 987a4a3541b..01aee4fcbbe 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/LegacyTextInputTest.test.ts.snap @@ -32,10 +32,12 @@ exports[`LegacyTextInputTest Click on multiline TextInput to move focus away fro "AutomationId": "textinput-log", "ControlType": 50020, "LocalizedControlType": "text", - "Name": "onBlur + "Name": "onEndEditing text: +onBlur onFocus ", - "TextRangePattern.GetText": "onBlur + "TextRangePattern.GetText": "onEndEditing text: +onBlur onFocus ", }, @@ -48,7 +50,7 @@ onFocus "Visual Tree": { "Comment": "textinput-log", "Offset": "0, 0, 0", - "Size": "998, 57", + "Size": "998, 76", "Visual Type": "SpriteVisual", }, } @@ -66,6 +68,7 @@ onKeyPress key: a onChange text: onSelectionChange range: 0,0 onFocus +onEndEditing text: abc onBlur onSubmitEditing text: abc onChange text: abc @@ -97,10 +100,10 @@ onChange text: ab onSelectionChange range: 2,2 onKeyPress key: b onChange text: a -onChange text: a onSelectionChange range: 1,1 onKeyPress key: a onFocus +onEndEditing text: onBlur onFocus ", @@ -110,6 +113,7 @@ onKeyPress key: a onChange text: onSelectionChange range: 0,0 onFocus +onEndEditing text: abc onBlur onSubmitEditing text: abc onChange text: abc @@ -141,10 +145,10 @@ onChange text: ab onSelectionChange range: 2,2 onKeyPress key: b onChange text: a -onChange text: a onSelectionChange range: 1,1 onKeyPress key: a onFocus +onEndEditing text: onBlur onFocus ", @@ -158,7 +162,7 @@ onFocus "Visual Tree": { "Comment": "textinput-log", "Offset": "0, 0, 0", - "Size": "998, 820", + "Size": "998, 839", "Visual Type": "SpriteVisual", }, } @@ -177,10 +181,10 @@ onChange text: ab onSelectionChange range: 2,2 onKeyPress key: b onChange text: a -onChange text: a onSelectionChange range: 1,1 onKeyPress key: a onFocus +onEndEditing text: onBlur onFocus ", @@ -191,10 +195,10 @@ onChange text: ab onSelectionChange range: 2,2 onKeyPress key: b onChange text: a -onChange text: a onSelectionChange range: 1,1 onKeyPress key: a onFocus +onEndEditing text: onBlur onFocus ", @@ -250,10 +254,10 @@ onChange text: ab onSelectionChange range: 2,2 onKeyPress key: b onChange text: a -onChange text: a onSelectionChange range: 1,1 onKeyPress key: a onFocus +onEndEditing text: onBlur onFocus ", @@ -287,10 +291,10 @@ onChange text: ab onSelectionChange range: 2,2 onKeyPress key: b onChange text: a -onChange text: a onSelectionChange range: 1,1 onKeyPress key: a onFocus +onEndEditing text: onBlur onFocus ", diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap index f3bb0cfe118..efb33774859 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/ScrollViewComponentTest.test.ts.snap @@ -224,6 +224,653 @@ exports[`ScrollView Tests ScrollView has scrollTo method, scroll to top button 1 } `; +exports[`ScrollView Tests ScrollViews can scroll an item list horizontally 1`] = ` +{ + "Automation Tree": { + "AutomationId": "scroll_horizontal", + "ControlType": 50033, + "LocalizedControlType": "pane", + "ScrollPattern.HorizontallyScrollable": true, + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 0", + "TextRangePattern.GetText": "Item 0", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 1", + "TextRangePattern.GetText": "Item 1", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 2", + "TextRangePattern.GetText": "Item 2", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 3", + "TextRangePattern.GetText": "Item 3", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 4", + "TextRangePattern.GetText": "Item 4", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 5", + "TextRangePattern.GetText": "Item 5", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 6", + "TextRangePattern.GetText": "Item 6", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 7", + "TextRangePattern.GetText": "Item 7", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 8", + "TextRangePattern.GetText": "Item 8", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 9", + "TextRangePattern.GetText": "Item 9", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 10", + "TextRangePattern.GetText": "Item 10", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Item 11", + "TextRangePattern.GetText": "Item 11", + }, + ], + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ScrollViewComponentView", + "_Props": { + "TestId": "scroll_horizontal", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + ], + }, + ], + }, + "Visual Tree": { + "Comment": "scroll_horizontal", + "Offset": "0, 0, 0", + "Size": "916, 106", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(238, 238, 238, 255)", + }, + "Offset": "0, 0, 0", + "Size": "916, 106", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(0, 0, 0, 0)", + }, + "Offset": "0, 0, 0", + "Size": "1272, 106", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1272, 106", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "1272, 106", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "5, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "10, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "111, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "116, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "217, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "222, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "323, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "328, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "429, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "434, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "535, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "540, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "641, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "646, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "747, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "752, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "853, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "858, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "959, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "964, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "1065, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "1070, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "1171, 5, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(204, 204, 204, 255)", + }, + "Offset": "0, 0, 0", + "Size": "96, 96", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "1176, 10, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "86, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + ], + }, + ], + }, + { + "Offset": "-13, 0, 0", + "Size": "12, 0", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "-12, 3, 0", + "Opacity": 0, + "Size": "12, 100", + "Visual Type": "Visual", + }, + { + "Offset": "0, 4, 0", + "Opacity": 0, + "Size": "12, 12", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "0, -16, 0", + "Opacity": 0, + "Size": "12, 12", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-5, 16, 0", + "Size": "6, 74", + "Visual Type": "Visual", + }, + ], + }, + { + "Offset": "0, -13, 0", + "Size": "0, 12", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "3, -12, 0", + "Opacity": 0, + "Size": "910, 12", + "Visual Type": "Visual", + }, + { + "Offset": "4, 0, 0", + "Opacity": 0, + "Size": "12, 12", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "-16, 0, 0", + "Opacity": 0, + "Size": "12, 12", + "Visual Type": "SpriteVisual", + }, + { + "Offset": "16, -5, 0", + "Size": "637, 6", + "Visual Type": "Visual", + }, + ], + }, + ], + }, +} +`; + exports[`ScrollView Tests ScrollViews has flash scroll indicators 1`] = ` { "Automation Tree": { diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap index 65351819fdb..a2f65353ca4 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/TextComponentTest.test.ts.snap @@ -24,6 +24,198 @@ exports[`Text Tests Padding can be added to Text 1`] = ` } `; +exports[`Text Tests Text can adjust its fontsize according to its limitations, case 0 a 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-adjustfontsizetofit-0-a", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:80,width:500,lineCount:3,fontSize:40", + "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:80,width:500,lineCount:3,fontSize:40", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-adjustfontsizetofit-0-a", + }, + }, + "Visual Tree": { + "Comment": "text-adjustfontsizetofit-0-a", + "Offset": "0, 0, 0", + "Size": "500, 80", + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`Text Tests Text can adjust its fontsize according to its limitations, case 0 b 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-adjustfontsizetofit-0-b", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:80,width:500,lineCount:3,fontSize:40", + "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:80,width:500,lineCount:3,fontSize:40", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-adjustfontsizetofit-0-b", + }, + }, + "Visual Tree": { + "Comment": "text-adjustfontsizetofit-0-b", + "Offset": "0, 0, 0", + "Size": "500, 80", + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`Text Tests Text can adjust its fontsize according to its limitations, case 1 a 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-adjustfontsizetofit-1-a", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:120,width:475,lineCount:5,fontSize:40", + "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:120,width:475,lineCount:5,fontSize:40", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-adjustfontsizetofit-1-a", + }, + }, + "Visual Tree": { + "Comment": "text-adjustfontsizetofit-1-a", + "Offset": "0, 0, 0", + "Size": "475, 120", + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`Text Tests Text can adjust its fontsize according to its limitations, case 1 b 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-adjustfontsizetofit-1-b", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:120,width:475,lineCount:5,fontSize:40", + "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:120,width:475,lineCount:5,fontSize:40", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-adjustfontsizetofit-1-b", + }, + }, + "Visual Tree": { + "Comment": "text-adjustfontsizetofit-1-b", + "Offset": "0, 0, 0", + "Size": "475, 120", + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`Text Tests Text can adjust its fontsize according to its limitations, case 2 a 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-adjustfontsizetofit-2-a", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:160,width:450,lineCount:0,fontSize:40", + "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:160,width:450,lineCount:0,fontSize:40", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-adjustfontsizetofit-2-a", + }, + }, + "Visual Tree": { + "Comment": "text-adjustfontsizetofit-2-a", + "Offset": "0, 0, 0", + "Size": "450, 160", + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`Text Tests Text can adjust its fontsize according to its limitations, case 2 b 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-adjustfontsizetofit-2-b", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:160,width:450,lineCount:0,fontSize:40", + "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:160,width:450,lineCount:0,fontSize:40", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-adjustfontsizetofit-2-b", + }, + }, + "Visual Tree": { + "Comment": "text-adjustfontsizetofit-2-b", + "Offset": "0, 0, 0", + "Size": "450, 160", + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`Text Tests Text can adjust its fontsize according to its limitations, default a 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-adjustfontsizetofit-default-a", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20", + "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-adjustfontsizetofit-default-a", + }, + }, + "Visual Tree": { + "Comment": "text-adjustfontsizetofit-default-a", + "Offset": "0, 0, 0", + "Size": "500, 100", + "Visual Type": "SpriteVisual", + }, +} +`; + +exports[`Text Tests Text can adjust its fontsize according to its limitations, default b 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-adjustfontsizetofit-default-b", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20", + "TextRangePattern.GetText": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-adjustfontsizetofit-default-b", + }, + }, + "Visual Tree": { + "Comment": "text-adjustfontsizetofit-default-b", + "Offset": "0, 0, 0", + "Size": "500, 100", + "Visual Type": "SpriteVisual", + }, +} +`; + exports[`Text Tests Text can be restricted to one line 1`] = ` { "Automation Tree": { @@ -724,6 +916,177 @@ exports[`Text Tests Text can have decoration lines: Underline 1`] = ` } `; +exports[`Text Tests Text can have inline views/images 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-view", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This text contains an inline blue view  and an inline image . Neat, huh?", + "TextRangePattern.GetText": "This text contains an inline blue view ￯﾿ﾼ and an inline image ￯﾿ﾼ. Neat, huh?", + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": { + "TestId": "text-view", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ImageComponentView", + "_Props": { + "Sources": [ + { + "Scale": 3, + "Size": "33, 33", + "Type": "Local", + "Uri": "@react-native-windows/tester/js/assets/flux@3x.png", + }, + ], + }, + }, + ], + }, + "Visual Tree": { + "Comment": "text-view", + "Offset": "0, 0, 0", + "Size": "916, 26", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "229, 0, 0", + "Size": "26, 19", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(70, 130, 180, 255)", + }, + "Offset": "0, 0, 0", + "Size": "26, 19", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "384, 0, 0", + "Size": "34, 23", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "34, 23", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, +} +`; + +exports[`Text Tests Text can have nested views 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-nested-view", + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This is the first row", + "TextRangePattern.GetText": "This is the first row", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This is a nested text  with a Red View", + "TextRangePattern.GetText": "This is a nested text ￯﾿ﾼ with a Red View", + }, + ], + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "text-nested-view", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + ], + }, + ], + }, + "Visual Tree": { + "Comment": "text-nested-view", + "Offset": "0, 0, 0", + "Size": "916, 40", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 18, 0", + "Size": "916, 23", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 23", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "125, 0, 0", + "Size": "21, 19", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "21, 19", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + ], + }, +} +`; + exports[`Text Tests Text can have shadows 1`] = ` { "Automation Tree": { @@ -742,7 +1105,7 @@ exports[`Text Tests Text can have shadows 1`] = ` "Visual Tree": { "Comment": "text-shadow", "Offset": "0, 0, 0", - "Size": "916, 27", + "Size": "916, 28", "Visual Type": "SpriteVisual", }, } @@ -771,3 +1134,195 @@ exports[`Text Tests Text can wrap 1`] = ` }, } `; + +exports[`Text Tests Texts can clip inline View/Images 1`] = ` +{ + "Automation Tree": { + "AutomationId": "text-view-images-clipped", + "ControlType": 50026, + "LocalizedControlType": "group", + "__Children": [ + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "The inline view below is taller than its Text parent and should be clipped.", + "TextRangePattern.GetText": "The inline view below is taller than its Text parent and should be clipped.", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This is an inline view", + "TextRangePattern.GetText": "This is an inline view￯﾿ﾼ", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "The inline image below is taller than its Text parent and should be clipped.", + "TextRangePattern.GetText": "The inline image below is taller than its Text parent and should be clipped.", + }, + { + "AutomationId": "", + "ControlType": 50020, + "LocalizedControlType": "text", + "Name": "This is an inline image", + "TextRangePattern.GetText": "This is an inline image￯﾿ﾼ", + }, + ], + }, + "Component Tree": { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": { + "TestId": "text-view-images-clipped", + }, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ViewComponentView", + "_Props": {}, + }, + ], + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + }, + { + "Type": "Microsoft.ReactNative.Composition.ParagraphComponentView", + "_Props": {}, + "__Children": [ + { + "Type": "Microsoft.ReactNative.Composition.ImageComponentView", + "_Props": { + "Sources": [ + { + "Size": "50, 100", + "Type": "Remote", + "Uri": "https://picsum.photos/100", + }, + ], + }, + }, + ], + }, + ], + }, + "Visual Tree": { + "Comment": "text-view-images-clipped", + "Offset": "0, 0, 0", + "Size": "916, 223", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 19", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 19", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 18, 0", + "Size": "150, 75", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "150, 75", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 19, 0", + "Size": "51, 19", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(255, 0, 0, 255)", + }, + "Offset": "0, 0, 0", + "Size": "51, 19", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "1, 20, 0", + "Size": "48, 98", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Brush": { + "Brush Type": "ColorBrush", + "Color": "rgba(70, 130, 180, 255)", + }, + "Offset": "0, 0, 0", + "Size": "48, 98", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + { + "Offset": "0, 103, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "916, 20", + "Visual Type": "SpriteVisual", + }, + ], + }, + { + "Offset": "0, 122, 0", + "Size": "175, 100", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "175, 100", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 19, 0", + "Size": "51, 19", + "Visual Type": "SpriteVisual", + "__Children": [ + { + "Offset": "0, 0, 0", + "Size": "51, 19", + "Visual Type": "SpriteVisual", + }, + ], + }, + ], + }, + ], + }, + ], + }, +} +`; diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap b/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap index b4f9dfedc41..f2a980160d8 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/TextInputComponentTest.test.ts.snap @@ -333,7 +333,7 @@ exports[`TextInput Tests Text have cursorColor 1`] = ` "Visual Tree": { "Comment": "textinput-cursorColor", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -561,7 +561,7 @@ exports[`TextInput Tests TextInputs can autocomplete, address country 1`] = ` "Visual Tree": { "Comment": "textinput-autocomplete-address-country", "Offset": "0, 0, 0", - "Size": "916, 28", + "Size": "916, 29", "Visual Type": "SpriteVisual", "__Children": [ { @@ -717,7 +717,7 @@ exports[`TextInput Tests TextInputs can autocomplete, one-time-code 1`] = ` "Visual Tree": { "Comment": "textinput-autocomplete-one-time-code", "Offset": "0, 0, 0", - "Size": "916, 29", + "Size": "916, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -872,7 +872,7 @@ exports[`TextInput Tests TextInputs can autogrow 1`] = ` "Visual Tree": { "Comment": "textinput-autogrow", "Offset": "0, 0, 0", - "Size": "300, 131", + "Size": "300, 130", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1002,12 +1002,12 @@ exports[`TextInput Tests TextInputs can be defined as a set using accessibilityP "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1130,12 +1130,12 @@ exports[`TextInput Tests TextInputs can be defined as a set using accessibilityP }, { "Offset": "0, 62, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1527,7 +1527,7 @@ exports[`TextInput Tests TextInputs can be set to not editable 1`] = ` "Visual Tree": { "Comment": "textinput-not-editable", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1605,7 +1605,7 @@ exports[`TextInput Tests TextInputs can be set to not editable 2 1`] = ` "Visual Tree": { "Comment": "textinput-not-editable2", "Offset": "0, 0, 0", - "Size": "916, 29", + "Size": "916, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1680,7 +1680,7 @@ exports[`TextInput Tests TextInputs can clear on submit 1`] = ` "Visual Tree": { "Comment": "textinput-clear-on-submit", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1830,7 +1830,7 @@ exports[`TextInput Tests TextInputs can clear on submit with custom submit key e "Visual Tree": { "Comment": "textinput-clear-on-submit-2", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -1905,7 +1905,7 @@ exports[`TextInput Tests TextInputs can customize its padding 1`] = ` "Visual Tree": { "Comment": "textinput-padding", "Offset": "0, 0, 0", - "Size": "916, 29", + "Size": "916, 28", "Visual Type": "SpriteVisual", "__Children": [ { @@ -2601,7 +2601,7 @@ exports[`TextInput Tests TextInputs can have caretHidden 1`] = ` "Visual Tree": { "Comment": "textinput-carethidden", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -2679,7 +2679,7 @@ exports[`TextInput Tests TextInputs can have custom return key label, Compile 1` "Visual Tree": { "Comment": "textinput-return-Compile", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -2757,7 +2757,7 @@ exports[`TextInput Tests TextInputs can have custom return key label, React Nati "Visual Tree": { "Comment": "textinput-return-React Native", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -2913,7 +2913,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, go 1`] = ` "Visual Tree": { "Comment": "textinput-return-go", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3069,7 +3069,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, none 1`] = "Visual Tree": { "Comment": "textinput-return-none", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3147,7 +3147,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, previous 1` "Visual Tree": { "Comment": "textinput-return-previous", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3303,7 +3303,7 @@ exports[`TextInput Tests TextInputs can have custom return key type, send 1`] = "Visual Tree": { "Comment": "textinput-return-send", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3381,7 +3381,7 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=-1 "Visual Tree": { "Comment": "textinput-letterspacing--1", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3459,7 +3459,7 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=0 "Visual Tree": { "Comment": "textinput-letterspacing-0", "Offset": "0, 0, 0", - "Size": "916, 33", + "Size": "916, 32", "Visual Type": "SpriteVisual", "__Children": [ { @@ -3615,7 +3615,7 @@ exports[`TextInput Tests TextInputs can have customer letter spacing, spacing=9 "Visual Tree": { "Comment": "textinput-letterspacing-9", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -4021,7 +4021,7 @@ exports[`TextInput Tests TextInputs can have inline images, drawable props not s "Visual Tree": { "Comment": "textinput-inline-images-3", "Offset": "0, 0, 0", - "Size": "916, 32", + "Size": "916, 33", "Visual Type": "SpriteVisual", "__Children": [ { @@ -4868,7 +4868,7 @@ exports[`TextInput Tests TextInputs can set their readOnly prop to true 1`] = ` "Visual Tree": { "Comment": "textinput-readyonly", "Offset": "0, 0, 0", - "Size": "916, 28", + "Size": "916, 29", "Visual Type": "SpriteVisual", "__Children": [ { diff --git a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap index 603a99fb4a9..a110d429ffe 100644 --- a/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap +++ b/packages/e2e-test-app-fabric/test/__snapshots__/snapshotPages.test.js.snap @@ -27878,8 +27878,10 @@ exports[`snapshotAllPages LegacyTextInputTest 1`] = ` testID="textinput-field" /> `; +exports[`snapshotAllPages Text 46`] = ` + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20 + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore Ut enim ad minim veniam.With AdjustFontSize width: 800, height: 100, fontSize: 20 + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:80,width:500,lineCount:3,fontSize:40 + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:80,width:500,lineCount:3,fontSize:40 + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:120,width:475,lineCount:5,fontSize:40 + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:120,width:475,lineCount:5,fontSize:40 + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. With AdjustFontSize height:160,width:450,lineCount:0,fontSize:40 + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore. Without AdjustFontSize height:160,width:450,lineCount:0,fontSize:40 + + +`; + exports[`snapshotAllPages TextInput 1`] = ` + + + + + + + + + +`; + +exports[`snapshotAllPages TextInput 24`] = ` `; -exports[`snapshotAllPages TextInput 24`] = ` +exports[`snapshotAllPages TextInput 25`] = ` `; -exports[`snapshotAllPages TextInput 25`] = ` +exports[`snapshotAllPages TextInput 26`] = ` `; -exports[`snapshotAllPages TextInput 26`] = ` +exports[`snapshotAllPages TextInput 27`] = ` `; -exports[`snapshotAllPages TextInput 27`] = ` +exports[`snapshotAllPages TextInput 28`] = ` `; -exports[`snapshotAllPages TextInput 28`] = ` +exports[`snapshotAllPages TextInput 29`] = ` `; -exports[`snapshotAllPages TextInput 29`] = ` +exports[`snapshotAllPages TextInput 30`] = ` `; -exports[`snapshotAllPages TextInput 30`] = ` +exports[`snapshotAllPages TextInput 31`] = ` `; -exports[`snapshotAllPages TextInput 31`] = ` +exports[`snapshotAllPages TextInput 32`] = ` `; -exports[`snapshotAllPages TextInput 32`] = ` +exports[`snapshotAllPages TextInput 33`] = ` `; -exports[`snapshotAllPages TextInput 33`] = ` +exports[`snapshotAllPages TextInput 34`] = ` `; -exports[`snapshotAllPages TextInput 34`] = ` +exports[`snapshotAllPages TextInput 35`] = ` `; -exports[`snapshotAllPages TextInput 35`] = ` +exports[`snapshotAllPages TextInput 36`] = ` PressIn/PressOut message @@ -74998,7 +75363,7 @@ exports[`snapshotAllPages TextInput 35`] = ` `; -exports[`snapshotAllPages TextInput 36`] = ` +exports[`snapshotAllPages TextInput 37`] = ` Default submit key (Enter): @@ -75134,7 +75499,7 @@ exports[`snapshotAllPages TextInput 36`] = ` `; -exports[`snapshotAllPages TextInput 37`] = ` +exports[`snapshotAllPages TextInput 38`] = ` [ Spell Check Enabled: @@ -75249,7 +75614,7 @@ exports[`snapshotAllPages TextInput 38`] = ` ] `; -exports[`snapshotAllPages TextInput 39`] = ` +exports[`snapshotAllPages TextInput 40`] = ` CaretHidden @@ -75281,7 +75646,7 @@ exports[`snapshotAllPages TextInput 39`] = ` `; -exports[`snapshotAllPages TextInput 40`] = ` +exports[`snapshotAllPages TextInput 41`] = ` Cursorcolor @@ -75313,7 +75678,7 @@ exports[`snapshotAllPages TextInput 40`] = ` `; -exports[`snapshotAllPages TextInput 41`] = ` +exports[`snapshotAllPages TextInput 42`] = ` Shadow @@ -75351,7 +75716,7 @@ exports[`snapshotAllPages TextInput 41`] = ` `; -exports[`snapshotAllPages TextInput 42`] = ` +exports[`snapshotAllPages TextInput 43`] = ` `; -exports[`snapshotAllPages TextInput 43`] = ` +exports[`snapshotAllPages TextInput 44`] = ` scrollPattern; + hr = pTarget->GetCurrentPattern(UIA_ScrollPatternId, reinterpret_cast(scrollPattern.put())); + if (SUCCEEDED(hr) && scrollPattern) { + hr = scrollPattern->get_HorizontallyScrollable(&horizontallyScrollable); + if (SUCCEEDED(hr)) { + InsertBooleanValueIfNotDefault(result, L"ScrollPattern.HorizontallyScrollable", horizontallyScrollable, false); + } + } + ::SysFreeString(text); ::SysFreeString(value); } diff --git a/packages/playground/Samples/image.tsx b/packages/playground/Samples/image.tsx index cc93315baa5..f495b23fb4e 100644 --- a/packages/playground/Samples/image.tsx +++ b/packages/playground/Samples/image.tsx @@ -15,11 +15,18 @@ import { PlatformColor, } from 'react-native'; +const loadingImageUri = + 'data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4gPHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyOCAyOCIgZmlsbD0ibm9uZSI+PHBhdGggZD0iTTEzLjEyNSAwSDBWMTMuMTI1SDEzLjEyNVYwWiIgZmlsbD0iI0YyNTAyMiI+PC9wYXRoPjxwYXRoIGQ9Ik0yOCAwSDE0Ljg3NVYxMy4xMjVIMjhWMFoiIGZpbGw9IiM3RkJBMDAiPjwvcGF0aD48cGF0aCBkPSJNMTMuMTI1IDE0Ljg3NUgwVjI4SDEzLjEyNVYxNC44NzVaIiBmaWxsPSIjMDBBNEVGIj48L3BhdGg+PHBhdGggZD0iTTI4IDE0Ljg3NUgxNC44NzVWMjhIMjhWMTQuODc1WiIgZmlsbD0iI0ZGQjkwMCI+PC9wYXRoPjwvc3ZnPiA='; + const largeImageUri = 'https://cdn.freebiesupply.com/logos/large/2x/react-logo-png-transparent.png'; -const smallImageUri = - 'https://facebook.github.io/react-native/img/header_logo.png'; +const smallImageUri = 'https://reactnative.dev/img/tiny_logo.png'; + +const flowerImageUri = + 'https://cdn.pixabay.com/photo/2021/08/02/00/10/flowers-6515538_1280.jpg'; + +const reactLogoUri = 'https://reactjs.org/logo-og.png'; const dataImageUri = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADMAAAAzCAYAAAA6oTAqAAAAEXRFWHRTb2Z0d2FyZQBwbmdjcnVzaEB1SfMAAABQSURBVGje7dSxCQBACARB+2/ab8BEeQNhFi6WSYzYLYudDQYGBgYGBgYGBgYGBgYGBgZmcvDqYGBgmhivGQYGBgYGBgYGBgYGBgYGBgbmQw+P/eMrC5UTVAAAAABJRU5ErkJggg=='; @@ -42,6 +49,10 @@ export default class Bootstrap extends React.Component< selectedSource: string; imageUri: string; tintColor: string; + modalVisible: boolean; + currentPicker: string | null; + defaultImageUri: string; + includedefaultSourceOnly: boolean; } > { state = { @@ -50,7 +61,11 @@ export default class Bootstrap extends React.Component< includeBorder: false, tintColor: 'transparent', blurRadius: 0, - imageUri: 'https://facebook.github.io/react-native/img/header_logo.png', + imageUri: smallImageUri, + modalVisible: false, + currentPicker: '', + defaultImageUri: reactLogoUri, + includedefaultSourceOnly: false, }; switchImageUri = (value: string) => { @@ -60,6 +75,8 @@ export default class Bootstrap extends React.Component< if (value === 'small') { imageUri = smallImageUri; + } else if (value === 'flower') { + imageUri = flowerImageUri; } else if (value === 'large') { imageUri = largeImageUri; } else if (value === 'data-svg') { @@ -71,6 +88,60 @@ export default class Bootstrap extends React.Component< this.setState({imageUri}); }; + setModalVisible = (visible: boolean, pickerName: string | null = null) => { + this.setState({modalVisible: visible, currentPicker: pickerName}); + }; + + setSelection = (value: any) => { + const {currentPicker} = this.state; + switch (currentPicker) { + case 'resizeMode': + this.setState({selectedResizeMode: value}); + break; + case 'imageSource': + this.switchImageUri(value); + break; + case 'blurRadius': + this.setState({blurRadius: value}); + break; + case 'tintColor': + this.setState({tintColor: value}); + break; + default: + break; + } + + this.setModalVisible(false); + }; + + handleResizeModesSelect = (value: any) => { + this.setState({selectedResizeMode: value}); + this.state.currentPicker = 'resizeMode'; + this.setSelection(value); + }; + + handleImageSourcesSelect = (value: any) => { + this.setState({selectedSource: value}); + this.state.currentPicker = 'imageSource'; + this.setSelection(value); + }; + + handleBlurRadiusSelect = (value: any) => { + this.setState({blurRadius: value}); + this.state.currentPicker = 'blurRadius'; + this.setSelection(value); + }; + + handleTintColorSelect = (value: any) => { + this.setState({tintColor: value}); + this.state.currentPicker = 'tintColor'; + this.setSelection(value); + }; + + handleOnProgress = (event: any) => { + const {progress, loaded, total} = event.nativeEvent; + console.log(`Progress: ${progress}, Loaded = ${loaded} , Total = ${total}`); + }; render() { return ( @@ -151,6 +222,49 @@ export default class Bootstrap extends React.Component< resizeMode={this.state.selectedResizeMode} blurRadius={this.state.blurRadius} /> + Include defaultSource Only + + + {this.state.includedefaultSourceOnly ? ( + + ) : ( + console.log('onLoad')} + onLoadStart={() => console.log('onLoadStart')} + onLoadEnd={() => console.log('onLoadEnd')} + onProgress={this.handleOnProgress} + /> + )} ); @@ -178,6 +292,12 @@ const styles = StyleSheet.create({ height: '50%', width: '75%', }, + imageContainerDefault: { + marginTop: 5, + backgroundColor: 'skyblue', + height: '50%', + width: '75%', + }, image: { height: '100%', width: '100%', @@ -191,6 +311,13 @@ const styles = StyleSheet.create({ imageWithPlatformColor: { tintColor: PlatformColor('SystemAccentColor'), }, + imageWithPlatformColorPrimary: { + tintColor: PlatformColor('TextFillColorPrimary'), + }, + loading: { + height: '10%', + width: '10%', + }, title: { fontWeight: 'bold', margin: 5, diff --git a/packages/playground/Samples/scrollViewSnapSample.tsx b/packages/playground/Samples/scrollViewSnapSample.tsx index e12c779f224..7683284be4b 100644 --- a/packages/playground/Samples/scrollViewSnapSample.tsx +++ b/packages/playground/Samples/scrollViewSnapSample.tsx @@ -33,6 +33,8 @@ export default class Bootstrap extends React.Component<{}, any> { keyboardDismiss: false, snapToOffsets: true, pagingEnabled: false, + showsHorizontalScrollIndicatorValue: true, + showsVerticalScrollIndicatorValue: false, }; toggleSwitch1 = (value: boolean) => { @@ -67,6 +69,14 @@ export default class Bootstrap extends React.Component<{}, any> { this.setState({keyboardDismiss: value}); }; + toggleSwitch9 = (value: boolean) => { + this.setState({showsHorizontalScrollIndicatorValue: value}); + }; + + toggleSwitch10 = (value: boolean) => { + this.setState({showsVerticalScrollIndicatorValue: value}); + }; + onRefresh = () => { this.setState({refreshing: true}); void wait(2000).then(() => this.setState({refreshing: false})); @@ -109,6 +119,42 @@ export default class Bootstrap extends React.Component<{}, any> { value={this.state.horizontalValue} /> + + + {' '} + {this.state.showsHorizontalScrollIndicatorValue + ? 'Show Horizontal Indicator' + : 'Hide Horizontal Indicator'} + + + + + + {' '} + {this.state.showsVerticalScrollIndicatorValue + ? 'Show Vertical Indicator' + : 'Hide Vertical Indicator'} + + + { snapToStart={this.state.snapToStartValue} snapToEnd={this.state.snapToEndValue} snapToAlignment={this.state.alignToStartValue ? 'start' : 'end'} - horizontal={this.state.horizontalValue}> + horizontal={this.state.horizontalValue} + showsHorizontalScrollIndicator={ + this.state.showsHorizontalScrollIndicatorValue + } + showsVerticalScrollIndicator={ + this.state.showsVerticalScrollIndicatorValue + } + onScrollBeginDrag={() => { + console.log('onScrollBeginDrag'); + }} + onScroll={() => { + console.log('onScroll'); + }} + decelerationRate={0.95} + scrollEventThrottle={50}> {this.makeItems(20, [styles.itemWrapper])} diff --git a/packages/playground/Samples/text.tsx b/packages/playground/Samples/text.tsx index 54ce125b651..79bae6a10da 100644 --- a/packages/playground/Samples/text.tsx +++ b/packages/playground/Samples/text.tsx @@ -5,13 +5,29 @@ */ import React from 'react'; -import {AppRegistry, StyleSheet, Text, View} from 'react-native'; +import {AppRegistry, StyleSheet, View} from 'react-native'; +import {Text} from 'react-native-windows'; export default class Bootstrap extends React.Component { render() { return ( Welcome to React Native! + + Click here : This is a text with a tooltip. + + + + Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do + eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim + ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut + aliquip ex ea commodo consequat. + + ); } @@ -24,6 +40,13 @@ const styles = StyleSheet.create({ alignItems: 'center', backgroundColor: '#C5CCFF', }, + container2: { + backgroundColor: 'lightcoral', + padding: 10, + marginBottom: 10, + width: 500, + height: 100, + }, welcome: { fontSize: 20, textAlign: 'center', diff --git a/packages/playground/Samples/textinput.tsx b/packages/playground/Samples/textinput.tsx index dd87eb6f734..70d52a1b0f2 100644 --- a/packages/playground/Samples/textinput.tsx +++ b/packages/playground/Samples/textinput.tsx @@ -14,6 +14,7 @@ import { View, KeyboardAvoidingView, ScrollView, + TouchableWithoutFeedback, } from 'react-native'; import type {EventSubscription} from 'react-native/Libraries/vendor/emitter/EventEmitter'; @@ -49,6 +50,7 @@ export default class Bootstrap extends React.Component<{}, any> { state = { passwordHidden: true, text: '', + endEditingText: '', }; onPressShowPassword = () => { @@ -56,141 +58,203 @@ export default class Bootstrap extends React.Component<{}, any> { this.setState({passwordHidden: !previousState}); }; + handleEndEditing = (event: any) => { + const text = event.nativeEvent.text; + this.setState({endEditingText: text}); + console.log('Text input focus lost:', text); + }; + render() { let textInputRef: TextInput | null; return ( - - - - - - - - - - - (textInputRef = ref)} - onFocus={() => setTimeout(() => textInputRef?.blur(), 5000)} - placeholder={'blurs after 5 seconds'} - style={styles.input} - /> - { - this.setState({text}); - }} - value={this.state.text} - selectionColor="red" - maxLength={10} - keyboardType="numeric" - /> - -