@controleonline/ui-common 1.2.91 → 1.2.93

package/.release/rc-manifest.json

@@ -0,0 +1,10 @@
+{
+  "version": "1.2.93",
+  "rc": 1,
+  "branch": "rc/1.2.93-rc.1",
+  "baseMaster": "b4db94eb1ccd3bf878dc96e3d32c0249aad07402",
+  "tasks": [77],
+  "repositories": { "ControleOnline/ui-common": "4dfdb2d7ccb160f265115bdad3125d6ecd26bdfd" },
+  "compositionNotes": ["Verified on Android emulator: Text width was still 0 with flexBasis auto because Yoga prioritises flex over flexGrow/flexBasis. flex:0 fixes it."],
+  "frozen": true
+}

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@controleonline/ui-common",
-  "version": "1.2.91",
+  "version": "1.2.93",
   "author": "ControleOnline",
   "description": "ControleOnline Common Quasar UI Component",
   "license": "MIT",
   "main": "src/react/index.js",
   "scripts": {
-    "test": "npm run test:receita-federal && npm run test:imports-status && npm run test:runtime-language && npm run test:runtime-footer && npm run test:runtime-footer-marquee && npm run test:invoice-presentation && npm run test:system-error-message && npm run test:bottom-navigation-toolbar && npm run test:copy-device-configs && npm run test:print-routing && npm run test:device-detail-dependencies",
+    "test": "npm run test:receita-federal && npm run test:imports-status && npm run test:runtime-language && npm run test:runtime-footer && npm run test:runtime-footer-marquee && npm run test:invoice-presentation && npm run test:system-error-message && npm run test:bottom-navigation-toolbar && npm run test:copy-device-configs && npm run test:print-routing && npm run test:device-detail-dependencies && npm run test:runtime-zoom",
     "test:receita-federal": "node --test src/tests/react/pages/receitaFederalIntegrationContract.test.mjs",
     "test:imports-status": "mkdir -p node_modules/@controleonline && rm -rf node_modules/@controleonline/ui-common && ln -s ../.. node_modules/@controleonline/ui-common && node --test src/tests/react/utils/importStatus.test.js",
     "test:runtime-language": "node --test src/tests/react/utils/runtimeLanguage.test.js",
@@ -18,7 +18,8 @@
     "test:copy-device-configs": "node --test src/tests/react/utils/copyDeviceConfigs.test.mjs",
     "test:print-routing": "node --test src/tests/react/utils/printRouting.test.mjs src/tests/react/utils/printSpoolUtils.test.mjs",
     "test:runtime-footer-marquee": "node --test src/tests/react/components/RuntimeFooterMarqueeText.test.js src/tests/react/components/RuntimeFooterMarqueeText.build.test.js",
-    "test:device-detail-dependencies": "node --test src/tests/react/pages/deviceDetailLoaderDependencies.test.mjs"
+    "test:device-detail-dependencies": "node --test src/tests/react/pages/deviceDetailLoaderDependencies.test.mjs",
+    "test:runtime-zoom": "node --test src/tests/react/utils/runtimeZoom.test.js"
   },
   "devDependencies": {
     "c8": "^10.1.3",

package/src/react/components/DefaultProvider.native.js

@@ -172,12 +172,26 @@ export const DefaultProvider = ({
     deviceInfo: device || {},
   });
   const {width: windowWidth, height: windowHeight} = useWindowDimensions();
+  // app-community#1051: size the scaled content from the area it really
+  // occupies (shell minus runtime footer), not from the full window.
+  const [contentSize, setContentSize] = useState(null);
+  const handleContentLayout = useCallback(({nativeEvent}) => {
+    const {width, height} = nativeEvent?.layout || {};
+    setContentSize(current =>
+      current?.width === width && current?.height === height
+        ? current
+        : {width, height},
+    );
+  }, []);
   const runtimeUiScaleStyle = useMemo(
     () =>
       buildRuntimeZoomStyle(APP_ENV?.ZOOM, {
-        viewport: {width: windowWidth, height: windowHeight},
+        viewport: {
+          width: contentSize?.width || windowWidth,
+          height: contentSize?.height || windowHeight,
+        },
       }),
-    [windowHeight, windowWidth],
+    [contentSize, windowHeight, windowWidth],
   );
   const deviceConfigPeopleIri = resolveDeviceConfigPeopleIri({
     appType,
@@ -371,7 +385,15 @@ export const DefaultProvider = ({
                   backgroundColor: colors?.background || runtimeColors.background,
                 },
               ]}>
-              <View style={[providerStyles.content, runtimeUiScaleStyle]}>{children}</View>
+              <View
+                style={providerStyles.content}
+                onLayout={runtimeUiScaleStyle ? handleContentLayout : undefined}>
+                {runtimeUiScaleStyle ? (
+                  <View style={runtimeUiScaleStyle}>{children}</View>
+                ) : (
+                  children
+                )}
+              </View>
               {!isShopClientApp && bottomNavigationCount === 0 && (
                 <RuntimeInfoFooter
                   appVersion={appVersion}

package/src/react/components/RuntimeFooterMarqueeText.js

@@ -105,6 +105,13 @@ const RuntimeFooterMarqueeText = props => {
       color: color,
       flexShrink: 0,
       flexGrow: 0,
+      // primaryText carries `flex: 1` (flexBasis 0 on native), which collapsed
+      // the Text to width 0 inside the row on Android. Force intrinsic sizing.
+      // Yoga gives `flex` precedence over flexGrow/flexBasis, so the inherited
+      // `flex: 1` must be overridden explicitly or the Text stays at width 0.
+      flex: 0,
+      flexBasis: 'auto',
+      minWidth: 0,
       minHeight: 14,
     },
   ];
@@ -164,6 +171,7 @@ const RuntimeFooterMarqueeText = props => {
           alignItems: 'center',
           opacity: 1,
           transform: [{translateX: translateX}],
+          justifyContent: shouldMarquee ? 'flex-start' : 'center',
           alignSelf: shouldMarquee ? 'flex-start' : 'stretch',
         },
       },

package/src/react/utils/runtimeZoom.js

@@ -37,10 +37,16 @@ export const buildRuntimeZoomStyle = (
   }
 
   const inverseScale = 1 / scale;
+  // app-community#1051: the container also carries `flex: 1` (flexBasis 0),
+  // which overrides the compensated height. Disable flex sizing so the
+  // compensated size survives and the scaled content fills the viewport.
   const nativeBase = {
     transform: [{scale}],
     transformOrigin: 'top left',
     alignSelf: 'flex-start',
+    flexGrow: 0,
+    flexShrink: 0,
+    flexBasis: 'auto',
   };
 
   const viewportWidth = Number(viewport?.width);

package/src/tests/react/components/RuntimeFooterMarqueeText.test.js

@@ -169,3 +169,27 @@ test('long text enables marquee duplicate and starts loop animation', async () =
   assert.ok(lastLoopConfig, 'Animated.loop should start when overflowing');
   assert.ok(animationStarts >= 1);
 });
+
+test('native text keeps intrinsic width even when style carries flex: 1 (android #77)', () => {
+  const RuntimeFooterMarqueeText = loadComponent();
+  const renderer = require('react-test-renderer');
+
+  let tree;
+  renderer.act(() => {
+    tree = renderer.create(
+      React.createElement(RuntimeFooterMarqueeText, {
+        text: 'Samsung • DEVICE / v1.10.55',
+        color: '#111',
+        style: {flex: 1, minWidth: 0, fontSize: 11},
+      }),
+    );
+  });
+
+  const text = tree.root.findAllByType('Text')[0];
+  const flat = Object.assign({}, ...[].concat(text.props.style));
+  // Yoga gives `flex` precedence: it must not stay at the inherited 1 (width 0 on Android).
+  assert.equal(flat.flex, 0);
+  assert.equal(flat.flexBasis, 'auto');
+  assert.equal(flat.flexGrow, 0);
+  assert.equal(flat.flexShrink, 0);
+});

package/src/tests/react/utils/runtimeZoom.test.js

@@ -31,6 +31,9 @@ test('builds compensated container dimensions for native scaled content', () =>
     buildRuntimeZoomStyle(70),
     {
       alignSelf: 'flex-start',
+      flexBasis: 'auto',
+      flexGrow: 0,
+      flexShrink: 0,
       height: '142.85714285714286%',
       transform: [{scale: 0.7}],
       transformOrigin: 'top left',
@@ -44,6 +47,9 @@ test('uses viewport pixels on native so scale origin stays top-left without dist
     buildRuntimeZoomStyle(70, {viewport: {width: 360, height: 800}}),
     {
       alignSelf: 'flex-start',
+      flexBasis: 'auto',
+      flexGrow: 0,
+      flexShrink: 0,
       height: 800 / 0.7,
       transform: [{scale: 0.7}],
       transformOrigin: 'top left',