@widergy/mobile-ui 1.10.3 → 1.11.0

package/CHANGELOG.md

@@ -1,3 +1,17 @@
+# [1.11.0](https://github.com/widergy/mobile-ui/compare/v1.10.4...v1.11.0) (2024-06-03)
+
+
+### Features
+
+* quantity prop for utproductitem ([#288](https://github.com/widergy/mobile-ui/issues/288)) ([dc80116](https://github.com/widergy/mobile-ui/commit/dc80116a2f552b9086dde49ca358dc119a2fe09e))
+
+## [1.10.4](https://github.com/widergy/mobile-ui/compare/v1.10.3...v1.10.4) (2024-05-31)
+
+
+### Bug Fixes
+
+* integrate uticon ([#289](https://github.com/widergy/mobile-ui/issues/289)) ([b7b058d](https://github.com/widergy/mobile-ui/commit/b7b058d129983a3c4eb658b89d84ab07bbda7dd3))
+
 ## [1.10.3](https://github.com/widergy/mobile-ui/compare/v1.10.2...v1.10.3) (2024-05-24)
 
 

package/lib/components/UTButton/index.js

@@ -8,7 +8,7 @@ import UTLoading from '../UTLoading';
 
 import { DEFAULT_PROPS, ICON_PLACEMENTS } from './constants';
 import { retrieveStyle } from './theme';
-import { isReactComponent } from './utils';
+import { isUTIcon } from './utils';
 
 const UTButton = ({
   children,
@@ -50,10 +50,10 @@ const UTButton = ({
 
   const IconToShow =
     Icon &&
-    (isReactComponent(Icon) ? (
-      <Icon style={iconClassname} fill={themeTextStyles.color} />
+    (isUTIcon(Icon) ? (
+      <UTIcon color={themeTextStyles.color} style={iconClassname} size={iconClassname.fontSize} name={Icon} />
     ) : (
-      <UTIcon color={themeTextStyles.color} style={iconClassname} size={iconClassname.fontSize} {...Icon} />
+      <Icon style={iconClassname} fill={themeTextStyles.color} />
     ));
 
   const RenderedChildren = (

package/lib/components/UTButton/utils.js

@@ -1 +1 @@
-export const isReactComponent = icon => typeof icon === 'function';
+export const isUTIcon = icon => typeof icon === 'string';

package/lib/components/UTProductItem/index.js

@@ -6,7 +6,7 @@ import isEmpty from 'lodash/isEmpty';
 
 import ImageIcon from '../ImageIcon';
 import { useTheme } from '../../theming';
-import Label from '../Label';
+import UTLabel from '../UTLabel';
 
 import { leftSectionComponents } from './utils';
 import QuantitySelector from './components/QuantitySelector';
@@ -18,9 +18,12 @@ const UTProductItem = ({
   additionalInfo,
   amount,
   counter,
+  counterLabelProps = {},
   discount,
   imageProps,
   previousAmount,
+  quantity,
+  quantityLabelProps = {},
   secondaryAction,
   selectedQuantity,
   style,
@@ -50,9 +53,22 @@ const UTProductItem = ({
       </View>
       <View style={[themedStyles.rightSection, !isEmpty(counter) && themedStyles.spaceBetween]}>
         {!isEmpty(counter) && (
-          <Label small style={themedStyles.counter}>{`${counter.current}/${counter.limit}`}</Label>
+          <UTLabel
+            variant="small"
+            className={themedStyles.counter}
+            {...counterLabelProps}
+          >{`${counter.current}/${counter.limit}`}</UTLabel>
         )}
-        <QuantitySelector {...{ action, secondaryAction, selectedQuantity, themedStyles }} />
+        <View style={themedStyles.quantitiesContainer}>
+          {quantity && (
+            <View style={themedStyles.quantityContainer}>
+              <UTLabel colorTheme="light" variant="subtitle1" {...quantityLabelProps}>
+                {quantity}
+              </UTLabel>
+            </View>
+          )}
+          <QuantitySelector {...{ action, secondaryAction, selectedQuantity, themedStyles }} />
+        </View>
       </View>
     </View>
   );
@@ -63,9 +79,12 @@ UTProductItem.propTypes = {
   additionalInfo: string,
   amount: number,
   counter: shape({ current: number, limit: number }),
+  counterLabelProps: shape({}),
   discount: number,
   imageProps: shape({ image: oneOf([string, element]), withUri: bool }),
   previousAmount: number,
+  quantity: number,
+  quantityLabelProps: shape({}),
   secondaryAction: ActionPropTypes,
   selectedQuantity: number,
   title: string

package/lib/components/UTProductItem/styles.js

@@ -27,6 +27,7 @@ export const getUTProductItemStyles = (theme = {}) =>
     },
     counter: {
       backgroundColor: theme.counterBackground || '#EBF8FD',
+      overflow: 'hidden',
       borderRadius: 4,
       color: theme.counterColor || '#035B83',
       paddingHorizontal: 8,
@@ -51,18 +52,29 @@ export const getUTProductItemStyles = (theme = {}) =>
     },
     leftSection: {
       alignItems: 'center',
-      display: 'flex',
+      flexGrow: 1,
       flexDirection: 'row'
     },
     mainInfo: {
-      display: 'flex',
-      minWidth: 160
+      flexGrow: 1,
+      flexBasis: 160
     },
     previousAmount: {
       color: theme.previousAmountColor || 'gray',
       textDecorationLine: 'line-through',
       textDecorationStyle: 'solid'
     },
+    quantitiesContainer: {
+      flexDirection: 'row',
+      alignItems: 'center'
+    },
+    quantityContainer: {
+      backgroundColor: theme.quantityBackground || 'darkblue',
+      paddingHorizontal: 8,
+      paddingVertical: 4,
+      borderRadius: 4,
+      marginRight: 12
+    },
     rightSection: {
       alignItems: 'flex-end',
       display: 'flex',

package/package.json

@@ -2,7 +2,7 @@
   "name": "@widergy/mobile-ui",
   "description": "Widergy Mobile Components",
   "author": "widergy",
-  "version": "1.10.3",
+  "version": "1.11.0",
   "repository": "https://github.com/widergy/mobile-ui.git",
   "main": "lib/index.js",
   "files": [