@widergy/mobile-ui 1.49.4 → 1.49.5

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 (9) hide show
  1. package/CHANGELOG.md +7 -0
  2. package/lib/components/UTDataElement/README.md +99 -30
  3. package/lib/components/UTDataElement/components/MainAction/index.js +22 -0
  4. package/lib/components/UTDataElement/constants.js +5 -0
  5. package/lib/components/UTDataElement/index.js +29 -25
  6. package/lib/components/UTDataElement/utils.js +3 -0
  7. package/lib/components/UTIcon/components/EnergyIcons/EnergyIconMeterPlusFilled.svg +7 -0
  8. package/lib/components/UTIcon/constants.js +2 -0
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,3 +1,10 @@
1
+ ## [1.49.5](https://github.com/widergy/mobile-ui/compare/v1.49.4...v1.49.5) (2025-07-22)
2
+
3
+
4
+ ### Bug Fixes
5
+
6
+ * [SFPE-405] adjust data element ([#446](https://github.com/widergy/mobile-ui/issues/446)) ([8ffeb40](https://github.com/widergy/mobile-ui/commit/8ffeb40924a1af86e0dcb9af6370f8236daba826))
7
+
1
8
  ## [1.49.4](https://github.com/widergy/mobile-ui/compare/v1.49.3...v1.49.4) (2025-07-14)
2
9
 
3
10
 
package/lib/components/UTDataElement/README.md CHANGED
@@ -1,46 +1,115 @@
1
1
  # UTDataElement
2
2
 
3
- Is a versatile data component that can be customized with various themes, sizes, icons, data elements and actions.
3
+ A versatile data component that can be customized with various themes, sizes, icons, data elements, and actions. It supports collapsible content and different layout orientations.
4
4
 
5
5
  ## Props
6
6
 
7
+ | Name | Type | Default | Description |
8
+ | --------------- | --------------------------- | ------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
9
+ | action | object | | Props passed to the action component. For button action must include onPress. For switch action must include type: 'switch', onChange and value. Additional props can be passed through. |
10
+ | area | bool | `false` | Specifies whether the component has an area styling. |
11
+ | badge | string \| number | | Displays a badge with text or number. |
12
+ | badgeProps | object | `{}` | Additional props for customizing the badge. |
13
+ | children | ReactNode | | Content to be displayed in the collapsible section. |
14
+ | Data | string \| element \| number | | React element or string representing data |
15
+ | dataProps | object | `{}` | Additional props for configuring data element. |
16
+ | forceShowBadge | bool | `false` | Forces the badge to be displayed even when empty. |
17
+ | Icon | element \| string | | Custom React element or icon name for UTIcon |
18
+ | iconProps | object | `{}` | Additional props for the icon element. |
19
+ | orientation | string | `horizontal` | Defines the layout orientation. |
20
+ | paddingVertical | string | `medium` | Vertical padding applied to the component. |
21
+ | prefix | string | | Text or symbol displayed before the title. |
22
+ | prefixProps | object | `{}` | Additional props for customizing `prefix`. |
23
+ | spacing | string | `medium` | Defines the spacing between elements. |
24
+ | style | object | | Custom style for the component container. |
25
+ | title | string | | Title text displayed in the component. |
26
+ | titleProps | object | `{}` | Additional props for customizing the title. |
7
27
 
8
- | Name | Type | Default | Description |
9
- |------------|----------|---------|----------------------------------------------------------|
10
- | action | object | | Props passed to the UTButton action . |
11
- | area | bool | `false` | Specifies whether the component has an area. |
12
- | badge | string | | Displays a badge with text. |
13
- | badgeProps | object | | Additional props for customizing the badge. |
14
- | Data | element | | React element representing a data component (overrides data). |
15
- | data | string | | Data string associated with the component. |
16
- | dataProps | object | | Additional props for configuring data element. |
17
- | Icon | element | | Custom React element (overrides icon). |
18
- | icon | string | | Name of the icon used in the component. |
19
- | iconProps | object | | Additional props for the icon element. |
20
- | orientation | string | `horizontal` | Defines the layout orientation. |
21
- | padding | string | `medium` | Padding applied to the component. |
22
- | prefix | string | | Text or symbol displayed before the title. |
23
- | prefixProps| object | | Additional props for customizing `prefix`. |
24
- | spacing | string | `medium` | Defines the spacing between elements. |
25
- | style | object | | Custom style for the component container. |
26
- | title | string | | Title text displayed in the component. |
27
- | titleProps | object | | Additional props for customizing the title. |
28
+ ## Action Configuration
28
29
 
30
+ The `action` prop accepts an object with the following properties:
29
31
 
30
- ### colapsable
32
+ ### Button Action
31
33
 
32
- If the component has any `children` it will always be collapsable
34
+ ```javascript
35
+ {
36
+ type: 'button',
37
+ onPress: () => console.log('Button pressed'),
38
+ Icon: 'IconEdit',
39
+ // ... other UTButton props
40
+ }
41
+ ```
33
42
 
34
- ### orientation
43
+ ### Switch Action
44
+
45
+ ```javascript
46
+ {
47
+ type: 'switch',
48
+ onChange: (value) => setValue(value),
49
+ value: boolean,
50
+ // ... other UTSwitch props
51
+ }
52
+ ```
53
+
54
+ ## Collapsible Content
55
+
56
+ If the component has any `children`, it will automatically become collapsible with an animated chevron button.
57
+
58
+ ## Orientation
35
59
 
36
60
  The value of `orientation` must be one of the following:
37
61
 
38
- - `horizontal`
39
- - `vertical`
62
+ - `horizontal` - Elements are arranged horizontally
63
+ - `vertical` - Elements are arranged vertically
64
+
65
+ ## Padding & Spacing
66
+
67
+ The values for `paddingVertical` and `spacing` must be one of the following:
68
+
69
+ - `small` - Minimal spacing
70
+ - `medium` - Standard spacing
71
+
72
+ ## Examples
73
+
74
+ ### Basic Usage
75
+
76
+ ```javascript
77
+ <UTDataElement title="User Information" Data="John Doe" Icon="IconUser" />
78
+ ```
79
+
80
+ ### With Action
81
+
82
+ ```javascript
83
+ <UTDataElement
84
+ title="Settings"
85
+ Data="Configure your preferences"
86
+ action={{
87
+ type: 'button',
88
+ onPress: () => navigateToSettings(),
89
+ Icon: 'IconSettings'
90
+ }}
91
+ />
92
+ ```
93
+
94
+ ### With Switch Action
40
95
 
41
- ### padding & spacing
96
+ ```javascript
97
+ <UTDataElement
98
+ title="Notifications"
99
+ Data="Receive push notifications"
100
+ action={{
101
+ type: 'switch',
102
+ onChange: setNotificationsEnabled,
103
+ value: notificationsEnabled
104
+ }}
105
+ />
106
+ ```
42
107
 
43
- The value of `padding` and `spacing` must be one of the following:
108
+ ### With Collapsible Content
44
109
 
45
- - `small`
46
- - `medium`
110
+ ```javascript
111
+ <UTDataElement title="Advanced Settings" Data="Click to expand" Icon="IconSettings">
112
+ <UTLabel>This content is collapsible</UTLabel>
113
+ <UTButton title="Custom Action" />
114
+ </UTDataElement>
115
+ ```
package/lib/components/UTDataElement/components/MainAction/index.js ADDED
@@ -0,0 +1,22 @@
1
+ import React from 'react';
2
+ import { bool, oneOf, func } from 'prop-types';
3
+
4
+ import { ACTION_TYPE } from '../../constants';
5
+ import UTSwitch from '../../../UTSwitch';
6
+ import UTButton from '../../../UTButton';
7
+
8
+ const MainAction = ({ type = ACTION_TYPE.BUTTON, onChange, value, onPress, ...props }) =>
9
+ type === ACTION_TYPE.SWITCH && onChange ? (
10
+ <UTSwitch input={{ onChange, value }} {...props} />
11
+ ) : type === ACTION_TYPE.BUTTON && onPress ? (
12
+ <UTButton variant="text" onPress={onPress} {...props} />
13
+ ) : null;
14
+
15
+ MainAction.propTypes = {
16
+ type: oneOf(Object.values(ACTION_TYPE)).isRequired,
17
+ onChange: func,
18
+ onPress: func,
19
+ value: bool
20
+ };
21
+
22
+ export default MainAction;
package/lib/components/UTDataElement/constants.js CHANGED
@@ -12,3 +12,8 @@ export const SPACING = {
12
12
  SMALL: 'small',
13
13
  MEDIUM: 'medium'
14
14
  };
15
+
16
+ export const ACTION_TYPE = {
17
+ BUTTON: 'button',
18
+ SWITCH: 'switch'
19
+ };
package/lib/components/UTDataElement/index.js CHANGED
@@ -1,7 +1,10 @@
1
1
  /* eslint-disable no-underscore-dangle */
2
2
  import { Animated, View } from 'react-native';
3
- import { bool, element, object, string } from 'prop-types';
3
+ import { bool, element, number, object, oneOfType, string } from 'prop-types';
4
4
  import React, { useCallback, useRef, useState } from 'react';
5
+ import isString from 'lodash/isString';
6
+ import isEmpty from 'lodash/isEmpty';
7
+ import isFinite from 'lodash/isFinite';
5
8
 
6
9
  import { withTheme } from '../../theming';
7
10
  import UTBadge from '../UTBadge';
@@ -11,28 +14,29 @@ import UTButton from '../UTButton';
11
14
 
12
15
  import styleSheet from './styles';
13
16
  import { ORIENTATION, PADDING, SPACING } from './constants';
17
+ import { isUTIcon, isUTLabel } from './utils';
18
+ import MainAction from './components/MainAction';
14
19
 
15
20
  const UTDataElement = ({
16
21
  action,
17
22
  area,
18
23
  badge,
19
- badgeProps,
24
+ badgeProps = {},
20
25
  children,
21
- data,
22
26
  Data,
23
- dataProps,
24
- icon,
27
+ dataProps = {},
28
+ forceShowBadge,
25
29
  Icon,
26
30
  iconProps = {},
27
31
  orientation = ORIENTATION.HORIZONTAL,
28
- padding = PADDING.MEDIUM,
32
+ paddingVertical = PADDING.MEDIUM,
29
33
  prefix,
30
- prefixProps,
34
+ prefixProps = {},
31
35
  spacing = SPACING.MEDIUM,
32
36
  style,
33
37
  theme,
34
38
  title,
35
- titleProps
39
+ titleProps = {}
36
40
  }) => {
37
41
  const styles = styleSheet(theme);
38
42
 
@@ -47,10 +51,10 @@ const UTDataElement = ({
47
51
  {
48
52
  [PADDING.SMALL]: 8,
49
53
  [PADDING.MEDIUM]: 16
50
- }[padding]
54
+ }[paddingVertical]
51
55
  );
52
56
  },
53
- [padding]
57
+ [paddingVertical]
54
58
  );
55
59
 
56
60
  const toggleCollapsed = () => {
@@ -61,15 +65,16 @@ const UTDataElement = ({
61
65
  }).start();
62
66
  };
63
67
 
64
- const IconComponent = Icon || (icon ? UTIcon : null);
65
- const DataComponent = Data || (data ? UTLabel : null);
68
+ const IconComponent = isUTIcon(Icon) ? UTIcon : Icon;
69
+ const DataComponent = isUTLabel(Data) ? <UTLabel {...dataProps}>{Data}</UTLabel> : Data;
70
+ const showBadge = forceShowBadge || (isString(badge) && !isEmpty(badge)) || isFinite(badge);
66
71
 
67
72
  return (
68
- <View style={[styles.container(area, padding), style]}>
73
+ <View style={[styles.container(area, paddingVertical), style]}>
69
74
  <View style={styles.content(spacing)}>
70
- {IconComponent && <IconComponent name={icon} size={24} colorTheme="gray" {...iconProps} />}
75
+ {IconComponent && <IconComponent name={Icon} colorTheme="gray" {...iconProps} />}
71
76
  <View style={styles.info(orientation)}>
72
- {(prefix || title || badge) && (
77
+ {(prefix || title || showBadge) && (
73
78
  <View style={styles.topInfo}>
74
79
  {prefix && (
75
80
  <UTLabel colorTheme="gray" {...prefixProps}>
@@ -81,16 +86,16 @@ const UTDataElement = ({
81
86
  {title}
82
87
  </UTLabel>
83
88
  )}
84
- {badge && (
89
+ {showBadge && (
85
90
  <UTBadge colorTheme="accent" {...badgeProps}>
86
- {badge}
91
+ {forceShowBadge ? null : badge}
87
92
  </UTBadge>
88
93
  )}
89
94
  </View>
90
95
  )}
91
- {DataComponent && <DataComponent {...dataProps}>{data}</DataComponent>}
96
+ {DataComponent && DataComponent}
92
97
  </View>
93
- {action && <UTButton variant="text" {...action} />}
98
+ {action && <MainAction {...action} />}
94
99
  {children && (
95
100
  <Animated.View style={styles.collapseButton(collapsed)}>
96
101
  <UTButton Icon="IconChevronDown" variant="text" onPress={toggleCollapsed} />
@@ -111,16 +116,15 @@ const UTDataElement = ({
111
116
  UTDataElement.propTypes = {
112
117
  action: object,
113
118
  area: bool,
114
- badge: string,
119
+ badge: oneOfType([string, number]),
115
120
  badgeProps: object,
116
- data: string,
117
- Data: element,
121
+ Data: oneOfType([string, element, number]),
118
122
  dataProps: object,
119
- icon: string,
120
- Icon: element,
123
+ forceShowBadge: bool,
124
+ Icon: oneOfType([element, string]),
121
125
  iconProps: object,
122
126
  orientation: string,
123
- padding: string,
127
+ paddingVertical: string,
124
128
  prefix: string,
125
129
  prefixProps: object,
126
130
  spacing: string,
package/lib/components/UTDataElement/utils.js ADDED
@@ -0,0 +1,3 @@
1
+ export const isUTLabel = label => typeof label === 'string' || typeof label === 'number';
2
+
3
+ export const isUTIcon = icon => typeof icon === 'string';
package/lib/components/UTIcon/components/EnergyIcons/EnergyIconMeterPlusFilled.svg ADDED
@@ -0,0 +1,7 @@
1
+ <svg width="24" height="24" viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 20.5C12.5 20.8494 12.2936 21 12 20.9998H5.99975C4.3429 20.9998 2.99976 19.6566 2.99976 17.9998V5.99975C2.99976 4.3429 4.3429 2.99976 5.99975 2.99976H17.9998C19.6566 2.99976 20.9998 4.3429 20.9998 5.99975V11.9865C20.9998 11.9865 20.9998 12.5 20.5 12.5C20.047 12.5 20 12 19.9998 11.9865V5.99975C19.9998 5 19 3.99976 17.9998 3.99976H5.99975C5 3.99976 3.99976 5 3.99976 5.99975V17.9998C3.99976 19 5 19.9998 5.99975 19.9998H12C12.2936 20 12.5 20.1506 12.5 20.5Z" fill="currentColor"/>
3
+ <path d="M17 13.4998C17.4832 13.4998 17.5 13.8915 17.5 14.3748V16.5H19.7224C20.2057 16.5 20.5974 16.5165 20.5974 16.9998C20.5974 17.483 20.2057 17.5 19.7224 17.5H17.5V19.6248C17.5 20.108 17.4832 20.4998 17 20.4998C16.5168 20.4998 16.5 20.108 16.5 19.6248V17.5H14.4724C13.9892 17.5 13.5974 17.483 13.5974 16.9998C13.5974 16.5165 13.9892 16.5 14.4724 16.5H16.5V14.3748C16.5 13.8915 16.5168 13.4998 17 13.4998Z" fill="currentColor"/>
4
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5 20.5C12.5 20.8494 12.2936 21 12 20.9998H5.99975C4.3429 20.9998 2.99976 19.6566 2.99976 17.9998V5.99975C2.99976 4.3429 4.3429 2.99976 5.99975 2.99976H17.9998C19.6566 2.99976 20.9998 4.3429 20.9998 5.99975V11.9865C20.9998 11.9865 20.9998 12.5 20.5 12.5C20.047 12.5 20 12 19.9998 11.9865V5.99975C19.9998 5 19 3.99976 17.9998 3.99976H5.99975C5 3.99976 3.99976 5 3.99976 5.99975V17.9998C3.99976 19 5 19.9998 5.99975 19.9998H12C12.2936 20 12.5 20.1506 12.5 20.5Z" stroke="currentColor" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round"/>
5
+ <path d="M17 13.4998C17.4832 13.4998 17.5 13.8915 17.5 14.3748V16.5H19.7224C20.2057 16.5 20.5974 16.5165 20.5974 16.9998C20.5974 17.483 20.2057 17.5 19.7224 17.5H17.5V19.6248C17.5 20.108 17.4832 20.4998 17 20.4998C16.5168 20.4998 16.5 20.108 16.5 19.6248V17.5H14.4724C13.9892 17.5 13.5974 17.483 13.5974 16.9998C13.5974 16.5165 13.9892 16.5 14.4724 16.5H16.5V14.3748C16.5 13.8915 16.5168 13.4998 17 13.4998Z" stroke="currentColor" stroke-width="0.3" stroke-linecap="round" stroke-linejoin="round"/>
6
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5288 8.08252C12.9141 8.27517 13.0703 8.74369 12.8777 9.129L12.0421 10.8002H12.88C13.1503 10.8002 13.4014 10.9401 13.5435 11.1701C13.6856 11.4001 13.6986 11.6872 13.5777 11.929L12.1777 14.729C11.985 15.1143 11.5165 15.2705 11.1312 15.0778C10.7459 14.8852 10.5897 14.4166 10.7823 14.0313L11.6179 12.3602H10.78C10.5097 12.3602 10.2586 12.2202 10.1165 11.9902C9.97437 11.7603 9.96145 11.4731 10.0823 11.2313L11.4823 8.43134C11.675 8.04604 12.1435 7.88987 12.5288 8.08252Z" fill="currentColor"/>
7
+ </svg>
package/lib/components/UTIcon/constants.js CHANGED
@@ -37,6 +37,7 @@ import EnergyIconSettings from './components/EnergyIcons/EnergyIconSettings.svg'
37
37
  import EnergyIconShare from './components/EnergyIcons/EnergyIconShare.svg';
38
38
  import EnergyIconTruck from './components/EnergyIcons/EnergyIconTruck.svg';
39
39
  import EnergyIconMeterPlus from './components/EnergyIcons/EnergyIconMeterPlus.svg';
40
+ import EnergyIconMeterPlusFilled from './components/EnergyIcons/EnergyIconMeterPlusFilled.svg';
40
41
  import EnergyIconChatSparkFilled from './components/EnergyIcons/EnergyIconChatSparkFilled.svg';
41
42
 
42
43
  export const DEFAULT_PROPS = {
@@ -79,6 +80,7 @@ export const ENERGY_ICONS = {
79
80
  EnergyIconHome2,
80
81
  EnergyIconHome3,
81
82
  EnergyIconMeterPlus,
83
+ EnergyIconMeterPlusFilled,
82
84
  EnergyIconMoreVertical,
83
85
  EnergyIconMyLocation,
84
86
  EnergyIconSettings,
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.49.4",
5
+ "version": "1.49.5",
6
6
  "repository": "https://github.com/widergy/mobile-ui.git",
7
7
  "main": "lib/index.js",
8
8
  "files": [