react-native-tvos 0.75.4-0 → 0.76.0-0

package/Libraries/StyleSheet/processFilter.js

@@ -4,66 +4,113 @@
  * This source code is licensed under the MIT license found in the
  * LICENSE file in the root directory of this source tree.
  *
- * @format
+ * @format strict-local
  * @flow
+ * @oncall react-native
  */
 
 'use strict';
 
-export type FilterPrimitive =
-  | {brightness: number | string}
-  | {blur: number | string}
-  | {contrast: number | string}
-  | {grayscale: number | string}
-  | {hueRotate: number | string}
-  | {invert: number | string}
-  | {opacity: number | string}
-  | {saturate: number | string}
-  | {sepia: number | string};
+import type {ColorValue} from './StyleSheet';
+import type {DropShadowValue, FilterFunction} from './StyleSheetTypes';
+
+import processColor from './processColor';
+
+type ParsedFilter =
+  | {brightness: number}
+  | {blur: number}
+  | {contrast: number}
+  | {grayscale: number}
+  | {hueRotate: number}
+  | {invert: number}
+  | {opacity: number}
+  | {saturate: number}
+  | {sepia: number}
+  | {dropShadow: ParsedDropShadow};
+
+type ParsedDropShadow = {
+  offsetX: number,
+  offsetY: number,
+  standardDeviation?: number,
+  color?: ColorValue,
+};
 
 export default function processFilter(
-  filter: $ReadOnlyArray<FilterPrimitive> | string,
-): $ReadOnlyArray<FilterPrimitive> {
-  let result: Array<FilterPrimitive> = [];
+  filter: ?($ReadOnlyArray<FilterFunction> | string),
+): $ReadOnlyArray<ParsedFilter> {
+  let result: Array<ParsedFilter> = [];
+  if (filter == null) {
+    return result;
+  }
+
   if (typeof filter === 'string') {
-    // matches on functions with args like "brightness(1.5)"
-    const regex = new RegExp(/(\w+)\(([^)]+)\)/g);
+    filter = filter.replace(/\n/g, ' ');
+
+    // matches on functions with args and nested functions like "drop-shadow(10 10 10 rgba(0, 0, 0, 1))"
+    const regex = /([\w-]+)\(([^()]*|\([^()]*\)|[^()]*\([^()]*\)[^()]*)\)/g;
     let matches;
 
     while ((matches = regex.exec(filter))) {
-      const amount = _getFilterAmount(matches[1], matches[2]);
-
-      if (amount != null) {
-        const filterPrimitive = {};
-        // $FlowFixMe The key will be the correct one but flow can't see that.
-        filterPrimitive[matches[1]] = amount;
-        // $FlowFixMe The key will be the correct one but flow can't see that.
-        result.push(filterPrimitive);
+      let filterName = matches[1].toLowerCase();
+      if (filterName === 'drop-shadow') {
+        const dropShadow = parseDropShadow(matches[2]);
+        if (dropShadow != null) {
+          result.push({dropShadow});
+        } else {
+          return [];
+        }
       } else {
-        // If any primitive is invalid then apply none of the filters. This is how
-        // web works and makes it clear that something is wrong becuase no
-        // graphical effects are happening.
-        return [];
+        const camelizedName =
+          filterName === 'drop-shadow'
+            ? 'dropShadow'
+            : filterName === 'hue-rotate'
+              ? 'hueRotate'
+              : filterName;
+        const amount = _getFilterAmount(camelizedName, matches[2]);
+
+        if (amount != null) {
+          const filterFunction = {};
+          // $FlowFixMe The key will be the correct one but flow can't see that.
+          filterFunction[camelizedName] = amount;
+          // $FlowFixMe The key will be the correct one but flow can't see that.
+          result.push(filterFunction);
+        } else {
+          // If any primitive is invalid then apply none of the filters. This is how
+          // web works and makes it clear that something is wrong becuase no
+          // graphical effects are happening.
+          return [];
+        }
       }
     }
-  } else {
-    for (const filterPrimitive of filter) {
-      const [filterName, filterValue] = Object.entries(filterPrimitive)[0];
-      const amount = _getFilterAmount(filterName, filterValue);
-
-      if (amount != null) {
-        const resultObject = {};
-        // $FlowFixMe
-        resultObject[filterName] = amount;
+  } else if (Array.isArray(filter)) {
+    for (const filterFunction of filter) {
+      const [filterName, filterValue] = Object.entries(filterFunction)[0];
+      if (filterName === 'dropShadow') {
         // $FlowFixMe
-        result.push(resultObject);
+        const dropShadow = parseDropShadow(filterValue);
+        if (dropShadow == null) {
+          return [];
+        }
+        result.push({dropShadow});
       } else {
-        // If any primitive is invalid then apply none of the filters. This is how
-        // web works and makes it clear that something is wrong becuase no
-        // graphical effects are happening.
-        return [];
+        const amount = _getFilterAmount(filterName, filterValue);
+
+        if (amount != null) {
+          const resultObject = {};
+          // $FlowFixMe
+          resultObject[filterName] = amount;
+          // $FlowFixMe
+          result.push(resultObject);
+        } else {
+          // If any primitive is invalid then apply none of the filters. This is how
+          // web works and makes it clear that something is wrong becuase no
+          // graphical effects are happening.
+          return [];
+        }
       }
     }
+  } else {
+    throw new TypeError(`${typeof filter} filter is not a string or array`);
   }
 
   return result;
@@ -130,3 +177,145 @@ function _getFilterAmount(filterName: string, filterArgs: mixed): ?number {
       return undefined;
   }
 }
+
+function parseDropShadow(
+  rawDropShadow: string | DropShadowValue,
+): ?ParsedDropShadow {
+  const dropShadow =
+    typeof rawDropShadow === 'string'
+      ? parseDropShadowString(rawDropShadow)
+      : rawDropShadow;
+
+  const parsedDropShadow: ParsedDropShadow = {
+    offsetX: 0,
+    offsetY: 0,
+  };
+  let offsetX: number;
+  let offsetY: number;
+
+  for (const arg in dropShadow) {
+    let value;
+    switch (arg) {
+      case 'offsetX':
+        value =
+          typeof dropShadow.offsetX === 'string'
+            ? parseLength(dropShadow.offsetX)
+            : dropShadow.offsetX;
+        if (value == null) {
+          return null;
+        }
+        offsetX = value;
+        break;
+      case 'offsetY':
+        value =
+          typeof dropShadow.offsetY === 'string'
+            ? parseLength(dropShadow.offsetY)
+            : dropShadow.offsetY;
+        if (value == null) {
+          return null;
+        }
+        offsetY = value;
+        break;
+      case 'standardDeviation':
+        value =
+          typeof dropShadow.standardDeviation === 'string'
+            ? parseLength(dropShadow.standardDeviation)
+            : dropShadow.standardDeviation;
+        if (value == null || value < 0) {
+          return null;
+        }
+        parsedDropShadow.standardDeviation = value;
+        break;
+      case 'color':
+        const color = processColor(dropShadow.color);
+        if (color == null) {
+          return null;
+        }
+        parsedDropShadow.color = color;
+        break;
+      default:
+        return null;
+    }
+  }
+
+  if (offsetX == null || offsetY == null) {
+    return null;
+  }
+
+  parsedDropShadow.offsetX = offsetX;
+  parsedDropShadow.offsetY = offsetY;
+
+  return parsedDropShadow;
+}
+
+function parseDropShadowString(rawDropShadow: string): ?DropShadowValue {
+  const dropShadow: DropShadowValue = {
+    offsetX: 0,
+    offsetY: 0,
+  };
+  let offsetX: string;
+  let offsetY: string;
+  let lengthCount = 0;
+  let keywordDetectedAfterLength = false;
+
+  // split args by all whitespaces that are not in parenthesis
+  for (const arg of rawDropShadow.split(/\s+(?![^(]*\))/)) {
+    const processedColor = processColor(arg);
+    if (processedColor != null) {
+      if (dropShadow.color != null) {
+        return null;
+      }
+      if (offsetX != null) {
+        keywordDetectedAfterLength = true;
+      }
+      dropShadow.color = arg;
+      continue;
+    }
+
+    switch (lengthCount) {
+      case 0:
+        offsetX = arg;
+        lengthCount++;
+        break;
+      case 1:
+        if (keywordDetectedAfterLength) {
+          return null;
+        }
+        offsetY = arg;
+        lengthCount++;
+        break;
+      case 2:
+        if (keywordDetectedAfterLength) {
+          return null;
+        }
+        dropShadow.standardDeviation = arg;
+        lengthCount++;
+        break;
+      default:
+        return null;
+    }
+  }
+  if (offsetX == null || offsetY == null) {
+    return null;
+  }
+
+  dropShadow.offsetX = offsetX;
+  dropShadow.offsetY = offsetY;
+  return dropShadow;
+}
+
+function parseLength(length: string): ?number {
+  // matches on args with units like "1.5 5% -80deg"
+  const argsWithUnitsRegex = /([+-]?\d*(\.\d+)?)([\w\W]+)?/g;
+  const match = argsWithUnitsRegex.exec(length);
+
+  if (!match || Number.isNaN(match[1])) {
+    return null;
+  }
+
+  if (match[3] != null && match[3] !== 'px') {
+    return null;
+  }
+
+  return Number(match[1]);
+}

package/Libraries/Text/BaseText/RCTBaseTextViewManager.mm

@@ -44,6 +44,7 @@ RCT_REMAP_SHADOW_PROPERTY(lineHeight, textAttributes.lineHeight, CGFloat)
 RCT_REMAP_SHADOW_PROPERTY(textAlign, textAttributes.alignment, NSTextAlignment)
 RCT_REMAP_SHADOW_PROPERTY(writingDirection, textAttributes.baseWritingDirection, NSWritingDirection)
 RCT_REMAP_SHADOW_PROPERTY(lineBreakStrategyIOS, textAttributes.lineBreakStrategy, NSLineBreakStrategy)
+RCT_REMAP_SHADOW_PROPERTY(lineBreakModeIOS, textAttributes.lineBreakMode, NSLineBreakMode)
 // Decoration
 RCT_REMAP_SHADOW_PROPERTY(textDecorationColor, textAttributes.textDecorationColor, UIColor)
 RCT_REMAP_SHADOW_PROPERTY(textDecorationStyle, textAttributes.textDecorationStyle, NSUnderlineStyle)

package/Libraries/Text/RCTTextAttributes.h

@@ -44,6 +44,7 @@ extern NSString *const RCTTextAttributesTagAttributeName;
 @property (nonatomic, assign) NSTextAlignment alignment;
 @property (nonatomic, assign) NSWritingDirection baseWritingDirection;
 @property (nonatomic, assign) NSLineBreakStrategy lineBreakStrategy;
+@property (nonatomic, assign) NSLineBreakMode lineBreakMode;
 // Decoration
 @property (nonatomic, strong, nullable) UIColor *textDecorationColor;
 @property (nonatomic, assign) NSUnderlineStyle textDecorationStyle;

package/Libraries/Text/RCTTextAttributes.mm

@@ -28,6 +28,7 @@ NSString *const RCTTextAttributesTagAttributeName = @"RCTTextAttributesTagAttrib
     _alignment = NSTextAlignmentNatural;
     _baseWritingDirection = NSWritingDirectionNatural;
     _lineBreakStrategy = NSLineBreakStrategyNone;
+    _lineBreakMode = NSLineBreakByWordWrapping;
     _textShadowRadius = NAN;
     _opacity = NAN;
     _textTransform = RCTTextTransformUndefined;
@@ -70,6 +71,7 @@ NSString *const RCTTextAttributesTagAttributeName = @"RCTTextAttributesTagAttrib
       ? textAttributes->_baseWritingDirection
       : _baseWritingDirection; // *
   _lineBreakStrategy = textAttributes->_lineBreakStrategy ?: _lineBreakStrategy;
+  _lineBreakMode = textAttributes->_lineBreakMode ?: _lineBreakMode;
 
   // Decoration
   _textDecorationColor = textAttributes->_textDecorationColor ?: _textDecorationColor;
@@ -128,6 +130,11 @@ NSString *const RCTTextAttributesTagAttributeName = @"RCTTextAttributesTagAttrib
     }
   }
 
+  if (_lineBreakMode != NSLineBreakByWordWrapping) {
+    paragraphStyle.lineBreakMode = _lineBreakMode;
+    isParagraphStyleUsed = YES;
+  }
+
   if (!isnan(_lineHeight)) {
     CGFloat lineHeight = _lineHeight * self.effectiveFontSizeMultiplier;
     paragraphStyle.minimumLineHeight = lineHeight;
@@ -336,6 +343,7 @@ static NSString *capitalizeText(NSString *text)
       // Paragraph Styles
       RCTTextAttributesCompareFloats(_lineHeight) && RCTTextAttributesCompareFloats(_alignment) &&
       RCTTextAttributesCompareOthers(_baseWritingDirection) && RCTTextAttributesCompareOthers(_lineBreakStrategy) &&
+      RCTTextAttributesCompareOthers(_lineBreakMode) &&
       // Decoration
       RCTTextAttributesCompareObjects(_textDecorationColor) && RCTTextAttributesCompareOthers(_textDecorationStyle) &&
       RCTTextAttributesCompareOthers(_textDecorationLine) &&

package/Libraries/Text/Text/RCTTextShadowView.mm

@@ -237,6 +237,8 @@
                         maximumFontSize:self.textAttributes.effectiveFont.pointSize];
   }
 
+  [self processTruncatedAttributedText:textStorage textContainer:textContainer layoutManager:layoutManager];
+
   if (!exclusiveOwnership) {
     [_cachedTextStorages setObject:textStorage forKey:key];
   }
@@ -244,6 +246,50 @@
   return textStorage;
 }
 
+- (void)processTruncatedAttributedText:(NSTextStorage *)textStorage
+                         textContainer:(NSTextContainer *)textContainer
+                         layoutManager:(NSLayoutManager *)layoutManager
+{
+  if (_maximumNumberOfLines > 0) {
+    [layoutManager ensureLayoutForTextContainer:textContainer];
+    NSRange glyphRange = [layoutManager glyphRangeForTextContainer:textContainer];
+    __block int line = 0;
+    [layoutManager
+        enumerateLineFragmentsForGlyphRange:glyphRange
+                                 usingBlock:^(
+                                     CGRect rect,
+                                     CGRect usedRect,
+                                     NSTextContainer *_Nonnull _,
+                                     NSRange lineGlyphRange,
+                                     BOOL *_Nonnull stop) {
+                                   if (line == textContainer.maximumNumberOfLines - 1) {
+                                     NSRange truncatedRange = [layoutManager
+                                         truncatedGlyphRangeInLineFragmentForGlyphAtIndex:lineGlyphRange.location];
+
+                                     if (truncatedRange.location != NSNotFound) {
+                                       NSRange characterRange =
+                                           [layoutManager characterRangeForGlyphRange:truncatedRange
+                                                                     actualGlyphRange:nil];
+                                       if (characterRange.location > 0 && characterRange.length > 0) {
+                                         // Remove color attributes for truncated range
+                                         for (NSAttributedStringKey key in
+                                              @[ NSForegroundColorAttributeName, NSBackgroundColorAttributeName ]) {
+                                           [textStorage removeAttribute:key range:characterRange];
+                                           id attribute = [textStorage attribute:key
+                                                                         atIndex:characterRange.location - 1
+                                                                  effectiveRange:nil];
+                                           if (attribute) {
+                                             [textStorage addAttribute:key value:attribute range:characterRange];
+                                           }
+                                         }
+                                       }
+                                     }
+                                   }
+                                   line++;
+                                 }];
+  }
+}
+
 - (void)layoutWithMetrics:(RCTLayoutMetrics)layoutMetrics layoutContext:(RCTLayoutContext)layoutContext
 {
   // If the view got new `contentFrame`, we have to redraw it because