@micromag/screen-ranking 0.3.595 → 0.3.596

package/es/index.js

@@ -1,6 +1,7 @@
 import { FormattedMessage, defineMessage } from 'react-intl';
 import _defineProperty from '@babel/runtime/helpers/defineProperty';
 import _slicedToArray from '@babel/runtime/helpers/slicedToArray';
+import _objectSpread from '@babel/runtime/helpers/objectSpread2';
 import _toConsumableArray from '@babel/runtime/helpers/toConsumableArray';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
@@ -25,6 +26,8 @@ var propTypes = {
   layout: PropTypes.oneOf(['side', 'over']),
   title: PropTypes$1.headingElement,
   items: PropTypes.arrayOf(PropTypes$1.textElement),
+  itemTitleStyle: PropTypes$1.textStyle,
+  itemDescriptionStyle: PropTypes$1.textStyle,
   numbersStyle: PropTypes$1.textStyle,
   ascending: PropTypes.bool,
   spacing: PropTypes.number,
@@ -40,6 +43,8 @@ var defaultProps = {
   layout: 'side',
   title: null,
   items: [null],
+  itemTitleStyle: null,
+  itemDescriptionStyle: null,
   numbersStyle: null,
   ascending: false,
   spacing: 20,
@@ -55,6 +60,8 @@ var RankingScreen = function RankingScreen(_ref) {
   var layout = _ref.layout,
     title = _ref.title,
     items = _ref.items,
+    itemTitleStyle = _ref.itemTitleStyle,
+    itemDescriptionStyle = _ref.itemDescriptionStyle,
     numbersStyle = _ref.numbersStyle,
     ascending = _ref.ascending,
     spacing = _ref.spacing,
@@ -117,6 +124,12 @@ var RankingScreen = function RankingScreen(_ref) {
       description = _ref2$description === void 0 ? null : _ref2$description;
     var hasItemTitle = isTextFilled(itemTitle);
     var hasDescription = isTextFilled(description);
+    var _ref3 = itemTitle || {},
+      _ref3$textStyle = _ref3.textStyle,
+      titleTextStyle = _ref3$textStyle === void 0 ? null : _ref3$textStyle;
+    var _ref4 = description || {},
+      _ref4$textStyle = _ref4.textStyle,
+      descriptionTextStyle = _ref4$textStyle === void 0 ? null : _ref4$textStyle;
     var itemTitleElement = /*#__PURE__*/React.createElement("div", {
       className: styles.itemTitle
     }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -130,7 +143,9 @@ var RankingScreen = function RankingScreen(_ref) {
       }),
       emptyClassName: styles.empty,
       isEmpty: !hasItemTitle
-    }, hasItemTitle ? /*#__PURE__*/React.createElement(Heading, itemTitle) : null));
+    }, hasItemTitle ? /*#__PURE__*/React.createElement(Heading, Object.assign({}, itemTitle, {
+      textStyle: _objectSpread(_objectSpread({}, itemTitleStyle || null), titleTextStyle)
+    })) : null));
     var descriptionElement = /*#__PURE__*/React.createElement("div", {
       className: styles.description
     }, /*#__PURE__*/React.createElement(ScreenElement, {
@@ -144,7 +159,9 @@ var RankingScreen = function RankingScreen(_ref) {
       }),
       emptyClassName: styles.empty,
       isEmpty: !hasDescription
-    }, hasDescription ? /*#__PURE__*/React.createElement(Text, description) : null));
+    }, hasDescription ? /*#__PURE__*/React.createElement(Text, Object.assign({}, description, {
+      textStyle: _objectSpread(_objectSpread({}, itemDescriptionStyle || null), descriptionTextStyle)
+    })) : null));
     var rankText = "".concat(ascending ? itemI + 1 : itemsCount - itemI);
     return /*#__PURE__*/React.createElement("div", {
       className: styles.item,
@@ -178,8 +195,8 @@ var RankingScreen = function RankingScreen(_ref) {
     footerRef = _useDimensionObserver.ref,
     _useDimensionObserver2 = _useDimensionObserver.height,
     foterHeight = _useDimensionObserver2 === void 0 ? 0 : _useDimensionObserver2;
-  var onScrolledBottom = useCallback(function (_ref3) {
-    var initial = _ref3.initial;
+  var onScrolledBottom = useCallback(function (_ref5) {
+    var initial = _ref5.initial;
     if (initial) {
       trackScreenEvent('scroll', 'Screen');
     }
@@ -312,26 +329,57 @@ var definition = {
       }]
     })
   }, {
-    name: 'ascending',
-    type: 'toggle',
+    type: 'fields',
     label: defineMessage({
-      id: "9DhYaZ",
+      id: "xac4z/",
       defaultMessage: [{
         "type": 0,
-        "value": "Ascending"
+        "value": "Entry styles"
       }]
-    })
+    }),
+    isList: true,
+    fields: [{
+      name: 'itemTitleStyle',
+      type: 'text-style-form',
+      label: defineMessage({
+        id: "+AEVbJ",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Title"
+        }]
+      })
+    }, {
+      name: 'itemDescriptionStyle',
+      type: 'text-style-form',
+      label: defineMessage({
+        id: "ZCe0r4",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Description"
+        }]
+      })
+    }, {
+      name: 'numbersStyle',
+      type: 'text-style-form',
+      theme: {
+        textStyle: 'heading1'
+      },
+      label: defineMessage({
+        id: "UdrdRF",
+        defaultMessage: [{
+          "type": 0,
+          "value": "Numbers style"
+        }]
+      })
+    }]
   }, {
-    name: 'numbersStyle',
-    type: 'text-style',
-    theme: {
-      textStyle: 'heading1'
-    },
+    name: 'ascending',
+    type: 'toggle',
     label: defineMessage({
-      id: "UdrdRF",
+      id: "9DhYaZ",
       defaultMessage: [{
         "type": 0,
-        "value": "Numbers style"
+        "value": "Ascending"
       }]
     })
   }, {

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@micromag/screen-ranking",
-    "version": "0.3.595",
+    "version": "0.3.596",
     "private": false,
     "description": "",
     "keywords": [
@@ -81,5 +81,5 @@
         "access": "public",
         "registry": "https://registry.npmjs.org/"
     },
-    "gitHead": "0d2da374482260110907b2d6ecd8fd9d192fe9f0"
+    "gitHead": "69970fa5ea5e5ef1a62454dbfda70a9a97b3aa55"
 }