@quintype/native-components 2.20.9 → 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 +7 -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 +4 -22
  6. package/src/components/StoryGallery/styles.js +6 -6
  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,13 @@
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
+
5
12
  ### [2.20.9](https://github.com/quintype/native-components/compare/v2.20.8...v2.20.9) (2023-07-10)
6
13
 
7
14
  ### [2.20.8](https://github.com/quintype/native-components/compare/v2.20.7...v2.20.8) (2023-06-30)
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@quintype/native-components",
3
- "version": "2.20.9",
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,7 +3,6 @@ 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,
@@ -11,15 +10,14 @@ import {
11
10
  } from 'react-native';
12
11
  import Icon from 'react-native-vector-icons/FontAwesome';
13
12
  import FastImage from 'react-native-fast-image';
14
- import HTML from 'react-native-render-html';
15
13
  import { styles } from './styles';
16
14
  import { Text } from '../index';
17
- import { AppTheme } from '../../utils/index';
15
+ import { AppTheme, stripHTML } from '../../utils/index';
18
16
  import { LightBoxImage } from '../LightBoxImage';
19
17
 
20
18
  export const StoryGallery = ({ cdn, card }) => {
21
19
  const { theme } = useContext(AppTheme);
22
- const { COLORS, DARK_MODE, CAN_COPY_TEXT } = theme;
20
+ const { COLORS, DARK_MODE } = theme;
23
21
  const galleryStyles = styles(theme);
24
22
  const storyElements = card['story-elements'];
25
23
  const [showModal, setShowModal] = useState(false);
@@ -111,24 +109,8 @@ export const StoryGallery = ({ cdn, card }) => {
111
109
  resizeMode={FastImage.resizeMode.contain}
112
110
  style={galleryStyles.carouselImage}
113
111
  />
114
- <HTML
115
- html={title}
116
- textSelectable={CAN_COPY_TEXT}
117
- key={Math.random()}
118
- baseFontStyle={galleryStyles.titleText}
119
- onLinkPress={(e, href) => {
120
- Linking.openURL(href);
121
- }}
122
- />
123
- <HTML
124
- html={attribution}
125
- textSelectable={CAN_COPY_TEXT}
126
- key={Math.random()}
127
- baseFontStyle={galleryStyles.attributionText}
128
- onLinkPress={(e, href) => {
129
- Linking.openURL(href);
130
- }}
131
- />
112
+ <Text style={galleryStyles.titleText}>{stripHTML(title)}</Text>
113
+ <Text style={galleryStyles.attributionText}>{stripHTML(attribution)}</Text>
132
114
  </ScrollView>
133
115
  );
134
116
  };
package/src/components/StoryGallery/styles.js CHANGED
@@ -58,7 +58,6 @@ export const styles = ({ FONT_SIZE }) => {
58
58
  height: '80%',
59
59
  },
60
60
  wrapper: {
61
- paddingHorizontal: 10,
62
61
  flex: 1,
63
62
  backgroundColor: 'black',
64
63
  width: '100%',
@@ -69,7 +68,8 @@ export const styles = ({ FONT_SIZE }) => {
69
68
  opacity: 0.8,
70
69
  color: 'white',
71
70
  marginTop: 10,
72
- marginHorizontal: 10,
71
+ paddingHorizontal: 10,
72
+ marginBottom: 5,
73
73
  fontFamily: FONT_FAMILY.secondary,
74
74
  },
75
75
  attributionText: {
@@ -78,7 +78,7 @@ export const styles = ({ FONT_SIZE }) => {
78
78
  fontSize: FONT_SIZE.h3,
79
79
  opacity: 0.8,
80
80
  color: 'white',
81
- marginHorizontal: 10,
81
+ paddingHorizontal: 10,
82
82
  fontFamily: FONT_FAMILY.secondary,
83
83
  },
84
84
  leftArrow: {
@@ -108,11 +108,11 @@ export const styles = ({ FONT_SIZE }) => {
108
108
  justifyContent: 'center',
109
109
  },
110
110
  carouselImage: {
111
- width: '100%',
112
- height: 2*deviceHeight/3,
111
+ width: deviceWidth - 20,
112
+ height: (2 * deviceHeight) / 3,
113
113
  },
114
114
  carouselContainer: {
115
- width: deviceWidth - 10,
115
+ width: deviceWidth - 20,
116
116
  margin: 10,
117
117
  },
118
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
  });