@quintype/native-components 2.20.8 → 2.20.10

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 (10) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/package.json +1 -1
  3. package/src/components/SlideshowStoryCard/index.js +9 -22
  4. package/src/components/SlideshowStoryCard/styles.js +2 -2
  5. package/src/components/StoryGallery/index.js +7 -24
  6. package/src/components/StoryGallery/styles.js +10 -11
  7. package/src/components/StoryHeader/index.js +8 -29
  8. package/src/components/StoryHeader/styles.js +2 -5
  9. package/src/components/StoryImage/index.js +4 -12
  10. package/src/components/StoryImage/styles.js +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,15 @@
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.10](https://github.com/quintype/native-components/compare/v2.20.9...v2.20.10) (2023-08-08)
6
+
7
+
8
+ ### Bug Fixes
9
+
10
+ * **rich-text:** Changes html-render to strip-html to fix rtl :hamer: ([#208](https://github.com/quintype/native-components/issues/208)) ([1c6a1fd](https://github.com/quintype/native-components/commit/1c6a1fdafaa2833d846120e62c631fcb04c218ae))
11
+
12
+ ### [2.20.9](https://github.com/quintype/native-components/compare/v2.20.8...v2.20.9) (2023-07-10)
13
+
5
14
  ### [2.20.8](https://github.com/quintype/native-components/compare/v2.20.7...v2.20.8) (2023-06-30)
6
15
 
7
16
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quintype/native-components",
3
- "version": "2.20.8",
3
+ "version": "2.20.10",
4
4
  "description": "",
5
5
  "main": "src/index.js",
6
6
  "scripts": {
package/src/components/SlideshowStoryCard/index.js CHANGED
@@ -1,8 +1,12 @@
1
1
  import PropTypes from 'prop-types';
2
2
  import React, { useContext } from 'react';
3
- import { View, Linking } from 'react-native';
4
- import HTML from 'react-native-render-html';
5
- import { AppTheme, getScreenPercentageWidth } from '../../utils/index';
3
+ import { View } from 'react-native';
4
+ import {
5
+ AppTheme,
6
+ getScreenPercentageWidth,
7
+ stripHTML,
8
+ } from '../../utils/index';
9
+ import { Text } from '../index';
6
10
  import { LightBoxImage } from '../LightBoxImage';
7
11
  import { slideshowStoryCardStyles } from './styles';
8
12
 
@@ -10,7 +14,6 @@ export const SlideshowStoryCard = ({ card, cdn }) => {
10
14
  const attribution = card['image-attribution'];
11
15
  const { title } = card;
12
16
  const { theme } = useContext(AppTheme);
13
- const { CAN_COPY_TEXT } = theme;
14
17
  const styles = slideshowStoryCardStyles(theme);
15
18
  const imgData = {
16
19
  cdn,
@@ -23,24 +26,8 @@ export const SlideshowStoryCard = ({ card, cdn }) => {
23
26
  <View style={styles.container}>
24
27
  <LightBoxImage data={imgData} />
25
28
  <View style={styles.textContainer}>
26
- <HTML
27
- html={title}
28
- textSelectable={CAN_COPY_TEXT}
29
- key={Math.random()}
30
- baseFontStyle={styles.cardTitleText}
31
- onLinkPress={(e, href) => {
32
- Linking.openURL(href);
33
- }}
34
- />
35
- <HTML
36
- html={attribution}
37
- textSelectable={CAN_COPY_TEXT}
38
- key={Math.random()}
39
- baseFontStyle={styles.attributionText}
40
- onLinkPress={(e, href) => {
41
- Linking.openURL(href);
42
- }}
43
- />
29
+ <Text style={styles.cardTitleText}>{stripHTML(title)}</Text>
30
+ <Text style={styles.attributionText}>{stripHTML(attribution)}</Text>
44
31
  </View>
45
32
  </View>
46
33
  );
package/src/components/SlideshowStoryCard/styles.js CHANGED
@@ -6,13 +6,13 @@ export const slideshowStoryCardStyles = ({ COLORS, FONT_FAMILY }) => StyleSheet.
6
6
  textContainer: {
7
7
  paddingHorizontal: 10,
8
8
  flexDirection: 'column',
9
- flexWrap: 'wrap',
10
- marginTop: 10,
9
+ marginVertical: 10,
11
10
  },
12
11
  cardTitleText: {
13
12
  opacity: 0.7,
14
13
  color: COLORS.BRAND_BLACK,
15
14
  fontFamily: FONT_FAMILY.secondary,
15
+ marginBottom: 5,
16
16
  },
17
17
  container: {
18
18
  flexDirection: 'column',
package/src/components/StoryGallery/index.js CHANGED
@@ -3,22 +3,21 @@ import React, { useContext, useState, useRef } from 'react';
3
3
  import {
4
4
  View,
5
5
  Modal,
6
- Linking,
7
6
  SafeAreaView,
8
7
  FlatList,
9
8
  TouchableOpacity,
9
+ ScrollView,
10
10
  } from 'react-native';
11
11
  import Icon from 'react-native-vector-icons/FontAwesome';
12
12
  import FastImage from 'react-native-fast-image';
13
- import HTML from 'react-native-render-html';
14
13
  import { styles } from './styles';
15
14
  import { Text } from '../index';
16
- import { AppTheme } from '../../utils/index';
15
+ import { AppTheme, stripHTML } from '../../utils/index';
17
16
  import { LightBoxImage } from '../LightBoxImage';
18
17
 
19
18
  export const StoryGallery = ({ cdn, card }) => {
20
19
  const { theme } = useContext(AppTheme);
21
- const { COLORS, DARK_MODE, CAN_COPY_TEXT } = theme;
20
+ const { COLORS, DARK_MODE } = theme;
22
21
  const galleryStyles = styles(theme);
23
22
  const storyElements = card['story-elements'];
24
23
  const [showModal, setShowModal] = useState(false);
@@ -104,31 +103,15 @@ export const StoryGallery = ({ cdn, card }) => {
104
103
  const imageUri = `${data?.cdn}/${data?.slug}`;
105
104
 
106
105
  return (
107
- <View style={galleryStyles.carouselContainer}>
106
+ <ScrollView style={galleryStyles.carouselContainer}>
108
107
  <FastImage
109
108
  source={{ uri: imageUri }}
110
109
  resizeMode={FastImage.resizeMode.contain}
111
110
  style={galleryStyles.carouselImage}
112
111
  />
113
- <HTML
114
- html={title}
115
- textSelectable={CAN_COPY_TEXT}
116
- key={Math.random()}
117
- baseFontStyle={galleryStyles.titleText}
118
- onLinkPress={(e, href) => {
119
- Linking.openURL(href);
120
- }}
121
- />
122
- <HTML
123
- html={attribution}
124
- textSelectable={CAN_COPY_TEXT}
125
- key={Math.random()}
126
- baseFontStyle={galleryStyles.attributionText}
127
- onLinkPress={(e, href) => {
128
- Linking.openURL(href);
129
- }}
130
- />
131
- </View>
112
+ <Text style={galleryStyles.titleText}>{stripHTML(title)}</Text>
113
+ <Text style={galleryStyles.attributionText}>{stripHTML(attribution)}</Text>
114
+ </ScrollView>
132
115
  );
133
116
  };
134
117
 
package/src/components/StoryGallery/styles.js CHANGED
@@ -3,7 +3,7 @@ import { useContext } from 'react';
3
3
  import { AppTheme } from '../../utils';
4
4
 
5
5
  export const styles = ({ FONT_SIZE }) => {
6
- const { width: deviceWidth } = Dimensions.get('window');
6
+ const { width: deviceWidth, height: deviceHeight } = Dimensions.get('window');
7
7
  const { theme } = useContext(AppTheme);
8
8
  const { COLORS, DARK_MODE, FONT_FAMILY } = theme;
9
9
 
@@ -16,16 +16,15 @@ export const styles = ({ FONT_SIZE }) => {
16
16
  width: '100%',
17
17
  flexDirection: 'row',
18
18
  flexWrap: 'wrap',
19
- justifyContent: 'space-between',
20
19
  },
21
20
  halfWidth: {
22
21
  width: (deviceWidth - 30) / 2,
23
22
  height: 124,
24
23
  },
25
24
  fullWidth: {
26
- width: (deviceWidth - 30) / 3,
27
- height: (deviceWidth - 30) / 3,
28
- marginVertical: 2.5,
25
+ width: (deviceWidth - 40) / 3,
26
+ height: (deviceWidth - 40) / 3,
27
+ margin: 2.5,
29
28
  },
30
29
  descText: {
31
30
  fontSize: FONT_SIZE.h2,
@@ -59,7 +58,6 @@ export const styles = ({ FONT_SIZE }) => {
59
58
  height: '80%',
60
59
  },
61
60
  wrapper: {
62
- paddingHorizontal: 10,
63
61
  flex: 1,
64
62
  backgroundColor: 'black',
65
63
  width: '100%',
@@ -70,7 +68,8 @@ export const styles = ({ FONT_SIZE }) => {
70
68
  opacity: 0.8,
71
69
  color: 'white',
72
70
  marginTop: 10,
73
- marginHorizontal: 10,
71
+ paddingHorizontal: 10,
72
+ marginBottom: 5,
74
73
  fontFamily: FONT_FAMILY.secondary,
75
74
  },
76
75
  attributionText: {
@@ -79,7 +78,7 @@ export const styles = ({ FONT_SIZE }) => {
79
78
  fontSize: FONT_SIZE.h3,
80
79
  opacity: 0.8,
81
80
  color: 'white',
82
- marginHorizontal: 10,
81
+ paddingHorizontal: 10,
83
82
  fontFamily: FONT_FAMILY.secondary,
84
83
  },
85
84
  leftArrow: {
@@ -109,11 +108,11 @@ export const styles = ({ FONT_SIZE }) => {
109
108
  justifyContent: 'center',
110
109
  },
111
110
  carouselImage: {
112
- width: '100%',
113
- height: '80%',
111
+ width: deviceWidth - 20,
112
+ height: (2 * deviceHeight) / 3,
114
113
  },
115
114
  carouselContainer: {
116
- width: deviceWidth - 10,
115
+ width: deviceWidth - 20,
117
116
  margin: 10,
118
117
  },
119
118
  showMoreImageContainer: {
package/src/components/StoryHeader/index.js CHANGED
@@ -1,15 +1,13 @@
1
1
  import get from 'lodash/get';
2
2
  import PropTypes from 'prop-types';
3
3
  import React, { useContext } from 'react';
4
- import {
5
- TouchableOpacity, View, Linking,
6
- } from 'react-native';
7
- import HTML from 'react-native-render-html';
4
+ import { TouchableOpacity, View } from 'react-native';
8
5
  import {
9
6
  getImageMetadata,
10
7
  getScreenPercentageWidth,
11
8
  getTimeInFormat,
12
9
  AppTheme,
10
+ stripHTML,
13
11
  } from '../../utils';
14
12
  import { STORY_TYPES } from '../../utils/story-types';
15
13
  import {
@@ -68,38 +66,19 @@ export const StoryHeader = (props) => {
68
66
  const { story } = props;
69
67
  const sectionData = get(story, ['sections', 0], {});
70
68
  const { theme } = useContext(AppTheme);
71
- const {
72
- COLORS, CAN_COPY_TEXT, locale, FONT_FAMILY,
73
- } = theme;
69
+ const { COLORS, locale, FONT_FAMILY } = theme;
74
70
  const styles = storyHeaderStyles(COLORS, FONT_FAMILY);
75
- const imgCaption = story['hero-image-caption'];
76
- const attri = story['hero-image-attribution'];
77
- const imgAttribution = imgCaption && attri ? ` | ${attri}` : attri;
71
+ const caption = story['hero-image-caption'];
72
+ const attribution = story['hero-image-attribution'];
78
73
 
79
74
  const showAttribution = () => {
80
- if (!imgCaption && !imgAttribution) {
75
+ if (!caption && !attribution) {
81
76
  return null;
82
77
  }
83
78
  return (
84
79
  <View style={styles.captionContainerStyle}>
85
- <HTML
86
- html={imgCaption}
87
- textSelectable={CAN_COPY_TEXT}
88
- key={Math.random()}
89
- baseFontStyle={styles.captionStyle}
90
- onLinkPress={(evt, href) => {
91
- Linking.openURL(href);
92
- }}
93
- />
94
- <HTML
95
- html={attri}
96
- textSelectable={CAN_COPY_TEXT}
97
- key={Math.random()}
98
- baseFontStyle={styles.attributionStyle}
99
- onLinkPress={(evt, href) => {
100
- Linking.openURL(href);
101
- }}
102
- />
80
+ <Text style={styles.captionStyle}>{stripHTML(caption)}</Text>
81
+ <Text style={styles.attributionStyle}>{stripHTML(attribution)}</Text>
103
82
  </View>
104
83
  );
105
84
  };
package/src/components/StoryHeader/styles.js CHANGED
@@ -26,11 +26,10 @@ export const storyHeaderStyles = (COLORS, FONT_FAMILY) => StyleSheet.create({
26
26
  opacity: 0.8,
27
27
  },
28
28
  captionStyle: {
29
- padding: 10,
30
- paddingBottom: 0,
31
29
  color: COLORS.BRAND_BLACK,
32
30
  fontFamily: FONT_FAMILY.secondary,
33
31
  opacity: 0.8,
32
+ marginBottom: 5,
34
33
  },
35
34
  attributionStyle: {
36
35
  color: COLORS.BRAND_BLACK,
@@ -38,10 +37,8 @@ export const storyHeaderStyles = (COLORS, FONT_FAMILY) => StyleSheet.create({
38
37
  opacity: 0.8,
39
38
  },
40
39
  captionContainerStyle: {
41
- paddingHorizontal: 5,
40
+ padding: 10,
42
41
  flexDirection: 'column',
43
- flexWrap: 'wrap',
44
- marginTop: 10,
45
42
  },
46
43
  sectionText: {
47
44
  color: COLORS.BRAND_1,
package/src/components/StoryImage/index.js CHANGED
@@ -24,24 +24,15 @@ export const StoryImage = ({
24
24
 
25
25
  const styles = storyImageStyles(theme, imageData.metaData);
26
26
 
27
- const getAttributionElement = () => {
28
- if (!card['image-attribution']) return null;
29
- return (
30
- <Text style={styles.attributionText}>
31
- {` | ${stripHTML(card['image-attribution'])}`}
32
- </Text>
33
- );
34
- };
35
-
36
27
  return (
37
28
  <>
38
29
  <LightBoxImage data={imageData} currentLayout={currentLayout} />
39
30
 
40
31
  <View style={styles.titleContainer}>
41
32
  <View style={styles.imageMeta}>
42
- <Text style={styles.cardTitleText}>
43
- {stripHTML(card.title)}
44
- {getAttributionElement()}
33
+ <Text style={styles.cardTitleText}>{stripHTML(card.title)}</Text>
34
+ <Text style={styles.attributionText}>
35
+ {stripHTML(card['image-attribution'])}
45
36
  </Text>
46
37
  </View>
47
38
  {sharePhotoCard && (
@@ -59,4 +50,5 @@ StoryImage.propTypes = {
59
50
  cdn: PropTypes.string.isRequired,
60
51
  share: PropTypes.func.isRequired,
61
52
  currentLayout: PropTypes.object,
53
+ storyType: PropTypes.string,
62
54
  };
package/src/components/StoryImage/styles.js CHANGED
@@ -20,15 +20,15 @@ export const storyImageStyles = ({ COLORS, FONT_SIZE }, metadata = {}) => {
20
20
  fontSize: FONT_SIZE.h5,
21
21
  lineHeight: FONT_SIZE.h5 * 1.3,
22
22
  color: COLORS.BRAND_BLACK,
23
+ marginBottom: 5,
23
24
  },
24
25
  attributionText: {
25
26
  fontSize: FONT_SIZE.h5,
26
27
  lineHeight: FONT_SIZE.h5 * 1.3,
27
28
  color: COLORS.IMAGE_LIGHTGREY,
29
+ marginBottom: 5,
28
30
  },
29
31
  imageMeta: {
30
- flexDirection: 'row',
31
- alignItems: 'center',
32
32
  width: '85%',
33
33
  },
34
34
  });