@shoutem/ui 4.6.7 → 4.9.0

package/html/components/SimpleHtml.js

@@ -1,26 +1,26 @@
-import { Dimensions, Linking } from 'react-native';
-import autoBindReact from 'auto-bind/react';
-import _ from 'lodash';
-import PropTypes from 'prop-types';
 import React, { PureComponent } from 'react';
+import { Dimensions, Linking } from 'react-native';
 import Html from 'react-native-render-html';
+import { iframe } from 'react-native-render-html/src/HTMLRenderers';
 import {
-  cssStringToObject,
   cssObjectToString,
+  cssStringToObject,
 } from 'react-native-render-html/src/HTMLStyles';
-import WebView from 'react-native-webview';
 import {
-  makeTableRenderer,
   alterNode as tableAlterNode,
   cssRulesFromSpecs,
   defaultTableStylesSpecs,
   IGNORED_TAGS,
+  makeTableRenderer,
 } from 'react-native-render-html-table-bridge';
-import { iframe } from 'react-native-render-html/src/HTMLRenderers';
+import WebView from 'react-native-webview';
 import YoutubePlayer from 'react-native-youtube-iframe';
+import autoBindReact from 'auto-bind/react';
+import _ from 'lodash';
+import PropTypes from 'prop-types';
 import { connectStyle } from '@shoutem/theme';
-import { View } from '../../components/View';
 import { Text } from '../../components/Text';
+import { View } from '../../components/View';
 import getEmptyObjectKeys from '../services/getEmptyObjectKeys';
 import isValidVideoFormat from '../services/isValidVideoFormat';
 import Image from './Image';

package/html/elements/A.js

@@ -1,11 +1,11 @@
 import React, { PureComponent } from 'react';
+import { Linking } from 'react-native';
 import autoBindReact from 'auto-bind/react';
 import _ from 'lodash';
 import PropTypes from 'prop-types';
-import { Linking } from 'react-native';
 import { connectStyle } from '@shoutem/theme';
-import { isImg } from '../elements/Img';
-import { ElementPropTypes, combineMappers, mapElementProps } from '../Html';
+import { combineMappers, ElementPropTypes, mapElementProps } from '../Html';
+import { isImg } from './Img';
 import { Inline } from './Inline';
 
 class A extends PureComponent {

package/html/elements/Block.js

@@ -1,10 +1,10 @@
 import React from 'react';
 import _ from 'lodash';
 import {
-  ElementPropTypes,
   combineMappers,
-  mapElementProps,
+  ElementPropTypes,
   isBlockElement,
+  mapElementProps,
 } from '../Html';
 import { Inline } from './Inline';
 

package/html/elements/Img.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import _ from 'lodash';
 import Image from '../components/Image';
-import { ElementPropTypes, combineMappers, mapElementProps } from '../Html';
+import { combineMappers, ElementPropTypes, mapElementProps } from '../Html';
 
 export function isImg(element) {
   return _.get(element, 'tag') === 'img';

package/html/elements/Inline.js

@@ -4,17 +4,17 @@ import PropTypes from 'prop-types';
 import { Text } from '../../components/Text';
 import { TouchableOpacity } from '../../components/TouchableOpacity';
 import { View } from '../../components/View';
-import { Display } from '../services/ElementRegistry';
 import {
-  isBlockElement,
-  hasBlockElement,
-  ElementPropTypes,
   combineMappers,
+  ElementPropTypes,
+  hasBlockElement,
+  isBlockElement,
   mapElementProps,
   renderChildElements,
 } from '../Html';
+import { Display } from '../services/ElementRegistry';
 import { isImg } from './Img';
-import { removeWhiteSpace, isText } from './Text';
+import { isText, removeWhiteSpace } from './Text';
 
 export const blockDisplayIfAnyChildIsBlock = function(element) {
   return hasBlockElement(element.childElements)

package/html/elements/Text.js

@@ -1,8 +1,8 @@
 import React from 'react';
+import { Text } from 'react-native';
 import { AllHtmlEntities as Entities } from 'html-entities';
 import _ from 'lodash';
-import { Text } from 'react-native';
-import { ElementPropTypes, combineMappers, mapElementProps } from '../Html';
+import { combineMappers, ElementPropTypes, mapElementProps } from '../Html';
 
 const html = new Entities();
 

package/html/elements/list/Ol.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View } from '../../../components/View';
-import { ElementPropTypes, combineMappers, mapElementProps } from '../../Html';
+import { combineMappers, ElementPropTypes, mapElementProps } from '../../Html';
 import pickLiChildElements from './helpers/pickLiChildElements';
 import renderItems from './helpers/renderItems';
 

package/html/elements/list/Ul.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { View } from '../../../components/View';
-import { ElementPropTypes, combineMappers, mapElementProps } from '../../Html';
+import { combineMappers, ElementPropTypes, mapElementProps } from '../../Html';
 import pickLiChildElements from './helpers/pickLiChildElements';
 import renderItems from './helpers/renderItems';
 

package/html/elements/list/index.js

@@ -1,7 +1,7 @@
-import Ul from './Ul';
-import Li from './Li';
-import Ol from './Ol';
 import Bullet from './prefix/Bullet';
 import Number from './prefix/Number';
+import Li from './Li';
+import Ol from './Ol';
+import Ul from './Ul';
 
-export { Ul, Ol, Li, Bullet, Number };
+export { Bullet, Li, Number, Ol, Ul };

package/html/index.js

@@ -1,31 +1,31 @@
+import Gallery from './components/Gallery';
+import Image from './components/Image';
+import SimpleHtml from './components/SimpleHtml';
+import A from './elements/A';
+import Block from './elements/Block';
+import Br from './elements/Br';
+import Img from './elements/Img';
+import Inline, { InlineSettings } from './elements/Inline';
+import { Bullet, Li, Number, Ol, Ul } from './elements/list';
+import Text from './elements/Text';
+import Video from './elements/Video';
+import Virtual from './elements/Virtual';
 import {
-  registerElement,
   Display,
+  getElement,
   getElementDisplay,
   getElementProperty,
-  getElement,
+  registerElement,
 } from './services/ElementRegistry';
 import Html, {
+  combineMappers,
   customizeRenderElement,
   ElementPropTypes,
   hasBlockElement,
-  combineMappers,
   mapElementProps,
   renderChildElements,
   renderChildren,
 } from './Html';
-import SimpleHtml from './components/SimpleHtml';
-import Gallery from './components/Gallery';
-import Image from './components/Image';
-import Inline, { InlineSettings } from './elements/Inline';
-import Virtual from './elements/Virtual';
-import Block from './elements/Block';
-import Text from './elements/Text';
-import { Ul, Ol, Li, Bullet, Number } from './elements/list';
-import Img from './elements/Img';
-import A from './elements/A';
-import Br from './elements/Br';
-import Video from './elements/Video';
 
 // Text elements with primary inline display
 Html.registerElement('em', Inline, InlineSettings);
@@ -69,31 +69,31 @@ Html.registerElement('p', Block);
 Html.registerElement('div', Block);
 
 export {
-  Html,
-  customizeRenderElement,
-  ElementPropTypes,
-  hasBlockElement,
+  A,
+  Block,
   combineMappers,
-  mapElementProps,
-  renderChildElements,
-  renderChildren,
+  customizeRenderElement,
   // Element Registry
   Display,
-  registerElement,
+  ElementPropTypes,
+  // Components
+  Gallery,
+  getElement,
   getElementDisplay,
   getElementProperty,
-  getElement,
+  hasBlockElement,
+  Html,
+  Image,
+  Img,
   // Elements
   Inline,
-  Block,
-  Img,
-  A,
-  Ul,
-  Ol,
   Li,
-  Virtual,
-  // Components
-  Gallery,
-  Image,
+  mapElementProps,
+  Ol,
+  registerElement,
+  renderChildElements,
+  renderChildren,
   SimpleHtml,
+  Ul,
+  Virtual,
 };

package/html/services/ElementRegistry.js

@@ -36,7 +36,7 @@ export function getElementDisplay(element) {
     return null;
   }
 
-  const display = elementClass.display;
+  const { display } = elementClass;
   if (!display) {
     // eslint-disable-next-line no-console
     console.warn(

package/html/services/HtmlParser.js

@@ -40,7 +40,8 @@ function stripNewLines(html) {
     .replace(htmlNewLineRegex, match => {
       if (newLineAfterClosingTagRegex.test(match)) {
         return '>';
-      } else if (newLineBeforeOpeningTagRegex.test(match)) {
+      }
+      if (newLineBeforeOpeningTagRegex.test(match)) {
         return '<';
       }
       return ' ';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shoutem/ui",
-  "version": "4.6.7",
+  "version": "4.9.0",
   "description": "Styleable set of components for React Native applications",
   "scripts": {
     "lint": "eslint .",
@@ -9,33 +9,33 @@
     "test": "mocha '_tests_/*.js' --require react-native-mock-render/mock --require @babel/register"
   },
   "dependencies": {
-    "@react-native-community/datetimepicker": "^3.5.2",
-    "@shoutem/animation": "~0.14.0",
-    "@shoutem/eslint-config-react": "^1.0.1",
-    "@shoutem/theme": "~0.12.0",
-    "react-native-render-html-table-bridge": "0.6.0",
-    "auto-bind": "^4.0.0",
-    "babel-plugin-transform-decorators-legacy": "~1.3.4",
+    "@react-native-community/datetimepicker": "3.5.2",
+    "@shoutem/animation": "~0.15.0",
+    "@shoutem/eslint-config-react": "~1.0.6",
+    "@shoutem/theme": "~0.13.0",
+    "auto-bind": "4.0.0",
+    "babel-plugin-transform-decorators-legacy": "1.3.5",
     "buffer": "5.6.0",
     "events": "1.1.0",
-    "fs-extra": "^7.0.1",
+    "fs-extra": "7.0.1",
     "html-entities": "1.3.1",
     "htmlparser2": "3.10.1",
     "lodash": "4.17.21",
-    "prop-types": "^15.7.2",
+    "prop-types": "15.8.1",
     "qs": "6.9.3",
+    "react-native-device-info": "8.4.8",
     "react-native-lightbox": "shoutem/react-native-lightbox#v0.7.2",
-    "react-native-linear-gradient": "~2.5.6",
+    "react-native-linear-gradient": "2.5.6",
     "react-native-modal": "11.7.0",
     "react-native-photo-view": "shoutem/react-native-photo-view#0ffa1481f6b6cb8663cb291b7db1d6644440584d",
-    "react-native-render-html": "~4.2.0",
-    "react-native-status-bar-height": "2.5.0",
-    "react-native-svg": "^12.1.1",
-    "react-native-svg-transformer": "^0.14.3",
+    "react-native-render-html": "4.2.5",
+    "react-native-render-html-table-bridge": "0.6.0",
+    "react-native-svg": "12.1.1",
+    "react-native-svg-transformer": "0.14.3",
     "react-native-transformable-image": "shoutem/react-native-transformable-image#v0.0.20",
-    "react-native-vector-icons": "~6.6.0",
-    "react-native-webview": "~11.0.0",
-    "react-native-youtube-iframe": "~2.1.2",
+    "react-native-vector-icons": "6.6.0",
+    "react-native-webview": "11.0.3",
+    "react-native-youtube-iframe": "2.1.2",
     "stream": "0.0.2",
     "tinycolor2": "1.4.1"
   },
@@ -44,27 +44,31 @@
     "react-native": ">=0.61.5"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
+    "@babel/core": "7.16.7",
     "@babel/register": "7.9.0",
-    "@babel/plugin-proposal-decorators": "^7.3.0",
-    "babel-eslint": "^9.0.0",
+    "@babel/plugin-proposal-decorators": "7.16.7",
+    "@shoutem/eslint-config-react-native": "~1.0.2",
+    "babel-eslint": "10.1.0",
     "chai": "4.2.0",
     "deep-freeze": "0.0.1",
-    "eslint": "^6.8.0",
-    "eslint-plugin-import": "^2.20.1",
-    "eslint-plugin-jsx-a11y": "^1.3.1",
+    "eslint": "6.8.0",
+    "eslint-plugin-import": "2.25.4",
+    "eslint-plugin-jsx-a11y": "6.5.1",
     "eslint-plugin-prettier": "3.1.3",
-    "eslint-plugin-react": "^5.1.1",
-    "eslint-plugin-react-native": "~3.6.0",
-    "metro-react-native-babel-preset": "^0.56.0",
+    "eslint-plugin-react": "7.28.0",
+    "eslint-plugin-react-hooks": "4.2.0",
+    "eslint-plugin-react-native": "3.11.0",
+    "eslint-plugin-simple-import-sort": "7.0.0",
+    "metro-react-native-babel-preset": "0.66.2",
     "mocha": "7.1.2",
     "prettier": "1.19.1",
-    "react-addons-test-utils": "^15.6.2",
-    "react-dom": "^16.8.6",
+    "react-addons-test-utils": "15.6.2",
+    "react-dom": "16.14.0",
     "react-native-mock-render": "0.1.9"
   },
   "nativeDependencies": [
     "@react-native-community/datetimepicker",
+    "react-native-device-info",
     "react-native-linear-gradient",
     "react-native-photo-view",
     "react-native-svg",
@@ -119,11 +123,17 @@
     }
   ],
   "eslintConfig": {
-    "extends": "@shoutem/react",
+    "extends": "@shoutem/react-native",
     "parser": "babel-eslint",
     "parserOptions": {
       "ecmaVersion": 6,
       "sourceType": "module"
     }
+  },
+  "prettier": {
+    "bracketSpacing": true,
+    "jsxBracketSameLine": false,
+    "singleQuote": true,
+    "trailingComma": "all"
   }
 }

package/scripts/add-native-deps.js

@@ -33,7 +33,6 @@ function insertNativeDependencies() {
     console.log(
       `[@shoutem/ui] - error adding dependencies to root package.json\n${e.message}`,
     );
-    return;
   }
 }
 

package/theme.js

@@ -1,17 +1,17 @@
-import { Dimensions, StyleSheet, Platform, StatusBar } from 'react-native';
+import { Dimensions, Platform, StatusBar, StyleSheet } from 'react-native';
 import {
-  INCLUDE,
-  createVariations,
-  createSharedStyle,
-  inverseColorBrightnessForAmount,
   changeColorAlpha,
+  createSharedStyle,
+  createVariations,
   getSizeRelativeToReference,
+  INCLUDE,
+  inverseColorBrightnessForAmount,
 } from '@shoutem/theme';
 import {
-  NAVIGATION_HEADER_HEIGHT,
+  IPHONE_X_HOME_INDICATOR_PADDING,
   IPHONE_X_NOTCH_PADDING,
   IPHONE_XR_NOTCH_PADDING,
-  IPHONE_X_HOME_INDICATOR_PADDING,
+  NAVIGATION_HEADER_HEIGHT,
 } from './const';
 import { Device } from './helpers';
 
@@ -22,6 +22,7 @@ const STATUS_BAR_OFFSET =
 export const NAVIGATION_BAR_HEIGHT = Device.select({
   iPhoneX: NAVIGATION_HEADER_HEIGHT + IPHONE_X_NOTCH_PADDING,
   iPhoneXR: NAVIGATION_HEADER_HEIGHT + IPHONE_XR_NOTCH_PADDING,
+  notchedAndroid: NAVIGATION_HEADER_HEIGHT + StatusBar.currentHeight,
   default: NAVIGATION_HEADER_HEIGHT,
 });
 
@@ -1751,17 +1752,14 @@ export default (variables = defaultThemeVariables) => ({
     statusBar: {
       backgroundColor: variables.statusBarColor,
       statusBarStyle: variables.statusBarStyle,
-      height: Device.select({
-        iPhoneX: IPHONE_X_NOTCH_PADDING,
-        iPhoneXR: IPHONE_XR_NOTCH_PADDING,
-        default: 0,
-      }),
+      height: StatusBar.currentHeight,
     },
     screenBackground: variables.backgroundColor,
     navigationBarImage: {
       marginTop: Device.select({
         iPhoneX: IPHONE_X_NOTCH_PADDING,
         iPhoneXR: IPHONE_XR_NOTCH_PADDING,
+        notchedAndroid: StatusBar.currentHeight,
         default: 0,
       }),
       flex: 1,