@widergy/mobile-ui 1.16.1 → 1.16.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (13) hide show
  1. package/CHANGELOG.md +14 -0
  2. package/lib/components/Label/index.js +27 -17
  3. package/lib/components/Label/styles.js +6 -1
  4. package/lib/components/Label/utils.js +4 -2
  5. package/lib/components/UTProductItem/components/AdditionalInfo/index.js +7 -3
  6. package/lib/components/UTProductItem/components/Amount/index.js +6 -2
  7. package/lib/components/UTProductItem/components/Discount/index.js +4 -4
  8. package/lib/components/UTProductItem/components/QuantitySelector/index.js +26 -26
  9. package/lib/components/UTProductItem/components/Title/index.js +3 -3
  10. package/lib/components/UTProductItem/index.js +3 -3
  11. package/lib/components/UTProductItem/styles.js +12 -17
  12. package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/index.js +2 -1
  13. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,17 @@
1
+ ## [1.16.3](https://github.com/widergy/mobile-ui/compare/v1.16.2...v1.16.3) (2024-08-08)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * android highlight for markdown links ([#329](https://github.com/widergy/mobile-ui/issues/329)) ([0b712dc](https://github.com/widergy/mobile-ui/commit/0b712dc2bd364fcff8229766daf788ba2f4a2796))
7
+
8
+ ## [1.16.2](https://github.com/widergy/mobile-ui/compare/v1.16.1...v1.16.2) (2024-08-08)
9
+
10
+
11
+ ### Bug Fixes
12
+
13
+ * standarize utproductitem ([#330](https://github.com/widergy/mobile-ui/issues/330)) ([b0ac7e2](https://github.com/widergy/mobile-ui/commit/b0ac7e210e89bf48d6470b2761379d7bafe27b79))
14
+
1
15
  ## [1.16.1](https://github.com/widergy/mobile-ui/compare/v1.16.0...v1.16.1) (2024-07-31)
2
16
 
3
17
 
package/lib/components/Label/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import React, { useMemo } from 'react';
1
+ import React, { useMemo, useState } from 'react';
2
2
  import { Text } from 'react-native';
3
3
  import Markdown from 'react-native-markdown-display';
4
4
 
@@ -25,29 +25,39 @@ const Label = ({
25
25
  const textVariants = Object.keys(textStyles);
26
26
  const customStyles = getCustomStyles(textVariants, props, textStyles);
27
27
 
28
+ const [pressed, setPressed] = useState(false);
29
+
28
30
  const styles = formatStyles(
29
31
  useMarkdown,
30
32
  [textStyles.base, textStyles.fontColor, customStyles, style],
31
- markdownStyles
33
+ markdownStyles,
34
+ pressed
32
35
  );
33
36
 
34
37
  const LabelRenderer = useMarkdown ? Markdown : Text;
35
38
 
36
- const propsByComponent = useMemo(
37
- () =>
38
- useMarkdown
39
- ? {
40
- mergeStyle: false,
41
- onLinkPress,
42
- children: markdownFormat(children)
43
- }
44
- : {
45
- allowFontScaling: allowFontScaling ?? theme.allowFontScaling,
46
- ...textProps,
47
- children
48
- },
49
- [allowFontScaling, children, onLinkPress, textProps, theme.allowFontScaling, useMarkdown]
50
- );
39
+ const propsByComponent = useMemo(() => {
40
+ const handleLinkPress = () => {
41
+ setPressed(true);
42
+ onLinkPress?.();
43
+ setTimeout(() => {
44
+ setPressed(false);
45
+ }, 200);
46
+ return true;
47
+ };
48
+
49
+ return useMarkdown
50
+ ? {
51
+ mergeStyle: false,
52
+ onLinkPress: handleLinkPress,
53
+ children: markdownFormat(children)
54
+ }
55
+ : {
56
+ allowFontScaling: allowFontScaling ?? theme.allowFontScaling,
57
+ ...textProps,
58
+ children
59
+ };
60
+ }, [allowFontScaling, children, onLinkPress, textProps, theme.allowFontScaling, useMarkdown]);
51
61
 
52
62
  return <LabelRenderer style={styles} {...propsByComponent} {...props} />;
53
63
  };
package/lib/components/Label/styles.js CHANGED
@@ -1,6 +1,7 @@
1
1
  import { StyleSheet } from 'react-native';
2
2
 
3
3
  import { verticalScale, horizontalScale } from '../../utils/scaleUtils';
4
+ import { IS_ANDROID } from '../../utils/platformUtils/constants';
4
5
 
5
6
  export const getTextStyles = (theme, color) =>
6
7
  StyleSheet.create({
@@ -101,5 +102,9 @@ export const markdownStyles = StyleSheet.create({
101
102
  ordered_list_icon: {
102
103
  height: '100%',
103
104
  paddingBottom: verticalScale(10)
104
- }
105
+ },
106
+ link: pressed => ({
107
+ backgroundColor: IS_ANDROID && pressed ? 'lightgray' : 'transparent',
108
+ textDecorationLine: 'underline'
109
+ })
105
110
  });
package/lib/components/Label/utils.js CHANGED
@@ -15,7 +15,7 @@ const flattenStyles = (obj = {}, styles) => {
15
15
  return obj;
16
16
  };
17
17
 
18
- export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
18
+ export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}, pressed) => {
19
19
  const { paragraph } = newMarkdownStyles;
20
20
 
21
21
  const flattenedStyles = flattenStyles({}, styles);
@@ -27,7 +27,8 @@ export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
27
27
  bullet_list_icon,
28
28
  ordered_list,
29
29
  ordered_list_content,
30
- ordered_list_icon
30
+ ordered_list_icon,
31
+ link
31
32
  } = markdownStyles;
32
33
 
33
34
  const paragraphStyle = { ...flattenedStyles, ...paragraph };
@@ -41,6 +42,7 @@ export const formatStyles = (useMarkdown, styles, newMarkdownStyles = {}) => {
41
42
  ordered_list,
42
43
  ordered_list_content,
43
44
  ordered_list_icon,
45
+ link: link(pressed),
44
46
  ...newMarkdownStyles,
45
47
  paragraph: paragraphStyle
46
48
  }
package/lib/components/UTProductItem/components/AdditionalInfo/index.js CHANGED
@@ -2,12 +2,16 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
2
2
  import { bool, string } from 'prop-types';
3
3
  import React from 'react';
4
4
 
5
- import Label from '../../../Label';
5
+ import UTLabel from '../../../UTLabel';
6
6
 
7
7
  const AdditionalInfo = ({ additionalInfo, shouldUseGap, themedStyles }) => (
8
- <Label small style={[themedStyles.additionalInfo, shouldUseGap ? themedStyles.gap : '']}>
8
+ <UTLabel
9
+ variant="xsmall"
10
+ colorTheme="gray"
11
+ style={[themedStyles.additionalInfo, shouldUseGap ? themedStyles.gap : '']}
12
+ >
9
13
  {additionalInfo}
10
- </Label>
14
+ </UTLabel>
11
15
  );
12
16
 
13
17
  AdditionalInfo.propTypes = {
package/lib/components/UTProductItem/components/Amount/index.js CHANGED
@@ -2,10 +2,14 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
2
2
  import { bool, number } from 'prop-types';
3
3
  import React from 'react';
4
4
 
5
- import Label from '../../../Label';
5
+ import UTLabel from '../../../UTLabel';
6
6
 
7
7
  const Amount = ({ amount, shouldUseGap, themedStyles }) => (
8
- <Label style={[themedStyles.amount, shouldUseGap ? themedStyles.gap : '']}>{`$ ${amount}`}</Label>
8
+ <UTLabel
9
+ weight="medium"
10
+ variant="subtitle1"
11
+ style={[themedStyles.amount, shouldUseGap ? themedStyles.gap : '']}
12
+ >{`$ ${amount}`}</UTLabel>
9
13
  );
10
14
 
11
15
  Amount.propTypes = {
package/lib/components/UTProductItem/components/Discount/index.js CHANGED
@@ -3,17 +3,17 @@ import { bool, number } from 'prop-types';
3
3
  import React from 'react';
4
4
  import { View } from 'react-native';
5
5
 
6
- import Label from '../../../Label';
6
+ import UTLabel from '../../../UTLabel';
7
7
 
8
8
  const Discount = ({ previousAmount, shouldUseGap, discount, themedStyles }) => (
9
9
  <View style={[themedStyles.amountContainer, shouldUseGap ? themedStyles.gap : '']}>
10
10
  <View style={themedStyles.discountChip}>
11
- <Label small style={themedStyles.discount}>
11
+ <UTLabel colorTheme="negative" variant="xsmall" style={themedStyles.discount}>
12
12
  {discount}
13
- </Label>
13
+ </UTLabel>
14
14
  </View>
15
15
  {previousAmount && (
16
- <Label small color="gray" style={themedStyles.previousAmount}>{`$ ${previousAmount}`}</Label>
16
+ <UTLabel colorTheme="gray" style={themedStyles.previousAmount}>{`$ ${previousAmount}`}</UTLabel>
17
17
  )}
18
18
  </View>
19
19
  );
package/lib/components/UTProductItem/components/QuantitySelector/index.js CHANGED
@@ -5,45 +5,45 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
5
5
  import isEmpty from 'lodash/isEmpty';
6
6
  import isNil from 'lodash/isNil';
7
7
 
8
- import IconButton from '../../../IconButton';
9
- import Label from '../../../Label';
8
+ import UTButton from '../../../UTButton';
10
9
  import { ActionPropTypes } from '../../propTypes';
11
- import ImageButton from '../../../ImageButton';
12
- import { useTheme } from '../../../../theming';
10
+ import UTLabel from '../../../UTLabel';
13
11
 
14
12
  const QuantitySelector = ({ action, secondaryAction, selectedQuantity, themedStyles }) => {
15
- const { UTProductItem } = useTheme();
16
- const ICON_SIZE = 24;
17
-
18
- const renderAction = ({ color, image, name, size, type, styles, onPress }) =>
19
- image ? (
20
- <ImageButton image={image} size={size || ICON_SIZE} containerStyle={styles.image} onPress={onPress} />
21
- ) : (
22
- <IconButton
23
- color={color || UTProductItem?.actionIconColor || '#091E42'}
24
- height={size || ICON_SIZE}
25
- iconMargin={8}
26
- name={name}
27
- onPress={onPress}
28
- size={size || ICON_SIZE}
29
- style={styles.icon}
30
- type={type}
31
- width={size || ICON_SIZE}
32
- />
33
- );
13
+ const renderAction = ({
14
+ Icon,
15
+ colorTheme,
16
+ variant = 'semitransparent',
17
+ size = 'small',
18
+ onPress,
19
+ styles
20
+ }) => (
21
+ <UTButton
22
+ colorTheme={colorTheme}
23
+ variant={variant}
24
+ size={size}
25
+ onPress={onPress}
26
+ Icon={Icon}
27
+ style={{ root: { ...themedStyles.action, ...styles } }}
28
+ />
29
+ );
34
30
 
35
31
  return (
36
32
  <View style={themedStyles.actionsContainer}>
37
33
  {!isEmpty(secondaryAction) &&
38
34
  renderAction({
39
35
  ...secondaryAction,
40
- styles: { icon: themedStyles.secondaryActionIcon, image: themedStyles.secondaryActionImage }
36
+ styles: themedStyles.secondaryActionIcon
41
37
  })}
42
- {!isNil(selectedQuantity) && <Label style={themedStyles.selectedQuantity}>{selectedQuantity}</Label>}
38
+ {!isNil(selectedQuantity) && (
39
+ <UTLabel weight="medium" style={themedStyles.selectedQuantity}>
40
+ {selectedQuantity}
41
+ </UTLabel>
42
+ )}
43
43
  {!isEmpty(action) &&
44
44
  renderAction({
45
45
  ...action,
46
- styles: { icon: themedStyles.actionIcon, image: themedStyles.actionImage }
46
+ styles: themedStyles.actionIcon
47
47
  })}
48
48
  </View>
49
49
  );
package/lib/components/UTProductItem/components/Title/index.js CHANGED
@@ -2,12 +2,12 @@ import { ViewPropTypes } from 'deprecated-react-native-prop-types';
2
2
  import { bool, string } from 'prop-types';
3
3
  import React from 'react';
4
4
 
5
- import Label from '../../../Label';
5
+ import UTLabel from '../../../UTLabel';
6
6
 
7
7
  const Title = ({ shouldUseGap, themedStyles, title }) => (
8
- <Label medium style={[themedStyles.title, shouldUseGap ? themedStyles.gap : '']}>
8
+ <UTLabel weight="medium" style={[themedStyles.title, shouldUseGap ? themedStyles.gap : '']}>
9
9
  {title}
10
- </Label>
10
+ </UTLabel>
11
11
  );
12
12
 
13
13
  Title.propTypes = {
package/lib/components/UTProductItem/index.js CHANGED
@@ -32,7 +32,7 @@ const UTProductItem = ({
32
32
  title
33
33
  }) => {
34
34
  const theme = useTheme();
35
- const themedStyles = merge({}, getUTProductItemStyles(theme?.UTProductItem), theme?.UTProductItem, style);
35
+ const themedStyles = merge({}, getUTProductItemStyles(theme), theme?.UTProductItem, style);
36
36
 
37
37
  const IMAGE_SIZE = 70;
38
38
 
@@ -57,14 +57,14 @@ const UTProductItem = ({
57
57
  {!isEmpty(counter) && (
58
58
  <UTLabel
59
59
  variant="small"
60
- className={themedStyles.counter}
60
+ style={themedStyles.counter}
61
61
  {...counterLabelProps}
62
62
  >{`${counter.current}/${counter.limit}`}</UTLabel>
63
63
  )}
64
64
  <View style={themedStyles.quantitiesContainer}>
65
65
  {quantity && (
66
66
  <View style={themedStyles.quantityContainer}>
67
- <UTLabel colorTheme="light" variant="subtitle1" {...quantityLabelProps}>
67
+ <UTLabel weight="medium" colorTheme="light" variant="subtitle1" {...quantityLabelProps}>
68
68
  {quantity}
69
69
  </UTLabel>
70
70
  </View>
package/lib/components/UTProductItem/styles.js CHANGED
@@ -2,23 +2,23 @@ import { StyleSheet } from 'react-native';
2
2
 
3
3
  export const getUTProductItemStyles = (theme = {}) =>
4
4
  StyleSheet.create({
5
+ action: {
6
+ paddingHorizontal: 4
7
+ },
5
8
  actionsContainer: {
6
9
  alignItems: 'center',
7
- backgroundColor: theme.actionsBackground || '#E4E6EA',
10
+ backgroundColor: theme.Palette.neutral['01'],
8
11
  borderRadius: 8,
9
12
  display: 'flex',
10
13
  flexDirection: 'row'
11
14
  },
12
- additionalInfo: {
13
- color: theme.additionalInfoColor || 'gray'
14
- },
15
15
  amountContainer: {
16
16
  alignItems: 'center',
17
17
  display: 'flex',
18
18
  flexDirection: 'row'
19
19
  },
20
20
  container: {
21
- borderBottomColor: theme.separatorColor || 'gray',
21
+ borderBottomColor: theme.Palette.light['04'],
22
22
  borderBottomWidth: 1,
23
23
  display: 'flex',
24
24
  flexDirection: 'row',
@@ -26,18 +26,16 @@ export const getUTProductItemStyles = (theme = {}) =>
26
26
  paddingVertical: 24
27
27
  },
28
28
  counter: {
29
- backgroundColor: theme.counterBackground || '#EBF8FD',
29
+ backgroundColor: theme.Palette.information['01'],
30
30
  overflow: 'hidden',
31
31
  borderRadius: 4,
32
- color: theme.counterColor || '#035B83',
32
+ color: theme.Palette.information['05'],
33
33
  paddingHorizontal: 8,
34
- paddingVertical: 4
35
- },
36
- discount: {
37
- color: theme.discountColor || 'white'
34
+ paddingVertical: 4,
35
+ marginBottom: 8
38
36
  },
39
37
  discountChip: {
40
- backgroundColor: theme.discountBackground || '#285AFF',
38
+ backgroundColor: theme.Palette.accent['04'],
41
39
  borderRadius: 4,
42
40
  marginRight: 8,
43
41
  paddingHorizontal: 8,
@@ -51,6 +49,7 @@ export const getUTProductItemStyles = (theme = {}) =>
51
49
  marginRight: 16
52
50
  },
53
51
  leftSection: {
52
+ paddingRight: 8,
54
53
  alignItems: 'center',
55
54
  flexGrow: 1,
56
55
  flexDirection: 'row'
@@ -60,7 +59,6 @@ export const getUTProductItemStyles = (theme = {}) =>
60
59
  flexBasis: 160
61
60
  },
62
61
  previousAmount: {
63
- color: theme.previousAmountColor || 'gray',
64
62
  textDecorationLine: 'line-through',
65
63
  textDecorationStyle: 'solid'
66
64
  },
@@ -69,7 +67,7 @@ export const getUTProductItemStyles = (theme = {}) =>
69
67
  alignItems: 'center'
70
68
  },
71
69
  quantityContainer: {
72
- backgroundColor: theme.quantityBackground || 'darkblue',
70
+ backgroundColor: theme.Palette.neutral['04'],
73
71
  paddingHorizontal: 8,
74
72
  paddingVertical: 4,
75
73
  borderRadius: 4,
@@ -80,9 +78,6 @@ export const getUTProductItemStyles = (theme = {}) =>
80
78
  display: 'flex',
81
79
  justifyContent: 'center'
82
80
  },
83
- secondaryActionImage: {
84
- marginHorizontal: 4
85
- },
86
81
  selectedQuantity: {
87
82
  paddingHorizontal: 8
88
83
  },
package/lib/components/UTWorkflowContainer/versions/V1/components/BottomActions/index.js CHANGED
@@ -40,8 +40,9 @@ const BottomActions = ({ bottomSafeArea, message, nextButton, returnButton, summ
40
40
  )}
41
41
  {summary.actions && !checkboxProps && (
42
42
  <View style={themedStyles.summaryActions}>
43
- {summary.actions.map(({ Icon: actionIcon, title, onPress }, index) => (
43
+ {summary.actions.map(({ Icon: actionIcon, title, onPress, disabled }, index) => (
44
44
  <UTButton
45
+ disabled={disabled}
45
46
  Icon={actionIcon}
46
47
  key={actionIcon}
47
48
  onPress={onPress}
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "@widergy/mobile-ui",
3
3
  "description": "Widergy Mobile Components",
4
4
  "author": "widergy",
5
- "version": "1.16.1",
5
+ "version": "1.16.3",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [