@office-iss/react-native-win32 0.75.2 → 0.76.0-preview.2

package/Libraries/StyleSheet/processBoxShadow.js

@@ -0,0 +1,209 @@
+/**
+ * Copyright (c) Meta Platforms, Inc. and affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @flow strict-local
+ * @format
+ * @oncall react-native
+ */
+
+import type {ProcessedColorValue} from './processColor';
+import type {BoxShadowValue} from './StyleSheetTypes';
+
+import processColor from './processColor';
+
+export type ParsedBoxShadow = {
+  offsetX: number,
+  offsetY: number,
+  color?: ProcessedColorValue,
+  blurRadius?: number,
+  spreadDistance?: number,
+  inset?: boolean,
+};
+
+export default function processBoxShadow(
+  rawBoxShadows: ?($ReadOnlyArray<BoxShadowValue> | string),
+): Array<ParsedBoxShadow> {
+  const result: Array<ParsedBoxShadow> = [];
+  if (rawBoxShadows == null) {
+    return result;
+  }
+
+  const boxShadowList =
+    typeof rawBoxShadows === 'string'
+      ? parseBoxShadowString(rawBoxShadows.replace(/\n/g, ' '))
+      : rawBoxShadows;
+
+  for (const rawBoxShadow of boxShadowList) {
+    const parsedBoxShadow: ParsedBoxShadow = {
+      offsetX: 0,
+      offsetY: 0,
+    };
+
+    let value;
+    for (const arg in rawBoxShadow) {
+      switch (arg) {
+        case 'offsetX':
+          value =
+            typeof rawBoxShadow.offsetX === 'string'
+              ? parseLength(rawBoxShadow.offsetX)
+              : rawBoxShadow.offsetX;
+          if (value == null) {
+            return [];
+          }
+
+          parsedBoxShadow.offsetX = value;
+          break;
+        case 'offsetY':
+          value =
+            typeof rawBoxShadow.offsetY === 'string'
+              ? parseLength(rawBoxShadow.offsetY)
+              : rawBoxShadow.offsetY;
+          if (value == null) {
+            return [];
+          }
+
+          parsedBoxShadow.offsetY = value;
+          break;
+        case 'spreadDistance':
+          value =
+            typeof rawBoxShadow.spreadDistance === 'string'
+              ? parseLength(rawBoxShadow.spreadDistance)
+              : rawBoxShadow.spreadDistance;
+          if (value == null) {
+            return [];
+          }
+
+          parsedBoxShadow.spreadDistance = value;
+          break;
+        case 'blurRadius':
+          value =
+            typeof rawBoxShadow.blurRadius === 'string'
+              ? parseLength(rawBoxShadow.blurRadius)
+              : rawBoxShadow.blurRadius;
+          if (value == null || value < 0) {
+            return [];
+          }
+
+          parsedBoxShadow.blurRadius = value;
+          break;
+        case 'color':
+          const color = processColor(rawBoxShadow.color);
+          if (color == null) {
+            return [];
+          }
+
+          parsedBoxShadow.color = color;
+          break;
+        case 'inset':
+          parsedBoxShadow.inset = rawBoxShadow.inset;
+      }
+    }
+    result.push(parsedBoxShadow);
+  }
+  return result;
+}
+
+function parseBoxShadowString(rawBoxShadows: string): Array<BoxShadowValue> {
+  let result: Array<BoxShadowValue> = [];
+
+  for (const rawBoxShadow of rawBoxShadows
+    .split(/,(?![^()]*\))/) // split by comma that is not in parenthesis
+    .map(bS => bS.trim())
+    .filter(bS => bS !== '')) {
+    const boxShadow: BoxShadowValue = {
+      offsetX: 0,
+      offsetY: 0,
+    };
+    let offsetX: number | string;
+    let offsetY: number | string;
+    let keywordDetectedAfterLength = false;
+
+    let lengthCount = 0;
+
+    // split rawBoxShadow string by all whitespaces that are not in parenthesis
+    const args = rawBoxShadow.split(/\s+(?![^(]*\))/);
+    for (const arg of args) {
+      const processedColor = processColor(arg);
+      if (processedColor != null) {
+        if (boxShadow.color != null) {
+          return [];
+        }
+        if (offsetX != null) {
+          keywordDetectedAfterLength = true;
+        }
+        boxShadow.color = arg;
+        continue;
+      }
+
+      if (arg === 'inset') {
+        if (boxShadow.inset != null) {
+          return [];
+        }
+        if (offsetX != null) {
+          keywordDetectedAfterLength = true;
+        }
+        boxShadow.inset = true;
+        continue;
+      }
+
+      switch (lengthCount) {
+        case 0:
+          offsetX = arg;
+          lengthCount++;
+          break;
+        case 1:
+          if (keywordDetectedAfterLength) {
+            return [];
+          }
+          offsetY = arg;
+          lengthCount++;
+          break;
+        case 2:
+          if (keywordDetectedAfterLength) {
+            return [];
+          }
+          boxShadow.blurRadius = arg;
+          lengthCount++;
+          break;
+        case 3:
+          if (keywordDetectedAfterLength) {
+            return [];
+          }
+          boxShadow.spreadDistance = arg;
+          lengthCount++;
+          break;
+        default:
+          return [];
+      }
+    }
+
+    if (offsetX == null || offsetY == null) {
+      return [];
+    }
+
+    boxShadow.offsetX = offsetX;
+    boxShadow.offsetY = offsetY;
+
+    result.push(boxShadow);
+  }
+  return result;
+}
+
+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/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]);
+}