@quintype/native-components 2.20.17 → 2.20.18

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 (4) hide show
  1. package/CHANGELOG.md +2 -0
  2. package/package.json +1 -1
  3. package/src/components/IconText/iconText_styles.js +11 -6
  4. package/src/components/IconText/index.js +47 -23
package/CHANGELOG.md CHANGED
@@ -2,6 +2,8 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
4
4
 
5
+ ### [2.20.18](https://github.com/quintype/native-components/compare/v2.20.17...v2.20.18) (2023-12-06)
6
+
5
7
  ### [2.20.17](https://github.com/quintype/native-components/compare/v2.20.16...v2.20.17) (2023-11-16)
6
8
 
7
9
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quintype/native-components",
3
- "version": "2.20.17",
3
+ "version": "2.20.18",
4
4
  "description": "",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/components/IconText/iconText_styles.js CHANGED
@@ -1,19 +1,24 @@
1
- import { StyleSheet } from 'react-native';
2
- import { useContext } from 'react';
3
- import { AppTheme } from '../../utils';
1
+ import { StyleSheet } from "react-native";
2
+ import { useContext } from "react";
3
+ import { AppTheme } from "../../utils";
4
4
 
5
5
  export const iconTextStyles = () => {
6
6
  const { theme } = useContext(AppTheme);
7
7
  const { FONT_SIZE, COLORS } = theme;
8
8
  return StyleSheet.create({
9
9
  container: {
10
- alignItems: 'center',
11
- flexDirection: 'row',
10
+ alignItems: "center",
11
+ flexDirection: "row",
12
12
  paddingVertical: 12,
13
13
  },
14
- iconStyle: {
14
+ iconContainerStyle: {
15
15
  marginRight: 15,
16
16
  },
17
+ iconStyle: {
18
+ color: COLORS.MONO4,
19
+ textalign: "center",
20
+ width: 30,
21
+ },
17
22
  labelStyle: {
18
23
  color: COLORS.BRAND_BLACK,
19
24
  fontSize: FONT_SIZE.h3,
package/src/components/IconText/index.js CHANGED
@@ -1,52 +1,74 @@
1
- import React, { useContext } from 'react';
2
- import { View, TouchableOpacity } from 'react-native';
3
- import Icon from 'react-native-vector-icons/FontAwesome';
4
- import PropTypes from 'prop-types';
5
- import { Text } from '../Text';
6
- import { iconTextStyles } from './iconText_styles';
7
- import { AppTheme } from '../../utils';
8
- import { COMP_GENERAL_CONSTANTS } from '../../constants/component-constants/general-constants/constants';
1
+ import React from "react";
2
+ import {
3
+ View,
4
+ TouchableOpacity,
5
+ StyleSheet,
6
+ ViewPropTypes,
7
+ } from "react-native";
8
+ import Icon from "react-native-vector-icons/FontAwesome";
9
+ import PropTypes from "prop-types";
10
+ import { Text } from "../Text";
11
+ import { iconTextStyles } from "./iconText_styles";
12
+ import { COMP_GENERAL_CONSTANTS } from "../../constants/component-constants/general-constants/constants";
9
13
 
10
14
  const IconText = ({
11
- onPress, label, iconName, iconSize, disabled = false,
15
+ onPress,
16
+ label,
17
+ iconName,
18
+ iconSize,
19
+ disabled = false,
20
+ iconStyle,
21
+ labelStyle,
12
22
  }) => {
13
- const { theme } = useContext(AppTheme);
14
- const { COLORS } = theme;
15
- const iconTextStyle = iconTextStyles();
16
- if (typeof onPress === 'function') {
23
+ const styles = iconTextStyles();
24
+ const flattenedIconStyle = StyleSheet.flatten([styles.iconStyle, iconStyle]);
25
+ const flattenedLabelStyle = StyleSheet.flatten([
26
+ styles.labelStyle,
27
+ labelStyle,
28
+ ]);
29
+
30
+ if (typeof onPress === "function") {
17
31
  return (
18
32
  <TouchableOpacity
19
33
  testID={COMP_GENERAL_CONSTANTS.iconTextTouch}
20
- style={iconTextStyle.container}
34
+ style={styles.container}
21
35
  onPress={onPress}
22
36
  disabled={disabled}
23
37
  >
24
38
  {!iconName ? null : (
25
- <View style={iconTextStyle.iconStyle}>
26
- <Icon size={iconSize || 20} color={COLORS.MONO4} name={iconName} />
39
+ <View style={styles.iconContainerStyle}>
40
+ <Icon
41
+ size={iconSize || 20}
42
+ name={iconName}
43
+ style={flattenedIconStyle}
44
+ />
27
45
  </View>
28
46
  )}
29
47
  <Text
30
- style={iconTextStyle.labelStyle}
48
+ style={flattenedLabelStyle}
31
49
  testID={COMP_GENERAL_CONSTANTS.iconTextLabel}
32
50
  >
33
- {label || 'Label goes here'}
51
+ {label || "Label goes here"}
34
52
  </Text>
35
53
  </TouchableOpacity>
36
54
  );
37
55
  }
38
56
  return (
39
- <View style={iconTextStyle.container}>
57
+ <View style={styles.container}>
40
58
  {!iconName ? null : (
41
- <View style={iconTextStyle.iconStyle}>
42
- <Icon size={iconSize || 20} color={COLORS.MONO4} name={iconName} />
59
+ <View style={styles.iconContainerStyle}>
60
+ <Icon
61
+ size={iconSize || 20}
62
+ name={iconName}
63
+ style={flattenedIconStyle}
64
+ />
43
65
  </View>
44
66
  )}
45
67
  <Text
46
- style={iconTextStyle.labelStyle}
68
+ style={flattenedLabelStyle}
47
69
  testID={COMP_GENERAL_CONSTANTS.iconTextLabel}
48
70
  >
49
- {label || 'Label goes here'}
71
+ {label || "Label goes here"}
50
72
  </Text>
51
73
  </View>
52
74
  );
@@ -58,6 +80,8 @@ IconText.propTypes = {
58
80
  iconSize: PropTypes.number,
59
81
  onPress: PropTypes.func,
60
82
  disabled: PropTypes.bool,
83
+ iconStyle: ViewPropTypes.style,
84
+ labelStyle: ViewPropTypes.style,
61
85
  };
62
86
 
63
87
  export { IconText };