@controleonline/ui-default 1.0.274 → 1.0.275

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@controleonline/ui-default",
-  "version": "1.0.274",
+  "version": "1.0.275",
   "author": "ControleOnline",
   "description": "ControleOnline Default Quasar UI Component",
   "license": "MIT",

package/src/react/components/table/DefaultTableCards.js

@@ -18,6 +18,9 @@ import {
 import styles from './DefaultTable.styles';
 import useDefaultTableTheme from './useDefaultTableTheme';
 
+// Vertical cards must keep their intrinsic height; zero basis is only for grid rows.
+const intrinsicHeight = {flexBasis: 'auto', flexGrow: 0, flexShrink: 0};
+
 const DefaultTableCards = ({ storeName }) => {
   const store = useStore(storeName);
   const configs = store?.getters?.configs || {};
@@ -105,11 +108,12 @@ const DefaultTableCards = ({ storeName }) => {
           key={row?.['@id'] || row?.id}
           style={[
             styles.cardItem,
+            (flatListProps.numColumns || 1) === 1 ? intrinsicHeight : null,
             hasRowActions ? styles.cardItemWithActions : null,
             rowStyleValue,
           ]}
         >
-          <View style={styles.cardContent}>
+          <View style={[styles.cardContent, hasRowActions ? null : intrinsicHeight]}>
             {configs.renderCard({
               item: row,
               openEdit: () => configs.onEditRow?.(row),

package/src/react/components/table/DefaultTableControls.js

@@ -1,5 +1,7 @@
 // fluxo: outros | etapa: order-history-page-filtro | https://github.com/ControleOnline/app-community/wiki/Smoke-Test-Flows
 import React from 'react';
+/* The repository flat config does not count JSX identifiers as variable usage. */
+/* eslint-disable no-unused-vars */
 import { Text, TouchableOpacity } from 'react-native';
 import Icon from 'react-native-vector-icons/Feather';
 import { useStore } from '@store';
@@ -7,6 +9,7 @@ import DefaultColumnMenu from './DefaultColumnMenu';
 import DefaultDebug from './DefaultDebug';
 import DefaultFiltersModal from './DefaultFiltersModal';
 import DefaultModalButton from './DefaultModalButton';
+/* eslint-enable no-unused-vars */
 import styles from './DefaultTable.styles';
 import { normalizeText } from '../inputs/defaultInputUtils';
 import {
@@ -47,7 +50,6 @@ const DefaultTableControls = ({ storeName }) => {
   const {
     backgroundColor,
     borderColor,
-    iconColor,
     pressedBackgroundColor,
     pressedBorderColor,
     pressedIconColor,

package/src/react/components/upload/DefaultUpload.js

@@ -28,6 +28,8 @@ const DefaultUpload = ({
   attachments = [],
   entityId,
   companyId,
+  company = null,
+  showAttachmentActions = true,
   context = 'products',
   libraryContexts = DEFAULT_LIBRARY_CONTEXTS,
   fileStoreName = 'file',

package/src/tests/react/components/table/DefaultTableCards.layout.test.js

@@ -0,0 +1,45 @@
+const React = require('react');
+const renderer = require('react-test-renderer');
+global.IS_REACT_ACT_ENVIRONMENT = true;
+let mockStore;
+jest.mock('@store', () => ({useStore: () => mockStore}));
+jest.mock('@controleonline/ui-common/src/react/utils/storeColumns', () => ({formatStoreColumnLabel: () => ''}));
+jest.mock('react-native', () => {
+  const React = require('react');
+  return {
+    View: props => React.createElement('View', props, props.children),
+    Text: props => React.createElement('Text', props, props.children),
+    FlatList: props => React.createElement('List', {}, props.data.map((item, index) => props.renderItem({item, index}))),
+    StyleSheet: {create: value => value},
+    Platform: {select: value => value.web},
+  };
+});
+jest.mock('../../../../react/components/table/DefaultTableInput', () => () => null);
+jest.mock('../../../../react/components/table/DefaultTableEmptyState', () => () => null);
+jest.mock('../../../../react/components/table/DefaultTableRowActions', () => ({__esModule: true, default: () => null, hasDefaultTableRowActionsComponent: () => false}));
+jest.mock('../../../../react/components/table/useDefaultTableTheme', () => () => ({palette: {}}));
+const Cards = require('../../../../react/components/table/DefaultTableCards').default;
+const flatten = style => Object.assign({}, ...[style].flat(Infinity).filter(Boolean));
+it.each([1, 2, 3])('preserves content height and column sizing for %i columns', numColumns => {
+  const onPress = jest.fn();
+  mockStore = {getters: {items: [{id: 1}, {id: 2}], configs: {
+    cardListProps: {numColumns}, onRowPress: onPress,
+    renderCard: ({item, openRow}) => React.createElement('Card', {onPress: openRow, id: item.id}),
+  }}};
+  let tree;
+  renderer.act(() => {tree = renderer.create(React.createElement(Cards, {storeName: 'people'}));});
+  const cards = tree.root.findAllByType('Card');
+  expect(cards).toHaveLength(2);
+  for (const card of cards) {
+    const content = flatten(card.parent.props.style);
+    const outer = flatten(card.parent.parent.parent.props.style);
+    expect(content.flexBasis).toBe('auto');
+    expect(content.flexShrink).toBe(0);
+    expect(outer.flexBasis).toBe(numColumns === 1 ? 'auto' : 0);
+    expect(outer.flexGrow).toBe(numColumns === 1 ? 0 : 1);
+    expect(outer.width).toBe('100%');
+  }
+  renderer.act(() => cards[1].props.onPress());
+  expect(onPress).toHaveBeenCalledWith({id: 2});
+  renderer.act(() => tree.unmount());
+});